From fa8a1fff18e2c5608fb2a5cb7bdeaba672a04e4d Mon Sep 17 00:00:00 2001
From: Nixevol <guaotiantang@gmail.com>
Date: Mon, 1 Jun 2026 17:32:14 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=8B=86=E5=88=86=E7=B3=BB=E7=BB=9F?=
 =?UTF-8?q?=E8=AE=BE=E7=BD=AE=E6=95=B0=E6=8D=AE=E5=BA=93=E5=92=8C=E8=BF=9C?=
 =?UTF-8?q?=E7=A8=8B=E5=88=86=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/project_context.md                   |   7 +
 frontend/src/components/SettingsPanel.vue | 153 ++++++++++++----------
 frontend/src/styles.css                   |  42 ++++--
 3 files changed, 121 insertions(+), 81 deletions(-)

diff --git a/docs/project_context.md b/docs/project_context.md
index f5edd32..ebde477 100644
--- a/docs/project_context.md
+++ b/docs/project_context.md
@@ -612,3 +612,10 @@
 - `app/services/auto_scheduler.py` now keeps RJ directory status keys clean instead of prefixing them with `rj:` in the combined scheduler response.
 - `frontend/src/components/SettingsPanel.vue` strips any legacy `rj:` prefix before rendering the scheduler directory name, so the UI shows `RJ/2.6G/...` instead of `rj:RJ/2.6G/...`.
 - This is display-only cleanup; the underlying RJ directory detection and readiness logic were not changed.
+
+## 2026-06-01: Settings page split
+
+- `frontend/src/components/SettingsPanel.vue` splits the former combined connection page into a dedicated `数据库配置` tab and a separate `远程数据源` tab.
+- Database-related settings now stay together with `数据库配置` and `处理历史保留`; remote automation settings now own the FTP/SFTP fields, auto-delete toggle, scheduler configuration, and scheduler status panel.
+- `frontend/src/styles.css` now uses dedicated layout classes for the database and remote settings panes, with independent scrolling and responsive single-column stacking on narrower screens.
+- Verification performed: `cd frontend && npm run build` passed. Browser inspection on `http://127.0.0.1:9081/settings` confirmed the two new tabs render correctly, the remote panel shows its own configuration and scheduler cards, and horizontal overflow remained at `0`.
diff --git a/frontend/src/components/SettingsPanel.vue b/frontend/src/components/SettingsPanel.vue
index 8430919..c377f9c 100644
--- a/frontend/src/components/SettingsPanel.vue
+++ b/frontend/src/components/SettingsPanel.vue
@@ -4,9 +4,9 @@
 
     <n-card size="small" class="work-card settings-tabs-card">
       <n-tabs type="line" animated class="settings-tabs">
-        <n-tab-pane name="connection" tab="连接配置">
-          <div class="settings-section-grid">
-            <div class="settings-connection-stack">
+        <n-tab-pane name="database" tab="数据库配置">
+          <div class="settings-database-panel">
+            <div class="settings-database-stack">
               <n-card title="数据库配置" size="small" class="work-card">
                 <n-form label-placement="top">
                   <n-grid :cols="12" :x-gap="12">
@@ -78,8 +78,12 @@
                 </template>
               </n-card>
             </div>
+          </div>
+        </n-tab-pane>
 
-            <n-card title="远程数据源" size="small" class="work-card">
+        <n-tab-pane name="remote" tab="远程数据源">
+          <div class="settings-remote-grid">
+            <n-card title="远程数据源配置" size="small" class="work-card settings-remote-card">
               <n-form label-placement="top">
                 <n-grid :cols="12" :x-gap="12">
                   <n-gi :span="6">
@@ -145,65 +149,77 @@
                   <n-input v-model:value="remoteForm.remote_dir" placeholder="/CapacityReportData" />
                 </n-form-item>
                 <p class="form-hint">自动化执行会递归下载该目录下的全部文件和文件夹到本地缓存，再按现有处理流程入库和执行脚本；自动删除源文件只会在处理成功后删除远程文件，保留目录结构。</p>
+              </n-form>
 
