From fe7aad335328f1b7efa16c580b04ae5060eef58a Mon Sep 17 00:00:00 2001
From: Nixevol <guaotiantang@gmail.com>
Date: Thu, 25 Jun 2026 05:10:44 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E4=BC=98=E5=8C=96=20CellData=20?=
 =?UTF-8?q?=E6=89=AB=E6=8F=8F=E8=B7=AF=E5=BE=84=E6=8E=92=E7=89=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/project_context.md                   |  5 +++++
 frontend/src/components/SettingsPanel.vue |  6 +++---
 frontend/src/styles.css                   | 15 ++++++++++++++-
 3 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/docs/project_context.md b/docs/project_context.md
index 431064a..2d4edbb 100644
--- a/docs/project_context.md
+++ b/docs/project_context.md
@@ -795,3 +795,8 @@
 
 - 扫描路径属于文件来源配置，已移回 CellData 数据源卡片中展示和维护；「规则设置」弹窗只保留高级正则与映射 JSON，避免弹窗承担过多基础配置。
 - 验证：`frontend` `npm run build` 通过；构建产物已清理。
+
+## 2026-06-25：优化 CellData 扫描路径排版
+
+- CellData 数据源卡片中的扫描路径区域改为全宽列表布局，说明文字、说明按钮、路径输入、删除按钮和添加输入保持对齐，减少左侧拥挤。
+- 验证：`frontend` `npm run build` 通过；构建产物已清理。
diff --git a/frontend/src/components/SettingsPanel.vue b/frontend/src/components/SettingsPanel.vue
index 6d83457..40698fa 100644
--- a/frontend/src/components/SettingsPanel.vue
+++ b/frontend/src/components/SettingsPanel.vue
@@ -293,7 +293,7 @@
                 <n-form-item label="扫描路径">
                   <div class="cell-data-path-editor">
                     <div class="cell-data-path-header">
-                      <span class="form-hint">支持路径模板和多目录组合</span>
+                      <span>支持路径模板和多目录组合</span>
                       <n-button quaternary circle size="small" title="查看说明" @click="cellDataHelpVisible = true">
                         <template #icon>
                           <n-icon><InformationCircleOutline /></n-icon>
@@ -310,8 +310,8 @@
                         </n-button>
                       </div>
                     </div>
-                    <n-input-group>
-                      <n-input v-model:value="newCellDataScanPath" placeholder="扫描路径模板" @keydown.enter.prevent="addCellDataScanPath" />
+                    <n-input-group class="cell-data-path-add">
+                      <n-input v-model:value="newCellDataScanPath" placeholder="添加扫描路径模板" @keydown.enter.prevent="addCellDataScanPath" />
                       <n-button @click="addCellDataScanPath">添加</n-button>
                     </n-input-group>
                   </div>
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 8ab5926..52eeb63 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -1579,9 +1579,10 @@ select {
 .cell-data-path-editor,
 .cell-data-path-list {
   display: flex;
+  width: 100%;
   min-width: 0;
   flex-direction: column;
-  gap: 8px;
+  gap: 10px;
 }
 
 .cell-data-path-header {
@@ -1589,6 +1590,9 @@ select {
   align-items: center;
   justify-content: space-between;
   gap: 12px;
+  color: var(--td-text-color-placeholder);
+  font-size: 12px;
+  line-height: 20px;
 }
 
 .cell-data-path-row {
@@ -1597,6 +1601,15 @@ select {
   gap: 8px;
 }
 
+.cell-data-path-add {
+  width: 100%;
+}
+
+.cell-data-path-row .n-input,
+.cell-data-path-add .n-input {
+  min-width: 0;
+}
+
 .cell-data-help-scroll {
   max-height: 360px;
 }