添加更多菜单

.eslintrc

@@ -1,6 +1,7 @@
 {
   "extends": "@antfu",
   "rules": {
-    "eqeqeq": "off"
+    "eqeqeq": "off",
+    "vue/eqeqeq": "off"
   }
 }

src/auto-imports.d.ts

@@ -194,6 +194,7 @@ declare global {
   const useMediaQuery: typeof import('@vueuse/core')['useMediaQuery']
   const useMemoize: typeof import('@vueuse/core')['useMemoize']
   const useMemory: typeof import('@vueuse/core')['useMemory']
+  const useMore: typeof import('./hooks/useMore')['useMore']
   const useMounted: typeof import('@vueuse/core')['useMounted']
   const useMouse: typeof import('@vueuse/core')['useMouse']
   const useMouseInElement: typeof import('@vueuse/core')['useMouseInElement']
@@ -484,6 +485,7 @@ declare module 'vue' {
     readonly useMediaQuery: UnwrapRef<typeof import('@vueuse/core')['useMediaQuery']>
     readonly useMemoize: UnwrapRef<typeof import('@vueuse/core')['useMemoize']>
     readonly useMemory: UnwrapRef<typeof import('@vueuse/core')['useMemory']>
+    readonly useMore: UnwrapRef<typeof import('./hooks/useMore')['useMore']>
     readonly useMounted: UnwrapRef<typeof import('@vueuse/core')['useMounted']>
     readonly useMouse: UnwrapRef<typeof import('@vueuse/core')['useMouse']>
     readonly useMouseInElement: UnwrapRef<typeof import('@vueuse/core')['useMouseInElement']>

src/components.d.ts

@@ -20,8 +20,10 @@ declare module '@vue/runtime-core' {
     AMenu: typeof import('ant-design-vue/es')['Menu']
     AMenuItem: typeof import('ant-design-vue/es')['MenuItem']
     ASelect: typeof import('ant-design-vue/es')['Select']
+    ASubMenu: typeof import('ant-design-vue/es')['SubMenu']
     NavDrawer: typeof import('./components/NavDrawer.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    SubMenu: typeof import('./components/SubMenu.vue')['default']
   }
 }

src/components/NavDrawer.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 const { t } = useI18n()
 const route = useRoute()
+const { menu: moreMenu, handler: handleMenuClick } = useMore()
 
 const menu = computed(() => [{
   icon: 'i-mdi:view-grid',
@@ -30,7 +31,7 @@ const name = computed(() => route.name as string)
 <template>
   <a-layout style="min-height: 100vh">
     <a-layout-sider collapsed :trigger="null" theme="light">
-      <a-menu :selected-keys="[name]">
+      <a-menu :selected-keys="[name]" flex flex-col h-full @click="handleMenuClick">
         <a-menu-item v-for="{ key, icon, tip, to } in menu" :key="key">
           <template #icon>
             <div text-8 :class="icon" />
@@ -39,6 +40,8 @@ const name = computed(() => route.name as string)
             {{ tip }}
           </router-link>
         </a-menu-item>
+        <div flex-1 />
+        <sub-menu v-if="moreMenu.children?.length" :menu="moreMenu" />
       </a-menu>
     </a-layout-sider>
     <a-layout>

src/components/SubMenu.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type { Menu } from '../interfaces/'
+
+defineProps<{
+  menu: Menu
+}>()
+</script>
+
+<template>
+  <a-sub-menu :key="menu.key">
+    <template v-if="menu.icon" #icon>
+      <div :class="menu.icon" />
+    </template>
+    <template v-if="menu.children?.length" #title>
+      {{ menu.title }}
+    </template>
+    <template v-for="item in menu.children" :key="item.key">
+      <template v-if="!item.children">
+        <a-menu-item :key="item.key">
+          {{ item.title }}
+        </a-menu-item>
+      </template>
+      <template v-else>
+        <sub-menu :key="item.key" :menu="item" />
+      </template>
+    </template>
+  </a-sub-menu>
+</template>

src/hooks/useMore.ts

@@ -0,0 +1,52 @@
+import type { Menu } from '../interfaces/'
+
+export function useMore() {
+  const menu = ref<Menu>({
+    key: 'more',
+    title: 'more',
+    icon: 'i-mdi:dots-vertical',
+    children: [],
+  })
+
+  const map = new Map<string, Function>()
+
+  function set(menu: Menu, path: string[] = []) {
+    if (!menu.children)
+      return
+
+    path.push(menu.key)
+
+    for (const item of menu.children) {
+      if (item.click) {
+        const key = [...path, item.key].join('.')
+        map.set(key, item.click)
+      }
+      set(item, path)
+    }
+  }
+
+  const unwatch = watch(menu, (v) => {
+    map.clear()
+    set(v)
+  }, {
+    deep: true,
+  })
+
+  tryOnScopeDispose(() => {
+    unwatch()
+    menu.value.children = []
+  })
+
+  function handler(info) {
+    const { keyPath } = info
+    const key = (keyPath as string[]).join('.')
+    const click = map.get(key)
+    if (click)
+      click()
+  }
+
+  return {
+    menu,
+    handler,
+  }
+}

src/interfaces/index.ts

@@ -0,0 +1,7 @@
+export interface Menu {
+  key: string
+  title: string
+  icon?: string
+  children?: Array<Menu>
+  click?: Function
+}