From fc1d931fcf1318e99ce6015f6832065e526ffd9e Mon Sep 17 00:00:00 2001
From: Nixevol <guaotiantang@gmail.com>
Date: Thu, 25 Jun 2026 05:32:13 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E8=B0=83=E6=95=B4=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E6=9D=A5=E6=BA=90=E6=8C=89=E9=92=AE=E4=BD=8D=E7=BD=AE=E5=B9=B6?=
 =?UTF-8?q?=E8=87=AA=E5=8A=A8=E6=BB=9A=E5=8A=A8?=
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 | 13 +++++++++++--
 frontend/src/styles.css                   |  4 ++--
 3 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/docs/project_context.md b/docs/project_context.md
index ad0e739..7f32127 100644
--- a/docs/project_context.md
+++ b/docs/project_context.md
@@ -819,3 +819,8 @@
 
 - CellData 图形化映射中每个来源卡片支持展开/收起，来源头展示目录与 CSV 前缀摘要；“添加来源”按钮移动到映射规则标题区右侧。
 - 验证：`frontend` `npm run build` 通过；构建产物已清理。
+
+## 2026-06-25：调整图形化映射添加来源位置
+
+- “添加来源”按钮移动到主键表达式输入区下方右侧；点击后来源列表自动滚动到新增来源。
+- 验证：`frontend` `npm run build` 通过；构建产物已清理。
diff --git a/frontend/src/components/SettingsPanel.vue b/frontend/src/components/SettingsPanel.vue
index a96c1fa..bf6a8b2 100644
--- a/frontend/src/components/SettingsPanel.vue
+++ b/frontend/src/components/SettingsPanel.vue
@@ -719,7 +719,6 @@
           <div class="cell-data-section-title">
             <strong>映射规则</strong>
             <n-space size="small">
-              <n-button v-if="cellDataMappingMode === 'form'" size="small" @click="addCellDataMappingSource">添加来源</n-button>
               <n-radio-group v-model:value="cellDataMappingMode" size="small" @update:value="switchCellDataMappingMode">
                 <n-radio-button value="form">图形化</n-radio-button>
                 <n-radio-button value="json">JSON</n-radio-button>
@@ -742,7 +741,10 @@
                 <n-input v-model:value="cellDataMappingForm.key.expr" />
               </n-form-item>
             </div>
-            <div class="cell-data-source-list">
+            <div class="cell-data-mapping-actions">
+              <n-button size="small" @click="addCellDataMappingSource">添加来源</n-button>
+            </div>
+            <div ref="cellDataSourceListRef" class="cell-data-source-list">
               <div v-for="(source, sourceIndex) in cellDataMappingForm.sources" :key="sourceIndex" class="cell-data-source-card">
                 <div class="cell-data-source-header" @click="toggleCellDataMappingSource(sourceIndex)">
                   <div class="cell-data-source-title">
@@ -900,6 +902,7 @@ const cellDataMappingText = ref('');
 const cellDataMappingMode = ref<'form' | 'json'>('form');
 const cellDataEditorHost = ref<HTMLDivElement | null>(null);
 const cellDataEditor = shallowRef<monaco.editor.IStandaloneCodeEditor | null>(null);
+const cellDataSourceListRef = ref<HTMLElement | null>(null);
 const cellDataMappingForm = reactive<CellDataMappingForm>({
   target_table: 'cellinfo',
   key: {
@@ -1543,6 +1546,12 @@ function mappingFormToJson(): Record<string, unknown> {
 
 function addCellDataMappingSource() {
   cellDataMappingForm.sources.push({ band: '', file_prefix: '', collapsed: false, fields: [] });
+  void nextTick(() => {
+    const container = cellDataSourceListRef.value;
+    if (container) {
+      container.scrollTop = container.scrollHeight;
+    }
+  });
 }
 
 function toggleCellDataMappingSource(index: number) {
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 4325c4a..c61f3e8 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -1683,7 +1683,7 @@ select {
 
 .cell-data-mapping-form {
   min-height: 0;
-  grid-template-rows: auto minmax(0, 1fr) auto;
+  grid-template-rows: auto auto minmax(0, 1fr);
 }
 
 .cell-data-mapping-key {
@@ -1709,7 +1709,7 @@ select {
 
 .cell-data-mapping-actions {
   display: flex;
-  justify-content: flex-start;
+  justify-content: flex-end;
 }
 
 .cell-data-source-header,