From 226cfc440f205d73858487af71b848baaf0ac05c Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Wed, 16 Oct 2024 17:08:11 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E6=A8=A1=E5=9E=8B?=
 =?UTF-8?q?=E8=AE=BE=E7=BD=AE=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/assets/icon_file-folder_colorful.svg   |   4 +
 ui/src/components/common-list/index.vue       |   7 +
 .../component/SelectProviderDialog.vue        |   2 +-
 ui/src/views/template/index.vue               | 139 +++++++++++++-----
 4 files changed, 111 insertions(+), 41 deletions(-)
 create mode 100644 ui/src/assets/icon_file-folder_colorful.svg

diff --git a/ui/src/assets/icon_file-folder_colorful.svg b/ui/src/assets/icon_file-folder_colorful.svg
new file mode 100644
index 000000000..7aa4703d7
--- /dev/null
+++ b/ui/src/assets/icon_file-folder_colorful.svg
@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.833374 3.33333C0.833374 2.8731 1.20647 2.5 1.66671 2.5H8.65168C8.96732 2.5 9.25587 2.67834 9.39703 2.96066L10 4.16667H18.3334C18.7936 4.16667 19.1667 4.53976 19.1667 5V16.6667C19.1667 17.1269 18.7936 17.5 18.3334 17.5H1.66671C1.20647 17.5 0.833374 17.1269 0.833374 16.6667V3.33333Z" fill="#FFA53D"/>
+<path d="M0.833374 5.00002C0.833374 4.53978 1.20647 4.16669 1.66671 4.16669H18.3334C18.7936 4.16669 19.1667 4.53978 19.1667 5.00002V16.6667C19.1667 17.1269 18.7936 17.5 18.3334 17.5H1.66671C1.20647 17.5 0.833374 17.1269 0.833374 16.6667V5.00002Z" fill="#FFC60A"/>
+</svg>
diff --git a/ui/src/components/common-list/index.vue b/ui/src/components/common-list/index.vue
index 5912efe33..2539ae0cf 100644
--- a/ui/src/components/common-list/index.vue
+++ b/ui/src/components/common-list/index.vue
@@ -59,6 +59,13 @@ function clickHandle(row: any, index: number) {
   current.value = row[props.valueKey]
   emit('click', row)
 }
+
+function clearCurrent() {
+  current.value = 0
+}
+defineExpose({
+  clearCurrent
+})
 </script>
 <style lang="scss" scoped>
 /* 通用 ui li样式 */
diff --git a/ui/src/views/template/component/SelectProviderDialog.vue b/ui/src/views/template/component/SelectProviderDialog.vue
index 65fb8b4fb..29fcb1a12 100644
--- a/ui/src/views/template/component/SelectProviderDialog.vue
+++ b/ui/src/views/template/component/SelectProviderDialog.vue
@@ -8,7 +8,7 @@
     :before-close="close"
     append-to-body
   >
-    <template #title>
+    <template #header>
       <div class="flex-between">
         <h4>选择供应商</h4>
         <el-dropdown>
diff --git a/ui/src/views/template/index.vue b/ui/src/views/template/index.vue
index 2ba326cc9..ddf75d511 100644
--- a/ui/src/views/template/index.vue
+++ b/ui/src/views/template/index.vue
@@ -4,25 +4,24 @@
       <div class="template-manage__left p-8 border-r">
         <h4 style="padding-bottom: 8px">供应商</h4>
         <div class="model-list-height-left">
-          <ul class="mb-8">
-            <li @click="clickListHandle(allObj as Provider)" class="cursor">
-              <div class="flex">
-                <AppIcon
-                  class="mr-8"
-                  style="height: 20px; width: 20px"
-                  :iconName="'app-all-menu-active'"
-                ></AppIcon>
-                <span>全部模型</span>
-              </div>
-            </li>
-          </ul>
+          <div
+            class="all-mode flex cursor"
+            @click="clickListHandle(allObj as Provider)"
+            :class="!active_provider?.provider ? 'all-mode-active' : ''"
+          >
+            <AppIcon
+              class="mr-8"
+              style="height: 20px; width: 20px"
+              :iconName="'app-all-menu-active'"
+            ></AppIcon>
+            <span>全部模型</span>
+          </div>
+
           <el-scrollbar>
-            <el-collapse>
+            <el-collapse class="template-collapse">
               <el-collapse-item title="在线模型" name="1">
                 <template #title>
-                  <el-icon class="mr-4">
-                    <Folder />
-                  </el-icon>
+                  <img src="@/assets/icon_file-folder_colorful.svg" class="mr-8" />
                   在线模型
                 </template>
                 <common-list
@@ -31,7 +30,7 @@
                   @click="clickListHandle"
                   value-key="provider"
                   default-active=""
-                  style="overflow-y: auto"
+                  ref="commonList1"
                 >
                   <template #default="{ row }">
                     <div class="flex">
@@ -48,9 +47,7 @@
               </el-collapse-item>
               <el-collapse-item title="私有模型" name="2">
                 <template #title>
-                  <el-icon class="mr-4">
-                    <Folder />
-                  </el-icon>
+                  <img src="@/assets/icon_file-folder_colorful.svg" class="mr-8" />
                   私有模型
                 </template>
                 <common-list
@@ -59,7 +56,7 @@
                   @click="clickListHandle"
                   value-key="provider"
                   default-active=""
-                  style="overflow-y: auto"
+                  ref="commonList2"
                 >
                   <template #default="{ row }">
                     <div class="flex">
