From 30346bd57c2f56aff5f6fc78f3d7b297515321b4 Mon Sep 17 00:00:00 2001
From: Nixevol <guaotiantang@gmail.com>
Date: Tue, 19 May 2026 12:12:25 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E8=B0=83=E6=95=B4=E8=BF=9E=E6=8E=A5?=
 =?UTF-8?q?=E9=85=8D=E7=BD=AE=E5=8D=A1=E7=89=87=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/project_context.md                   |   6 +
 frontend/src/components/SettingsPanel.vue | 140 +++++++++++-----------
 frontend/src/styles.css                   |   7 ++
 3 files changed, 84 insertions(+), 69 deletions(-)

diff --git a/docs/project_context.md b/docs/project_context.md
index b9f88e6..785e632 100644
--- a/docs/project_context.md
+++ b/docs/project_context.md
@@ -1,5 +1,11 @@
 # 项目上下文记录
 
+## 2026-05-19：调整连接配置页卡片布局
+
+- `frontend/src/components/SettingsPanel.vue` 将连接配置页改成左列堆叠“数据库配置”和“处理历史保留”，右列显示“远程数据源”，避免右侧远程数据源卡片高度把处理历史保留卡片挤到很下面。
+- `frontend/src/styles.css` 新增 `.settings-connection-stack`，左列卡片之间使用固定 18px 间距。
+- 已执行 `npm run build`；已通过本机 Chrome DevTools 验证设置页中数据库配置与处理历史保留同列显示，间距为 18px，远程数据源位于右列。
+
 ## 2026-05-19：新增处理历史保留配置并完善配置导入导出
 
 - `app/config.py` 新增 `HistoryRetention` 配置块，包含 `enabled` 和 `keep_count`；`keep_count=0` 表示不保留已结束处理历史，关闭开关时不自动删除历史。
diff --git a/frontend/src/components/SettingsPanel.vue b/frontend/src/components/SettingsPanel.vue
index 7040727..a7dc825 100644
--- a/frontend/src/components/SettingsPanel.vue
+++ b/frontend/src/components/SettingsPanel.vue
@@ -13,44 +13,78 @@
       <n-tabs type="line" animated class="settings-tabs">
         <n-tab-pane name="connection" tab="连接配置">
           <div class="settings-section-grid">
-            <n-card title="数据库配置" size="small" class="work-card">
-              <n-form label-placement="top">
-                <n-grid :cols="12" :x-gap="12">
-                  <n-gi :span="8">
-                    <n-form-item label="主机地址">
-                      <n-input v-model:value="mysqlForm.host" placeholder="localhost" />
-                    </n-form-item>
-                  </n-gi>
-                  <n-gi :span="4">
-                    <n-form-item label="端口">
-                      <n-input-number v-model:value="mysqlForm.port" class="full-width" :min="1" :max="65535" />
-                    </n-form-item>
-                  </n-gi>
-                </n-grid>
-                <n-form-item label="数据库名">
-                  <n-input v-model:value="mysqlForm.dbname" placeholder="CapacityReport" />
-                </n-form-item>
-                <n-grid :cols="12" :x-gap="12">
-                  <n-gi :span="6">
-                    <n-form-item label="用户名">
-                      <n-input v-model:value="mysqlForm.user" placeholder="root" />
-                    </n-form-item>
-                  </n-gi>
-                  <n-gi :span="6">
-                    <n-form-item label="密码">
-                      <n-input v-model:value="mysqlForm.passwd" type="password" show-password-on="click" />
-                    </n-form-item>
-                  </n-gi>
-                </n-grid>
-              </n-form>
+            <div class="settings-connection-stack">
+              <n-card title="数据库配置" size="small" class="work-card">
+                <n-form label-placement="top">
+                  <n-grid :cols="12" :x-gap="12">
+                    <n-gi :span="8">
+                      <n-form-item label="主机地址">
+                        <n-input v-model:value="mysqlForm.host" placeholder="localhost" />
+                      </n-form-item>
+                    </n-gi>
+                    <n-gi :span="4">
+                      <n-form-item label="端口">
+                        <n-input-number v-model:value="mysqlForm.port" class="full-width" :min="1" :max="65535" />
+                      </n-form-item>
+                    </n-gi>
+                  </n-grid>
+                  <n-form-item label="数据库名">
+                    <n-input v-model:value="mysqlForm.dbname" placeholder="CapacityReport" />
+                  </n-form-item>
+                  <n-grid :cols="12" :x-gap="12">
+                    <n-gi :span="6">
+                      <n-form-item label="用户名">
+                        <n-input v-model:value="mysqlForm.user" placeholder="root" />
+                      </n-form-item>
+                    </n-gi>
+                    <n-gi :span="6">
+                      <n-form-item label="密码">
+                        <n-input v-model:value="mysqlForm.passwd" type="password" show-password-on="click" />
+                      </n-form-item>
+                    </n-gi>
+                  </n-grid>
+                </n-form>
 
