optimize(projects): 统一button的添加方式

src/views/workflow/category/index.vue

@@ -110,7 +110,7 @@ const {
         if (hasAuth('workflow:category:remove')) buttons.push(deleteBtn());
 
         return (
-          <div class="flex-center gap-8px">
+          <div class="flex-center gap-4px">
             {buttons.map((btn, index) => (
               <>
                 {index !== 0 && <NDivider vertical />}

src/views/workflow/leave/index.vue

@@ -168,7 +168,6 @@ const {
           );
         }
 
-        // 插入分隔符（仅在前后两个按钮之间插入 Divider）
         const buttonWithDividers = buttons.flatMap((btn, index) => {
           if (index === 0) return [btn];
           return [<NDivider vertical />, btn];

src/views/workflow/process-definition/index.vue

@@ -176,10 +176,8 @@ const {
       width: 150,
       fixed: 'right',
       render: row => {
-        const Divider = <NDivider vertical />;
+        const buttons = [];
-
+        buttons.push(
-        const buttons = {
-          edit: (
           <ButtonIcon
             text
             type="primary"
@@ -187,8 +185,8 @@ const {
             tooltipContent={$t('common.edit')}
             onClick={() => edit(row.id)}
           />
-          ),
+        );
-          delete: (
+        buttons.push(
           <ButtonIcon
             text
             type="error"
@@ -197,36 +195,8 @@ const {
             popconfirmContent={$t('common.confirmDelete')}
             onPositiveClick={() => handleDelete(row.id)}
           />
-          ),
+        );
-          design: (
+        buttons.push(
-            <ButtonIcon
-              text
-              type="primary"
-              icon="material-symbols:design-services"
-              tooltipContent="流程设计"
-              onClick={() => handleDesign(row.id)}
-            />
-          ),
-          preview: (
-            <ButtonIcon
-              text
-              type="primary"
-              icon="material-symbols:visibility-outline"
-              tooltipContent="查看流程"
-              onClick={() => handlePreview(row.id)}
-            />
-          ),
-          publish: (
-            <ButtonIcon
-              text
-              type="primary"
-              icon="material-symbols:publish"
-              tooltipContent="发布流程"
-              popconfirmContent={`确定要发布 ${row.flowName} 吗？`}
-              onPositiveClick={() => handlePublish(row.id)}
-            />
-          ),
-          copy: (
           <ButtonIcon
             text
             type="primary"
@@ -235,8 +205,16 @@ const {
             popconfirmContent={`确定要复制 ${row.flowName} 吗？`}
             onPositiveClick={() => handleCopy(row.id)}
           />
-          ),
+        );
-          export: (
+
+        const firstRowButtons = buttons.flatMap((btn, index) => {
+          if (index === 0) return [btn];
+          return [<NDivider vertical />, btn];
+        });
+
+        const secondRowButtons = [];
+
+        secondRowButtons.push(
           <ButtonIcon
             text
             type="primary"
@@ -244,29 +222,50 @@ const {
             tooltipContent="导出流程"
             onClick={() => handleExport(row)}
           />
+        );
+
+        secondRowButtons.push(
+          isPublish.value ? (
+            <ButtonIcon
+              text
+              type="primary"
+              icon="material-symbols:visibility-outline"
+              tooltipContent="查看流程"
+              onClick={() => handlePreview(row.id)}
+            />
+          ) : (
+            <ButtonIcon
+              text
+              type="primary"
+              icon="material-symbols:design-services"
+              tooltipContent="流程设计"
+              onClick={() => handleDesign(row.id)}
+            />
           )
-        };
+        );
+
+        if (!isPublish.value) {
+          secondRowButtons.push(
+            <ButtonIcon
+              text
+              type="primary"
+              icon="material-symbols:publish"
+              tooltipContent="发布流程"
+              popconfirmContent={`确定要发布 ${row.flowName} 吗？`}
+              onPositiveClick={() => handlePublish(row.id)}
+            />
+          );
+        }
+
+        const secondRowWithDividers = secondRowButtons.flatMap((btn, index) => {
+          if (index === 0) return [btn];
+          return [<NDivider vertical />, btn];
+        });
 
         return (
           <div class="flex-col">
-            <div class="h-[24px] flex-center gap-4px">
+            <div class="h-[24px] flex-center gap-4px">{firstRowButtons}</div>
-              {buttons.edit}
+            <div class="h-[24px] flex-center gap-4px">{secondRowWithDividers}</div>
-              {Divider}
-              {buttons.delete}
-              {Divider}
-              {buttons.copy}
-            </div>
-            <div class="h-[24px] flex-center gap-4px">
-              {buttons.export}
-              {Divider}
-              {isPublish.value ? buttons.preview : buttons.design}
-              {!isPublish.value && (
-                <>
-                  {Divider}
-                  {buttons.publish}
-                </>
-              )}
-            </div>
           </div>
         );
       }

src/views/workflow/process-instance/index.vue

@@ -153,9 +153,10 @@ const operateColumns = ref<NaiveUI.TableColumn<Api.Workflow.ProcessInstance>[]>(
     render: row => {
       const id = row.id;
       const showAll = runningStatus.value;
-      const Divider = <NDivider vertical />;
+      const buttons = [];
 
-      const cancelBtn = (
+      if (showAll) {
+        buttons.push(
           <ButtonIcon
             text
             type="error"
@@ -168,8 +169,10 @@ const operateColumns = ref<NaiveUI.TableColumn<Api.Workflow.ProcessInstance>[]>(
             onPositiveClick={() => handleCancel(id)}
           />
         );
+      }
 
-      const deleteBtn = (
+      if (showAll) {
+        buttons.push(
           <ButtonIcon
             text
             type="error"
@@ -179,12 +182,13 @@ const operateColumns = ref<NaiveUI.TableColumn<Api.Workflow.ProcessInstance>[]>(
             onPositiveClick={() => handleDelete(id)}
           />
         );
+      }
 
-      const previewBtn = (
+      buttons.push(
         <ButtonIcon text type="info" icon="material-symbols:visibility-outline" tooltipContent="流程预览" />
       );
 
-      const variableBtn = (
+      buttons.push(
         <ButtonIcon
           text
           type="info"
@@ -194,17 +198,12 @@ const operateColumns = ref<NaiveUI.TableColumn<Api.Workflow.ProcessInstance>[]>(
         />
       );
 
-      return (
+      const buttonWithDividers = buttons.flatMap((btn, index) => {
-        <div class="flex-center gap-1px">
+        if (index === 0) return [btn];
-          {showAll && cancelBtn}
+        return [<NDivider vertical />, btn];
-          {showAll && Divider}
+      });
-          {showAll && deleteBtn}
+
-          {showAll && Divider}
+      return <div class="flex-center gap-1px">{buttonWithDividers}</div>;
-          {previewBtn}
-          {Divider}
-          {variableBtn}
-        </div>
-      );
     }
   }
 ]);