From ff73c056e94d3d5b9e9c6b88e9cd3b8a35af2745 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B5=85=E5=BF=B5?= <email@sample.com>
Date: Thu, 20 Aug 2026 15:26:04 +0800
Subject: [PATCH] =?UTF-8?q?feat(chat):=20=E8=81=8A=E5=A4=A9=E6=8E=92?=
 =?UTF-8?q?=E7=89=88=E5=8D=87=E7=BA=A7=E5=BE=AE=E4=BF=A1=E6=A0=87=E5=87=86?=
 =?UTF-8?q?(=E5=B7=A6=E5=8F=B3=E5=88=86=E4=BE=A7+=E5=A4=B4=E5=83=8F+?=
 =?UTF-8?q?=E7=BB=BF=E6=B0=94=E6=B3=A1)+is=5Fsend=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- is_send 根因:云客消息方向在 mine 字段(isSend 全 null),归一化加 fallback
  +存量回填 60.7 万行(51万收/16万发)——分侧数据首次完整
- MessageBubble:头像(对方=raw headUrl 在左/自己=默认在右)、自己侧隐藏昵称、
  接收白底描边/发送微信绿 #95ec69、气泡列 max-width 78%
- 实测混合对话:13发(绿+头像右)/7收(白+头像左)全部正确

Co-Authored-By: Claude <noreply@anthropic.com>
---
 yunke-server/scripts/scrape_via_page.py | 10 ++++--
 yunkes/src/components/MessageBubble.vue | 21 +++++++++--
 yunkes/src/style.css                    | 48 +++++++++++++++++++++----
 3 files changed, 68 insertions(+), 11 deletions(-)

diff --git a/yunke-server/scripts/scrape_via_page.py b/yunke-server/scripts/scrape_via_page.py
index 10cd8a4..0d9bfad 100644
--- a/yunke-server/scripts/scrape_via_page.py
+++ b/yunke-server/scripts/scrape_via_page.py
@@ -655,7 +655,10 @@ async def scrape_messages(cookie_str: str, max_conversations: int = 100):
                             # 用发送的 friend_id（与客户表一致）优先，API 返回的 talker 可能脱敏
                             "talker_id": friend_id or row.get("talker") or row.get("oriTalker"),
                             "room_id": None,
-                            "is_send": bool(row.get("isSend", 0)) if row.get("isSend") is not None else None,
+                            "is_send": (
+                                bool(row["isSend"]) if row.get("isSend") is not None
+                                else (bool(row["mine"]) if row.get("mine") is not None else None)
+                            ),
                             "type": _normalize_msg_type(row.get("type")),
                             "type_raw": row.get("type"),
                             "text": row.get("content") or row.get("text") or "",
@@ -744,7 +747,10 @@ def _normalize_group_message(row: dict, owner_id: str, room_id: str) -> dict | N
         "owner_account_id": owner_id,
         "talker_id": talker or None,
         "room_id": row.get("roomid") or room_id,
-        "is_send": bool(row.get("isSend", 0)) if row.get("isSend") is not None else None,
+        "is_send": (
+                                bool(row["isSend"]) if row.get("isSend") is not None
+                                else (bool(row["mine"]) if row.get("mine") is not None else None)
+                            ),
         "type": _normalize_msg_type(row.get("type")),
         "type_raw": row.get("type"),
         "text": row.get("content") or row.get("text") or "",
diff --git a/yunkes/src/components/MessageBubble.vue b/yunkes/src/components/MessageBubble.vue
index 91f0190..db7e017 100644
--- a/yunkes/src/components/MessageBubble.vue
+++ b/yunkes/src/components/MessageBubble.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import { Microphone, VideoPlay, Document, Picture, Paperclip } from '@element-plus/icons-vue'
+import { Microphone, VideoPlay, Document, Picture, Paperclip, User } from '@element-plus/icons-vue'
 import type { Message } from '@/api/types'
 import { formatDuration, formatTime, wechatTypeLabel } from '@/utils/format'
 
