From de5160ead0192a75a19c8439130f0c46f54f6f4a Mon Sep 17 00:00:00 2001
From: JOJO <1498581755@qq.com>
Date: Mon, 13 Jul 2026 00:48:05 +0800
Subject: [PATCH] =?UTF-8?q?feat(ui):=20=E5=AD=90=E6=99=BA=E8=83=BD?=
 =?UTF-8?q?=E4=BD=93=E6=B6=88=E6=81=AF=20Markdown=20=E6=B8=B2=E6=9F=93?=
 =?UTF-8?q?=E4=B8=8E=E6=B0=94=E6=B3=A1=E5=B1=95=E5=BC=80=E6=B7=A1=E5=87=BA?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 子智能体输出内容使用 MarkdownRenderer 渲染
- 修复多智能体气泡内 Markdown 元素底色适配气泡背景
- 修复对话区域 Markdown 行内代码与加粗样式
- 用户消息/子智能体消息气泡展开按钮增加横纵向淡出效果
- 展开/收起时按钮位置通过 margin 平滑过渡
---
 static/src/components/chat/ChatArea.vue       |   7 +-
 .../styles/components/chat/_chat-area.scss    | 217 +++++++++++++++++-
 2 files changed, 216 insertions(+), 8 deletions(-)

diff --git a/static/src/components/chat/ChatArea.vue b/static/src/components/chat/ChatArea.vue
index 3cc1a72..1edb7e8 100644
--- a/static/src/components/chat/ChatArea.vue
+++ b/static/src/components/chat/ChatArea.vue
@@ -65,7 +65,10 @@
                 :ref="(el) => registerUserBubbleRef(msg, index, el)"
               >
                 <template v-if="isMultiAgentMessage(msg)">
-                  {{ multiAgentBubbleContent(msg) }}
+                  <MarkdownRenderer
+                    :content="multiAgentBubbleContent(msg)"
+                    :is-streaming="false"
+                  />
                 </template>
                 <template v-else>
                   <span v-html="renderUserMessageContent(msg.content)"></span>
@@ -996,7 +999,7 @@ function isContinuousMultiAgentMessage(message: any, index: number): boolean {
 
 function multiAgentBubbleContent(message: any): string {
   const parsed = parseMultiAgentMessage(message?.content || '');
-  return parsed?.content || message?.content || '';
+  return (parsed?.content || message?.content || '').trim();
 }
 
 const escapeUserHtml = (value: string): string =>
diff --git a/static/src/styles/components/chat/_chat-area.scss b/static/src/styles/components/chat/_chat-area.scss
index fc1443b..7b2adb9 100644
--- a/static/src/styles/components/chat/_chat-area.scss
+++ b/static/src/styles/components/chat/_chat-area.scss
@@ -490,7 +490,7 @@
   align-items: flex-end; /* 靠右对齐 */
 }
 
-/* 多智能体消息：渲染为左侧对话气泡，复用用户消息气泡样式 */
+/* 多智能体消息：左侧对话气泡，内部渲染 Markdown */
 .user-message.user-message--multi-agent {
   align-items: flex-start;
 }
@@ -511,6 +511,152 @@
   align-self: flex-start;
 }
 
