Merge branch 'main' of https://github.com/vbenjs/vue-vben-admin into dev
This commit is contained in:
@@ -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"
|
||||
|
@@ -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 {
|
||||
|
@@ -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>
|
@@ -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"
|
||||
|
@@ -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"
|
||||
/>
|
||||
|
Reference in New Issue
Block a user