feat: 任务列表

src/renderer/components/TaskList/Card.vue

@@ -0,0 +1,37 @@
+<template>
+    <div v-for="item in task" :key="item.id"
+        class="border border-solid border-[#E5E8EE] rounded-[12px] p-[12px] mb-[12px] task">
+        <div class="flex items-center pb-[12px]" style="border-bottom: 1px dashed #E5E8EE;">
+            <img class="w-[24px] h-[24px] rounded-[8px]] mr-[4px]" src="@assets/images/task/xc.png" />
+            <div class="text-[16px] text-[#171717] font-bold mr-[8px]">{{ item.name }}</div>
+            <div class="pl-[8px] pr-[8px] bg-[#FFC0C5] text-[12px] text-[#681219] font-bold rounded-[100px]">{{
+                item.statusText }}</div>
+        </div>
+        <div class="flex items-center mt-[12px]">
+            <component :is="item.desIcon" :color="item.color" class="w-[15px] mr-[4px]" />
+            <div class="text-[#FB3748] text-[14px]">{{ item.des }}</div>
+        </div>
+        <div v-if="item.button" class="mt-[24px]">
+            <button class="w-[100%] h-[40px] bg-[#2B7FFF] text-white text-[14px] font-bold rounded-[12px]">登录</button>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive } from "vue";
+import { task } from '@constant/task'
+</script>
+
+<style scoped>
+.task {
+    position: relative;
+    z-index: 1;
+    transition: all .2s linear;
+}
+
+.task:hover {
+    z-index: 2;
+    box-shadow: 0 10px 20px rgba(0, 0, 0, .1);
+    transform: translate3d(0, -2px, 0);
+}
+</style>

src/renderer/components/TaskList/List.vue

@@ -0,0 +1,59 @@
+<template>
+    <div class="task p-[12px]">
+        <div class="flex border border-[#BEDBFF] h-[48px] p-[4px] rounded-[10px] bg-[#EFF6FF] task-tab">
+            <div v-for="item in tabs" :key="item.value" class="flex-1 flex text-center items-center h-full align-middle text" :class="active === item.value && 'active'" @click="changeTab(item.value)">
+                <div class="flex-1">{{ item.name }}<span v-if="item.total">{{`（${item.total > 98 && item.total + '+' || item.total}）`}}</span></div>
+            </div>
+        </div>
+        <div class="flex justify-between mt-[12px] mb-[12px] text-[14px]">
+            <div class="text-[#171717]">今天</div>
+            <div class="text-[#99A0AE]">02:32:05</div>
+        </div>
+        <div>
+            <TaskCard />
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import TaskCard from './Card.vue';
+import { ref, reactive } from "vue";
+
+const tabs = reactive([{
+    name: '待处理',
+    value: 1,
+    total: 10,
+},{
+    name: '已处理',
+    value: 2,
+    total: 99,
+}])
+const active = ref(1);
+const changeTab = (val:number) => {
+    active.value = val;
+};
+</script>
+
+<style scoped>
+.task-tab .text {
+    color: #525866;
+    font-size: 14px;
+    cursor: pointer;
+}
+.task-tab .active {
+    position: relative;
+    color: #2B7FFF;
+    background: #FFFFFF;
+    border-radius: 8px;
+}
+.task-tab .active::after {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    content: '';
+    border-radius: 8px;
+    border: 1px solid #2B7FFF;
+}
+</style>

src/renderer/components/TaskList/index.vue

@@ -1,9 +1,13 @@
 <template>
     <div class="task-list w-[392px] h-full rounded-[16px] bg-white">
-        <slot></slot>
+        <slot>
+            <TaskList />
+        </slot>
     </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import TaskList from './List.vue'
+</script>
 
 <style></style>