-              <template #footer>
-                <n-space justify="end">
-                  <n-button type="primary" :loading="savingMysql" @click="saveMysql">保存配置</n-button>
-                  <n-button :loading="testingDb" @click="testDatabase">测试连接</n-button>
-                </n-space>
-              </template>
-            </n-card>
+                <template #footer>
+                  <n-space justify="end">
+                    <n-button type="primary" :loading="savingMysql" @click="saveMysql">保存配置</n-button>
+                    <n-button :loading="testingDb" @click="testDatabase">测试连接</n-button>
+                  </n-space>
+                </template>
+              </n-card>
+
+              <n-card title="处理历史保留" size="small" class="work-card">
+                <n-form label-placement="top">
+                  <n-grid :cols="12" :x-gap="12">
+                    <n-gi :span="6">
+                      <n-form-item label="自动清理处理历史">
+                        <n-switch v-model:value="historyRetentionForm.enabled" />
+                      </n-form-item>
+                    </n-gi>
+                    <n-gi :span="6">
+                      <n-form-item label="保留最近次数">
+                        <n-input-number
+                          v-model:value="historyRetentionForm.keep_count"
+                          class="full-width"
+                          :min="0"
+                          :precision="0"
+                          :disabled="!historyRetentionForm.enabled"
+                        />
+                      </n-form-item>
+                    </n-gi>
+                  </n-grid>
+                  <p class="form-hint">关闭后不自动删除处理历史；启用后会在任务结束时自动清理，设置为 0 表示不保留历史，否则只保留最近指定次数的处理历史。</p>
+                </n-form>
+
+                <template #footer>
+                  <n-space justify="end">
+                    <n-button type="primary" :loading="savingHistoryRetention" @click="saveHistoryRetention">
+                      保存配置
+                    </n-button>
+                  </n-space>
+                </template>
+              </n-card>
+            </div>
 
             <n-card title="远程数据源" size="small" class="work-card">
               <n-form label-placement="top">
@@ -124,38 +158,6 @@
                 </n-space>
               </template>
             </n-card>
-
-            <n-card title="处理历史保留" size="small" class="work-card">
-              <n-form label-placement="top">
-                <n-grid :cols="12" :x-gap="12">
-                  <n-gi :span="6">
-                    <n-form-item label="自动清理处理历史">
-                      <n-switch v-model:value="historyRetentionForm.enabled" />
-                    </n-form-item>
-                  </n-gi>
-                  <n-gi :span="6">
-                    <n-form-item label="保留最近次数">
-                      <n-input-number
-                        v-model:value="historyRetentionForm.keep_count"
-                        class="full-width"
-                        :min="0"
-                        :precision="0"
-                        :disabled="!historyRetentionForm.enabled"
-                      />
-                    </n-form-item>
-                  </n-gi>
-                </n-grid>
-                <p class="form-hint">关闭后不自动删除处理历史；启用后会在任务结束时自动清理，设置为 0 表示不保留历史，否则只保留最近指定次数的处理历史。</p>
-              </n-form>
-
-              <template #footer>
-                <n-space justify="end">
-                  <n-button type="primary" :loading="savingHistoryRetention" @click="saveHistoryRetention">
-                    保存配置
-                  </n-button>
-                </n-space>
-              </template>
-            </n-card>
           </div>
         </n-tab-pane>
 
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 35e34eb..dfecd7b 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -1232,6 +1232,13 @@ select {
   scrollbar-width: thin;
 }
 
+.settings-connection-stack {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: 18px;
+}
+
 .settings-section-grid::-webkit-scrollbar {
   width: 8px;
   height: 8px;