refactor(views): 优化组件代码结构，使用tsx和计算属性重构描述列表

重构多个组件中的描述列表，使用tsx语法和计算属性items来简化模板代码
统一调整样式类名顺序，提升代码可读性和维护性

apps/web-antd/src/views/workflow/components/approval-timeline.vue

@@ -1,6 +1,10 @@
-<script setup lang="ts">
+<script setup lang="tsx">
+import type { TimelineProps } from 'antdv-next';
+
 import type { Flow } from '#/api/workflow/instance/model';
 
+import { computed, h } from 'vue';
+
 import { Empty, Timeline } from 'antdv-next';
 
 import ApprovalTimelineItem from './approval-timeline-item.vue';
@@ -9,12 +13,18 @@ interface Props {
   list: Flow[];
 }
 
-defineProps<Props>();
+const props = defineProps<Props>();
+
+const items = computed<TimelineProps['items']>(() => {
+  const { list } = props;
+  return list.map((item) => ({
+    key: item.id,
+    content: h(ApprovalTimelineItem, { item }),
+  }));
+});
 </script>
 
 <template>
-  <Timeline v-if="list.length > 0">
-    <ApprovalTimelineItem v-for="item in list" :key="item.id" :item="item" />
-  </Timeline>
+  <Timeline v-if="list.length > 0" :items="items" />
   <Empty v-else />
 </template>