feat(manage): 管理页侧边栏支持拖拽调整宽度并修复菜单条件渲染

- 新增 ResizeLine 组件实现侧边栏宽度拖拽调整,范围200-420px,持久化至 localStorage
- 修复 v-for/v-else-if 同级指令优先级问题,将 v-else-if 提升至 template 包裹层

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
kuaifan 2026-05-21 09:41:00 +00:00
parent ef7293704b
commit 0888f599a4
2 changed files with 67 additions and 27 deletions

View File

@ -1,6 +1,10 @@
<template> <template>
<div class="page-manage" :class="pageClass"> <div class="page-manage" :class="pageClass">
<div ref="boxMenu" class="manage-box-menu"> <div
ref="boxMenu"
class="manage-box-menu"
:class="{'menu-resizing': menuResizing}"
:style="menuStyle">
<Dropdown <Dropdown
class="page-manage-menu-dropdown main-menu" class="page-manage-menu-dropdown main-menu"
trigger="click" trigger="click"
@ -101,33 +105,34 @@
</div> </div>
</DropdownItem> </DropdownItem>
<!-- 其他菜单 --> <!-- 其他菜单 -->
<DropdownItem <template v-else-if="item.visible !== false">
v-else-if="item.visible !== false" <DropdownItem
:key="`menu-${index}`" :key="`menu-${index}`"
:divided="!!item.divided" :divided="!!item.divided"
:name="item.path" :name="item.path"
:style="item.style || {}"> :style="item.style || {}">
<div class="manage-menu-flex"> <div class="manage-menu-flex">
<div class="manage-menu-title"> <div class="manage-menu-title">
{{$L(item.name)}} {{$L(item.name)}}
</div>
<Icon
v-if="item.selected === true"
type="md-checkmark" />
<Badge
v-if="item.path === 'version'"
class="manage-menu-report-badge"
:text="clientNewVersion"/>
<Badge
v-else-if="item.path === 'workReport' && reportUnreadNumber > 0"
class="manage-menu-report-badge"
:count="reportUnreadNumber"/>
<Badge
v-else-if="item.path === 'approve' && approveUnreadNumber > 0"
class="manage-menu-report-badge"
:count="approveUnreadNumber"/>
</div> </div>
<Icon </DropdownItem>
v-if="item.selected === true" </template>
type="md-checkmark" />
<Badge
v-if="item.path === 'version'"
class="manage-menu-report-badge"
:text="clientNewVersion"/>
<Badge
v-else-if="item.path === 'workReport' && reportUnreadNumber > 0"
class="manage-menu-report-badge"
:count="reportUnreadNumber"/>
<Badge
v-else-if="item.path === 'approve' && approveUnreadNumber > 0"
class="manage-menu-report-badge"
:count="approveUnreadNumber"/>
</div>
</DropdownItem>
</template> </template>
</DropdownMenu> </DropdownMenu>
</Dropdown> </Dropdown>
@ -278,6 +283,13 @@
</DropdownMenu> </DropdownMenu>
</Dropdown> </Dropdown>
</ButtonGroup> </ButtonGroup>
<ResizeLine
class="manage-menu-resize"
placement="right"
v-model="menuWidth"
:min="200"
:max="420"
@on-change="onMenuResizeChange"/>
</div> </div>
<div class="manage-box-main" :role="routeName"> <div class="manage-box-main" :role="routeName">
@ -486,6 +498,7 @@ import TaskExport from "./manage/components/TaskExport";
import ApproveExport from "./manage/components/ApproveExport"; import ApproveExport from "./manage/components/ApproveExport";
import ComplaintManagement from "./manage/components/ComplaintManagement"; import ComplaintManagement from "./manage/components/ComplaintManagement";
import MicroApps from "../components/MicroApps"; import MicroApps from "../components/MicroApps";
import ResizeLine from "../components/ResizeLine.vue";
import UserSelect from "../components/UserSelect.vue"; import UserSelect from "../components/UserSelect.vue";
import ImgUpload from "../components/ImgUpload.vue"; import ImgUpload from "../components/ImgUpload.vue";
import Approve from "./manage/approve/index.vue"; import Approve from "./manage/approve/index.vue";
@ -522,6 +535,7 @@ export default {
RecentManagement, RecentManagement,
ProjectArchived, ProjectArchived,
MicroApps, MicroApps,
ResizeLine,
ComplaintManagement, ComplaintManagement,
Draggable, Draggable,
DepartmentOwnerView DepartmentOwnerView
@ -595,6 +609,9 @@ export default {
mcpHelperShow: false, mcpHelperShow: false,
departmentOwnerViewShow: false, departmentOwnerViewShow: false,
menuWidth: Math.min(420, Math.max(200, $A.getStorageInt("manage.menuWidth", 255))),
menuResizing: false,
} }
}, },
@ -694,6 +711,12 @@ export default {
} }
}, },
menuStyle() {
return {
width: `${this.menuWidth}px`
}
},
/** /**
* 综合数未读提及待办 * 综合数未读提及待办
* @returns {string|string} * @returns {string|string}
@ -1035,6 +1058,12 @@ export default {
methods: { methods: {
transformEmojiToHtml, transformEmojiToHtml,
onMenuResizeChange({event}) {
this.menuResizing = event !== 'up';
if (event === 'up') {
$A.setStorage("manage.menuWidth", this.menuWidth);
}
},
syncOwnerProjectTabByRoute() { syncOwnerProjectTabByRoute() {
if (!this.ownerProjectTabsVisible || !this.routeProject) { if (!this.ownerProjectTabsVisible || !this.routeProject) {
return; return;

View File

@ -19,6 +19,17 @@
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
transition: all 0.2s; transition: all 0.2s;
&.menu-resizing {
transition: none;
}
.manage-menu-resize {
position: absolute;
top: 0;
right: -3px;
bottom: 0;
width: 6px;
z-index: 3;
}
.scrollbar-container { .scrollbar-container {
flex: 1; flex: 1;
width: 100%; width: 100%;