From 812dc142c8b13d8be8e37f0485a561301abb6c92 Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <79562285+wangdan-fit2cloud@users.noreply.github.com>
Date: Tue, 1 Apr 2025 14:21:44 +0800
Subject: [PATCH] perf: Optimize some style issues

---
 .../component/chat-input-operate/index.vue    |  4 +++-
 .../items/select/MultiSelect.vue              |  1 -
 .../component/XPackDisplaySettingDialog.vue   | 19 +++++++++++++------
 ui/src/views/hit-test/index.vue               | 11 ++++++++---
 .../component/UserInputFieldTable.vue         |  6 ++++--
 5 files changed, 28 insertions(+), 13 deletions(-)

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 497fbc98b..9ee2762b6 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
@@ -686,7 +686,9 @@ function sendChatHandle(event?: any) {
   }
 }
 const insertNewlineAtCursor = (event?: any) => {
-  const textarea = document.querySelector('.el-textarea__inner') as HTMLTextAreaElement
+  const textarea = quickInputRef.value.$el.querySelector(
+    '.el-textarea__inner'
+  ) as HTMLTextAreaElement
   const startPos = textarea.selectionStart
   const endPos = textarea.selectionEnd
   // 阻止默认行为（避免额外的换行符）
diff --git a/ui/src/components/dynamics-form/items/select/MultiSelect.vue b/ui/src/components/dynamics-form/items/select/MultiSelect.vue
index f78f898c5..f397b37cb 100644
--- a/ui/src/components/dynamics-form/items/select/MultiSelect.vue
+++ b/ui/src/components/dynamics-form/items/select/MultiSelect.vue
@@ -2,7 +2,6 @@
   <el-select
     class="m-2"
     multiple
-    collapse-tags
     filterable
     clearable
     v-bind="$attrs"
diff --git a/ui/src/views/application-overview/component/XPackDisplaySettingDialog.vue b/ui/src/views/application-overview/component/XPackDisplaySettingDialog.vue
index ec8ab480d..c200f6727 100644
--- a/ui/src/views/application-overview/component/XPackDisplaySettingDialog.vue
+++ b/ui/src/views/application-overview/component/XPackDisplaySettingDialog.vue
@@ -102,23 +102,30 @@
                   :width="
                     xpackForm.show_avatar
                       ? xpackForm.show_user_avatar
-                        ? '240px'
+                        ? '232px'
                         : '270px'
                       : xpackForm.show_user_avatar
-                        ? '270px'
+                        ? '260px'
                         : '300px'
                   "
                 />
               </div>
-              <div class="flex" style="justify-content: flex-end">
+              <div class="flex mt-4" style="justify-content: flex-end">
                 <img
                   src="@/assets/display-bg3.png"
                   alt=""
-                  :width="xpackForm.show_user_avatar ? '240px' : '270px'"
-                  class="mr-8"
+                  :width="
+                    xpackForm.show_user_avatar
+                      ? xpackForm.show_avatar
+                        ? '227px'
+                        : '255px'
+                      : xpackForm.show_avatar
+                        ? '265px'
+                        : '292px'
+                  "
                   style="object-fit: contain"
                 />
-                <div class="avatar" v-if="xpackForm.show_user_avatar">
+                <div class="avatar ml-8" v-if="xpackForm.show_user_avatar">
                   <el-image
                     v-if="imgUrl.user_avatar"
                     :src="imgUrl.user_avatar"
diff --git a/ui/src/views/hit-test/index.vue b/ui/src/views/hit-test/index.vue
index e2c4bf6da..088275aed 100644
--- a/ui/src/views/hit-test/index.vue
+++ b/ui/src/views/hit-test/index.vue
@@ -8,7 +8,7 @@
         </h4>
       </template>
       <div class="hit-test__main p-16" v-loading="loading">
-        <div class="question-title clearfix" v-if="questionTitle">
+        <div class="question-title" :style="{ visibility: questionTitle ? 'visible' : 'hidden' }">
           <div class="avatar">
             <AppAvatar>
               <img src="@/assets/user-icon.svg" style="width: 54%" alt="" />
@@ -233,6 +233,7 @@ const {
   params: { id }
 } = route as any
 
+const quickInputRef = ref()
 const ParagraphDialogRef = ref()
 const loading = ref(false)
 const paragraphDetail = ref<any[]>([])
@@ -297,7 +298,9 @@ function sendChatHandle(event: any) {
   }
 }
 const insertNewlineAtCursor = (event?: any) => {
-  const textarea = document.querySelector('.el-textarea__inner') as HTMLTextAreaElement
+  const textarea = quickInputRef.value.$el.querySelector(
+    '.el-textarea__inner'
+  ) as HTMLTextAreaElement
   const startPos = textarea.selectionStart
   const endPos = textarea.selectionEnd
   // 阻止默认行为（避免额外的换行符）
@@ -354,6 +357,8 @@ onMounted(() => {})
       padding-left: 40px;
       .text {
         padding: 6px 0;
+        height: 34px;
+        box-sizing: border-box;
       }
     }
   }
@@ -402,7 +407,7 @@ onMounted(() => {})
   }
 
   .hit-test-height {
-    height: calc(var(--app-main-height) - 135px);
+    height: calc(var(--app-main-height) - 170px);
   }
   .document-card {
     height: 210px;
diff --git a/ui/src/workflow/nodes/base-node/component/UserInputFieldTable.vue b/ui/src/workflow/nodes/base-node/component/UserInputFieldTable.vue
index fc39c4910..88615954c 100644
--- a/ui/src/workflow/nodes/base-node/component/UserInputFieldTable.vue
+++ b/ui/src/workflow/nodes/base-node/component/UserInputFieldTable.vue
@@ -1,6 +1,8 @@
 <template>
   <div class="flex-between mb-16">
-    <h5 class="lighter">{{ inputFieldConfig.title }}</h5>
+    <h5 class="break-all ellipsis lighter" style="max-width:80%" :title="inputFieldConfig.title">
+      {{ inputFieldConfig.title }}
+    </h5>
     <div>
       <el-button type="primary" link @click="openChangeTitleDialog">
         <el-icon>
@@ -172,7 +174,7 @@ function refreshFieldTitle(data: any) {
 }
 
 const getDefaultValue = (row: any) => {
-  if(row.input_type === 'PasswordInput') {
+  if (row.input_type === 'PasswordInput') {
     return '******'
   }
   if (row.default_value) {