-                <n-divider class="settings-compact-divider">自动调度</n-divider>
-                <n-grid :cols="12" :x-gap="12">
-                  <n-gi :span="4">
-                    <n-form-item label="启用自动调度">
-                      <n-switch v-model:value="remoteForm.auto_scheduler.enabled" />
-                    </n-form-item>
-                  </n-gi>
-                  <n-gi :span="4">
-                    <n-form-item label="检查间隔（小时）">
-                      <n-input-number
-                        v-model:value="remoteForm.auto_scheduler.check_interval_hours"
-                        class="full-width"
-                        :min="1"
-                        :precision="0"
-                        :disabled="!remoteForm.auto_scheduler.enabled"
-                      />
-                    </n-form-item>
-                  </n-gi>
-                  <n-gi :span="4">
-                    <n-form-item label="目标周期">
-                      <n-select
-                        v-model:value="remoteForm.auto_scheduler.week_offset"
-                        :options="schedulerWeekOptions"
-                        :disabled="!remoteForm.auto_scheduler.enabled"
-                      />
-                    </n-form-item>
-                  </n-gi>
-                </n-grid>
-                <n-form-item label="预期目录">
-                  <div class="scheduler-dir-editor">
-                    <n-input-group>
-                      <n-input
-                        v-model:value="newSchedulerDirectory"
-                        placeholder="例如 4G/FDD"
-                        :disabled="!remoteForm.auto_scheduler.enabled"
-                        @keydown.enter.prevent="addSchedulerDirectory"
-                      />
-                      <n-button :disabled="!remoteForm.auto_scheduler.enabled" @click="addSchedulerDirectory">
-                        添加
-                      </n-button>
-                    </n-input-group>
-                    <div class="scheduler-dir-tags">
-                      <n-tag
-                        v-for="(directory, index) in remoteForm.auto_scheduler.expected_directories"
-                        :key="`${directory}-${index}`"
-                        closable
-                        :disabled="!remoteForm.auto_scheduler.enabled"
-                        @close="removeSchedulerDirectory(index)"
-                      >
-                        {{ directory }}
-                      </n-tag>
-                      <n-tag v-if="remoteForm.auto_scheduler.expected_directories.length === 0" type="default">
-                        按实际 ZIP 目录检测
-                      </n-tag>
+              <template #footer>
+                <n-space justify="end">
+                  <n-button type="primary" :loading="savingRemote" @click="saveRemote">保存配置</n-button>
+                  <n-button :loading="testingRemote" @click="testRemote">测试连接</n-button>
+                </n-space>
+              </template>
+            </n-card>
+
+            <div class="settings-remote-stack">
+              <n-card title="自动调度" size="small" class="work-card settings-scheduler-card">
+                <n-form label-placement="top">
+                  <n-grid :cols="12" :x-gap="12">
+                    <n-gi :span="4">
+                      <n-form-item label="启用自动调度">
+                        <n-switch v-model:value="remoteForm.auto_scheduler.enabled" />
+                      </n-form-item>
+                    </n-gi>
+                    <n-gi :span="4">
+                      <n-form-item label="检查间隔（小时）">
+                        <n-input-number
+                          v-model:value="remoteForm.auto_scheduler.check_interval_hours"
+                          class="full-width"
+                          :min="1"
+                          :precision="0"
+                          :disabled="!remoteForm.auto_scheduler.enabled"
+                        />
+                      </n-form-item>
+                    </n-gi>
+                    <n-gi :span="4">
+                      <n-form-item label="目标周期">
+                        <n-select
+                          v-model:value="remoteForm.auto_scheduler.week_offset"
+                          :options="schedulerWeekOptions"
+                          :disabled="!remoteForm.auto_scheduler.enabled"
+                        />
+                      </n-form-item>
+                    </n-gi>
+                  </n-grid>
+                  <n-form-item label="预期目录">
+                    <div class="scheduler-dir-editor">
+                      <n-input-group>
+                        <n-input
+                          v-model:value="newSchedulerDirectory"
+                          placeholder="例如 4G/FDD"
+                          :disabled="!remoteForm.auto_scheduler.enabled"
+                          @keydown.enter.prevent="addSchedulerDirectory"
+                        />
+                        <n-button :disabled="!remoteForm.auto_scheduler.enabled" @click="addSchedulerDirectory">
+                          添加
+                        </n-button>
+                      </n-input-group>
+                      <div class="scheduler-dir-tags">
+                        <n-tag
+                          v-for="(directory, index) in remoteForm.auto_scheduler.expected_directories"
+                          :key="`${directory}-${index}`"
+                          closable
+                          :disabled="!remoteForm.auto_scheduler.enabled"
+                          @close="removeSchedulerDirectory(index)"
+                        >
+                          {{ directory }}
+                        </n-tag>
+                        <n-tag v-if="remoteForm.auto_scheduler.expected_directories.length === 0" type="default">
+                          按实际 ZIP 目录检测
+                        </n-tag>
+                      </div>
                     </div>