+.user-message.user-message--multi-agent .message-text.user-bubble-text .bubble-text {
+  white-space: normal;
+  word-break: normal;
+}
+
+/* 首尾元素贴合气泡内边距，避免 XML 内容换行导致的空段落撑开间距 */
+.user-message.user-message--multi-agent .bubble-text .markdown-text-segment > *:first-child {
+  margin-top: 0;
+}
+
+.user-message.user-message--multi-agent .bubble-text .markdown-text-segment > *:last-child {
+  margin-bottom: 0;
+}
+
+.user-message.user-message--multi-agent .bubble-text p:empty {
+  display: none;
+}
+
+.user-message.user-message--multi-agent .bubble-text h1,
+.user-message.user-message--multi-agent .bubble-text h2,
+.user-message.user-message--multi-agent .bubble-text h3,
+.user-message.user-message--multi-agent .bubble-text h4,
+.user-message.user-message--multi-agent .bubble-text h5,
+.user-message.user-message--multi-agent .bubble-text h6 {
+  margin: 14px 0 6px;
+  font-weight: 600;
+  line-height: 1.3;
+  color: var(--claude-text);
+}
+
+.user-message.user-message--multi-agent .bubble-text h1 {
+  font-size: 1.5em;
+}
+
+.user-message.user-message--multi-agent .bubble-text h2 {
+  font-size: 1.3em;
+}
+
+.user-message.user-message--multi-agent .bubble-text h3 {
+  font-size: 1.15em;
+}
+
+.user-message.user-message--multi-agent .bubble-text h4,
+.user-message.user-message--multi-agent .bubble-text h5,
+.user-message.user-message--multi-agent .bubble-text h6 {
+  font-size: 1em;
+}
+
+.user-message.user-message--multi-agent .bubble-text p {
+  margin: 6px 0;
+}
+
+.user-message.user-message--multi-agent .bubble-text strong,
+.user-message.user-message--multi-agent .bubble-text b {
+  font-weight: 700;
+}
+
+.user-message.user-message--multi-agent .bubble-text em,
+.user-message.user-message--multi-agent .bubble-text i {
+  font-style: italic;
+}
+
+.user-message.user-message--multi-agent .bubble-text ul,
+.user-message.user-message--multi-agent .bubble-text ol {
+  margin: 6px 0;
+  padding-left: 1.4em;
+}
+
+.user-message.user-message--multi-agent .bubble-text li {
+  margin: 3px 0;
+}
+
+.user-message.user-message--multi-agent .bubble-text blockquote {
+  margin: 10px 0;
+  padding: 4px 12px;
+  border-left: 3px solid var(--claude-border);
+  color: var(--claude-text-secondary);
+}
+
+.user-message.user-message--multi-agent .bubble-text hr {
+  margin: 14px 0;
+  border: none;
+  border-top: 1px solid var(--claude-border);
+}
+
+/* 代码/表格底色基于气泡色 chip-bg 派生，避免与气泡背景融为一体 */
+.user-message.user-message--multi-agent .bubble-text code {
+  font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Consolas', 'Menlo', 'Monaco', 'Courier New', monospace;
+  background: color-mix(in srgb, var(--claude-text) 7%, var(--chip-bg));
+  padding: 2px 5px;
+  border-radius: 4px;
+  font-size: 0.9em;
+}
+
+.user-message.user-message--multi-agent .bubble-text pre {
+  background: color-mix(in srgb, var(--claude-text) 5%, var(--chip-bg));
+  padding: 10px 12px;
+  border-radius: 8px;
+  overflow-x: auto;
+  margin: 10px 0;
+}
+
+.user-message.user-message--multi-agent .bubble-text pre code {
+  background: transparent;
+  padding: 0;
+}
+
+.user-message.user-message--multi-agent .bubble-text table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 10px 0;
+  background: transparent;
+}
+
+.user-message.user-message--multi-agent .bubble-text .md-table-scroll,
+.user-message.user-message--multi-agent .bubble-text [data-md-table-scroll='1'] {
+  display: block;
+  width: auto;
+  max-width: none;
+  margin: 10px 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+  border: 1px solid var(--claude-border);
+  border-radius: 8px;
+  background: color-mix(in srgb, var(--claude-text) 4%, var(--chip-bg));
+}
+
+.user-message.user-message--multi-agent .bubble-text .md-table-scroll > table,
+.user-message.user-message--multi-agent .bubble-text [data-md-table-scroll='1'] > table {
+  margin: 0;
+}
+
+.user-message.user-message--multi-agent .bubble-text th,
+.user-message.user-message--multi-agent .bubble-text td {
+  border: 1px solid var(--claude-border);
+  padding: 6px 10px;
+  text-align: left;
+  vertical-align: middle;
+  font-size: 14px;
+}
+
+.user-message.user-message--multi-agent .bubble-text th {
+  font-weight: 600;
+  background: color-mix(in srgb, var(--claude-text) 7%, var(--chip-bg));
+}
+
 .message-block--last
   .user-message:not(.user-message--compact):not(.user-message--brief):not(
     .user-message--multi-agent
@@ -680,29 +826,70 @@
   max-height: var(--bubble-full-height, 9999px);
   white-space: pre-wrap;
   word-break: break-all;
+  position: relative;
 }
 
 .user-message .message-text.user-bubble-text.is-history-loading .bubble-text {
   transition: none !important;
 }
 
