Browse Source

feat(aiChat): 为确认按钮添加禁用状态及样式

当消息已生成时禁用确认按钮并显示禁用样式
修改悬停背景色以提高可读性
lsc 1 week ago
parent
commit
311fcea244
1 changed files with 14 additions and 5 deletions
  1. 14 5
      src/components/CollapsibleToolbar/componets/aiChat.vue

+ 14 - 5
src/components/CollapsibleToolbar/componets/aiChat.vue

@@ -32,7 +32,7 @@
                                 keySplines=".33,.66,.66,1;.33,0,.66,.33" values="12;6;12" />
                         </circle>
                     </svg>
-                    <button class="confirm-btn" v-if="message.jsonData?.gType !== 'chat' && !message.chatloading && message.aiContent"
+                    <button class="confirm-btn" :class="{ disabled: message.jsonData?.isGenerate }" v-if="message.jsonData?.gType !== 'chat' && !message.chatloading && message.aiContent"
                         @click="generate(message)">{{ message.gLoading ? lang.ssLoading : lang.ssConfirm}}</button>
                 </div>
             </div>
@@ -133,6 +133,7 @@ interface ChatMessage {
     }>
     jsonData?: {
         gType?: string
+        isGenerate?: boolean
         headUrl?: string
         assistantName?: string
         files?: Array<{
@@ -338,13 +339,15 @@ const sendAction = async (action: string) => {
     // generate_qa // generate_choice_question
     if (gType.value !== 'chat') {
       messages.value.at(-1).jsonData = {
-        gType: gType.value
+        gType: gType.value,
+        isGenerate: false
       }
     }
   }
   else {
     messages.value.at(-1).jsonData = {
-      gType: gType.value
+      gType: gType.value,
+      isGenerate: false
     }
   }
 
@@ -381,7 +384,7 @@ const { createSlide } = useSlideHandler()
 const { createFrameElement } = useCreateElement()
 
 const generate = (message: ChatMessage) => {
-  if (message.gLoading) {
+  if (message.gLoading || message.jsonData?.isGenerate) {
     return
   }
   message.gLoading = true
@@ -401,6 +404,7 @@ const generate = (message: ChatMessage) => {
         createSlide()
         createFrameElement(url, 45)
         message.gLoading = false
+        message.jsonData.isGenerate = true
       })
     })
   }
@@ -420,6 +424,7 @@ const generate = (message: ChatMessage) => {
         createSlide()
         createFrameElement(url, 15)
         message.gLoading = false
+        message.jsonData.isGenerate = true
       })
     })
   }
@@ -777,6 +782,10 @@ onMounted(() => {
     &:hover {
         background: #E68A00;
     }
+    &.disabled {
+        background: #9CA3AF;
+        cursor: not-allowed;
+    }
 }
 
 ul {
@@ -814,7 +823,7 @@ ul {
         transition: all 0.2s ease;
 
         &:hover {
-            background: #F3F4F6;
+            background: #fff4e5;
         }
     }
 }