-                  </div>
-                </n-form-item>
-                <p class="form-hint">自动调度会按文件名日期检查目标自然周 7 天；开启后会强制启用远程自动化和处理成功后删除源文件。</p>
+                  </n-form-item>
+                  <p class="form-hint">自动调度会按文件名日期检查目标自然周 7 天；开启后会强制启用远程自动化和处理成功后删除源文件。</p>
+                </n-form>
 
                 <div class="scheduler-status-panel">
                   <div class="scheduler-status-header">
@@ -250,15 +266,14 @@
                     </n-button>
                   </n-space>
                 </div>
-              </n-form>
 
-              <template #footer>
-                <n-space justify="end">
-                  <n-button type="primary" :loading="savingRemote" @click="saveRemote">保存配置</n-button>
-                  <n-button :loading="testingRemote" @click="testRemote">测试连接</n-button>
-                </n-space>
-              </template>
-            </n-card>
+                <template #footer>
+                  <n-space justify="end">
+                    <n-button type="primary" :loading="savingRemote" @click="saveRemote">保存调度</n-button>
+                  </n-space>
+                </template>
+              </n-card>
+            </div>
           </div>
         </n-tab-pane>
 
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index c9ae8b4..7135562 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -1382,15 +1382,16 @@ select {
   overflow: hidden;
 }
 
-.settings-section-grid,
+.settings-database-panel,
+.settings-remote-grid,
 .settings-rules-grid {
   display: grid;
   align-items: start;
   gap: 18px;
 }
 
-.settings-section-grid {
-  grid-template-columns: repeat(2, minmax(0, 1fr));
+.settings-database-panel {
+  grid-template-columns: minmax(420px, 680px);
   height: 100%;
   min-height: 0;
   padding-right: 6px;
@@ -1400,27 +1401,47 @@ select {
   scrollbar-width: thin;
 }
 
-.settings-connection-stack {
+.settings-database-stack,
+.settings-remote-stack {
   display: flex;
   min-width: 0;
   flex-direction: column;
   gap: 18px;
 }
 
-.settings-section-grid::-webkit-scrollbar {
+.settings-remote-grid {
+  grid-template-columns: minmax(380px, 0.9fr) minmax(360px, 1.1fr);
+  height: 100%;
+  min-height: 0;
+  padding-right: 6px;
+  overflow-x: hidden;
+  overflow-y: auto;
+  scrollbar-color: var(--td-scrollbar-color) transparent;
+  scrollbar-width: thin;
+}
+
+.settings-database-panel::-webkit-scrollbar,
+.settings-remote-grid::-webkit-scrollbar {
   width: 8px;
   height: 8px;
 }
 
-.settings-section-grid::-webkit-scrollbar-thumb {
+.settings-database-panel::-webkit-scrollbar-thumb,
+.settings-remote-grid::-webkit-scrollbar-thumb {
   background: var(--td-scrollbar-color);
   border-radius: 8px;
 }
 
-.settings-section-grid::-webkit-scrollbar-track {
+.settings-database-panel::-webkit-scrollbar-track,
+.settings-remote-grid::-webkit-scrollbar-track {
   background: transparent;
 }
 
+.settings-remote-card,
+.settings-scheduler-card {
+  min-width: 0;
+}
+
 .settings-rules-grid {
   grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.4fr);
   grid-template-rows: minmax(0, 1fr);
@@ -1484,10 +1505,6 @@ select {
   line-height: 20px;
 }
 
-.settings-compact-divider {
-  margin: 12px 0;
-}
-
 .scheduler-dir-editor {
   display: flex;
   width: 100%;
@@ -1917,7 +1934,8 @@ select {
 
 /* ==================== Responsive ==================== */
 @media (max-width: 1200px) {
-  .settings-section-grid,
+  .settings-database-panel,
+  .settings-remote-grid,
   .settings-rules-grid {
     grid-template-columns: 1fr;
   }