From ab9ac965c81bd4f94c6b0105881b6f3c02d877ab Mon Sep 17 00:00:00 2001
From: ViperEkura <3081035982@qq.com>
Date: Tue, 21 Apr 2026 18:24:41 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E4=BC=98=E5=8C=96=E5=89=8D=E7=AB=AF?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/RoomMessageBubble.vue      | 79 +++------------
 dashboard/src/style.css                       |  3 +-
 dashboard/src/views/RoomView.vue              | 96 ++-----------------
 3 files changed, 22 insertions(+), 156 deletions(-)

diff --git a/dashboard/src/components/RoomMessageBubble.vue b/dashboard/src/components/RoomMessageBubble.vue
index 8a9c924..235e2c7 100644
--- a/dashboard/src/components/RoomMessageBubble.vue
+++ b/dashboard/src/components/RoomMessageBubble.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="message-bubble" :class="message.sender_type">
-    <div class="message-avatar">
+    <div class="avatar">
       {{ message.sender_name?.charAt(0).toUpperCase() }}
     </div>
     <div class="message-container">
@@ -9,10 +9,16 @@
           v-if="message.process_steps && message.process_steps.length > 0"
           :process-steps="message.process_steps"
         />
-        <div v-else class="md-content message-text" v-html="renderedContent"></div>
+        <!-- Fallback path -->
+        <template v-else>
+          <ProcessBlock
+            v-if="message.tool_calls && message.tool_calls.length > 0"
+            :tool-calls="message.tool_calls"
+          />
+          <div class="md-content" v-html="renderedContent"></div>
+        </template>
       </div>
       <div class="message-footer">
-        <span class="sender-name">{{ message.sender_name }}</span>
         <span class="message-time">{{ formatTime(message.created_at) }}</span>
         <button class="ghost-btn accent" @click="copyContent" title="复制">
           <span v-html="copyIcon"></span>
@@ -57,75 +63,16 @@ const copyIcon = `<svg viewBox="0 0 24 24" width="14" height="14" fill="none" st
 </script>
 
 <style scoped>
-.message-bubble {
-  display: flex;
-  gap: 0.75rem;
-  margin-bottom: 1.25rem;
-}
-
-.message-bubble.user {
-  flex-direction: row-reverse;
-}
-
-.message-avatar {
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-  background: linear-gradient(135deg, #667eea, #764ba2);
-  color: white;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 0.9rem;
-  flex-shrink: 0;
-}
-
-.message-bubble.user .message-avatar {
-  background: linear-gradient(135deg, #11998e, #38ef7d);
-}
-
-.message-container {
-  max-width: 70%;
-}
-
-.message-body {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-.message-text {
-  padding: 0.75rem 1rem;
-  background: var(--bg-primary);
-  border-radius: 12px;
-  border: 1px solid var(--border-light);
-  line-height: 1.6;
-}
-
-.message-bubble.user .message-text {
-  background: var(--accent-primary);
-  color: white;
-  border: none;
-}
-
+/* 组件只需要 message-footer 和 ghost-btn 样式，其他依赖全局样式 */
 .message-footer {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
-  margin-top: 0.25rem;
-  font-size: 0.75rem;
+  gap: 8px;
+  padding: 6px 0 0;
+  font-size: 12px;
   color: var(--text-tertiary);
 }
 
-.message-bubble.user .message-footer {
-  flex-direction: row-reverse;
-}
-
-.sender-name {
-  font-weight: 500;
-  color: var(--text-secondary);
-}
-
 .ghost-btn {
   background: transparent;
   border: none;
diff --git a/dashboard/src/style.css b/dashboard/src/style.css
index da40f43..4c9b1aa 100644
--- a/dashboard/src/style.css
+++ b/dashboard/src/style.css
@@ -370,7 +370,8 @@ body {
   font-size: 12px;
 }
 
-.assistant .avatar {
+.assistant .avatar,
+.agent .avatar {
   background: var(--avatar-gradient);
   color: white;
   font-size: 12px;
diff --git a/dashboard/src/views/RoomView.vue b/dashboard/src/views/RoomView.vue
index 194dafb..5c83e78 100644
--- a/dashboard/src/views/RoomView.vue
+++ b/dashboard/src/views/RoomView.vue
@@ -143,16 +143,18 @@
 
           <!-- 正在输入的流式消息 -->
           <div v-for="(stream, agentId) in streamingMessages" :key="'stream-' + agentId"
-            class="message-wrapper agent streaming">
-            <div class="message-avatar">
+            class="message-bubble assistant streaming">
+            <div class="avatar">
               {{ stream.agentName?.charAt(0).toUpperCase() }}
             </div>
-            <div class="message-content">
-              <div class="message-meta">
+            <div class="message-container">
+              <div class="message-body">
+                <div class="md-content" v-html="renderMarkdown(stream.content)"></div>
+              </div>
+              <div class="message-footer">
                 <span class="sender-name">{{ stream.agentName }}</span>
                 <span class="typing-indicator">正在输入...</span>
               </div>
-              <div class="message-text" v-html="renderMarkdown(stream.content)"></div>
             </div>
           </div>
         </div>
@@ -768,90 +770,6 @@ onUnmounted(() => {
   padding: 1.5rem;
 }
 
-/* 流式消息（未使用组件的部分） */
-.message-wrapper {
-  display: flex;
-  gap: 0.75rem;
-  margin-bottom: 1.25rem;
-}
-
-.message-wrapper.user {
-  flex-direction: row-reverse;
-}
-
-.message-avatar {
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-  background: linear-gradient(135deg, #667eea, #764ba2);
-  color: white;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 0.9rem;
-  flex-shrink: 0;
-}
-
-.message-wrapper.user .message-avatar {
-  background: linear-gradient(135deg, #11998e, #38ef7d);
-}
-
-.message-content {
-  max-width: 70%;
-}
-
-.message-meta {
-  display: flex;
-  gap: 0.5rem;
-  margin-bottom: 0.25rem;
-  font-size: 0.75rem;
-}
-
-.message-wrapper.user .message-meta {
-  flex-direction: row-reverse;
-}
-
-.message-text {
-  padding: 0.75rem 1rem;
-  background: var(--bg-primary);
-  border-radius: 12px;
-  border: 1px solid var(--border-light);
-  line-height: 1.6;
-}
-
-.message-wrapper.user .message-text {
-  background: var(--accent-primary);
-  color: white;
-  border: none;
-}
-
-.message-footer {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  margin-top: 0.25rem;
-  font-size: 0.75rem;
-  color: var(--text-tertiary);
-}
-
-.ghost-btn {
-  background: transparent;
-  border: none;
-  cursor: pointer;
-  padding: 4px;
-  border-radius: 4px;
-  color: var(--text-tertiary);
-  transition: all 0.15s;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.ghost-btn:hover {
-  background: var(--bg-hover);
-  color: var(--accent-primary);
-}
-
 /* Input */
 .input-area {
   padding: 1rem 1.5rem;