feat: resource model

ui/src/api/system-resource-management/knowledge.ts

@@ -2,7 +2,6 @@ import { Result } from '@/request/Result'
 import { get, post, del, put, exportFile, exportExcel } from '@/request/index'
 import { type Ref } from 'vue'
 import type { pageRequest } from '@/api/type/common'
-import type { knowledgeData } from '@/api/type/knowledge'
 
 const prefix = '/system/resource/knowledge'
 

ui/src/api/system-resource-management/model.ts

@@ -7,6 +7,7 @@ import type {
   CreateModelRequest,
   EditModelRequest,
 } from '@/api/type/model'
+import type { pageRequest } from '@/api/type/common'
 import type { FormField } from '@/components/dynamics-form/type'
 
 const prefix = '/system/resource'
@@ -15,11 +16,12 @@ const prefix = '/system/resource'
  * 获得模型列表
  * @params 参数 name, model_type, model_name
  */
-const getModelList: (
+const getModelListPage: (
+  page: pageRequest,
   data?: ListModelRequest,
   loading?: Ref<boolean>,
-) => Promise<Result<Array<Model>>> = (data, loading) => {
-  return get(`${prefix}/model`, data, loading)
+) => Promise<Result<Array<Model>>> = (page, data, loading) => {
+  return get(`${prefix}/model/${page.current_page}/${page.page_size}`, data, loading)
 }
 
 /**
@@ -142,7 +144,7 @@ const deleteModel: (model_id: string, loading?: Ref<boolean>) => Promise<Result<
   return del(`${prefix}/model/${model_id}`, undefined, {}, loading)
 }
 export default {
-  getModelList,
+  getModelListPage,
   createModel,
   updateModel,
   deleteModel,

ui/src/router/modules/system.ts

@@ -113,17 +113,17 @@ const systemRouter = {
           },
           component: () => import('@/views/system-resource-management/ToolResourceIndex.vue'),
         },
-        // {
-        //   path: '/system/resource-management/model',
-        //   name: 'ModelResourceIndex',
-        //   meta: {
-        //     title: 'views.model.title',
-        //     activeMenu: '/system',
-        //     parentPath: '/system',
-        //     parentName: 'system',
-        //   },
-        //   component: () => import('@/views/system-resource-management/ModelResourceIndex.vue'),
-        // },
+        {
+          path: '/system/resource-management/model',
+          name: 'ModelResourceIndex',
+          meta: {
+            title: 'views.model.title',
+            activeMenu: '/system',
+            parentPath: '/system',
+            parentName: 'system',
+          },
+          component: () => import('@/views/system-resource-management/ModelResourceIndex.vue'),
+        },
       ],
     },
     {

ui/src/styles/component.scss

@@ -2,6 +2,7 @@
 .complex-search {
   border: 1px solid var(--el-border-color);
   border-radius: var(--el-border-radius-base);
+  width: 350px;
   .el-select__wrapper {
     box-shadow: none !important;
     border-radius: var(--el-border-radius-base) 0 0 var(--el-border-radius-base);

ui/src/views/model/component/ModelCard.vue

@@ -38,8 +38,7 @@
           >{{ $t('views.model.modelForm.model_type.label') }}
         </el-text>
         <span class="ellipsis ml-16">
-          {{ $t(modelType[model.model_type as keyof typeof modelType]) }}</span
-        >
+          {{ $t(modelType[model.model_type as keyof typeof modelType]) }}</span>
       </li>
       <li class="flex">
         <el-text type="info" class="color-secondary"

ui/src/views/model/index.vue

@@ -115,7 +115,6 @@
 
 <script lang="ts" setup>
 import { onMounted, ref, computed } from 'vue'
-import ProviderApi from '@/api/model/provider'
 import type { Provider, Model } from '@/api/type/model'
 import ModelCard from '@/views/model/component/ModelCard.vue'
 import ProviderComponent from '@/views/model/component/Provider.vue'
@@ -123,13 +122,13 @@ import { splitArray } from '@/utils/common'
 import { modelTypeList, allObj } from '@/views/model/component/data'
 import CreateModelDialog from '@/views/model/component/CreateModelDialog.vue'
 import SelectProviderDialog from '@/views/model/component/SelectProviderDialog.vue'
-import { t } from '@/locales'
 import { loadSharedApi } from '@/utils/dynamics-api/shared-api'
+import useStore from '@/stores'
 import { useRoute } from 'vue-router'
 import permissionMap from '@/permission'
 
 const route = useRoute()
-
+const { model } = useStore()
 const apiType = computed(() => {
   if (route.path.includes('shared')) {
     return 'systemShare'
@@ -217,7 +216,7 @@ const search_type_change = () => {
 }
 
 onMounted(() => {
-  ProviderApi.getProvider(loading).then((ok) => {
+  model.asyncGetProvider(loading).then((ok: any) => {
     active_provider.value = allObj
     provider_list.value = [allObj, ...ok.data]
     list_model()

ui/src/views/system-resource-management/KnowledgeResourceIndex.vue

@@ -47,23 +47,12 @@
       >
         <!-- <el-table-column type="selection" width="55" /> -->
         <el-table-column width="220" :label="$t('common.name')">
-          <template #default="scope">
-            <div class="table-name flex align-center">
-              <el-icon size="24" class="mr-8">
-                <el-avatar
-                  v-if="isAppIcon(scope.row?.icon)"
-                  shape="square"
-                  :size="24"
-                  style="background: none"
-                  class="mr-8"
-                >
-                  <img :src="scope.row?.icon" alt="" />
-                </el-avatar>
-                <el-avatar v-else class="avatar-green" shape="square" :size="24">
-                  <img src="@/assets/node/icon_tool.svg" style="width: 58%" alt="" />
-                </el-avatar>
-              </el-icon>
-              {{ scope.row.name }}
+          <template #default="{ row }">
+            <div class="flex align-center">
+              <KnowledgeIcon :type="row.type" />
+              <span class="ml-8">
+                {{ row.name }}
+              </span>
             </div>
           </template>
         </el-table-column>

ui/src/views/system-resource-management/ModelResourceIndex.vue

@@ -22,7 +22,7 @@
           <el-input
             v-if="search_type === 'name'"
             v-model="model_search_form.name"
-            @change="list_model"
+            @change="getList"
             :placeholder="$t('common.searchBar.placeholder')"
             style="width: 220px"
             clearable
@@ -30,7 +30,7 @@
           <el-select
             v-else-if="search_type === 'create_user'"
             v-model="model_search_form.create_user"
-            @change="list_model"
+            @change="getList"
             clearable
             style="width: 220px"
           >
@@ -40,7 +40,7 @@
             v-else-if="search_type === 'model_type'"
             v-model="model_search_form.model_type"
             clearable
-            @change="list_model"
+            @change="getList"
             style="width: 220px"
           >
             <template v-for="item in modelTypeList" :key="item.value">
@@ -51,47 +51,49 @@
       </div>
 
       <app-table
-        :data="model_list"
+        :data="modelList"
         :pagination-config="paginationConfig"
+        @sizeChange="getList"
+        @changePage="getList"
       >
         <!-- <el-table-column type="selection" width="55" /> -->
         <el-table-column width="220" :label="$t('common.name')">
-          <template #default="scope">
-            <div class="table-name flex align-center">
-              <el-icon size="24" class="mr-8">
-                <el-avatar
-                  v-if="isAppIcon(scope.row?.icon)"
-                  shape="square"
-                  :size="24"
-                  style="background: none"
-                  class="mr-8"
-                >
-                  <img :src="scope.row?.icon" alt="" />
-                </el-avatar>
-                <el-avatar v-else class="avatar-green" shape="square" :size="24">
-                  <img src="@/assets/node/icon_tool.svg" style="width: 58%" alt="" />
-                </el-avatar>
-              </el-icon>
-              {{ scope.row.name }}
-            </div>
+          <template #default="{ row }">
+            {{ row.name }}
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="provider"
+          :label="$t('views.system.resource_management.type')"
+          show-overflow-tooltip
+          width="150"
+        >
+          <template #default="{ row }">
+            <el-space :size="8">
+              <span
+                style="width: 24px; height: 24px; display: inline-block"
+                :innerHTML="getRowProvider(row)?.icon"
+              >
+              </span>
+              <span> {{ getRowProvider(row)?.name }}</span>
+            </el-space>
+          </template>
+        </el-table-column>
+        <el-table-column width="120" :label="$t('views.model.modelForm.model_type.label')">
+          <template #default="{ row }">
+            {{ $t(modelType[row.model_type as keyof typeof modelType]) }}
+          </template>
+        </el-table-column>
+        <el-table-column
+          width="220"
+          :label="$t('views.model.modelForm.base_model.label')"
+          show-overflow-tooltip
+        >
+          <template #default="{ row }">
+            {{ row.model_name }}
           </template>
         </el-table-column>
 
-        <el-table-column prop="tool_type" :label="$t('views.system.resource_management.type')">
-          <template #default="scope">
-            {{ $t(ToolType[scope.row.tool_type as keyof typeof ToolType]) }}
-          </template>
-        </el-table-column>
-        <el-table-column :label="$t('common.status.label')" width="120">
-          <template #default="scope">
-            <div class="flex align-center">
-              <AppIcon
-                :iconName="scope.row.is_active ? 'app-close_colorful' : 'app-succeed'"
-              ></AppIcon>
-              {{ $t(scope.row.is_active ? 'views.tool.enabled' : 'common.status.disable') }}
-            </div>
-          </template>
-        </el-table-column>
         <el-table-column
           v-if="user.isEE()"
           width="150"
@@ -163,19 +165,18 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, ref, reactive, computed } from 'vue'
+import { onBeforeMount, onMounted, ref, reactive, nextTick, computed } from 'vue'
 import { cloneDeep, get } from 'lodash'
 import type { Provider, Model } from '@/api/type/model'
 import ModelResourceApi from '@/api/system-resource-management/model'
-import { modelTypeList, allObj } from '@/views/model/component/data'
+import { modelTypeList } from '@/views/model/component/data'
+import { modelType } from '@/enums/model'
 import { t } from '@/locales'
-import { isAppIcon } from '@/utils/common'
-import { ToolType } from '@/enums/tool'
 import useStore from '@/stores'
 import WorkspaceApi from '@/api/workspace/workspace.ts'
 import { datetimeFormat } from '@/utils/time'
 
-const { user } = useStore()
+const { user, model } = useStore()
 
 const search_type = ref('name')
 const model_search_form = ref<{
@@ -190,8 +191,9 @@ const model_search_form = ref<{
 
 const loading = ref(false)
 const changeStateloading = ref(false)
-const model_list = ref<Array<Model>>([])
+const modelList = ref<Array<Model>>([])
 const user_options = ref<any[]>([])
+const provider_list = ref<Array<Provider>>([])
 
 const paginationConfig = reactive({
   current_page: 1,
@@ -202,11 +204,17 @@ const paginationConfig = reactive({
 const workspaceOptions = ref<any[]>([])
 const workspaceVisible = ref(false)
 const workspaceArr = ref<any[]>([])
+
+const getRowProvider = computed(() => {
+  return (row: any) => {
+    return provider_list.value.find((p) => p.provider === row.provider)
+  }
+})
 function filterWorkspaceChange(val: string) {
   if (val === 'clear') {
     workspaceArr.value = []
   }
-  list_model()
+  getList()
   workspaceVisible.value = false
 }
 async function getWorkspaceList() {
@@ -222,19 +230,24 @@ const search_type_change = () => {
   model_search_form.value = { name: '', create_user: '', model_type: '' }
 }
 
-const list_model = () => {
-  ModelResourceApi.getModelList({ ...model_search_form.value }, loading).then((ok: any) => {
-    model_list.value = ok.data
-    const v = model_list.value.map((m) => ({ id: m.user_id, username: m.username }))
-    if (user_options.value.length === 0) {
-      user_options.value = Array.from(new Map(v.map((item) => [item.id, item])).values())
-    }
+function getList() {
+  ModelResourceApi.getModelListPage(paginationConfig, model_search_form.value, loading).then(
+    (res: any) => {
+      paginationConfig.total = res.data?.total
+      modelList.value = res.data?.records
+    },
+  )
+}
+function getProvider() {
+  model.asyncGetProvider(loading).then((res: any) => {
+    provider_list.value = res?.data
+    getList()
   })
 }
 
 onMounted(() => {
   getWorkspaceList()
-  // list_model()
+  getProvider()
 })
 </script>
 

ui/src/views/system-resource-management/ToolResourceIndex.vue

@@ -221,6 +221,5 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
-.resource-manage_tool {
-}
+
 </style>