From 1f88ee266daef1c32150a8a25010570e65839dac Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Fri, 22 Nov 2024 16:27:43 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E6=94=B9=E9=83=A8=E5=88=86?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA=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-doc.svg               |  5 ++
 ui/src/assets/icon_file-image.svg             |  6 ++
 .../component/chat-input-operate/index.vue    | 22 +++++--
 ui/src/components/card-checkbox/index.vue     |  2 +-
 .../views/application/ApplicationSetting.vue  |  2 +
 ui/src/views/application/index.vue            |  2 +-
 ui/src/views/dataset/index.vue                |  2 +-
 ui/src/views/function-lib/index.vue           |  2 +-
 ui/src/workflow/nodes/ai-chat-node/index.vue  |  2 +
 .../component/FileUploadSettingDialog.vue     | 65 +++++++++++++------
 .../workflow/nodes/image-understand/index.vue |  3 +-
 ui/src/workflow/nodes/question-node/index.vue |  2 +
 12 files changed, 85 insertions(+), 30 deletions(-)
 create mode 100644 ui/src/assets/icon_file-doc.svg
 create mode 100644 ui/src/assets/icon_file-image.svg

diff --git a/ui/src/assets/icon_file-doc.svg b/ui/src/assets/icon_file-doc.svg
new file mode 100644
index 000000000..86ac2d3f1
--- /dev/null
+++ b/ui/src/assets/icon_file-doc.svg
@@ -0,0 +1,5 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.3335 3.33333C5.3335 2.59695 5.93045 2 6.66683 2H19.8146C19.9934 2 20.1647 2.07183 20.29 2.19934L26.4756 8.49255C26.5982 8.61722 26.6668 8.78505 26.6668 8.95987V28.6667C26.6668 29.403 26.0699 30 25.3335 30H6.66683C5.93045 30 5.3335 29.403 5.3335 28.6667V3.33333Z" fill="#3370FF"/>
+<path d="M20 2.02637C20.1089 2.05793 20.2089 2.11704 20.2899 2.19936L26.4755 8.49256C26.5261 8.54408 26.5675 8.60297 26.5987 8.66668H21.5135C20.6776 8.66668 20 7.98906 20 7.15317V2.02637Z" fill="#2B5FD9"/>
+<path d="M10.7636 13.5757H20.8727C20.9932 13.5757 21.0909 13.6734 21.0909 13.7939V14.8121C21.0909 14.9326 20.9932 15.0303 20.8727 15.0303H10.7636C10.6431 15.0303 10.5454 14.9326 10.5454 14.8121V13.7939C10.5454 13.6734 10.6431 13.5757 10.7636 13.5757ZM10.7636 17.9394H20.8727C20.9932 17.9394 21.0909 18.0371 21.0909 18.1576V19.1757C21.0909 19.2962 20.9932 19.3939 20.8727 19.3939H10.7636C10.6431 19.3939 10.5454 19.2962 10.5454 19.1757V18.1576C10.5454 18.0371 10.6431 17.9394 10.7636 17.9394ZM10.7636 22.303H16.1454C16.2659 22.303 16.3636 22.4007 16.3636 22.5212V23.5394C16.3636 23.6599 16.2659 23.7576 16.1454 23.7576H10.7636C10.6431 23.7576 10.5454 23.6599 10.5454 23.5394V22.5212C10.5454 22.4007 10.6431 22.303 10.7636 22.303Z" fill="white"/>
+</svg>
diff --git a/ui/src/assets/icon_file-image.svg b/ui/src/assets/icon_file-image.svg
new file mode 100644
index 000000000..4511c36f5
--- /dev/null
+++ b/ui/src/assets/icon_file-image.svg
@@ -0,0 +1,6 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.3335 3.33333C5.3335 2.59695 5.93045 2 6.66683 2H19.724C19.9008 2 20.0704 2.07024 20.1954 2.19526L26.4716 8.47141C26.5966 8.59643 26.6668 8.766 26.6668 8.94281V28.6667C26.6668 29.403 26.0699 30 25.3335 30H6.66683C5.93045 30 5.3335 29.403 5.3335 28.6667V3.33333Z" fill="#14C0FF"/>
+<path d="M20 2.05988C20.072 2.09264 20.1383 2.13825 20.1953 2.19526L26.4714 8.4714C26.5284 8.52841 26.574 8.59467 26.6068 8.66666H21.3333C20.597 8.66666 20 8.06971 20 7.33333V2.05988Z" fill="#11A3D9"/>
+<path d="M11.3335 16C12.4381 16 13.3335 15.1046 13.3335 14C13.3335 12.8954 12.4381 12 11.3335 12C10.2289 12 9.3335 12.8954 9.3335 14C9.3335 15.1046 10.2289 16 11.3335 16Z" fill="white"/>
+<path d="M22.2785 14.9317C22.4218 14.7884 22.6668 14.8899 22.6668 15.0925V24.0645C22.6668 24.1901 22.565 24.2919 22.4394 24.2919H13.4674L13.4587 24.2918H9.56142C9.35877 24.2918 9.25728 24.0468 9.40058 23.9035L14.366 18.938C14.4549 18.8492 14.5989 18.8492 14.6877 18.938L16.48 20.7302L22.2785 14.9317Z" fill="white"/>
+</svg>
diff --git a/ui/src/components/ai-chat/component/chat-input-operate/index.vue b/ui/src/components/ai-chat/component/chat-input-operate/index.vue
index 24aac0c1d..bb29ba29f 100644
--- a/ui/src/components/ai-chat/component/chat-input-operate/index.vue
+++ b/ui/src/components/ai-chat/component/chat-input-operate/index.vue
@@ -83,18 +83,29 @@
               :accept="getAcceptList()"
               :on-change="(file: any, fileList: any) => uploadFile(file, fileList)"
             >
