From 9428b44e304b34b00bbf0bafcce64153767eef6f Mon Sep 17 00:00:00 2001
From: dap <15891557205@163.com>
Date: Tue, 13 Jan 2026 21:52:20 +0800
Subject: [PATCH] =?UTF-8?q?refactor(workflow):=20=E9=87=8D=E6=9E=84?=
 =?UTF-8?q?=E5=AE=A1=E6=89=B9=E6=97=B6=E9=97=B4=E7=BA=BF=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=EF=BC=8C=E5=B0=86=E5=A4=B4=E5=83=8F=E9=80=BB=E8=BE=91=E7=A7=BB?=
 =?UTF-8?q?=E8=87=B3=E7=88=B6=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

将审批时间线项中的头像显示逻辑移动到父组件中统一管理
简化子组件代码并提高一致性
---
 .../components/approval-timeline-item.vue     | 32 +-----------
 .../workflow/components/approval-timeline.vue | 49 ++++++++++++++++---
 2 files changed, 43 insertions(+), 38 deletions(-)

diff --git a/apps/web-antd/src/views/workflow/components/approval-timeline-item.vue b/apps/web-antd/src/views/workflow/components/approval-timeline-item.vue
index 66c01fa0..6debac1d 100644
--- a/apps/web-antd/src/views/workflow/components/approval-timeline-item.vue
+++ b/apps/web-antd/src/views/workflow/components/approval-timeline-item.vue
@@ -3,15 +3,10 @@ import type { Flow } from '#/api/workflow/instance/model';
 
 import { computed, h, onMounted, ref } from 'vue';
 
-import { VbenAvatar } from '@vben/common-ui';
 import { DictEnum } from '@vben/constants';
 import { cn } from '@vben/utils';
 
-import {
-  MessageOutlined,
-  UsergroupAddOutlined,
-  UserOutlined,
-} from '@ant-design/icons-vue';
+import { MessageOutlined, UserOutlined } from '@ant-design/icons-vue';
 import { Avatar } from 'antdv-next';
 
 import { ossInfo } from '#/api/system/oss';
@@ -52,31 +47,6 @@ const isMultiplePerson = computed(
 
 <template>
   <div>
-    <template>
-      <div class="relative rounded-full border">
-        <Avatar
-          class="bg-primary-400"
-          v-if="isMultiplePerson"
-          :size="36"
-          :icon="h(UsergroupAddOutlined)"
-        />
-        <VbenAvatar
-          v-else
-          :alt="item?.approveName ?? 'unknown'"
-          class="size-[36px] rounded-full bg-primary text-white"
-          src=""
-        />
-        <div
-          :class="
-            cn(
-              'absolute bottom-0 right-[-2px]',
-              'size-[12px] rounded-full bg-green-500',
-              'border-[2px] border-white',
-            )
-          "
-        ></div>
-      </div>
-    </template>
     <div class="mb-5 ml-2 flex flex-col gap-1">
       <div class="flex items-center gap-1">
         <div class="font-bold">{{ item.nodeName }}</div>
diff --git a/apps/web-antd/src/views/workflow/components/approval-timeline.vue b/apps/web-antd/src/views/workflow/components/approval-timeline.vue
index dc4d801f..c2a17108 100644
--- a/apps/web-antd/src/views/workflow/components/approval-timeline.vue
+++ b/apps/web-antd/src/views/workflow/components/approval-timeline.vue
@@ -1,11 +1,15 @@
 <script setup lang="tsx">
-import type { TimelineProps } from 'antdv-next';
+import type { TimelineItemProps, TimelineProps } from 'antdv-next';
 
 import type { Flow } from '#/api/workflow/instance/model';
 
-import { computed, h } from 'vue';
+import { computed } from 'vue';
 
-import { Empty, Timeline } from 'antdv-next';
+import { VbenAvatar } from '@vben/common-ui';
+import { cn } from '@vben/utils';
+
+import { UsergroupAddOutlined } from '@ant-design/icons-vue';
+import { Avatar, Empty, Timeline } from 'antdv-next';
 
 import ApprovalTimelineItem from './approval-timeline-item.vue';
 
@@ -17,10 +21,41 @@ const props = defineProps<Props>();
 
 const items = computed<TimelineProps['items']>(() => {
   const { list } = props;
-  return list.map((item) => ({
-    key: item.id,
-    content: h(ApprovalTimelineItem, { item }),
-  }));
+  return list.map((item) => {
+    const isMultiplePerson = item.approver?.split(',').length > 1;
+
+    const result: TimelineItemProps = {
+      key: item.id,
+      dot: (
+        <div class="relative rounded-full border">
+          {isMultiplePerson && (
+            <Avatar
+              class="bg-primary-400"
+              icon={<UsergroupAddOutlined />}
+              size={36}
+            />
+          )}
+
+          {!isMultiplePerson && (
+            <VbenAvatar
+              alt={item?.approveName ?? 'unknown'}
+              class="size-[36px] rounded-full bg-primary text-white"
+              src=""
+            />
+          )}
+          <div
+            class={cn(
+              'absolute bottom-0 right-[-2px]',
+              'size-[12px] rounded-full bg-green-500',
+              'border-[2px] border-white',
+            )}
+          ></div>
+        </div>
+      ),
+      children: <ApprovalTimelineItem item={item} />,
+    };
+    return result;
+  });
 });
 </script>