Skip to content

Commit f09b68d

Browse files
wangdan-fit2cloudwangdan-fit2cloud
committed
perf: Optimize tool store style
1 parent 7ec4e7c commit f09b68d

File tree

2 files changed

+181
-70
lines changed

2 files changed

+181
-70
lines changed

‎ui/src/views/tool/component/ToolListContainer.vue‎

Lines changed: 179 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -6,21 +6,44 @@
66
<template #search>
77
<div class="flex">
88
<div class="flex-between complex-search">
9-
<el-select class="complex-search__left" v-model="search_type" style="width: 120px"
10-
@change="search_type_change">
9+
<el-select
10+
class="complex-search__left"
11+
v-model="search_type"
12+
style="width: 120px"
13+
@change="search_type_change"
14+
>
1115
<el-option :label="$t('common.creator')" value="create_user" />
1216

1317
<el-option :label="$t('views.tool.form.toolName.label')" value="name" />
1418
</el-select>
15-
<el-input v-if="search_type === 'name'" v-model="search_form.name" @change="searchHandle"
16-
:placeholder="$t('common.searchBar.placeholder')" style="width: 220px" clearable />
17-
<el-select v-else-if="search_type === 'create_user'" v-model="search_form.create_user" @change="searchHandle"
18-
filterable clearable style="width: 220px">
19+
<el-input
20+
v-if="search_type === 'name'"
21+
v-model="search_form.name"
22+
@change="searchHandle"
23+
:placeholder="$t('common.searchBar.placeholder')"
24+
style="width: 220px"
25+
clearable
26+
/>
27+
<el-select
28+
v-else-if="search_type === 'create_user'"
29+
v-model="search_form.create_user"
30+
@change="searchHandle"
31+
filterable
32+
clearable
33+
style="width: 220px"
34+
>
1935
<el-option v-for="u in user_options" :key="u.id" :value="u.id" :label="u.nick_name" />
2036
</el-select>
2137
</div>
22-
<el-dropdown trigger="click" v-if="!isShared && permissionPrecise.create()">
23-
<el-button type="primary" class="ml-8">
38+
<el-button
39+
class="ml-8"
40+
v-if="!isShared && permissionPrecise.create()"
41+
@click="openToolStoreDialog()"
42+
>
43+
{{ $t('views.tool.toolStore.title') }}
44+
</el-button>
45+
<el-dropdown trigger="click">
46+
<el-button type="primary" class="ml-8" v-if="!isShared && permissionPrecise.create()">
2447
{{ $t('common.create') }}
2548
<el-icon class="el-icon--right">
2649
<arrow-down />
@@ -48,9 +71,17 @@
4871
</div>
4972
</div>
5073
</el-dropdown-item>
51-
<el-upload ref="elUploadRef" :file-list="[]" action="#" multiple :auto-upload="false"
52-
:show-file-list="false" :limit="1" :on-change="(file: any, fileList: any) => importTool(file)"
53-
class="import-button">
74+
<el-upload
75+
ref="elUploadRef"
76+
:file-list="[]"
77+
action="#"
78+
multiple
79+
:auto-upload="false"
80+
:show-file-list="false"
81+
:limit="1"
82+
:on-change="(file: any, fileList: any) => importTool(file)"
83+
class="import-button"
84+
>
5485
<el-dropdown-item v-if="permissionPrecise.import()">
5586
<div class="flex align-center w-full">
5687
<el-avatar shape="square" :size="32" style="background: none">
@@ -62,7 +93,7 @@
6293
</div>
6394
</el-dropdown-item>
6495
</el-upload>
65-
<el-dropdown-item @click="openToolStoreDialog()">
96+
<!-- <el-dropdown-item @click="openToolStoreDialog()">
6697
<div class="flex align-center">
6798
<el-avatar shape="square" :size="32" style="background: none">
6899
<img src="@/assets/icon_tool_shop.svg" alt="" />
@@ -73,7 +104,7 @@
73104
</div>
74105
</div>
75106
</div>
76-
</el-dropdown-item>
107+
</el-dropdown-item> -->
77108
<el-dropdown-item @click="openCreateFolder" divided v-if="apiType === 'workspace'">
78109
<div class="flex align-center">
79110
<AppIcon iconName="app-folder" style="font-size: 32px"></AppIcon>
@@ -91,16 +122,35 @@
91122
</div>
92123
</template>
93124

