feat: 左侧混合菜单模式

apps/admin/src/init-application.ts

@@ -10,7 +10,13 @@ import { localeList } from '@vben/locale/src/config'
 import { useRootSetting } from '@/hooks/setting/useRootSetting'
 import { useTransitionSetting } from '@/hooks/setting/useTransitionSetting'
 import { useHeaderSetting } from '@/hooks/setting/useHeaderSetting'
-import { getAllParentPath, getMenus } from '@/router'
+import {
+  getAllParentPath,
+  getChildrenMenus,
+  getCurrentParentPath,
+  getMenus,
+  getShallowMenus
+} from '@/router'
 import { useDesign } from '@/hooks/web/useDesign'
 import { useAppInject } from '@/hooks/web/use-app-inject'
 import { useTabs } from '@/hooks/useTabs'
@@ -81,6 +87,9 @@ async function initPackages() {
       return {
         useRootSetting,
         getMenus,
+        getCurrentParentPath,
+        getShallowMenus,
+        getChildrenMenus,
         getAllParentPath,
         useHeaderSetting,
         useDesign,

apps/admin/src/layout/components/logo.vue

@@ -48,6 +48,7 @@ function goHome() {
   transition: all 0.2s ease;
   height: 48px;
   background: transparent;
+  box-sizing: border-box;
 
   &__title {
     font-size: 16px;

packages/layouts/bridge.ts

@@ -21,6 +21,9 @@ export interface ContextOptions {
   usePromise: (fn: Function, config?: unknown) => unknown
   useDesign: (scope: string) => unknown
   getMenus: () => Promise<any>
+  getCurrentParentPath: (currentPath: string) => Promise<any>
+  getShallowMenus: () => Promise<any>
+  getChildrenMenus: (parentPath: string) => Promise<any>
   getAllParentPath: (menu, path) => string[]
   Logo: VNode | null
 }
@@ -43,6 +46,9 @@ export let context: ContextOptions = {
   useTabs: () => undefined,
   useDesign: (scope: string) => undefined,
   getMenus: async () => ({}),
+  getCurrentParentPath: async (currentPath: string) => ({}),
+  getShallowMenus: async () => ({}),
+  getChildrenMenus: async (parentPath: string) => ({}),
   getAllParentPath: (menu, path) => [],
   Logo: null,
 }

packages/layouts/src/components/header.vue

@@ -30,7 +30,7 @@ const {
   getShowNotice,
 } = useHeaderSetting()
 const { getSettingButtonPosition, getShowSettingButton } = useRootSetting()
-const { getMenuType } = useMenuSetting()
+const { getMenuType, getMenuWidth } = useMenuSetting()
 const shadowColor = computed(() =>
   isDark.value ? 'rgb(255, 255, 255, 0.09)' : 'rgb(239, 239, 245)',
 )
@@ -64,6 +64,7 @@ const getShowSetting = computed(() => {
             getMenuType === MenuTypeEnum.TOP_MENU ||
             getMenuType === MenuTypeEnum.MIX
           "
+          :style="{width: getMenuWidth + 'px', maxWidth: getMenuWidth + 'px'}"
         />
         <slot name="breadcrumb">
           <LayoutBreadcrumb

packages/layouts/src/components/menu/mix-menu.vue

@@ -0,0 +1,111 @@
+<script lang="ts" setup>
+import {ref, h, unref, nextTick, computed} from 'vue'
+import { createNamespace, mapTree } from '@vben/utils'
+import { VbenIconify } from '@vben/vbencomponents'
+import { context } from '../../../bridge'
+const { listenerRouteChange } = context
+
+import {
+  RouteLocationNormalizedLoaded,
+  RouterLink,
+  useRouter,
+} from 'vue-router'
+import { useI18n } from '@vben/locale'
+import { REDIRECT_NAME } from '@vben/constants'
+const props = defineProps({
+  list: {
+    type: Array,
+    default: ()=>[],
+  },
+})
+const { bem } = createNamespace('layout-menu')
+// const collapsed = ref(false)
+const { t } = useI18n()
+const { currentRoute } = useRouter()
+const menuRef = ref(null)
+const activeKey = ref()
+// 定位菜单选择 与 当前路由匹配
+const showOption = () => {
+  nextTick(() => {
+    if (!menuRef.value) return
+    menuRef.value.Ref.showOption()
+  })
+}
+
+const menuList = computed(()=>{
+  return mapTree(props.list, { conversion: (menu) => routerToMenu(menu) })
+})
+
+listenerRouteChange((route) => {
+  if (route.name === REDIRECT_NAME) return
+
+  const currentActiveMenu = route.meta?.currentActiveMenu as string
+  handleMenuChange(route)
+
+  if (currentActiveMenu) {
+    activeKey.value = currentActiveMenu
+  }
+  showOption()
+})
+
+async function handleMenuChange(route?: RouteLocationNormalizedLoaded) {
+  const menu = route || unref(currentRoute)
+  activeKey.value = menu.name
+}
+
+// 路由格式化
+const routerToMenu = (item: RouteRecordItem) => {
+  const { name, children, meta, icon } = item
+  const title = t(meta.title as string)
+  return {
+    label: () => {
+      if (children) {
+        return title
+      }
+      return h(
+        RouterLink,
+        {
+          to: {
+            name,
+          },
+        },
+        { default: () => title },
+      )
+    },
+    key: name,
+    icon: renderIcon(icon),
+  }
+}
+function renderIcon(icon: string) {
+  return () => h(VbenIconify, { icon })
+}
+</script>
+
+<template>
+  <div :class="bem()">
+    <VbenScrollbar :class="bem('scrollbar')">
+      <VbenMenu
+        v-model:value="activeKey"
+        :options="menuList"
+        :collapsed-width="48"
+        :collapsed="false"
+        :collapsed-icon-size="22"
+        :indent="18"
+        :root-indent="18"
+        ref="menuRef"
+      />
+    </VbenScrollbar>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.layout-menu {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  &__scrollbar {
+    flex: 1;
+    flex-basis: auto;
+  }
+}
+</style>