fix: 修复SegmentEditor添加分段按钮无响应问题

- 使用独立的 showEditor 状态控制编辑器面板显隐
- 初始状态隐藏编辑器，点击添加分段后显示
- 确认/取消后正确复位状态

nl-ui/nl-ui-admin-vben/yudao-ui-admin-vben/apps/web-antdv-next/src/views/base/codegen/components/SegmentEditor.vue

@@ -13,7 +13,6 @@ const emit = defineEmits<{
   (e: 'update:modelValue', value: BaseCodeRuleApi.SegmentConfig[]): void;
 }>();
 
-/** 内部编辑的 segments 列表 */
 const segments = ref<BaseCodeRuleApi.SegmentConfig[]>([]);
 
 watch(
@@ -24,57 +23,47 @@ watch(
   { immediate: true },
 );
 
-/** 触发更新 */
 function emitUpdate() {
   emit('update:modelValue', [...segments.value]);
 }
 
-/** 段类型选项 */
 const typeOptions = [
   { label: '固定前缀 (PREFIX)', value: 'PREFIX' },
   { label: '日期 (DATE)', value: 'DATE' },
   { label: '流水序号 (SEQUENCE)', value: 'SEQUENCE' },
 ];
 
-/** 重置维度选项 */
 const resetByOptions = [
-  { label: '按天重置', value: 'DAY' },
-  { label: '按月重置', value: 'MONTH' },
-  { label: '按年重置', value: 'YEAR' },
-  { label: '全局不重置', value: 'GLOBAL' },
+  { label: '按天', value: 'DAY' },
+  { label: '按月', value: 'MONTH' },
+  { label: '按年', value: 'YEAR' },
+  { label: '全局', value: 'GLOBAL' },
 ];
 
-/** 正在编辑的段索引（-1 表示新增） */
+/** 是否显示编辑器面板 */
+const showEditor = ref(false);
+/** 编辑中的段索引（-1 = 新增） */
 const editingIndex = ref(-1);
 /** 编辑中的段类型 */
-const editingType = ref<string>('');
-/** 编辑中的配置数据 */
+const editingType = ref('');
+/** 编辑中的数据 */
 const editingData = ref<Record<string, unknown>>({});
 
-/** 当前正在编辑的是新增还是修改 */
 const isNewSegment = computed(() => editingIndex.value === -1);
 
-/** 开始新增段 */
+/** 点击"添加分段"按钮 */
 function handleAdd() {
   editingIndex.value = -1;
   editingType.value = '';
   editingData.value = {};
+  showEditor.value = true;
 }
 
-/** 选择段类型后进入配置 */
+/** 选择段类型 */
 function handleSelectType(type: string) {
   editingType.value = type;
-  editingData.value = { type };
-  // 设置默认值
   if (type === 'SEQUENCE') {
-    editingData.value = {
-      type,
-      resetBy: 'DAY',
-      startAt: 1,
-      paddingLen: 4,
-      paddingChar: '0',
-      maxValue: 9999,
-    };
+    editingData.value = { type, resetBy: 'DAY', startAt: 1, paddingLen: 4, paddingChar: '0', maxValue: 9999 };
   } else if (type === 'DATE') {
     editingData.value = { type, format: 'yyyyMMdd' };
   } else {
@@ -85,8 +74,10 @@ function handleSelectType(type: string) {
 /** 编辑已有段 */
 function handleEdit(index: number) {
   editingIndex.value = index;
-  editingData.value = { ...segments.value[index] };
-  editingType.value = segments.value[index].type || '';
+  const seg = segments.value[index];
+  editingType.value = seg.type || '';
+  editingData.value = { ...seg };
+  showEditor.value = true;
 }
 
 /** 确认编辑 */
@@ -95,17 +86,13 @@ function handleConfirmEdit() {
     message.warning('请选择段类型');
     return;
   }
-  if (editingType.value === 'PREFIX' && !editingData.value.value) {
-    message.warning('请输入前缀值');
-    return;
-  }
+  const seg = { ...editingData.value, type: editingType.value } as BaseCodeRuleApi.SegmentConfig;
   if (isNewSegment.value) {
-    segments.value.push({ ...editingData.value } as BaseCodeRuleApi.SegmentConfig);
+    segments.value.push(seg);
   } else {
-    segments.value[editingIndex.value] = {
-      ...editingData.value,
-    } as BaseCodeRuleApi.SegmentConfig;
+    segments.value[editingIndex.value] = seg;
   }
+  showEditor.value = false;
   editingIndex.value = -1;
   editingType.value = '';
   editingData.value = {};
@@ -114,49 +101,38 @@ function handleConfirmEdit() {
 
 /** 取消编辑 */
 function handleCancelEdit() {
+  showEditor.value = false;
   editingIndex.value = -1;
   editingType.value = '';
   editingData.value = {};
 }
 
-/** 删除段 */
+/** 删除 */
 function handleDelete(index: number) {
   segments.value.splice(index, 1);
-  if (editingIndex.value === index) {
-    handleCancelEdit();
-  }
   emitUpdate();
 }
 
 /** 上移 */
 function handleMoveUp(index: number) {
   if (index <= 0) return;
-  const item = segments.value[index];
-  segments.value[index] = segments.value[index - 1];
-  segments.value[index - 1] = item;
+  [segments.value[index], segments.value[index - 1]] = [segments.value[index - 1], segments.value[index]];
   emitUpdate();
 }
 
 /** 下移 */
 function handleMoveDown(index: number) {
   if (index >= segments.value.length - 1) return;
-  const item = segments.value[index];
-  segments.value[index] = segments.value[index + 1];
-  segments.value[index + 1] = item;
+  [segments.value[index], segments.value[index + 1]] = [segments.value[index + 1], segments.value[index]];
   emitUpdate();
 }
 
-/** 获取段的描述文本 */
 function getSegmentSummary(seg: BaseCodeRuleApi.SegmentConfig): string {
   switch (seg.type) {
-    case 'PREFIX':
-      return `固定值: ${seg.value || '-'}`;
-    case 'DATE':
-      return `格式: ${seg.format || 'yyyyMMdd'}`;
-    case 'SEQUENCE':
-      return `${seg.resetBy || 'DAY'}重置 | ${seg.startAt || 1}起 | ${seg.paddingLen || 4}位补${seg.paddingChar || '0'} | 上限${seg.maxValue || 9999}`;
-    default:
-      return JSON.stringify(seg);
+    case 'PREFIX': return `固定值: ${seg.value || '-'}`;
+    case 'DATE': return `格式: ${seg.format || 'yyyyMMdd'}`;
+    case 'SEQUENCE': return `${seg.resetBy || 'DAY'} | 起${seg.startAt || 1} | ${seg.paddingLen || 4}位补"${seg.paddingChar || '0'}" | 上限${seg.maxValue || 9999}`;
+    default: return JSON.stringify(seg);
   }
 }
 </script>
@@ -168,34 +144,22 @@ function getSegmentSummary(seg: BaseCodeRuleApi.SegmentConfig): string {
       <div
         v-for="(seg, index) in segments"
         :key="index"
-        class="segment-item mb-2 flex items-center justify-between rounded border p-2"
-        :class="{
-          'border-blue-400 bg-blue-50': editingIndex === index,
-          'border-gray-200': editingIndex !== index,
-        }"
+        class="segment-item mb-2 flex items-center justify-between rounded border border-gray-200 p-2"
       >
         <div class="flex items-center gap-2">
           <span
-            class="rounded px-2 py-0.5 text-xs font-bold"
+            class="rounded px-2 py-0.5 text-xs font-bold text-white"
             :class="{
-              'bg-blue-500 text-white': seg.type === 'PREFIX',
-              'bg-green-500 text-white': seg.type === 'DATE',
-              'bg-orange-500 text-white': seg.type === 'SEQUENCE',
+              'bg-blue-500': seg.type === 'PREFIX',
+              'bg-green-500': seg.type === 'DATE',
+              'bg-orange-500': seg.type === 'SEQUENCE',
             }"
-          >
-            {{ seg.type }}
-          </span>
-          <span class="text-sm text-gray-600">
-            {{ getSegmentSummary(seg) }}
-          </span>
+          >{{ seg.type }}</span>
+          <span class="text-sm text-gray-600">{{ getSegmentSummary(seg) }}</span>
         </div>
         <div class="flex items-center gap-1">
-          <a-button size="small" @click="handleMoveUp(index)" :disabled="index === 0">
-            ↑
-          </a-button>
-          <a-button size="small" @click="handleMoveDown(index)" :disabled="index === segments.length - 1">
-            ↓
-          </a-button>
+          <a-button size="small" @click="handleMoveUp(index)" :disabled="index === 0">↑</a-button>
+          <a-button size="small" @click="handleMoveDown(index)" :disabled="index === segments.length - 1">↓</a-button>
           <a-button size="small" @click="handleEdit(index)">编辑</a-button>
           <a-button size="small" danger @click="handleDelete(index)">删除</a-button>
         </div>
@@ -203,41 +167,41 @@ function getSegmentSummary(seg: BaseCodeRuleApi.SegmentConfig): string {
     </div>
 
     <!-- 编辑面板 -->
-    <div v-if="editingIndex !== -1 || (editingIndex === -1 && editingType.value === '')" class="mb-3 rounded border border-dashed border-gray-300 p-3">
+    <div v-if="showEditor" class="mb-3 rounded border border-dashed border-blue-300 bg-blue-50 p-3">
       <!-- 选择类型 -->
-      <div v-if="!editingType.value" class="flex items-center gap-2">
-        <span class="text-sm text-gray-600">选择段类型：</span>
+      <template v-if="!editingType">
+        <div class="mb-2 text-sm text-gray-600">选择段类型：</div>
+        <div class="flex gap-2">
           <a-button
             v-for="opt in typeOptions"
             :key="opt.value"
             size="small"
             @click="handleSelectType(opt.value)"
-        >
-          {{ opt.label }}
-        </a-button>
-      </div>
-
-      <!-- 配置详情 -->
-      <div v-else>
-        <div class="mb-2 text-sm font-bold">
-          {{ isNewSegment ? '新增' : '编辑' }}
-          {{ typeOptions.find((t) => t.value === editingType.value)?.label }}
-        </div>
-
-        <!-- PREFIX 配置 -->
-        <template v-if="editingType.value === 'PREFIX'">
-          <div class="mb-2">
-            <label class="mb-1 block text-sm">固定前缀值</label>
-            <a-input v-model:value="(editingData.value as string)" placeholder="如 ORD、CK" />
+          >{{ opt.label }}</a-button>
         </div>
       </template>
 
-        <!-- DATE 配置 -->
-        <template v-if="editingType.value === 'DATE'">
+      <!-- 配置详情 -->
+      <template v-else>
+        <div class="mb-2 text-sm font-bold">
+          {{ isNewSegment ? '新增' : '编辑' }} {{ typeOptions.find(t => t.value === editingType)?.label }}
+        </div>
+
+        <!-- PREFIX -->
+        <template v-if="editingType === 'PREFIX'">
+          <div class="mb-2">
+            <label class="mb-1 block text-sm">固定前缀值</label>
+            <a-input v-model:value="editingData.value" placeholder="如 ORD、CK" />
+          </div>
+        </template>
+
+        <!-- DATE -->
+        <template v-if="editingType === 'DATE'">
           <div class="mb-2">
             <label class="mb-1 block text-sm">日期格式</label>
             <a-select
               v-model:value="editingData.format"
+              style="width: 100%"
               :options="[
                 { label: 'yyyyMMdd (20260715)', value: 'yyyyMMdd' },
                 { label: 'yyyyMM (202607)', value: 'yyyyMM' },
@@ -248,23 +212,20 @@ function getSegmentSummary(seg: BaseCodeRuleApi.SegmentConfig): string {
           </div>
         </template>
 
-        <!-- SEQUENCE 配置 -->
-        <template v-if="editingType.value === 'SEQUENCE'">
+        <!-- SEQUENCE -->
+        <template v-if="editingType === 'SEQUENCE'">
           <div class="grid grid-cols-2 gap-2">
             <div>
               <label class="mb-1 block text-sm">重置维度</label>
-              <a-select
-                v-model:value="editingData.resetBy"
-                :options="resetByOptions"
-              />
+              <a-select v-model:value="editingData.resetBy" style="width: 100%" :options="resetByOptions" />
             </div>
             <div>
               <label class="mb-1 block text-sm">起始值</label>
-              <a-input-number v-model:value="editingData.startAt" :min="0" class="!w-full" />
+              <a-input-number v-model:value="editingData.startAt" :min="0" style="width: 100%" />
             </div>
             <div>
               <label class="mb-1 block text-sm">补位长度</label>
-              <a-input-number v-model:value="editingData.paddingLen" :min="0" class="!w-full" placeholder="如 4 → 0001" />
+              <a-input-number v-model:value="editingData.paddingLen" :min="0" style="width: 100%" placeholder="如 4" />
             </div>
             <div>
               <label class="mb-1 block text-sm">补位字符</label>
@@ -272,32 +233,24 @@ function getSegmentSummary(seg: BaseCodeRuleApi.SegmentConfig): string {
             </div>
             <div>
               <label class="mb-1 block text-sm">最大值上限</label>
-              <a-input-number v-model:value="editingData.maxValue" :min="1" class="!w-full" placeholder="如 9999" />
+              <a-input-number v-model:value="editingData.maxValue" :min="1" style="width: 100%" placeholder="如 9999" />
             </div>
           </div>
         </template>
 
         <div class="mt-3 flex gap-2">
-          <a-button type="primary" size="small" @click="handleConfirmEdit">
-            {{ isNewSegment ? '添加' : '保存' }}
-          </a-button>
+          <a-button type="primary" size="small" @click="handleConfirmEdit">{{ isNewSegment ? '添加' : '保存' }}</a-button>
           <a-button size="small" @click="handleCancelEdit">取消</a-button>
         </div>
-      </div>
+      </template>
     </div>
 
     <!-- 添加按钮 -->
-    <a-button v-if="editingIndex === -1 && !editingType.value" type="dashed" block @click="handleAdd">
-      + 添加分段
-    </a-button>
+    <a-button v-if="!showEditor" type="dashed" block @click="handleAdd">+ 添加分段</a-button>
   </div>
 </template>
 
 <style scoped>
-.segment-editor {
-  width: 100%;
-}
-.segment-item:hover {
-  border-color: #1890ff;
-}
+.segment-editor { width: 100%; }
+.segment-item:hover { border-color: #1890ff; }
 </style>