18722ce434
* feat: 新增 PreferenceCheckboxItem 组件 * feat(preferences): 添加侧边栏按钮配置功能 * feat: 新增按钮点击事件触发功能 * feat(SidebarPreferences): 新增侧边栏折叠按钮与固定按钮配置 * feat(ui): 新增侧边栏固定按钮及配置选项 * fix(test): 修正侧边栏配置项缺失问题
101 lines
3.0 KiB
Vue
101 lines
3.0 KiB
Vue
<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';
|
|
|
|
defineProps<{ currentLayout?: LayoutType; disabled: boolean }>();
|
|
|
|
const sidebarEnable = defineModel<boolean>('sidebarEnable');
|
|
const sidebarWidth = defineModel<number>('sidebarWidth');
|
|
const sidebarCollapsedShowTitle = defineModel<boolean>(
|
|
'sidebarCollapsedShowTitle',
|
|
);
|
|
const sidebarAutoActivateChild = defineModel<boolean>(
|
|
'sidebarAutoActivateChild',
|
|
);
|
|
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>
|
|
<SwitchItem v-model="sidebarEnable" :disabled="disabled">
|
|
{{ $t('preferences.sidebar.visible') }}
|
|
</SwitchItem>
|
|
<SwitchItem v-model="sidebarCollapsed" :disabled="!sidebarEnable || disabled">
|
|
{{ $t('preferences.sidebar.collapsed') }}
|
|
</SwitchItem>
|
|
<SwitchItem
|
|
v-model="sidebarExpandOnHover"
|
|
:disabled="!sidebarEnable || disabled || !sidebarCollapsed"
|
|
:tip="$t('preferences.sidebar.expandOnHoverTip')"
|
|
>
|
|
{{ $t('preferences.sidebar.expandOnHover') }}
|
|
</SwitchItem>
|
|
<SwitchItem
|
|
v-model="sidebarCollapsedShowTitle"
|
|
:disabled="!sidebarEnable || disabled || !sidebarCollapsed"
|
|
>
|
|
{{ $t('preferences.sidebar.collapsedShowTitle') }}
|
|
</SwitchItem>
|
|
<SwitchItem
|
|
v-model="sidebarAutoActivateChild"
|
|
:disabled="
|
|
!sidebarEnable ||
|
|
!['sidebar-mixed-nav', 'mixed-nav', 'header-mixed-nav'].includes(
|
|
currentLayout as string,
|
|
) ||
|
|
disabled
|
|
"
|
|
:tip="$t('preferences.sidebar.autoActivateChildTip')"
|
|
>
|
|
{{ $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"
|
|
:max="320"
|
|
:min="160"
|
|
:step="10"
|
|
>
|
|
{{ $t('preferences.sidebar.width') }}
|
|
</NumberFieldItem>
|
|
</template>
|