mirror of
https://github.com/kuaifan/dootask.git
synced 2026-05-24 01:14:06 +00:00
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:
parent
ef7293704b
commit
0888f599a4
@ -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;
|
||||
|
||||
11
resources/assets/sass/pages/page-manage.scss
vendored
11
resources/assets/sass/pages/page-manage.scss
vendored
@ -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%;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user