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