Skip to content

Commit b841d86

Browse files
wangdan-fit2cloudwangdan-fit2cloud
committed
perf: Optimize file directory style
1 parent ddc60dd commit b841d86

File tree

3 files changed

+136
-124
lines changed

3 files changed

+136
-124
lines changed

‎ui/src/components/folder-tree/index.vue‎

Lines changed: 128 additions & 118 deletions
Original file line numberDiff line numberDiff line change
@@ -7,116 +7,121 @@
77
clearable
88
class="p-8"
99
/>
10-
<div class="tree-height" :style="treeStyle">
11-
<div v-if="showShared && hasPermission(EditionConst.IS_EE, 'OR')" class="border-b mb-4">
12-
<div
13-
@click="handleSharedNodeClick"
14-
class="shared-button flex cursor"
15-
:class="currentNodeKey === 'share' && 'active'"
16-
>
17-
<AppIcon
18-
iconName="app-shared-active"
19-
style="font-size: 18px"
20-
class="color-primary"
21-
></AppIcon>
22-
<span class="ml-8">{{ shareTitle }}</span>
23-
</div>
10+
11+
<div v-if="showShared && hasPermission(EditionConst.IS_EE, 'OR')" class="border-b mb-4">
12+
<div
13+
@click="handleSharedNodeClick"
14+
class="shared-button flex cursor"
15+
:class="currentNodeKey === 'share' && 'active'"
16+
>
17+
<AppIcon
18+
iconName="app-shared-active"
19+
style="font-size: 18px"
20+
class="color-primary"
21+
></AppIcon>
22+
<span class="ml-8">{{ shareTitle }}</span>
2423
</div>
24+
</div>
2525

26-
<el-scrollbar>
27-
<el-tree
28-
ref="treeRef"
29-
:data="data"
30-
:props="defaultProps"
31-
@node-click="handleNodeClick"
32-
:filter-node-method="filterNode"
33-
:default-expanded-keys="[currentNodeKey]"
34-
:current-node-key="currentNodeKey"
35-
highlight-current
36-
class="overflow-inherit_node__children"
37-
draggable
38-
:allow-drop="allowDrop"
39-
:allow-drag="allowDrag"
40-
@node-drop="handleDrop"
41-
node-key="id"
42-
v-loading="loading"
43-
v-bind="$attrs"
44-
>
45-
<template #default="{ node, data }">
46-
<div class="flex-between w-full" @mouseenter.stop="handleMouseEnter(data)">
47-
<div class="flex align-center">
48-
<AppIcon iconName="app-folder" style="font-size: 20px"></AppIcon>
49-
<span class="ml-8 ellipsis tree-label" style="max-width: 110px" :title="node.label">{{
50-
i18n_name(node.label)
51-
}}</span>
52-
</div>
26+
<el-scrollbar>
27+
<el-tree
28+
class="overflow-inherit_node__children"
29+
:class="
30+
showShared && hasPermission(EditionConst.IS_EE, 'OR')
31+
? 'tree-height-shared'
32+
: 'tree-height '
33+
"
34+
:style="treeStyle"
35+
ref="treeRef"
36+
:data="data"
37+
:props="defaultProps"
38+
@node-click="handleNodeClick"
39+
:filter-node-method="filterNode"
40+
:default-expanded-keys="[currentNodeKey]"
41+
:current-node-key="currentNodeKey"
42+
highlight-current
43+
draggable
44+
:allow-drop="allowDrop"
45+
:allow-drag="allowDrag"
46+
@node-drop="handleDrop"
47+
node-key="id"
48+
v-loading="loading"
49+
v-bind="$attrs"
50+
>
51+
<template #default="{ node, data }">
52+
<div class="flex-between w-full" @mouseenter.stop="handleMouseEnter(data)">
53+
<div class="flex align-center">
54+
<AppIcon iconName="app-folder" style="font-size: 20px"></AppIcon>
55+
<span class="ml-8 ellipsis tree-label" style="max-width: 110px" :title="node.label">{{
56+
i18n_name(node.label)
57+
}}</span>
58+
</div>
5359

