From a7ed6b8c767a01001fab5321d09f5832b0b2b108 Mon Sep 17 00:00:00 2001
From: Soulter <905617992@qq.com>
Date: Mon, 2 Feb 2026 14:11:17 +0800
Subject: [PATCH] fix: reasoning block style

---
 dashboard/src/components/chat/MessageList.vue |  1 +
 .../MessagePartsRenderer.vue                  | 34 ++++++++
 .../message_list_comps/ReasoningBlock.vue     | 77 +++++++++++++++----
 3 files changed, 98 insertions(+), 14 deletions(-)

diff --git a/dashboard/src/components/chat/MessageList.vue b/dashboard/src/components/chat/MessageList.vue
index d6191506b..42129d792 100644
--- a/dashboard/src/components/chat/MessageList.vue
+++ b/dashboard/src/components/chat/MessageList.vue
@@ -92,6 +92,7 @@
                                 <!-- Reasoning Block (Collapsible) - 放在最前面 -->
                                 <ReasoningBlock v-if="msg.content.reasoning && msg.content.reasoning.trim()"
                                     :reasoning="msg.content.reasoning" :is-dark="isDark"
+                                    class="mt-2"
                                     :initial-expanded="isReasoningExpanded(index)" />
 
                                 <MessagePartsRenderer :parts="msg.content.message" :is-dark="isDark"
diff --git a/dashboard/src/components/chat/message_list_comps/MessagePartsRenderer.vue b/dashboard/src/components/chat/message_list_comps/MessagePartsRenderer.vue
index a57f81ced..5fd7f59be 100644
--- a/dashboard/src/components/chat/message_list_comps/MessagePartsRenderer.vue
+++ b/dashboard/src/components/chat/message_list_comps/MessagePartsRenderer.vue
@@ -379,4 +379,38 @@ const getRenderParts = (messageParts) => {
     align-items: center;
 }
 
+
+/* 文件附件样式 */
+.file-attachments,
+.embedded-files {
+    margin-top: 8px;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+}
+
+.file-attachment,
+.embedded-file {
+    display: flex;
+    align-items: center;
+}
+
+.file-link {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 8px 12px;
+    background-color: rgba(var(--v-theme-primary), 0.08);
+    border: 1px solid rgba(var(--v-theme-primary), 0.2);
+    border-radius: 8px;
+    text-decoration: none;
+    font-size: 13px;
+    transition: all 0.2s ease;
+    max-width: 320px;
+}
+
+.file-link-download {
+    cursor: pointer;
+}
+
 </style>
diff --git a/dashboard/src/components/chat/message_list_comps/ReasoningBlock.vue b/dashboard/src/components/chat/message_list_comps/ReasoningBlock.vue
index d9d180259..2f924d551 100644
--- a/dashboard/src/components/chat/message_list_comps/ReasoningBlock.vue
+++ b/dashboard/src/components/chat/message_list_comps/ReasoningBlock.vue
@@ -1,18 +1,15 @@
 <template>
-    <div class="mb-3 mt-1.5 border border-gray-200 dark:border-gray-700 rounded-2xl overflow-hidden w-fit"
-        :class="{ 'dark:bg-purple-900/8': isDark, 'bg-purple-50/50': !isDark }">
-        <div class="inline-flex items-center px-2 py-2 cursor-pointer select-none rounded-2xl transition-colors hover:bg-purple-50/80 dark:hover:bg-purple-900/15"
-            @click="toggleExpanded">
-            <v-icon size="small" class="mr-1.5 text-purple-600 dark:text-purple-400 transition-transform"
-                :class="{ 'rotate-90': isExpanded }">
+    <div class="reasoning-block" :class="{ 'reasoning-block--dark': isDark }">
+        <div class="reasoning-header" @click="toggleExpanded">
+            <v-icon size="small" class="reasoning-icon" :class="{ 'rotate-90': isExpanded }">
                 mdi-chevron-right
             </v-icon>
-            <span class="text-sm font-medium text-purple-600 dark:text-purple-400 tracking-wide">
+            <span class="reasoning-title">
                 {{ tm('reasoning.thinking') }}
             </span>
         </div>
-        <div v-if="isExpanded" class="px-3 border-t border-gray-200 dark:border-gray-700 text-gray-600 dark:text-gray-400 animate-fade-in italic">
-            <MarkdownRender :content="reasoning" class="reasoning-text markdown-content text-sm leading-relaxed"
+        <div v-if="isExpanded" class="reasoning-content animate-fade-in">
+            <MarkdownRender :content="reasoning" class="reasoning-text markdown-content"
                 :typewriter="false" :is-dark="isDark" :style="isDark ? { opacity: '0.85' } : {}" />
         </div>
     </div>
@@ -47,6 +44,63 @@ const toggleExpanded = () => {
 </script>
 
 <style scoped>
+
+
+/* Reasoning 区块样式 */
+.reasoning-container {
+    margin-bottom: 12px;
+    margin-top: 6px;
+    border: 1px solid var(--v-theme-border);
+    border-radius: 20px;
+    overflow: hidden;
+    width: fit-content;
+}
+
+.reasoning-header {
+    display: inline-flex;
+    align-items: center;
+    padding: 8px 8px;
+    cursor: pointer;
+    user-select: none;
+    transition: background-color 0.2s ease;
+    border-radius: 20px;
+}
+
+.reasoning-header:hover {
+    background-color: rgba(103, 58, 183, 0.08);
+}
+
+.reasoning-header.is-dark:hover {
+    background-color: rgba(103, 58, 183, 0.15);
+}
+
+.reasoning-icon {
+    margin-right: 6px;
+    color: var(--v-theme-secondary);
+    transition: transform 0.2s ease;
+}
+
+.reasoning-label {
+    font-size: 13px;
+    font-weight: 500;
+    color: var(--v-theme-secondary);
+    letter-spacing: 0.3px;
+}
+
+.reasoning-content {
+    padding: 0px 12px;
+    border-top: 1px solid var(--v-theme-border);
+    color: gray;
+    animation: fadeIn 0.2s ease-in-out;
+    font-style: italic;
+}
+
+.reasoning-text {
+    font-size: 14px;
+    line-height: 1.6;
+    color: var(--v-theme-secondaryText);
+}
+
 .animate-fade-in {
     animation: fadeIn 0.2s ease-in-out;
 }
@@ -65,9 +119,4 @@ const toggleExpanded = () => {
     transform: rotate(90deg);
 }
 
-.reasoning-text {
-    font-size: 14px;
-    line-height: 1.6;
-    color: var(--v-theme-secondaryText);
-}
 </style>