yudao
/
admin-vben
mirror of https://gitee.com/yudaocode/yudao-ui-admin-vben.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat(project): add menu split config

pull/48/MERGE
vben 2024-05-22 22:38:01 +08:00
parent d1cdea430e
commit a0423eb9ba
12 changed files with 101 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/@vben-core/shared/typings/src/preference.ts
View File

@ -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;
/** 是否开启页面加载进度条 */

26
packages/business/common-ui/src/preference/blocks/general/navigation.vue
View File

@ -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>

2
packages/business/common-ui/src/preference/blocks/index.ts
View File

@ -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';

17
packages/business/common-ui/src/preference/blocks/layout/breadcrumb.vue
View File

@ -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>

38
packages/business/common-ui/src/preference/blocks/layout/navigation.vue Normal file
View File

@ -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>

7
packages/business/common-ui/src/preference/blocks/layout/sidebar.vue
View File

@ -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>

2
packages/business/common-ui/src/preference/preference-widget.vue
View File

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

31
packages/business/common-ui/src/preference/preference.vue
View File

@ -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

18
packages/business/layouts/src/basic/menu/use-mixed-menu.ts
View File

@ -17,8 +17,12 @@ function useMixedMenu() {
const { isMixedNav } = usePreference();
const needSplit = computed(
() => 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;
}

3
packages/locales/src/langs/en-US.yaml
View File

@ -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

5
packages/locales/src/langs/zh-CN.yaml
View File

@ -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: 显示面包屑图标

1
packages/preference/src/config.ts
View File

@ -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',