feat: 首页调整

src/renderer/components/SideMenus/index.vue

@@ -0,0 +1,38 @@
+<template>
+    <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)">
+                <div :class="['box-border rounded-[16px] p-[8px]', { 'bg-white': item.id === currentId }]">
+                    <component :is="item.icon" :color="item.id === currentId ? item.activeColor : item.color"
+                        :class="['w-[32px] h-[32px]']" />
+                </div>
+
+                <div
+                    :class="['text-[14px] mt-[4px] mb-[8px]', item.id === currentId ? `text-[${item.activeColor}]` : item.color]">
+                    {{ item.name }}
+                </div>
+            </div>
+        </div>
+        <div class="w-[48px] h-[48px] rounded-full overflow-hidden">
+            <img class="w-full h-full object-cover" src="@assets/images/login/black_logo.png" />
+        </div>
+    </div>
+</template>
+
+<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) => {
+    console.log("🚀 ~ handleClick ~ item:", item)
+    currentId.value = item.id
+    router.push(item.url);
+}
+</script>
+
+<style></style>