refactor(workflow): 重构审批时间线组件，将头像逻辑移至父组件

将审批时间线项中的头像显示逻辑移动到父组件中统一管理
简化子组件代码并提高一致性

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>

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>