优化思考状态展开与收起交互

src/pages/RiskAssistantPage.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import axios from "axios";
+import { ChevronDown } from "@lucide/vue";
 import { computed, nextTick, onActivated, onMounted, ref, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
 
@@ -138,10 +139,6 @@ function toggleReply(messageId: number) {
   expandedReplies.value = next;
 }
 
-function canCollapseReply(content: string) {
-  return content.trim().length > 90;
-}
-
 function isMessageThinking(messageId: number, index: number) {
   const messages = conversation.value?.messages ?? [];
   return (
@@ -530,72 +527,41 @@ async function scrollToBottom(behavior: "smooth" | "auto" = "smooth") {
                 >
               </div>
               <div
-                v-if="
-                  message.content &&
-                  (message.riskResult ||
-                    message.responseCard ||
-                    isMessageThinking(message.id, messageIndex))
-                "
+                v-if="message.content || isMessageThinking(message.id, messageIndex)"
                 class="assistant-thinking"
               >
                 <button
                   type="button"
                   class="assistant-thinking__header"
-                  :disabled="
-                    isMessageThinking(message.id, messageIndex) ||
-                    !canCollapseReply(message.content)
-                  "
                   @click="toggleReply(message.id)"
                 >
-                  <span v-if="isMessageThinking(message.id, messageIndex)"
-                    >思考中…</span
+                  <span
+                    v-if="isMessageThinking(message.id, messageIndex)"
+                    class="assistant-thinking__status"
+                    >思考中</span
                   >
                   <span v-else>
-                    已完成<span v-if="thinkingDuration(messageIndex)">
+                    已完成<span v-if="thinkingDuration(messageIndex)" class="assistant-thinking__duration">
                       {{ thinkingDuration(messageIndex) }}s</span
                     >
                   </span>
-                  <span
-                    v-if="canCollapseReply(message.content)"
+                  <ChevronDown
+                    :size="13"
                     class="assistant-thinking__arrow"
-                    >{{ expandedReplies.has(message.id) ? "⌄" : "›" }}</span
-                  >
+                    :class="{ expanded: expandedReplies.has(message.id) }"
+                  />
                 </button>
                 <div
+                  v-if="message.content"
                   class="assistant-bubble"
                   :class="{
                     'assistant-bubble--collapsed':
-                      canCollapseReply(message.content) &&
                       !expandedReplies.has(message.id),
                   }"
                 >
                   {{ message.content }}
                 </div>
               </div>
-              <div
-                v-else-if="message.content"
-                class="assistant-bubble"
-                :class="{
-                  'assistant-bubble--collapsed':
-                    canCollapseReply(message.content) &&
-                    !expandedReplies.has(message.id),
-                }"
-              >
-                {{ message.content }}
-              </div>
-              <button
-                v-if="
-                  message.content &&
-                  !message.riskResult &&
-                  !message.responseCard &&
-                  canCollapseReply(message.content)
-                "
-                type="button"
-                class="reply-toggle"
-                @click="toggleReply(message.id)"
-              >
-                {{ expandedReplies.has(message.id) ? "收起" : "展开全文" }}
-              </button>
               <RiskAnalysisCard
                 v-if="message.riskResult"
                 :result="message.riskResult"
@@ -870,36 +836,53 @@ async function scrollToBottom(behavior: "smooth" | "auto" = "smooth") {
   display: flex;
   width: auto;
   align-items: center;
-  gap: 5px;
+  gap: 4px;
   border: 0;
-  margin: 0 0 5px 2px;
-  padding: 0;
+  margin: 0 0 6px;
+  padding: 3px 7px;
+  border-radius: 6px;
   background: transparent;
   color: var(--color-text-muted);
   font-size: 11px;
   font-family: inherit;
   cursor: pointer;
+  transition: background 0.15s, color 0.15s;
 }
 
-.assistant-thinking__header:disabled {
-  cursor: default;
+.assistant-thinking__header:hover {
+  background: var(--color-bg-warm);
+  color: var(--color-text-secondary);
 }
 
 .assistant-thinking__arrow {
   color: var(--color-text-faint);
-  font-size: 15px;
-  line-height: 1;
+  transition: transform 0.18s ease;
 }
 
-.reply-toggle {
-  display: block;
-  margin-top: 4px;
-  border: 0;
-  padding: 0;
-  background: transparent;
-  color: var(--color-accent);
-  font-size: 11px;
-  cursor: pointer;
+.assistant-thinking__arrow.expanded {
+  transform: rotate(180deg);
+}
+
+.assistant-thinking__status::before {
+  display: inline-block;
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  margin-right: 5px;
+  background: var(--color-accent);
+  content: "";
+  animation: thinking-pulse 1.1s ease-in-out infinite;
+}
+
+.assistant-thinking__duration {
+  margin-left: 3px;
+  color: var(--color-text-faint);
+}
+
+@keyframes thinking-pulse {
+  50% {
+    opacity: 0.35;
+  }
 }
 
 .semantic-strip {