feat(project): add menu split config

packages/@vben-core/shared/typings/src/preference.ts

@@ -7,7 +7,7 @@ type LayoutType =
 
 type BreadcrumbStyle = 'background' | 'normal';
 
-type NavigationStyle = 'normal' | 'rounded';
+type NavigationStyle = 'plain' | 'rounded';
 
 type ThemeType = 'auto' | 'dark' | 'light';
 
@@ -77,6 +77,8 @@ interface Preference {
   logo: string;
   /** logo是否可见 */
   logoVisible: boolean;
+  /** 导航菜单是否切割，只在 layout=mixed-nav 生效 */
+  navigationSplit: boolean;
   /** 导航菜单风格 */
   navigationStyle: NavigationStyle;
   /** 是否开启页面加载进度条 */

packages/business/common-ui/src/preference/blocks/general/navigation.vue

@@ -1,26 +0,0 @@
-<script setup lang="ts">
-import type { SelectListItem } from '@vben/types';
-
-import { $t } from '@vben/locales';
-
-import ToggleItem from '../toggle-item.vue';
-
-defineOptions({
-  name: 'PreferenceNavigationConfig',
-});
-
-defineProps<{ disabled: boolean }>();
-
-const navigationStyle = defineModel<string>('navigationStyle');
-
-const stylesItems: SelectListItem[] = [
-  { label: $t('preference.normal'), value: 'normal' },
-  { label: $t('preference.rounded'), value: 'rounded' },
-];
-</script>
-
-<template>
-  <ToggleItem v-model="navigationStyle" :items="stylesItems" disabled>
-    {{ $t('preference.navigation-style') }}
-  </ToggleItem>
-</template>

packages/business/common-ui/src/preference/blocks/index.ts

@@ -1,12 +1,12 @@
 export { default as Block } from './block.vue';
 export { default as Animation } from './general/animation.vue';
 export { default as General } from './general/general.vue';
-export { default as Navigation } from './general/navigation.vue';
 export { default as Breadcrumb } from './layout/breadcrumb.vue';
 export { default as Content } from './layout/content.vue';
 export { default as Footer } from './layout/footer.vue';
 export { default as Header } from './layout/header.vue';
 export { default as Layout } from './layout/layout.vue';
+export { default as Navigation } from './layout/navigation.vue';
 export { default as Sidebar } from './layout/sidebar.vue';
 export { default as Tabs } from './layout/tabs.vue';
 export { default as SwitchItem } from './switch-item.vue';

packages/business/common-ui/src/preference/blocks/layout/breadcrumb.vue

@@ -28,19 +28,28 @@ const typeItems: SelectListItem[] = [
   <SwitchItem v-model="breadcrumbVisible" :disabled="disabled">
     {{ $t('preference.breadcrumb-enable') }}
   </SwitchItem>
-  <SwitchItem v-model="breadcrumbHideOnlyOne" :disabled="!breadcrumbVisible">
+  <SwitchItem
+    v-model="breadcrumbHideOnlyOne"
+    :disabled="!breadcrumbVisible || disabled"
+  >
     {{ $t('preference.breadcrumb-hide-only-one') }}
   </SwitchItem>
-  <SwitchItem v-model="breadcrumbHome" :disabled="!breadcrumbVisible">
+  <SwitchItem
+    v-model="breadcrumbHome"
+    :disabled="!breadcrumbVisible || disabled"
+  >
     {{ $t('preference.breadcrumb-home') }}
   </SwitchItem>
-  <SwitchItem v-model="breadcrumbIcon" :disabled="!breadcrumbVisible">
+  <SwitchItem
+    v-model="breadcrumbIcon"
+    :disabled="!breadcrumbVisible || disabled"
+  >
     {{ $t('preference.breadcrumb-icon') }}
   </SwitchItem>
   <ToggleItem
     v-model="breadcrumbStyle"
     :items="typeItems"
-    :disabled="!breadcrumbVisible"
+    :disabled="!breadcrumbVisible || disabled"
   >
     {{ $t('preference.breadcrumb-style') }}
   </ToggleItem>

packages/business/common-ui/src/preference/blocks/layout/navigation.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import type { SelectListItem } from '@vben/types';
+
+import { $t } from '@vben/locales';
+
+import SwitchItem from '../switch-item.vue';
+import ToggleItem from '../toggle-item.vue';
+
+defineOptions({
+  name: 'PreferenceNavigationConfig',
+});
+
+defineProps<{ disabled?: boolean; disabledNavigationSplit?: boolean }>();
+
+const navigationStyle = defineModel<string>('navigationStyle');
+const navigationSplit = defineModel<boolean>('navigationSplit');
+
+const stylesItems: SelectListItem[] = [
+  { label: $t('preference.rounded'), value: 'rounded' },
+  { label: $t('preference.plain'), value: 'plain' },
+];
+</script>
+
+<template>
+  <ToggleItem
+    v-model="navigationStyle"
+    :items="stylesItems"
+    :disabled="disabled"
+  >
+    {{ $t('preference.navigation-style') }}
+  </ToggleItem>
+  <SwitchItem v-model="navigationSplit" :disabled="disabledNavigationSplit">
+    {{ $t('preference.navigation-split') }}
+    <template #tip>
+      {{ $t('preference.navigation-split-tip') }}
+    </template>
+  </SwitchItem>
+</template>

packages/business/common-ui/src/preference/blocks/layout/sidebar.vue

@@ -18,10 +18,13 @@ const sideCollapse = defineModel<boolean>('sideCollapse');
   <SwitchItem v-model="sideVisible" :disabled="disabled">
     {{ $t('preference.side-visible') }}
   </SwitchItem>
-  <SwitchItem v-model="sideCollapse" :disabled="!sideVisible">
+  <SwitchItem v-model="sideCollapse" :disabled="!sideVisible || disabled">
     {{ $t('preference.collapse') }}
   </SwitchItem>
-  <SwitchItem v-model="sideCollapseShowTitle" :disabled="!sideVisible">
+  <SwitchItem
+    v-model="sideCollapseShowTitle"
+    :disabled="!sideVisible || disabled"
+  >
     {{ $t('preference.collapse-show-title') }}
   </SwitchItem>
 </template>

packages/business/common-ui/src/preference/preference-widget.vue

@@ -53,9 +53,11 @@ function updateLocale(value: string) {
     :tabs-icon="preference.tabsIcon"
     :locale="preference.locale"
     :navigation-style="preference.navigationStyle"
+    :navigation-split="preference.navigationSplit"
     :side-collapse-show-title="preference.sideCollapseShowTitle"
     :page-transition-enable="preference.pageTransitionEnable"
     @update:navigation-style="(value) => handleUpdate('navigationStyle', value)"
+    @update:navigation-split="(value) => handleUpdate('navigationSplit', value)"
     @update:dynamic-title="(value) => handleUpdate('dynamicTitle', value)"
     @update:tabs-icon="(value) => handleUpdate('tabsIcon', value)"
     @update:side-collapse="(value) => handleUpdate('sideCollapse', value)"

packages/business/common-ui/src/preference/preference.vue

@@ -53,6 +53,7 @@ const colorWeakMode = defineModel<boolean>('colorWeakMode');
 const colorGrayMode = defineModel<boolean>('colorGrayMode');
 const colorPrimary = defineModel<string>('colorPrimary');
 const navigationStyle = defineModel<string>('navigationStyle');
+const navigationSplit = defineModel<boolean>('navigationSplit');
 const pageProgress = defineModel<boolean>('pageProgress');
 const pageTransition = defineModel<string>('pageTransition');
 const pageTransitionEnable = defineModel<boolean>('pageTransitionEnable');
@@ -67,8 +68,15 @@ const headerMode = defineModel<LayoutHeaderMode>('headerMode');
 const footerVisible = defineModel<boolean>('footerVisible');
 const footerFixed = defineModel<boolean>('footerFixed');
 
-const { diffPreference, isFullContent, isHeaderNav, isMixedNav, isSideMode } =
-  usePreference();
+const {
+  diffPreference,
+  isFullContent,
+  isHeaderNav,
+  isMixedNav,
+  isSideMixedNav,
+  isSideMode,
+  isSideNav,
+} = usePreference();
 const { copy } = useClipboard();
 
 const tabs = computed((): SegmentedItem[] => {
@@ -185,6 +193,15 @@ function handleReset() {
               />
             </Block>
 
+            <Block :title="$t('preference.navigation-menu')">
+              <Navigation
+                v-model:navigation-style="navigationStyle"
+                v-model:navigation-split="navigationSplit"
+                :disabled="isFullContent"
+                :disabled-navigation-split="!isMixedNav"
+              />
+            </Block>
+
             <Block :title="$t('preference.breadcrumb')">
               <Breadcrumb
                 v-model:breadcrumb-visible="breadcrumbVisible"
@@ -192,7 +209,9 @@ function handleReset() {
                 v-model:breadcrumb-style="breadcrumbStyle"
                 v-model:breadcrumb-home="breadcrumbHome"
                 v-model:breadcrumb-hide-only-one="breadcrumbHideOnlyOne"
-                :disabled="!showBreadcrumbConfig"
+                :disabled="
+                  !showBreadcrumbConfig || !(isSideNav || isSideMixedNav)
+                "
               />
             </Block>
 
@@ -216,12 +235,6 @@ function handleReset() {
                 v-model:dynamic-title="dynamicTitle"
               />
             </Block>
-            <Block :title="$t('preference.navigation-menu')">
-              <Navigation
-                v-model:navigation-style="navigationStyle"
-                :disabled="isFullContent"
-              />
-            </Block>
 
             <Block :title="$t('preference.animation')">
               <Animation

packages/business/layouts/src/basic/menu/use-mixed-menu.ts

@@ -17,8 +17,12 @@ function useMixedMenu() {
 
   const { isMixedNav } = usePreference();
 
+  const needSplit = computed(
+    () => preference.navigationSplit && isMixedNav.value,
+  );
+
   const sideVisible = computed(() => {
-    if (isMixedNav.value) {
+    if (needSplit.value) {
       return preference.sideVisible && splitSideMenus.value.length > 0;
     }
     return preference.sideVisible;
@@ -29,7 +33,7 @@ function useMixedMenu() {
    * 头部菜单
    */
   const headerMenus = computed(() => {
-    if (!isMixedNav.value) {
+    if (!needSplit.value) {
       return menus.value;
     }
     return menus.value.map((item) => {
@@ -44,11 +48,7 @@ function useMixedMenu() {
    * 侧边菜单
    */
   const sideMenus = computed(() => {
-    if (!isMixedNav.value) {
-      return menus.value;
-    }
-
-    return splitSideMenus.value;
+    return needSplit.value ? splitSideMenus.value : menus.value;
   });
 
   /**
@@ -62,7 +62,7 @@ function useMixedMenu() {
    * 头部菜单激活路径
    */
   const headerActive = computed(() => {
-    if (!isMixedNav.value) {
+    if (!needSplit.value) {
       return route.path;
     }
     return rootMenuPath.value;
@@ -74,7 +74,7 @@ function useMixedMenu() {
    * @param mode 菜单模式
    */
   const handleMenuSelect = (key: string, mode?: string) => {
-    if (!isMixedNav.value || mode === 'vertical') {
+    if (!needSplit.value || mode === 'vertical') {
       navigation(key);
       return;
     }

packages/locales/src/langs/en-US.yaml

@@ -71,11 +71,14 @@ preference:
   language: Language
   dynamic-title: Dynamic Title
   normal: Normal
+  plain: Plain
   rounded: Rounded
   collapse: Collpase Menu
   collapse-show-title: Display menu name
   navigation-menu: Navigation Menu
   navigation-style: Navigation menu style
+  navigation-split: Navigation Menu Separation
+  navigation-split-tip: When enabled, the sidebar shows the top bar's submenu
   interface-control: Interface Layout Control
   breadcrumb: Breadcrumb
   breadcrumb-home: Display the home button

packages/locales/src/langs/zh-CN.yaml

@@ -73,9 +73,12 @@ preference:
   animation: 动画
   navigation-menu: 导航菜单
   navigation-style: 导航菜单风格
+  navigation-split: 导航菜单分离
+  navigation-split-tip: 开启时，侧边栏显示顶栏对应菜单的子菜单
   interface-control: 界面布局控制
   normal: 默认
-  rounded: 圆角
+  plain: 朴素
+  rounded: 圆润
   breadcrumb: 面包屑导航
   breadcrumb-enable: 开启面包屑导航
   breadcrumb-icon: 显示面包屑图标

packages/preference/src/config.ts

@@ -27,6 +27,7 @@ const defaultPreference: Preference = {
   locale: 'zh-CN',
   logo: 'https://cdn.jsdelivr.net/gh/vbenjs/vben-cdn-static@0.1.2/vben-admin/admin-logo.png',
   logoVisible: true,
+  navigationSplit: true,
   navigationStyle: 'rounded',
   pageProgress: true,
   pageTransition: 'fade-slide',