From 35c1078e1f96f08860cc7810b9b6c7109020dc9d Mon Sep 17 00:00:00 2001
From: shaohuzhang1 <80892890+shaohuzhang1@users.noreply.github.com>
Date: Mon, 22 Apr 2024 12:02:25 +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=E7=9A=84=E6=B7=BB=E5=8A=A0/=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9=E6=A8=A1=E5=9E=8B=E7=9A=84=E6=8F=90=E7=A4=BA=20(#197)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../template/component/CreateModelDialog.vue  | 131 ++++++++++++------
 ui/src/views/template/component/EditModel.vue |  62 ++++-----
 2 files changed, 117 insertions(+), 76 deletions(-)

diff --git a/ui/src/views/template/component/CreateModelDialog.vue b/ui/src/views/template/component/CreateModelDialog.vue
index d0f1ad9e..3741c0d4 100644
--- a/ui/src/views/template/component/CreateModelDialog.vue
+++ b/ui/src/views/template/component/CreateModelDialog.vue
@@ -1,69 +1,112 @@
 <template>
-  <el-dialog v-model="dialogVisible" width="600px" :close-on-click-modal="false" :close-on-press-escape="false"
-             :destroy-on-close="true" :before-close="close">
+  <el-dialog
+    v-model="dialogVisible"
+    width="600px"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    :destroy-on-close="true"
+    :before-close="close"
+  >
     <template #header="{ close, titleId, titleClass }">
       <el-breadcrumb separator=">">
         <el-breadcrumb-item>
-          <span @click="toSelectProvider" class="select-provider">选择供应商</span></el-breadcrumb-item>
-        <el-breadcrumb-item><span class="active-breadcrumb">{{
+          <span @click="toSelectProvider" class="select-provider"
+            >选择供应商</span
+          ></el-breadcrumb-item
+        >
+        <el-breadcrumb-item
+          ><span class="active-breadcrumb">{{
             `添加 ${providerValue?.name}`
-          }}</span></el-breadcrumb-item>
+          }}</span></el-breadcrumb-item
+        >
       </el-breadcrumb>
     </template>
 
-    <DynamicsForm v-model="form_data" :render_data="model_form_field" :model="form_data" ref="dynamicsFormRef"
-                  label-position="top" require-asterisk-position="right" class="mb-24" label-width="auto">
+    <DynamicsForm
+      v-model="form_data"
+      :render_data="model_form_field"
+      :model="form_data"
+      ref="dynamicsFormRef"
+      label-position="top"
+      require-asterisk-position="right"
+      class="mb-24"
+      label-width="auto"
+    >
       <template #default>
         <el-form-item prop="name" :rules="base_form_data_rule.name">
           <template #label>
-            <span>模型名称</span>
-            <el-tooltip effect="light" placement="right">
-              <el-icon style="margin-left: 4px;">
-                <QuestionFilled />
-              </el-icon>
-              <template #content>
-                <p>MaxKB 中自定义的模型名称</p>
-              </template>
-            </el-tooltip>
+            <div class="flex align-center" style="display: inline-flex">
+              <div class="flex-between mr-4">
+                <span>模型名称 </span>
+              </div>
+              <el-tooltip effect="dark" placement="right">
+                <template #content>
+                  <p>MaxKB 中自定义的模型名称</p>
+                </template>
+                <AppIcon iconName="app-warning" class="app-warning-icon"></AppIcon>
+              </el-tooltip>
+            </div>
           </template>
-          <el-input v-model="base_form_data.name" maxlength="20" show-word-limit
-                    placeholder="请给基础模型设置一个名称" />
+          <el-input
+            v-model="base_form_data.name"
+            maxlength="20"
+            show-word-limit
+            placeholder="请给基础模型设置一个名称"
+          />
         </el-form-item>
         <el-form-item prop="model_type" :rules="base_form_data_rule.model_type">
           <template #label>
             <span>模型类型</span>
-            <el-tooltip effect="light" placement="right">
-              <el-icon style="margin-left: 4px;">
-                <QuestionFilled />
-              </el-icon>
-              <template #content>
-                <p>大语言模型</p>
-              </template>
-            </el-tooltip>
           </template>
-          <el-select v-loading="model_type_loading" @change="list_base_model($event)"
-                     v-model="base_form_data.model_type" class="w-full m-2" placeholder="请选择模型类型">
-            <el-option v-for="item in model_type_list" :key="item.value" :label="item.key"
-                       :value="item.value"></el-option>
+          <el-select
+            v-loading="model_type_loading"
+            @change="list_base_model($event)"
+            v-model="base_form_data.model_type"
+            class="w-full m-2"
+            placeholder="请选择模型类型"
+          >
+            <el-option
+              v-for="item in model_type_list"
+              :key="item.value"
+              :label="item.key"
+              :value="item.value"
+            ></el-option>
           </el-select>
         </el-form-item>
         <el-form-item prop="model_name" :rules="base_form_data_rule.model_name">
           <template #label>
-            <span>基础模型</span>
-            <el-tooltip effect="light" placement="right">
-              <el-icon style="margin-left: 4px;">
-                <QuestionFilled />
-              </el-icon>
-              <template #content>
-                <p>为供应商的 LLM 模型，支持自定义输入</p>
-                <p>下拉选项是 OpenAI 常用的一些大语言模型如：gpt-3.5-turbo-0613、gpt-3.5-turbo、gpt-4 等</p>
-              </template>
-            </el-tooltip>
+            <div class="flex align-center" style="display: inline-flex">
+              <div class="flex-between mr-4">
+                <span>基础模型 </span>
+              </div>
+              <el-tooltip effect="dark" placement="right">
+                <template #content>
+                  <p>为供应商的 LLM 模型，支持自定义输入</p>
+                  <p>
+                    下拉选项是 OpenAI
+                    常用的一些大语言模型如：gpt-3.5-turbo-0613、gpt-3.5-turbo、gpt-4 等
+                  </p>
+                </template>
+                <AppIcon iconName="app-warning" class="app-warning-icon"></AppIcon>
+              </el-tooltip>
+            </div>
           </template>
-          <el-select @change="getModelForm($event)" v-loading="base_model_loading" v-model="base_form_data.model_name"
-                     class="w-full m-2" placeholder="请选择基础模型" filterable allow-create default-first-option>
-            <el-option v-for="item in base_model_list" :key="item.name" :label="item.name"
-                       :value="item.name"></el-option>
+          <el-select
+            @change="getModelForm($event)"
+            v-loading="base_model_loading"
+            v-model="base_form_data.model_name"
+            class="w-full m-2"
+            placeholder="自定义输入基础模型后回车即可"
+            filterable
+            allow-create
+            default-first-option
+          >
+            <el-option
+              v-for="item in base_model_list"
+              :key="item.name"
+              :label="item.name"
+              :value="item.name"
+            ></el-option>
           </el-select>
         </el-form-item>
       </template>
diff --git a/ui/src/views/template/component/EditModel.vue b/ui/src/views/template/component/EditModel.vue
index 898558fd..07b81508 100644
--- a/ui/src/views/template/component/EditModel.vue
+++ b/ui/src/views/template/component/EditModel.vue
@@ -10,7 +10,7 @@
     <template #header="{ close, titleId, titleClass }">
       <el-breadcrumb separator=">">
         <el-breadcrumb-item
-        ><span class="active-breadcrumb">{{
+          ><span class="active-breadcrumb">{{
             `编辑 ${providerValue?.name}`
           }}</span></el-breadcrumb-item
         >
@@ -29,15 +29,17 @@
       <template #default>
         <el-form-item prop="name" :rules="base_form_data_rule.name">
           <template #label>
-            <span>模型名称</span>
-            <el-tooltip effect="light" placement="right">
-              <el-icon style="margin-left: 4px;">
-                <QuestionFilled />
-              </el-icon>
-              <template #content>
-                <p>MaxKB 中自定义的模型名称</p>
-              </template>
-            </el-tooltip>
+            <div class="flex align-center" style="display: inline-flex">
+              <div class="flex-between mr-4">
+                <span>模型名称 </span>
+              </div>
+              <el-tooltip effect="dark" placement="right">
+                <template #content>
+                  <p>MaxKB 中自定义的模型名称</p>
+                </template>
+                <AppIcon iconName="app-warning" class="app-warning-icon"></AppIcon>
+              </el-tooltip>
+            </div>
           </template>
           <el-input
             v-model="base_form_data.name"
@@ -49,14 +51,6 @@
         <el-form-item prop="model_type" :rules="base_form_data_rule.model_type">
           <template #label>
             <span>模型类型</span>
-            <el-tooltip effect="light" placement="right">
-              <el-icon style="margin-left: 4px;">
-                <QuestionFilled />
-              </el-icon>
-              <template #content>
-                <p>大语言模型</p>
-              </template>
-            </el-tooltip>
           </template>
           <el-select
             v-loading="model_type_loading"
@@ -70,22 +64,26 @@
               :key="item.value"
               :label="item.key"
               :value="item.value"
-            ></el-option
-            >
+            ></el-option>
           </el-select>
         </el-form-item>
         <el-form-item prop="model_name" :rules="base_form_data_rule.model_name">
           <template #label>
-            <span>基础模型</span>
-            <el-tooltip effect="light" placement="right">
-              <el-icon style="margin-left: 4px;">
-                <QuestionFilled />
-              </el-icon>
-              <template #content>
-                <p>为供应商的 LLM 模型，支持自定义输入</p>
-                <p>下拉选项是 OpenAI 常用的一些大语言模型如：gpt-3.5-turbo-0613、gpt-3.5-turbo、gpt-4 等</p>
-              </template>
-            </el-tooltip>
+            <div class="flex align-center" style="display: inline-flex">
+              <div class="flex-between mr-4">
+                <span>基础模型 </span>
+              </div>
+              <el-tooltip effect="dark" placement="right">
+                <template #content>
+                  <p>为供应商的 LLM 模型，支持自定义输入</p>
+                  <p>
+                    下拉选项是 OpenAI
+                    常用的一些大语言模型如：gpt-3.5-turbo-0613、gpt-3.5-turbo、gpt-4 等
+                  </p>
+                </template>
+                <AppIcon iconName="app-warning" class="app-warning-icon"></AppIcon>
+              </el-tooltip>
+            </div>
           </template>
           <el-select
             @change="getModelForm($event)"
@@ -102,8 +100,7 @@
               :key="item.name"
               :label="item.name"
               :value="item.name"
-            ></el-option
-            >
+            ></el-option>
           </el-select>
         </el-form-item>
       </template>
@@ -126,6 +123,7 @@ import DynamicsForm from '@/components/dynamics-form/index.vue'
 import type { FormRules } from 'element-plus'
 import { MsgSuccess } from '@/utils/message'
 import { QuestionFilled } from '@element-plus/icons-vue'
+import AppIcon from '@/components/icons/AppIcon.vue'
 
 const providerValue = ref<Provider>()
 const dynamicsFormRef = ref<InstanceType<typeof DynamicsForm>>()