diff --git a/docs/project_context.md b/docs/project_context.md
index 1ef5b00..5ba57c4 100644
--- a/docs/project_context.md
+++ b/docs/project_context.md
@@ -3,7 +3,7 @@
## 2026-05-19:压缩系统设置页布局高度
- `frontend/src/styles.css` 调整系统设置页为固定高度布局,外层 `settings-workspace` 减小 padding 并隐藏溢出,避免主内容区出现整页滚动条。
-- 字段映射配置卡片高度限制为 620px,内容通过卡片内部滚动区域浏览,避免规则映射页被字段列表撑高。
+- 字段映射配置卡片高度限制为约 520px,内容改为原生内部滚动区域浏览,避免规则映射页被字段列表撑高或内容溢出卡片。
## 2026-05-19:拆分系统设置页并支持远程源文件自动清理
diff --git a/frontend/src/components/SettingsPanel.vue b/frontend/src/components/SettingsPanel.vue
index 014408b..01ddbd7 100644
--- a/frontend/src/components/SettingsPanel.vue
+++ b/frontend/src/components/SettingsPanel.vue
@@ -180,7 +180,7 @@
-
+
-
+
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index d53a0bd..690efec 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -1177,7 +1177,7 @@ select {
.settings-workspace {
height: 100%;
box-sizing: border-box;
- padding: 14px 22px 16px;
+ padding: 10px 18px 12px;
overflow: hidden;
}
@@ -1199,7 +1199,7 @@ select {
.settings-tabs-card > .n-card__content {
flex: 1;
min-height: 0;
- padding: 8px 20px 14px;
+ padding: 6px 18px 12px;
overflow: hidden;
}
@@ -1216,7 +1216,7 @@ select {
.settings-tabs .n-tab-pane {
height: 100%;
- padding-top: 12px;
+ padding-top: 10px;
overflow: hidden;
}
@@ -1230,7 +1230,7 @@ select {
.settings-rules-grid {
display: grid;
align-items: start;
- gap: 20px;
+ gap: 18px;
}
.settings-section-grid {
@@ -1241,6 +1241,7 @@ select {
grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.4fr);
height: 100%;
min-height: 0;
+ overflow: hidden;
}
.settings-security-panel {
@@ -1270,15 +1271,17 @@ select {
}
.field-mapping-card {
- min-width: 0;
- height: min(620px, 100%);
- min-height: 0;
display: flex;
+ height: min(520px, calc(100vh - 250px));
+ min-height: 0;
+ min-width: 0;
flex-direction: column;
+ overflow: hidden;
}
.field-mapping-card > .n-card-header {
display: flex;
+ flex: 0 0 auto;
align-items: flex-start;
padding: 14px 20px;
}
@@ -1289,7 +1292,7 @@ select {
}
.field-mapping-card > .n-card__content {
- flex: 1;
+ flex: 1 1 auto;
min-height: 0;
max-height: none;
padding: 12px 16px;
@@ -1297,6 +1300,7 @@ select {
}
.field-mapping-card > .n-card__footer {
+ flex: 0 0 auto;
padding: 12px 20px;
background: var(--td-bg-color-container);
border-top: 1px solid var(--td-border-color-light);
@@ -1343,15 +1347,29 @@ select {
}
.field-mapping-scroll {
+ display: flex;
+ flex: 1 1 auto;
height: 100%;
max-height: none;
-}
-
-.field-mapping-scroll .n-scrollbar-content {
- display: flex;
+ min-height: 0;
flex-direction: column;
gap: 12px;
padding: 0 4px 4px 0;
+ overflow: auto;
+}
+
+.field-mapping-scroll::-webkit-scrollbar {
+ width: 8px;
+ height: 8px;
+}
+
+.field-mapping-scroll::-webkit-scrollbar-thumb {
+ background: var(--td-scrollbar-color);
+ border-radius: 8px;
+}
+
+.field-mapping-scroll::-webkit-scrollbar-track {
+ background: transparent;
}
.field-mapping-item {
@@ -1578,7 +1596,7 @@ select {
}
.field-mapping-card {
- height: 620px;
+ height: 520px;
}
}