15308555518/ MaxKB
1
0
Fork 0
mirror of https://github.com/1Panel-dev/MaxKB.git synced 2025-12-26 01:33:05 +00:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

perf: Optimize tool store style

This commit is contained in:
wangdan-fit2cloud 2025-11-17 17:54:27 +08:00
parent 7ec4e7cefa
commit f09b68d301
2 changed files with 181 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

247
ui/src/views/tool/component/ToolListContainer.vue
View File

@ -6,21 +6,44 @@
<template #search>
<div class="flex">
<div class="flex-between complex-search">
<el-select class="complex-search__left" v-model="search_type" style="width: 120px"
@change="search_type_change">
<el-select
class="complex-search__left"
v-model="search_type"
style="width: 120px"
@change="search_type_change"
>
<el-option :label="$t('common.creator')" value="create_user" />
<el-option :label="$t('views.tool.form.toolName.label')" value="name" />
</el-select>
<el-input v-if="search_type === 'name'" v-model="search_form.name" @change="searchHandle"
:placeholder="$t('common.searchBar.placeholder')" style="width: 220px" clearable />
<el-select v-else-if="search_type === 'create_user'" v-model="search_form.create_user" @change="searchHandle"
filterable clearable style="width: 220px">
<el-input
v-if="search_type === 'name'"
v-model="search_form.name"
@change="searchHandle"
:placeholder="$t('common.searchBar.placeholder')"
style="width: 220px"
clearable
/>
<el-select
v-else-if="search_type === 'create_user'"
v-model="search_form.create_user"
@change="searchHandle"
filterable
clearable
style="width: 220px"
>
<el-option v-for="u in user_options" :key="u.id" :value="u.id" :label="u.nick_name" />
</el-select>
</div>
<el-dropdown trigger="click" v-if="!isShared && permissionPrecise.create()">
<el-button type="primary" class="ml-8">
<el-button
class="ml-8"
v-if="!isShared && permissionPrecise.create()"
@click="openToolStoreDialog()"
>
{{ $t('views.tool.toolStore.title') }}
</el-button>
<el-dropdown trigger="click">
<el-button type="primary" class="ml-8" v-if="!isShared && permissionPrecise.create()">
{{ $t('common.create') }}
<el-icon class="el-icon--right">
<arrow-down />
@ -48,9 +71,17 @@
</div>
</div>
</el-dropdown-item>
<el-upload ref="elUploadRef" :file-list="[]" action="#" multiple :auto-upload="false"
:show-file-list="false" :limit="1" :on-change="(file: any, fileList: any) => importTool(file)"
class="import-button">
<el-upload
ref="elUploadRef"
:file-list="[]"
action="#"
multiple
:auto-upload="false"
:show-file-list="false"
:limit="1"
:on-change="(file: any, fileList: any) => importTool(file)"
class="import-button"
>
<el-dropdown-item v-if="permissionPrecise.import()">
<div class="flex align-center w-full">
<el-avatar shape="square" :size="32" style="background: none">
@ -62,7 +93,7 @@
</div>
</el-dropdown-item>
</el-upload>
<el-dropdown-item @click="openToolStoreDialog()">
<!-- <el-dropdown-item @click="openToolStoreDialog()">
<div class="flex align-center">
<el-avatar shape="square" :size="32" style="background: none">
<img src="@/assets/icon_tool_shop.svg" alt="" />
@ -73,7 +104,7 @@
</div>
</div>
</div>
</el-dropdown-item>
</el-dropdown-item> -->
<el-dropdown-item @click="openCreateFolder" divided v-if="apiType === 'workspace'">
<div class="flex align-center">
<AppIcon iconName="app-folder" style="font-size: 32px"></AppIcon>
@ -91,16 +122,35 @@
</div>
</template>
<div v-loading.fullscreen.lock="paginationConfig.current_page === 1 && loading"
style="max-height: calc(100vh - 120px)">
<InfiniteScroll :size="tool.toolList.length" :total="paginationConfig.total"
:page_size="paginationConfig.page_size" v-model:current_page="paginationConfig.current_page" @load="getList"
:loading="loading">
<div
v-loading.fullscreen.lock="paginationConfig.current_page === 1 && loading"
style="max-height: calc(100vh - 120px)"
>
<InfiniteScroll
:size="tool.toolList.length"
:total="paginationConfig.total"
:page_size="paginationConfig.page_size"
v-model:current_page="paginationConfig.current_page"
@load="getList"
:loading="loading"
>
<el-row v-if="tool.toolList.length > 0" :gutter="15" class="w-full">
<template v-for="(item, index) in tool.toolList" :key="index">
<el-col v-if="item.resource_type === 'folder'" :xs="24" :sm="12" :md="12" :lg="8" :xl="6" class="mb-16">
<CardBox :title="item.name" :description="item.desc || $t('components.noDesc')" class="cursor"
@click="clickFolder(item)">
<el-col
v-if="item.resource_type === 'folder'"
:xs="24"
:sm="12"
:md="12"
:lg="8"
:xl="6"
class="mb-16"
>
<CardBox
:title="item.name"
:description="item.desc || $t('components.noDesc')"
class="cursor"
@click="clickFolder(item)"
>
<template #icon>
<el-avatar shape="square" :size="32" style="background: none">
<AppIcon iconName="app-folder" style="font-size: 32px"></AppIcon>
@ -114,10 +164,21 @@
</CardBox>
</el-col>
<el-col v-else :xs="24" :sm="12" :md="12" :lg="8" :xl="6" class="mb-16">
<CardBox :title="item.name" :description="item.desc" class="cursor" @click.stop="openCreateDialog(item)"
:disabled="permissionPrecise.edit(item.id)">
<CardBox
:title="item.name"
:description="item.desc"
class="cursor"
@click.stop="openCreateDialog(item)"
:disabled="permissionPrecise.edit(item.id)"
>
<template #icon>
<el-avatar v-if="item?.icon" shape="square" :size="32" style="background: none" class="mr-8">
<el-avatar
v-if="item?.icon"
shape="square"
:size="32"
style="background: none"
class="mr-8"
>
<img :src="resetUrl(item?.icon)" alt="" />
</el-avatar>
<ToolIcon v-else :size="32" :type="item?.tool_type" />
@ -140,9 +201,14 @@
{{ t('views.shared.title') }}
</el-tag>
<el-tooltip effect="dark" content="更新版本">
<el-button text @click.stop v-if="
showUpdateStoreTool(item) && !isShared && permissionPrecise.edit(item.id)
" @click="updateStoreTool(item)">
<el-button
text
@click.stop
v-if="
showUpdateStoreTool(item) && !isShared && permissionPrecise.edit(item.id)
"
@click="updateStoreTool(item)"
>
<el-icon v-if="hoverShow">
<Refresh />
</el-icon>
@ -169,8 +235,13 @@
</template>
<template #mouseEnter>
<div @click.stop v-if="!isShared && MoreFieldPermission(item.id)">
<el-switch v-model="item.is_active" :before-change="() => changeState(item)" size="small"
class="mr-4" v-if="permissionPrecise.switch(item.id)" />
<el-switch
v-model="item.is_active"
:before-change="() => changeState(item)"
size="small"
class="mr-4"
v-if="permissionPrecise.switch(item.id)"
/>
<el-divider direction="vertical" />
<el-dropdown trigger="click">
<el-button text @click.stop>
@ -178,58 +249,87 @@
</el-button>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item v-if="item.tool_type === 'MCP'" @click.stop="showMcpConfig(item)">
<el-dropdown-item
v-if="item.tool_type === 'MCP'"
@click.stop="showMcpConfig(item)"
>
<AppIcon iconName="app-operate-log" class="color-secondary"></AppIcon>
{{ $t('views.tool.mcpConfig') }}
</el-dropdown-item>
<el-dropdown-item v-if="item.template_id && permissionPrecise.edit(item.id)"
@click.stop="addInternalTool(item, true)">
<el-dropdown-item
v-if="item.template_id && permissionPrecise.edit(item.id)"
@click.stop="addInternalTool(item, true)"
>
<AppIcon iconName="app-edit" class="color-secondary"></AppIcon>
{{ $t('common.edit') }}
</el-dropdown-item>
<el-dropdown-item v-if="!item.template_id && permissionPrecise.edit(item.id)"
@click.stop="openCreateDialog(item)">
<el-dropdown-item
v-if="!item.template_id && permissionPrecise.edit(item.id)"
@click.stop="openCreateDialog(item)"
>
<AppIcon iconName="app-edit" class="color-secondary"></AppIcon>
{{ $t('common.edit') }}
</el-dropdown-item>
<el-dropdown-item v-if="
!item.template_id &&
permissionPrecise.copy(item.id) &&
item.tool_type !== 'MCP'
" @click.stop="copyTool(item)">
<el-dropdown-item
v-if="
!item.template_id &&
permissionPrecise.copy(item.id) &&
item.tool_type !== 'MCP'
"
@click.stop="copyTool(item)"
>
<AppIcon iconName="app-copy" class="color-secondary"></AppIcon>
{{ $t('common.copy') }}
</el-dropdown-item>
<el-dropdown-item v-if="
item.init_field_list?.length > 0 && permissionPrecise.edit(item.id)
" @click.stop="configInitParams(item)">
<el-dropdown-item
v-if="
item.init_field_list?.length > 0 && permissionPrecise.edit(item.id)
"
@click.stop="configInitParams(item)"
>
<AppIcon iconName="app-operation" class="color-secondary"></AppIcon>
{{ $t('common.param.initParam') }}
</el-dropdown-item>
<el-dropdown-item @click.stop="openAuthorization(item)"
v-if="apiType === 'workspace' && permissionPrecise.auth(item.id)">
<AppIcon iconName="app-resource-authorization" class="color-secondary"></AppIcon>
<el-dropdown-item
@click.stop="openAuthorization(item)"
v-if="apiType === 'workspace' && permissionPrecise.auth(item.id)"
>
<AppIcon
iconName="app-resource-authorization"
class="color-secondary"
></AppIcon>
{{ $t('views.system.resourceAuthorization.title') }}
</el-dropdown-item>
<el-dropdown-item @click.stop="openMoveToDialog(item)"
v-if="permissionPrecise.copy(item.id) && apiType === 'workspace'">
<el-dropdown-item
@click.stop="openMoveToDialog(item)"
v-if="permissionPrecise.copy(item.id) && apiType === 'workspace'"
>
<AppIcon iconName="app-migrate" class="color-secondary"></AppIcon>
{{ $t('common.moveTo') }}
</el-dropdown-item>
<el-dropdown-item v-if="isSystemShare" @click.stop="openAuthorizedWorkspaceDialog(item)">
<el-dropdown-item
v-if="isSystemShare"
@click.stop="openAuthorizedWorkspaceDialog(item)"
>
<AppIcon iconName="app-lock" class="color-secondary"></AppIcon>
{{ $t('views.shared.authorized_workspace') }}
</el-dropdown-item>
<el-dropdown-item v-if="
!item.template_id &&
permissionPrecise.export(item.id) &&
item.tool_type !== 'MCP'
" @click.stop="exportTool(item)">
<el-dropdown-item
v-if="
!item.template_id &&
permissionPrecise.export(item.id) &&
item.tool_type !== 'MCP'
"
@click.stop="exportTool(item)"
>
<AppIcon iconName="app-export" class="color-secondary"></AppIcon>
{{ $t('common.export') }}
</el-dropdown-item>
<el-dropdown-item v-if="permissionPrecise.delete(item.id)" divided
@click.stop="deleteTool(item)">
<el-dropdown-item
v-if="permissionPrecise.delete(item.id)"
divided
@click.stop="deleteTool(item)"
>
<AppIcon iconName="app-delete" class="color-secondary"></AppIcon>
{{ $t('common.delete') }}
</el-dropdown-item>
@ -253,11 +353,21 @@
<ToolStoreDialog ref="toolStoreDialogRef" :api-type="apiType" @refresh="refresh" />
<AddInternalToolDialog ref="AddInternalToolDialogRef" @refresh="confirmAddInternalTool" />
<McpToolConfigDialog ref="McpToolConfigDialogRef" @refresh="refresh" />
<AuthorizedWorkspace ref="AuthorizedWorkspaceDialogRef" v-if="isSystemShare"></AuthorizedWorkspace>
<MoveToDialog ref="MoveToDialogRef" :source="SourceTypeEnum.TOOL" @refresh="refreshToolList"
v-if="apiType === 'workspace'" />
<ResourceAuthorizationDrawer :type="SourceTypeEnum.TOOL" ref="ResourceAuthorizationDrawerRef"
v-if="apiType === 'workspace'" />
<AuthorizedWorkspace
ref="AuthorizedWorkspaceDialogRef"
v-if="isSystemShare"
></AuthorizedWorkspace>
<MoveToDialog
ref="MoveToDialogRef"
:source="SourceTypeEnum.TOOL"
@refresh="refreshToolList"
v-if="apiType === 'workspace'"
/>
<ResourceAuthorizationDrawer
:type="SourceTypeEnum.TOOL"
ref="ResourceAuthorizationDrawerRef"
v-if="apiType === 'workspace'"
/>
<ToolStoreDescDrawer ref="toolStoreDescDrawerRef" />
</template>
@ -284,8 +394,8 @@ import useStore from '@/stores'
import { t } from '@/locales'
import { i18n_name } from '@/utils/common'
import ToolStoreApi from '@/api/tool/store.ts'
import ToolStoreDescDrawer from "@/views/tool/component/ToolStoreDescDrawer.vue";
import bus from "@/bus"
import ToolStoreDescDrawer from '@/views/tool/component/ToolStoreDescDrawer.vue'
import bus from '@/bus'
const route = useRoute()
const { folder, user, tool } = useStore()
onBeforeRouteLeave((to, from) => {
@ -387,9 +497,11 @@ function openCreateDialog(data?: any) {
// 有版本号的展示readme，是商店更新过来的
if (data?.version) {
let readMe = ''
storeTools.value.filter((item) => item.id === data.template_id).forEach((item) => {
readMe = item.readMe
})
storeTools.value
.filter((item) => item.id === data.template_id)
.forEach((item) => {
readMe = item.readMe
})
bus.emit('select_node', data.folder_id)
toolStoreDescDrawerRef.value?.open(readMe, data)
return
@ -416,7 +528,6 @@ function openCreateDialog(data?: any) {
if (data) {
bus.emit('select_node', data.folder_id)
}
}
function openCreateMcpDialog(data?: any) {
@ -544,7 +655,7 @@ function deleteTool(row: any) {
MsgSuccess(t('common.deleteSuccess'))
})
})
.catch(() => { })
.catch(() => {})
}
function configInitParams(item: any) {
@ -625,7 +736,7 @@ function updateStoreTool(item: any) {
getList()
})
})
.catch(() => { })
.catch(() => {})
}
const elUploadRef = ref()

4
ui/src/views/tool/toolStore/ToolStoreDialog.vue
View File

@ -34,7 +34,7 @@
</div>
</template>
<LayoutContainer v-loading="loading">
<LayoutContainer v-loading="loading" :minLeftWidth="204">
<template #left>
<el-anchor
direction="vertical"
@ -62,7 +62,7 @@
{{ category.title }}
</h4>
<el-row :gutter="16">
<el-col v-for="tool in category.tools" :key="tool.id" :span="12" class="mb-16">
<el-col v-for="tool in category.tools" :key="tool.id" :span="8" class="mb-16">
<ToolCard
:tool="tool"
:addLoading="addLoading"