chore: 我的待办 样式

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

@@ -2,19 +2,29 @@
 import { Avatar, Descriptions, DescriptionsItem, Tag } from 'ant-design-vue';
 
 interface Props {
+  id: string;
   endTime: string;
   startTime: string;
   title: string;
   desc: string;
   status: string;
+  active: boolean;
 }
 
-withDefaults(defineProps<{ info: Props }>(), {});
+const props = withDefaults(defineProps<{ info: Props }>(), {});
+
+const emit = defineEmits<{ click: [string] }>();
+
+function handleClick() {
+  emit('click', props.info.id);
+}
 </script>
 
 <template>
   <div
-    class="cursor-pointer rounded-lg border-[1px] border-solid border-gray-200 p-3 transition-shadow duration-300 ease-in-out hover:shadow-lg"
+    :class="{ '!border-primary': info.active, '!border-[2px]': info.active }"
+    class="cursor-pointer rounded-lg border-[1px] border-solid border-gray-200 p-3 transition-shadow duration-300 ease-in-out hover:shadow-lg dark:border-gray-600"
+    @click.stop="handleClick"
   >
     <Descriptions :column="1" :title="info.title" size="middle">
       <template #extra>

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useTemplateRef } from 'vue';
+import { reactive } from 'vue';
 
 import { Page } from '@vben/common-ui';
 
@@ -13,12 +13,10 @@ import {
   Tabs,
   Tag,
 } from 'ant-design-vue';
-import { debounce } from 'lodash-es';
+import { debounce, uniqueId } from 'lodash-es';
 
 import { ApprovalCard } from '../components';
 
-const scrollContainer = useTemplateRef('scrollContainer');
-
 const handleScroll = debounce((e: Event) => {
   if (!e.target) {
     return;
@@ -33,28 +31,40 @@ const handleScroll = debounce((e: Event) => {
   // console.log(scrollTop + clientHeight);
   // console.log(scrollHeight);
 }, 200);
+
+const data = reactive(
+  Array.from({ length: 10 }).map(() => ({
+    id: uniqueId(),
+    startTime: '2022-01-01',
+    endTime: '2022-01-02',
+    title: '审批任务',
+    desc: '审批任务描述',
+    status: '审批中',
+    active: false,
+  })),
+);
+
+function handleCardClick(id: string) {
+  data.forEach((item) => {
+    item.active = item.id === id ? !item.active : false;
+  });
+}
 </script>
 
 <template>
   <Page :auto-content-height="true">
     <div class="flex h-full gap-2">
       <div
-        ref="scrollContainer"
         class="bg-background h-full w-[320px] overflow-y-auto rounded-lg py-3"
         @scroll="handleScroll"
       >
         <div class="flex flex-col gap-2">
           <ApprovalCard
-            v-for="item in 10"
+            v-for="item in data"
-            :key="item"
+            :key="item.id"
-            :info="{
+            :info="item"
-              startTime: '2022-01-01',
-              endTime: '2022-01-02',
-              title: '审批任务',
-              desc: '审批任务描述',
-              status: '审批中',
-            }"
             class="mx-2"
+            @click="handleCardClick"
           />
         </div>
       </div>
@@ -90,7 +100,7 @@ const handleScroll = debounce((e: Event) => {
         </div>
         <!-- 固定底部 -->
         <div
-          class="border-t-solid absolute bottom-0 left-0 w-full border-t-[1px] border-t-slate-300 p-3"
+          class="border-t-solid absolute bottom-0 left-0 w-full border-t-[1px] border-t-slate-300 p-3 dark:border-t-slate-600"
         >
           <div class="flex justify-end">
             <Space>