feat: add skills file

src/components/SideMenus/index.vue

@@ -1,15 +1,15 @@
 <template>
     <div class="w-[80px] h-full box-border flex flex-col items-center pb-[8px]">
-        <div :class="['flex flex-col gap-[16px]', { 'mt-auto mb-[8px] shrink-1': item.id === 4 }]"
+        <div :class="['flex flex-col gap-[16px]', { 'mt-auto mb-[8px] shrink-1': item.id === 5 }]"
             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 }]">
+                <div :class="['box-border rounded-[16px] p-[8px] hover:bg-white', { 'bg-white': item.id === currentId }]">
                     <component :is="item.icon" :color="item.id === currentId ? item.activeColor : item.color"
-                        :class="['w-[32px] h-[32px]']" />
+                        :class="['w-[32px] h-[32px]]']" />
                 </div>
 
                 <div
-                    class="text-[14px] mt-[4px] mb-[8px]"
+                    class="text-[14px] mt-[4px] mb-[8px] hover:text-[#2B7FFF]"
                     :style="{ color: item.id === currentId ? item.activeColor : item.color }">
                     {{ item.name }}
                 </div>
@@ -24,7 +24,7 @@
 <script setup lang="ts">
 import { ref, watch } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
-import { menus, type MenuItem } from '@constant/menus'
+import { menus, type MenuItem } from '../../constant/menus'
 
 const currentId = ref(1)
 const router = useRouter()

src/constant/menus.ts

@@ -1,4 +1,4 @@
-import { RiHomeLine, RiFileEditLine, RiCpuLine, RiSettingsLine } from '@remixicon/vue'
+import { RiHomeLine, RiFileEditLine, RiCpuLine, RiSettingsLine, RiPuzzle2Line  } from '@remixicon/vue'
 
 // 菜单列表申明
 export interface MenuItem {
@@ -37,6 +37,14 @@ export const menus: MenuItem[] = [
     },
     {
         id: 4,
+        name: '技能',
+        icon: RiPuzzle2Line,
+        color: '#525866',
+        activeColor: '#2B7FFF',
+        url: '/skills',
+    },
+    {
+        id: 5,
         name: '设置',
         icon: RiSettingsLine,
         color: '#525866',

src/pages/home/ChatHistory.vue

@@ -3,6 +3,7 @@
 		<div class="flex items-center m-2">
 			<img class="w-10 h-10 rounded-md" src="@assets/images/login/white_logo.png" />
 			<div class="font-bold text-gray-80">YINIAN</div>
+			<RiSideBarLine class="ml-auto cursor-pointer" />
 		</div>
 
 		<div
@@ -69,7 +70,7 @@
 
 <script setup lang="ts">
 import { ref, onMounted, defineEmits } from 'vue'
-import { RiAddLine, RiArrowRightSLine, RiArrowDownSLine } from '@remixicon/vue'
+import { RiSideBarLine, RiArrowRightSLine, RiArrowDownSLine } from '@remixicon/vue'
 import { getSessionList, deleteSession, updateSession } from '../../api/SessionsApi';
 
 const deleteDialogVisible = ref(false)

src/pages/setting/index.vue

@@ -1,6 +1,6 @@
 <template>
   <layout>
-    <div class="bg-white box-border w-full h-full flex rounded-[8px]">
+    <div class="bg-white box-border w-full h-full flex rounded-[16px]">
       <SystemConfig @change=onChange />
       <component :is="currentComponent" />
     </div>

src/pages/skills/index.vue

@@ -0,0 +1,11 @@
+<template>
+    <layout>
+    <div class="bg-white box-border w-full h-full flex rounded-[16px]">
+      
+    </div>
+  </layout>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped lang="scss"></style>

src/router/index.ts

@@ -29,6 +29,12 @@ const routes = [
     name: "Knowledge",
     meta: { requiresAuth: true },
   },
+  {
+    path: "/skills",
+    component: () => import("@src/pages/skills/index.vue"),
+    name: "Skills",
+    meta: { requiresAuth: true },
+  },
   {
     path: "/setting",
     component: () => import("@src/pages/setting/index.vue"),