From 8975caf2b41abe110534eb0940cd1736b86f2ecc Mon Sep 17 00:00:00 2001
From: Nixevol <guaotiantang@gmail.com>
Date: Tue, 19 May 2026 09:56:31 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E5=8E=8B=E7=BC=A9=E7=B3=BB=E7=BB=9F?=
 =?UTF-8?q?=E8=AE=BE=E7=BD=AE=E9=A1=B5=E5=B8=83=E5=B1=80=E9=AB=98=E5=BA=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/project_context.md |  5 ++++
 frontend/src/styles.css | 58 ++++++++++++++++++++++++++++++++++-------
 2 files changed, 53 insertions(+), 10 deletions(-)

diff --git a/docs/project_context.md b/docs/project_context.md
index fa97a92..1ef5b00 100644
--- a/docs/project_context.md
+++ b/docs/project_context.md
@@ -1,5 +1,10 @@
 # 项目上下文记录
 
+## 2026-05-19：压缩系统设置页布局高度
+
+- `frontend/src/styles.css` 调整系统设置页为固定高度布局，外层 `settings-workspace` 减小 padding 并隐藏溢出，避免主内容区出现整页滚动条。
+- 字段映射配置卡片高度限制为 620px，内容通过卡片内部滚动区域浏览，避免规则映射页被字段列表撑高。
+
 ## 2026-05-19：拆分系统设置页并支持远程源文件自动清理
 
 - `frontend/src/components/SettingsPanel.vue` 的系统设置改为 Naive UI Tabs：连接配置页放数据库配置和远程数据源，规则映射页放 Sheet 过滤规则和字段映射配置，修改密码独立一页，避免设置内容堆在一个长页面。
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index df6613a..d53a0bd 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -1175,12 +1175,17 @@ select {
 
 /* ==================== Settings ==================== */
 .settings-workspace {
-  min-height: 100%;
-  padding: 24px 32px 40px;
+  height: 100%;
+  box-sizing: border-box;
+  padding: 14px 22px 16px;
+  overflow: hidden;
 }
 
 .settings-tabs-card {
+  display: flex;
+  height: 100%;
   min-width: 0;
+  flex-direction: column;
 }
 
 .settings-card-header {
@@ -1192,11 +1197,33 @@ select {
 }
 
 .settings-tabs-card > .n-card__content {
-  padding-top: 8px;
+  flex: 1;
+  min-height: 0;
+  padding: 8px 20px 14px;
+  overflow: hidden;
+}
+
+.settings-tabs-card > .n-card__content > .n-tabs {
+  height: 100%;
+}
+
+.settings-tabs {
+  display: flex;
+  height: 100%;
+  min-height: 0;
+  flex-direction: column;
 }
 
 .settings-tabs .n-tab-pane {
-  padding-top: 16px;
+  height: 100%;
+  padding-top: 12px;
+  overflow: hidden;
+}
+
+.settings-tabs .n-tabs-pane-wrapper {
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
 }
 
 .settings-section-grid,
@@ -1212,6 +1239,8 @@ select {
 
 .settings-rules-grid {
   grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.4fr);
+  height: 100%;
+  min-height: 0;
 }
 
 .settings-security-panel {
@@ -1242,7 +1271,10 @@ select {
 
 .field-mapping-card {
   min-width: 0;
-  height: fit-content;
+  height: min(620px, 100%);
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
 }
 
 .field-mapping-card > .n-card-header {
@@ -1257,7 +1289,9 @@ select {
 }
 
 .field-mapping-card > .n-card__content {
-  max-height: calc(100vh - 280px);
+  flex: 1;
+  min-height: 0;
+  max-height: none;
   padding: 12px 16px;
   overflow: hidden;
 }
@@ -1309,7 +1343,8 @@ select {
 }
 
 .field-mapping-scroll {
-  max-height: calc(100vh - 304px);
+  height: 100%;
+  max-height: none;
 }
 
 .field-mapping-scroll .n-scrollbar-content {
@@ -1538,9 +1573,12 @@ select {
     grid-template-columns: 1fr;
   }
 
-  .field-mapping-card > .n-card__content,
-  .field-mapping-scroll {
-    max-height: none;
+  .settings-tabs .n-tab-pane {
+    overflow: auto;
+  }
+
+  .field-mapping-card {
+    height: 620px;
   }
 }