From a0423eb9bade17b08e667067342688f0ea927cd1 Mon Sep 17 00:00:00 2001 From: vben Date: Wed, 22 May 2024 22:38:01 +0800 Subject: [PATCH] feat(project): add menu split config --- .../shared/typings/src/preference.ts | 4 +- .../preference/blocks/general/navigation.vue | 26 ------------- .../common-ui/src/preference/blocks/index.ts | 2 +- .../preference/blocks/layout/breadcrumb.vue | 17 +++++++-- .../preference/blocks/layout/navigation.vue | 38 +++++++++++++++++++ .../src/preference/blocks/layout/sidebar.vue | 7 +++- .../src/preference/preference-widget.vue | 2 + .../common-ui/src/preference/preference.vue | 31 ++++++++++----- .../layouts/src/basic/menu/use-mixed-menu.ts | 18 ++++----- packages/locales/src/langs/en-US.yaml | 3 ++ packages/locales/src/langs/zh-CN.yaml | 5 ++- packages/preference/src/config.ts | 1 + 12 files changed, 101 insertions(+), 53 deletions(-) delete mode 100644 packages/business/common-ui/src/preference/blocks/general/navigation.vue create mode 100644 packages/business/common-ui/src/preference/blocks/layout/navigation.vue diff --git a/packages/@vben-core/shared/typings/src/preference.ts b/packages/@vben-core/shared/typings/src/preference.ts index bc821cc2..a58b9eb0 100644 --- a/packages/@vben-core/shared/typings/src/preference.ts +++ b/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; /** 是否开启页面加载进度条 */ diff --git a/packages/business/common-ui/src/preference/blocks/general/navigation.vue b/packages/business/common-ui/src/preference/blocks/general/navigation.vue deleted file mode 100644 index 9d4550ce..00000000 --- a/packages/business/common-ui/src/preference/blocks/general/navigation.vue +++ /dev/null @@ -1,26 +0,0 @@ - - - diff --git a/packages/business/common-ui/src/preference/blocks/index.ts b/packages/business/common-ui/src/preference/blocks/index.ts index e3d97bbe..587c660b 100644 --- a/packages/business/common-ui/src/preference/blocks/index.ts +++ b/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'; diff --git a/packages/business/common-ui/src/preference/blocks/layout/breadcrumb.vue b/packages/business/common-ui/src/preference/blocks/layout/breadcrumb.vue index a8bcc359..ddf384e4 100644 --- a/packages/business/common-ui/src/preference/blocks/layout/breadcrumb.vue +++ b/packages/business/common-ui/src/preference/blocks/layout/breadcrumb.vue @@ -28,19 +28,28 @@ const typeItems: SelectListItem[] = [ {{ $t('preference.breadcrumb-enable') }} - + {{ $t('preference.breadcrumb-hide-only-one') }} - + {{ $t('preference.breadcrumb-home') }} - + {{ $t('preference.breadcrumb-icon') }} {{ $t('preference.breadcrumb-style') }} diff --git a/packages/business/common-ui/src/preference/blocks/layout/navigation.vue b/packages/business/common-ui/src/preference/blocks/layout/navigation.vue new file mode 100644 index 00000000..2c6b0185 --- /dev/null +++ b/packages/business/common-ui/src/preference/blocks/layout/navigation.vue @@ -0,0 +1,38 @@ + + + diff --git a/packages/business/common-ui/src/preference/blocks/layout/sidebar.vue b/packages/business/common-ui/src/preference/blocks/layout/sidebar.vue index a4a43617..c62387db 100644 --- a/packages/business/common-ui/src/preference/blocks/layout/sidebar.vue +++ b/packages/business/common-ui/src/preference/blocks/layout/sidebar.vue @@ -18,10 +18,13 @@ const sideCollapse = defineModel('sideCollapse'); {{ $t('preference.side-visible') }} - + {{ $t('preference.collapse') }} - + {{ $t('preference.collapse-show-title') }} diff --git a/packages/business/common-ui/src/preference/preference-widget.vue b/packages/business/common-ui/src/preference/preference-widget.vue index ef944acb..ace6ebd6 100644 --- a/packages/business/common-ui/src/preference/preference-widget.vue +++ b/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)" diff --git a/packages/business/common-ui/src/preference/preference.vue b/packages/business/common-ui/src/preference/preference.vue index 9a4e348e..26f7fa7f 100644 --- a/packages/business/common-ui/src/preference/preference.vue +++ b/packages/business/common-ui/src/preference/preference.vue @@ -53,6 +53,7 @@ const colorWeakMode = defineModel('colorWeakMode'); const colorGrayMode = defineModel('colorGrayMode'); const colorPrimary = defineModel('colorPrimary'); const navigationStyle = defineModel('navigationStyle'); +const navigationSplit = defineModel('navigationSplit'); const pageProgress = defineModel('pageProgress'); const pageTransition = defineModel('pageTransition'); const pageTransitionEnable = defineModel('pageTransitionEnable'); @@ -67,8 +68,15 @@ const headerMode = defineModel('headerMode'); const footerVisible = defineModel('footerVisible'); const footerFixed = defineModel('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() { /> + + + + @@ -216,12 +235,6 @@ function handleReset() { v-model:dynamic-title="dynamicTitle" /> - - - 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; } diff --git a/packages/locales/src/langs/en-US.yaml b/packages/locales/src/langs/en-US.yaml index 925200b6..1b221be9 100644 --- a/packages/locales/src/langs/en-US.yaml +++ b/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 diff --git a/packages/locales/src/langs/zh-CN.yaml b/packages/locales/src/langs/zh-CN.yaml index 405230fc..19a8a4bb 100644 --- a/packages/locales/src/langs/zh-CN.yaml +++ b/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: 显示面包屑图标 diff --git a/packages/preference/src/config.ts b/packages/preference/src/config.ts index 37c08376..013f3558 100644 --- a/packages/preference/src/config.ts +++ b/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',