改进 菜单

src/components.d.ts

@@ -9,9 +9,11 @@ declare module 'vue' {
   export interface GlobalComponents {
     Chat: typeof import('./components/chat/chat.vue')['default']
     Container: typeof import('./components/Container.vue')['default']
+    copy: typeof import('./components/Menu copy.vue')['default']
     Menu: typeof import('./components/Menu.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     Test: typeof import('./components/chat/test.vue')['default']
+    UserMenu: typeof import('./components/UserMenu.vue')['default']
   }
 }

src/components/Menu.vue

@@ -4,54 +4,18 @@
     :collapsed="collapsed"
     :collapsed-width="64"
     :collapsed-icon-size="22"
-    :options="menuOptions"
+    :options="leftMenuOptions"
   />
 </template>
 
 <script setup lang="ts">
-import { NIcon, NMenu } from 'naive-ui'
-import { Home as HomeIcon } from '@vicons/ionicons5'
-import type { MenuOption } from 'naive-ui'
-import { RouterLink } from 'vue-router'
-import { useRoute } from 'vue-router'
+import { NMenu } from "naive-ui";
+import { useRoute } from "vue-router";
+import { leftMenuOptions } from "../plugins/menus/left";
 
-const route = useRoute()
+const route = useRoute();
 
-const currentRoute: any = computed(() => route.name)
+const currentRoute: any = computed(() => route.name);
 
-const collapsed = ref(false)
-const menuOptions: MenuOption[] = [
-  {
-    label: () =>
-      h(
-        RouterLink,
-        {
-          to: {
-            name: '/'
-          }
-        },
-        { default: () => 'Amber' }
-      ),
-    key: '/',
-    icon: renderIcon(HomeIcon)
-  },
-  {
-    label: () =>
-      h(
-        RouterLink,
-        {
-          to: {
-            name: '/auth/login'
-          }
-        },
-        { default: () => 'Login' }
-      ),
-    key: '/auth/login',
-    icon: renderIcon(HomeIcon)
-  }
-]
-
-function renderIcon(icon: Component) {
-  return () => h(NIcon, null, { default: () => h(icon) })
-}
+const collapsed = ref(false);
 </script>

src/components/UserMenu.vue

@@ -0,0 +1,19 @@
+<template>
+  <n-menu
+    :value="currentRoute"
+    :collapsed="collapsed"
+    :collapsed-width="64"
+    :collapsed-icon-size="22"
+    :options="userMenuOptions"
+  />
+</template>
+
+<script setup lang="ts">
+import { NMenu } from "naive-ui";
+import { useRoute } from "vue-router";
+import { userMenuOptions } from "../plugins/menus/user";
+
+const route = useRoute();
+const currentRoute: any = computed(() => route.name);
+const collapsed = ref(false);
+</script>

src/layouts/Header.vue

@@ -4,7 +4,12 @@
       <n-grid cols="2" class="header-height">
         <n-grid-item class="flex items-center justify-start mr-1.5">
           <!-- 左侧 -->
-          <n-popover placement="bottom" trigger="click" style="padding: 0; width: 288px" v-if="isMobile">
+          <n-popover
+            placement="bottom"
+            trigger="click"
+            style="padding: 0; width: 288px"
+            v-if="isMobile"
+          >
             <template #trigger>
               <n-icon size="20" style="margin-left: 12px">
                 <menu-outline />
@@ -15,7 +20,23 @@
         </n-grid-item>
 
         <n-grid-item class="flex items-center justify-end mr-1.5">
-          <n-avatar round size="medium" :src="userStore.user.avatar" />
+          <!-- 右侧 -->
+          <n-popover
+            :placement="userPlacement"
+            class="w-full"
+            trigger="click"
+            style="padding: 0"
+          >
+            <template #trigger>
+              <n-avatar
+                round
+                size="medium"
+                :src="userStore.user.avatar"
+                class="mr-2"
+              />
+            </template>
+            <UserMenu class="select-none" />
+          </n-popover>
         </n-grid-item>
       </n-grid>
     </n-layout-header>
@@ -23,10 +44,17 @@
 </template>
 
 <script setup lang="ts">
+import UserMenu from "../components/UserMenu.vue";
 import { useUserStore } from "../stores/user";
 import { useIsMobile, useIsTablet } from "../utils/composables";
-import {MenuOutline} from "@vicons/ionicons5"
+import { MenuOutline } from "@vicons/ionicons5";
 const userStore = useUserStore();
 const isMobile = useIsMobile();
 const isTablet = useIsTablet();
+
+const userPlacement = ref("bottom");
+if (isMobile.value) {
+  userPlacement.value = "bottom";
+}
+
 </script>

src/pages/auth/logout.vue

@@ -0,0 +1,3 @@
+<template></template>
+
+<script setup lang="ts"></script>

src/plugins/menus/left.ts

@@ -0,0 +1,32 @@
+import type { MenuOption } from "naive-ui";
+import { RouterLink } from "vue-router";
+import { NIcon } from "naive-ui";
+import { Home as HomeIcon } from "@vicons/ionicons5";
+
+const menuOptions: Ref<MenuOption[]> = ref([]);
+
+function renderIcon(icon: Component) {
+  return () => h(NIcon, null, { default: () => h(icon) });
+}
+
+const addMenuItem = (to: string, label: string, icon: any) => {
+  menuOptions.value.push({
+    label: () =>
+      h(
+        RouterLink,
+        {
+          to: {
+            name: to as any,
+          },
+        },
+        { default: () => label }
+      ),
+    key: to as string,
+    icon: renderIcon(icon),
+  });
+};
+
+addMenuItem("/", "Amber", HomeIcon);
+addMenuItem("/auth/login", "Amber", HomeIcon);
+
+export { addMenuItem as addLeftMenu, menuOptions as leftMenuOptions };

src/plugins/menus/user.ts

@@ -0,0 +1,31 @@
+import type { MenuOption } from "naive-ui";
+import { RouterLink } from "vue-router";
+import { NIcon } from "naive-ui";
+import { LogOutOutline } from "@vicons/ionicons5";
+
+const menuOptions: Ref<MenuOption[]> = ref([]);
+
+function renderIcon(icon: Component) {
+  return () => h(NIcon, null, { default: () => h(icon) });
+}
+
+const addMenuItem = (to: string, label: string, icon: any) => {
+  menuOptions.value.push({
+    label: () =>
+      h(
+        RouterLink,
+        {
+          to: {
+            name: to as any,
+          },
+        },
+        { default: () => label }
+      ),
+    key: to as string,
+    icon: renderIcon(icon),
+  });
+};
+
+addMenuItem("/auth/logout", "退出登录", LogOutOutline);
+
+export { addMenuItem as addUserMenu, menuOptions as userMenuOptions };

src/typed-router.d.ts

@@ -22,6 +22,7 @@ declare module 'vue-router/auto-routes' {
     '/auth/callback': RouteRecordInfo<'/auth/callback', '/auth/callback', Record<never, never>, Record<never, never>>,
     '/auth/continue': RouteRecordInfo<'/auth/continue', '/auth/continue', Record<never, never>, Record<never, never>>,
     '/auth/login': RouteRecordInfo<'/auth/login', '/auth/login', Record<never, never>, Record<never, never>>,
+    '/auth/logout': RouteRecordInfo<'/auth/logout', '/auth/logout', Record<never, never>, Record<never, never>>,
     '/guest/': RouteRecordInfo<'/guest/', '/guest', Record<never, never>, Record<never, never>>,
     '/test': RouteRecordInfo<'/test', '/test', Record<never, never>, Record<never, never>>,
     '/test2': RouteRecordInfo<'/test2', '/test2', Record<never, never>, Record<never, never>>,