chore: 审批样式

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

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { Timeline, TimelineItem } from 'ant-design-vue';
+
+/**
+ * TODO: 仅为demo 后期会替换
+ */
+import { VbenAvatar } from '../../../../../../packages/@core/ui-kit/shadcn-ui/src/components';
+
+interface ApprovalItem {
+  id: string;
+  name: string;
+  status: string;
+  remark?: string;
+  time: string;
+}
+
+const props = defineProps<{
+  list: ApprovalItem[];
+}>();
+</script>
+
+<template>
+  <Timeline>
+    <TimelineItem v-for="item in props.list" :key="item.id">
+      <template #dot>
+        <div class="relative rounded-full border">
+          <VbenAvatar
+            class="size-[36px]"
+            src="https://plus.dapdap.top/minio-server/plus/2024/11/21/925ed278e2d441beb7f695b41e13c4dd.jpg"
+          />
+          <div
+            class="border-background absolute bottom-0 right-0 size-[16px] rounded-full border-2 bg-green-500 content-['']"
+          >
+            <div class="flex items-center justify-center">
+              <span class="icon-[mdi--success-bold] text-white"></span>
+            </div>
+          </div>
+        </div>
+      </template>
+      <div class="ml-2 flex flex-col">
+        <div>发起人</div>
+        <div>疯狂的牛子Li</div>
+        <div>2022-01-01 12:00:00</div>
+        <div class="rounded-lg border p-1">
+          <span class="opacity-70">这里是备注信息</span>
+        </div>
+      </div>
+    </TimelineItem>
+  </Timeline>
+</template>

apps/web-antd/src/views/workflow/components/index.ts

@@ -1 +1,2 @@
 export { default as ApprovalCard } from './approval-card.vue';
+export { default as ApprovalTimeline } from './approval-timeline.vue';

apps/web-antd/src/views/workflow/task/taskWaiting.vue

@@ -16,7 +16,8 @@ import {
 } from 'ant-design-vue';
 import { debounce, uniqueId } from 'lodash-es';
 
-import { ApprovalCard } from '../components';
+import { ApprovalCard, ApprovalTimeline } from '../components';
+import RejectionPng from '../components/rejection.png';
 
 const handleScroll = debounce((e: Event) => {
   if (!e.target) {
@@ -45,6 +46,14 @@ const data = reactive(
   })),
 );
 
+const timeLine = Array.from({ length: 5 }).map(() => ({
+  id: uniqueId(),
+  name: '张三',
+  status: '审批中',
+  remark: '审批任务描述',
+  time: '2022-01-01',
+}));
+
 const lastSelectId = ref('');
 function handleCardClick(id: string) {
   // 点击的是同一个
@@ -90,7 +99,12 @@ function handleCardClick(id: string) {
           </div>
         </div>
       </div>
-      <Card class="flex-1" size="small" title="编号: 1234567890123456789012">
+      <Card
+        :body-style="{ overflowY: 'auto', height: '100%' }"
+        class="flex-1 overflow-y-hidden"
+        size="small"
+        title="编号: 1234567890123456789012"
+      >
         <div class="flex flex-col gap-5 p-4">
           <div class="flex flex-col gap-3">
             <div class="flex items-center gap-2">
@@ -111,10 +125,18 @@ function handleCardClick(id: string) {
                 <span>提交于: 2022-01-01 12:00:00</span>
               </div>
             </div>
+            <!-- 右侧图标 -->
+            <div class="z-100 absolute right-3 top-3">
+              <img :src="RejectionPng" class="size-[96px]" />
+            </div>
           </div>
-          <Tabs>
+          <Tabs class="flex-1">
             <TabPane key="1" tab="审批详情">
-              <Alert message="该页面仅为静态页 后期可能会用到!" type="info" />
+              <div class="h-fulloverflow-y-auto">
+                <Alert message="该页面仅为静态页 后期可能会用到!" type="info" />
+                <Divider />
+                <ApprovalTimeline :list="timeLine" />
+              </div>
             </TabPane>
             <TabPane key="2" tab="审批记录">审批记录</TabPane>
             <TabPane key="3" tab="全文评论(999+)">全文评论</TabPane>
@@ -122,7 +144,7 @@ function handleCardClick(id: string) {
         </div>
         <!-- 固定底部 -->
         <div
-          class="border-t-solid absolute bottom-0 left-0 w-full border-t-[1px] p-3"
+          class="border-t-solid bg-background absolute bottom-0 left-0 w-full border-t-[1px] p-3"
         >
           <div class="flex justify-end">
             <Space>