feat: sidebar button config (#5818)

* feat: 新增 PreferenceCheckboxItem 组件

* feat(preferences): 添加侧边栏按钮配置功能

* feat: 新增按钮点击事件触发功能

* feat(SidebarPreferences): 新增侧边栏折叠按钮与固定按钮配置

* feat(ui): 新增侧边栏固定按钮及配置选项

* fix(test): 修正侧边栏配置项缺失问题
This commit is contained in:
Jin Mao
2025-03-31 10:17:42 +08:00
committed by GitHub
parent a0feeb1966
commit 18722ce434
11 changed files with 138 additions and 6 deletions

View File

@@ -65,9 +65,14 @@ interface Props {
show?: boolean;
/**
* 显示折叠按钮
* @default false
* @default true
*/
showCollapseButton?: boolean;
/**
* 显示固定按钮
* @default true
*/
showFixedButton?: boolean;
/**
* 主题
*/
@@ -95,6 +100,7 @@ const props = withDefaults(defineProps<Props>(), {
paddingTop: 0,
show: true,
showCollapseButton: true,
showFixedButton: true,
zIndex: 0,
});
@@ -267,7 +273,7 @@ function handleMouseleave() {
@mouseleave="handleMouseleave"
>
<SidebarFixedButton
v-if="!collapse && !isSidebarMixed"
v-if="!collapse && !isSidebarMixed && showFixedButton"
v-model:expand-on-hover="expandOnHover"
/>
<div v-if="slots.logo" :style="headerStyle">

View File

@@ -106,6 +106,11 @@ interface VbenLayoutProps {
* @default false
*/
sidebarCollapse?: boolean;
/**
* 侧边菜单折叠按钮
* @default true
*/
sidebarCollapsedButton?: boolean;
/**
* 侧边菜单是否折叠时是否显示title
* @default true
@@ -121,6 +126,11 @@ interface VbenLayoutProps {
* @default 48
*/
sidebarExtraCollapsedWidth?: number;
/**
* 侧边菜单折叠按钮是否固定
* @default true
*/
sidebarFixedButton?: boolean;
/**
* 侧边栏是否隐藏
* @default false

View File

@@ -49,8 +49,10 @@ const props = withDefaults(defineProps<Props>(), {
headerVisible: true,
isMobile: false,
layout: 'sidebar-nav',
sidebarCollapsedButton: true,
sidebarCollapseShowTitle: false,
sidebarExtraCollapsedWidth: 60,
sidebarFixedButton: true,
sidebarHidden: false,
sidebarMixedWidth: 80,
sidebarTheme: 'dark',
@@ -487,6 +489,8 @@ const idMainContent = ELEMENT_ID_MAIN_CONTENT;
v-model:expand-on-hovering="sidebarExpandOnHovering"
v-model:extra-collapse="sidebarExtraCollapse"
v-model:extra-visible="sidebarExtraVisible"
:show-collapse-button="sidebarCollapsedButton"
:show-fixed-button="sidebarFixedButton"
:collapse-width="getSideCollapseWidth"
:dom-visible="!isMobile"
:extra-width="sidebarExtraWidth"