内容侧边栏显示在右边时,修复收起展开图标不显示的问题

This commit is contained in:
jingrow 2025-10-19 21:52:26 +08:00
parent 6b7ed39017
commit 92e41733ea

View File

@ -91,7 +91,7 @@
<!-- 主内容区域 -->
<n-layout-content>
<!-- 控制按钮 - 只在左侧边栏时显示 -->
<!-- 控制按钮 - 左侧边栏 -->
<div
v-if="sidebarPosition === 'left'"
class="sidebar-toggle-btn toggle-left"
@ -111,6 +111,27 @@
</template>
</n-button>
</div>
<!-- 控制按钮 - 右侧边栏 -->
<div
v-if="sidebarPosition === 'right'"
class="sidebar-toggle-btn toggle-right"
>
<n-button
type="default"
size="small"
circle
@click="toggleSidebarCollapse"
:title="actualSidebarCollapsed ? '展开侧边栏' : '收起侧边栏'"
class="toggle-button"
>
<template #icon>
<n-icon>
<Icon :icon="actualSidebarCollapsed ? 'tabler:chevron-right' : 'tabler:chevron-left'" />
</n-icon>
</template>
</n-button>
</div>
<!-- 表单内容 - 按照 jingrow 方式渲染 -->
<div class="form-layout">
<div class="form-page">
@ -1414,14 +1435,23 @@ watch(() => route.params.entity, async (newEntity, oldEntity) => {
overflow: visible !important;
}
/* 侧边栏控制按钮 - 只处理左侧边栏 */
/* 侧边栏控制按钮 */
.sidebar-toggle-btn {
position: absolute;
top: -10px;
left: -10px;
z-index: 1000;
}
/* 左侧边栏控制按钮 */
.sidebar-toggle-btn.toggle-left {
left: -10px;
}
/* 右侧边栏控制按钮 */
.sidebar-toggle-btn.toggle-right {
right: -10px;
}
.toggle-button {
width: 24px;
height: 24px;