-              <el-button text>
-                <el-icon><Paperclip /></el-icon>
-              </el-button>
+              <el-tooltip effect="dark" placement="top" popper-class="upload-tooltip-width">
+                <template #content
+                  >上传文件：最多{{
+                    props.applicationDetails.file_upload_setting.maxFiles
+                  }}个，每个文件限制
+                  {{ props.applicationDetails.file_upload_setting.fileLimit }}MB<br />文件类型：{{
+                    getAcceptList()
+                  }}</template
+                >
+                <el-button text>
+                  <el-icon><Paperclip /></el-icon>
+                </el-button>
+              </el-tooltip>
             </el-upload>
             <el-divider direction="vertical" />
           </span>
           <span v-if="props.applicationDetails.stt_model_enable" class="flex align-center">
-            <el-button text v-if="mediaRecorderStatus" @click="startRecording">
+            <el-button text @click="startRecording" v-if="mediaRecorderStatus">
               <el-icon>
                 <Microphone />
               </el-icon>
             </el-button>
+
             <div v-else class="operate flex align-center">
               <el-text type="info"
                 >00:{{ recorderTime < 10 ? `0${recorderTime}` : recorderTime }}</el-text
@@ -457,4 +468,7 @@ onMounted(() => {
     z-index: 1;
   }
 }
+.upload-tooltip-width {
+  width: 300px;
+}
 </style>
diff --git a/ui/src/components/card-checkbox/index.vue b/ui/src/components/card-checkbox/index.vue
index e5d7282e3..d8f2176c9 100644
--- a/ui/src/components/card-checkbox/index.vue
+++ b/ui/src/components/card-checkbox/index.vue
@@ -60,7 +60,7 @@ function checkboxChange() {
   emit('change')
 }
 </script>
