From 07a203ab91a8b50bec3740c98ace4f16ec04f72a Mon Sep 17 00:00:00 2001
From: Lexcubia <lexcubia@gmail.com>
Date: Sun, 27 Apr 2025 18:12:29 +0800
Subject: [PATCH] =?UTF-8?q?refactor(chat):=20=E9=87=8D=E6=9E=84=E8=AF=84?=
 =?UTF-8?q?=E4=BB=B7=E6=8C=89=E9=92=AE=E5=B9=B6=E6=B7=BB=E5=8A=A0=E5=85=A8?=
 =?UTF-8?q?=E5=B1=80=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增 EvaluationButton 组件，用于替换 ChatInterface 中的评价按钮
- 在 global.scss 中添加 typing-indicator 和 evaluation 相关样式
- 调整 ChatInterface 样式，为后续添加功能做准备
---
 src/styles/global.scss                        | 19 ++++
 src/views/chat/ChatInterface.vue              | 87 ++++++++++---------
 .../chat/components/EvaluationButton.vue      | 51 +++++++++++
 3 files changed, 114 insertions(+), 43 deletions(-)
 create mode 100644 src/styles/global.scss
 create mode 100644 src/views/chat/components/EvaluationButton.vue

diff --git a/src/styles/global.scss b/src/styles/global.scss
new file mode 100644
index 0000000..ed3eb12
--- /dev/null
+++ b/src/styles/global.scss
@@ -0,0 +1,19 @@
+.typing-indicator {
+  span {
+    width: 4px;
+    height: 4px;
+    background: var(--el-color-primary);
+    border-radius: 50%;
+    display: inline-block;
+    margin: 0 1px;
+    animation: bounce 1.4s infinite ease-in-out;
+  }
+  
+  span:nth-child(1) { animation-delay: -0.32s; }
+  span:nth-child(2) { animation-delay: -0.16s; }
+}
+
+@keyframes bounce {
+  0%, 80%, 100% { transform: scale(0.8); }
+  40% { transform: scale(1.2); }
+} 
\ No newline at end of file
diff --git a/src/views/chat/ChatInterface.vue b/src/views/chat/ChatInterface.vue
index 6bdc6be..ad6937a 100644
--- a/src/views/chat/ChatInterface.vue
+++ b/src/views/chat/ChatInterface.vue
@@ -26,18 +26,17 @@
                 </div>
                 <div class="message-text">{{ message.question }}</div>
               </div>
-              <!-- 改进建议部分 -->
-              <el-button type="primary" link @click="chatStore.toggleEvaluation(message.messageId)" class="evaluation-toggle-btn">
-                改进建议
-                <el-icon v-if="!['pingfen', 'zongjie'].includes(message?.respondingType)">
-                  <component :is="message.showEvaluation ? CaretBottom : CaretRight" />
-                </el-icon>
-                <span v-else class="typing-indicator evaluation-icon">
-                    <span></span><span></span><span></span>
-                </span>
-              </el-button>
+              <div class="message-actions">
+                <!-- 改进建议 -->
+                <EvaluationButton 
+                  :show-evaluation="message.showEvaluation"
+                  :responding-type="message.respondingType"
+                  @toggle="chatStore.toggleEvaluation(message.messageId)"
+                />
+              </div>
               <!-- 评价总结内容 -->
               <div v-if="message.showEvaluation && (message.pingfen || message.zongjie)" class="evaluation-section">
+                <el-button class="evaluation-close-btn" type="info" size="small" circle :icon="Close" @click="chatStore.toggleEvaluation(message.messageId)" />
                 <div class="evaluation-content">
                   <div class="evaluation-text pingfen" v-html="formatMarkdown(message.pingfen, 'pingfen')"></div>
                   <div class="evaluation-text zongjie" v-html="formatMarkdown(message.zongjie, 'zongjie')"></div>
@@ -65,6 +64,7 @@
                   </span>
                 </div>
               </div>
+              <div class="message-actions"></div>
             </div>
           </div>
         </div>
@@ -117,8 +117,9 @@ import { useChatStore } from '@/store/chat'
 import ChatHeader from '@/views/chat/components/ChatHeader.vue'
 import ChatInput from '@/views/chat/components/ChatInput.vue'
 import VoiceInput from '@/views/chat/components/VoiceInput.vue'
