From 2a88651610d74c20b17f695b737e5325dadcd607 Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Tue, 17 Dec 2024 17:36:58 +0800
Subject: [PATCH] perf: Optimize markdown image style

---
 ui/src/styles/element-plus.scss               |  6 +++
 ui/src/styles/md-editor.scss                  |  9 +++++
 ui/src/views/application/index.vue            | 32 ++++++++--------
 .../template/component/CreateModelDialog.vue  | 37 +++++++++++++------
 4 files changed, 57 insertions(+), 27 deletions(-)

diff --git a/ui/src/styles/element-plus.scss b/ui/src/styles/element-plus.scss
index 683936874..251671f0b 100644
--- a/ui/src/styles/element-plus.scss
+++ b/ui/src/styles/element-plus.scss
@@ -31,6 +31,12 @@
     border: none;
   }
 }
+.el-button--text {
+  border: none !important;
+  &:focus {
+    border: none !important;
+  }
+}
 .el-button--large {
   font-size: 16px;
 }
diff --git a/ui/src/styles/md-editor.scss b/ui/src/styles/md-editor.scss
index 06a6ab887..ad41acae9 100644
--- a/ui/src/styles/md-editor.scss
+++ b/ui/src/styles/md-editor.scss
@@ -14,6 +14,15 @@
   }
   img {
     border: 0 !important;
+    max-width: 360px !important;
+  }
+}
+
+@media only screen and (max-width: 768px) {
+  .md-editor-preview {
+    img {
+      max-width: 100% !important;
+    }
   }
 }
 
diff --git a/ui/src/views/application/index.vue b/ui/src/views/application/index.vue
index 468c2fbd2..ad21e3be1 100644
--- a/ui/src/views/application/index.vue
+++ b/ui/src/views/application/index.vue
@@ -5,7 +5,7 @@
       <div class="flex-between">
         <el-upload
           :file-list="[]"
-          class="flex-between"
+          class="flex-between mr-12"
           action="#"
           multiple
           :auto-upload="false"
@@ -275,18 +275,18 @@ function mapToUrlParams(map: any[]) {
 }
 
 function getAccessToken(id: string) {
-  applicationList.value.filter((app)=>app.id === id)[0]?.work_flow?.nodes
-      ?.filter((v: any) => v.id === 'base-node')
-      .map((v: any) => {
-        apiInputParams.value = v.properties.api_input_field_list
-          ? v.properties.api_input_field_list
-              .map((v: any) => {
-                return {
-                  name: v.variable,
-                  value: v.default_value
-                }
-              })
-          : v.properties.input_field_list
+  applicationList.value
+    .filter((app) => app.id === id)[0]
+    ?.work_flow?.nodes?.filter((v: any) => v.id === 'base-node')
+    .map((v: any) => {
+      apiInputParams.value = v.properties.api_input_field_list
+        ? v.properties.api_input_field_list.map((v: any) => {
+            return {
+              name: v.variable,
+              value: v.default_value
+            }
+          })
+        : v.properties.input_field_list
           ? v.properties.input_field_list
               .filter((v: any) => v.assignment_method === 'api_input')
               .map((v: any) => {
@@ -296,9 +296,11 @@ function getAccessToken(id: string) {
                 }
               })
           : []
-      })
+    })
 
-  const apiParams = mapToUrlParams(apiInputParams.value) ? '?' + mapToUrlParams(apiInputParams.value) : ''
+  const apiParams = mapToUrlParams(apiInputParams.value)
+    ? '?' + mapToUrlParams(apiInputParams.value)
+    : ''
   application.asyncGetAccessToken(id, loading).then((res: any) => {
     window.open(application.location + res?.data?.access_token + apiParams)
   })
diff --git a/ui/src/views/template/component/CreateModelDialog.vue b/ui/src/views/template/component/CreateModelDialog.vue
index de8537e60..282f64501 100644
--- a/ui/src/views/template/component/CreateModelDialog.vue
+++ b/ui/src/views/template/component/CreateModelDialog.vue
@@ -88,7 +88,9 @@
                   <el-tooltip effect="dark" placement="right">
                     <template #content>
                       <p>大语言模型：在应用中与AI对话的推理模型。</p>
-                      <p>向量模型：在知识库中导入文档进行向量化和向量检索召回分段时使用的向量模型。</p>
+                      <p>
+                        向量模型：在知识库中导入文档进行向量化和向量检索召回分段时使用的向量模型。
+                      </p>
                       <p>
                         重排模型：在二次召回中根据召回的候选分段和用户问题的匹配度重新排序，从而得到更精确的结果。
                       </p>
@@ -155,13 +157,17 @@
         </DynamicsForm>
       </el-tab-pane>
       <el-tab-pane label="高级设置" name="advanced-info">
-        <div class="flex-between">
+        <div class="flex-between mb-8">
           <h5>模型参数</h5>
-          <el-button type="text" @click="openAddDrawer()" :disabled="form_data.model_type !== 'LLM' && form_data.model_type !== 'IMAGE' && form_data.model_type !== 'TTS' && form_data.model_type !== 'TTI'">
+          <el-button type="text" @click.stop="openAddDrawer()">
             <AppIcon iconName="Plus" class="add-icon" />添加
           </el-button>
         </div>
-        <el-table :data="base_form_data.model_params_form" v-if="base_form_data.model_params_form?.length > 0" class="mb-16">
+        <el-table
+          :data="base_form_data.model_params_form"
+          v-if="base_form_data.model_params_form?.length > 0"
+          class="mb-16"
+        >
           <el-table-column prop="label" label="显示名称" show-overflow-tooltip>
             <template #default="{ row }">
               <span v-if="row.label && row.label.input_type === 'TooltipLabel'">{{
@@ -216,7 +222,6 @@
     </template>
   </el-dialog>
   <AddParamDrawer ref="AddParamRef" @refresh="refresh" />
-
 </template>
 <script setup lang="ts">
 import { ref, computed } from 'vue'
@@ -245,7 +250,6 @@ const dialogVisible = ref<boolean>(false)
 const activeName = ref('base-info')
 const AddParamRef = ref()
 
-
 const base_form_data_rule = ref<FormRules>({
   name: { required: true, trigger: 'blur', message: '模型名称不能为空' },
   permission_type: { required: true, trigger: 'change', message: '权限不能为空' },
@@ -296,10 +300,14 @@ const getModelForm = (model_name: string) => {
       dynamicsFormRef.value?.render(model_form_field.value, undefined)
     })
 
-    ModelApi.listBaseModelParamsForm(providerValue.value.provider, form_data.value.model_type, model_name, base_model_loading)
-      .then((ok) => {
-        base_form_data.value.model_params_form = ok.data
-      })
+    ModelApi.listBaseModelParamsForm(
+      providerValue.value.provider,
+      form_data.value.model_type,
+      model_name,
+      base_model_loading
+    ).then((ok) => {
+      base_form_data.value.model_params_form = ok.data
+    })
   }
 }
 
@@ -325,7 +333,13 @@ const list_base_model = (model_type: any, change?: boolean) => {
 }
 
 const close = () => {
-  base_form_data.value = { name: '', model_type: '', model_name: '', permission_type: 'PRIVATE', model_params_form: [] }
+  base_form_data.value = {
+    name: '',
+    model_type: '',
+    model_name: '',
+    permission_type: 'PRIVATE',
+    model_params_form: []
+  }
   credential_form_data.value = {}
   model_form_field.value = []
   base_model_list.value = []
@@ -386,7 +400,6 @@ function refresh(data: any, index: any) {
   }
 }
 
-
 const toSelectProvider = () => {
   close()
   emit('change')