feat(project): add menu split config

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>