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

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

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>