@@ -37,6 +37,13 @@ const emit = defineEmits<{ (e: 'open-detail', message: Message): void }>()
 
 const isSend = computed(() => !!props.message.is_send)
 
+/** 对方头像(raw_json.headUrl);自己侧用默认占位(headUrl 语义不保证是自己)。 */
+const peerAvatarUrl = computed(() => {
+  const rj = props.message.raw_json as Record<string, unknown> | null | undefined
+  const u = rj?.headUrl
+  return typeof u === 'string' && u.startsWith('http') ? u : undefined
+})
+
 // Centered (system/divider) rows ignore direction.
 const isCentered = computed(
   () => props.message.type === 'divider' || props.message.type === 'system',
@@ -187,8 +194,17 @@ const typeTagLabel = computed(() => {
          children (image / video / audio / file link) stop propagation so
          their own clicks don't also open the drawer. -->
     <div v-else class="yk-msg__row yk-msg__row--clickable" @click="emit('open-detail', message)">
+      <!-- 头像:对方=raw headUrl;自己=默认占位(row-reverse 时视觉在右) -->
+      <div class="yk-msg__avatar-wrap">
+        <img v-if="!isSend && peerAvatarUrl" class="yk-msg__avatar" :src="peerAvatarUrl" alt="" />
+        <div v-else class="yk-msg__avatar yk-msg__avatar--ph">
+          <el-icon :size="20"><User /></el-icon>
+        </div>
+      </div>
+
+      <div class="yk-msg__body">
       <div class="yk-msg__meta">
-        <span>{{ senderLabel }}</span>
+        <span v-if="!isSend">{{ senderLabel }}</span>
         <span v-if="timeLabel">{{ timeLabel }}</span>
       </div>
 
@@ -299,6 +315,7 @@ const typeTagLabel = computed(() => {
         <el-icon><Picture /></el-icon>
         [{{ typeTagLabel }}]
       </div>
+      </div>
     </div>
   </div>
 </template>
diff --git a/yunkes/src/style.css b/yunkes/src/style.css
index 034505f..3fbd12b 100644
--- a/yunkes/src/style.css
+++ b/yunkes/src/style.css
@@ -142,7 +142,7 @@ a {
 .yk-msg {
   display: flex;
   width: 100%;
-  padding: 6px 0;
+  padding: 4px 0;
 }
 
 .yk-msg--send {
@@ -151,14 +151,46 @@ a {
 
 .yk-msg__row {
   display: flex;
-  flex-direction: column;
-  max-width: 70%;
+  max-width: 78%;
+  gap: 10px;
+  align-items: flex-start;
 }
 
 .yk-msg--send .yk-msg__row {
+  flex-direction: row-reverse;
+}
+
+.yk-msg__body {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.yk-msg--send .yk-msg__body {
   align-items: flex-end;
 }
 
+/* 头像(微信式):对方在左/自己在右(row-reverse),小圆角方形 */
+.yk-msg__avatar-wrap {
+  flex: none;
+}
+
+.yk-msg__avatar {
+  width: 38px;
+  height: 38px;
+  border-radius: 4px;
+  object-fit: cover;
+  display: block;
+  background: #f2f3f5;
+}
+
+.yk-msg__avatar--ph {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #a8abb2;
+}
+
 /* Clickable bubble row — opens the all-fields drawer. Subtle hover so users
  * discover the interaction without changing the bubble's own look. */
 .yk-msg__row--clickable {
@@ -186,8 +218,9 @@ a {
 
 .yk-msg__bubble {
   padding: 8px 12px;
-  border-radius: 10px;
-  background: #f4f4f5;
+  border-radius: 8px;
+  background: #ffffff;
+  border: 1px solid #e5e6eb;
   color: #303133;
   line-height: 1.5;
   word-break: break-word;
@@ -195,8 +228,9 @@ a {
 }
 
 .yk-msg--send .yk-msg__bubble {
-  background: var(--el-color-primary-light-8, #d9ecff);
-  color: #1d2129;
+  background: #95ec69;
+  border-color: #95ec69;
+  color: #0f170a;
 }
 
 .yk-msg__image {