feat(projects): 添加多级菜单页面

src/enum/route.ts

@@ -10,6 +10,9 @@ export enum EnumRoutePath {
   'dashboard' = '/dashboard',
   'dashboard-analysis' = '/dashboard/analysis',
   'dashboard-workbench' = '/dashboard/workbench',
+  'multimenu' = '/multimenu',
+  'multimenu-first' = '/multimenu/first',
+  'multimenu-first-second' = '/multimenu/first/second',
   'exception' = '/exception',
   'exception-403' = '/exception/403',
   'exception-404' = '/exception/404',
@@ -28,6 +31,9 @@ export enum EnumRouteTitle {
   'dashboard' = '仪表盘',
   'dashboard-analysis' = '分析页',
   'dashboard-workbench' = '工作台',
+  'multimenu' = '多级菜单',
+  'multimenu-first' = '一级菜单',
+  'multimenu-first-second' = '二级菜单',
   'exception' = '异常页',
   'exception-403' = '异常页-403',
   'exception-404' = '异常页-404',

src/layouts/BasicLayout/components/GlobalSider/components/VerticalMixSider/components/MixMenu.vue

@@ -1,10 +1,5 @@
 <template>
-  <div
-    class="mb-6px px-4px cursor-pointer"
-    @click="handleRouter"
-    @mouseenter="handleMouseEvent('enter')"
-    @mouseleave="handleMouseEvent('leave')"
-  >
+  <div class="mb-6px px-4px cursor-pointer" @mouseenter="setTrue" @mouseleave="setFalse">
     <div
       class="flex-center flex-col py-12px rounded-2px"
       :class="{ 'text-primary bg-primary bg-opacity-10': isActive, 'text-primary': isHover }"
@@ -23,10 +18,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import type { PropType, VNodeChild } from 'vue';
-import { useRouter } from 'vue-router';
-import { useAppStore } from '@/store';
 import { useBoolean } from '@/hooks';
-import { useVerticalMixSiderContext } from '@/context';
 
 const props = defineProps({
   routeName: {
@@ -51,40 +43,8 @@ const props = defineProps({
   }
 });
 
-const app = useAppStore();
-const router = useRouter();
-const { useVerticalMixSiderInject } = useVerticalMixSiderContext();
 const { bool: isHover, setTrue, setFalse } = useBoolean();
-const { bool: isMouseEnterMenu, setTrue: setMouseEnterMenu, setFalse: setMouseLeaveMenu } = useBoolean();
-
-const { setHoverRouteName, showChildMenu, hideChildMenu, isMouseEnterChildMenu } = useVerticalMixSiderInject();
 
 const isActive = computed(() => props.routeName === props.activeRouteName);
-
-function handleRouter() {
-  router.push({ name: props.routeName });
-}
-
-async function setActiveHoverRouteName() {
-  setTimeout(() => {
-    if (app.menu.fixedMix && !isMouseEnterChildMenu.value && !isMouseEnterMenu.value) {
-      setHoverRouteName(props.activeRouteName);
-    }
-    setMouseLeaveMenu();
-  }, 100);
-}
-
-function handleMouseEvent(type: 'enter' | 'leave') {
-  if (type === 'enter') {
-    setMouseEnterMenu();
-    setTrue();
-    setHoverRouteName(props.routeName);
-    showChildMenu();
-  } else {
-    setFalse();
-    hideChildMenu();
-    setActiveHoverRouteName();
-  }
-}
 </script>
 <style scoped></style>

src/layouts/BasicLayout/components/GlobalSider/components/VerticalMixSider/components/MixMenuDrawer.vue

@@ -13,13 +13,10 @@
       dark:bg-[#18181c]
     "
     :style="{ width: showDrawer ? theme.menuStyle.width + 'px' : '0px' }"
-    @mouseenter="handleMouseEvent('enter')"
-    @mouseleave="handleMouseEvent('leave')"
   >
     <header class="header-height flex-y-center justify-between">
       <h2 class="pl-8px text-16px text-primary font-bold">{{ title }}</h2>
-
-      <div class="px-8px text-16px cursor-pointer" @click="toggleFixedMixMenu">
+      <div class="px-8px text-16px text-gray-600 cursor-pointer" @click="toggleFixedMixMenu">
         <icon-mdi:pin-off v-if="app.menu.fixedMix" />
         <icon-mdi:pin v-else />
       </div>
@@ -39,11 +36,14 @@ import { NScrollbar, NMenu } from 'naive-ui';
 import type { MenuOption } from 'naive-ui';
 import { useThemeStore, useAppStore } from '@/store';
 import { useAppTitle } from '@/hooks';
-import { useVerticalMixSiderContext } from '@/context';
 import { menus } from '@/router';
 import type { GlobalMenuOption } from '@/interface';
 
 const props = defineProps({
+  visible: {
+    type: Boolean,
+    default: false
+  },
   activeRouteName: {
     type: String,
     required: true
@@ -55,23 +55,12 @@ const route = useRoute();
 const theme = useThemeStore();
 const app = useAppStore();
 const { toggleFixedMixMenu } = useAppStore();
-const { useVerticalMixSiderInject } = useVerticalMixSiderContext();
 const title = useAppTitle();
 
-const {
-  childMenuVisible,
-  hoverRouteName,
-  setHoverRouteName,
-  showChildMenu,
-  hideChildMenu,
-  setMouseEnterChildMenu,
-  setMouseLeaveChildMenu
-} = useVerticalMixSiderInject();
-
 const childMenus = computed(() => {
   const children: MenuOption[] = [];
   menus.some(item => {
-    const flag = item.routeName === hoverRouteName.value && Boolean(item.children?.length);
+    const flag = item.routeName === props.activeRouteName && Boolean(item.children?.length);
     if (flag) {
       children.push(...item.children!);
     }
@@ -80,7 +69,7 @@ const childMenus = computed(() => {
   return children;
 });
 
-const showDrawer = computed(() => (childMenuVisible.value && childMenus.value.length) || app.menu.fixedMix);
+const showDrawer = computed(() => (props.visible && childMenus.value.length) || app.menu.fixedMix);
 
 const activeKey = computed(() => route.name as string);
 
@@ -93,17 +82,6 @@ const headerHeight = computed(() => {
   const { height } = theme.headerStyle;
   return `${height}px`;
 });
-
-function handleMouseEvent(type: 'enter' | 'leave') {
-  if (type === 'enter') {
-    showChildMenu();
-    setMouseEnterChildMenu();
-  } else {
-    hideChildMenu();
-    setMouseLeaveChildMenu();
-    setHoverRouteName(props.activeRouteName);
-  }
-}
 </script>
 <style scoped>
 .drawer-shadow {

src/layouts/BasicLayout/components/GlobalSider/components/VerticalMixSider/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex h-full bg-white dark:bg-[#18181c]">
+  <div class="flex h-full bg-white dark:bg-[#18181c]" @mouseleave="handleMouseLeaveMenu">
     <div
       class="flex-col-stretch flex-1 h-full transition-width duration-300 ease-in-out"
       :class="[app.menu.collapsed ? 'mix-menu-collapsed-width' : 'mix-menu-width']"
@@ -15,6 +15,7 @@
             :icon="item.icon"
             :active-route-name="activeParentRouteName"
             :is-mini="app.menu.collapsed"
+            @click="handleMixMenu(item.routeName)"
           />
         </n-scrollbar>
       </div>
@@ -24,26 +25,26 @@
       class="relative h-full transition-width duration-300 ease-in-out"
       :style="{ width: app.menu.fixedMix ? theme.menuStyle.width + 'px' : '0px' }"
     >
-      <mix-menu-drawer :active-route-name="activeParentRouteName" />
+      <mix-menu-drawer :visible="drawerVisible" :active-route-name="activeParentRouteName" />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
+import { ref, computed } from 'vue';
 import type { VNodeChild } from 'vue';
 import { NScrollbar } from 'naive-ui';
 import { useRoute } from 'vue-router';
 import { useAppStore, useThemeStore } from '@/store';
-import { useVerticalMixSiderContext } from '@/context';
 import { menus } from '@/router';
 import { MixMenu, MixMenuCollapse, MixMenuDrawer } from './components';
 import { GlobalLogo } from '../../../common';
+import { useBoolean } from '@/hooks';
 
 const theme = useThemeStore();
 const app = useAppStore();
 const route = useRoute();
-const { useVerticalMixSiderProvide } = useVerticalMixSiderContext();
+const { bool: drawerVisible, setTrue: openDrawer, setFalse: hideDrawer } = useBoolean();
 
 const mixMenuWidth = computed(() => `${theme.menuStyle.mixWidth}px`);
 const mixMenuCollapsedWidth = computed(() => `${theme.menuStyle.mixCollapsedWidth}px`);
@@ -52,7 +53,6 @@ const firstDegreeMenus = menus.map(item => {
   const { routeName } = item;
   const label = item.label as string;
   const icon = item.icon! as () => VNodeChild;
-
   return {
     routeName,
     label,
@@ -60,16 +60,26 @@ const firstDegreeMenus = menus.map(item => {
   };
 });
 
-const activeParentRouteName = computed(() => {
+const activeParentRouteName = ref(getActiveRouteName());
+
+function getActiveRouteName() {
   let name = '';
   const { matched } = route;
   if (matched.length) {
     name = matched[0].name as string;
   }
   return name;
-});
+}
 
-useVerticalMixSiderProvide();
+function handleMixMenu(routeName: string) {
+  activeParentRouteName.value = routeName;
+  openDrawer();
+}
+
+function handleMouseLeaveMenu() {
+  activeParentRouteName.value = getActiveRouteName();
+  hideDrawer();
+}
 </script>
 <style scoped>
 .mix-menu-width {

src/layouts/MultiMenuLayout/index.vue

@@ -0,0 +1,6 @@
+<template>
+  <router-view />
+</template>
+
+<script setup lang="ts"></script>
+<style scoped></style>

src/layouts/index.ts

@@ -1,4 +1,5 @@
 import BasicLayout from './BasicLayout/index.vue';
 import BlankLayout from './BlankLayout/index.vue';
+import MultiMenuLayout from './MultiMenuLayout/index.vue';
 
-export { BasicLayout, BlankLayout };
+export { BasicLayout, BlankLayout, MultiMenuLayout };

src/router/components.ts

@@ -5,6 +5,7 @@ import NotFound from '@/views/system/exception/404.vue';
 import ServiceError from '@/views/system/exception/500.vue';
 import DashboardAnalysis from '@/views/dashboard/analysis/index.vue';
 import DashboardWorkbench from '@/views/dashboard/workbench/index.vue';
+import MultimenuFirstSecond from '@/views/multimenu/first/second/index.vue';
 
 const Exception403 = { ...NoPermission };
 const Exception404 = { ...NotFound };
@@ -18,6 +19,7 @@ setCacheName(NotFound, RouteNameMap.get('not-found'));
 setCacheName(ServiceError, RouteNameMap.get('service-error'));
 setCacheName(DashboardAnalysis, RouteNameMap.get('dashboard-analysis'));
 setCacheName(DashboardWorkbench, RouteNameMap.get('dashboard-workbench'));
+setCacheName(MultimenuFirstSecond, RouteNameMap.get('multimenu-first-second'));
 setCacheName(Exception404, RouteNameMap.get('exception-404'));
 setCacheName(Exception403, RouteNameMap.get('exception-403'));
 setCacheName(Exception500, RouteNameMap.get('exception-500'));
@@ -31,5 +33,6 @@ export {
   DashboardWorkbench,
   Exception403,
   Exception404,
-  Exception500
+  Exception500,
+  MultimenuFirstSecond
 };

src/router/routes.ts

@@ -1,7 +1,7 @@
 import type { RouteRecordRaw } from 'vue-router';
-import { Dashboard } from '@vicons/carbon';
+import { Dashboard, Menu } from '@vicons/carbon';
 import { ExceptionOutlined } from '@vicons/antd';
-import { BasicLayout, BlankLayout } from '@/layouts';
+import { BasicLayout, BlankLayout, MultiMenuLayout } from '@/layouts';
 import { EnumRoutePath, EnumRouteTitle } from '@/enum';
 import type { CustomRoute, LoginModuleType } from '@/interface';
 import { getLoginModuleRegExp } from '@/utils';
@@ -12,6 +12,7 @@ import {
   ServiceError,
   DashboardAnalysis,
   DashboardWorkbench,
+  MultimenuFirstSecond,
   Exception403,
   Exception404,
   Exception500
@@ -184,6 +185,40 @@ export const customRoutes: CustomRoute[] = [
         }
       }
     ]
+  },
+  {
+    name: RouteNameMap.get('multimenu'),
+    path: EnumRoutePath.multimenu,
+    component: MultiMenuLayout,
+    redirect: { name: RouteNameMap.get('multimenu-first') },
+    meta: {
+      title: EnumRouteTitle.multimenu,
+      icon: Menu
+    },
+    children: [
+      {
+        name: RouteNameMap.get('multimenu-first'),
+        path: EnumRoutePath['multimenu-first'],
+        component: BasicLayout,
+        meta: {
+          keepAlive: true,
+          requiresAuth: true,
+          title: EnumRouteTitle['multimenu-first']
+        },
+        children: [
+          {
+            name: RouteNameMap.get('multimenu-first-second'),
+            path: EnumRoutePath['multimenu-first-second'],
+            component: MultimenuFirstSecond,
+            meta: {
+              keepAlive: true,
+              requiresAuth: true,
+              title: EnumRouteTitle['multimenu-first-second']
+            }
+          }
+        ]
+      }
+    ]
   }
 ];
 

src/views/multimenu/first/second/index.vue

@@ -0,0 +1,6 @@
+<template>
+  <div>多级菜单-二级菜单</div>
+</template>
+
+<script setup lang="ts"></script>
+<style scoped></style>