From e50b5cc05184d0d20e19f6587c155147e5d3ad04 Mon Sep 17 00:00:00 2001 From: wangdan-fit2cloud Date: Thu, 15 May 2025 18:21:38 +0800 Subject: [PATCH] feat: tool --- ui/src/api/tool/tool.ts | 31 ++ ui/src/api/type/tool.ts | 13 + ui/src/components/app-icon/index.ts | 22 +- ui/src/components/card-box/index.vue | 34 +- .../dynamics-form/items/radio/RadioRow.vue | 2 +- .../items/table/TableCheckbox.vue | 2 +- .../dynamics-form/items/table/TableRadio.vue | 2 +- ui/src/locales/lang/en-US/common.ts | 8 +- ui/src/locales/lang/zh-CN/common.ts | 8 +- ui/src/locales/lang/zh-Hant/common.ts | 8 +- ui/src/styles/app.scss | 3 + ui/src/styles/element-plus.scss | 8 +- ui/src/views/model/component/ModelCard.vue | 86 ++- ui/src/views/model/component/Provider.vue | 2 +- .../component/AddInternalFunctionDialog.vue | 88 +++ .../views/tool/component/EditAvatarDialog.vue | 127 +++++ .../views/tool/component/FieldFormDialog.vue | 129 +++++ .../tool/component/FunctionDebugDrawer.vue | 184 +++++++ .../tool/component/FunctionFormDrawer.vue | 518 ++++++++++++++++++ .../views/tool/component/InitParamDrawer.vue | 94 ++++ .../tool/component/InternalDescDrawer.vue | 100 ++++ .../views/tool/component/PermissionDialog.vue | 106 ++++ ui/src/views/tool/index.vue | 169 +++++- 23 files changed, 1659 insertions(+), 85 deletions(-) create mode 100644 ui/src/api/type/tool.ts create mode 100644 ui/src/views/tool/component/AddInternalFunctionDialog.vue create mode 100644 ui/src/views/tool/component/EditAvatarDialog.vue create mode 100644 ui/src/views/tool/component/FieldFormDialog.vue create mode 100644 ui/src/views/tool/component/FunctionDebugDrawer.vue create mode 100644 ui/src/views/tool/component/FunctionFormDrawer.vue create mode 100644 ui/src/views/tool/component/InitParamDrawer.vue create mode 100644 ui/src/views/tool/component/InternalDescDrawer.vue create mode 100644 ui/src/views/tool/component/PermissionDialog.vue diff --git a/ui/src/api/tool/tool.ts b/ui/src/api/tool/tool.ts index f8bbdf7dc..2d5d3b64a 100644 --- a/ui/src/api/tool/tool.ts +++ b/ui/src/api/tool/tool.ts @@ -2,6 +2,7 @@ import { Result } from '@/request/Result' import { get, post, del, put } from '@/request/index' import { type Ref } from 'vue' import type { pageRequest } from '@/api/type/common' +import type { toolData } from '@/api/type/tool' const prefix = '/workspace' /** @@ -38,7 +39,37 @@ const getToolList: ( ) } +/** + * 修改工具 + * @param 参数 + + */ +const putToolLib: ( + wordspace_id: string, + tool_id: string, + data: toolData, + loading?: Ref, +) => Promise> = (wordspace_id, tool_id, data, loading) => { + return put(`${prefix}/${wordspace_id}/tool/${tool_id}`, data, undefined, loading) +} + +/** + * 获取工具详情 + * @param tool_id 工具id + * @param loading 加载器 + * @returns 函数详情 + */ +const getToolById: ( + wordspace_id: string, + tool_id: String, + loading?: Ref, +) => Promise> = (wordspace_id, function_lib_id, loading) => { + return get(`${prefix}/${wordspace_id}/tool/${function_lib_id}`, undefined, loading) +} + export default { getToolByFolder, getToolList, + putToolLib, + getToolById } diff --git a/ui/src/api/type/tool.ts b/ui/src/api/type/tool.ts new file mode 100644 index 000000000..85b77a827 --- /dev/null +++ b/ui/src/api/type/tool.ts @@ -0,0 +1,13 @@ +interface toolData { + id?: String + name?: String + icon?: String + desc?: String + code?: String + input_field_list?: Array + init_field_list?: Array + is_active?: Boolean + folder_id?: String +} + +export type { toolData } diff --git a/ui/src/components/app-icon/index.ts b/ui/src/components/app-icon/index.ts index 65f578f19..bb6d0d9ce 100644 --- a/ui/src/components/app-icon/index.ts +++ b/ui/src/components/app-icon/index.ts @@ -117,7 +117,27 @@ export const iconMap: any = { ]) }, }, - + 'app-disabled': { + iconReader: () => { + return h('i', [ + h( + 'svg', + { + style: { height: '100%', width: '100%' }, + viewBox: '0 0 1024 1024', + version: '1.1', + xmlns: 'http://www.w3.org/2000/svg', + }, + [ + h('path', { + d: 'M512 21.333333C241.024 21.333333 21.333333 241.024 21.333333 512S241.024 1002.666667 512 1002.666667 1002.666667 782.976 1002.666667 512 782.976 21.333333 512 21.333333z m297.685333 697.856L304.810667 214.314667a362.666667 362.666667 0 0 1 504.874666 504.874666zM149.333333 512c0-77.056 24.021333-148.48 64.981334-207.189333l504.874666 504.874666A362.666667 362.666667 0 0 1 149.333333 512z', + fill: 'currentColor', + }), + ], + ), + ]) + }, + }, // 动态加载的图标 ...dynamicIcons, } diff --git a/ui/src/components/card-box/index.vue b/ui/src/components/card-box/index.vue index 76672c1a1..abf368214 100644 --- a/ui/src/components/card-box/index.vue +++ b/ui/src/components/card-box/index.vue @@ -2,12 +2,14 @@
-
- - - - - +
+
+ + + + + +
@@ -21,16 +23,19 @@
-
+
{{ description }}
-
- -
-
- + +
+
+ +
+
+ +
@@ -80,11 +85,12 @@ function subHoveredEnter() { min-width: var(--card-min-width); border-radius: 8px; .card-header { - margin-top: -10px; + margin-top: -5px; } .description { line-height: 22px; font-weight: 400; + min-height: 70px; .content { display: -webkit-box; height: var(--app-card-box-description-height, 40px); @@ -96,7 +102,7 @@ function subHoveredEnter() { .card-footer { position: absolute; - bottom: 4px; + bottom: 8px; left: 0; min-height: 30px; font-weight: 400; diff --git a/ui/src/components/dynamics-form/items/radio/RadioRow.vue b/ui/src/components/dynamics-form/items/radio/RadioRow.vue index 007fab18c..f71453d6c 100644 --- a/ui/src/components/dynamics-form/items/radio/RadioRow.vue +++ b/ui/src/components/dynamics-form/items/radio/RadioRow.vue @@ -55,7 +55,7 @@ const option_list = computed(() => { border-radius: 4px; font-weight: 400; font-size: 14px; - color: #1f2329; + color: var(--el-text-color-primary); padding: 3px 4px; box-sizing: border-box; white-space: nowrap; diff --git a/ui/src/components/dynamics-form/items/table/TableCheckbox.vue b/ui/src/components/dynamics-form/items/table/TableCheckbox.vue index 8285689f1..d299a3e3b 100644 --- a/ui/src/components/dynamics-form/items/table/TableCheckbox.vue +++ b/ui/src/components/dynamics-form/items/table/TableCheckbox.vue @@ -193,7 +193,7 @@ const activeText = computed(() => { justify-content: space-between; margin-bottom: 16px; .title { - color: #1f2329; + color: var(--el-text-color-primary); font-weight: 400; font-size: 14px; line-height: 22px; diff --git a/ui/src/components/dynamics-form/items/table/TableRadio.vue b/ui/src/components/dynamics-form/items/table/TableRadio.vue index 1bc055b3b..df1d1ae76 100644 --- a/ui/src/components/dynamics-form/items/table/TableRadio.vue +++ b/ui/src/components/dynamics-form/items/table/TableRadio.vue @@ -181,7 +181,7 @@ const activeText = computed(() => { justify-content: space-between; margin-bottom: 16px; .title { - color: #1f2329; + color: var(--el-text-color-primary); font-weight: 400; font-size: 14px; line-height: 22px; diff --git a/ui/src/locales/lang/en-US/common.ts b/ui/src/locales/lang/en-US/common.ts index b00021ee0..0da8035d6 100644 --- a/ui/src/locales/lang/en-US/common.ts +++ b/ui/src/locales/lang/en-US/common.ts @@ -44,12 +44,14 @@ export default { document: 'Documents', image: 'Image', audio: 'Audio', - video: 'Video' + video: 'Video', }, status: { label: 'Status', + enabled: 'Enabled', + disabled: 'Disabled', enableSuccess: 'Successful', - disableSuccess: 'Successful' + disableSuccess: 'Successful', }, param: { outputParam: 'Output Parameters', @@ -60,5 +62,5 @@ export default { inputPlaceholder: 'Please input', title: 'Title', content: 'Content', - rename: 'Rename' + rename: 'Rename', } diff --git a/ui/src/locales/lang/zh-CN/common.ts b/ui/src/locales/lang/zh-CN/common.ts index db1e7e731..9e432bb5a 100644 --- a/ui/src/locales/lang/zh-CN/common.ts +++ b/ui/src/locales/lang/zh-CN/common.ts @@ -52,8 +52,10 @@ export default { }, status: { label: '状态', + enabled: '已启用', + disabled: '已禁用', enableSuccess: '启用成功', - disableSuccess: '禁用成功' + disableSuccess: '禁用成功', }, inputPlaceholder: '请输入', title: '标题', @@ -61,7 +63,7 @@ export default { param: { outputParam: '输出参数', inputParam: '输入参数', - initParam: '启动参数' + initParam: '启动参数', }, - rename: '重命名' + rename: '重命名', } diff --git a/ui/src/locales/lang/zh-Hant/common.ts b/ui/src/locales/lang/zh-Hant/common.ts index 5775f5813..e68e94858 100644 --- a/ui/src/locales/lang/zh-Hant/common.ts +++ b/ui/src/locales/lang/zh-Hant/common.ts @@ -44,12 +44,14 @@ export default { document: '文檔', image: '圖片', audio: '音頻', - video: '視頻' + video: '視頻', }, status: { label: '狀態', + enabled: '已啟用', + disabled: '已停用', enableSuccess: '啟用成功', - disableSuccess: '停用成功' + disableSuccess: '停用成功', }, inputPlaceholder: '請輸入', title: '標題', @@ -59,5 +61,5 @@ export default { inputParam: '輸入參數', initParam: '啟動參數', }, - rename: '重命名' + rename: '重命名', } diff --git a/ui/src/styles/app.scss b/ui/src/styles/app.scss index 9647a5e5a..4118c36ca 100644 --- a/ui/src/styles/app.scss +++ b/ui/src/styles/app.scss @@ -386,6 +386,9 @@ h5 { .color-secondary { color: var(--app-text-color-secondary); } +.color-success { + color: var(--el-color-success); +} .avatar-purple { background: #7f3bf5; } diff --git a/ui/src/styles/element-plus.scss b/ui/src/styles/element-plus.scss index 30aae5095..1f37b696c 100644 --- a/ui/src/styles/element-plus.scss +++ b/ui/src/styles/element-plus.scss @@ -6,7 +6,6 @@ $primary-color: #3370ff; // --el-menu-item-height: 45px; // --el-box-shadow-light: 0px 2px 4px 0px rgba(31, 35, 41, 0.12); // --el-border-color: #dee0e3; - // --el-text-color-regular: #1f2329; // --el-color-info: #8f959e !important; // --el-disabled-bg-color: #eff0f1 !important; @@ -79,19 +78,20 @@ $primary-color: #3370ff; // dropdown .el-dropdown { - color: var(--app-text-color); + color: var(--el-text-color-primary); } .el-dropdown-menu__item { - color: var(--app-text-color); + color: var(--el-text-color-primary); font-weight: 400; padding: 5px 11px; + min-width: 80px; i { margin-right: 8px; } &:not(.is-disabled):focus, &:not(.is-active):focus { background-color: var(--app-text-color-light-1); - color: var(--app-text-color); + color: var(--el-text-color-primary); } &.is-active, &.is-active:hover { diff --git a/ui/src/views/model/component/ModelCard.vue b/ui/src/views/model/component/ModelCard.vue index c30787796..5c02c1a4a 100644 --- a/ui/src/views/model/component/ModelCard.vue +++ b/ui/src/views/model/component/ModelCard.vue @@ -1,7 +1,7 @@
- + + + @@ -71,6 +160,7 @@
+ @@ -78,11 +168,14 @@ import { onMounted, ref, reactive, computed } from 'vue' import ToolApi from '@/api/tool/tool' import useStore from '@/stores' -import { numberFormat } from '@/utils/common' +import { MsgConfirm } from '@/utils/message' +import InitParamDrawer from '@/views/tool/component/InitParamDrawer.vue' import { t } from '@/locales' const { folder } = useStore() +const InitParamDrawerRef = ref() + const search_type = ref('name') const search_form = ref<{ name: string @@ -94,6 +187,7 @@ const search_form = ref<{ const user_options = ref([]) const loading = ref(false) +const changeStateloading = ref(false) const paginationConfig = reactive({ current_page: 1, page_size: 30, @@ -102,6 +196,7 @@ const paginationConfig = reactive({ const folderList = ref([]) const toolList = ref([]) +const toolFolderList = ref([]) const currentFolder = ref({}) const search_type_change = () => { @@ -114,8 +209,9 @@ function getList() { tool_type: 'CUSTOM', } ToolApi.getToolList('default', paginationConfig, params, loading).then((res) => { - paginationConfig.total = res.data.total - toolList.value = [...toolList.value, ...res.data.records] + toolFolderList.value = res.data?.folders + paginationConfig.total = res.data?.tools.total + toolList.value = [...toolList.value, ...res.data?.tools.records] }) } @@ -128,6 +224,61 @@ function getFolder() { }) } +async function changeState(row: any) { + // if (!bool) { + // MsgConfirm( + // `${t('views.functionLib.disabled.confirmTitle')}${row.name} ?`, + // t('views.functionLib.disabled.confirmMessage'), + // { + // confirmButtonText: t('views.functionLib.setting.disabled'), + // confirmButtonClass: 'danger', + // }, + // ) + // .then(() => { + // const obj = { + // is_active: bool, + // } + // ToolApi.putToolLib('default', row.id, obj, changeStateloading).then((res) => {}) + // }) + // .catch(() => { + // row.is_active = true + // }) + // } else { + // const res = await ToolApi.getToolById('default', row.id, changeStateloading) + // if ( + // !res.data.init_params && + // res.data.init_field_list && + // res.data.init_field_list.length > 0 && + // res.data.init_field_list.filter((item: any) => item.default_value && item.show_default_value) + // .length !== res.data.init_field_list.length + // ) { + // row.is_active = false + // InitParamDrawerRef.value.open(res.data, bool) + // return + // } + // const obj = { + // is_active: bool, + // } + // ToolApi.putToolLib('default', row.id, obj, changeStateloading).then((res) => {}) + // } +} + +function refresh(data: any) { + if (data) { + const index = toolList.value.findIndex((v) => v.id === data.id) + // if (user.userInfo && data.user_id === user.userInfo.id) { + // data.username = user.userInfo.username + // } else { + // data.username = userOptions.value.find((v) => v.value === data.user_id)?.label + // } + toolList.value.splice(index, 1, data) + } + paginationConfig.total = 0 + paginationConfig.current_page = 1 + toolList.value = [] + getList() +} + function folderClickHandel(row: any) { // currentFolder.value = row // toolList.value = []