feat: The accordion mode of the menu is configurable

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>

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)"

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"
               />

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]"
         />

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"

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"

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"