@@ -84,7 +81,7 @@
           <div class="flex-between mt-16 mb-16">
             <el-button type="primary" @click="openCreateModel(active_provider)">添加模型</el-button>
             <div class="flex-between">
-              <el-select v-model="search_type" style="width: 200px" @change="search_type_change">
+              <el-select v-model="search_type" style="width: 120px" @change="search_type_change">
                 <el-option label="创建者" value="create_user" />
                 <el-option label="权限" value="permission_type" />
                 <el-option label="模型类型" value="model_type" />
@@ -96,23 +93,40 @@
                 @change="list_model"
                 placeholder="按名称搜索"
                 prefix-icon="Search"
-                style="max-width: 240px"
+                style="width: 220px"
                 clearable
               />
-              <el-select v-else-if="search_type === 'create_user'" v-model="model_search_form.create_user"
-                         @change="list_model"
-                         clearable>
-                <el-option v-for="u in user_options" :key="u.id" :value="u.id" :label="u.username" />
+              <el-select
+                v-else-if="search_type === 'create_user'"
+                v-model="model_search_form.create_user"
+                @change="list_model"
+                clearable
+                style="width: 220px"
+              >
+                <el-option
+                  v-for="u in user_options"
+                  :key="u.id"
+                  :value="u.id"
+                  :label="u.username"
+                />
               </el-select>
-              <el-select v-else-if="search_type === 'permission_type'" v-model="model_search_form.permission_type"
-                         clearable
-                         @change="list_model">
+              <el-select
+                v-else-if="search_type === 'permission_type'"
+                v-model="model_search_form.permission_type"
+                clearable
+                @change="list_model"
+                style="width: 220px"
+              >
                 <el-option label="公有" value="PUBLIC" />
                 <el-option label="私有" value="PRIVATE" />
               </el-select>
-              <el-select v-else-if="search_type === 'model_type'" v-model="model_search_form.model_type"
-                         clearable
-                         @change="list_model">
+              <el-select
+                v-else-if="search_type === 'model_type'"
+                v-model="model_search_form.model_type"
+                clearable
+                @change="list_model"
+                style="width: 220px"
+              >
                 <el-option label="大语言模型" value="LLM" />
                 <el-option label="向量模型" value="EMBEDDING" />
                 <el-option label="重排模型" value="RERANKER" />
@@ -126,7 +140,7 @@
           <el-scrollbar>
             <div class="p-24 pt-0">
               <el-row v-if="model_split_list.length > 0" :gutter="15">
-                <template v-for="row in model_split_list" :key="row.id">
+                <template v-for="(row, index) in model_split_list" :key="index">
                   <el-col
                     :xs="24"
                     :sm="24"
@@ -182,11 +196,18 @@ const allObj = {
   name: '全部模型'
 }
 
+const commonList1 = ref()
+const commonList2 = ref()
 const loading = ref<boolean>(false)
 
 const active_provider = ref<Provider>()
 const search_type = ref('name')
-const model_search_form = ref<{ name: string, create_user: string, permission_type: string, model_type: string }>({
+const model_search_form = ref<{
+  name: string
+  create_user: string
+  permission_type: string
+  model_type: string
+}>({
   name: '',
   create_user: '',
   permission_type: '',
@@ -216,6 +237,10 @@ const selectProviderRef = ref<InstanceType<typeof SelectProviderDialog>>()
 const clickListHandle = (item: Provider) => {
   active_provider.value = item
   list_model()
+  if (active_provider.value.provider === '') {
+    commonList1.value.clearCurrent()
+    commonList2.value.clearCurrent()
+  }
 }
 
 const openCreateModel = (provider?: Provider) => {
@@ -232,9 +257,7 @@ const list_model = () => {
     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()
-      )
+      user_options.value = Array.from(new Map(v.map((item) => [item.id, item])).values())
     }
   })
 }
@@ -243,13 +266,17 @@ const search_type_change = () => {
   model_search_form.value = { name: '', create_user: '', permission_type: '', model_type: '' }
 }
 
-
 onMounted(() => {
   ModelApi.getProvider(loading).then((ok) => {
     active_provider.value = allObj
     provider_list.value = [allObj, ...ok.data]
 
-    const local_provider = ['model_ollama_provider', 'model_local_provider', 'model_xinference_provider', 'model_vllm_provider']
+    const local_provider = [
+      'model_ollama_provider',
+      'model_local_provider',
+      'model_xinference_provider',
+      'model_vllm_provider'
+    ]
     ok.data.forEach((item) => {
       if (local_provider.indexOf(item.provider) > -1) {
         local_provider_list.value.push(item)
@@ -279,5 +306,37 @@ onMounted(() => {
   .model-list-height-left {
     height: calc(var(--create-dataset-height));
   }
+  .all-mode {
+    padding: 10px 16px;
+  }
+  .all-mode-active {
+    background: var(--el-color-primary-light-9);
+    border-radius: 4px;
+    color: var(--el-color-primary);
+    font-weight: 500;
+  }
+  .template-collapse {
+    border-top: none !important;
+    border-bottom: none !important;
+    :deep(.el-collapse-item__header) {
+      border-bottom: none !important;
+      padding: 10px 0 10px 16px;
+      font-size: 14px;
+      &:hover {
+        background: var(--app-text-color-light-1);
+      }
+    }
+    :deep(.el-collapse-item) {
+      margin-top: 2px;
+    }
+    :deep(.common-list) {
+      li {
+        padding-left: 30px !important;
+      }
+    }
+    :deep(.el-collapse-item__wrap) {
+      border-bottom: none !important;
+    }
+  }
 }
 </style>