feat: 任务列表开发

src/renderer/components/TaskList/index.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="task-list w-[392px] h-full rounded-[16px] bg-white">
-
+        <slot></slot>
     </div>
 </template>
 

src/renderer/layout/index.vue

@@ -4,7 +4,9 @@
       <slot></slot>
     </div>
 
-    <TaskList />
+    <TaskList>
+      <slot name="task"></slot>
+    </TaskList>
 
     <Menus />
   </div>

src/renderer/views/components/Task/index.vue

@@ -0,0 +1,51 @@
+<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>
+</template>
+
+<script setup lang="ts">
+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/views/home/index.vue

@@ -1,10 +1,13 @@
 <template>
   <Layout>
-    
+    <template #task>
+      <Task />
+    </template>
   </Layout>
 </template>
 
 <script setup lang="ts">
+import Task from '../components/Task/index.vue'
 
 const openBaidu = () => {  
 (window as any).ipcAPI?.openBaidu()