feat(project): add menu split config

2024-05-22 22:38:01 +08:00
parent d1cdea430e
commit a0423eb9ba
12 changed files with 101 additions and 53 deletions
--- a/packages/business/common-ui/src/preference/blocks/general/navigation.vue
+++ b/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>
--- 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';
--- 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[] = [
  <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>
--- a/packages/business/common-ui/src/preference/blocks/layout/navigation.vue
+++ b/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>
--- 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<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>
--- 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)"
--- 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<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