From 0049c76f78d5426c590d876167cf5098a251e04f Mon Sep 17 00:00:00 2001
From: dap <15891557205@163.com>
Date: Fri, 30 Jan 2026 16:36:32 +0800
Subject: [PATCH] =?UTF-8?q?refactor(workflow):=20=E9=87=8D=E6=9E=84?=
 =?UTF-8?q?=E5=AE=A1=E6=89=B9=E9=9D=A2=E6=9D=BF=E7=9A=84=E6=A0=87=E7=AD=BE?=
 =?UTF-8?q?=E9=A1=B5=E5=AE=9E=E7=8E=B0=E4=BB=A5=E6=8F=90=E5=8D=87=E6=80=A7?=
 =?UTF-8?q?=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

使用组合式 API 的 `h` 函数和 `computed` 动态生成标签项，替代模板中的静态 `TabPane` 组件。
将 `body-style` 属性更新为 `styles` 以适配 antdv-next 的 API 变更。
启用 `destroy-on-hidden` 属性以在标签页隐藏时销毁非活动内容，优化内存使用。
---
 .../workflow/components/approval-panel.vue    | 50 +++++++++++++------
 1 file changed, 35 insertions(+), 15 deletions(-)

diff --git a/apps/web-antd/src/views/workflow/components/approval-panel.vue b/apps/web-antd/src/views/workflow/components/approval-panel.vue
index 4e768126..6934d14f 100644
--- a/apps/web-antd/src/views/workflow/components/approval-panel.vue
+++ b/apps/web-antd/src/views/workflow/components/approval-panel.vue
@@ -3,12 +3,14 @@ TODO: 优化项
 会先加载流程信息 再加载业务表单信息
 -->
 <script setup lang="ts">
+import type { TabsProps } from 'antdv-next';
+
 import type { ApprovalType } from './type';
 
 import type { FlowInfoResponse } from '#/api/workflow/instance/model';
 import type { TaskInfo } from '#/api/workflow/task/model';
 
-import { computed, ref, watch } from 'vue';
+import { computed, h, ref, watch } from 'vue';
 
 import { Fallback, VbenAvatar } from '@vben/common-ui';
 import { DictEnum } from '@vben/constants';
@@ -16,7 +18,7 @@ import { cn } from '@vben/utils';
 
 import { CopyOutlined } from '@antdv-next/icons';
 import { useClipboard } from '@vueuse/core';
-import { Card, Divider, TabPane, Tabs } from 'antdv-next';
+import { Card, Divider, Tabs } from 'antdv-next';
 
 import { flowInfo } from '#/api/workflow/instance';
 import { getTaskByTaskId } from '#/api/workflow/task';
@@ -151,13 +153,37 @@ async function handleCopy(text: string) {
   await copy(text);
   window.message.success('复制成功');
 }
+
+const tabItems = computed<TabsProps['items']>(() => {
+  if (!currentFlowInfo.value) {
+    return [];
+  }
+  return [
+    {
+      key: '1',
+      label: '审批详情',
+      content: h(ApprovalDetails, {
+        currentFlowInfo: currentFlowInfo.value,
+        task: props.task!,
+      }),
+    },
+    {
+      forceRender: false,
+      key: '2',
+      label: '审批流程图',
+      content: h(FlowPreview, {
+        instanceId: currentFlowInfo.value.instanceId,
+      }),
+    },
+  ];
+});
 </script>
 
 <template>
   <div :class="cn('thin-scrollbar', 'flex flex-1 overflow-y-hidden')">
     <Card
       v-if="task"
-      :body-style="{ overflowY: 'auto', height: '100%' }"
+      :styles="{ body: { overflowY: 'auto', height: '100%' } }"
       :loading="loading"
       class="thin-scrollbar flex-1 overflow-y-hidden"
       size="small"
@@ -215,18 +241,12 @@ async function handleCopy(text: string) {
           </div>
         </div>
 
-        <Tabs v-if="currentFlowInfo" class="flex-1">
-          <TabPane key="1" tab="审批详情">
-            <ApprovalDetails
-              :current-flow-info="currentFlowInfo"
-              :task="task"
-            />
-          </TabPane>
-
-          <TabPane key="2" tab="审批流程图">
-            <FlowPreview :instance-id="currentFlowInfo.instanceId" />
-          </TabPane>
-        </Tabs>
+        <Tabs
+          v-if="currentFlowInfo"
+          class="flex-1"
+          :items="tabItems"
+          :destroy-on-hidden="true"
+        />
       </div>
 
       <!-- 固定底部 占位高度 -->