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>
<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
class="page-manage-menu-dropdown main-menu"
trigger="click"
@ -101,33 +105,34 @@
</div>
</DropdownItem>
<!-- 其他菜单 -->
<DropdownItem
v-else-if="item.visible !== false"
:key="`menu-${index}`"
:divided="!!item.divided"
:name="item.path"
:style="item.style || {}">
<div class="manage-menu-flex">
<div class="manage-menu-title">
{{$L(item.name)}}
<template v-else-if="item.visible !== false">
<DropdownItem
:key="`menu-${index}`"
:divided="!!item.divided"
:name="item.path"
:style="item.style || {}">
<div class="manage-menu-flex">
<div class="manage-menu-title">
{{$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>
<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>
</DropdownItem>
</DropdownItem>
</template>
</template>
</DropdownMenu>
</Dropdown>
@ -278,6 +283,13 @@
</DropdownMenu>
</Dropdown>
</ButtonGroup>
<ResizeLine
class="manage-menu-resize"
placement="right"
v-model="menuWidth"
:min="200"
:max="420"
@on-change="onMenuResizeChange"/>
</div>
<div class="manage-box-main" :role="routeName">
@ -486,6 +498,7 @@ import TaskExport from "./manage/components/TaskExport";
import ApproveExport from "./manage/components/ApproveExport";
import ComplaintManagement from "./manage/components/ComplaintManagement";
import MicroApps from "../components/MicroApps";
import ResizeLine from "../components/ResizeLine.vue";
import UserSelect from "../components/UserSelect.vue";
import ImgUpload from "../components/ImgUpload.vue";
import Approve from "./manage/approve/index.vue";
@ -522,6 +535,7 @@ export default {
RecentManagement,
ProjectArchived,
MicroApps,
ResizeLine,
ComplaintManagement,
Draggable,
DepartmentOwnerView
@ -595,6 +609,9 @@ export default {
mcpHelperShow: 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}
@ -1035,6 +1058,12 @@ export default {
methods: {
transformEmojiToHtml,
onMenuResizeChange({event}) {
this.menuResizing = event !== 'up';
if (event === 'up') {
$A.setStorage("manage.menuWidth", this.menuWidth);
}
},
syncOwnerProjectTabByRoute() {
if (!this.ownerProjectTabsVisible || !this.routeProject) {
return;

View File

@ -19,6 +19,17 @@
flex-direction: column;
align-items: center;
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 {
flex: 1;
width: 100%;