-.user-message .message-text.user-bubble-text.is-expandable .bubble-text:not(.is-expanded) {
-  max-height: var(--bubble-fold-height, 240px);
+/* 可折叠气泡容器 */
+.user-message .message-text.user-bubble-text.is-expandable {
+  position: relative;
 }
 
-/* 展开/收起按钮独占一行，不遮挡气泡内容，始终显示 */
+/* 可折叠气泡：多显示一行，底部竖直渐变淡出 */
+.user-message .message-text.user-bubble-text.is-expandable .bubble-text:not(.is-expanded) {
+  max-height: calc(var(--bubble-fold-height, 240px) + 1.6em);
+}
+
+.user-message .message-text.user-bubble-text.is-expandable .bubble-text::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 1.6em;
+  background: linear-gradient(to bottom, transparent, var(--chip-bg));
+  pointer-events: none;
+  opacity: 1;
+  transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.user-message .message-text.user-bubble-text.is-expandable .bubble-text.is-expanded::after {
+  opacity: 0;
+}
+
+/* 展开/收起按钮：
+   - 折叠时：向上浮到 bubble-text 底部，与最后一行文字同处一行，带水平渐变
+   - 展开时：margin-top 恢复为 0，单独一行在内容下方 */
 .user-bubble-expand-row {
   display: flex;
   align-items: center;
   justify-content: flex-end;
-  margin-top: -4px;
-  margin-bottom: -10px;
+  margin-top: 0;
+  margin-bottom: 0;
   opacity: 1;
   transform: none;
   pointer-events: auto;
   align-self: flex-end;
   width: 100%;
   min-height: 22px;
+  transition: margin-top 300ms cubic-bezier(0.4, 0, 0.2, 1), background 300ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.user-message .message-text.user-bubble-text.is-expandable .bubble-text:not(.is-expanded) ~ .user-bubble-expand-row {
+  margin-top: -1.6em;
+  min-height: 1.6em;
+  align-items: flex-end;
+  background: linear-gradient(to right, transparent 0%, transparent 50%, var(--chip-bg) 100%);
+  border-bottom-right-radius: 18px;
+}
+
+.user-message .message-text.user-bubble-text.is-expandable .bubble-text.is-expanded ~ .user-bubble-expand-row {
+  margin-top: 0;
+  background: transparent;
+  border-bottom-right-radius: 0;
 }
 
 .user-bubble-expand-row .user-bubble-expand-btn {
@@ -1461,6 +1648,24 @@ show-html:not([data-rendered='1'])[ratio='3:4'] {
   overflow-x: hidden;
 }
 
+/* Markdown 行内代码与加粗：在对话区域背景下给出明确对比 */
+.text-output .text-content :not(pre) > code {
+  font-family:
+    'JetBrains Mono', 'SF Mono', 'Fira Code', 'Consolas', 'Menlo', 'Monaco', 'Courier New',
+    monospace;
+  background: var(--surface-muted);
+  color: var(--text-primary);
+  padding: 2px 5px;
+  border-radius: 4px;
+  font-size: 0.9em;
+}
+
+.text-output .text-content strong,
+.text-output .text-content b {
+  font-weight: 700;
+  color: var(--text-primary);
+}
+
 .text-output .text-content .code-block-wrapper {
   margin-right: calc(var(--chat-content-x) * -1);
   margin-left: calc(var(--chat-content-x) * -1);