94-
<div v-loading.fullscreen.lock="paginationConfig.current_page === 1 && loading"
95-
style="max-height: calc(100vh - 120px)">
96-
<InfiniteScroll :size="tool.toolList.length" :total="paginationConfig.total"
97-
:page_size="paginationConfig.page_size" v-model:current_page="paginationConfig.current_page" @load="getList"
98-
:loading="loading">
125+
<div
126+
v-loading.fullscreen.lock="paginationConfig.current_page === 1 && loading"
127+
style="max-height: calc(100vh - 120px)"
128+
>
129+
<InfiniteScroll
130+
:size="tool.toolList.length"
131+
:total="paginationConfig.total"
132+
:page_size="paginationConfig.page_size"
133+
v-model:current_page="paginationConfig.current_page"
134+
@load="getList"
135+
:loading="loading"
136+
>
99137
<el-row v-if="tool.toolList.length > 0" :gutter="15" class="w-full">
100138
<template v-for="(item, index) in tool.toolList" :key="index">
101-
<el-col v-if="item.resource_type === 'folder'" :xs="24" :sm="12" :md="12" :lg="8" :xl="6" class="mb-16">
102-
<CardBox :title="item.name" :description="item.desc || $t('components.noDesc')" class="cursor"
103-
@click="clickFolder(item)">
139+
<el-col
140+
v-if="item.resource_type === 'folder'"
141+
:xs="24"
142+
:sm="12"
143+
:md="12"
144+
:lg="8"
145+
:xl="6"
146+
class="mb-16"
147+
>
148+
<CardBox
149+
:title="item.name"
150+
:description="item.desc || $t('components.noDesc')"
151+
class="cursor"
152+
@click="clickFolder(item)"
153+
>
104154
<template #icon>
105155
<el-avatar shape="square" :size="32" style="background: none">
106156
<AppIcon iconName="app-folder" style="font-size: 32px"></AppIcon>
@@ -114,10 +164,21 @@
114164
</CardBox>
115165
</el-col>
116166
<el-col v-else :xs="24" :sm="12" :md="12" :lg="8" :xl="6" class="mb-16">
117-
<CardBox :title="item.name" :description="item.desc" class="cursor" @click.stop="openCreateDialog(item)"
118-
:disabled="permissionPrecise.edit(item.id)">
167+
<CardBox
168+
:title="item.name"
169+
:description="item.desc"
170+
class="cursor"
171+
@click.stop="openCreateDialog(item)"
172+
:disabled="permissionPrecise.edit(item.id)"
173+
>
119174
<template #icon>
120-
<el-avatar v-if="item?.icon" shape="square" :size="32" style="background: none" class="mr-8">
175+
<el-avatar
176+
v-if="item?.icon"
177+
shape="square"
178+
:size="32"
179+
style="background: none"
180+
class="mr-8"
181+
>
121182
<img :src="resetUrl(item?.icon)" alt="" />
122183
</el-avatar>
123184
<ToolIcon v-else :size="32" :type="item?.tool_type" />
@@ -140,9 +201,14 @@
140201
{{ t('views.shared.title') }}
141202
</el-tag>
142203
<el-tooltip effect="dark" content="更新版本">
143-
<el-button text @click.stop v-if="
144-
showUpdateStoreTool(item) && !isShared && permissionPrecise.edit(item.id)
145-
" @click="updateStoreTool(item)">
204+
<el-button
205+
text
206+
@click.stop
207+
v-if="
208+
showUpdateStoreTool(item) && !isShared && permissionPrecise.edit(item.id)
209+
"
210+
@click="updateStoreTool(item)"
211+
>
146212
<el-icon v-if="hoverShow">
147213
<Refresh />
148214
</el-icon>
@@ -169,67 +235,101 @@
169235
</template>
170236
<template #mouseEnter>
171237
<div @click.stop v-if="!isShared && MoreFieldPermission(item.id)">
172-
<el-switch v-model="item.is_active" :before-change="() => changeState(item)" size="small"
173-
class="mr-4" v-if="permissionPrecise.switch(item.id)" />
238+
<el-switch
239+
v-model="item.is_active"
240+
:before-change="() => changeState(item)"
241+
size="small"
242+
class="mr-4"
243+
v-if="permissionPrecise.switch(item.id)"
244+
/>
174245
<el-divider direction="vertical" />
175246
<el-dropdown trigger="click">
176247
<el-button text @click.stop>
177248
<AppIcon iconName="app-more"></AppIcon>
178249
</el-button>
179250
<template #dropdown>
180251
<el-dropdown-menu>
181-
<el-dropdown-item v-if="item.tool_type === 'MCP'" @click.stop="showMcpConfig(item)">
252+
<el-dropdown-item
253+
v-if="item.tool_type === 'MCP'"
254+
@click.stop="showMcpConfig(item)"
255+
>
182256
<AppIcon iconName="app-operate-log" class="color-secondary"></AppIcon>
183257
{{ $t('views.tool.mcpConfig') }}
184258
</el-dropdown-item>
185-
<el-dropdown-item v-if="item.template_id && permissionPrecise.edit(item.id)"
186-
@click.stop="addInternalTool(item, true)">
259+
<el-dropdown-item
260+
v-if="item.template_id && permissionPrecise.edit(item.id)"
261+
@click.stop="addInternalTool(item, true)"
262+
>
187263
<AppIcon iconName="app-edit" class="color-secondary"></AppIcon>
188264
{{ $t('common.edit') }}
189265
</el-dropdown-item>
190-
<el-dropdown-item v-if="!item.template_id && permissionPrecise.edit(item.id)"
191-
@click.stop="openCreateDialog(item)">
266+
<el-dropdown-item
267+
v-if="!item.template_id && permissionPrecise.edit(item.id)"
268+
@click.stop="openCreateDialog(item)"
269+
>
192270
<AppIcon iconName="app-edit" class="color-secondary"></AppIcon>
193271
{{ $t('common.edit') }}
194272
</el-dropdown-item>
195-
<el-dropdown-item v-if="
196-
!item.template_id &&
197-
permissionPrecise.copy(item.id) &&
198-
item.tool_type !== 'MCP'
199-
" @click.stop="copyTool(item)">
273+
<el-dropdown-item
274+
v-if="
275+
!item.template_id &&
276+
permissionPrecise.copy(item.id) &&
277+
item.tool_type !== 'MCP'
278+
"
279+
@click.stop="copyTool(item)"
280+
>
200281
<AppIcon iconName="app-copy" class="color-secondary"></AppIcon>
201282
{{ $t('common.copy') }}
202283
</el-dropdown-item>
203-
<el-dropdown-item v-if="
204-
item.init_field_list?.length > 0 && permissionPrecise.edit(item.id)
205-
" @click.stop="configInitParams(item)">
284+
<el-dropdown-item
285+
v-if="
286+
item.init_field_list?.length > 0 && permissionPrecise.edit(item.id)
287+
"
288+
@click.stop="configInitParams(item)"
289+
>
206290
<AppIcon iconName="app-operation" class="color-secondary"></AppIcon>
207291
{{ $t('common.param.initParam') }}
208292
</el-dropdown-item>
209-
<el-dropdown-item @click.stop="openAuthorization(item)"
210-
v-if="apiType === 'workspace' && permissionPrecise.auth(item.id)">
211-
<AppIcon iconName="app-resource-authorization" class="color-secondary"></AppIcon>
293+
<el-dropdown-item
294+
@click.stop="openAuthorization(item)"
295+
v-if="apiType === 'workspace' && permissionPrecise.auth(item.id)"
296+
>
297+
<AppIcon
298+
iconName="app-resource-authorization"
299+
class="color-secondary"
300+
></AppIcon>
212301
{{ $t('views.system.resourceAuthorization.title') }}
213302
</el-dropdown-item>
214-
<el-dropdown-item @click.stop="openMoveToDialog(item)"
215-
v-if="permissionPrecise.copy(item.id) && apiType === 'workspace'">
303+
<el-dropdown-item
304+
@click.stop="openMoveToDialog(item)"
305+
v-if="permissionPrecise.copy(item.id) && apiType === 'workspace'"
306+
>
216307
<AppIcon iconName="app-migrate" class="color-secondary"></AppIcon>
217308
{{ $t('common.moveTo') }}
218309
</el-dropdown-item>
219-
<el-dropdown-item v-if="isSystemShare" @click.stop="openAuthorizedWorkspaceDialog(item)">
310+
<el-dropdown-item
311+
v-if="isSystemShare"
312+
@click.stop="openAuthorizedWorkspaceDialog(item)"
313+
>
220314
<AppIcon iconName="app-lock" class="color-secondary"></AppIcon>
221315
{{ $t('views.shared.authorized_workspace') }}
222316
</el-dropdown-item>
223-
<el-dropdown-item v-if="
224-
!item.template_id &&
225-
permissionPrecise.export(item.id) &&
226-
item.tool_type !== 'MCP'
227-
" @click.stop="exportTool(item)">
317+
<el-dropdown-item
318+
v-if="
319+
!item.template_id &&
320+
permissionPrecise.export(item.id) &&
321+
item.tool_type !== 'MCP'
322+
"
323+
@click.stop="exportTool(item)"
324+
>
228325
<AppIcon iconName="app-export" class="color-secondary"></AppIcon>
229326
{{ $t('common.export') }}
230327
</el-dropdown-item>
231-
<el-dropdown-item v-if="permissionPrecise.delete(item.id)" divided
232-
@click.stop="deleteTool(item)">
328+
<el-dropdown-item
329+
v-if="permissionPrecise.delete(item.id)"
330+
divided
331+
@click.stop="deleteTool(item)"
332+
>
233333
<AppIcon iconName="app-delete" class="color-secondary"></AppIcon>
234334
{{ $t('common.delete') }}
235335
</el-dropdown-item>
@@ -253,11 +353,21 @@
253353
<ToolStoreDialog ref="toolStoreDialogRef" :api-type="apiType" @refresh="refresh" />
254354
<AddInternalToolDialog ref="AddInternalToolDialogRef" @refresh="confirmAddInternalTool" />
255355
<McpToolConfigDialog ref="McpToolConfigDialogRef" @refresh="refresh" />
256-
<AuthorizedWorkspace ref="AuthorizedWorkspaceDialogRef" v-if="isSystemShare"></AuthorizedWorkspace>
257-
<MoveToDialog ref="MoveToDialogRef" :source="SourceTypeEnum.TOOL" @refresh="refreshToolList"
258-
v-if="apiType === 'workspace'" />
259-
<ResourceAuthorizationDrawer :type="SourceTypeEnum.TOOL" ref="ResourceAuthorizationDrawerRef"
260-
v-if="apiType === 'workspace'" />
356+
<AuthorizedWorkspace
357+
ref="AuthorizedWorkspaceDialogRef"
358+
v-if="isSystemShare"
359+
></AuthorizedWorkspace>
360+
<MoveToDialog
361+
ref="MoveToDialogRef"
362+
:source="SourceTypeEnum.TOOL"
363+
@refresh="refreshToolList"
364+
v-if="apiType === 'workspace'"
365+
/>
366+
<ResourceAuthorizationDrawer
367+
:type="SourceTypeEnum.TOOL"
368+
ref="ResourceAuthorizationDrawerRef"
369+
v-if="apiType === 'workspace'"
370+
/>
261371
<ToolStoreDescDrawer ref="toolStoreDescDrawerRef" />
262372
</template>
263373

