From d285deaa41e33e1465372227421269e49e1584a8 Mon Sep 17 00:00:00 2001
From: Nixevol <guaotiantang@gmail.com>
Date: Tue, 19 May 2026 10:01:48 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E5=AD=97=E6=AE=B5?=
 =?UTF-8?q?=E6=98=A0=E5=B0=84=E5=8D=A1=E7=89=87=E5=86=85=E5=AE=B9=E6=BA=A2?=
 =?UTF-8?q?=E5=87=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/project_context.md                   |  2 +-
 frontend/src/components/SettingsPanel.vue |  4 +--
 frontend/src/styles.css                   | 44 ++++++++++++++++-------
 3 files changed, 34 insertions(+), 16 deletions(-)

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 @@
                 </div>
               </template>
 
-              <n-scrollbar class="field-mapping-scroll">
+              <div class="field-mapping-scroll">
                 <n-empty v-if="visibleFieldMappings.length === 0" description="没有匹配的字段配置" />
 
                 <div
@@ -234,7 +234,7 @@
                     <div v-else class="extract-empty">暂无提取来源</div>
                   </div>
                 </div>
-              </n-scrollbar>
+              </div>
 
               <template #footer>
                 <n-space justify="end">
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;
   }
 }