改进 菜单

src/components/AppBar.vue

@@ -3,11 +3,7 @@
   <v-navigation-drawer v-model="appStore.navigation_drawer">
     <div class="pa-2">
       <v-btn-group rounded="lg">
-        <v-btn
+        <v-btn density="default" icon="mdi-close" @click="appStore.navigation_drawer = !appStore.navigation_drawer" />
-          density="default"
-          icon="mdi-close"
-          @click="appStore.navigation_drawer = !appStore.navigation_drawer"
-        />
 
         <v-btn density="default" icon="mdi-plus" title="创建助理" />
       </v-btn-group>
@@ -16,67 +12,37 @@
     <!-- <v-divider></v-divider> -->
 
     <v-list density="compact" nav>
-      <v-list-item prepend-icon="mdi-home" rounded="lg" title="首页" to="/" />
+      <template v-for="item in appStore.navigation_items">
+        <v-list-item :prepend-icon="item.icon" rounded="lg" :title="item.text" :to="item.to" />
+      </template>
 
-      <v-list-item
-        prepend-icon="mdi-assistant"
-        rounded="lg"
-        title="助理"
-        to="/assistants"
-      />
 
-      <v-list-item
+      <v-list-item v-show="!userStore.logined" prepend-icon="mdi-account" rounded="xl" title="登录" to="/auth/login" />
-        prepend-icon="mdi-tools"
-        rounded="lg"
-        title="工具"
-        to="/tools"
-      />
-
-      <v-list-item
-        prepend-icon="mdi-web"
-        rounded="lg"
-        title="连通测试"
-        to="/ping"
-      />
-
-      <v-list-item
-        v-show="!userStore.logined"
-        prepend-icon="mdi-account"
-        rounded="lg"
-        title="登录"
-        to="/auth/login"
-      />
 
       <template v-for="chat in chatStore.chats.data" :key="chat.id">
-        <v-list-item
+        <v-list-item prepend-icon="mdi-chat" rounded="lg" :title="chat?.name" :to="'/chats/' + chat.id" />
-          prepend-icon="mdi-chat"
-          rounded="lg"
-          :title="chat?.name"
-          :to="'/chats/' + chat.id"
-        />
       </template>
     </v-list>
   </v-navigation-drawer>
 
   <v-app-bar>
-    <v-app-bar-nav-icon
+    <v-app-bar-nav-icon @click="appStore.navigation_drawer = !appStore.navigation_drawer" />
-      @click="appStore.navigation_drawer = !appStore.navigation_drawer"
-    />
 
     <v-app-bar-title>{{ configStore.app_name }}</v-app-bar-title>
   </v-app-bar>
   <!-- </v-app> -->
 </template>
 <script lang="ts" setup>
-import { useConfigStore } from "@/stores/config";
+import { useConfigStore } from "@/stores/config"
-import { useUserStore } from "@/stores/user";
+import { useUserStore } from "@/stores/user"
-import { useAppStore } from "@/stores/app";
+import { useAppStore } from "@/stores/app"
-import { useChatStore } from "@/stores/chat";
+import { useChatStore } from "@/stores/chat"
 
-const chatStore = useChatStore();
+const chatStore = useChatStore()
-const configStore = useConfigStore();
+const configStore = useConfigStore()
-const userStore = useUserStore();
+const userStore = useUserStore()
-const appStore = useAppStore();
+const appStore = useAppStore()
 
 chatStore.getChats();
+
 </script>

src/stores/app.ts

@@ -5,5 +5,27 @@ export const useAppStore = defineStore("app", {
   persist: true,
   state: () => ({
     navigation_drawer: false,
+    navigation_items: [
+      {
+        icon: "mdi-home",
+        text: "主页",
+        to: "/",
+      },
+      {
+        icon: "mdi-assistant",
+        text: "助理",
+        to: "/assistants",
+      },
+      {
+        icon: "mdi-tools",
+        text: "工具",
+        to: "/tools",
+      },
+      {
+        icon: "mdi-web",
+        text: "联通测试",
+        to: "/ping",
+      }
+    ],
   }),
 });