feat: The accordion mode of the menu is configurable

2024-05-22 22:56:26 +08:00 · 2024-05-22 22:56:26 +08:00 · c28adc9a94
parent a0423eb9ba
commit c28adc9a94
12 changed files with 30 additions and 3 deletions
--- a/packages/@vben-core/shared/typings/src/preference.ts
+++ b/packages/@vben-core/shared/typings/src/preference.ts
@ -77,6 +77,8 @@ interface Preference {
  logo: string;
  /** logo是否可见 */
  logoVisible: boolean;
+  /** 导航菜单手风琴模式 */
+  navigationAccordion: boolean;
  /** 导航菜单是否切割，只在 layout=mixed-nav 生效 */
  navigationSplit: boolean;
  /** 导航菜单风格 */
--- a/packages/business/common-ui/src/preference/blocks/layout/navigation.vue
+++ b/packages/business/common-ui/src/preference/blocks/layout/navigation.vue
@ -14,6 +14,7 @@ defineProps<{ disabled?: boolean; disabledNavigationSplit?: boolean }>();

 const navigationStyle = defineModel<string>('navigationStyle');
 const navigationSplit = defineModel<boolean>('navigationSplit');
+const navigationAccordion = defineModel<boolean>('navigationAccordion');

 const stylesItems: SelectListItem[] = [
  { label: $t('preference.rounded'), value: 'rounded' },
@ -29,10 +30,16 @@ const stylesItems: SelectListItem[] = [
  >
    {{ $t('preference.navigation-style') }}
  </ToggleItem>
-  <SwitchItem v-model="navigationSplit" :disabled="disabledNavigationSplit">
+  <SwitchItem
+    v-model="navigationSplit"
+    :disabled="disabledNavigationSplit || disabled"
+  >
    {{ $t('preference.navigation-split') }}
    <template #tip>
      {{ $t('preference.navigation-split-tip') }}
    </template>
  </SwitchItem>
+  <SwitchItem v-model="navigationAccordion" :disabled="disabled">
+    {{ $t('preference.navigation-accordion') }}
+  </SwitchItem>
 </template>
--- a/packages/business/common-ui/src/preference/preference-widget.vue
+++ b/packages/business/common-ui/src/preference/preference-widget.vue
@ -52,11 +52,15 @@ function updateLocale(value: string) {
    :page-progress="preference.pageProgress"
    :tabs-icon="preference.tabsIcon"
    :locale="preference.locale"
+    :navigation-accordion="preference.navigationAccordion"
    :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-accordion="
+      (value) => handleUpdate('navigationAccordion', value)
+    "
    @update:navigation-split="(value) => handleUpdate('navigationSplit', value)"
    @update:dynamic-title="(value) => handleUpdate('dynamicTitle', value)"
    @update:tabs-icon="(value) => handleUpdate('tabsIcon', value)"
--- a/packages/business/common-ui/src/preference/preference.vue
+++ b/packages/business/common-ui/src/preference/preference.vue
@ -54,6 +54,7 @@ const colorGrayMode = defineModel<boolean>('colorGrayMode');
 const colorPrimary = defineModel<string>('colorPrimary');
 const navigationStyle = defineModel<string>('navigationStyle');
 const navigationSplit = defineModel<boolean>('navigationSplit');
+const navigationAccordion = defineModel<boolean>('navigationAccordion');
 const pageProgress = defineModel<boolean>('pageProgress');
 const pageTransition = defineModel<string>('pageTransition');
 const pageTransitionEnable = defineModel<boolean>('pageTransitionEnable');
@ -197,6 +198,7 @@ function handleReset() {
              <Navigation
                v-model:navigation-style="navigationStyle"
                v-model:navigation-split="navigationSplit"
+                v-model:navigation-accordion="navigationAccordion"
                :disabled="isFullContent"
                :disabled-navigation-split="!isMixedNav"
              />
--- a/packages/business/layouts/src/basic/content/content.vue
+++ b/packages/business/layouts/src/basic/content/content.vue
@ -50,6 +50,7 @@ function getTransitionName(route: RouteLocationNormalizedLoaded) {
        <component
          :is="Component"
          v-if="renderRouteView"
+          v-show="!route.meta.iframeSrc"
          :key="route.fullPath"
          class="h-[1000px]"
        />
--- a/packages/business/layouts/src/basic/layout.vue
+++ b/packages/business/layouts/src/basic/layout.vue
@ -183,6 +183,7 @@ function wrapperMenus(menus: MenuRecordRaw[]) {
    <template #menu>
      <LayoutMenu
        mode="vertical"
+        :accordion="preference.navigationAccordion"
        :rounded="isMenuRounded"
        :collapse-show-title="preference.sideCollapseShowTitle"
        :collapse="preference.sideCollapse"
@ -206,6 +207,7 @@ function wrapperMenus(menus: MenuRecordRaw[]) {
    <!-- 侧边额外区域 -->
    <template #side-extra>
      <LayoutExtraMenu
+        :accordion="preference.navigationAccordion"
        :rounded="isMenuRounded"
        :menus="wrapperMenus(extraMenus)"
        :collapse="preference.sideExtraCollapse"
--- a/packages/business/layouts/src/basic/menu/extra-menu.vue
+++ b/packages/business/layouts/src/basic/menu/extra-menu.vue
@ -12,7 +12,10 @@ interface Props extends MenuProps {
  menus: MenuRecordRaw[];
 }

-defineProps<Props>();
+withDefaults(defineProps<Props>(), {
+  accordion: true,
+  menus: () => [],
+});

 const route = useRoute();
 const { navigation } = useNavigation();
@ -25,6 +28,7 @@ async function handleSelect(key: string) {
 <template>
  <Menu
    :rounded="rounded"
+    :accordion="accordion"
    :collapse="collapse"
    :default-active="route.path"
    :menus="menus"
--- a/packages/business/layouts/src/basic/menu/menu.vue
+++ b/packages/business/layouts/src/basic/menu/menu.vue
@ -8,6 +8,7 @@ interface Props extends MenuProps {
 }

 const props = withDefaults(defineProps<Props>(), {
+  accordion: true,
  menus: () => [],
 });

@ -25,6 +26,7 @@ function handleMenuSelect(key: string) {
    :rounded="rounded"
    :collapse-show-title="collapseShowTitle"
    :collapse="collapse"
+    :accordion="accordion"
    :default-active="defaultActive"
    :menus="menus"
    :theme="theme"
--- a/packages/locales/src/langs/en-US.yaml
+++ b/packages/locales/src/langs/en-US.yaml
@ -78,6 +78,7 @@ preference:
  navigation-menu: Navigation Menu
  navigation-style: Navigation menu style
  navigation-split: Navigation Menu Separation
+  navigation-accordion: Sidebar Navigation Menu Accordion mode
  navigation-split-tip: When enabled, the sidebar shows the top bar's submenu
  interface-control: Interface Layout Control
  breadcrumb: Breadcrumb
--- a/packages/locales/src/langs/zh-CN.yaml
+++ b/packages/locales/src/langs/zh-CN.yaml
@ -73,6 +73,7 @@ preference:
  animation: 动画
  navigation-menu: 导航菜单
  navigation-style: 导航菜单风格
+  navigation-accordion: 侧边导航菜单手风琴模式
  navigation-split: 导航菜单分离
  navigation-split-tip: 开启时，侧边栏显示顶栏对应菜单的子菜单
  interface-control: 界面布局控制
--- 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,
+  navigationAccordion: true,
  navigationSplit: true,
  navigationStyle: 'rounded',
  pageProgress: true,
--- a/packages/stores/src/modules/tabs.ts
+++ b/packages/stores/src/modules/tabs.ts
@ -269,7 +269,7 @@ const useTabsStore = defineStore('tabs', {
      await this.closeTab(this.tabs[index], router);
    },
    getTabPath(tab: RouteRecordNormalized | TabItem) {
-      return (tab as TabItem).fullPath || tab.path;
+      return decodeURIComponent((tab as TabItem).fullPath || tab.path);
    },
    /**
     * @zh_CN 固定标签页