54-
<div
55-
v-if="canOperation && MoreFilledPermission(node, data)"
56-
@click.stop
57-
v-show="hoverNodeId === data.id"
58-
@mouseenter.stop="handleMouseEnter(data)"
59-
@mouseleave.stop="handleMouseleave"
60-
class="mr-16"
61-
>
62-
<el-dropdown trigger="click" :teleported="false">
63-
<el-button text class="w-full" v-if="MoreFilledPermission(node, data)">
64-
<AppIcon iconName="app-more"></AppIcon>
65-
</el-button>
66-
<template #dropdown>
67-
<el-dropdown-menu>
68-
<el-dropdown-item
69-
@click.stop="openCreateFolder(data)"
70-
v-if="permissionPrecise.folderCreate(data.id)"
71-
>
72-
<AppIcon iconName="app-add-folder" class="color-secondary"></AppIcon>
73-
{{ $t('components.folder.addChildFolder') }}
74-
</el-dropdown-item>
75-
<el-dropdown-item
76-
@click.stop="openEditFolder(data)"
77-
v-if="permissionPrecise.folderEdit(data.id)"
78-
>
79-
<AppIcon iconName="app-edit" class="color-secondary"></AppIcon>
80-
{{ $t('common.edit') }}
81-
</el-dropdown-item>
82-
<el-dropdown-item
83-
@click.stop="openMoveToDialog(data)"
84-
v-if="node.level !== 1 && permissionPrecise.folderEdit(data.id)"
85-
>
86-
<AppIcon iconName="app-migrate" class="color-secondary"></AppIcon>
87-
{{ $t('common.moveTo') }}
88-
</el-dropdown-item>
89-
<el-dropdown-item
90-
@click.stop="openAuthorization(data)"
91-
v-if="permissionPrecise.folderAuth(data.id)"
92-
>
93-
<AppIcon iconName="app-resource-authorization" class="color-secondary"></AppIcon>
94-
{{ $t('views.system.resourceAuthorization.title') }}
95-
</el-dropdown-item>
96-
<el-dropdown-item
97-
divided
98-
@click.stop="deleteFolder(data)"
99-
:disabled="!data.parent_id"
100-
v-if="permissionPrecise.folderDelete(data.id)"
101-
>
102-
<AppIcon iconName="app-delete" class="color-secondary"></AppIcon>
103-
{{ $t('common.delete') }}
104-
</el-dropdown-item>
105-
</el-dropdown-menu>
106-
</template>
107-
</el-dropdown>
108-
</div>
60+
<div
61+
v-if="canOperation && MoreFilledPermission(node, data)"
62+
@click.stop
63+
v-show="hoverNodeId === data.id"
64+
@mouseenter.stop="handleMouseEnter(data)"
65+
@mouseleave.stop="handleMouseleave"
66+
class="mr-16"
67+
>
68+
<el-dropdown trigger="click" :teleported="false">
69+
<el-button text class="w-full" v-if="MoreFilledPermission(node, data)">
70+
<AppIcon iconName="app-more"></AppIcon>
71+
</el-button>
72+
<template #dropdown>
73+
<el-dropdown-menu>
74+
<el-dropdown-item
75+
@click.stop="openCreateFolder(data)"
76+
v-if="permissionPrecise.folderCreate(data.id)"
77+
>
78+
<AppIcon iconName="app-add-folder" class="color-secondary"></AppIcon>
79+
{{ $t('components.folder.addChildFolder') }}
80+
</el-dropdown-item>
81+
<el-dropdown-item
82+
@click.stop="openEditFolder(data)"
83+
v-if="permissionPrecise.folderEdit(data.id)"
84+
>
85+
<AppIcon iconName="app-edit" class="color-secondary"></AppIcon>
86+
{{ $t('common.edit') }}
87+
</el-dropdown-item>
88+
<el-dropdown-item
89+
@click.stop="openMoveToDialog(data)"
90+
v-if="node.level !== 1 && permissionPrecise.folderEdit(data.id)"
91+
>
92+
<AppIcon iconName="app-migrate" class="color-secondary"></AppIcon>
93+
{{ $t('common.moveTo') }}
94+
</el-dropdown-item>
95+
<el-dropdown-item
96+
@click.stop="openAuthorization(data)"
97+
v-if="permissionPrecise.folderAuth(data.id)"
98+
>
99+
<AppIcon
100+
iconName="app-resource-authorization"
101+
class="color-secondary"
102+
></AppIcon>
103+
{{ $t('views.system.resourceAuthorization.title') }}
104+
</el-dropdown-item>
105+
<el-dropdown-item
106+
divided
107+
@click.stop="deleteFolder(data)"
108+
:disabled="!data.parent_id"
109+
v-if="permissionPrecise.folderDelete(data.id)"
110+
>
111+
<AppIcon iconName="app-delete" class="color-secondary"></AppIcon>
112+
{{ $t('common.delete') }}
113+
</el-dropdown-item>
114+
</el-dropdown-menu>
115+
</template>
116+
</el-dropdown>
109117
</div>
110-
</template>
111-
</el-tree>
112-
</el-scrollbar>
113-
</div>
118+
</div>
119+
</template>
120+
</el-tree>
121+
</el-scrollbar>
122+
114123
<CreateFolderDialog ref="CreateFolderDialogRef" @refresh="refreshFolder" :title="title" />
115-
<MoveToDialog
116-
ref="MoveToDialogRef"
117-
:source="props.source"
118-
@refresh="emit('refreshTree')"
119-
/>
124+
<MoveToDialog ref="MoveToDialogRef" :source="props.source" @refresh="emit('refreshTree')" />
120125
<ResourceAuthorizationDrawer
121126
:type="props.source"
122127
:is-folder="true"
@@ -202,7 +207,7 @@ const MoreFilledPermission = (node: any, data: any) => {
202207
}
203208
204209
const MoveToDialogRef = ref()
205-
function openMoveToDialog(data:any) {
210+
function openMoveToDialog(data: any) {
206211
const obj = {
207212
id: data.id,
208213
folder_type: props.source,
@@ -211,14 +216,14 @@ function openMoveToDialog(data:any) {
211216
}
212217
213218
const allowDrag = (node: any) => {
214-
return permissionPrecise.value.folderEdit(node.data.id)
219+
return permissionPrecise.value.folderEdit(node.data.id)
215220
}
216221
217222
const allowDrop = (draggingNode: any, dropNode: any, type: string) => {
218223
const dropData = dropNode.data
219224
if (type === 'inner') {
220225
return permissionPrecise.value.folderEdit(dropData.id)
221-
}
226+
}
222227
return false
223228
}
224229
@@ -234,9 +239,10 @@ const handleDrop = (draggingNode: any, dropNode: any, dropType: string, ev: Drag
234239
}
235240
const obj = {
236241
...dragData,
237-
parent_id: newParentId
242+
parent_id: newParentId,
238243
}
239-
folderApi.putFolder(dragData.id, props.source, obj, loading)
244+
folderApi
245+
.putFolder(dragData.id, props.source, obj, loading)
240246
.then(() => {
241247
MsgSuccess(t('common.saveSuccess'))
242248
emit('refreshTree')
@@ -253,8 +259,8 @@ onBeforeRouteLeave((to, from) => {
253259
onMounted(() => {
254260
bus.on('select_node', (id: string) => {
255261
treeRef.value?.setCurrentKey(id)
256-
hoverNodeId.value=id
257-
})
262+
hoverNodeId.value = id
263+
})
258264
})
259265
interface Tree {
260266
name: string
@@ -385,12 +391,15 @@ onUnmounted(() => {
385391
}
386392
}
387393
}
394+
.tree-height-shared {
395+
padding-top: 4px;
396+
height: calc(100vh - 220px);
397+
}
388398
.tree-height {
389399
padding-top: 4px;
390-
height: calc(100vh - 210px);
400+
height: calc(100vh - 180px);
391401
}
392-
}
393-
:deep(.el-tree) {
402+
:deep(.el-tree) {
394403
.el-tree-node.is-dragging {
395404
opacity: 0.5;
396405
}
@@ -403,9 +412,10 @@ onUnmounted(() => {
403412
position: relative;
404413
}
405414
}
406-
:deep(.overflow-inherit_node__children) {
407-
.el-tree-node__children {
408-
overflow: inherit !important;
415+
:deep(.overflow-inherit_node__children) {
416+
.el-tree-node__children {
417+
overflow: inherit !important;
418+
}
409419
}
410420
}
411421
</style>

‎ui/src/views/application-workflow/component/DropdownMenu.vue‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
<template>
2-
<div v-show="show" class="workflow-dropdown-menu border border-r-6 white-bg" :style="{ width: activeName === 'base' ? '400px':'640px' }">
2+
<div
3+
v-show="show"
4+
class="workflow-dropdown-menu border border-r-6 white-bg"
5+
:style="{ width: activeName === 'base' ? '400px' : '640px' }"
6+
>
37
<el-tabs v-model="activeName" class="workflow-dropdown-tabs" @tab-change="handleClick">
48
<div
59
v-show="activeName === 'base'"
@@ -80,6 +84,7 @@
8084
:shareTitle="$t('views.shared.shared_tool')"
8185
:showShared="permissionPrecise['is_share']()"
8286
:canOperation="false"
87+
:treeStyle="{ height: '400px' }"
8388
/>
8489
</div>
8590
</template>
@@ -103,6 +108,7 @@
103108
:currentNodeKey="folder.currentFolder?.id"
104109
@handleNodeClick="folderClickHandle"
105110
:canOperation="false"
111+
:treeStyle="{ height: '400px' }"
106112
/>
107113
</div>
108114
</template>
@@ -342,9 +348,5 @@ onMounted(() => {})
342348
:deep(.el-tabs__header) {
343349
margin-bottom: 0;
344350
}
345-
346-
:deep(.tree-height) {
347-
height: 400px;
348-
}
349351
}
350352
</style>

‎ui/src/views/system/resource-authorization/component/PermissionTable.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@
6060
:maxTableHeight="260"
6161
:row-key="(row: any) => row.id"
6262
style="min-width: 600px"
63-
:expand-row-keys="defaultExpandKeys"
63+
6464
show-overflow-tooltip
6565
>
6666
<el-table-column type="selection" width="55" :reserve-selection="true"> </el-table-column>

0 commit comments

Comments
 (0)