@@ -284,8 +394,8 @@ import useStore from '@/stores'
284394
import { t } from '@/locales'
285395
import { i18n_name } from '@/utils/common'
286396
import ToolStoreApi from '@/api/tool/store.ts'
287-
import ToolStoreDescDrawer from "@/views/tool/component/ToolStoreDescDrawer.vue";
288-
import bus from "@/bus"
397+
import ToolStoreDescDrawer from '@/views/tool/component/ToolStoreDescDrawer.vue'
398+
import bus from '@/bus'
289399
const route = useRoute()
290400
const { folder, user, tool } = useStore()
291401
onBeforeRouteLeave((to, from) => {
@@ -387,9 +497,11 @@ function openCreateDialog(data?: any) {
387497
// 有版本号的展示readme，是商店更新过来的
388498
if (data?.version) {
389499
let readMe = ''
390-
storeTools.value.filter((item) => item.id === data.template_id).forEach((item) => {
391-
readMe = item.readMe
392-
})
500+
storeTools.value
501+
.filter((item) => item.id === data.template_id)
502+
.forEach((item) => {
503+
readMe = item.readMe
504+
})
393505
bus.emit('select_node', data.folder_id)
394506
toolStoreDescDrawerRef.value?.open(readMe, data)
395507
return
@@ -416,7 +528,6 @@ function openCreateDialog(data?: any) {
416528
if (data) {
417529
bus.emit('select_node', data.folder_id)
418530
}
419-
420531
}
421532
422533
function openCreateMcpDialog(data?: any) {
@@ -544,7 +655,7 @@ function deleteTool(row: any) {
544655
MsgSuccess(t('common.deleteSuccess'))
545656
})
546657
})
547-
.catch(() => { })
658+
.catch(() => {})
548659
}
549660
550661
function configInitParams(item: any) {
@@ -625,7 +736,7 @@ function updateStoreTool(item: any) {
625736
getList()
626737
})
627738
})
628-
.catch(() => { })
739+
.catch(() => {})
629740
}
630741
631742
const elUploadRef = ref()

0 commit comments

Comments
 (0)