-<style lang="scss" scoped>
+<style lang="scss">
 .card-checkbox {
   &.active {
     border: 1px solid var(--el-color-primary);
diff --git a/ui/src/views/application/ApplicationSetting.vue b/ui/src/views/application/ApplicationSetting.vue
index 9e912f7cf..e80d6b5a1 100644
--- a/ui/src/views/application/ApplicationSetting.vue
+++ b/ui/src/views/application/ApplicationSetting.vue
@@ -198,6 +198,8 @@
                   :value-on-clear="0"
                   controls-position="right"
                   class="w-full"
+                  :step="1"
+                  :step-strictly="true"
                 />
               </el-form-item>
               <el-form-item
diff --git a/ui/src/views/application/index.vue b/ui/src/views/application/index.vue
index 6f0461071..47a97dc28 100644
--- a/ui/src/views/application/index.vue
+++ b/ui/src/views/application/index.vue
@@ -79,7 +79,7 @@
                 />
               </template>
               <template #subTitle>
-                <el-text class="lighter mr-8" size="small">
+                <el-text class="color-secondary" size="small">
                   <auto-tooltip :content="item.username">
                     创建者: {{ item.username }}
                   </auto-tooltip>
diff --git a/ui/src/views/dataset/index.vue b/ui/src/views/dataset/index.vue
index 5163c95d1..686fc05ed 100644
--- a/ui/src/views/dataset/index.vue
+++ b/ui/src/views/dataset/index.vue
@@ -62,7 +62,7 @@
                   </AppAvatar>
                 </template>
                 <template #subTitle>
-                  <el-text class="lighter mr-8" size="small">
+                  <el-text class="color-secondary" size="small">
                     <auto-tooltip :content="item.username">
                       创建者: {{ item.username }}
                     </auto-tooltip>
diff --git a/ui/src/views/function-lib/index.vue b/ui/src/views/function-lib/index.vue
index 0358406d7..9979d0e7c 100644
--- a/ui/src/views/function-lib/index.vue
+++ b/ui/src/views/function-lib/index.vue
@@ -67,7 +67,7 @@
                 </AppAvatar>
               </template>
               <template #subTitle>
-                <el-text class="lighter mr-8" size="small">
+                <el-text class="color-secondary" size="small">
                   <auto-tooltip :content="item.username">
                     创建者: {{ item.username }}
                   </auto-tooltip>
diff --git a/ui/src/workflow/nodes/ai-chat-node/index.vue b/ui/src/workflow/nodes/ai-chat-node/index.vue
index 77d0a736e..a8619cdfe 100644
--- a/ui/src/workflow/nodes/ai-chat-node/index.vue
+++ b/ui/src/workflow/nodes/ai-chat-node/index.vue
@@ -154,6 +154,8 @@
             :value-on-clear="0"
             controls-position="right"
             class="w-full"
+            :step="1"
+            :step-strictly="true"
           />
         </el-form-item>
         <el-form-item label="返回内容" @click.prevent>
diff --git a/ui/src/workflow/nodes/base-node/component/FileUploadSettingDialog.vue b/ui/src/workflow/nodes/base-node/component/FileUploadSettingDialog.vue
index 685f24635..0996fe7e1 100644
--- a/ui/src/workflow/nodes/base-node/component/FileUploadSettingDialog.vue
+++ b/ui/src/workflow/nodes/base-node/component/FileUploadSettingDialog.vue
@@ -7,34 +7,64 @@
     :destroy-on-close="true"
     :before-close="close"
     append-to-body
+    width="600"
   >
     <el-form
       label-position="top"
       ref="fieldFormRef"
       :model="form_data"
-      require-asterisk-position="right">
+      require-asterisk-position="right"
+    >
       <el-form-item label="单次上传最多文件数">
-        <el-slider v-model="form_data.maxFiles" show-input :show-input-controls="false" :min="1" :max="10" />
+        <el-slider
+          v-model="form_data.maxFiles"
+          show-input
+          :show-input-controls="false"
+          :min="1"
+          :max="10"
+        />
       </el-form-item>
       <el-form-item label="每个文件最大（MB）">
-        <el-slider v-model="form_data.fileLimit" show-input :show-input-controls="false" :min="1" :max="100" />
+        <el-slider
+          v-model="form_data.fileLimit"
+          show-input
+          :show-input-controls="false"
+          :min="1"
+          :max="100"
+        />
       </el-form-item>
       <el-form-item label="上传的文件类型">
-        <el-card style="width: 100%" class="mb-8">
+        <el-card
+          shadow="hover"
+          class="card-checkbox cursor w-full mb-8"
+          :class="form_data.document ? 'active' : ''"
+          style="--el-card-padding: 8px 16px"
+        >
           <div class="flex-between">
-            <p>
-              文档（TXT、MD、DOCX、HTML、CSV、XLSX、XLS、PDF）
-              需要与文档内容提取节点配合使用
-            </p>
+            <div class="flex align-center">
+              <img class="mr-12" src="@/assets/icon_file-doc.svg" alt="" />
+              <div>
+                <p>文档（TXT、MD、DOCX、HTML、CSV、XLSX、XLS、PDF）</p>
+                <el-text class="color-secondary">需要与文档内容提取节点配合使用</el-text>
+              </div>
+            </div>
             <el-checkbox v-model="form_data.document" />
           </div>
         </el-card>
-        <el-card style="width: 100%" class="mb-8">
+        <el-card
+          shadow="hover"
+          class="card-checkbox cursor w-full mb-8"
+          :class="form_data.image ? 'active' : ''"
+          style="--el-card-padding: 8px 16px"
+        >
           <div class="flex-between">
-            <p>
-              图片（JPG、JPEG、PNG、GIF）
-              所选模型需要支持接收图片
-            </p>
+            <div class="flex align-center">
+              <img class="mr-12" src="@/assets/icon_file-image.svg" alt="" />
+              <div>
+                <p>图片（JPG、JPEG、PNG、GIF）</p>
+                <el-text class="color-secondary">所选模型需要支持接收图片</el-text>
+              </div>
+            </div>
             <el-checkbox v-model="form_data.image" />
           </div>
         </el-card>
@@ -43,9 +73,7 @@
     <template #footer>
       <span class="dialog-footer">
         <el-button @click.prevent="close"> 取消 </el-button>
-        <el-button type="primary" @click="submit()" :loading="loading">
-          确定
-        </el-button>
+        <el-button type="primary" @click="submit()" :loading="loading"> 确定 </el-button>
       </span>
     </template>
   </el-dialog>
@@ -69,7 +97,6 @@ const form_data = ref({
   video: false
 })
 
-
 function open(data: any) {
   dialogVisible.value = true
   nextTick(() => {
@@ -96,6 +123,4 @@ defineExpose({
 })
 </script>
 
-<style scoped lang="scss">
-
-</style>
\ No newline at end of file
+<style scoped lang="scss"></style>
diff --git a/ui/src/workflow/nodes/image-understand/index.vue b/ui/src/workflow/nodes/image-understand/index.vue
index 6ca722d29..c3f1184ad 100644
--- a/ui/src/workflow/nodes/image-understand/index.vue
+++ b/ui/src/workflow/nodes/image-understand/index.vue
@@ -7,7 +7,6 @@
         :model="form_data"
         label-position="top"
         require-asterisk-position="right"
-        class="mb-24"
         label-width="auto"
         ref="aiChatNodeFormRef"
         hide-required-asterisk
@@ -132,7 +131,7 @@
           <template #label>
             <div class="flex-between">
               <div>历史聊天记录</div>
-              <el-select v-model="form_data.dialogue_type" class="w-120">
+              <el-select v-model="form_data.dialogue_type" type="small" style="width: 100px;">
                 <el-option label="节点" value="NODE"/>
                 <el-option label="工作流" value="WORKFLOW"/>
               </el-select>
diff --git a/ui/src/workflow/nodes/question-node/index.vue b/ui/src/workflow/nodes/question-node/index.vue
index c6a9918f9..adaee734b 100644
--- a/ui/src/workflow/nodes/question-node/index.vue
+++ b/ui/src/workflow/nodes/question-node/index.vue
@@ -152,6 +152,8 @@
             :value-on-clear="0"
             controls-position="right"
             class="w-full"
+            :step="1"
+            :step-strictly="true"
           />
         </el-form-item>
         <el-form-item label="返回内容" @click.prevent>