fix: optimization chart operation style

Author: wangdan-fit2cloud

ui/src/components/ai-chat/component/chat-input-operate/TouchChat.vue

@@ -23,9 +23,8 @@
             {{ message }}
           </span>
         </p>
-        <div class="close">
-          <el-icon><Close /></el-icon>
-        </div>
+        <el-avatar :size="isTouching ? 43 : 50" icon="Close" class="close" />
+        <!-- <div class="close"></div> -->
         <p class="lighter" :style="{ visibility: isTouching ? 'visible' : 'hidden' }">
           {{ message }}
         </p>
@@ -40,6 +39,7 @@
 
 <script setup lang="ts">
 import { ref, watch } from 'vue'
+// import { Close } from '@element-plus/icons-vue'
 const props = defineProps({
   time: {
     type: Number,
@@ -143,12 +143,8 @@ function onTouchEnd() {
     box-shadow: 0px 4px 8px 0px rgba(31, 35, 41, 0.1);
     border: 1px solid rgba(222, 224, 227, 1);
     background: rgba(255, 255, 255, 1);
-    border-radius: 100px;
-    display: inline-block;
-    width: 43px;
-    height: 43px;
-    line-height: 50px;
-    font-size: 1.8rem;
+    color: var(--app-text-color-secondary);
+    font-size: 1.6rem;
     margin: 20px 0;
   }
   .speech-img {
@@ -163,9 +159,7 @@ function onTouchEnd() {
     .close {
       background: #f54a45;
       color: #ffffff;
-      width: 50px;
-      height: 50px;
-      line-height: 57px;
+      border: none;
       font-size: 2rem;
     }
     .speech-img {

ui/src/components/ai-chat/component/chat-input-operate/index.vue

@@ -113,7 +113,7 @@
           </el-space>
         </div>
       </el-scrollbar>
-      <div class="flex">
+      <div class="flex" :style="{ alignItems: isMicrophone ? 'center' : 'end' }">
         <TouchChat
           v-if="isMicrophone"
           @TouchStart="startRecording"
@@ -554,7 +554,7 @@ class RecorderManage {
       MsgAlert(
         t('common.tip'),
         `${err}
-        <div style="width: 100%;height:1px;border-top:1px var(--el-border-color) var(--el-border-style);margin:10px 0;"></div> 
+        <div style="width: 100%;height:1px;border-top:1px var(--el-border-color) var(--el-border-style);margin:10px 0;"></div>
         ${t('chat.tip.recorderTip')}
     <img src="${new URL(`@/assets/tipIMG.jpg`, import.meta.url).href}" style="width: 100%;" />`,
         {
@@ -653,13 +653,23 @@ function autoSendMessage() {
     audio_list: uploadAudioList.value,
     video_list: uploadVideoList.value
   })
-  inputValue.value = ''
-  uploadImageList.value = []
-  uploadDocumentList.value = []
-  uploadAudioList.value = []
-  uploadVideoList.value = []
-  if (quickInputRef.value) {
-    quickInputRef.value.textareaStyle.height = '45px'
+
+  if (
+    props.sendMessage(inputValue.value, {
+      image_list: uploadImageList.value,
+      document_list: uploadDocumentList.value,
+      audio_list: uploadAudioList.value,
+      video_list: uploadVideoList.value
+    }) !== undefined
+  ) {
+    inputValue.value = ''
+    uploadImageList.value = []
+    uploadDocumentList.value = []
+    uploadAudioList.value = []
+    uploadVideoList.value = []
+    if (quickInputRef.value) {
+      quickInputRef.value.textareaStyle.height = '45px'
+    }
   }
 }
 

ui/src/components/ai-chat/index.vue

@@ -5,18 +5,15 @@
     :class="type"
     :style="{ height: firsUserInput ? '100%' : undefined }"
   >
-    <div
-      v-show="showUserInputContent"
-      :class="firsUserInput ? 'firstUserInput' : 'popperUserInput'"
-    >
+    <div v-if="showUserInputContent" :class="firsUserInput ? 'firstUserInput' : 'popperUserInput'">
       <UserForm
         v-model:api_form_data="api_form_data"
         v-model:form_data="form_data"
         :application="applicationDetails"
         :type="type"
         :first="firsUserInput"
         @confirm="UserFormConfirm"
-        @cancel="() => (showUserInput = false)"
+        @cancel="UserFormCancel"
         ref="userFormRef"
       ></UserForm>
     </div>
@@ -150,6 +147,9 @@ const userFormRef = ref<InstanceType<typeof UserForm>>()
 // 用户输入
 const firsUserInput = ref(true)
 const showUserInput = ref(false)
+// 初始表单数据（用于恢复）
+const initialFormData = ref({})
+const initialApiFormData = ref({})
 
 const isUserInput = computed(
   () =>
@@ -193,6 +193,11 @@ watch(
 
 const toggleUserInput = () => {
   showUserInput.value = !showUserInput.value
+  if (showUserInput.value) {
+    // 保存当前数据作为初始数据（用于可能的恢复）
+    initialFormData.value = JSON.parse(JSON.stringify(form_data.value))
+    initialApiFormData.value = JSON.parse(JSON.stringify(api_form_data.value))
+  }
 }
 
 function UserFormConfirm() {
@@ -201,6 +206,12 @@ function UserFormConfirm() {
     showUserInput.value = false
   }
 }
+function UserFormCancel() {
+  // 恢复初始数据
+  form_data.value = JSON.parse(JSON.stringify(initialFormData.value))
+  api_form_data.value = JSON.parse(JSON.stringify(initialApiFormData.value))
+  showUserInput.value = false
+}
 
 function sendMessage(val: string, other_params_data?: any, chat?: chatType) {
   if (!userFormRef.value?.checkInputParam()) {