feat: 调整布局

src/renderer/components/Menus/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="w-[80px] h-full box-border pt-[12px] pb-[12px] flex flex-col items-center justify-center">
+    <div class="w-[80px] h-full box-border flex flex-col items-center justify-center">
         <div :class="['flex flex-col gap-[16px]', { 'mt-auto mb-[8px] shrink-1': item.id === 7 }]"
             v-for="(item) in menus" :key="item.id">
             <div :class="['cursor-pointer flex flex-col items-center justify-center']" @click="handleClick(item)">
@@ -23,11 +23,13 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import { menus } from '@constant/menus'
+import { useRouter } from "vue-router";
 
+const router = useRouter();
 const currentId = ref(1)
 const handleClick = async (item: any) => {
     currentId.value = item.id
-    await (window as any).ipcAPI.tabs.create(item.url)
+    router.push(item.url);
 }
 </script>
 

src/renderer/components/TaskList/index.vue

@@ -1,9 +1,59 @@
 <template>
     <div class="task-list w-[392px] h-full rounded-[16px] bg-white">
-        <slot></slot>
+        <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>
     </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { ref, reactive } from "vue";
 
-<style></style>
+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>