+import EvaluationButton from '@/views/chat/components/EvaluationButton.vue'
 import { ElTag, ElButton, ElAvatar, ElIcon } from 'element-plus'
-import { CaretBottom, CaretRight, Microphone, ChatDotSquare } from '@element-plus/icons-vue'
+import { Microphone, ChatDotSquare, Close } from '@element-plus/icons-vue'
 import userAvatarUrl from '@/assets/user.png';
 import customAvatarUrl from '@/assets/custom.png';
 
@@ -635,41 +636,15 @@ html.dark .background-section .background-content {
       }
     }
   }
+}
 
-  .evaluation-toggle-btn {
-    padding: 6px 0; // Adjust padding for link button
-    font-size: 13px;
-
-    .el-icon {
-      margin-left: 4px;
-      vertical-align: middle;
-    }
-
-    .evaluation-icon {
-      &.typing-indicator {
-        padding: 0;
-        display: inline-flex;
-        align-items: center;
-        gap: 2px;
-        margin-left: 4px;
-        vertical-align: middle;
-        
-        span {
-          width: 4px;
-          height: 4px;
-          background: var(--el-color-primary);
-          border-radius: 50%;
-          animation: bounce 1.4s infinite ease-in-out;
-          
-          &:nth-child(1) { animation-delay: -0.32s; }
-          &:nth-child(2) { animation-delay: -0.16s; }
-        }
-      }
-    }
-  }
+.message-wrapper.user .message-text-wrapper {
+  display: flex;
+  align-items: center;
 }
 
 .evaluation-section {
+  position: relative;
   margin-top: 12px;
   font-size: 14px;
   background: var(--el-bg-color);
@@ -678,7 +653,6 @@ html.dark .background-section .background-content {
   box-shadow: var(--el-box-shadow-light);
   max-width: 100%;
   border: 1px solid var(--el-border-color-lighter);
-  position: relative;
 
   .evaluation-content {
     padding: 16px 24px 16px 16px;
@@ -745,6 +719,21 @@ html.dark .background-section .background-content {
   }
 }
 
+.evaluation-close-btn {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  z-index: 2;
+  font-size: 14px;
+  background: transparent;
+  border: none;
+  color: var(--el-text-color-primary);
+  transition: color 0.2s;
+}
+.evaluation-close-btn:hover {
+  color: var(--el-color-primary);
+}
+
 .input-area-wrapper {
   display: flex;
   align-items: flex-end;
@@ -948,4 +937,16 @@ html.dark .background-section .background-content {
   0%, 80%, 100% { transform: scale(0.8); }
   40% { transform: scale(1.2); }
 }
+
+.message-actions {
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.2s;
+}
+
+.message-content:hover .message-actions,
+.message-content:focus-within .message-actions {
+  opacity: 1;
+  pointer-events: auto;
+}
 </style> 
\ No newline at end of file
diff --git a/src/views/chat/components/EvaluationButton.vue b/src/views/chat/components/EvaluationButton.vue
new file mode 100644
index 0000000..657e813
--- /dev/null
+++ b/src/views/chat/components/EvaluationButton.vue
@@ -0,0 +1,51 @@
+<template>
+  <el-button type="primary" link @click="$emit('toggle')" class="evaluation-toggle-btn">
+    改进建议
+    <el-icon v-if="!['pingfen', 'zongjie'].includes(respondingType)">
+      <component :is="showEvaluation ? CaretBottom : CaretRight" />
+    </el-icon>
+    <span v-else class="typing-indicator evaluation-icon">
+      <span></span><span></span><span></span>
+    </span>
+  </el-button>
+</template>
+
+<script setup>
+import { CaretBottom, CaretRight } from '@element-plus/icons-vue'
+
+defineProps({
+  showEvaluation: {
+    type: Boolean,
+    default: false
+  },
+  respondingType: {
+    type: String,
+    default: ''
+  }
+})
+
+defineEmits(['toggle'])
+</script>
+
+<style lang="scss" scoped>
+.evaluation-toggle-btn {
+  padding: 6px 0;
+  font-size: 13px;
+
+  .el-icon {
+    margin-left: 4px;
+    vertical-align: middle;
+  }
+
+  .evaluation-icon {
+    &.typing-indicator {
+      padding: 0;
+      display: inline-flex;
+      align-items: center;
+      gap: 2px;
+      margin-left: 4px;
+      vertical-align: middle;
+    }
+  }
+}
+</style> 
\ No newline at end of file