🎨 按要求调整栏目

src/pages/article/data/editor/subpart/NestCategoryEditor.vue

@@ -43,13 +43,42 @@
               <a-checkbox v-model:checked="cat.visible" :indeterminate="cat.visible === undefined" />
             </a-form-item>
             <a-form-item label="类型">
-              <a-select v-model:value="cat.type" style="width: 100%" allowClear placeholder="请选择类型">
+              <a-select v-model:value="cat.type" style="width: 100%" allowClear placeholder="请选择类型" @change="onTypeChange(cat, $event)">
                 <a-select-option v-for="type in blockTypes" :key="type" :value="type">
                   {{ type }}
                 </a-select-option>
               </a-select>
             </a-form-item>
-            <a-form-item label="数据源">
+            <template v-if="cat.type.startsWith('speicalMergeItem:')">
+              <a-divider>合并配置 (getColumns)</a-divider>
+              <a-form-item label="模型ID">
+                <a-input-number v-model:value="getMergeParams(cat, 'getColumns').modelId" style="width: 100%" placeholder="模型ID" />
+              </a-form-item>
+              <a-form-item label="栏目ID">
+                <a-input-number v-model:value="getMergeParams(cat, 'getColumns').mainBodyColumnId" style="width: 100%" placeholder="栏目ID" />
+              </a-form-item>
+              <a-form-item label="每个单元其他参数">
+                <KeyValueEditor v-model="getMergeParams(cat, 'getColumns').otherParams" />
+              </a-form-item>
+              <a-form-item label="替换项 (overrideItems)">
+                <div v-for="(item, oi) in getOverrideItems(cat)" :key="oi" class="override-item-row">
+                  <a-input-number v-model:value="item.id" placeholder="数据ID" size="small" style="width: 100px" />
+                  <KeyValueEditor :modelValue="item" class="override-item-kv" @update:modelValue="(v) => setOverrideItem(cat, oi, v)" />
+                  <a-button type="link" danger size="small" @click="removeOverrideItem(cat, oi)">删除</a-button>
+                </div>
+                <a-button type="dashed" size="small" @click="addOverrideItem(cat)">+ 添加替换项</a-button>
+              </a-form-item>
+            </template>
+            <template v-else-if="cat.type.startsWith('speicalMergeItem:')">
+              <a-divider>合并配置 (getColumn)</a-divider>
+              <a-form-item label="模型ID">
+                <a-input-number v-model:value="getMergeParams(cat, 'getColumn').modelId" style="width: 100%" placeholder="模型ID" />
+              </a-form-item>
+              <a-form-item label="栏目ID">
+                <a-input-number v-model:value="getMergeParams(cat, 'getColumn').mainBodyColumnId" style="width: 100%" placeholder="栏目ID" />
+              </a-form-item>
+            </template>
+            <a-form-item v-else label="数据源">
               <DynamicDataEditor v-model="cat.data" />
             </a-form-item>
             <a-form-item label="单元属性">
@@ -84,6 +113,7 @@
 <script setup lang="ts">
 import type { IHomeCommonCategoryListTabNestCategoryItemDefine } from '../../CommonCategoryDefine';
 import type { IHomeCommonCategoryDynamicData } from '../../CommonCategoryDynamicData';
+import type { IHomeCommonCategoryCategoryDynamicDataMergeTypeGetColumns, IHomeCommonCategoryCategoryDynamicDataMergeTypeGetColumn } from '../../data-defines/Category';
 import LinkPathEditor from '../components/LinkPathEditor.vue';
 import DynamicDataEditor from '../components/DynamicDataEditor.vue';
 import DataSolveEditor from '../components/DataSolveEditor.vue';
@@ -100,7 +130,10 @@ const emit = defineEmits<{
   (e: 'update:categorys', categorys: IHomeCommonCategoryListTabNestCategoryItemDefine[]): void;
 }>();
 
-const blockTypes = CommonCategoryBlockType;
+const blockTypes = (CommonCategoryBlockType as string[]).concat([
+  'speicalMergeItem:getColumns',
+  'speicalMergeItem:getColumn',
+]);
 const titleLevels = ['h1', 'h2', 'h3'];
 
 function getCategorys() {
@@ -149,6 +182,48 @@ function copy(i: number) {
     icon: 'success',
   });
 }
+
+/** 确保并返回合并类型的 params，用于 speicalMergeItem:getColumns / getColumn */
+function getMergeParams(cat: IHomeCommonCategoryListTabNestCategoryItemDefine, kind: 'getColumns'): IHomeCommonCategoryCategoryDynamicDataMergeTypeGetColumns['params'];
+function getMergeParams(cat: IHomeCommonCategoryListTabNestCategoryItemDefine, kind: 'getColumn'): IHomeCommonCategoryCategoryDynamicDataMergeTypeGetColumn['params'];
+function getMergeParams(cat: IHomeCommonCategoryListTabNestCategoryItemDefine, kind: 'getColumns' | 'getColumn') {
+  if (!cat.params) cat.params = {} as Record<string, any>;
+  const p = cat.params as Record<string, any>;
+  if (kind === 'getColumns') {
+    if (!Array.isArray(p.overrideItems)) p.overrideItems = [];
+    if (p.otherParams === undefined) p.otherParams = {};
+  }
+  return cat.params as any;
+}
+
+function onTypeChange(cat: IHomeCommonCategoryListTabNestCategoryItemDefine, type: string | undefined) {
+  if (type === 'speicalMergeItem:getColumns') {
+    getMergeParams(cat, 'getColumns');
+  } else if (type === 'speicalMergeItem:getColumn') {
+    getMergeParams(cat, 'getColumn');
+  }
+}
+
+function getOverrideItems(cat: IHomeCommonCategoryListTabNestCategoryItemDefine) {
+  const params = getMergeParams(cat, 'getColumns');
+  return params.overrideItems as ({ id: number } & IHomeCommonCategoryListTabNestCategoryItemDefine)[];
+}
+
+function addOverrideItem(cat: IHomeCommonCategoryListTabNestCategoryItemDefine) {
+  const params = getMergeParams(cat, 'getColumns');
+  (params.overrideItems as any[]).push({ id: 0 });
+}
+
+function removeOverrideItem(cat: IHomeCommonCategoryListTabNestCategoryItemDefine, index: number) {
+  const params = getMergeParams(cat, 'getColumns');
+  (params.overrideItems as any[]).splice(index, 1);
+}
+
+function setOverrideItem(cat: IHomeCommonCategoryListTabNestCategoryItemDefine, index: number, value: Record<string, any>) {
+  const params = getMergeParams(cat, 'getColumns');
+  const arr = params.overrideItems as any[];
+  if (arr[index]) arr[index] = { ...arr[index], ...value };
+}
 </script>
 
 <style lang="scss" scoped>
@@ -185,4 +260,17 @@ function copy(i: number) {
     flex: 4
   }
 }
+.override-item-row {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  margin-bottom: 8px;
+  padding: 6px;
+  background: #f5f5f5;
+  border-radius: 4px;
+
+  .override-item-kv {
+    flex: 1;
+  }
+}
 </style>