From 8fa3a93eec97e929f9066a13e936c4db6d44e2c5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=BB=9D=E5=B0=98?= <237809796@qq.com>
Date: Thu, 2 Jul 2026 13:22:32 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D:=20=E7=94=A8=E6=88=B7?=
 =?UTF-8?q?=E6=B6=88=E6=81=AF=E6=B0=94=E6=B3=A1=E5=A4=B4=E5=83=8F=E4=BD=8D?=
 =?UTF-8?q?=E7=BD=AE(MessageItem=E6=8F=90=E5=8F=96=E5=90=8Escoped=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E7=BC=BA=E5=A4=B1)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- MessageItem.vue 提取时未带 scoped CSS,MessageList 的 scoped 样式不穿透子组件

- 补齐用户消息 flex-direction:row-reverse(头像靠右)+ 完整 scoped 样式
---
 src/components/ai/MessageItem.vue | 130 ++++++++++++++++++++++++++++++
 1 file changed, 130 insertions(+)

diff --git a/src/components/ai/MessageItem.vue b/src/components/ai/MessageItem.vue
index 3ac27c2..f854fbd 100644
--- a/src/components/ai/MessageItem.vue
+++ b/src/components/ai/MessageItem.vue
@@ -169,3 +169,133 @@ function imgAlt(img: ImageContentPart): string {
     </div>
   </div>
 </template>
+
+<style scoped>
+/* 用户消息:头像在右(整条靠右) */
+.ai-msg-user {
+  display: flex;
+  gap: 8px;
+  align-items: flex-start;
+  flex-direction: row-reverse;
+}
+/* AI 消息:头像在左 */
+.ai-msg-ai {
+  display: flex;
+  gap: 8px;
+  align-items: flex-start;
+}
+/* 头像通用 */
+.ai-msg-avatar {
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+.ai-msg-avatar--user {
+  background: var(--df-info-bg, rgba(100,181,246,0.15));
+  color: var(--df-info, #64b5f6);
+}
+.ai-msg-avatar--ai {
+  background: var(--df-accent-bg, rgba(108,99,255,0.15));
+  color: var(--df-accent, #6c63ff);
+}
+/* 气泡通用 */
+.ai-msg-bubble {
+  border-radius: 10px;
+  padding: 8px 12px;
+  word-break: break-word;
+  max-width: 80%;
+}
+.ai-msg-bubble--user {
+  background: var(--df-info-bg, rgba(100,181,246,0.1));
+  color: var(--df-text);
+}
+.ai-msg-bubble--ai {
+  background: var(--df-bg-secondary, #1f1f1f);
+  color: var(--df-text);
+}
+.ai-msg-bubble--error {
+  border: 1px solid var(--df-danger, #f44336);
+}
+/* chip */
+.ai-msg-chip {
+  display: inline-block;
+  padding: 1px 6px;
+  border-radius: 4px;
+  font-size: 11px;
+  margin: 0 2px;
+  background: var(--df-accent-bg, rgba(108,99,255,0.1));
+  color: var(--df-accent, #6c63ff);
+}
+/* 图片 */
+.ai-msg-images {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  margin-top: 4px;
+}
+.ai-msg-image {
+  max-width: 200px;
+  max-height: 200px;
+  border-radius: 6px;
+}
+/* 复制按钮 */
+.ai-copy-btn {
+  opacity: 0;
+  transition: opacity 0.15s;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 2px;
+  color: var(--df-text-dim);
+}
+.ai-msg-user:hover .ai-copy-btn,
+.ai-msg-ai:hover .ai-copy-btn {
+  opacity: 1;
+}
+/* 操作按钮区 */
+.ai-msg-actions {
+  display: flex;
+  gap: 4px;
+  margin-top: 4px;
+}
+.ai-regen-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 2px;
+  color: var(--df-text-dim);
+}
+.ai-regen-btn:hover {
+  color: var(--df-text);
+}
+/* model badge */
+.ai-msg-model-badge {
+  font-size: 10px;
+  color: var(--df-text-dim);
+  margin-left: 4px;
+}
+/* 光标 */
+.ai-cursor-blink {
+  animation: blink 1s step-end infinite;
+  color: var(--df-accent);
+}
+@keyframes blink {
+  50% { opacity: 0; }
+}
+/* 系统消息 */
+.ai-msg-system {
+  padding: 8px 12px;
+  border-left: 3px solid var(--df-accent);
+  background: var(--df-bg-secondary);
+  border-radius: 4px;
+}
+.ai-msg-system-label {
+  font-size: 11px;
+  color: var(--df-text-dim);
+  margin-bottom: 4px;
+}
+</style>