From b3f81ba3f0511b8df71557f7bf994411804ec222 Mon Sep 17 00:00:00 2001
From: AN <1983933789@qq.com>
Date: Wed, 18 Jun 2025 15:15:19 +0800
Subject: [PATCH] =?UTF-8?q?optimize(projects):=20=E7=BB=9F=E4=B8=80button?=
 =?UTF-8?q?=E7=9A=84=E6=B7=BB=E5=8A=A0=E6=96=B9=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/workflow/category/index.vue         |   2 +-
 src/views/workflow/leave/index.vue            |   1 -
 .../workflow/process-definition/index.vue     | 143 +++++++++---------
 src/views/workflow/process-instance/index.vue |  73 +++++----
 4 files changed, 108 insertions(+), 111 deletions(-)

diff --git a/src/views/workflow/category/index.vue b/src/views/workflow/category/index.vue
index a345d4f2..8a52ddf9 100644
--- a/src/views/workflow/category/index.vue
+++ b/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 />}
diff --git a/src/views/workflow/leave/index.vue b/src/views/workflow/leave/index.vue
index cf5795f2..d3a054e3 100644
--- a/src/views/workflow/leave/index.vue
+++ b/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];
diff --git a/src/views/workflow/process-definition/index.vue b/src/views/workflow/process-definition/index.vue
index cb8b6d2a..7b2b8746 100644
--- a/src/views/workflow/process-definition/index.vue
+++ b/src/views/workflow/process-definition/index.vue
@@ -176,38 +176,56 @@ const {
       width: 150,
       fixed: 'right',
       render: row => {
-        const Divider = <NDivider vertical />;
+        const buttons = [];
+        buttons.push(
+          <ButtonIcon
+            text
+            type="primary"
+            icon="material-symbols:drive-file-rename-outline-outline"
+            tooltipContent={$t('common.edit')}
+            onClick={() => edit(row.id)}
+          />
+        );
+        buttons.push(
+          <ButtonIcon
+            text
+            type="error"
+            icon="material-symbols:delete-outline"
+            tooltipContent={$t('common.delete')}
+            popconfirmContent={$t('common.confirmDelete')}
+            onPositiveClick={() => handleDelete(row.id)}
+          />
+        );
+        buttons.push(
+          <ButtonIcon
+            text
+            type="primary"
+            icon="material-symbols:content-copy"
+            tooltipContent="复制流程"
+            popconfirmContent={`确定要复制 ${row.flowName} 吗？`}
+            onPositiveClick={() => handleCopy(row.id)}
+          />
+        );
 
-        const buttons = {
-          edit: (
-            <ButtonIcon
-              text
-              type="primary"
-              icon="material-symbols:drive-file-rename-outline-outline"
-              tooltipContent={$t('common.edit')}
-              onClick={() => edit(row.id)}
-            />
-          ),
-          delete: (
-            <ButtonIcon
-              text
-              type="error"
-              icon="material-symbols:delete-outline"
-              tooltipContent={$t('common.delete')}
-              popconfirmContent={$t('common.confirmDelete')}
-              onPositiveClick={() => handleDelete(row.id)}
-            />
-          ),
-          design: (
-            <ButtonIcon
-              text
-              type="primary"
-              icon="material-symbols:design-services"
-              tooltipContent="流程设计"
-              onClick={() => handleDesign(row.id)}
-            />
-          ),
-          preview: (
+        const firstRowButtons = buttons.flatMap((btn, index) => {
+          if (index === 0) return [btn];
+          return [<NDivider vertical />, btn];
+        });
+
+        const secondRowButtons = [];
+
+        secondRowButtons.push(
+          <ButtonIcon
+            text
+            type="primary"
+            icon="material-symbols:file-export"
+            tooltipContent="导出流程"
+            onClick={() => handleExport(row)}
+          />
+        );
+
+        secondRowButtons.push(
+          isPublish.value ? (
             <ButtonIcon
               text
               type="primary"
@@ -215,8 +233,19 @@ const {
               tooltipContent="查看流程"
               onClick={() => handlePreview(row.id)}
             />
-          ),
-          publish: (
+          ) : (
+            <ButtonIcon
+              text
+              type="primary"
+              icon="material-symbols:design-services"
+              tooltipContent="流程设计"
+              onClick={() => handleDesign(row.id)}
+            />
+          )
+        );
+
+        if (!isPublish.value) {
+          secondRowButtons.push(
             <ButtonIcon
               text
               type="primary"
@@ -225,48 +254,18 @@ const {
               popconfirmContent={`确定要发布 ${row.flowName} 吗？`}
               onPositiveClick={() => handlePublish(row.id)}
             />
-          ),
-          copy: (
-            <ButtonIcon
-              text
-              type="primary"
-              icon="material-symbols:content-copy"
-              tooltipContent="复制流程"
-              popconfirmContent={`确定要复制 ${row.flowName} 吗？`}
-              onPositiveClick={() => handleCopy(row.id)}
-            />
-          ),
-          export: (
-            <ButtonIcon
-              text
-              type="primary"
-              icon="material-symbols:file-export"
-              tooltipContent="导出流程"
-              onClick={() => handleExport(row)}
-            />
-          )
-        };
+          );
+        }
+
+        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">
-              {buttons.edit}
-              {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 class="h-[24px] flex-center gap-4px">{firstRowButtons}</div>
+            <div class="h-[24px] flex-center gap-4px">{secondRowWithDividers}</div>
           </div>
         );
       }
diff --git a/src/views/workflow/process-instance/index.vue b/src/views/workflow/process-instance/index.vue
index 8fd5c044..3f5122ce 100644
--- a/src/views/workflow/process-instance/index.vue
+++ b/src/views/workflow/process-instance/index.vue
@@ -153,38 +153,42 @@ 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 = (
-        <ButtonIcon
-          text
-          type="error"
-          showPopconfirmIcon={false}
-          icon="material-symbols:cancel-outline-rounded"
-          tooltipContent="作废流程"
-          popconfirmContent={
-            <NInput v-model:value={cancelModel.comment} size="large" type="textarea" placeholder="请输入作废原因" />
-          }
-          onPositiveClick={() => handleCancel(id)}
-        />
-      );
+      if (showAll) {
+        buttons.push(
+          <ButtonIcon
+            text
+            type="error"
+            showPopconfirmIcon={false}
+            icon="material-symbols:cancel-outline-rounded"
+            tooltipContent="作废流程"
+            popconfirmContent={
+              <NInput v-model:value={cancelModel.comment} size="large" type="textarea" placeholder="请输入作废原因" />
+            }
+            onPositiveClick={() => handleCancel(id)}
+          />
+        );
+      }
 
-      const deleteBtn = (
-        <ButtonIcon
-          text
-          type="error"
-          icon="material-symbols:delete-outline"
-          tooltipContent={$t('common.delete')}
-          popconfirmContent={$t('common.confirmDelete')}
-          onPositiveClick={() => handleDelete(id)}
-        />
-      );
+      if (showAll) {
+        buttons.push(
+          <ButtonIcon
+            text
+            type="error"
+            icon="material-symbols:delete-outline"
+            tooltipContent={$t('common.delete')}
+            popconfirmContent={$t('common.confirmDelete')}
+            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 (
-        <div class="flex-center gap-1px">
-          {showAll && cancelBtn}
-          {showAll && Divider}
-          {showAll && deleteBtn}
-          {showAll && Divider}
-          {previewBtn}
-          {Divider}
-          {variableBtn}
-        </div>
-      );
+      const buttonWithDividers = buttons.flatMap((btn, index) => {
+        if (index === 0) return [btn];
+        return [<NDivider vertical />, btn];
+      });
+
+      return <div class="flex-center gap-1px">{buttonWithDividers}</div>;
     }
   }
 ]);