This commit is contained in:
dap
2025-03-31 15:20:14 +08:00
21 changed files with 298 additions and 45 deletions

View File

@@ -192,6 +192,8 @@ const headerSlots = computed(() => {
:sidebar-collapse="preferences.sidebar.collapsed"
:sidebar-collapse-show-title="preferences.sidebar.collapsedShowTitle"
:sidebar-enable="sidebarVisible"
:sidebar-collapsed-button="preferences.sidebar.collapsedButton"
:sidebar-fixed-button="preferences.sidebar.fixedButton"
:sidebar-expand-on-hover="preferences.sidebar.expandOnHover"
:sidebar-extra-collapse="preferences.sidebar.extraCollapse"
:sidebar-hidden="preferences.sidebar.hidden"

View File

@@ -1,7 +1,12 @@
import type { TabDefinition } from '@vben/types';
import type { IContextMenuItem } from '@vben-core/tabs-ui';
import type { RouteLocationNormalizedGeneric } from 'vue-router';
import type { TabDefinition } from '@vben/types';
import type { IContextMenuItem } from '@vben-core/tabs-ui';
import { computed, ref, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useContentMaximize, useTabs } from '@vben/hooks';
import {
ArrowLeftToLine,
@@ -19,8 +24,6 @@ import {
import { $t, useI18n } from '@vben/locales';
import { useAccessStore, useTabbarStore } from '@vben/stores';
import { filterTree } from '@vben/utils';
import { computed, ref, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
export function useTabbar() {
const router = useRouter();
@@ -206,7 +209,8 @@ export function useTabbar() {
text: $t('preferences.tabbar.contextMenu.closeAll'),
},
];
return menus;
return menus.filter((item) => tabbarStore.getMenuList.includes(item.key));
};
return {

View File

@@ -0,0 +1,63 @@
<script setup lang="ts">
import type { SelectOption } from '@vben/types';
import { useSlots } from 'vue';
import { CircleHelp } from '@vben/icons';
import { VbenCheckButtonGroup, VbenTooltip } from '@vben-core/shadcn-ui';
defineOptions({
name: 'PreferenceCheckboxItem',
});
withDefaults(
defineProps<{
disabled?: boolean;
items: SelectOption[];
multiple?: boolean;
onBtnClick?: (value: string) => void;
placeholder?: string;
}>(),
{
disabled: false,
placeholder: '',
items: () => [],
onBtnClick: () => {},
multiple: false,
},
);
const inputValue = defineModel<string[]>();
const slots = useSlots();
</script>
<template>
<div
:class="{
'hover:bg-accent': !slots.tip,
'pointer-events-none opacity-50': disabled,
}"
class="my-1 flex w-full items-center justify-between rounded-md px-2 py-1"
>
<span class="flex items-center text-sm">
<slot></slot>
<VbenTooltip v-if="slots.tip" side="bottom">
<template #trigger>
<CircleHelp class="ml-1 size-3 cursor-help" />
</template>
<slot name="tip"></slot>
</VbenTooltip>
</span>
<VbenCheckButtonGroup
v-model="inputValue"
class="h-8 w-[165px]"
:options="items"
:disabled="disabled"
:multiple="multiple"
@btn-click="onBtnClick"
/>
</div>
</template>

View File

@@ -1,8 +1,11 @@
<script setup lang="ts">
import type { LayoutType } from '@vben/types';
import { onMounted } from 'vue';
import { $t } from '@vben/locales';
import CheckboxItem from '../checkbox-item.vue';
import NumberFieldItem from '../number-field-item.vue';
import SwitchItem from '../switch-item.vue';
@@ -18,6 +21,27 @@ const sidebarAutoActivateChild = defineModel<boolean>(
);
const sidebarCollapsed = defineModel<boolean>('sidebarCollapsed');
const sidebarExpandOnHover = defineModel<boolean>('sidebarExpandOnHover');
const sidebarButtons = defineModel<string[]>('sidebarButtons', { default: [] });
const sidebarCollapsedButton = defineModel<boolean>('sidebarCollapsedButton');
const sidebarFixedButton = defineModel<boolean>('sidebarFixedButton');
onMounted(() => {
if (
sidebarCollapsedButton.value &&
!sidebarButtons.value.includes('collapsed')
) {
sidebarButtons.value.push('collapsed');
}
if (sidebarFixedButton.value && !sidebarButtons.value.includes('fixed')) {
sidebarButtons.value.push('fixed');
}
});
const handleCheckboxChange = () => {
sidebarCollapsedButton.value = !!sidebarButtons.value.includes('collapsed');
sidebarFixedButton.value = !!sidebarButtons.value.includes('fixed');
};
</script>
<template>
@@ -53,6 +77,17 @@ const sidebarExpandOnHover = defineModel<boolean>('sidebarExpandOnHover');
>
{{ $t('preferences.sidebar.autoActivateChild') }}
</SwitchItem>
<CheckboxItem
:items="[
{ label: '收缩按钮', value: 'collapsed' },
{ label: '固定按钮', value: 'fixed' },
]"
multiple
v-model="sidebarButtons"
:on-btn-click="handleCheckboxChange"
>
按钮配置
</CheckboxItem>
<NumberFieldItem
v-model="sidebarWidth"
:disabled="!sidebarEnable || disabled"

View File

@@ -93,8 +93,9 @@ const sidebarCollapsedShowTitle = defineModel<boolean>(
const sidebarAutoActivateChild = defineModel<boolean>(
'sidebarAutoActivateChild',
);
const SidebarExpandOnHover = defineModel<boolean>('sidebarExpandOnHover');
const sidebarExpandOnHover = defineModel<boolean>('sidebarExpandOnHover');
const sidebarCollapsedButton = defineModel<boolean>('sidebarCollapsedButton');
const sidebarFixedButton = defineModel<boolean>('sidebarFixedButton');
const headerEnable = defineModel<boolean>('headerEnable');
const headerMode = defineModel<LayoutHeaderModeType>('headerMode');
const headerMenuAlign =
@@ -317,8 +318,10 @@ async function handleReset() {
v-model:sidebar-collapsed="sidebarCollapsed"
v-model:sidebar-collapsed-show-title="sidebarCollapsedShowTitle"
v-model:sidebar-enable="sidebarEnable"
v-model:sidebar-expand-on-hover="SidebarExpandOnHover"
v-model:sidebar-expand-on-hover="sidebarExpandOnHover"
v-model:sidebar-width="sidebarWidth"
v-model:sidebar-collapsed-button="sidebarCollapsedButton"
v-model:sidebar-fixed-button="sidebarFixedButton"
:current-layout="appLayout"
:disabled="!isSideMode"
/>