mirror of
https://github.com/kuaifan/dootask.git
synced 2026-09-08 21:19:25 +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>
|
<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;
|
||||||
|
|||||||
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;
|
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%;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user