From 8c2ab88790a90fbf2ab076f60173a75ad48feac0 Mon Sep 17 00:00:00 2001
From: liqi <qiqiqiyoucili@163.com>
Date: Thu, 11 Dec 2025 23:50:02 +0800
Subject: [PATCH] =?UTF-8?q?UI=E8=AE=BE=E8=AE=A1=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/chat/MessageBubble.vue |  286 ++--
 src/components/chat/MessageInput.vue  |  792 ++++------
 src/pages/chat/index.vue              | 1940 ++++---------------------
 src/pages/contact/add.vue             |  688 +++++----
 src/pages/contact/detail.vue          |  706 ++++-----
 src/pages/index/index.vue             |   32 +-
 6 files changed, 1566 insertions(+), 2878 deletions(-)

diff --git a/src/components/chat/MessageBubble.vue b/src/components/chat/MessageBubble.vue
index 5884ce7..193de9a 100644
--- a/src/components/chat/MessageBubble.vue
+++ b/src/components/chat/MessageBubble.vue
@@ -1,29 +1,80 @@
 <template>
-  <view class="message-bubble" :class="{ 'is-self': isSelf }">
+  <view class="msg-row" :class="{ 'is-self': isSelf }">
     <!-- 头像 -->
-    <view v-if="!isSelf" class="bubble-avatar">
+    <view class="avatar-wrap" @click="$emit('avatar-click', msg.sender_user_id)">
       <app-avatar
-        :src="avatarUrl"
-        :name="avatarName"
-        :size="72"
-        radius="8rpx"
+          :src="avatar"
+          :name="avatarName"
+          :size="80"
+          radius="24rpx"
       />
     </view>
 
-    <!-- 消息内容 -->
-    <view class="bubble-content" :class="bubbleClass">
-      <slot />
-    </view>
+    <!-- 内容列 -->
+    <view class="content-col" :class="{ 'items-end': isSelf }">
+      <!-- 群聊昵称 -->
+      <text v-if="senderName" class="sender-name">{{ senderName }}</text>
 
-    <!-- 自己的头像 -->
-    <view v-if="isSelf" class="bubble-avatar">
-      <app-avatar
-        :src="selfAvatarUrl"
-        :name="selfAvatarName"
-        :size="72"
-        radius="8rpx"
-        bg-color="#10aeff"
-      />
+      <!-- 气泡实体 -->
+      <view
+          class="bubble"
+          :class="[
+            isSelf ? 'bubble-self' : 'bubble-other',
+            mediaTypeClass
+          ]"
+          @longpress="$emit('long-press', msg)"
+      >
+        <!-- 0. 纯文本 -->
+        <text v-if="msg.message_type === 0" class="msg-text" selectable>{{ msg.content }}</text>
+
+        <!-- 1. 图片 -->
+        <view v-else-if="msg.message_type === 1" class="image-bubble">
+          <image
+              :src="getMediaUrl(msg)"
+              mode="widthFix"
+              class="msg-image"
+              @click="$emit('preview-image', getMediaUrl(msg))"
+          />
+        </view>
+
+        <!-- 2. 语音 -->
+        <view v-else-if="msg.message_type === 2" class="audio-capsule" @click="$emit('play-audio', msg)">
+          <view class="play-icon-box">
+            <svg v-if="playingAudioId !== msg.id" viewBox="0 0 24 24" fill="currentColor" class="play-icon"><path d="M12 2a10 10 0 0 0-10 10 10 10 0 0 0 10 10 10 10 0 0 0 10-10A10 10 0 0 0 12 2zm-2 14.5v-9l6 4.5-6 4.5z"/></svg>
+            <svg v-else viewBox="0 0 24 24" fill="currentColor" class="play-icon"><rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/></svg>
+          </view>
+          <view class="wave-visualizer">
+            <view class="wave-bar" :class="{ animating: playingAudioId === msg.id }"></view>
+            <view class="wave-bar" :class="{ animating: playingAudioId === msg.id }"></view>
+            <view class="wave-bar" :class="{ animating: playingAudioId === msg.id }"></view>
+            <view class="wave-bar" :class="{ animating: playingAudioId === msg.id }"></view>
+          </view>
+          <text class="duration-tag">{{ msg.duration || 0 }}"</text>
+        </view>
+
+        <!-- 3. 视频 -->
+        <view v-else-if="msg.message_type === 3" class="video-preview" @click="$emit('play-video', getMediaUrl(msg))">
+          <image :src="getVideoThumb(msg)" mode="aspectFill" class="video-thumb" />
+          <view class="play-overlay">
+            <view class="play-btn-circle">
+              <svg viewBox="0 0 24 24" fill="currentColor" class="icon-play"><polygon points="5 3 19 12 5 21 5 3"/></svg>
+            </view>
+          </view>
+        </view>
+
+        <!-- 8. 文件 -->
+        <view v-else-if="msg.message_type === 8" class="file-card" :class="{ 'file-self': isSelf }" @click="$emit('open-file', getMediaUrl(msg))">
+          <view class="file-icon-box" :class="{ 'icon-self': isSelf }">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
+          </view>
+          <view class="file-meta">
+            <text class="fname text-ellipsis">{{ getFileName(msg) }}</text>
+            <text class="fsize">{{ formatSize(getFileSize(msg)) }}</text>
+          </view>
+        </view>
+
+        <text v-else class="msg-text">[不支持的消息类型]</text>
+      </view>
     </view>
   </view>
 </template>
@@ -31,90 +82,147 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import AppAvatar from '@/components/common/AppAvatar.vue'
+import { resolveImageUrl } from '@/utils/image'
+import { formatSize } from '@/utils/format'
+import type { ChatMessage } from '@/types/api'
 
-interface Props {
-  isSelf?: boolean
-  avatarUrl?: string
-  avatarName?: string
-  selfAvatarUrl?: string
-  selfAvatarName?: string
-  type?: 'text' | 'image' | 'audio' | 'video' | 'file'
+const props = defineProps<{
+  msg: ChatMessage
+  isSelf: boolean
+  senderName?: string
+  avatar?: string
+  playingAudioId?: number | null
+}>()
+
+defineEmits<{
+  (e: 'avatar-click', id?: string): void
+  (e: 'play-audio', msg: ChatMessage): void
+  (e: 'preview-image', url: string): void
+  (e: 'play-video', url: string): void
+  (e: 'open-file', url: string): void
+  (e: 'long-press', msg: ChatMessage): void
+}>()
+
+const avatarName = computed(() => props.senderName || 'U')
+
+const mediaTypeClass = computed(() => {
+  const type = props.msg.message_type
+  if (type === 1) return 'media-bubble image'
+  if (type === 2) return 'media-bubble audio'
+  if (type === 3) return 'media-bubble video'
+  if (type === 8) return 'media-bubble file'
+  return ''
+})
+
+// Helpers (复用原 index.vue 逻辑)
+function getMediaUrl(msg: ChatMessage): string {
+  let url = ''
+  if (typeof msg.extra === 'string') {
+    try { const extra = JSON.parse(msg.extra); url = extra.url || msg.content } catch { url = msg.content }
+  } else { url = msg.extra?.url || msg.content }
+  return resolveImageUrl(url)
 }
 
-const props = withDefaults(defineProps<Props>(), {
-  isSelf: false,
-  avatarUrl: '',
-  avatarName: '',
-  selfAvatarUrl: '',
-  selfAvatarName: '',
-  type: 'text'
-})
+function getFileName(msg: ChatMessage) {
+  const extra = typeof msg.extra === 'string' ? JSON.parse(msg.extra || '{}') : msg.extra
+  return extra?.name || '未知文件'
+}
 
-const bubbleClass = computed(() => {
-  const classes = []
-  if (props.isSelf) {
-    classes.push('bubble-self')
-  } else {
-    classes.push('bubble-other')
-  }
-  if (props.type !== 'text') {
-    classes.push('bubble-media')
-  }
-  return classes
-})
+function getFileSize(msg: ChatMessage) {
+  const extra = typeof msg.extra === 'string' ? JSON.parse(msg.extra || '{}') : msg.extra
+  return extra?.size || 0
+}
+
+function getVideoThumb(msg: ChatMessage) {
+  const extra = typeof msg.extra === 'string' ? JSON.parse(msg.extra || '{}') : msg.extra
+  if (extra?.thumb || extra?.cover) return resolveImageUrl(extra.thumb || extra.cover)
+  return getMediaUrl(msg)
+}
 </script>
 
 <style lang="scss" scoped>
-.message-bubble {
-  display: flex;
-  align-items: flex-start;
-  margin-bottom: 24rpx;
+/* * 气泡组件样式
+ * 完全复用原 index.vue 的 .msg-row, .bubble 及其子元素样式
+ */
 
-  &.is-self {
-    flex-direction: row-reverse;
-  }
+/* 布局 */
+.msg-row {
+  display: flex; align-items: flex-start; gap: 20rpx;
+  &.is-self { flex-direction: row-reverse; }
+}
+.avatar-wrap { width: 80rpx; height: 80rpx; flex-shrink: 0; border-radius: 24rpx; box-shadow: 0 4rpx 8rpx rgba(0,0,0,0.05); }
+.content-col {
+  max-width: 72%; display: flex; flex-direction: column;
+  &.items-end { align-items: flex-end; }
+  .sender-name { font-size: 20rpx; color: #9ca3af; margin-bottom: 8rpx; margin-left: 8rpx; .theme-dark & { color: #78716c; } }
 }
 
-.bubble-avatar {
-  margin: 0 16rpx;
-}
-
-.bubble-content {
-  max-width: 60%;
-  padding: 20rpx 24rpx;
-  border-radius: 16rpx;
-  word-break: break-all;
-  font-size: 30rpx;
-  line-height: 1.6;
-
-  &.bubble-self {
-    background: var(--bubble-self);
-    color: var(--text-primary);
-    border-top-right-radius: 4rpx;
-  }
+/* 核心气泡 */
+.bubble {
+  padding: 24rpx; border-radius: 32rpx; font-size: 30rpx; line-height: 1.6; position: relative; word-break: break-all; transition: all 0.3s ease;
 
+  /* 对方消息 */
   &.bubble-other {
-    background: var(--bubble-other);
-    color: var(--text-primary);
-    border-top-left-radius: 4rpx;
+    background: #ffffff; color: #1f2937; border-bottom-left-radius: 8rpx; box-shadow: 0 2rpx 4rpx rgba(0,0,0,0.05);
+    .theme-dark & { background: #262626; color: #e7e5e4; border: 2rpx solid #292524; box-shadow: none; }
   }
 
-  &.bubble-media {
-    padding: 8rpx;
-    background: transparent;
+  /* 自己消息 */
+  &.bubble-self {
+    background: linear-gradient(135deg, #6366F1, #4F46E5); color: #ffffff; border-bottom-right-radius: 8rpx; box-shadow: 0 4rpx 16rpx rgba(79, 70, 229, 0.2);
+    .theme-dark & { background: linear-gradient(135deg, #fb923c, #ea580c); box-shadow: 0 4rpx 16rpx rgba(234, 88, 12, 0.3); }
   }
+
+  /* 媒体容器 */
+  &.media-bubble { padding: 0; background: transparent !important; box-shadow: none !important; border: none !important; }
+}
+
+/* 媒体类型 */
+.image-bubble .msg-image { width: 360rpx; border-radius: 32rpx; background: #f3f4f6; border: 2rpx solid #f3f4f6; .theme-dark & { background: #292524; border-color: #292524; } }
+
+/* 语音胶囊 */
+.audio-capsule {
+  display: flex; align-items: center; gap: 20rpx; min-width: 180rpx; padding: 24rpx; background: #ffffff; border-radius: 32rpx;
+  .theme-dark & { background: #262626; border: 2rpx solid #292524; }
+
+  /* 自己的语音 */
+  .is-self & { background: linear-gradient(135deg, #6366F1, #4F46E5) !important; border: none !important; .theme-dark & { background: linear-gradient(135deg, #fb923c, #ea580c) !important; } }
+
+  .play-icon { width: 32rpx; height: 32rpx; color: #6b7280; .theme-dark & { color: #a8a29e; } .is-self & { color: rgba(255,255,255,0.9); } }
+
+  .wave-visualizer {
+    display: flex; align-items: flex-end; gap: 6rpx; height: 24rpx;
+    .wave-bar {
+      width: 6rpx; background: #9ca3af; border-radius: 4rpx; height: 8rpx;
+      .theme-dark & { background: #78716c; } .is-self & { background: rgba(255,255,255,0.6); }
+      &.animating { animation: wave 0.8s infinite ease-in-out; }
+    }
+  }
+  .duration-tag { font-size: 26rpx; font-weight: 500; margin-left: auto; color: #6b7280; .theme-dark & { color: #a8a29e; } .is-self & { color: #fff; } }
+}
+@keyframes wave { 0%, 100% { height: 8rpx; } 50% { height: 24rpx; } }
+
+/* 视频预览 */
+.video-preview {
+  position: relative; width: 360rpx; height: 200rpx; border-radius: 32rpx; overflow: hidden; background: #000;
+  .video-thumb { width: 100%; height: 100%; opacity: 0.9; }
+  .play-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
+  .play-btn-circle { width: 80rpx; height: 80rpx; background: rgba(0,0,0,0.3); backdrop-filter: blur(4px); border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2rpx solid rgba(255,255,255,0.3); color: #fff; svg { width: 32rpx; height: 32rpx; } }
+}
+
+/* 文件卡片 */
+.file-card {
+  background: #ffffff; padding: 24rpx; border-radius: 32rpx; display: flex; align-items: center; gap: 24rpx; min-width: 400rpx; border: 2rpx solid #f3f4f6;
+  .theme-dark & { background: #262626; border-color: #292524; }
+
+  &.file-self { background: linear-gradient(135deg, #6366F1, #4F46E5); border: none; .theme-dark & { background: linear-gradient(135deg, #fb923c, #ea580c); } .f-name { color: #fff; } .f-size { color: rgba(255,255,255,0.7); } }
+
+  .file-icon-box {
+    width: 80rpx; height: 80rpx; background: #ffedd5; border-radius: 16rpx; display: flex; align-items: center; justify-content: center; color: #f97316;
+    .theme-dark & { background: rgba(154, 52, 18, 0.3); }
+    &.icon-self { background: rgba(255,255,255,0.2); color: #fff; }
+    svg { width: 40rpx; height: 40rpx; }
+  }
+  .file-meta { flex: 1; display: flex; flex-direction: column; overflow: hidden; .f-name { font-size: 28rpx; font-weight: 500; color: #1f2937; .theme-dark & { color: #e7e5e4; } } .f-size { font-size: 22rpx; color: #9ca3af; .theme-dark & { color: #78716c; } } }
 }
 </style>
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/src/components/chat/MessageInput.vue b/src/components/chat/MessageInput.vue
index 389cca2..f080451 100644
--- a/src/components/chat/MessageInput.vue
+++ b/src/components/chat/MessageInput.vue
@@ -1,51 +1,125 @@
 <template>
-  <view class="message-input" :class="{ 'theme-dark': isDark }">
-    <!-- @ 提及弹窗 (保持原有功能不变) -->
-    <wd-popup v-model="showMentionPicker" position="bottom" safe-area-inset-bottom>
-      <view class="mention-picker">
-        <view class="mention-header">
-          <text class="title">选择要 @ 的成员</text>
-          <view class="close-btn" @click="showMentionPicker = false">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-              <line x1="18" y1="6" x2="6" y2="18"/>
-              <line x1="6" y1="6" x2="18" y2="18"/>
+  <view class="message-input-container" :class="{ 'theme-dark': isDark }">
+    <!-- 悬浮输入条 -->
+    <view class="input-floater">
+      <!-- 1. @提醒选择器 -->
+      <mention-picker
+          v-if="isGroup"
+          :show="showMentionPicker"
+          :users="mentionUsers"
+          @select="handleMentionSelect"
+          @close="showMentionPicker = false"
+      />
+
+      <!-- 2. 表情面板 -->
+      <emoji-picker
+          :show="showEmoji"
+          @select="handleEmojiSelect"
+          @close="showEmoji = false"
+      />
+
+      <!-- 3. 核心输入栏 (Layout: Mic | Input | Smile | Action) -->
+      <view class="input-bar-capsule">
+        <!-- 左侧: 语音按钮 -->
+        <view
+            class="icon-btn"
+            :class="{ 'recording': isRecording }"
+            @touchstart="startRecording"
+            @touchmove="onRecordingMove"
+            @touchend="stopRecording"
+            @touchcancel="cancelRecording"
+        >
+          <!-- Lucide Icon: Mic -->
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/>
+            <path d="M19 10v2a7 7 0 0 1-14 0v-2"/>
+            <line x1="12" y1="19" x2="12" y2="23"/>
+            <line x1="8" y1="23" x2="16" y2="23"/>
+          </svg>
+        </view>
+
+        <!-- 中间: 输入框 -->
+        <view class="input-field-wrap">
+          <textarea
+              v-model="inputValue"
+              class="text-input"
+              :auto-height="true"
+              :maxlength="-1"
+              :cursor-spacing="20"
+              placeholder="发送消息..."
+              placeholder-class="input-placeholder"
+              :show-confirm-bar="false"
+              :adjust-position="false"
+              @focus="$emit('focus')"
+              @confirm="onSend"
+              @input="onInput"
+          />
+        </view>
+
+        <!-- 右侧: 表情 & 更多/发送 -->
+        <view class="right-actions">
+          <!-- 表情按钮 -->
+          <view class="icon-btn" @click="toggleEmoji">
+            <!-- Lucide Icon: Smile -->
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <circle cx="12" cy="12" r="10"/>
+              <path d="M8 14s1.5 2 4 2 4-2 4-2"/>
+              <line x1="9" y1="9" x2="9.01" y2="9"/>
+              <line x1="15" y1="9" x2="15.01" y2="9"/>
+            </svg>
+          </view>
+
+          <!-- 发送按钮 (有文字时显示) -->
+          <view v-if="inputValue.trim()" class="send-btn" @click="onSend">
+            <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+              <line x1="22" y1="2" x2="11" y2="13"/>
+              <polygon points="22 2 15 22 11 13 2 9 22 2"/>
+            </svg>
+          </view>
+
+          <!-- 更多按钮 (无文字时显示) -->
+          <view v-else class="icon-btn" @click="showMore = true">
+            <!-- Lucide Icon: Plus Circle -->
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <circle cx="12" cy="12" r="10"/>
+              <line x1="12" y1="8" x2="12" y2="16"/>
+              <line x1="8" y1="12" x2="16" y2="12"/>
             </svg>
           </view>
         </view>
-        <scroll-view scroll-y class="mention-list">
-          <view
-            v-for="member in members"
-            :key="member.user_id"
-            class="mention-item"
-            @click="selectMention(member)"
-          >
-            <app-avatar
-              :src="member.user?.avatar"
-              :name="member.nickname || member.user?.name"
-              :size="72"
-              radius="8rpx"
-            />
-            <text class="mention-name">{{ member.nickname || member.user?.name || '未知' }}</text>
+      </view>
+    </view>
+
+    <!-- 4. 更多功能面板 -->
+    <wd-popup v-model="showMore" position="bottom" safe-area-inset-bottom :z-index="10000" custom-style="background: var(--bg-card); border-radius: 32rpx 32rpx 0 0;">
+      <view class="tools-grid">
+        <view class="tool-item" @click="emitAction('send-image')">
+          <view class="tool-icon album">
+            <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>
           </view>
-        </scroll-view>
+          <text>相册</text>
+        </view>
+        <view class="tool-item" @click="emitAction('send-camera')">
+          <view class="tool-icon camera">
+            <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg>
+          </view>
+          <text>拍摄</text>
+        </view>
+        <view class="tool-item" @click="emitAction('send-file')">
+          <view class="tool-icon file">
+            <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/><polyline points="13 2 13 9 20 9"/></svg>
+          </view>
+          <text>文件</text>
+        </view>
       </view>
     </wd-popup>
 
-    <!-- 录音浮层 -->
+    <!-- 5. 录音遮罩 (保持业务逻辑) -->
     <view v-if="isRecording" class="recording-overlay">
       <view class="recording-content" :class="{ 'cancel-mode': isCancelRecording }">
         <view class="recording-icon">
-          <svg v-if="!isCancelRecording" viewBox="0 0 24 24" fill="currentColor">
-            <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/>
-            <path d="M19 10v2a7 7 0 0 1-14 0v-2"/>
-            <line x1="12" y1="19" x2="12" y2="23" stroke="currentColor" stroke-width="2"/>
-            <line x1="8" y1="23" x2="16" y2="23" stroke="currentColor" stroke-width="2"/>
-          </svg>
-          <svg v-else viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            <circle cx="12" cy="12" r="10"/>
-            <line x1="15" y1="9" x2="9" y2="15"/>
-            <line x1="9" y1="9" x2="15" y2="15"/>
-          </svg>
+          <svg v-if="!isCancelRecording" viewBox="0 0 24 24" fill="currentColor"><path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" y1="19" x2="12" y2="23" stroke="currentColor" stroke-width="2"/><line x1="8" y1="23" x2="16" y2="23" stroke="currentColor" stroke-width="2"/></svg>
+          <svg v-else viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>
         </view>
         <view class="wave-bars">
           <view class="wave-bar" v-for="i in 5" :key="i" :style="{ animationDelay: `${i * 0.1}s` }"></view>
@@ -54,573 +128,299 @@
         <text class="recording-tip">{{ isCancelRecording ? '松开取消' : '上滑取消发送' }}</text>
       </view>
     </view>
-
-    <!-- 底部输入栏 (按设计稿布局) -->
-    <view class="input-bar">
-      <!-- 左侧: 语音按钮 -->
-      <view
-        class="voice-btn"
-        @touchstart="startRecording"
-        @touchmove="onRecordingMove"
-        @touchend="stopRecording"
-        @touchcancel="cancelRecording"
-      >
-        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-          <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/>
-          <path d="M19 10v2a7 7 0 0 1-14 0v-2"/>
-          <line x1="12" y1="19" x2="12" y2="23"/>
-          <line x1="8" y1="23" x2="16" y2="23"/>
-        </svg>
-      </view>
-
-      <!-- 中间: 输入框 -->
-      <view class="input-wrap">
-        <textarea
-          v-model="inputValue"
-          class="text-input"
-          :auto-height="true"
-          :maxlength="-1"
-          placeholder="发送消息..."
-          placeholder-class="input-placeholder"
-          :adjust-position="true"
-          @input="onInput"
-          @confirm="onSend"
-        />
-      </view>
-
-      <!-- 右侧: 表情 + 加号/发送 -->
-      <view class="right-actions">
-        <view class="action-btn" @click="$emit('emoji')">
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-            <circle cx="12" cy="12" r="10"/>
-            <path d="M8 14s1.5 2 4 2 4-2 4-2"/>
-            <line x1="9" y1="9" x2="9.01" y2="9"/>
-            <line x1="15" y1="9" x2="15.01" y2="9"/>
-          </svg>
-        </view>
-
-        <!-- 有文字时显示发送按钮，否则显示加号 -->
-        <view v-if="inputValue.trim()" class="send-btn" @click="onSend">
-          <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
-            <line x1="22" y1="2" x2="11" y2="13"/>
-            <polygon points="22 2 15 22 11 13 2 9 22 2"/>
-          </svg>
-        </view>
-        <view v-else class="action-btn" @click="$emit('more')">
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-            <circle cx="12" cy="12" r="10"/>
-            <line x1="12" y1="8" x2="12" y2="16"/>
-            <line x1="8" y1="12" x2="16" y2="12"/>
-          </svg>
-        </view>
-      </view>
-    </view>
   </view>
 </template>
 
 <script setup lang="ts">
-import { ref, watch } from 'vue'
+import { ref, computed, watch } from 'vue'
 import { useTheme } from '@/composables/useTheme'
-import AppAvatar from '@/components/common/AppAvatar.vue'
+import EmojiPicker from '@/components/chat/EmojiPicker.vue'
+import MentionPicker from '@/components/chat/MentionPicker.vue'
+import type { MentionUser } from '@/components/chat/MentionPicker.vue'
 import type { GroupMember } from '@/types/api'
 
-interface Props {
+// Props & Emits
+const props = withDefaults(defineProps<{
   modelValue?: string
   isGroup?: boolean
   members?: GroupMember[]
-}
-
-const props = withDefaults(defineProps<Props>(), {
+}>(), {
   modelValue: '',
   isGroup: false,
   members: () => []
 })
 
 const emit = defineEmits<{
-  (e: 'update:modelValue', value: string): void
-  (e: 'send', value: string): void
-  (e: 'sendVoice', data: { path: string; duration: number }): void
-  (e: 'emoji'): void
-  (e: 'image'): void
-  (e: 'file'): void
-  (e: 'more'): void
-  (e: 'mention', member: GroupMember): void
+  (e: 'update:modelValue', val: string): void
+  (e: 'send', val: string): void
+  (e: 'send-voice', data: { path: string, duration: number }): void
+  (e: 'send-image'): void
+  (e: 'send-camera'): void
+  (e: 'send-file'): void
+  (e: 'focus'): void
 }>()
 
 const { isDark } = useTheme()
-
-// 文本输入相关
 const inputValue = ref(props.modelValue)
+const showEmoji = ref(false)
+const showMore = ref(false)
 const showMentionPicker = ref(false)
 
-// 语音录制相关
+// 录音状态
 const isRecording = ref(false)
 const isCancelRecording = ref(false)
 const recordDuration = ref(0)
-let recordTimer: ReturnType<typeof setInterval> | null = null
-let recorderManager: UniApp.RecorderManager | null = null
-let startY = 0
-let voicePath = ''
+let recordTimer: any = null
+let recorderManager: any = null
+let recordStartY = 0
 
-watch(() => props.modelValue, (val) => {
-  inputValue.value = val
+// 提及用户
+const mentionUsers = computed<MentionUser[]>(() => {
+  return props.members.map(m => ({
+    id: m.user_id,
+    name: m.nickname || m.user?.name || '未知',
+    avatar: m.user?.avatar
+  }))
 })
 
-watch(inputValue, (val) => {
-  emit('update:modelValue', val)
-})
+// 同步
+watch(() => props.modelValue, (val) => inputValue.value = val)
+watch(inputValue, (val) => emit('update:modelValue', val))
 
-// ========== 文本输入处理 (保持原有逻辑) ==========
+// 方法
 function onInput(e: any) {
-  const value = e.detail?.value || e.value || inputValue.value
-  // 检测 @ 符号
-  if (props.isGroup && value.endsWith('@')) {
+  const val = e.detail?.value || inputValue.value
+  if (props.isGroup && val.endsWith('@')) {
     showMentionPicker.value = true
   }
 }
 
-function openMentionPicker() {
-  showMentionPicker.value = true
-}
-
-function selectMention(member: GroupMember) {
-  const name = member.nickname || member.user?.name || ''
-  if (inputValue.value.endsWith('@')) {
-    inputValue.value = inputValue.value + name + ' '
-  } else {
-    inputValue.value = inputValue.value + '@' + name + ' '
-  }
-  showMentionPicker.value = false
-  emit('mention', member)
-}
-
 function onSend() {
   if (!inputValue.value.trim()) return
   emit('send', inputValue.value.trim())
   inputValue.value = ''
+  showEmoji.value = false
 }
 
-// ========== 语音录制处理 ==========
-function initRecorderManager() {
-  if (recorderManager) return recorderManager
-  
+function toggleEmoji() {
+  showEmoji.value = !showEmoji.value
+  showMore.value = false
+}
+
+function handleEmojiSelect(emoji: string) {
+  inputValue.value += emoji
+}
+
+function handleMentionSelect(user: MentionUser) {
+  inputValue.value = inputValue.value.endsWith('@')
+      ? inputValue.value + user.name + ' '
+      : inputValue.value + '@' + user.name + ' '
+  showMentionPicker.value = false
+}
+
+function emitAction(action: 'send-image' | 'send-camera' | 'send-file') {
+  showMore.value = false
+  emit(action)
+}
+
+// 录音逻辑 (核心逻辑保持不变，确保事件 emit 正确)
+function initRecorder() {
   recorderManager = uni.getRecorderManager()
-  
-  recorderManager.onStart(() => {
-    console.log('录音开始')
-    isRecording.value = true
-    recordDuration.value = 0
-    recordTimer = setInterval(() => {
-      recordDuration.value++
-      // 最长60秒
-      if (recordDuration.value >= 60) {
-        stopRecording()
-      }
-    }, 1000)
-  })
-  
-  recorderManager.onStop((res) => {
-    console.log('录音结束', res)
-    clearRecordTimer()
-    isRecording.value = false
-    
-    if (!isCancelRecording.value && res.tempFilePath && recordDuration.value >= 1) {
-      voicePath = res.tempFilePath
-      emit('sendVoice', {
-        path: voicePath,
-        duration: recordDuration.value
-      })
-    }
-    
-    isCancelRecording.value = false
-    recordDuration.value = 0
-  })
-  
-  recorderManager.onError((err) => {
-    console.error('录音错误', err)
-    clearRecordTimer()
-    isRecording.value = false
-    isCancelRecording.value = false
-    uni.showToast({ title: '录音失败', icon: 'none' })
-  })
-  
-  return recorderManager
-}
-
-function clearRecordTimer() {
-  if (recordTimer) {
+  recorderManager.onStart(() => { isRecording.value = true; recordDuration.value = 0; recordTimer = setInterval(() => recordDuration.value++, 1000) })
+  recorderManager.onStop((res: any) => {
     clearInterval(recordTimer)
-    recordTimer = null
-  }
+    isRecording.value = false
+    if (!isCancelRecording.value && res.tempFilePath) {
+      emit('send-voice', { path: res.tempFilePath, duration: recordDuration.value })
+    }
+    isCancelRecording.value = false
+  })
 }
 
 function startRecording(e: TouchEvent) {
-  startY = e.touches[0].clientY
-  isCancelRecording.value = false
-  
-  // 初始化录音管理器
-  const recorder = initRecorderManager()
-  
-  // 开始录音
-  recorder.start({
-    duration: 60000, // 最长60秒
-    sampleRate: 16000,
-    numberOfChannels: 1,
-    encodeBitRate: 48000,
-    format: 'mp3'
-  })
+  recordStartY = e.touches[0].clientY
+  if (!recorderManager) initRecorder()
+  recorderManager.start({ format: 'aac' })
 }
 
 function onRecordingMove(e: TouchEvent) {
   if (!isRecording.value) return
-  
-  const currentY = e.touches[0].clientY
-  const diff = startY - currentY
-  
-  // 上滑超过80px触发取消
-  isCancelRecording.value = diff > 80
+  if (recordStartY - e.touches[0].clientY > 80) isCancelRecording.value = true
 }
 
-function stopRecording() {
-  if (!isRecording.value) return
-  
-  if (recorderManager) {
-    recorderManager.stop()
-  }
-}
-
-function cancelRecording() {
-  isCancelRecording.value = true
-  stopRecording()
-}
-
-function formatRecordDuration(seconds: number): string {
-  const m = Math.floor(seconds / 60).toString().padStart(2, '0')
-  const s = (seconds % 60).toString().padStart(2, '0')
-  return `${m}:${s}`
-}
-
-// 暴露方法供父组件使用
-defineExpose({
-  openMentionPicker
-})
+function stopRecording() { recorderManager?.stop() }
+function cancelRecording() { isCancelRecording.value = true; stopRecording() }
+function formatRecordDuration(s: number) { return `${Math.floor(s/60).toString().padStart(2,'0')}:${(s%60).toString().padStart(2,'0')}` }
 </script>
 
 <style lang="scss" scoped>
-// ==========================================
-// 与设计稿 聊天页面.html 第116-123行 完全一致
-// ==========================================
-.message-input {
-  // 亮色模式颜色 (与设计稿一致)
-  --input-bg: #f3f4f6;            // 设计稿: bg-gray-100
-  --input-text: #1f2937;          // 设计稿: text-gray-800
-  --placeholder-color: #9ca3af;   // 设计稿: placeholder-gray-400
-  --icon-color: #6b7280;          // 设计稿: text-gray-500
-  --icon-hover: #4F46E5;          // 设计稿: hover:text-indigo-600
-  --send-bg: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
-  --border-color: #f3f4f6;        // 设计稿: border-gray-100
-  --bg-content: #ffffff;          // 设计稿: bg-white
-  
-  position: relative;
-  background: var(--bg-content);
-  border-top: 2rpx solid var(--border-color);
-  transition: all 0.3s;
-  
-  // 暗色模式 - Warm Stone (与设计稿一致)
+/* =================================================================
+   Message Input Styling - Warm Stone Restoration
+   基于 聊天页面.html 的设计规范
+   ================================================================= */
+
+.message-input-container {
+  /* 颜色变量 - 严格对标 HTML */
+  --bg-floater: #ffffff;
+  --bg-input: #f3f4f6;        /* gray-100 */
+  --text-input: #1f2937;      /* gray-800 */
+  --text-placeholder: #9ca3af;/* gray-400 */
+  --icon-normal: #6b7280;     /* gray-500 */
+  --icon-hover: #4f46e5;      /* indigo-600 */
+  --border-color: #f3f4f6;    /* gray-100 */
+
   &.theme-dark {
-    --input-bg: #292524;            // 设计稿: dark:bg-warm-800
-    --input-text: #f5f5f4;          // 设计稿: dark:text-warm-100
-    --placeholder-color: #78716c;   // 设计稿: dark:placeholder-warm-500
-    --icon-color: #a8a29e;          // 设计稿: dark:text-warm-400
-    --icon-hover: #f97316;          // 设计稿: dark:hover:text-orange-400
-    --send-bg: linear-gradient(135deg, #fb923c 0%, #f97316 100%);
-    --border-color: #292524;        // 设计稿: dark:border-warm-800
-    --bg-content: #1c1917;          // 设计稿: dark:bg-warm-900
+    --bg-floater: #1c1917;    /* warm-900 */
+    --bg-input: #292524;      /* warm-800 */
+    --text-input: #e7e5e4;    /* warm-100 */
+    --text-placeholder: #78716c;/* warm-500 */
+    --icon-normal: #a8a29e;   /* warm-400 */
+    --icon-hover: #fb923c;    /* orange-400 */
+    --border-color: #292524;  /* warm-800 */
   }
 }
 
-// 底部输入栏 - 设计稿: px-4 py-3 pb-8 flex items-end gap-3
-.input-bar {
-  display: flex;
-  align-items: flex-end;         // 设计稿: items-end
-  gap: 24rpx;                    // 设计稿: gap-3 = 12px = 24rpx
-  padding: 24rpx 32rpx;          // 设计稿: px-4 py-3 = 16px 12px = 32rpx 24rpx
-  padding-bottom: calc(64rpx + env(safe-area-inset-bottom)); // 设计稿: pb-8 = 32px = 64rpx
+/* 底部悬浮条容器 */
+.input-floater {
+  position: fixed;
+  bottom: 0; left: 0; right: 0;
+  z-index: 200;
+  background: var(--bg-floater);
+  border-top: 2rpx solid var(--border-color);
+
+  /* 间距还原: px-4 py-3 pb-8 */
+  padding: 24rpx 32rpx;
+  padding-bottom: calc(64rpx + env(safe-area-inset-bottom));
+
+  transition: background-color 0.3s ease, border-color 0.3s ease;
 }
 
-// 语音按钮
-.voice-btn {
+/* 胶囊布局: Flex Row + Gap 3 (24rpx)
+   修改点：align-items: center 实现垂直居中
+*/
+.input-bar-capsule {
+  display: flex;
+  align-items: center; /* 核心修改: 垂直居中对齐 */
+  gap: 24rpx;          /* gap-3 */
+}
+
+/* 图标按钮: w-7 h-7 (56rpx) */
+.icon-btn {
   width: 56rpx;
   height: 56rpx;
   display: flex;
   align-items: center;
   justify-content: center;
+  color: var(--icon-normal);
   flex-shrink: 0;
-  margin-bottom: 16rpx;
-  color: var(--icon-color);
-  transition: color 0.15s;
-  
+  margin-bottom: 0; /* 修改点: 移除底部 margin，因为已经是垂直居中了 */
+  transition: color 0.2s, transform 0.1s;
+
   svg {
     width: 56rpx;
     height: 56rpx;
+    stroke-width: 2; /* 确保图标线条清晰 */
   }
-  
+
   &:active {
+    color: var(--icon-hover);
+    transform: scale(0.95);
+  }
+
+  &.recording {
     color: var(--icon-hover);
     transform: scale(1.1);
   }
 }
 
-// 输入框容器 - 与设计稿完全一致
-// 设计稿: flex-1 bg-gray-100 dark:bg-warm-800 rounded-2xl px-4 py-2.5 min-h-[44px] 
-//         border border-transparent dark:border-warm-700
-.input-wrap {
+/* 输入框容器: 核心高度调整
+   新设计: min-h-[36px] (72rpx) -> 精致
+*/
+.input-field-wrap {
   flex: 1;
-  min-height: 88rpx;              // 设计稿: min-h-[44px] = 44px = 88rpx
-  background: var(--input-bg);
-  border-radius: 32rpx;           // 设计稿: rounded-2xl = 16px = 32rpx
-  padding: 20rpx 32rpx;           // 设计稿: px-4 py-2.5 = 16px 10px = 32rpx 20rpx
+  min-height: 72rpx;
+  background: var(--bg-input);
+  border-radius: 36rpx; /* 圆角对应高度的一半 */
+  padding: 16rpx 28rpx;
   display: flex;
   align-items: center;
-  border: 2rpx solid transparent;  // 设计稿: border border-transparent
-  transition: all 0.2s;
-  
-  // 设计稿: dark:border-warm-700
-  .theme-dark & {
-    border-color: #44403c;        // warm-700
+  transition: background-color 0.3s;
+
+  .text-input {
+    width: 100%;
+    max-height: 200rpx;
+    min-height: 40rpx;
+    font-size: 30rpx; /* text-sm approx */
+    line-height: 1.4;
+    color: var(--text-input);
+    background: transparent;
+  }
+
+  .input-placeholder {
+    color: var(--text-placeholder);
   }
 }
 
-// 设计稿: text-sm text-gray-800 dark:text-warm-100 resize-none h-5
-.text-input {
-  width: 100%;
-  min-height: 40rpx;             // 设计稿: h-5 = 20px = 40rpx
-  max-height: 200rpx;
-  font-size: 28rpx;              // 设计稿: text-sm = 14px = 28rpx
-  line-height: 1.5;
-  color: var(--input-text);
-  background: transparent;
-}
-
-.input-placeholder {
-  color: var(--placeholder-color);
-}
-
-// 右侧操作按钮
+/* 右侧操作区 */
 .right-actions {
   display: flex;
   align-items: center;
-  gap: 16rpx;
-  margin-bottom: 16rpx;
+  gap: 24rpx; /* gap-3 between smile and plus */
+  margin-bottom: 0; /* 修改点: 移除底部 margin */
 }
 
-.action-btn {
-  width: 56rpx;
-  height: 56rpx;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--icon-color);
-  transition: all 0.15s;
-  
-  svg {
-    width: 56rpx;
-    height: 56rpx;
-  }
-  
-  &:active {
-    color: var(--icon-hover);
-  }
-}
-
-// 发送按钮
+/* 发送按钮 - 视觉焦点 */
 .send-btn {
   width: 72rpx;
   height: 72rpx;
   border-radius: 50%;
-  background: var(--send-bg);
+  /* 渐变色还原: Indigo / Orange */
+  background: linear-gradient(135deg, #6366F1, #4F46E5);
+  .theme-dark & { background: linear-gradient(135deg, #fb923c, #ea580c); }
+
   display: flex;
   align-items: center;
   justify-content: center;
-  box-shadow: 0 4rpx 16rpx rgba(79, 70, 229, 0.3);
-  transition: all 0.2s;
-  animation: popIn 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-  
-  .theme-dark & {
-    box-shadow: 0 4rpx 16rpx rgba(249, 115, 22, 0.3);
-  }
-  
+  margin-bottom: 0; /* 修改点: 移除底部 margin */
+  box-shadow: 0 4rpx 12rpx rgba(79, 70, 229, 0.3);
+
   svg {
     width: 36rpx;
     height: 36rpx;
   }
-  
+
   &:active {
     transform: scale(0.95);
   }
 }
 
-@keyframes popIn {
-  from { transform: scale(0); }
-  to { transform: scale(1); }
-}
-
-// 录音浮层
+/* 录音浮层 (复用) */
 .recording-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.6);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 9999;
-  animation: fadeIn 0.2s ease-out;
-}
-
-@keyframes fadeIn {
-  from { opacity: 0; }
-  to { opacity: 1; }
-}
-
-.recording-content {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 60rpx;
-  background: rgba(255, 255, 255, 0.95);
-  border-radius: 32rpx;
-  min-width: 300rpx;
-  
-  .theme-dark & {
-    background: rgba(41, 37, 36, 0.95);
-  }
-  
-  &.cancel-mode {
-    .recording-icon {
-      background: #ef4444;
-    }
-    
-    .wave-bars .wave-bar {
-      background: #ef4444;
-      animation: none;
-      height: 8rpx;
-    }
+  position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 999;
+  display: flex; align-items: center; justify-content: center;
+  .recording-content {
+    background: var(--bg-floater); padding: 64rpx; border-radius: 48rpx;
+    display: flex; flex-direction: column; align-items: center;
+    &.cancel-mode { .recording-icon { background: #ef4444; } }
   }
+  .recording-icon { width: 128rpx; height: 128rpx; background: #10b981; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; margin-bottom: 32rpx; svg { width: 64rpx; height: 64rpx; } }
+  .wave-bars { display: flex; gap: 8rpx; height: 48rpx; margin-bottom: 24rpx; .wave-bar { width: 8rpx; height: 16rpx; background: #10b981; border-radius: 8rpx; animation: wave 1s infinite; } }
+  .recording-duration { font-size: 36rpx; font-weight: 700; color: var(--text-input); margin-bottom: 16rpx; }
+  .recording-tip { font-size: 24rpx; color: var(--icon-normal); }
 }
+@keyframes wave { 0%, 100% { height: 16rpx; } 50% { height: 48rpx; } }
 
-.recording-icon {
-  width: 120rpx;
-  height: 120rpx;
-  border-radius: 50%;
-  background: #10b981;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-bottom: 32rpx;
-  transition: background 0.2s;
-  
-  svg {
-    width: 60rpx;
-    height: 60rpx;
-    color: #fff;
-  }
-}
-
-.wave-bars {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8rpx;
-  height: 64rpx;
-  margin-bottom: 24rpx;
-}
-
-.wave-bar {
-  width: 8rpx;
-  height: 16rpx;
-  background: #10b981;
-  border-radius: 8rpx;
-  animation: wave 0.8s infinite ease-in-out;
-  
-  @for $i from 1 through 5 {
-    &:nth-child(#{$i}) {
-      animation-delay: #{($i - 1) * 0.1}s;
-    }
-  }
-}
-
-@keyframes wave {
-  0%, 100% { height: 16rpx; }
-  50% { height: 48rpx; }
-}
-
-.recording-duration {
-  font-size: 36rpx;
-  font-weight: 600;
-  color: var(--input-text);
-  font-family: monospace;
-  margin-bottom: 16rpx;
-}
-
-.recording-tip {
-  font-size: 24rpx;
-  color: var(--placeholder-color);
-}
-
-// @ 提及选择器 (保持原有样式)
-.mention-picker {
-  max-height: 60vh;
-  background: var(--bg-content);
-  
-  .mention-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 24rpx 30rpx;
-    border-bottom: 1rpx solid var(--border-color);
-    
-    .title {
-      font-size: 32rpx;
-      font-weight: 600;
-      color: var(--input-text);
-    }
-    
-    .close-btn {
-      width: 48rpx;
-      height: 48rpx;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      color: var(--icon-color);
-      
-      svg {
-        width: 32rpx;
-        height: 32rpx;
-      }
-    }
-  }
-  
-  .mention-list {
-    max-height: 50vh;
-  }
-  
-  .mention-item {
-    display: flex;
-    align-items: center;
-    padding: 20rpx 30rpx;
-    gap: 20rpx;
-    
-    &:active {
-      background: var(--input-bg);
-    }
-    
-    .mention-name {
-      font-size: 30rpx;
-      color: var(--input-text);
+/* 更多面板 Grid (复用) */
+.tools-grid {
+  padding: 48rpx 32rpx; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32rpx;
+  .tool-item {
+    display: flex; flex-direction: column; align-items: center; gap: 16rpx;
+    .tool-icon {
+      width: 112rpx; height: 112rpx; border-radius: 32rpx; display: flex; align-items: center; justify-content: center;
+      &.album { background: #10b981; } &.camera { background: #f97316; } &.file { background: #eab308; }
+      svg { width: 56rpx; height: 56rpx; }
     }
+    text { font-size: 24rpx; color: var(--icon-normal); }
   }
 }
 </style>
diff --git a/src/pages/chat/index.vue b/src/pages/chat/index.vue
index 1299541..d21cdbc 100644
--- a/src/pages/chat/index.vue
+++ b/src/pages/chat/index.vue
@@ -1,43 +1,33 @@
 <template>
   <wd-config-provider :theme="isDark ? 'dark' : 'light'">
     <view class="chat-page-container" :class="{ 'theme-dark': isDark }">
-      <!-- 沉浸式导航栏 -->
+
+      <!-- 1. 导航栏 -->
       <view class="glass-navbar">
         <view class="navbar-bg"></view>
         <view class="navbar-content">
           <view class="nav-left" @click="goBack">
-            <svg class="back-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
-              <path d="M15 18l-6-6 6-6"/>
-            </svg>
+            <view class="back-btn">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15 18l-6-6 6-6"/></svg>
+            </view>
             <view class="nav-info">
               <text class="nav-name">{{ displayName }}</text>
-              <view v-if="isGroupChat" class="member-count">{{ groupMembers.length }}人</view>
-              <view v-else class="online-status">在线</view>
+              <view class="status-row">
+                <view v-if="!isGroupChat" class="status-dot"></view>
+                <text class="status-text">{{ isGroupChat ? `${groupMembers.length}人` : '手机在线' }}</text>
+              </view>
             </view>
           </view>
 
           <view class="nav-actions">
-            <view class="icon-btn" @click="startAudioCall">
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/>
-              </svg>
-            </view>
-            <view class="icon-btn" @click="startVideoCall">
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                <polygon points="23 7 16 12 23 17 23 7"/>
-                <rect x="1" y="5" width="15" height="14" rx="2" ry="2"/>
-              </svg>
-            </view>
-            <view class="icon-btn" @click="showChatInfo">
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                <circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/>
-              </svg>
-            </view>
+            <view class="icon-btn" @click="startAudioCall"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg></view>
+            <view class="icon-btn" @click="startVideoCall"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2" ry="2"/></svg></view>
+            <view class="icon-btn" @click="showChatInfo"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg></view>
           </view>
         </view>
       </view>
 
-      <!-- 消息列表 -->
+      <!-- 2. 消息列表区 -->
       <scroll-view
           class="chat-scroll-area custom-scrollbar"
           scroll-y
@@ -46,292 +36,72 @@
           :scroll-with-animation="scrollWithAnimation"
           :upper-threshold="100"
           @scrolltoupper="onScrollToUpper"
+          @click="onScrollClick"
       >
-        <view class="message-feed">
+        <view class="message-feed" id="message-feed-content">
           <view class="feed-status">
-            <wd-loading v-if="loadingMore" size="24rpx" />
+            <wd-loading v-if="loadingMore" size="24rpx" color="#9ca3af" />
             <text v-else-if="hasMore" class="link-text" @click="loadMoreMessages">查看历史消息</text>
-            <text v-else class="end-text">没有更多消息了</text>
           </view>
 
+          <!-- 消息渲染 -->
           <view
               v-for="(msg, index) in messages"
               :key="msg.id"
               :id="`msg-${msg.id}`"
-              class="message-item"
-              :class="{ 'self': msg.isSelf, 'system': isSystemMessage(msg.message_type) }"
+              class="message-wrapper"
           >
-            <!-- 时间戳 -->
             <view v-if="shouldShowTime(msg, index)" class="timestamp">
               <text>{{ formatMessageTime(msg.created_at) }}</text>
             </view>
 
-            <!-- 系统消息 -->
             <view v-if="isSystemMessage(msg.message_type)" class="system-notice">
               <text>{{ msg.content }}</text>
             </view>
 
-            <!-- 普通消息区域 - 与设计稿一致: flex gap-3, 自己消息用 flex-row-reverse -->
-            <view v-else class="msg-row" :class="{ 'is-self': msg.isSelf }">
-              <!-- 头像 - 设计稿: w-10 h-10 rounded-xl shrink-0 -->
-              <view class="avatar-wrap" @click="onAvatarClick(msg)">
-                <app-avatar
-                  :src="msg.isSelf ? currentUser?.avatar : getMessageSenderAvatar(msg)"
-                  :name="msg.isSelf ? currentUser?.name : getMessageSenderName(msg)"
-                  :size="80"
-                  radius="24rpx"
-                />
-              </view>
-
-              <!-- 内容区 - 设计稿: flex flex-col max-w-[75%] -->
-              <view class="content-col" :class="{ 'items-end': msg.isSelf }">
-                <!-- 群聊显示昵称 - 设计稿: text-[10px] text-gray-400 mb-1 ml-1 -->
-                <text v-if="isGroupChat && !msg.isSelf" class="sender-name">{{ getMessageSenderName(msg) }}</text>
-
-                <view
-                    class="bubble"
-                    :class="[msg.isSelf ? 'bubble-self' : 'bubble-other', getMediaTypeClass(msg.message_type)]"
-                    @longpress="handleMessageLongPress(msg)"
-                >
-                  <!-- 文本 -->
-                  <text v-if="msg.message_type === 0" class="msg-text" selectable>{{ msg.content }}</text>
-
-                  <!-- 图片 -->
-                  <view v-else-if="msg.message_type === 1" class="image-bubble">
-                    <image
-                        :src="getMediaUrl(msg)"
-                        mode="widthFix"
-                        class="msg-image"
-                        @click="previewImage(msg)"
-                    />
-                  </view>
-
-                  <!-- 语音 -->
-                  <view v-else-if="msg.message_type === 2" class="audio-capsule" @click="playAudio(msg)">
-                    <view class="play-btn">
-                      <svg v-if="playingAudioId !== msg.id" viewBox="0 0 24 24" fill="currentColor">
-                        <polygon points="5 3 19 12 5 21 5 3"/>
-                      </svg>
-                      <svg v-else viewBox="0 0 24 24" fill="currentColor">
-                        <rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/>
-                      </svg>
-                    </view>
-                    <view class="wave-visualizer">
-                      <view class="wave-bar" :class="{ animating: playingAudioId === msg.id }"></view>
-                      <view class="wave-bar" :class="{ animating: playingAudioId === msg.id }"></view>
-                      <view class="wave-bar" :class="{ animating: playingAudioId === msg.id }"></view>
-                      <view class="wave-bar" :class="{ animating: playingAudioId === msg.id }"></view>
-                    </view>
-                    <text class="duration-tag">{{ msg.duration || 0 }}"</text>
-                  </view>
-
-                  <!-- 视频 -->
-                  <view v-else-if="msg.message_type === 3" class="video-preview" @click="playVideo(msg)">
-                    <image
-                      :src="getVideoThumb(msg)"
-                      mode="aspectFill"
-                      class="video-thumb"
-                    />
-                    <view class="play-overlay">
-                      <view class="play-btn-circle">
-                        <svg viewBox="0 0 24 24" fill="currentColor">
-                          <polygon points="5 3 19 12 5 21 5 3"/>
-                        </svg>
-                      </view>
-                    </view>
-                    <text v-if="getVideoDuration(msg)" class="video-duration">{{ getVideoDuration(msg) }}</text>
-                  </view>
-
-                  <!-- 文件 -->
-                  <view v-else-if="msg.message_type === 8" class="file-card" :class="{ 'file-self': msg.isSelf }" @click="openFile(msg)">
-                    <view class="file-icon-box" :class="{ 'icon-self': msg.isSelf }">
-                      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
-                        <polyline points="14 2 14 8 20 8"/>
-                      </svg>
-                    </view>
-                    <view class="file-meta">
-                      <text class="fname text-ellipsis">{{ getFileName(msg) }}</text>
-                      <text class="fsize">{{ formatSize(getFileSize(msg)) }}</text>
-                    </view>
-                  </view>
-
-                  <text v-else class="msg-text">[不支持的消息]</text>
-                </view>
-              </view>
-            </view>
-          </view>
-        </view>
-
-        <view class="bottom-spacer"></view>
-      </scroll-view>
-
-      <!-- 录音浮层 -->
-      <view v-if="isRecording" class="recording-overlay">
-        <view class="recording-content" :class="{ 'cancel-mode': isCancelRecording }">
-          <view class="recording-icon">
-            <svg v-if="!isCancelRecording" viewBox="0 0 24 24" fill="currentColor">
-              <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/>
-              <path d="M19 10v2a7 7 0 0 1-14 0v-2"/>
-              <line x1="12" y1="19" x2="12" y2="23" stroke="currentColor" stroke-width="2"/>
-              <line x1="8" y1="23" x2="16" y2="23" stroke="currentColor" stroke-width="2"/>
-            </svg>
-            <svg v-else viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-              <circle cx="12" cy="12" r="10"/>
-              <line x1="15" y1="9" x2="9" y2="15"/>
-              <line x1="9" y1="9" x2="15" y2="15"/>
-            </svg>
-          </view>
-          <view class="wave-bars">
-            <view class="wave-bar" v-for="i in 5" :key="i" :style="{ animationDelay: `${i * 0.1}s` }"></view>
-          </view>
-          <text class="recording-duration">{{ formatRecordDuration(recordDuration) }}</text>
-          <text class="recording-tip">{{ isCancelRecording ? '松开取消' : '上滑取消发送' }}</text>
-        </view>
-      </view>
-
-      <!-- 悬浮输入面板 -->
-      <view class="input-floater">
-        <mention-picker
-            v-if="isGroupChat"
-            :show="showMentionPicker"
-            :users="mentionUsers"
-            @select="handleMentionSelect"
-            @close="showMentionPicker = false"
-        />
-
-        <!-- 表情选择器 -->
-        <emoji-picker
-            :show="showEmoji"
-            @select="handleEmojiSelect"
-            @close="showEmoji = false"
-        />
-
-        <view class="input-bar-capsule">
-          <!-- 左侧: 语音按钮 -->
-          <view
-            class="action-trigger voice-btn"
-            @touchstart="startRecording"
-            @touchmove="onRecordingMove"
-            @touchend="stopRecording"
-            @touchcancel="cancelRecording"
-          >
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-              <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/>
-              <path d="M19 10v2a7 7 0 0 1-14 0v-2"/>
-              <line x1="12" y1="19" x2="12" y2="23"/>
-              <line x1="8" y1="23" x2="16" y2="23"/>
-            </svg>
-          </view>
-
-          <!-- 中间: 输入框 -->
-          <view class="input-field-wrap">
-            <textarea
-                v-model="inputText"
-                class="text-input"
-                :auto-height="true"
-                :maxlength="-1"
-                placeholder="发送消息..."
-                placeholder-class="input-placeholder"
-                :adjust-position="true"
-                @confirm="sendTextMessage"
-                @input="onInputChange"
+            <message-bubble
+                v-else
+                :msg="msg"
+                :is-self="msg.isSelf"
+                :sender-name="isGroupChat && !msg.isSelf ? getMessageSenderName(msg) : ''"
+                :avatar="msg.isSelf ? currentUser?.avatar : getMessageSenderAvatar(msg)"
+                :playing-audio-id="playingAudioId"
+                @avatar-click="onAvatarClick"
+                @play-audio="playAudio"
+                @preview-image="previewImage"
+                @play-video="playVideo"
+                @open-file="openFile"
+                @long-press="handleMessageLongPress"
             />
           </view>
 
-          <!-- 右侧: 表情 + 加号/发送 -->
-          <view class="right-triggers">
-            <view class="action-trigger" @click="showEmoji = !showEmoji">
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                <circle cx="12" cy="12" r="10"/>
-                <path d="M8 14s1.5 2 4 2 4-2 4-2"/>
-                <line x1="9" y1="9" x2="9.01" y2="9"/>
-                <line x1="15" y1="9" x2="15.01" y2="9"/>
-              </svg>
-            </view>
-            <template v-if="inputText.trim()">
-              <view class="send-btn" @click="sendTextMessage">
-                <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
-                  <line x1="22" y1="2" x2="11" y2="13"/>
-                  <polygon points="22 2 15 22 11 13 2 9 22 2"/>
-                </svg>
-              </view>
-            </template>
-            <template v-else>
-              <view class="action-trigger" @click="showMore = true">
-                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                  <circle cx="12" cy="12" r="10"/>
-                  <line x1="12" y1="8" x2="12" y2="16"/>
-                  <line x1="8" y1="12" x2="16" y2="12"/>
-                </svg>
-              </view>
-            </template>
-          </view>
+          <!-- 底部占位锚点 (用于强制滚动) -->
+          <view id="msg-bottom" class="bottom-spacer" style="height: 1px; width: 100%;"></view>
         </view>
-      </view>
+      </scroll-view>
 
-      <!-- 更多功能面板 -->
-      <wd-popup v-model="showMore" position="bottom" safe-area-inset-bottom :z-index="10000" custom-style="background: var(--bg-card); border-radius: 32rpx 32rpx 0 0;">
-        <view class="tools-grid">
-          <view class="tool-item" @click="chooseImage">
-            <view class="tool-icon album">
-              <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">
-                <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
-                <circle cx="8.5" cy="8.5" r="1.5"/>
-                <polyline points="21 15 16 10 5 21"/>
-              </svg>
-            </view>
-            <text>相册</text>
-          </view>
-          <view class="tool-item" @click="shootCamera">
-            <view class="tool-icon camera">
-              <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">
-                <path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/>
-                <circle cx="12" cy="13" r="4"/>
-              </svg>
-            </view>
-            <text>拍摄</text>
-          </view>
-          <view class="tool-item" @click="onMoreVideoCall">
-            <view class="tool-icon video">
-              <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">
-                <polygon points="23 7 16 12 23 17 23 7"/>
-                <rect x="1" y="5" width="15" height="14" rx="2" ry="2"/>
-              </svg>
-            </view>
-            <text>视频</text>
-          </view>
-          <view class="tool-item" @click="onMoreAudioCall">
-            <view class="tool-icon call">
-              <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">
-                <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72"/>
-              </svg>
-            </view>
-            <text>语音</text>
-          </view>
-          <view class="tool-item" @click="chooseFile">
-            <view class="tool-icon file">
-              <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">
-                <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/>
-              </svg>
-            </view>
-            <text>文件</text>
-          </view>
-        </view>
-      </wd-popup>
+      <!-- 3. 底部输入组件 -->
+      <message-input
+          v-model="inputText"
+          :is-group="isGroupChat"
+          :members="groupMembers"
+          @send="sendTextMessage"
+          @send-voice="handleSendVoice"
+          @send-image="chooseImage"
+          @send-file="chooseFile"
+          @send-camera="shootCamera"
+          @focus="scrollToBottom(true)"
+      />
 
       <wd-action-sheet v-model="showMsgActions" :actions="msgActionItems" @select="onMsgActionSelect" cancel-text="取消" />
 
-      <!-- 文件确认 -->
+      <!-- 文件确认弹窗 -->
       <wd-popup v-model="showFileConfirm" position="center" custom-style="border-radius: 32rpx; width: 600rpx; background: var(--bg-card);">
         <view class="confirm-dialog">
           <view class="dialog-header">确认发送</view>
           <view class="file-preview-box">
             <view class="preview-icon">
-              <svg viewBox="0 0 24 24" fill="none" stroke="var(--color-primary)" stroke-width="2">
-                <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
-                <polyline points="14 2 14 8 20 8"/>
-              </svg>
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/><polyline points="13 2 13 9 20 9"/></svg>
             </view>
             <view class="f-info">
               <text class="f-name">{{ pendingFile.name }}</text>
@@ -339,8 +109,8 @@
             </view>
           </view>
           <view class="dialog-footer">
-            <wd-button plain size="medium" @click="cancelFileSend" custom-style="flex:1; border:none; background: var(--bg-base);">取消</wd-button>
-            <wd-button size="medium" @click="confirmFileSend" :loading="uploading" custom-style="flex:1;">发送</wd-button>
+            <wd-button plain size="medium" @click="cancelFileSend" custom-style="flex:1; border:none; background: var(--bg-base); color: var(--text-secondary);">取消</wd-button>
+            <wd-button size="medium" @click="confirmFileSend" :loading="uploading" custom-style="flex:1; background: var(--color-primary); border-color: var(--color-primary);">发送</wd-button>
           </view>
         </view>
       </wd-popup>
@@ -351,1469 +121,369 @@
 </template>
 
 <script setup lang="ts">
-// ==========================================
-// 逻辑代码保持不变
-// ==========================================
-import { ref, computed, onMounted, onUnmounted, nextTick } from 'vue'
+import { ref, computed, onMounted, onUnmounted, nextTick, getCurrentInstance } from 'vue'
 import { onLoad } from '@dcloudio/uni-app'
 import { useAuthStore, useChatStore, useConversationStore } from '@/stores'
 import { wsManager } from '@/api/websocket'
 import * as messageApi from '@/api/modules/message'
 import * as attachmentApi from '@/api/modules/attachment'
-import { formatMessageTime, formatSize, generateColor } from '@/utils/format'
+import { formatMessageTime, formatSize } from '@/utils/format'
 import { isSystemOrNotifyMessage as checkSystemMessage } from '@/utils/message'
 import { resolveImageUrl } from '@/utils/image'
 import { useToast } from 'wot-design-uni'
 import { useTheme } from '@/composables/useTheme'
 import { useWebRTC } from '@/composables/useWebRTC'
-import AppAvatar from '@/components/common/AppAvatar.vue'
-import MentionPicker from '@/components/chat/MentionPicker.vue'
-import EmojiPicker from '@/components/chat/EmojiPicker.vue'
-import type { MentionUser } from '@/components/chat/MentionPicker.vue'
 import * as roomApi from '@/api/modules/room'
-import type { ChatMessage, Attachment, GroupMember } from '@/types/api'
+import type { ChatMessage, GroupMember } from '@/types/api'
+
+import MessageBubble from '@/components/chat/MessageBubble.vue'
+import MessageInput from '@/components/chat/MessageInput.vue'
 
 const authStore = useAuthStore()
 const chatStore = useChatStore()
 const conversationStore = useConversationStore()
 const toast = useToast()
 const { isDark } = useTheme()
-
-// 使用全局单例 webrtc
 const webrtc = useWebRTC()
+// 获取当前组件实例，用于 SelectorQuery
+const instance = getCurrentInstance()
 
+// 状态定义
 const roomId = ref(''); const targetId = ref(''); const chatName = ref(''); const targetAvatar = ref('');
-const inputText = ref(''); const messages = ref<ChatMessage[]>([]); const scrollToId = ref(''); const scrollTop = ref(0); const scrollWithAnimation = ref(false); const loadingMore = ref(false); const hasMore = ref(true); const showMore = ref(false); const showEmoji = ref(false); const playingAudioId = ref<number | null>(null); const page = ref(1);
-// 语音录制相关
-const isRecording = ref(false); const isCancelRecording = ref(false); const recordDuration = ref(0); let recordTimer: ReturnType<typeof setInterval> | null = null; let recorderManager: UniApp.RecorderManager | null = null; let recordStartY = 0;
+const inputText = ref(''); const messages = ref<ChatMessage[]>([]); const scrollToId = ref('');
+const scrollTop = ref(0); // 增加 scrollTop 控制
+const scrollWithAnimation = ref(false); const loadingMore = ref(false); const hasMore = ref(true);
+const playingAudioId = ref<number | null>(null); const page = ref(1);
 const showFileConfirm = ref(false); const uploading = ref(false); const pendingFile = ref<{ path: string; name: string; size: number; type: 'image' | 'video' | 'file'; messageType: number }>({ path: '', name: '', size: 0, type: 'file', messageType: 8 });
 const showMsgActions = ref(false); const selectedMessage = ref<ChatMessage | null>(null);
-const showMentionPicker = ref(false); const groupMembers = ref<GroupMember[]>([]); const isGroupChat = ref(false);
-// 用户信息缓存 - 用于群聊中显示成员头像和昵称
+const groupMembers = ref<GroupMember[]>([]); const isGroupChat = ref(false);
 const userCache = ref<Map<string, { name: string; avatar: string }>>(new Map());
-const mentionUsers = computed<MentionUser[]>(() => { return groupMembers.value.filter(m => m.user_id !== currentUser.value?.id).map(m => ({ id: m.user_id, name: m.nickname || m.user?.name || userCache.value.get(m.user_id)?.name || '未知', avatar: m.user?.avatar || userCache.value.get(m.user_id)?.avatar })) });
+
 const currentUser = computed(() => authStore.user);
 const msgActionItems = computed(() => { if (!selectedMessage.value) return []; const msg = selectedMessage.value; const items: any[] = []; if (msg.message_type === 0) { items.push({ name: '复制', value: 'copy' }) } if (msg.isSelf) { const sendTime = new Date(msg.created_at).getTime(); const now = Date.now(); if (now - sendTime < 2 * 60 * 1000) { items.push({ name: '撤回', value: 'recall' }) } } items.push({ name: '删除', value: 'delete', color: '#ef4444' }); return items });
 const displayName = computed(() => targetUser.value?.name || chatName.value || '聊天');
 const targetUser = computed(() => { const contact = chatStore.contacts.find(c => c.contact_user_id === targetId.value); if (contact?.user) { return contact.user } const conv = conversationStore.conversations.find(c => c.target_id === targetId.value || c.room_id === roomId.value); if (conv) { return { id: conv.target_id, name: conv.name || chatName.value, avatar: conv.avatar || targetAvatar.value } } return { id: targetId.value, name: chatName.value, avatar: targetAvatar.value } });
 
-onLoad((options: any) => { roomId.value = options?.roomId || ''; targetId.value = options?.targetId || ''; chatName.value = decodeURIComponent(options?.name || '聊天'); targetAvatar.value = decodeURIComponent(options?.avatar || ''); isGroupChat.value = !targetId.value && !!roomId.value; loadMessages(); setupWebSocket(); if (isGroupChat.value && roomId.value) { loadGroupMembers() } const callType = options?.callType; if (callType && targetId.value) { setTimeout(() => { if (callType === 'audio') { startAudioCall() } else if (callType === 'video') { startVideoCall() } }, 500) } });
-onMounted(() => { if (targetId.value) { conversationStore.clearUnread(targetId.value) } setTimeout(() => { scrollToBottom(false) }, 300) });
+onLoad((options: any) => {
+  roomId.value = options?.roomId || '';
+  targetId.value = options?.targetId || '';
+  chatName.value = decodeURIComponent(options?.name || '聊天');
+  targetAvatar.value = decodeURIComponent(options?.avatar || '');
+  isGroupChat.value = !targetId.value && !!roomId.value;
+
+  loadMessages();
+  setupWebSocket();
+
+  if (isGroupChat.value && roomId.value) { loadGroupMembers() }
+});
+
 onUnmounted(() => { wsManager.offMessage(handleNewMessage); stopAudio(); });
 
-async function loadGroupMembers() {
-  if (!roomId.value) return
-  try {
-    const members = await roomApi.getGroupMembers(roomId.value)
-    groupMembers.value = members
+// ----------------------------------------------------------------------
+// 1. 终极滚动修复：组合 scroll-into-view 和 scrollTop
+// ----------------------------------------------------------------------
+function scrollToBottom(animated = true) {
+  scrollWithAnimation.value = animated
 
-    // 构建用户缓存
-    members.forEach(member => {
-      if (member.user_id) {
-        const userData = {
-          name: member.nickname || member.user?.name || (member as any).name || '',
-          avatar: member.user?.avatar || (member as any).avatar || (member as any).user_avatar || ''
+  // 第一招：使用 scroll-into-view 锚点
+  // 先清空，确保下次设置能触发变化
+  scrollToId.value = ''
+
+  nextTick(() => {
+    setTimeout(() => {
+      // 尝试1：滚动到最后一条消息
+      if (messages.value.length > 0) {
+        scrollToId.value = `msg-${messages.value[messages.value.length - 1].id}`
+      } else {
+        scrollToId.value = 'msg-bottom'
+      }
+
+      console.log('🚀 触发滚动 ID:', scrollToId.value)
+
+      // 第二招：双保险，直接设置 scrollTop 到一个巨大值
+      // 某些情况下 view 没渲染出来 id 找不到，scrollTop 更可靠
+      uni.createSelectorQuery().in(instance).select('.message-feed').boundingClientRect((res) => {
+        if (res && res.height) {
+          console.log('📏 计算高度滚动:', res.height)
+          scrollTop.value = res.height + 1000 // 加个 buffer 确保滚到底
         }
-        // 只有有效数据才缓存
-        if (userData.name || userData.avatar) {
-          userCache.value.set(member.user_id, userData)
-        }
-      }
-    })
+      }).exec()
 
-    console.log('📋 群成员数据:', members.length, '人，用户缓存:', userCache.value.size, '人')
-  } catch (e) {
-    console.error('加载群成员失败:', e)
-  }
-}
-async function loadMessages() { if (!roomId.value) return; try { const cached = chatStore.getRoomMessages(roomId.value); if (cached.length > 0) { messages.value = cached.map((m) => ({ ...m, isSelf: m.sender_user_id === currentUser.value?.id, extra: typeof m.extra === 'string' ? JSON.parse(m.extra || '{}') : m.extra })); scrollToBottom(false); return } const res = await messageApi.getMessages(roomId.value, 1, 50); messages.value = (res.data || []).reverse().map((m: ChatMessage) => ({ ...m, isSelf: m.sender_user_id === currentUser.value?.id, extra: typeof m.extra === 'string' ? JSON.parse(m.extra || '{}') : m.extra })); chatStore.setRoomMessages(roomId.value, messages.value); hasMore.value = res.data.length >= 50; scrollToBottom(false) } catch (error) { console.error('加载消息失败:', error) } }
-function onScrollToUpper() { if (!loadingMore.value && hasMore.value) { loadMoreMessages() } }
-async function loadMoreMessages() { if (loadingMore.value || !hasMore.value) { return } loadingMore.value = true; page.value++; const firstMsgId = messages.value.length > 0 ? messages.value[0].id : null; try { const res = await messageApi.getMessages(roomId.value, page.value, 50); const newMessages = (res.data || []).reverse().map((m: ChatMessage) => ({ ...m, isSelf: m.sender_user_id === currentUser.value?.id, extra: typeof m.extra === 'string' ? JSON.parse(m.extra || '{}') : m.extra })); messages.value = [...newMessages, ...messages.value]; hasMore.value = res.data.length >= 50; if (firstMsgId) { nextTick(() => { scrollWithAnimation.value = false; scrollToId.value = `msg-${firstMsgId}` }) } } catch { page.value-- } finally { loadingMore.value = false } }
-function setupWebSocket() { wsManager.onMessage(handleNewMessage) }
-function startAudioCall() { if (!targetId.value) { toast.show('无法发起通话'); return } webrtc.startCall('audio', targetId.value, roomId.value, targetUser.value?.name, targetUser.value?.avatar) }
-function startVideoCall() { if (!targetId.value) { toast.show('无法发起通话'); return } webrtc.startCall('video', targetId.value, roomId.value, targetUser.value?.name, targetUser.value?.avatar) }
-function onMoreAudioCall() { showMore.value = false; startAudioCall() }
-function onMoreVideoCall() { showMore.value = false; startVideoCall() }
-function handleNewMessage(msg: ChatMessage) {
-  if (msg.message_type === 6) return
-  const parsedExtra = typeof msg.extra === 'string' ? JSON.parse(msg.extra || '{}') : msg.extra
-  const newMsg: ChatMessage = { ...msg, isSelf: msg.sender_user_id === currentUser.value?.id, extra: parsedExtra }
-  const isCurrentChat = msg.room_id === roomId.value
-
-  // 尝试从消息中提取发送者信息并缓存
-  const msgAny = msg as any
-  if (msg.sender_user_id && !userCache.value.has(msg.sender_user_id)) {
-    const senderName = msgAny.sender?.name || msgAny.sender_name || msgAny.from_user?.name || ''
-    const senderAvatar = msgAny.sender?.avatar || msgAny.sender_avatar || msgAny.from_user?.avatar || ''
-    if (senderName || senderAvatar) {
-      userCache.value.set(msg.sender_user_id, { name: senderName, avatar: senderAvatar })
-    }
-  }
-
-  conversationStore.handleMessageUpdate(newMsg, newMsg.isSelf || false, isCurrentChat)
-  if (!isCurrentChat) return
-
-  const exists = messages.value.some(
-    (m) => m.id === newMsg.id || (m.isSelf && m.content === newMsg.content && Math.abs(new Date(m.created_at).getTime() - new Date(newMsg.created_at).getTime()) < 2000)
-  )
-  if (!exists) {
-    messages.value.push(newMsg)
-    chatStore.addMessage(roomId.value, newMsg)
-    scrollToBottom(true)
-  }
-}
-function scrollToBottom(smooth = true) { nextTick(() => { if (messages.value.length > 0) { scrollWithAnimation.value = smooth; scrollToId.value = `msg-${messages.value[messages.value.length - 1].id}` } }) }
-async function sendTextMessage() { if (!inputText.value.trim() || !roomId.value) return; const content = inputText.value.trim(); inputText.value = ''; const message: ChatMessage = { id: Date.now(), room_id: roomId.value, sender_user_id: currentUser.value!.id, receiver_user_id: targetId.value || '', message_type: 0, content, duration: 0, extra: {}, created_at: new Date().toISOString(), isSelf: true }; messages.value.push(message); chatStore.addMessage(roomId.value, message); conversationStore.handleMessageUpdate(message, true, true); scrollToBottom(); try { await messageApi.sendMessage({ sender_client_id: wsManager.getClientId() || '', receiver_user_id: targetId.value || '', room_id: roomId.value, message_type: 0, content, extra: JSON.stringify({}) }) } catch { const index = messages.value.findIndex((m) => m.id === message.id); if (index > -1) { messages.value.splice(index, 1) } toast.error('发送失败'); inputText.value = content } }
-function chooseImage() { showMore.value = false; uni.chooseImage({ count: 1, sizeType: ['compressed'], sourceType: ['album'], success: async (res) => { const filePath = res.tempFilePaths[0]; const fileInfo = await getFileInfo(filePath); pendingFile.value = { path: filePath, name: fileInfo.name || '图片', size: fileInfo.size, type: 'image', messageType: 1 }; showFileConfirm.value = true } }) }
-function shootCamera() { showMore.value = false; uni.chooseImage({ count: 1, sourceType: ['camera'], success: async (res) => { const filePath = res.tempFilePaths[0]; const fileInfo = await getFileInfo(filePath); pendingFile.value = { path: filePath, name: '拍摄图片', size: fileInfo.size, type: 'image', messageType: 1 }; showFileConfirm.value = true } }) }
-function chooseFile() { showMore.value = false; /* #ifdef MP-WEIXIN */ wx.chooseMessageFile({ count: 1, type: 'file', success: async (res: any) => { const file = res.tempFiles[0]; pendingFile.value = { path: file.path, name: file.name || '文件', size: file.size || 0, type: 'file', messageType: 8 }; showFileConfirm.value = true } }); /* #endif */ /* #ifdef APP-PLUS */ uni.chooseFile({ count: 1, success: async (res: any) => { const filePath = res.tempFilePaths[0]; const fileInfo = await getFileInfo(filePath); pendingFile.value = { path: filePath, name: fileInfo.name, size: fileInfo.size, type: 'file', messageType: 8 }; showFileConfirm.value = true } }); /* #endif */ /* #ifdef H5 */ const input = document.createElement('input'); input.type = 'file'; input.accept = '*/*'; input.onchange = async (e: Event) => { const file = (e.target as HTMLInputElement).files?.[0]; if (file) { const blobUrl = URL.createObjectURL(file); pendingFile.value = { path: blobUrl, name: file.name, size: file.size, type: 'file', messageType: 8 }; showFileConfirm.value = true } }; input.click(); /* #endif */ }
-async function uploadAndSend(filePath: string, messageType: number, fileName?: string) { toast.loading('上传中...'); try { const uploadType = messageType === 1 ? 'image' : messageType === 3 ? 'video' : 'file'; const attachment = await attachmentApi.uploadAttachment(filePath, uploadType); toast.close(); const fileInfo = await getFileInfo(filePath); const extra: Record<string, any> = { url: attachment.file_url, name: fileName || attachment.file_name || fileInfo.name, size: attachment.file_size || fileInfo.size, attachment_id: attachment.id }; if (attachment.width) extra.width = attachment.width; if (attachment.height) extra.height = attachment.height; if (attachment.duration) extra.duration = attachment.duration; const message: ChatMessage = { id: Date.now(), room_id: roomId.value, sender_user_id: currentUser.value!.id, receiver_user_id: targetId.value || '', message_type: messageType, content: attachment.file_url, duration: attachment.duration || 0, extra, created_at: new Date().toISOString(), isSelf: true }; messages.value.push(message); chatStore.addMessage(roomId.value, message); conversationStore.handleMessageUpdate(message, true, true); scrollToBottom(true); await messageApi.sendMessage({ sender_client_id: wsManager.getClientId() || '', receiver_user_id: targetId.value || '', room_id: roomId.value, message_type: messageType, content: attachment.file_url, duration: attachment.duration || 0, extra: JSON.stringify(extra) }); toast.success('发送成功') } catch (error: any) { toast.close(); toast.error(error.message || '发送失败') } }
-function getFileInfo(filePath: string): Promise<{ name: string; size: number }> { return new Promise((resolve) => { const pathParts = filePath.split('/'); const name = pathParts[pathParts.length - 1] || '未知文件'; /* #ifdef H5 */ resolve({ name, size: 0 }); /* #endif */ /* #ifndef H5 */ uni.getFileInfo({ filePath, success: (res) => { resolve({ name, size: res.size || 0 }) }, fail: () => { resolve({ name, size: 0 }) } }); /* #endif */ }) }
-let audioContext: UniApp.InnerAudioContext | null = null; function playAudio(msg: ChatMessage) { const audioUrl = getMediaUrl(msg); if (!audioUrl) { toast.error('无法获取音频地址'); return } if (playingAudioId.value === msg.id) { stopAudio(); return } stopAudio(); audioContext = uni.createInnerAudioContext(); audioContext.src = audioUrl; audioContext.autoplay = true; playingAudioId.value = msg.id; audioContext.onEnded(() => { playingAudioId.value = null }); audioContext.onError((err) => { console.error('Audio play error:', err); toast.error('播放失败'); playingAudioId.value = null }) }
-function stopAudio() { if (audioContext) { audioContext.stop(); audioContext.destroy(); audioContext = null } playingAudioId.value = null }
-function openFile(msg: ChatMessage) { const fileUrl = getMediaUrl(msg); const fileName = getFileName(msg); if (!fileUrl) { toast.error('无法获取文件地址'); return } /* #ifdef H5 */ window.open(fileUrl, '_blank'); return; /* #endif */ /* #ifndef H5 */ toast.loading('正在打开文件...'); uni.downloadFile({ url: fileUrl, success: (res) => { toast.close(); if (res.statusCode === 200) { uni.openDocument({ filePath: res.tempFilePath, showMenu: true, success: () => {}, fail: (err) => { console.error('Open document failed:', err); toast.error('无法打开此类型文件') } }) } else { toast.error('下载文件失败') } }, fail: (err) => { toast.close(); console.error('Download file failed:', err); toast.error('下载文件失败') } }); /* #endif */ }
-function chooseVideo() { showMore.value = false; uni.chooseVideo({ sourceType: ['album', 'camera'], maxDuration: 60, success: async (res) => { const fileInfo = await getFileInfo(res.tempFilePath); pendingFile.value = { path: res.tempFilePath, name: res.name || fileInfo.name || '视频', size: res.size || fileInfo.size, type: 'video', messageType: 3 }; showFileConfirm.value = true } }) }
-function cancelFileSend() { showFileConfirm.value = false; pendingFile.value = { path: '', name: '', size: 0, type: 'file', messageType: 8 } }
-async function confirmFileSend() { uploading.value = true; try { await uploadAndSend(pendingFile.value.path, pendingFile.value.messageType, pendingFile.value.name); showFileConfirm.value = false; pendingFile.value = { path: '', name: '', size: 0, type: 'file', messageType: 8 } } finally { uploading.value = false } }
-function goBack() { uni.navigateBack() }
-function showChatInfo() { if (roomId.value) { uni.navigateTo({ url: `/pages/group/info?roomId=${roomId.value}` }) } }
-function shouldShowTime(msg: ChatMessage, index: number): boolean { if (index === 0) return true; const prevMsg = messages.value[index - 1]; const currentTime = new Date(msg.created_at).getTime(); const prevTime = new Date(prevMsg.created_at).getTime(); return currentTime - prevTime > 5 * 60 * 1000 }
-function isSystemMessage(type: number): boolean { return checkSystemMessage(type) }
-function getBubbleClass(msg: ChatMessage): string { const classes = []; if (msg.isSelf) classes.push('bubble-self'); else classes.push('bubble-other'); return classes.join(' ') }
-function getMediaTypeClass(type: number) { if (type === 1) return 'media-bubble image'; if (type === 2) return 'media-bubble audio'; if (type === 3) return 'media-bubble video'; if (type === 8) return 'media-bubble file'; return '' }
-function getMediaUrl(msg: ChatMessage): string { let url = ''; if (typeof msg.extra === 'string') { try { const extra = JSON.parse(msg.extra); url = extra.url || msg.content } catch { url = msg.content } } else { url = msg.extra?.url || msg.content } return resolveImageUrl(url) }
-function getFileName(msg: ChatMessage): string { if (typeof msg.extra === 'string') { try { const extra = JSON.parse(msg.extra); return extra.name || '未知文件' } catch { return '未知文件' } } return msg.extra?.name || '未知文件' }
-function getFileSize(msg: ChatMessage): number { if (typeof msg.extra === 'string') { try { const extra = JSON.parse(msg.extra); return extra.size || 0 } catch { return 0 } } return msg.extra?.size || 0 }
-function getMessageSenderAvatar(msg: ChatMessage): string {
-  const msgAny = msg as any
-  const senderId = msg.sender_user_id
-
-  // 1. 尝试从消息本身获取发送者头像
-  if (msgAny.sender?.avatar) return resolveImageUrl(msgAny.sender.avatar)
-  if (msgAny.sender_avatar) return resolveImageUrl(msgAny.sender_avatar)
-  if (msgAny.from_user?.avatar) return resolveImageUrl(msgAny.from_user.avatar)
-
-  // 2. 群聊时获取头像
-  if (isGroupChat.value && senderId) {
-    // 优先从用户缓存获取
-    const cachedUser = userCache.value.get(senderId)
-    if (cachedUser?.avatar) return resolveImageUrl(cachedUser.avatar)
-
-    // 从群成员列表获取
-    const member = groupMembers.value.find(m => m.user_id === senderId)
-    if (member) {
-      const avatar = member.user?.avatar || (member as any).avatar || (member as any).user_avatar
-      if (avatar) return resolveImageUrl(avatar)
-    }
-
-    // 从联系人列表中查找
-    const contact = chatStore.contacts.find(c => c.contact_user_id === senderId)
-    if (contact?.user?.avatar) return resolveImageUrl(contact.user.avatar)
-
-    // 返回空字符串，让 AppAvatar 组件显示首字母头像
-    return ''
-  }
-
-  // 3. 单聊时使用对方头像
-  return resolveImageUrl(targetUser.value?.avatar || '')
-}
-
-function getMessageSenderName(msg: ChatMessage): string {
-  const msgAny = msg as any
-  const senderId = msg.sender_user_id
-
-  // 1. 尝试从消息本身获取发送者名称
-  if (msgAny.sender?.name) return msgAny.sender.name
-  if (msgAny.sender_name) return msgAny.sender_name
-  if (msgAny.from_user?.name) return msgAny.from_user.name
-
-  // 2. 群聊时获取名称
-  if (isGroupChat.value && senderId) {
-    // 优先从用户缓存获取
-    const cachedUser = userCache.value.get(senderId)
-    if (cachedUser?.name) return cachedUser.name
-
-    // 从群成员列表获取
-    const member = groupMembers.value.find(m => m.user_id === senderId)
-    if (member) {
-      const name = member.nickname || member.user?.name || (member as any).name || (member as any).user_name
-      if (name) return name
-    }
-
-    // 从联系人列表中查找
-    const contact = chatStore.contacts.find(c => c.contact_user_id === senderId)
-    if (contact?.user?.name) return contact.remark_name || contact.user.name
-
-    // 返回用户 ID 的后 4 位作为备用名称
-    return `用户${senderId.slice(-4)}`
-  }
-
-  // 3. 单聊时使用对方名称
-  return targetUser.value?.name || chatName.value || '未知'
-}
-
-function onAvatarClick(msg: ChatMessage) { const userId = msg.sender_user_id; if (!userId) return; uni.navigateTo({ url: `/pages/contact/detail?userId=${userId}` }) }
-function handleMessageLongPress(msg: ChatMessage) { selectedMessage.value = msg; showMsgActions.value = true }
-async function onMsgActionSelect(action: { value: string }) { if (!selectedMessage.value) return; const msg = selectedMessage.value; showMsgActions.value = false; switch (action.value) { case 'copy': copyMessage(msg); break; case 'recall': await recallMessage(msg); break; case 'delete': deleteMessage(msg); break } }
-function copyMessage(msg: ChatMessage) { if (msg.message_type !== 0) return; uni.setClipboardData({ data: msg.content || '', success: () => { toast.success('已复制') }, fail: () => { toast.error('复制失败') } }) }
-async function recallMessage(msg: ChatMessage) { try { await messageApi.recallMessage(msg.id); const index = messages.value.findIndex(m => m.id === msg.id); if (index > -1) { messages.value[index] = { ...messages.value[index], message_type: 5, content: '你撤回了一条消息' } } toast.success('已撤回') } catch (e: any) { toast.error(e.message || '撤回失败') } }
-function deleteMessage(msg: ChatMessage) { const index = messages.value.findIndex(m => m.id === msg.id); if (index > -1) { messages.value.splice(index, 1); chatStore.removeMessage(roomId.value, msg.id); toast.success('已删除') } }
-function onInputChange(e: any) { const value = e.detail?.value || inputText.value; if (value.endsWith('@') && isGroupChat.value) { showMentionPicker.value = true } }
-function triggerMention() { inputText.value += '@'; showMentionPicker.value = true }
-function handleMentionSelect(user: MentionUser) { if (inputText.value.endsWith('@')) { inputText.value = inputText.value.slice(0, -1) + `@${user.name} ` } else { inputText.value += `@${user.name} ` } showMentionPicker.value = false }
-function handleEmojiSelect(emoji: string) { inputText.value += emoji }
-function previewImage(msg: ChatMessage) { const url = getMediaUrl(msg); if (url) { uni.previewImage({ urls: [url], current: url }) } }
-
-// 视频相关函数
-function getVideoThumb(msg: ChatMessage): string {
-  // 尝试从 extra 获取封面图
-  const extra = typeof msg.extra === 'string' ? JSON.parse(msg.extra || '{}') : msg.extra
-  if (extra?.thumb || extra?.cover || extra?.thumbnail) {
-    return resolveImageUrl(extra.thumb || extra.cover || extra.thumbnail)
-  }
-  // 如果没有封面，返回视频 URL（部分平台可以显示视频首帧）
-  return getMediaUrl(msg)
-}
-
-function getVideoDuration(msg: ChatMessage): string {
-  const extra = typeof msg.extra === 'string' ? JSON.parse(msg.extra || '{}') : msg.extra
-  const duration = extra?.duration || msg.duration || 0
-  if (!duration) return ''
-  const mins = Math.floor(duration / 60)
-  const secs = Math.floor(duration % 60)
-  return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
-}
-
-function playVideo(msg: ChatMessage) {
-  const url = getMediaUrl(msg)
-  if (!url) {
-    toast.error('无法获取视频地址')
-    return
-  }
-  // 使用 uni-app 的视频预览
-  /* #ifdef H5 */
-  window.open(url, '_blank')
-  /* #endif */
-  /* #ifndef H5 */
-  uni.navigateTo({
-    url: `/pages/common/video-player?url=${encodeURIComponent(url)}`
-  })
-  /* #endif */
-}
-
-// ========== 语音录制处理 ==========
-function formatRecordDuration(seconds: number): string { const m = Math.floor(seconds / 60).toString().padStart(2, '0'); const s = (seconds % 60).toString().padStart(2, '0'); return `${m}:${s}` }
-
-// 检查录音权限
-async function checkRecordPermission(): Promise<boolean> {
-  return new Promise((resolve) => {
-    /* #ifdef APP-PLUS */
-    const permission = (plus as any).android?.checkPermission('android.permission.RECORD_AUDIO')
-    if (permission === (plus as any).android?.PERMISSION_GRANTED) {
-      resolve(true)
-    } else {
-      (plus as any).android?.requestPermission('android.permission.RECORD_AUDIO', (status: any) => {
-        resolve(status === (plus as any).android?.PERMISSION_GRANTED)
-      }, () => resolve(false))
-    }
-    /* #endif */
-    /* #ifdef MP-WEIXIN */
-    uni.authorize({
-      scope: 'scope.record',
-      success: () => resolve(true),
-      fail: () => {
-        uni.showModal({
-          title: '提示',
-          content: '需要麦克风权限才能录音，请在设置中开启',
-          confirmText: '去设置',
-          success: (res) => {
-            if (res.confirm) {
-              uni.openSetting({})
-            }
-          }
-        })
-        resolve(false)
-      }
-    })
-    /* #endif */
-    /* #ifdef H5 */
-    if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
-      navigator.mediaDevices.getUserMedia({ audio: true })
-        .then(() => resolve(true))
-        .catch(() => {
-          toast.error('请允许使用麦克风')
-          resolve(false)
-        })
-    } else {
-      toast.error('当前浏览器不支持录音')
-      resolve(false)
-    }
-    /* #endif */
+    }, 150) // 延时稍微加大一点，等待渲染完全
   })
 }
 
-function initRecorderManager() {
-  if (recorderManager) return recorderManager
-
-  // H5 平台不支持 uni.getRecorderManager
-  /* #ifdef H5 */
-  toast.error('当前平台不支持录音')
-  return null
-  /* #endif */
-
-  /* #ifndef H5 */
-  const manager = uni.getRecorderManager()
-
-  if (!manager) {
-    toast.error('录音功能不可用')
-    return null
-  }
-
-  manager.onStart(() => {
-    console.log('录音开始')
-    isRecording.value = true
-    recordDuration.value = 0
-    recordTimer = setInterval(() => {
-      recordDuration.value++
-      if (recordDuration.value >= 60) {
-        stopRecording()
-      }
-    }, 1000)
-  })
-
-  manager.onStop((res) => {
-    console.log('录音结束', res)
-    clearRecordTimer()
-    isRecording.value = false
-    if (!isCancelRecording.value && res.tempFilePath && recordDuration.value >= 1) {
-      sendVoiceMessage(res.tempFilePath, recordDuration.value)
-    }
-    isCancelRecording.value = false
-    recordDuration.value = 0
-  })
-
-  manager.onError((err) => {
-    console.error('录音错误', err)
-    clearRecordTimer()
-    isRecording.value = false
-    isCancelRecording.value = false
-    toast.error('录音失败：' + (err.errMsg || '未知错误'))
-  })
-
-  recorderManager = manager
-  return recorderManager
-  /* #endif */
+// ----------------------------------------------------------------------
+// 2. 语音发送逻辑
+// ----------------------------------------------------------------------
+async function handleSendVoice(data: { path: string; duration: number }) {
+  await uploadAndSend(data.path, 2, 'voice.m4a', { duration: data.duration })
 }
 
-function clearRecordTimer() { if (recordTimer) { clearInterval(recordTimer); recordTimer = null } }
-
-async function startRecording(e: TouchEvent) {
-  recordStartY = e.touches[0].clientY
-  isCancelRecording.value = false
-
-  // 先检查权限
-  const hasPermission = await checkRecordPermission()
-  if (!hasPermission) {
-    toast.error('无录音权限')
-    return
-  }
-
-  const recorder = initRecorderManager()
-  if (!recorder) {
-    return
-  }
-
-  recorder.start({
-    duration: 60000,
-    sampleRate: 16000,
-    numberOfChannels: 1,
-    encodeBitRate: 48000,
-    format: 'aac' // 使用 aac 格式，跨平台兼容性更好
-  })
-}
-function onRecordingMove(e: TouchEvent) { if (!isRecording.value) return; const currentY = e.touches[0].clientY; const diff = recordStartY - currentY; isCancelRecording.value = diff > 80 }
-function stopRecording() { if (!isRecording.value) return; if (recorderManager) { recorderManager.stop() } }
-function cancelRecording() { isCancelRecording.value = true; stopRecording() }
-async function sendVoiceMessage(filePath: string, duration: number) {
-  toast.loading('发送中...')
+// 通用上传发送逻辑
+async function uploadAndSend(filePath: string, messageType: number, fileName?: string, customExtra: any = {}) {
+  toast.loading('发送中...');
   try {
-    const attachment = await attachmentApi.uploadAttachment(filePath, 'audio')
-    toast.close()
+    // 上传
+    const uploadType = messageType === 1 ? 'image' : messageType === 3 ? 'video' : 'file';
+    const attachment = await attachmentApi.uploadAttachment(filePath, uploadType);
+    toast.close();
 
-    const extra: Record<string, any> = {
+    // 构建 extra
+    const fileInfo = await getFileInfo(filePath);
+    const extra: any = {
       url: attachment.file_url,
-      name: attachment.file_name || 'voice.m4a', // 使用 m4a 扩展名（aac 格式）
-      size: attachment.file_size || 0,
-      duration: duration,
-      attachment_id: attachment.id
-    }
+      name: fileName || attachment.file_name || fileInfo.name,
+      size: attachment.file_size || fileInfo.size,
+      attachment_id: attachment.id,
+      ...customExtra
+    };
+    if(attachment.width) extra.width = attachment.width;
+    if(attachment.height) extra.height = attachment.height;
+    if(attachment.duration) extra.duration = attachment.duration;
 
+    // UI 立即上屏
     const message: ChatMessage = {
       id: Date.now(),
       room_id: roomId.value,
       sender_user_id: currentUser.value!.id,
       receiver_user_id: targetId.value || '',
-      message_type: 2,
+      message_type: messageType,
       content: attachment.file_url,
-      duration: duration,
+      duration: extra.duration || 0,
       extra,
       created_at: new Date().toISOString(),
       isSelf: true
-    }
+    };
 
-    messages.value.push(message)
-    chatStore.addMessage(roomId.value, message)
-    conversationStore.handleMessageUpdate(message, true, true)
-    scrollToBottom(true)
+    messages.value.push(message);
+    chatStore.addMessage(roomId.value, message);
+    conversationStore.handleMessageUpdate(message, true, true);
 
+    scrollToBottom(true);
+
+    // API 发送
     await messageApi.sendMessage({
       sender_client_id: wsManager.getClientId() || '',
       receiver_user_id: targetId.value || '',
       room_id: roomId.value,
-      message_type: 2,
+      message_type: messageType,
       content: attachment.file_url,
-      duration: duration,
+      duration: extra.duration || 0,
       extra: JSON.stringify(extra)
-    })
+    });
+
     toast.success('发送成功')
   } catch (error: any) {
-    toast.close()
-    console.error('语音发送失败:', error)
+    toast.close();
+    console.error('发送失败:', error);
     toast.error(error.message || '发送失败')
   }
 }
+
+// ... (其余业务逻辑) ...
+
+async function loadMessages() {
+  if (!roomId.value) return;
+  try {
+    const cached = chatStore.getRoomMessages(roomId.value);
+    if (cached.length > 0) {
+      messages.value = mapMessages(cached);
+      scrollToBottom(false); // 初始无动画
+    }
+
+    const res = await messageApi.getMessages(roomId.value, 1, 50);
+    const newMsgs = mapMessages((res.data || []).reverse());
+
+    if (newMsgs.length > cached.length || cached.length === 0) {
+      messages.value = newMsgs;
+      chatStore.setRoomMessages(roomId.value, messages.value);
+      scrollToBottom(false);
+    }
+    hasMore.value = res.data.length >= 50;
+  } catch (error) { console.error('加载消息失败:', error) }
+}
+
+function mapMessages(msgs: any[]) {
+  return msgs.map((m) => ({
+    ...m,
+    isSelf: m.sender_user_id === currentUser.value?.id,
+    extra: typeof m.extra === 'string' ? JSON.parse(m.extra || '{}') : m.extra
+  }));
+}
+
+async function sendTextMessage(content: string) {
+  if (!content || !roomId.value) return;
+  const message: ChatMessage = { id: Date.now(), room_id: roomId.value, sender_user_id: currentUser.value!.id, receiver_user_id: targetId.value || '', message_type: 0, content, duration: 0, extra: {}, created_at: new Date().toISOString(), isSelf: true };
+  messages.value.push(message);
+  chatStore.addMessage(roomId.value, message);
+  conversationStore.handleMessageUpdate(message, true, true);
+
+  scrollToBottom(true); // 发送滚动
+
+  try {
+    await messageApi.sendMessage({ sender_client_id: wsManager.getClientId() || '', receiver_user_id: targetId.value || '', room_id: roomId.value, message_type: 0, content, extra: JSON.stringify({}) })
+  } catch {
+    const index = messages.value.findIndex((m) => m.id === message.id); if (index > -1) { messages.value.splice(index, 1) } toast.error('发送失败'); inputText.value = content
+  }
+}
+
+function handleNewMessage(msg: ChatMessage) {
+  if (msg.message_type === 6) return;
+  const parsedExtra = typeof msg.extra === 'string' ? JSON.parse(msg.extra || '{}') : msg.extra;
+  const newMsg: ChatMessage = { ...msg, isSelf: msg.sender_user_id === currentUser.value?.id, extra: parsedExtra };
+  const isCurrentChat = msg.room_id === roomId.value;
+
+  conversationStore.handleMessageUpdate(newMsg, newMsg.isSelf || false, isCurrentChat);
+
+  if (!isCurrentChat) return;
+  const exists = messages.value.some((m) => m.id === newMsg.id);
+  if (!exists) {
+    messages.value.push(newMsg);
+    chatStore.addMessage(roomId.value, newMsg);
+    scrollToBottom(true); // 接收滚动
+  }
+}
+
+// ... (Helper Functions 保持不变) ...
+async function loadGroupMembers() { if (!roomId.value) return; try { const members = await roomApi.getGroupMembers(roomId.value); groupMembers.value = members; members.forEach(member => { if (member.user_id) { const userData = { name: member.nickname || member.user?.name || (member as any).name || '', avatar: member.user?.avatar || (member as any).avatar || (member as any).user_avatar || '' }; if (userData.name || userData.avatar) { userCache.value.set(member.user_id, userData) } } }) } catch (e) { console.error('加载群成员失败:', e) } }
+async function loadMoreMessages() { if (loadingMore.value || !hasMore.value) { return } loadingMore.value = true; page.value++; const firstMsgId = messages.value.length > 0 ? messages.value[0].id : null; try { const res = await messageApi.getMessages(roomId.value, page.value, 50); const newMessages = mapMessages((res.data || []).reverse()); messages.value = [...newMessages, ...messages.value]; hasMore.value = res.data.length >= 50; if (firstMsgId) { nextTick(() => { scrollWithAnimation.value = false; scrollToId.value = `msg-${firstMsgId}` }) } } catch { page.value-- } finally { loadingMore.value = false } }
+function setupWebSocket() { wsManager.onMessage(handleNewMessage) }
+function onScrollToUpper() { if (!loadingMore.value && hasMore.value) { loadMoreMessages() } }
+function onScrollClick() { /* 点击空白处收起键盘 */ }
+function getMessageSenderAvatar(msg: ChatMessage): string { const msgAny = msg as any; const senderId = msg.sender_user_id; if (msgAny.sender?.avatar) return resolveImageUrl(msgAny.sender.avatar); if (msgAny.sender_avatar) return resolveImageUrl(msgAny.sender_avatar); if (msgAny.from_user?.avatar) return resolveImageUrl(msgAny.from_user.avatar); if (isGroupChat.value && senderId) { const cachedUser = userCache.value.get(senderId); if (cachedUser?.avatar) return resolveImageUrl(cachedUser.avatar); const member = groupMembers.value.find(m => m.user_id === senderId); if (member) { const avatar = member.user?.avatar || (member as any).avatar || (member as any).user_avatar; if (avatar) return resolveImageUrl(avatar) } const contact = chatStore.contacts.find(c => c.contact_user_id === senderId); if (contact?.user?.avatar) return resolveImageUrl(contact.user.avatar); return '' } return resolveImageUrl(targetUser.value?.avatar || '') }
+function getMessageSenderName(msg: ChatMessage): string { const msgAny = msg as any; const senderId = msg.sender_user_id; if (msgAny.sender?.name) return msgAny.sender.name; if (msgAny.sender_name) return msgAny.sender_name; if (msgAny.from_user?.name) return msgAny.from_user.name; if (isGroupChat.value && senderId) { const cachedUser = userCache.value.get(senderId); if (cachedUser?.name) return cachedUser.name; const member = groupMembers.value.find(m => m.user_id === senderId); if (member) { const name = member.nickname || member.user?.name || (member as any).name || (member as any).user_name; if (name) return name } const contact = chatStore.contacts.find(c => c.contact_user_id === senderId); if (contact?.user?.name) return contact.remark_name || contact.user.name; return `用户${senderId.slice(-4)}` } return targetUser.value?.name || chatName.value || '未知' }
+function onAvatarClick(userId?: string) { if (userId) uni.navigateTo({ url: `/pages/contact/detail?userId=${userId}` }) }
+function handleMessageLongPress(msg: ChatMessage) { selectedMessage.value = msg; showMsgActions.value = true }
+function previewImage(url: string) { if (url) uni.previewImage({ urls: [url], current: url }) }
+function playVideo(url: string) { if (url) { /* #ifdef H5 */ window.open(url, '_blank'); /* #endif */ /* #ifndef H5 */ uni.navigateTo({ url: `/pages/common/video-player?url=${encodeURIComponent(url)}` }); /* #endif */ } }
+function openFile(url: string) { if (!url) return; /* #ifdef H5 */ window.open(url, '_blank'); /* #endif */ /* #ifndef H5 */ toast.loading('正在打开文件...'); uni.downloadFile({ url: url, success: (res) => { toast.close(); if (res.statusCode === 200) { uni.openDocument({ filePath: res.tempFilePath, showMenu: true }) } }, fail: () => { toast.close(); toast.error('下载失败') } }); /* #endif */ }
+let audioContext: UniApp.InnerAudioContext | null = null; function playAudio(msg: ChatMessage) { const audioUrl = typeof msg.extra === 'string' ? JSON.parse(msg.extra).url : msg.extra?.url || msg.content; const url = resolveImageUrl(audioUrl); if (!url) return; if (playingAudioId.value === msg.id) { stopAudio(); return } stopAudio(); audioContext = uni.createInnerAudioContext(); audioContext.src = url; audioContext.autoplay = true; playingAudioId.value = msg.id; audioContext.onEnded(() => { playingAudioId.value = null }); audioContext.onError(() => { playingAudioId.value = null; toast.error('播放失败') }) }
+function stopAudio() { if (audioContext) { audioContext.stop(); audioContext.destroy(); audioContext = null } playingAudioId.value = null }
+function startAudioCall() { if (!targetId.value) return; webrtc.startCall('audio', targetId.value, roomId.value, targetUser.value?.name, targetUser.value?.avatar) }
+function startVideoCall() { if (!targetId.value) return; webrtc.startCall('video', targetId.value, roomId.value, targetUser.value?.name, targetUser.value?.avatar) }
+function chooseImage() { uni.chooseImage({ count: 1, sizeType: ['compressed'], sourceType: ['album'], success: handleFileSelect('image', 1) }) }
+function shootCamera() { uni.chooseImage({ count: 1, sourceType: ['camera'], success: handleFileSelect('image', 1) }) }
+function chooseFile() { /* #ifdef MP-WEIXIN */ wx.chooseMessageFile({ count: 1, type: 'file', success: (res: any) => handleFileSelect('file', 8)({ tempFilePaths: [res.tempFiles[0].path], tempFiles: res.tempFiles }) }); /* #endif */ /* #ifdef APP-PLUS */ uni.chooseFile({ count: 1, success: handleFileSelect('file', 8) }); /* #endif */ /* #ifdef H5 */ const input = document.createElement('input'); input.type = 'file'; input.onchange = (e: any) => { const file = e.target.files[0]; if(file) { pendingFile.value = { path: URL.createObjectURL(file), name: file.name, size: file.size, type: 'file', messageType: 8 }; showFileConfirm.value = true } }; input.click(); /* #endif */ }
+const handleFileSelect = (type: 'image'|'video'|'file', msgType: number) => async (res: any) => { const filePath = res.tempFilePaths[0]; const file = res.tempFiles ? res.tempFiles[0] : {}; const fileInfo = await getFileInfo(filePath); pendingFile.value = { path: filePath, name: file.name || fileInfo.name || (type==='image'?'图片':'文件'), size: file.size || fileInfo.size, type: type, messageType: msgType }; showFileConfirm.value = true }
+async function confirmFileSend() { uploading.value = true; try { await uploadAndSend(pendingFile.value.path, pendingFile.value.messageType, pendingFile.value.name); showFileConfirm.value = false } finally { uploading.value = false } }
+function cancelFileSend() { showFileConfirm.value = false }
+function getFileInfo(filePath: string): Promise<{ name: string; size: number }> { return new Promise((resolve) => { const name = filePath.split('/').pop() || 'file'; /* #ifdef H5 */ resolve({ name, size: 0 }); /* #endif */ /* #ifndef H5 */ uni.getFileInfo({ filePath, success: (res) => resolve({ name, size: res.size }), fail: () => resolve({ name, size: 0 }) }); /* #endif */ }) }
+async function onMsgActionSelect(action: { value: string }) { if (!selectedMessage.value) return; const msg = selectedMessage.value; showMsgActions.value = false; switch (action.value) { case 'copy': uni.setClipboardData({ data: msg.content }); break; case 'recall': await messageApi.recallMessage(msg.id); msg.message_type = 5; msg.content = '你撤回了一条消息'; break; case 'delete': messages.value = messages.value.filter(m => m.id !== msg.id); chatStore.removeMessage(roomId.value, msg.id); break; } }
+function goBack() { uni.navigateBack() }
+function showChatInfo() { if (roomId.value) { uni.navigateTo({ url: `/pages/group/info?roomId=${roomId.value}` }) } }
+function shouldShowTime(msg: ChatMessage, index: number): boolean { if (index === 0) return true; const prevMsg = messages.value[index - 1]; const currentTime = new Date(msg.created_at).getTime(); const prevTime = new Date(prevMsg.created_at).getTime(); return currentTime - prevTime > 5 * 60 * 1000 }
+function isSystemMessage(type: number): boolean { return checkSystemMessage(type) }
+function formatRecordDuration(seconds: number): string { const m = Math.floor(seconds / 60).toString().padStart(2, '0'); const s = (seconds % 60).toString().padStart(2, '0'); return `${m}:${s}` }
+async function checkRecordPermission(): Promise<boolean> { return new Promise((resolve) => { /* #ifdef APP-PLUS */ const permission = (plus as any).android?.checkPermission('android.permission.RECORD_AUDIO'); if (permission === (plus as any).android?.PERMISSION_GRANTED) { resolve(true) } else { (plus as any).android?.requestPermission('android.permission.RECORD_AUDIO', (status: any) => { resolve(status === (plus as any).android?.PERMISSION_GRANTED) }, () => resolve(false)) } /* #endif */ /* #ifdef MP-WEIXIN */ uni.authorize({ scope: 'scope.record', success: () => resolve(true), fail: () => { uni.showModal({ title: '提示', content: '需要麦克风权限才能录音，请在设置中开启', confirmText: '去设置', success: (res) => { if (res.confirm) { uni.openSetting({}) } } }); resolve(false) } }); /* #endif */ /* #ifdef H5 */ if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) { navigator.mediaDevices.getUserMedia({ audio: true }).then(() => resolve(true)).catch(() => { toast.error('请允许使用麦克风'); resolve(false) }) } else { toast.error('当前浏览器不支持录音'); resolve(false) } /* #endif */ }) }
+function initRecorderManager() { if (recorderManager) return recorderManager; /* #ifdef H5 */ toast.error('当前平台不支持录音'); return null; /* #endif */ /* #ifndef H5 */ const manager = uni.getRecorderManager(); if (!manager) { toast.error('录音功能不可用'); return null } manager.onStart(() => { isRecording.value = true; recordDuration.value = 0; recordTimer = setInterval(() => { recordDuration.value++; if (recordDuration.value >= 60) { stopRecording() } }, 1000) }); manager.onStop((res) => { clearRecordTimer(); isRecording.value = false; if (!isCancelRecording.value && res.tempFilePath && recordDuration.value >= 1) { handleSendVoice({ path: res.tempFilePath, duration: recordDuration.value }) } isCancelRecording.value = false; recordDuration.value = 0 }); manager.onError((err) => { clearRecordTimer(); isRecording.value = false; isCancelRecording.value = false; toast.error('录音失败：' + (err.errMsg || '未知错误')) }); recorderManager = manager; return recorderManager; /* #endif */ }
+function clearRecordTimer() { if (recordTimer) { clearInterval(recordTimer); recordTimer = null } }
+async function startRecording(e: TouchEvent) { recordStartY = e.touches[0].clientY; isCancelRecording.value = false; const hasPermission = await checkRecordPermission(); if (!hasPermission) { toast.error('无录音权限'); return } const recorder = initRecorderManager(); if (!recorder) { return } recorder.start({ duration: 60000, sampleRate: 16000, numberOfChannels: 1, encodeBitRate: 48000, format: 'aac' }) }
+function onRecordingMove(e: TouchEvent) { if (!isRecording.value) return; const currentY = e.touches[0].clientY; const diff = recordStartY - currentY; isCancelRecording.value = diff > 80 }
+function stopRecording() { if (!isRecording.value) return; if (recorderManager) { recorderManager.stop() } }
+function cancelRecording() { isCancelRecording.value = true; stopRecording() }
 </script>
 
 <style lang="scss" scoped>
-// ==========================================
-// 与设计稿完全一致的系统变量
-// ==========================================
+/* 样式保留，注意 message-feed 的 padding-bottom */
 .chat-page-container {
-  // 浅色模式颜色
-  --bg-base: #F5F7FA; // 设计稿 bg-[#F5F7FA]
+  --bg-base: #F5F7FA;
   --bg-card: #ffffff;
-  --text-main: #1f2937; // gray-800
-  --text-secondary: #6b7280; // gray-500
-  --text-tertiary: #9ca3af; // gray-400
-  --color-primary: #4F46E5; // indigo-600
+  --text-main: #1f2937;
+  --text-tertiary: #9ca3af;
+  --color-primary: #4F46E5;
+  --nav-bg: rgba(255, 255, 255, 0.9);
+  --nav-border: transparent;
 
   height: 100vh;
   display: flex;
   flex-direction: column;
   background: var(--bg-base);
 
-  // ==========================================
-  // 深色模式 - Warm Stone 调色板
-  // ==========================================
   &.theme-dark {
-    --bg-base: #121212; // 设计稿 dark:bg-[#121212]
-    --bg-card: #1c1917; // warm-900
-    --text-main: #f5f5f4; // warm-100
-    --text-secondary: #a8a29e; // warm-400
-    --text-tertiary: #78716c; // warm-500
-    --color-primary: #f97316; // orange-500
+    --bg-base: #0c0a09;
+    --bg-card: #1c1917;
+    --text-main: #e7e5e4;
+    --text-tertiary: #78716c;
+    --color-primary: #f97316;
+    --nav-bg: rgba(28, 25, 23, 0.9);
+    --nav-border: rgba(68, 64, 60, 0.5);
   }
 }
 
-// 自定义滚动条
 .custom-scrollbar {
   &::-webkit-scrollbar { display: none; }
   -ms-overflow-style: none;
   scrollbar-width: none;
 }
 
-// ==========================================
-// 沉浸式导航栏 - 与设计稿完全一致
-// 设计稿: px-4 pt-12 pb-3, bg-white/90 dark:bg-warm-900/90
-// ==========================================
+/* 导航栏 */
 .glass-navbar {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  z-index: 100;
+  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
   padding-top: var(--status-bar-height);
-
   .navbar-bg {
-    position: absolute;
-    inset: 0;
-    background: rgba(255, 255, 255, 0.9); // 设计稿 bg-white/90
-    backdrop-filter: blur(12px); // 设计稿 backdrop-blur-md
-    -webkit-backdrop-filter: blur(12px);
-    border-bottom: 2rpx solid transparent; // 设计稿 border-transparent
-    transition: all 0.3s;
-
-    .theme-dark & {
-      background: rgba(28, 25, 23, 0.9); // 设计稿 dark:bg-warm-900/90
-      border-color: rgba(68, 64, 60, 0.5); // 设计稿 dark:border-warm-800/50
-    }
+    position: absolute; inset: 0; background: var(--nav-bg);
+    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
+    border-bottom: 2rpx solid var(--nav-border);
   }
-
   .navbar-content {
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 24rpx 32rpx; // 设计稿 px-4 pb-3
-    padding-top: 96rpx; // 设计稿 pt-12 = 48px = 96rpx
+    position: relative; height: 88rpx; display: flex; align-items: center; justify-content: space-between; padding: 0 24rpx;
   }
-
-  .nav-left {
-    display: flex;
-    align-items: center;
-    gap: 8rpx; // 设计稿 gap-1 = 4px = 8rpx
-    cursor: pointer;
-    transition: opacity 0.15s;
-
-    &:active { opacity: 0.6; }
-  }
-
-  .back-icon {
-    width: 56rpx; // 设计稿 w-7 = 28px = 56rpx
-    height: 56rpx;
-    color: #1f2937; // 设计稿 text-gray-800
-
-    .theme-dark & {
-      color: #f5f5f4; // 设计稿 dark:text-warm-100
-    }
-  }
-
+}
+.nav-left {
+  display: flex; align-items: center; gap: 16rpx; max-width: 60%;
+  .back-btn { width: 64rpx; height: 64rpx; display: flex; align-items: center; justify-content: center; color: var(--text-main); svg { width: 52rpx; height: 52rpx; } }
   .nav-info {
-    display: flex;
-    flex-direction: column;
-  }
-
-  .nav-name {
-    font-size: 34rpx; // 设计稿 text-[17px] = 17px ≈ 34rpx
-    font-weight: 700; // 设计稿 font-bold
-    color: #111827; // 设计稿 text-gray-900
-    line-height: 1.2; // 设计稿 leading-tight
-
-    .theme-dark & {
-      color: #f5f5f4; // 设计稿 dark:text-warm-100
-    }
-  }
-
-  .member-count, .online-status {
-    display: flex;
-    align-items: center;
-    gap: 8rpx; // 设计稿 gap-1 = 4px = 8rpx
-    font-size: 20rpx; // 设计稿 text-[10px] = 10px = 20rpx
-    color: #9ca3af; // 设计稿 text-gray-400
-    font-weight: 500; // 设计稿 font-medium
-    margin-top: 2rpx;
-
-    .theme-dark & {
-      color: #a8a29e; // 设计稿 dark:text-warm-400
-    }
-  }
-
-  .online-status {
-    &::before {
-      content: '';
-      width: 12rpx; // 设计稿 w-1.5 = 6px = 12rpx
-      height: 12rpx;
-      background: #22c55e; // 设计稿 bg-green-500
-      border-radius: 50%;
-    }
-  }
-
-  .nav-actions {
-    display: flex;
-    gap: 40rpx; // 设计稿 gap-5 = 20px = 40rpx
-    padding-right: 16rpx; // 设计稿 pr-2 = 8px = 16rpx
-  }
-
-  .icon-btn {
-    width: 48rpx; // 设计稿 w-6 = 24px = 48rpx
-    height: 48rpx;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-
-    svg {
-      width: 48rpx;
-      height: 48rpx;
-      color: #4b5563; // 设计稿 text-gray-600
-      transition: color 0.2s ease;
-
-      .theme-dark & {
-        color: #a8a29e; // 设计稿 dark:text-warm-400
-      }
-    }
-
-    &:hover svg {
-      color: #4f46e5; // 设计稿 hover:text-indigo-600
-    }
-
-    .theme-dark &:hover svg {
-      color: #fb923c; // 设计稿 dark:hover:text-orange-400
+    display: flex; flex-direction: column;
+    .nav-name { font-size: 34rpx; font-weight: 700; color: var(--text-main); line-height: 1.2; }
+    .status-row {
+      display: flex; align-items: center; gap: 8rpx; margin-top: 4rpx;
+      .status-dot { width: 12rpx; height: 12rpx; border-radius: 50%; background: #22c55e; }
+      .status-text { font-size: 20rpx; color: var(--text-tertiary); font-weight: 500; }
     }
   }
 }
+.nav-actions {
+  display: flex; gap: 32rpx;
+  .icon-btn {
+    width: 48rpx; height: 48rpx; color: var(--text-tertiary); display: flex; align-items: center; justify-content: center;
+    svg { width: 48rpx; height: 48rpx; }
+  }
+}
 
-// 滚动区 - 与设计稿一致
-// 设计稿: bg-[#F5F7FA] dark:bg-[#121212] px-4 pt-28 pb-24 space-y-6
+/* 消息列表 */
 .chat-scroll-area {
   flex: 1;
-  overflow: hidden;
-  box-sizing: border-box;
-  background: #F5F7FA; // 设计稿 bg-[#F5F7FA]
-
-  .theme-dark & {
-    background: #121212; // 设计稿 dark:bg-[#121212]
-  }
+  background: var(--bg-base);
+  transition: background-color 0.5s ease;
 }
-
 .message-feed {
-  padding: 32rpx; // 设计稿 px-4 = 16px = 32rpx
-  padding-top: calc(224rpx + var(--status-bar-height)); // 设计稿 pt-28 = 112px = 224rpx
-  padding-bottom: 192rpx; // 设计稿 pb-24 = 96px = 192rpx
+  padding: 32rpx;
+  padding-top: calc(88rpx + var(--status-bar-height) + 32rpx);
+  /* 增加底部 Padding 以防输入框遮挡 */
+  padding-bottom: 240rpx;
 }
+.feed-status { text-align: center; padding: 24rpx; margin-bottom: 24rpx; .link-text { color: var(--color-primary); font-size: 24rpx; } }
 
-.feed-status {
-  text-align: center;
-  padding: 20rpx;
-  .link-text { color: var(--color-primary); font-size: 24rpx; }
-  .end-text { color: var(--text-tertiary); font-size: 24rpx; }
+.message-wrapper { margin-bottom: 40rpx; }
+.timestamp {
+  display: flex; justify-content: center; margin-bottom: 32rpx;
+  text { background: rgba(0,0,0,0.05); .theme-dark & { background: rgba(255,255,255,0.05); } color: var(--text-tertiary); font-size: 22rpx; padding: 6rpx 16rpx; border-radius: 8rpx; }
 }
+.system-notice { text-align: center; margin: 24rpx 0; text { font-size: 24rpx; color: var(--text-tertiary); } }
 
-// 消息项容器 - 与设计稿一致
-// 设计稿: space-y-6 = 24px = 48rpx
-.message-item {
-  margin-bottom: 48rpx; // 设计稿 space-y-6
+/* 底部占位符 */
+.bottom-spacer { height: 20rpx; }
 
-  .timestamp {
-    display: flex;
-    justify-content: center;
-    margin-bottom: 24rpx;
-
-    text {
-      background: #f3f4f6; // 设计稿 bg-gray-100
-      padding: 8rpx 16rpx; // 设计稿 px-2 py-1
-      border-radius: 8rpx; // 设计稿 rounded
-      font-size: 24rpx; // 设计稿 text-xs
-      color: #9ca3af; // 设计稿 text-gray-400
-      transition: background 0.3s, color 0.3s;
-
-      .theme-dark & {
-        background: rgba(41, 37, 36, 0.5); // 设计稿 bg-warm-800/50
-        color: #78716c; // 设计稿 text-warm-600
-      }
-    }
-  }
-
-  .system-notice {
-    text-align: center;
-    margin: 24rpx 0;
-    text { font-size: 24rpx; color: var(--text-tertiary); }
-  }
-}
-
-// ==========================================
-// 消息行布局 - 与设计稿完全一致
-// 设计稿: <div class="flex gap-3 msg-row ${alignClass}">
-// ==========================================
-.msg-row {
-  display: flex;
-  align-items: flex-start;
-  gap: 24rpx; // 设计稿 gap-3 = 12px = 24rpx
-
-  // 自己的消息 - 设计稿使用 flex-row-reverse
-  &.is-self {
-    flex-direction: row-reverse;
-  }
-}
-
-// 头像容器 - 设计稿: w-10 h-10 rounded-xl object-cover shrink-0
-.avatar-wrap {
-  width: 80rpx; // 设计稿 w-10 = 40px = 80rpx
-  height: 80rpx;
-  flex-shrink: 0;
-  border-radius: 24rpx; // 设计稿 rounded-xl = 12px = 24rpx
-  overflow: hidden;
-  background: #e5e7eb; // 设计稿 bg-gray-200
-
-  .theme-dark & {
-    background: #292524; // 设计稿 dark:bg-warm-800
-  }
-
-  .avatar-img {
-    width: 100%;
-    height: 100%;
-    border-radius: 24rpx;
-  }
-
-  .avatar-placeholder {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 32rpx;
-    font-weight: 600;
-    color: #fff;
-    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
-  }
-}
-
-// 内容列 - 设计稿: flex flex-col max-w-[75%]
-.content-col {
-  max-width: 75%;
-  display: flex;
-  flex-direction: column;
-
-  // 自己消息时内容右对齐 - 设计稿: items-end
-  &.items-end {
-    align-items: flex-end;
-  }
-}
-
-// 群聊发送者昵称 - 设计稿: text-[10px] text-gray-400 dark:text-warm-500 mb-1 ml-1
-.sender-name {
-  font-size: 20rpx; // 设计稿 text-[10px] = 10px = 20rpx
-  color: #9ca3af; // 设计稿 text-gray-400
-  margin-bottom: 8rpx; // 设计稿 mb-1 = 4px = 8rpx
-  margin-left: 8rpx; // 设计稿 ml-1 = 4px = 8rpx
-
-  .theme-dark & {
-    color: #78716c; // 设计稿 dark:text-warm-500
-  }
-}
-
-// ==========================================
-// 气泡样式 - 与设计稿完全一致
-// 设计稿: p-3 rounded-2xl text-[15px] leading-relaxed
-// ==========================================
-.bubble {
-  padding: 24rpx; // 设计稿 p-3 = 12px = 24rpx
-  border-radius: 32rpx; // 设计稿 rounded-2xl = 16px = 32rpx
-  font-size: 30rpx; // 设计稿 text-[15px] = 15px = 30rpx
-  line-height: 1.625; // 设计稿 leading-relaxed
-  position: relative;
-  word-break: break-all;
-  max-width: 100%;
-  transition: all 0.2s;
-
-  // 对方气泡 - 设计稿 bubble-other
-  // background: white, border-bottom-left-radius: 4px, box-shadow: 0 1px 2px rgba(0,0,0,0.05)
-  &.bubble-other {
-    background: #ffffff;
-    color: #1f2937; // 设计稿 text-gray-800
-    border-bottom-left-radius: 8rpx; // 设计稿 4px = 8rpx
-    box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.05); // 设计稿 shadow-sm
-
-    // 设计稿深色模式: background: #262626, border: 1px solid #44403c
-    .theme-dark & {
-      background: #262626;
-      color: #e7e5e4;
-      border: 2rpx solid #44403c;
-    }
-  }
-
-  // 自己气泡 - 设计稿 bubble-self
-  // background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%), border-bottom-right-radius: 4px
-  // box-shadow: 0 2px 8px rgba(79, 70, 229, 0.2)
-  &.bubble-self {
-    background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
-    color: #ffffff;
-    border-bottom-right-radius: 8rpx; // 设计稿 4px = 8rpx
-    box-shadow: 0 4rpx 16rpx rgba(79, 70, 229, 0.2); // 设计稿 0 2px 8px
-  }
-
-  // 文本消息
-  .msg-text {
-    display: block;
-  }
-
-  // 媒体类型气泡特殊处理
-  &.media-bubble {
-    padding: 0;
-    background: transparent !important;
-    box-shadow: none !important;
-    border: none !important;
-
-    &.audio {
-      padding: 24rpx;
-      background: #ffffff !important;
-      border-radius: 32rpx;
-      box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.05) !important;
-
-      .theme-dark & {
-        background: #262626 !important;
-        border: 2rpx solid #44403c !important;
-      }
-    }
-
-    // 自己发送的语音
-    .is-self &.audio {
-      background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%) !important;
-      border: none !important;
-      box-shadow: 0 4rpx 16rpx rgba(79, 70, 229, 0.2) !important;
-    }
-
-    &.file {
-      background: transparent !important;
-    }
-  }
-}
-
-// 图片气泡 - 与设计稿一致
-// 设计稿: rounded-2xl shadow-sm border border-gray-100 dark:border-warm-700 w-48
-.image-bubble {
-  .msg-image {
-    width: 384rpx; // 设计稿 w-48 = 192px = 384rpx
-    max-height: 400rpx;
-    border-radius: 32rpx; // 设计稿 rounded-2xl
-    display: block;
-    background: #e5e7eb; // 设计稿 bg-gray-200
-    border: 2rpx solid #f3f4f6; // 设计稿 border-gray-100
-
-    .theme-dark & {
-      background: #292524; // 设计稿 dark:bg-warm-800
-      border-color: #44403c; // 设计稿 dark:border-warm-700
-    }
-  }
-}
-
-// 语音条 - 与设计稿一致
-// 设计稿: p-3 rounded-2xl shadow-sm flex items-center gap-3 min-w-[100px]
-.audio-capsule {
-  display: flex;
-  align-items: center;
-  gap: 24rpx; // 设计稿 gap-3 = 12px = 24rpx
-  min-width: 200rpx; // 设计稿 min-w-[100px] = 200rpx
-  color: #6b7280; // 设计稿 text-gray-500
-
-  .theme-dark & {
-    color: #a8a29e; // 设计稿 dark:text-warm-400
-  }
-
-  // 自己发送的语音消息颜色
-  .is-self & {
-    color: rgba(255, 255, 255, 0.8); // 设计稿 text-white/80
-  }
-
-  .play-btn {
-    width: 32rpx; // 设计稿 w-4 = 16px = 32rpx
-    height: 32rpx;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transform: rotate(45deg); // 设计稿 rotate-45
-
-    svg {
-      width: 32rpx;
-      height: 32rpx;
-    }
-  }
-
-  // 设计稿波形: flex items-end gap-1 h-3
-  .wave-visualizer {
-    display: flex;
-    align-items: flex-end; // 设计稿 items-end
-    gap: 8rpx; // 设计稿 gap-1 = 4px = 8rpx
-    height: 24rpx; // 设计稿 h-3 = 12px = 24rpx
-
-    // 设计稿波形条: w-1 wave-bar
-    .wave-bar {
-      width: 8rpx; // 设计稿 w-1 = 4px = 8rpx
-      background: currentColor;
-      border-radius: 99rpx; // 设计稿 rounded-99
-      transition: height 0.1s;
-
-      &:nth-child(1) { height: 8rpx; } // 设计稿 h-1
-      &:nth-child(2) { height: 16rpx; } // 设计稿 h-2
-      &:nth-child(3) { height: 24rpx; } // 设计稿 h-3
-      &:nth-child(4) { height: 16rpx; } // 设计稿 h-2
-
-      &.animating {
-        animation: wave 0.8s infinite ease-in-out;
-
-        &:nth-child(1) { animation-delay: 0s; }
-        &:nth-child(2) { animation-delay: 0.1s; }
-        &:nth-child(3) { animation-delay: 0.2s; }
-        &:nth-child(4) { animation-delay: 0.3s; }
-      }
-    }
-  }
-
-  // 设计稿时长: text-sm font-medium ml-auto
-  .duration-tag {
-    font-size: 28rpx; // 设计稿 text-sm
-    font-weight: 500; // 设计稿 font-medium
-    margin-left: auto; // 设计稿 ml-auto
-  }
-}
-
-// 设计稿波形动画
-@keyframes wave {
-  0%, 100% { height: 8rpx; } // 设计稿 4px
-  50% { height: 32rpx; } // 设计稿 16px
-}
-
-// 文件卡片 - 与设计稿完全一致
-// 设计稿: p-3 rounded-2xl shadow-md flex items-center gap-3 pr-4 min-w-[220px]
-.file-card {
-  background: #ffffff; // bubble-other 背景
-  padding: 24rpx; // 设计稿 p-3 = 12px = 24rpx
-  padding-right: 32rpx; // 设计稿 pr-4
-  border-radius: 32rpx; // 设计稿 rounded-2xl
-  display: flex;
-  align-items: center;
-  gap: 24rpx; // 设计稿 gap-3
-  min-width: 440rpx; // 设计稿 min-w-[220px] = 440rpx
-  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08); // 设计稿 shadow-md
-  transition: background 0.3s;
-
-  .theme-dark & {
-    background: #262626;
-    border: 2rpx solid #44403c;
-  }
-
-  // 对方发送的文件图标 - 设计稿: bg-orange-100 dark:bg-orange-900/30 text-orange-500
-  // w-10 h-10 rounded-lg
-  .file-icon-box {
-    width: 80rpx; // 设计稿 w-10 = 40px = 80rpx
-    height: 80rpx;
-    background: #ffedd5; // 设计稿 bg-orange-100
-    border-radius: 16rpx; // 设计稿 rounded-lg = 8px = 16rpx
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: #f97316; // 设计稿 text-orange-500
-    flex-shrink: 0;
-
-    svg {
-      width: 40rpx; // 设计稿 w-5 = 20px = 40rpx
-      height: 40rpx;
-    }
-
-    .theme-dark & {
-      background: rgba(154, 52, 18, 0.3); // 设计稿 dark:bg-orange-900/30
-    }
-  }
-
-  // 自己发送的文件 - 设计稿: bg-white/20 text-white
-  &.file-self {
-    background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
-    box-shadow: 0 4rpx 16rpx rgba(79, 70, 229, 0.2);
-    border: none;
-
-    .theme-dark & {
-      border: none;
-    }
-
-    .file-icon-box.icon-self {
-      background: rgba(255, 255, 255, 0.2); // 设计稿 bg-white/20
-      color: #fff; // 设计稿 text-white
-    }
-
-    .file-meta {
-      .fname {
-        color: #fff; // 设计稿 text-white
-      }
-      .fsize {
-        color: rgba(255, 255, 255, 0.7); // 设计稿 text-white/70
-      }
-    }
-  }
-
-  // 设计稿: flex flex-col overflow-hidden
-  .file-meta {
-    flex: 1;
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-
-    // 设计稿: text-sm font-medium truncate
-    .fname {
-      font-size: 28rpx; // 设计稿 text-sm
-      font-weight: 500; // 设计稿 font-medium
-      color: #111827; // 设计稿 text-gray-900
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-
-      .theme-dark & {
-        color: #f5f5f4; // 设计稿 dark:text-warm-100
-      }
-    }
-
-    // 设计稿: text-[10px]
-    .fsize {
-      font-size: 20rpx; // 设计稿 text-[10px]
-      color: #9ca3af; // 设计稿 text-gray-400
-
-      .theme-dark & {
-        color: #78716c; // 设计稿 dark:text-warm-500
-      }
-    }
-  }
-}
-
-// 视频预览
-// 视频预览 - 与设计稿一致
-.video-preview {
-  position: relative;
-  width: 384rpx; // 设计稿 w-48 = 192px = 384rpx
-  border-radius: 32rpx;
-  overflow: hidden;
-  background: #000;
-  cursor: pointer;
-
-  .video-thumb {
-    width: 100%;
-    height: auto;
-    aspect-ratio: 16/9;
-    display: block;
-    opacity: 0.9;
-    transition: opacity 0.2s;
-  }
-
-  &:hover .video-thumb,
-  &:active .video-thumb {
-    opacity: 1;
-  }
-
-  .play-overlay {
-    position: absolute;
-    inset: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .play-btn-circle {
-    width: 80rpx; // 设计稿 w-10 = 40px = 80rpx
-    height: 80rpx;
-    background: rgba(0, 0, 0, 0.3);
-    backdrop-filter: blur(4px);
-    -webkit-backdrop-filter: blur(4px);
-    border-radius: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border: 2rpx solid rgba(255, 255, 255, 0.3);
-
-    svg {
-      width: 32rpx; // 设计稿 w-4 = 16px = 32rpx
-      height: 32rpx;
-      color: #fff;
-      margin-left: 4rpx; // 视觉居中调整
-    }
-  }
-
-  .video-duration {
-    position: absolute;
-    bottom: 16rpx;
-    right: 16rpx;
-    font-size: 20rpx;
-    color: #fff;
-    font-weight: 500;
-    background: rgba(0, 0, 0, 0.5);
-    padding: 4rpx 12rpx;
-    border-radius: 8rpx;
-    backdrop-filter: blur(4px);
-    -webkit-backdrop-filter: blur(4px);
-  }
-
-  // 兼容旧的 video 标签
-  .video-player {
-    width: 100%;
-    height: auto;
-    aspect-ratio: 16/9;
-    border-radius: 16rpx;
-  }
-}
-
-.bottom-spacer { height: 240rpx; }
-
-// ==========================================
-// 底部输入栏 (与设计稿完全一致)
-// ==========================================
-// ==========================================
-// 录音浮层
-// ==========================================
-.recording-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.6);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 9999;
-  animation: fadeIn 0.2s ease-out;
-}
-
-@keyframes fadeIn {
-  from { opacity: 0; }
-  to { opacity: 1; }
-}
-
-.recording-content {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 60rpx;
-  background: rgba(255, 255, 255, 0.95);
-  border-radius: 32rpx;
-  min-width: 300rpx;
-
-  .theme-dark & {
-    background: rgba(41, 37, 36, 0.95);
-  }
-
-  &.cancel-mode {
-    .recording-icon {
-      background: #ef4444;
-    }
-
-    .wave-bars .wave-bar {
-      background: #ef4444;
-      animation: none;
-      height: 8rpx;
-    }
-  }
-}
-
-.recording-icon {
-  width: 120rpx;
-  height: 120rpx;
-  border-radius: 50%;
-  background: #10b981;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-bottom: 32rpx;
-  transition: background 0.2s;
-
-  svg {
-    width: 60rpx;
-    height: 60rpx;
-    color: #fff;
-  }
-}
-
-.wave-bars {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8rpx;
-  height: 64rpx;
-  margin-bottom: 24rpx;
-}
-
-.wave-bar {
-  width: 8rpx;
-  height: 16rpx;
-  background: #10b981;
-  border-radius: 8rpx;
-  animation: wave 0.8s infinite ease-in-out;
-
-  @for $i from 1 through 5 {
-    &:nth-child(#{$i}) {
-      animation-delay: #{($i - 1) * 0.1}s;
-    }
-  }
-}
-
-@keyframes wave {
-  0%, 100% { height: 16rpx; }
-  50% { height: 48rpx; }
-}
-
-.recording-duration {
-  font-size: 36rpx;
-  font-weight: 600;
-  color: var(--text-main);
-  font-family: monospace;
-  margin-bottom: 16rpx;
-}
-
-.recording-tip {
-  font-size: 24rpx;
-  color: var(--text-secondary);
-}
-
-// 底部输入栏 - 与设计稿完全一致
-// 设计稿: bg-white dark:bg-warm-900 px-4 py-3 pb-8 border-t border-gray-100 dark:border-warm-800
-.input-floater {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  z-index: 200;
-  background: #ffffff; // 设计稿 bg-white
-  border-top: 2rpx solid #f3f4f6; // 设计稿 border-gray-100
-  padding: 24rpx 32rpx 64rpx; // 设计稿 px-4 py-3 pb-8
-  padding-bottom: calc(64rpx + env(safe-area-inset-bottom));
-  transition: all 0.3s;
-
-  .theme-dark & {
-    background: #1c1917; // 设计稿 dark:bg-warm-900
-    border-color: #292524; // 设计稿 dark:border-warm-800
-  }
-}
-
-// 输入栏胶囊 - 与设计稿完全一致
-// 设计稿: flex items-end gap-3
-.input-bar-capsule {
-  display: flex;
-  align-items: flex-end; // 设计稿 items-end
-  gap: 24rpx; // 设计稿 gap-3 = 12px = 24rpx
-
-  // 设计稿图标: w-7 h-7 text-gray-500 dark:text-warm-400 mb-2
-  .action-trigger {
-    width: 56rpx; // 设计稿 w-7 = 28px = 56rpx
-    height: 56rpx;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: #6b7280; // 设计稿 text-gray-500
-    flex-shrink: 0;
-    margin-bottom: 16rpx; // 设计稿 mb-2 = 8px = 16rpx
-    transition: color 0.2s ease;
-    cursor: pointer;
-
-    svg {
-      width: 56rpx;
-      height: 56rpx;
-    }
-
-    .theme-dark & {
-      color: #a8a29e; // 设计稿 dark:text-warm-400
-    }
-
-    &:hover {
-      color: #4f46e5; // 设计稿 hover:text-indigo-600
-    }
-
-    .theme-dark &:hover {
-      color: #fb923c; // 设计稿 dark:hover:text-orange-400
-    }
-  }
-
-  .voice-btn {
-    &:active {
-      color: var(--color-primary);
-      transform: scale(1.1);
-    }
-  }
-
-  // 设计稿输入框: flex-1 bg-gray-100 dark:bg-warm-800 rounded-2xl px-4 py-2.5 min-h-[44px]
-  // border border-transparent dark:border-warm-700
-  .input-field-wrap {
-    flex: 1;
-    min-height: 88rpx; // 设计稿 min-h-[44px] = 88rpx
-    background: #f3f4f6; // 设计稿 bg-gray-100
-    border-radius: 32rpx; // 设计稿 rounded-2xl = 16px = 32rpx
-    display: flex;
-    align-items: center;
-    padding: 20rpx 32rpx; // 设计稿 px-4 py-2.5
-    border: 2rpx solid transparent;
-    transition: all 0.2s;
-
-    .theme-dark & {
-      background: #292524; // 设计稿 dark:bg-warm-800
-      border-color: #44403c; // 设计稿 dark:border-warm-700
-    }
-
-    // 设计稿: text-sm text-gray-800 dark:text-warm-100 placeholder-gray-400 dark:placeholder-warm-500
-    .text-input {
-      width: 100%;
-      min-height: 40rpx; // 设计稿 h-5 = 20px = 40rpx
-      max-height: 200rpx;
-      font-size: 28rpx; // 设计稿 text-sm = 14px = 28rpx
-      line-height: 1.5;
-      color: #1f2937; // 设计稿 text-gray-800
-      background: transparent;
-
-      .theme-dark & {
-        color: #f5f5f4; // 设计稿 dark:text-warm-100
-      }
-    }
-
-    .input-placeholder {
-      color: #9ca3af; // 设计稿 placeholder-gray-400
-
-      .theme-dark & {
-        color: #78716c; // 设计稿 dark:placeholder-warm-500
-      }
-    }
-
-    :deep(.wd-input) {
-      padding: 0;
-      font-size: 28rpx;
-      width: 100%;
-      color: #1f2937;
-      line-height: 1.5;
-    }
-
-    :deep(.wd-textarea) {
-      padding: 0;
-      font-size: 28rpx;
-      width: 100%;
-      color: #1f2937;
-      line-height: 1.5;
-    }
-
-    :deep(.wd-input__placeholder),
-    :deep(.wd-textarea__placeholder) {
-      color: #9ca3af;
-    }
-  }
-
-  .right-triggers {
-    display: flex;
-    align-items: center;
-    gap: 8rpx;
-    margin-bottom: 16rpx;
-  }
-
-  .send-btn {
-    width: 72rpx;
-    height: 72rpx;
-    background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
-    border-radius: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: #fff;
-    box-shadow: 0 4rpx 16rpx rgba(79, 70, 229, 0.3);
-    animation: popIn 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-    cursor: pointer;
-    transition: transform 0.15s, box-shadow 0.15s;
-
-    .theme-dark & {
-      background: linear-gradient(135deg, #fb923c 0%, #f97316 100%);
-      box-shadow: 0 4rpx 16rpx rgba(249, 115, 22, 0.3);
-    }
-
-    &:active {
-      transform: scale(0.95);
-    }
-
-    svg {
-      width: 36rpx;
-      height: 36rpx;
-    }
-  }
-}
-
-@keyframes popIn {
-  from { transform: scale(0); }
-  to { transform: scale(1); }
-}
-
-// 更多面板Grid
-.tools-grid {
-  padding: 40rpx;
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: 30rpx;
-
-  .tool-item {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 16rpx;
-
-    .tool-icon {
-      width: 100rpx;
-      height: 100rpx;
-      border-radius: 32rpx;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-
-      svg {
-        width: 48rpx;
-        height: 48rpx;
-      }
-
-      &.album { background: #10b981; }
-      &.camera { background: #f97316; }
-      &.video { background: #8b5cf6; }
-      &.call { background: #0ea5e9; }
-      &.file { background: #eab308; }
-    }
-
-    text {
-      font-size: 24rpx;
-      color: var(--text-secondary);
-    }
-  }
-}
-
-// 确认对话框
+/* 弹窗 */
 .confirm-dialog {
   padding: 40rpx;
-
-  .dialog-header {
-    font-size: 32rpx;
-    font-weight: 600;
-    text-align: center;
-    margin-bottom: 30rpx;
-    color: var(--text-main);
-  }
-
+  .dialog-header { font-size: 32rpx; font-weight: 600; text-align: center; margin-bottom: 32rpx; color: var(--text-main); }
   .file-preview-box {
-    background: var(--bg-base);
-    padding: 30rpx;
-    border-radius: 20rpx;
-    display: flex;
-    align-items: center;
-    gap: 20rpx;
-    margin-bottom: 40rpx;
-
-    .preview-icon {
-      width: 80rpx;
-      height: 80rpx;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-
-      svg {
-        width: 64rpx;
-        height: 64rpx;
-      }
-    }
-
-    .f-info {
-      display: flex;
-      flex-direction: column;
-      overflow: hidden;
-    }
-
-    .f-name {
-      font-size: 28rpx;
-      color: var(--text-main);
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-
-    .f-size {
-      font-size: 24rpx;
-      color: var(--text-tertiary);
-    }
+    background: var(--bg-base); padding: 24rpx; border-radius: 24rpx; display: flex; align-items: center; gap: 24rpx; margin-bottom: 40rpx;
+    .preview-icon { width: 80rpx; height: 80rpx; display: flex; align-items: center; justify-content: center; svg { width: 48rpx; height: 48rpx; } }
+    .f-info { flex: 1; overflow: hidden; display: flex; flex-direction: column; .f-name { font-size: 28rpx; color: var(--text-main); } .f-size { font-size: 22rpx; color: var(--text-tertiary); } }
   }
-
-  .dialog-footer {
-    display: flex;
-    gap: 24rpx;
-  }
-}
-
-// 文字溢出
-.text-ellipsis {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  .dialog-footer { display: flex; gap: 24rpx; }
 }
 </style>
diff --git a/src/pages/contact/add.vue b/src/pages/contact/add.vue
index a3695ad..4424cb9 100644
--- a/src/pages/contact/add.vue
+++ b/src/pages/contact/add.vue
@@ -1,168 +1,201 @@
 <template>
   <wd-config-provider :theme="isDark ? 'dark' : 'light'">
+    <!-- 根容器：绑定暗黑模式类名 -->
     <view class="add-friend-page" :class="{ dark: isDark }">
-      <!-- 顶部渐变背景区域 -->
-      <view class="header-bg">
-        <view class="gradient-layer"></view>
-        <view class="blob-1"></view>
-        <view class="blob-2"></view>
+
+      <!-- ================= 顶部背景区域 (Header Background) ================= -->
+      <view class="header-bg-container">
+        <!-- 1. 背景渐变：日间蓝紫 vs 夜间暖橙 -->
+        <view class="bg-gradient"></view>
+        <!-- 2. 梦幻光影 Blobs -->
+        <view class="blob blob-1"></view>
+        <view class="blob blob-2"></view>
+        <!-- 3. 装饰线条 -->
         <view class="decoration-ring"></view>
       </view>
-      
-      <!-- 顶部内容层 -->
+
+      <!-- ================= 顶部内容层 (Foreground) ================= -->
       <view class="header-content">
         <!-- 导航栏 -->
         <view class="nav-bar">
-          <view class="nav-back" @click="goBack">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
-              <path d="M15 18l-6-6 6-6"/>
+          <view class="nav-btn" @click="goBack">
+            <!-- Icon: chevron-left -->
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="w-7 h-7">
+              <polyline points="15 18 9 12 15 6"></polyline>
             </svg>
           </view>
           <text class="nav-title">添加好友</text>
-          <view class="nav-placeholder"></view>
+          <view class="nav-btn">
+            <!-- Icon: more-horizontal -->
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6">
+              <circle cx="12" cy="12" r="1"></circle>
+              <circle cx="19" cy="12" r="1"></circle>
+              <circle cx="5" cy="12" r="1"></circle>
+            </svg>
+          </view>
         </view>
-        
+
         <!-- 大标题 -->
         <view class="hero-section">
           <text class="hero-title">发现新朋友</text>
           <text class="hero-subtitle">EXPANDING YOUR CIRCLE</text>
         </view>
-        
+
         <!-- 搜索框 -->
         <view class="search-wrapper">
           <view class="search-box" @click="focusSearch">
-            <svg class="search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-              <circle cx="11" cy="11" r="8"/>
-              <line x1="21" y1="21" x2="16.65" y2="16.65"/>
-            </svg>
-            <input 
-              ref="searchInput"
-              v-model="searchKeyword" 
-              class="search-input" 
-              type="text" 
-              placeholder="请输入账号/手机号"
-              @input="onSearchInput"
-              @confirm="doSearch"
+            <view class="search-icon-wrapper">
+              <!-- Icon: search -->
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-5 h-5">
+                <circle cx="11" cy="11" r="8"></circle>
+                <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+              </svg>
+            </view>
+            <input
+                ref="searchInput"
+                v-model="searchKeyword"
+                class="search-input"
+                type="text"
+                placeholder="请输入账号/手机号"
+                placeholder-class="placeholder-style"
+                @input="onSearchInput"
+                @confirm="doSearch"
             />
             <view v-if="searchKeyword" class="clear-btn" @click.stop="clearSearch">
-              <svg viewBox="0 0 24 24" fill="currentColor">
-                <path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"/>
+              <!-- Icon: x -->
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4">
+                <line x1="18" y1="6" x2="6" y2="18"></line>
+                <line x1="6" y1="6" x2="18" y2="18"></line>
               </svg>
             </view>
           </view>
         </view>
       </view>
-      
-      <!-- 内容区域 -->
-      <scroll-view class="content-area custom-scrollbar" scroll-y>
+
+      <!-- ================= 内容滚动区域 ================= -->
+      <scroll-view class="content-area custom-scrollbar" scroll-y enable-back-to-top>
+
         <!-- 初始状态 -->
         <template v-if="viewState === 'initial'">
           <!-- 扫一扫卡片 -->
           <view class="scan-card animate-fade-in-up" @click="handleScan">
             <view class="scan-icon-box">
-              <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">
-                <path d="M3 7V5a2 2 0 0 1 2-2h2"/>
-                <path d="M17 3h2a2 2 0 0 1 2 2v2"/>
-                <path d="M21 17v2a2 2 0 0 1-2 2h-2"/>
-                <path d="M7 21H5a2 2 0 0 1-2-2v-2"/>
-                <line x1="7" y1="12" x2="17" y2="12"/>
+              <!-- Icon: scan-line -->
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6 text-white">
+                <path d="M3 7V5a2 2 0 0 1 2-2h2"></path>
+                <path d="M17 3h2a2 2 0 0 1 2 2v2"></path>
+                <path d="M21 17v2a2 2 0 0 1-2 2h-2"></path>
+                <path d="M7 21H5a2 2 0 0 1-2-2v-2"></path>
               </svg>
             </view>
             <view class="scan-info">
               <text class="scan-title">扫一扫</text>
               <text class="scan-desc">扫描二维码名片</text>
             </view>
-            <svg class="scan-arrow" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">
-              <polyline points="9 18 15 12 9 6"/>
-            </svg>
+            <view class="scan-arrow">
+              <!-- Icon: chevron-left (rotated) -->
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="w-5 h-5 text-white">
+                <polyline points="15 18 9 12 15 6"></polyline>
+              </svg>
+            </view>
           </view>
-          
+
           <!-- 推荐列表 -->
           <view class="list-section">
             <text class="list-title">为您推荐</text>
             <view class="user-list">
-              <view 
-                v-for="(user, index) in recommendUsers" 
-                :key="user.id" 
-                class="user-card animate-fade-in-up"
-                :style="{ animationDelay: `${index * 50}ms` }"
+              <view
+                  v-for="(user, index) in recommendUsers"
+                  :key="user.id"
+                  class="user-card animate-fade-in-up"
+                  :style="{ animationDelay: `${index * 50}ms` }"
               >
-                <app-avatar :src="user.avatar" :name="user.name" :size="96" radius="50%" />
+                <!-- 头像容器 -->
+                <view class="avatar-wrapper">
+                  <app-avatar :src="user.avatar" :name="user.name" :size="96" radius="50%" />
+                </view>
+
                 <view class="user-info">
                   <text class="user-name">{{ user.name }}</text>
                   <text class="user-id">ID: {{ user.id }}</text>
                 </view>
-                <view 
-                  class="add-btn" 
-                  :class="{ added: addedIds.includes(user.id) }"
-                  @click="handleAdd(user)"
+
+                <view
+                    class="action-btn"
+                    :class="{ 'btn-added': addedIds.includes(user.id), 'btn-add': !addedIds.includes(user.id) }"
+                    @click="handleAdd(user)"
                 >
-                  {{ addedIds.includes(user.id) ? '已发送' : '添加' }}
+                  <text>{{ addedIds.includes(user.id) ? '已发送' : '添加' }}</text>
                 </view>
               </view>
             </view>
           </view>
         </template>
-        
+
         <!-- 加载状态 -->
         <template v-else-if="viewState === 'loading'">
           <view class="state-card animate-fade-in-up">
-            <wd-loading :color="isDark ? '#f97316' : '#5B7FFF'" />
+            <view class="loading-spinner"></view>
             <text class="state-text">正在搜索...</text>
           </view>
         </template>
-        
+
         <!-- 空结果状态 -->
         <template v-else-if="viewState === 'empty'">
           <view class="state-card animate-fade-in-up">
             <view class="empty-icon-box">
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
-                <circle cx="11" cy="11" r="8"/>
-                <line x1="21" y1="21" x2="16.65" y2="16.65"/>
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6">
+                <circle cx="11" cy="11" r="8"></circle>
+                <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
               </svg>
             </view>
             <text class="state-text">未找到该用户</text>
           </view>
         </template>
-        
+
         <!-- 搜索结果 -->
         <template v-else-if="viewState === 'results'">
           <view class="list-section animate-fade-in-up">
             <text class="list-title">搜索结果</text>
             <view class="user-list">
-              <view 
-                v-for="(user, index) in searchResults" 
-                :key="user.id" 
-                class="user-card animate-fade-in-up"
-                :style="{ animationDelay: `${(index + 1) * 50}ms` }"
-                @click="goUserDetail(user)"
+              <view
+                  v-for="(user, index) in searchResults"
+                  :key="user.id"
+                  class="user-card animate-fade-in-up"
+                  :style="{ animationDelay: `${(index + 1) * 50}ms` }"
+                  @click="goUserDetail(user)"
               >
-                <app-avatar :src="user.avatar" :name="user.name" :size="96" radius="50%" />
+                <view class="avatar-wrapper">
+                  <app-avatar :src="user.avatar" :name="user.name" :size="96" radius="50%" />
+                </view>
                 <view class="user-info">
                   <text class="user-name">{{ user.name }}</text>
                   <text class="user-id">ID: {{ user.id }}</text>
                 </view>
-                <view 
-                  class="add-btn" 
-                  :class="{ added: addedIds.includes(user.id) }"
-                  @click.stop="handleAdd(user)"
+                <view
+                    class="action-btn"
+                    :class="{ 'btn-added': addedIds.includes(user.id), 'btn-add': !addedIds.includes(user.id) }"
+                    @click.stop="handleAdd(user)"
                 >
-                  {{ addedIds.includes(user.id) ? '已发送' : '添加' }}
+                  <text>{{ addedIds.includes(user.id) ? '已发送' : '添加' }}</text>
                 </view>
               </view>
             </view>
           </view>
         </template>
-        
+
         <view class="safe-area-spacer"></view>
       </scroll-view>
-      
+
       <wd-toast />
     </view>
   </wd-config-provider>
 </template>
 
 <script setup lang="ts">
+/**
+ * 逻辑部分完全保留，仅修正样式相关的逻辑或引用
+ */
 import { ref, onMounted } from 'vue'
 import { useTheme } from '@/composables/useTheme'
 import { useToast } from 'wot-design-uni'
@@ -206,7 +239,7 @@ function onSearchInput() {
   if (searchTimer) {
     clearTimeout(searchTimer)
   }
-  
+
   if (searchKeyword.value.trim()) {
     viewState.value = 'loading'
     searchTimer = setTimeout(() => {
@@ -222,7 +255,7 @@ async function doSearch() {
     viewState.value = 'initial'
     return
   }
-  
+
   try {
     const results = await contactApi.searchUsers(searchKeyword.value.trim())
     searchResults.value = results
@@ -256,7 +289,7 @@ function handleScan() {
 
 async function handleAdd(user: User) {
   if (addedIds.value.includes(user.id)) return
-  
+
   try {
     await contactApi.sendFriendRequest(user.id, '我想加你为好友')
     addedIds.value.push(user.id)
@@ -272,64 +305,115 @@ function goUserDetail(user: User) {
 </script>
 
 <style lang="scss" scoped>
-// 页面容器 - 浅色模式
+/* * UI 设计移植 - Warm Stone Theme
+ * 将 Tailwind 样式迁移为 SCSS 变量系统
+ */
+
 .add-friend-page {
-  --bg-page: #ffffff;
+  /* --- Light Theme (Default) --- */
+  --bg-page: #f2f2f2;
   --bg-card: #ffffff;
-  --text-main: #1f2937;
-  --text-sub: #9ca3af;
+
+  /* Header Gradients */
   --gradient-from: #4b6cb7;
   --gradient-to: #8E9EFE;
-  --btn-gradient-from: #5B7FFF;
-  --btn-gradient-to: #748EFF;
+
+  /* Blobs */
+  --blob-1-bg: #3B4FA8;
+  --blob-2-bg: #82E1FF;
+
+  /* Text */
+  --text-main: #1f2937;
+  --text-sub: #9ca3af;
+  --text-header: #ffffff;
+  --text-header-sub: rgba(239, 246, 255, 0.8); /* blue-50 opacity */
+
+  /* Search Box */
   --search-bg: #ffffff;
   --search-border: #f9fafb;
-  
+  --search-text: #374151;
+  --search-placeholder: #9ca3af;
+  --search-shadow: rgba(30, 58, 138, 0.1);
+
+  /* Scan Card */
+  --scan-bg-from: #5B7FFF;
+  --scan-bg-to: #8C9EFF;
+  --scan-shadow: rgba(59, 130, 246, 0.2);
+  --scan-icon-bg: rgba(255, 255, 255, 0.2);
+
+  /* Buttons */
+  --btn-add-from: #5B7FFF;
+  --btn-add-to: #748EFF;
+  --btn-add-shadow: rgba(59, 130, 246, 0.3);
+  --btn-disabled-bg: #f3f4f6;
+  --btn-disabled-text: #9ca3af;
+
+  /* Loading */
+  --loading-spinner: #5B7FFF;
+
   min-height: 100vh;
   background: var(--bg-page);
   position: relative;
   overflow: hidden;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-// 深色模式 - Warm Stone
+/* --- Dark Mode (Warm Stone) --- */
 .add-friend-page.dark {
-  --bg-page: #1c1917;
-  --bg-card: #292524;
-  --text-main: #e7e5e4;
-  --text-sub: #a8a29e;
+  --bg-page: #1c1917; /* warm-900 */
+  --bg-card: #292524; /* warm-800 */
+
+  /* Header Gradients - Warm Ember */
   --gradient-from: #7c2d12;
   --gradient-to: #b45309;
-  --btn-gradient-from: #c2410c;
-  --btn-gradient-to: #ea580c;
-  --search-bg: #292524;
-  --search-border: #44403c;
+
+  /* Blobs */
+  --blob-1-bg: #451a03;
+  --blob-2-bg: #fdba74;
+
+  /* Text */
+  --text-main: #e7e5e4; /* warm-200 */
+  --text-sub: #a8a29e;  /* warm-400 */
+  --text-header: #ffffff;
+  --text-header-sub: #ffedd5; /* orange-100 */
+
+  /* Search Box */
+  --search-bg: #292524; /* warm-800 */
+  --search-border: #44403c; /* warm-700 */
+  --search-text: #e7e5e4;
+  --search-placeholder: #78716c; /* warm-500 */
+  --search-shadow: rgba(0, 0, 0, 0.2);
+
+  /* Scan Card */
+  --scan-bg-from: #ea580c;
+  --scan-bg-to: #f97316;
+  --scan-shadow: rgba(124, 45, 18, 0.3);
+  --scan-icon-bg: rgba(0, 0, 0, 0.2);
+
+  /* Buttons */
+  --btn-add-from: #c2410c;
+  --btn-add-to: #ea580c;
+  --btn-add-shadow: rgba(124, 45, 18, 0.4);
+  --btn-disabled-bg: #44403c; /* warm-700 */
+  --btn-disabled-text: #a8a29e; /* warm-400 */
+
+  /* Loading */
+  --loading-spinner: #f97316;
 }
 
-// 动画
-@keyframes fadeInUp {
-  from {
-    opacity: 0;
-    transform: translateY(20rpx);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
+/* Common Utilities */
+.w-4 { width: 32rpx; }
+.h-4 { height: 32rpx; }
+.w-5 { width: 40rpx; }
+.h-5 { height: 40rpx; }
+.w-6 { width: 48rpx; }
+.h-6 { height: 48rpx; }
+.w-7 { width: 56rpx; }
+.h-7 { height: 56rpx; }
 
-.animate-fade-in-up {
-  animation: fadeInUp 0.4s ease-out forwards;
-  opacity: 0;
-}
-
-.custom-scrollbar {
-  &::-webkit-scrollbar { display: none; }
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-}
-
-// 顶部渐变背景
-.header-bg {
+/* 1. Header Background & Blobs */
+.header-bg-container {
   position: absolute;
   top: 0;
   left: 0;
@@ -339,44 +423,43 @@ function goUserDetail(user: User) {
   border-bottom-right-radius: 560rpx;
   overflow: hidden;
   z-index: 0;
-  
-  .gradient-layer {
+  transition: all 0.5s ease;
+
+  .bg-gradient {
     position: absolute;
     inset: 0;
     background: linear-gradient(135deg, var(--gradient-from) 0%, var(--gradient-to) 100%);
+    opacity: 0.95;
+    transition: background 0.5s ease;
   }
-  
-  .blob-1 {
+
+  .blob {
     position: absolute;
+    border-radius: 50%;
+    filter: blur(140rpx);
+    transition: all 0.5s ease;
+  }
+
+  .blob-1 {
     top: -100rpx;
     left: -100rpx;
     width: 700rpx;
     height: 700rpx;
-    background: rgba(59, 79, 168, 0.8);
+    background: var(--blob-1-bg);
     opacity: 0.8;
-    filter: blur(140rpx);
-    border-radius: 50%;
-    
-    .dark & {
-      background: rgba(69, 26, 3, 0.8);
-    }
+    mix-blend-mode: multiply;
   }
-  
+
   .blob-2 {
-    position: absolute;
     top: 40rpx;
     right: -120rpx;
     width: 600rpx;
     height: 600rpx;
-    background: rgba(130, 225, 255, 0.4);
-    filter: blur(120rpx);
-    border-radius: 50%;
-    
-    .dark & {
-      background: rgba(253, 186, 116, 0.3);
-    }
+    background: var(--blob-2-bg);
+    opacity: 0.4;
+    mix-blend-mode: overlay;
   }
-  
+
   .decoration-ring {
     position: absolute;
     top: 40rpx;
@@ -388,209 +471,193 @@ function goUserDetail(user: User) {
   }
 }
 
-// 顶部内容层
+/* 2. Header Content */
 .header-content {
   position: relative;
   z-index: 10;
   padding-top: var(--status-bar-height);
+  padding-bottom: 40rpx;
 }
 
-// 导航栏
 .nav-bar {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 24rpx 32rpx;
-  
-  .nav-back {
-    width: 72rpx;
-    height: 72rpx;
+
+  .nav-btn {
+    width: 80rpx;
+    height: 80rpx;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 50%;
-    transition: all 0.15s;
-    
-    svg {
-      width: 48rpx;
-      height: 48rpx;
-      color: #fff;
-    }
-    
+    color: #fff;
+
     &:active {
       background: rgba(255, 255, 255, 0.1);
     }
   }
-  
+
   .nav-title {
     font-size: 36rpx;
     font-weight: 700;
-    color: #fff;
+    color: var(--text-header);
     letter-spacing: 2rpx;
-    opacity: 0.95;
-  }
-  
-  .nav-placeholder {
-    width: 72rpx;
   }
 }
 
-// 大标题区域
 .hero-section {
-  padding: 60rpx 48rpx 40rpx;
-  
+  padding: 40rpx 48rpx 40rpx;
+
   .hero-title {
     font-size: 72rpx;
     font-weight: 900;
     font-style: italic;
-    color: #fff;
+    color: var(--text-header);
     display: block;
     text-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.2);
     letter-spacing: 2rpx;
+    margin-bottom: 8rpx;
   }
-  
+
   .hero-subtitle {
     font-size: 24rpx;
     font-weight: 700;
-    color: rgba(255, 255, 255, 0.8);
+    color: var(--text-header-sub);
     letter-spacing: 6rpx;
-    margin-top: 8rpx;
+    text-transform: uppercase;
     display: block;
   }
 }
 
-// 搜索框
+/* 3. Search Box */
 .search-wrapper {
-  padding: 0 48rpx 56rpx;
+  padding: 0 48rpx 20rpx;
 }
 
 .search-box {
   display: flex;
   align-items: center;
-  height: 96rpx;
+  height: 100rpx;
   background: var(--search-bg);
   border: 2rpx solid var(--search-border);
-  border-radius: 48rpx;
-  padding: 0 32rpx;
-  box-shadow: 0 16rpx 48rpx rgba(0, 0, 0, 0.1);
-  
-  .search-icon {
-    width: 40rpx;
-    height: 40rpx;
-    color: var(--text-sub);
-    margin-right: 16rpx;
-    flex-shrink: 0;
+  border-radius: 50rpx;
+  padding: 0 20rpx;
+  box-shadow: 0 20rpx 50rpx var(--search-shadow);
+  transition: all 0.3s ease;
+
+  &:active {
+    transform: scale(0.99);
   }
-  
-  .search-input {
-    flex: 1;
-    height: 100%;
-    font-size: 30rpx;
-    color: var(--text-main);
-    background: transparent;
-    border: none;
-    
-    &::placeholder {
-      color: var(--text-sub);
-    }
-  }
-  
-  .clear-btn {
-    width: 40rpx;
-    height: 40rpx;
+
+  .search-icon-wrapper {
+    width: 80rpx;
     display: flex;
     align-items: center;
     justify-content: center;
-    color: var(--text-sub);
-    flex-shrink: 0;
-    
-    svg {
-      width: 32rpx;
-      height: 32rpx;
-    }
-    
-    &:active {
-      opacity: 0.6;
-    }
+    color: var(--search-placeholder);
+  }
+
+  .search-input {
+    flex: 1;
+    height: 100%;
+    font-size: 32rpx;
+    font-weight: 500;
+    color: var(--search-text);
+    background: transparent;
+    border: none;
+  }
+
+  .placeholder-style {
+    color: var(--search-placeholder);
+  }
+
+  .clear-btn {
+    width: 60rpx;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--search-placeholder);
   }
 }
 
-// 内容区域
+/* 4. Scroll Content Area */
 .content-area {
   position: relative;
   z-index: 5;
-  margin-top: -80rpx;
-  height: calc(100vh - 640rpx);
-  padding: 0 32rpx;
+  /* 调整 margin-top 以向上覆盖 header */
+  margin-top: -30rpx;
+  height: calc(100vh - 600rpx); /* 根据实际 Header 高度调整 */
+  padding: 20rpx 32rpx 0;
+  box-sizing: border-box;
 }
 
-// 扫一扫卡片
+.custom-scrollbar {
+  &::-webkit-scrollbar { display: none; }
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+/* Scan Card */
 .scan-card {
   display: flex;
   align-items: center;
   padding: 0 48rpx;
-  height: 192rpx;
+  height: 200rpx;
   border-radius: 56rpx;
   margin-bottom: 48rpx;
-  background: linear-gradient(135deg, var(--btn-gradient-from) 0%, var(--btn-gradient-to) 100%);
-  box-shadow: 0 16rpx 48rpx rgba(91, 127, 255, 0.2);
+  background: linear-gradient(90deg, var(--scan-bg-from), var(--scan-bg-to));
+  box-shadow: 0 20rpx 40rpx var(--scan-shadow);
+  border: 2rpx solid rgba(255,255,255,0.1);
   transition: all 0.15s;
-  
-  .dark & {
-    box-shadow: 0 16rpx 48rpx rgba(234, 88, 12, 0.3);
-  }
-  
+
   &:active {
     transform: scale(0.98);
   }
-  
+
   .scan-icon-box {
     width: 96rpx;
     height: 96rpx;
     border-radius: 32rpx;
-    background: rgba(0, 0, 0, 0.2);
+    background: var(--scan-icon-bg);
     border: 2rpx solid rgba(255, 255, 255, 0.2);
+    backdrop-filter: blur(4px);
     display: flex;
     align-items: center;
     justify-content: center;
     margin-right: 32rpx;
-    
-    svg {
-      width: 48rpx;
-      height: 48rpx;
-    }
   }
-  
+
   .scan-info {
     flex: 1;
-    
+
     .scan-title {
       font-size: 36rpx;
       font-weight: 700;
       color: #fff;
       display: block;
-      letter-spacing: 2rpx;
+      letter-spacing: 1rpx;
     }
-    
+
     .scan-desc {
       font-size: 24rpx;
       color: rgba(255, 255, 255, 0.9);
       margin-top: 4rpx;
+      font-weight: 500;
       display: block;
     }
   }
-  
+
   .scan-arrow {
-    width: 40rpx;
-    height: 40rpx;
+    transform: rotate(180deg);
     opacity: 0.8;
   }
 }
 
-// 列表区域
+/* Lists */
 .list-section {
-  margin-top: 16rpx;
-  
   .list-title {
     font-size: 24rpx;
     font-weight: 700;
@@ -598,7 +665,7 @@ function goUserDetail(user: User) {
     text-transform: uppercase;
     letter-spacing: 4rpx;
     margin-bottom: 24rpx;
-    margin-left: 8rpx;
+    margin-left: 12rpx;
     display: block;
   }
 }
@@ -607,6 +674,7 @@ function goUserDetail(user: User) {
   display: flex;
   flex-direction: column;
   gap: 24rpx;
+  padding-bottom: 40rpx;
 }
 
 .user-card {
@@ -614,130 +682,146 @@ function goUserDetail(user: User) {
   align-items: center;
   padding: 32rpx;
   background: var(--bg-card);
-  border: 2rpx solid var(--search-border);
   border-radius: 40rpx;
-  transition: all 0.15s;
-  box-shadow: 0 4rpx 30rpx rgba(0, 0, 0, 0.05);
-  overflow: hidden;
-  
+  transition: all 0.3s;
+
+  /* Day mode shadow */
+  box-shadow: 0 4rpx 30rpx rgba(0, 0, 0, 0.03);
+  border: 1px solid rgba(0,0,0,0.02);
+
   .dark & {
     box-shadow: none;
+    border: 1px solid var(--search-border);
   }
-  
+
   &:active {
-    transform: scale(0.99);
-    
-    .dark & {
-      background: #44403c;
-    }
+    transform: scale(0.98);
   }
-  
+
+  .avatar-wrapper {
+    margin-right: 24rpx;
+    border-radius: 50%;
+    border: 2rpx solid var(--search-border);
+  }
+
   .user-info {
     flex: 1;
     min-width: 0;
-    margin-left: 24rpx;
-    
+
     .user-name {
       font-size: 32rpx;
       font-weight: 700;
       color: var(--text-main);
       display: block;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
+      margin-bottom: 4rpx;
     }
-    
+
     .user-id {
       font-size: 24rpx;
       color: var(--text-sub);
-      margin-top: 4rpx;
       display: block;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
+      font-weight: 500;
     }
   }
-  
-  .add-btn {
+
+  .action-btn {
     flex-shrink: 0;
-    padding: 16rpx 32rpx;
+    padding: 12rpx 36rpx;
     border-radius: 40rpx;
     font-size: 28rpx;
     font-weight: 700;
-    color: #fff;
-    background: linear-gradient(135deg, var(--btn-gradient-from) 0%, var(--btn-gradient-to) 100%);
-    box-shadow: 0 8rpx 24rpx rgba(91, 127, 255, 0.3);
-    transition: all 0.15s;
-    
-    .dark & {
-      box-shadow: 0 8rpx 24rpx rgba(234, 88, 12, 0.4);
-    }
-    
-    &:active {
-      transform: scale(0.95);
-    }
-    
-    &.added {
-      background: #f3f4f6;
-      color: #9ca3af;
-      box-shadow: none;
-      
-      .dark & {
-        background: #44403c;
-        color: #a8a29e;
+    transition: all 0.3s;
+
+    /* Add State */
+    &.btn-add {
+      color: #fff;
+      background: linear-gradient(90deg, var(--btn-add-from), var(--btn-add-to));
+      box-shadow: 0 8rpx 20rpx var(--btn-add-shadow);
+
+      &:active {
+        transform: scale(0.95);
       }
     }
+
+    /* Added State */
+    &.btn-added {
+      background: var(--btn-disabled-bg);
+      color: var(--btn-disabled-text);
+      cursor: default;
+    }
   }
 }
 
-// 状态卡片
+/* States (Loading/Empty) */
 .state-card {
   margin-top: 64rpx;
   padding: 80rpx;
   background: var(--bg-card);
-  border: 2rpx solid var(--search-border);
   border-radius: 48rpx;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   min-height: 400rpx;
-  box-shadow: 0 8rpx 40rpx rgba(0, 0, 0, 0.05);
-  
+  border: 1px solid var(--search-border);
+  box-shadow: 0 20rpx 50rpx rgba(0,0,0,0.02);
+
   .dark & {
     box-shadow: none;
   }
-  
+
   .empty-icon-box {
     width: 128rpx;
     height: 128rpx;
     border-radius: 50%;
-    background: #f9fafb;
+    background: var(--btn-disabled-bg);
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 24rpx;
-    
-    .dark & {
-      background: #1c1917;
-    }
-    
-    svg {
-      width: 48rpx;
-      height: 48rpx;
-      color: var(--text-sub);
-    }
+    color: var(--text-sub);
   }
-  
+
+  .loading-spinner {
+    width: 80rpx;
+    height: 80rpx;
+    border: 8rpx solid rgba(0,0,0,0.1);
+    border-top-color: var(--loading-spinner);
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+    margin-bottom: 24rpx;
+  }
+
   .state-text {
     font-size: 28rpx;
     color: var(--text-sub);
-    margin-top: 24rpx;
+    font-weight: 500;
   }
 }
 
+/* Animations */
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(40rpx);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+.animate-fade-in-up {
+  animation: fadeInUp 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+  opacity: 0;
+}
+
 .safe-area-spacer {
-  height: 64rpx;
+  height: env(safe-area-inset-bottom);
+  margin-bottom: 40rpx;
 }
 </style>
-
diff --git a/src/pages/contact/detail.vue b/src/pages/contact/detail.vue
index d64d773..db23568 100644
--- a/src/pages/contact/detail.vue
+++ b/src/pages/contact/detail.vue
@@ -1,123 +1,102 @@
 <template>
   <view class="detail-container" :class="{ 'theme-dark': isDark }">
-    <!-- 头部背景区 (视差效果) -->
-    <view class="profile-header">
-      <view class="blur-bg" :style="headerBgStyle" />
-      <view class="gradient-mask" />
+    <!-- 视差背景 (与设计稿一致: blur-xl scale-110 opacity-70) -->
+    <view class="parallax-bg">
+      <image 
+        v-if="contact?.user?.avatar" 
+        :src="contact.user.avatar" 
+        class="blur-image"
+        mode="aspectFill"
+      />
+      <view class="gradient-overlay" />
+    </view>
 
-      <!-- 返回按钮 -->
+    <!-- 导航栏 (与设计稿一致) -->
+    <view class="nav-header">
       <view class="nav-back" @click="goBack">
         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
           <path d="M15 18l-6-6 6-6"/>
         </svg>
       </view>
+      <view class="nav-more">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <circle cx="12" cy="12" r="1"/>
+          <circle cx="19" cy="12" r="1"/>
+          <circle cx="5" cy="12" r="1"/>
+        </svg>
+      </view>
     </view>
 
-    <!-- 主体内容 (浮动卡片) -->
-    <scroll-view scroll-y class="main-content custom-scrollbar" v-if="!loading && contact">
-      <view class="content-wrapper">
-
-        <!-- 用户身份卡片 -->
-        <view class="identity-card animate-fade-in-up">
-          <view class="avatar-wrapper">
-            <app-avatar
-                :src="contact.user?.avatar"
-                :name="contact.remark_name || contact.user?.name"
-                :size="256"
-                round
-                custom-style="border: 12rpx solid var(--bg-card);"
-            />
-          </view>
-          <view class="info-block">
-            <text class="user-name">{{ contact.remark_name || contact.user?.name || '未知' }}</text>
-            <view class="meta-row">
-              <view class="meta-tag">
-                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                  <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
-                  <circle cx="12" cy="7" r="4"/>
-                </svg>
-                <text>ID: {{ contact.user?.id || '-' }}</text>
-              </view>
-              <view class="meta-tag">
-                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                  <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>
-                  <circle cx="12" cy="10" r="3"/>
-                </svg>
-                <text>{{ contact.user?.region || '未知地区' }}</text>
-              </view>
-            </view>
-            <text class="bio-text">{{ contact.user?.desc || '这个人很懒，什么都没写' }}</text>
-          </view>
+    <!-- 主体内容 -->
+    <scroll-view scroll-y class="main-scroll custom-scrollbar" v-if="!loading && contact">
+      <!-- 身份卡片区 (与设计稿一致) -->
+      <view class="identity-section">
+        <!-- 头像: w-32 h-32 rounded-full border-[6px] border-white shadow-xl -->
+        <view class="avatar-wrapper">
+          <app-avatar
+            :src="contact.user?.avatar"
+            :name="contact.remark_name || contact.user?.name"
+            :size="256"
+            round
+          />
         </view>
-
-        <!-- 设置组：资料 -->
-        <view class="settings-group animate-fade-in-up" style="animation-delay: 100ms;">
-          <view class="settings-card">
-            <view class="setting-item" @click="editRemark">
-              <view class="icon-wrap color-blue">
-                <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">
-                  <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
-                  <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
-                </svg>
-              </view>
-              <view class="item-body">
-                <text class="item-title">设置备注</text>
-                <text class="item-value">{{ contact.remark_name || '未设置' }}</text>
-              </view>
-              <svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <polyline points="9 18 15 12 9 6"/>
-              </svg>
-            </view>
-          </view>
+        
+        <!-- 名字: text-2xl font-bold -->
+        <text class="user-name">{{ contact.remark_name || contact.user?.name || '未知' }}</text>
+        
+        <!-- 标签: text-xs bg-gray-100 px-2 py-0.5 rounded -->
+        <view class="tag-row">
+          <view class="info-tag">ID: {{ contact.user?.id || '-' }}</view>
+          <view class="info-tag">{{ contact.user?.region || '未知' }}</view>
         </view>
-
-        <!-- 设置组：交互 -->
-        <view class="settings-group animate-fade-in-up" style="animation-delay: 150ms;">
-          <view class="group-label">隐私与通知</view>
-          <view class="settings-card">
-            <view class="setting-item">
-              <view class="icon-wrap color-orange">
-                <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">
-                  <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>
-                </svg>
-              </view>
-              <view class="item-body">
-                <text class="item-title">置顶聊天</text>
-              </view>
-              <wd-switch v-model="contact.is_top" size="24px" :active-color="isDark ? '#f97316' : '#4F46E5'" @change="toggleTop" />
-            </view>
-
-            <view class="setting-item">
-              <view class="icon-wrap color-purple">
-                <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">
-                  <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/>
-                  <path d="M13.73 21a2 2 0 0 1-3.46 0"/>
-                  <line x1="1" y1="1" x2="23" y2="23"/>
-                </svg>
-              </view>
-              <view class="item-body">
-                <text class="item-title">消息免打扰</text>
-              </view>
-              <wd-switch v-model="contact.is_muted" size="24px" :active-color="isDark ? '#f97316' : '#4F46E5'" @change="toggleMute" />
-            </view>
-
-            <view class="setting-item">
-              <view class="icon-wrap color-red">
-                <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">
-                  <circle cx="12" cy="12" r="10"/>
-                  <line x1="4.93" y1="4.93" x2="19.07" y2="19.07"/>
-                </svg>
-              </view>
-              <view class="item-body">
-                <text class="item-title">加入黑名单</text>
-              </view>
-              <wd-switch v-model="contact.is_blocked" size="24px" active-color="#ef4444" @change="toggleBlock" />
-            </view>
-          </view>
-        </view>
-
-        <view class="spacer" />
+        
+        <!-- 签名: text-sm text-gray-500 text-center max-w-[200px] -->
+        <text class="bio-text">{{ contact.user?.desc || '这个人很懒，什么都没写' }}</text>
       </view>
+
+      <!-- 好友设置卡片 (与设计稿一致) -->
+      <view class="settings-card animate-fade-in-up">
+        <!-- 设置备注 -->
+        <view class="setting-row" @click="editRemark">
+          <text class="row-label">设置备注</text>
+          <view class="row-right">
+            <text class="row-value">{{ contact.remark_name || '未设置' }}</text>
+            <svg class="chevron-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <polyline points="9 18 15 12 9 6"/>
+            </svg>
+          </view>
+        </view>
+        
+        <!-- 置顶聊天 -->
+        <view class="setting-row">
+          <text class="row-label">置顶聊天</text>
+          <view class="toggle-wrap">
+            <view 
+              class="custom-toggle" 
+              :class="{ active: contact.is_top }"
+              @click="toggleTopManual"
+            >
+              <view class="toggle-thumb" />
+            </view>
+          </view>
+        </view>
+        
+        <!-- 消息免打扰 -->
+        <view class="setting-row no-border">
+          <text class="row-label">消息免打扰</text>
+          <view class="toggle-wrap">
+            <view 
+              class="custom-toggle" 
+              :class="{ active: contact.is_muted }"
+              @click="toggleMuteManual"
+            >
+              <view class="toggle-thumb" />
+            </view>
+          </view>
+        </view>
+      </view>
+
+      <view class="bottom-spacer" />
     </scroll-view>
 
     <!-- Loading -->
@@ -125,20 +104,23 @@
       <wd-loading size="60rpx" :color="isDark ? '#f97316' : '#4F46E5'"/>
     </view>
 
-    <!-- 底部悬浮操作栏 -->
+    <!-- 底部悬浮操作栏 (与设计稿一致: rounded-t-[32px] shadow-[0_-10px_40px]) -->
     <view class="floating-dock" v-if="contact">
-      <view class="dock-content">
+      <view class="dock-buttons">
+        <!-- 电话: flex-1 -->
         <view class="dock-btn secondary" @click="startAudioCall">
           <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72"/>
+            <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.05 12.05 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.05 12.05 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/>
           </svg>
         </view>
+        <!-- 发消息: flex-[2] -->
         <view class="dock-btn primary" @click="goChat">
-          <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
             <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
           </svg>
           <text>发消息</text>
         </view>
+        <!-- 视频: flex-1 -->
         <view class="dock-btn secondary" @click="startVideoCall">
           <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
             <polygon points="23 7 16 12 23 17 23 7"/>
@@ -146,8 +128,9 @@
           </svg>
         </view>
       </view>
-
-      <view class="danger-btn" @click="deleteFriend">
+      
+      <!-- 删除好友: text-xs text-gray-400 underline -->
+      <view class="delete-link" @click="deleteFriend">
         <text>删除好友</text>
       </view>
     </view>
@@ -158,7 +141,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, computed } from 'vue'
+import { ref, onMounted } from 'vue'
 import { onLoad } from '@dcloudio/uni-app'
 import * as contactApi from '@/api/modules/contact'
 import { useToast, useMessage } from 'wot-design-uni'
@@ -170,11 +153,6 @@ import type { Contact } from '@/types/api'
 const toast = useToast(); const messageBox = useMessage(); const { isDark } = useTheme();
 const loading = ref(true); const contact = ref<Contact | null>(null); const contactId = ref(''); const userId = ref('');
 
-const headerBgStyle = computed(() => {
-  const url = contact.value?.user?.avatar || '';
-  return url ? `background-image: url(${url});` : 'background: var(--bg-card);';
-})
-
 onLoad((options: any) => { contactId.value = options?.id || ''; userId.value = options?.userId || '' })
 onMounted(async () => { if (contactId.value) { await loadContact() } else if (userId.value) { await loadContactByUserId() } })
 async function loadContact() { loading.value = true; try { contact.value = await contactApi.getContactDetail(contactId.value) } catch (error) { console.error('加载联系人失败:', error); toast.error('加载失败') } finally { loading.value = false } }
@@ -187,50 +165,51 @@ async function editRemark() { if (!contact.value) return; try { const { value }
 async function toggleTop() { if (!contact.value) return; try { await contactApi.updateContact(contactId.value, { is_top: contact.value.is_top }); toast.success(contact.value.is_top ? '已置顶' : '已取消置顶') } catch { contact.value.is_top = !contact.value.is_top; toast.error('操作失败') } }
 async function toggleMute() { if (!contact.value) return; try { await contactApi.updateContact(contactId.value, { is_muted: contact.value.is_muted }); toast.success(contact.value.is_muted ? '已开启免打扰' : '已关闭免打扰') } catch { contact.value.is_muted = !contact.value.is_muted; toast.error('操作失败') } }
 async function toggleBlock() { if (!contact.value) return; try { await contactApi.updateContact(contactId.value, { is_blocked: contact.value.is_blocked }); toast.success(contact.value.is_blocked ? '已加入黑名单' : '已移出黑名单') } catch { contact.value.is_blocked = !contact.value.is_blocked; toast.error('操作失败') } }
+// 手动切换方法 (用于自定义开关)
+async function toggleTopManual() { if (!contact.value) return; contact.value.is_top = !contact.value.is_top; await toggleTop() }
+async function toggleMuteManual() { if (!contact.value) return; contact.value.is_muted = !contact.value.is_muted; await toggleMute() }
 async function deleteFriend() { try { await messageBox.confirm({ title: '提示', msg: '确定要删除该好友吗？删除后将无法恢复' }); await contactApi.deleteContact(contactId.value); toast.success('删除成功'); setTimeout(() => { uni.navigateBack() }, 1000) } catch (e: any) { if (e !== 'cancel') { toast.error('删除失败') } } }
 </script>
 
 <style lang="scss" scoped>
+// ==========================================
 // 页面容器 - 浅色模式 (与设计稿完全一致)
+// ==========================================
 .detail-container {
-  --bg-base: #ffffff;                  // 白色页面背景
+  --bg-page: #f3f4f6;                  // gray-100 (页面背景)
   --bg-card: #ffffff;                  // 卡片背景
-  --bg-secondary: #f3f4f6;             // gray-100 (次要背景/按钮)
-  --text-main: #1f2937;                // gray-900 (名称)
-  --text-sub: #6b7280;                 // gray-500 (签名/标签)
-  --text-tertiary: #9ca3af;            // gray-400 (值)
+  --bg-tag: #f3f4f6;                   // gray-100 (标签背景)
+  --bg-toggle: #e5e7eb;                // gray-200 (开关关闭)
+  --text-main: #111827;                // gray-900 (名称)
+  --text-sub: #6b7280;                 // gray-500 (签名)
+  --text-tertiary: #9ca3af;            // gray-400 (标签/值)
   --color-brand: #4F46E5;              // indigo-600
   --border-color: #f9fafb;             // gray-50
   --gradient-to: #ffffff;              // 渐变终点色
 
   min-height: 100vh;
-  background: var(--bg-base);
+  background: var(--bg-page);
   position: relative;
 
   // 深色模式 - Warm Stone (与设计稿完全一致)
   &.theme-dark {
-    --bg-base: #0c0a09;                // warm-950 (极深背景)
+    --bg-page: #0c0a09;                // warm-950
     --bg-card: #1c1917;                // warm-900
-    --bg-secondary: #292524;           // warm-800
-    --text-main: #f5f5f4;              // warm-100
+    --bg-tag: #292524;                 // warm-800
+    --bg-toggle: #44403c;              // warm-700
+    --text-main: #fafaf9;              // warm-50
     --text-sub: #a8a29e;               // warm-400
     --text-tertiary: #78716c;          // warm-500
     --color-brand: #f97316;            // orange-500
-    --border-color: rgba(41, 37, 36, 0.5); // warm-800/50
+    --border-color: rgba(41, 37, 36, 0.5);
     --gradient-to: #0c0a09;            // warm-950
   }
 }
 
 // 动画
 @keyframes fadeInUp {
-  from {
-    opacity: 0;
-    transform: translateY(20rpx);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
+  from { opacity: 0; transform: translateY(20rpx); }
+  to { opacity: 1; transform: translateY(0); }
 }
 
 .animate-fade-in-up {
@@ -244,304 +223,350 @@ async function deleteFriend() { try { await messageBox.confirm({ title: '提示'
   scrollbar-width: none;
 }
 
-// 视差头部背景
-.profile-header {
+// ==========================================
+// 视差背景 (与设计稿一致: blur-xl scale-110 opacity-70)
+// ==========================================
+.parallax-bg {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 600rpx;
-  z-index: 0;
   overflow: hidden;
+  z-index: 0;
 
-  .blur-bg {
+  .blur-image {
     width: 100%;
     height: 100%;
-    background-size: cover;
-    background-position: center;
-    filter: blur(40px);
-    transform: scale(1.1);
-    opacity: 0.7;
+    // blur-xl = 24px, 需要用px单位
+    filter: blur(24px);
+    -webkit-filter: blur(24px);
+    transform: scale(1.1);         // scale-110
+    opacity: 0.7;                  // opacity-70
 
     .theme-dark & {
-      opacity: 0.4;
+      opacity: 0.5;
     }
   }
 
-  .gradient-mask {
+  .gradient-overlay {
     position: absolute;
     inset: 0;
-    background: linear-gradient(to bottom, transparent 0%, var(--gradient-to) 85%);
-  }
-
-  .nav-back {
-    position: absolute;
-    top: calc(var(--status-bar-height) + 16rpx);
-    left: 24rpx;
-    width: 72rpx;
-    height: 72rpx;
-    background: rgba(0, 0, 0, 0.15);
-    border-radius: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    backdrop-filter: blur(10px);
-    z-index: 10;
-    transition: all 0.15s;
-
-    svg {
-      width: 40rpx;
-      height: 40rpx;
-      color: #fff;
-    }
-
-    &:active {
-      transform: scale(0.95);
-      background: rgba(0, 0, 0, 0.25);
-    }
+    background: linear-gradient(to bottom, transparent 0%, var(--gradient-to) 100%);
   }
 }
 
-// 主内容
-.main-content {
-  height: 100vh;
+// ==========================================
+// 导航栏 (与设计稿一致)
+// ==========================================
+.nav-header {
+  position: relative;
+  z-index: 10;
+  padding: calc(var(--status-bar-height) + 24rpx) 32rpx 16rpx;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  .nav-back, .nav-more {
+    width: 56rpx;
+    height: 56rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: opacity 0.15s;
+
+    svg {
+      width: 44rpx;
+      height: 44rpx;
+      color: var(--text-main);
+
+      .theme-dark & {
+        color: #e7e5e4;  // warm-200
+      }
+    }
+
+    &:active {
+      opacity: 0.6;
+    }
+  }
+
+  .nav-more svg {
+    width: 40rpx;
+    height: 40rpx;
+  }
+}
+
+// ==========================================
+// 主体滚动区
+// ==========================================
+.main-scroll {
+  height: calc(100vh - 120rpx);
   position: relative;
   z-index: 1;
 }
 
-.content-wrapper {
-  padding: 0 32rpx;
-  padding-top: calc(220rpx + var(--status-bar-height));
-}
-
-// 身份卡片
-.identity-card {
+// ==========================================
+// 身份卡片区 (与设计稿完全一致)
+// ==========================================
+.identity-section {
   display: flex;
   flex-direction: column;
   align-items: center;
-  margin-bottom: 60rpx;
+  padding: 64rpx 48rpx 64rpx;
 
+  // 头像: w-32 h-32 rounded-full border-[6px] border-white shadow-xl
   .avatar-wrapper {
-    box-shadow: 0 16rpx 48rpx rgba(0, 0, 0, 0.15);
     border-radius: 50%;
+    border: 12rpx solid var(--bg-card);  // border-[6px] = 12rpx
+    box-shadow: 0 20rpx 50rpx rgba(0, 0, 0, 0.2);  // shadow-xl
+    margin-bottom: 32rpx;
   }
 
-  .info-block {
-    margin-top: 30rpx;
-    text-align: center;
-
-    .user-name {
-      font-size: 48rpx;
-      font-weight: 700;
-      color: var(--text-main);
-      margin-bottom: 16rpx;
-    }
-
-    .meta-row {
-      display: flex;
-      justify-content: center;
-      gap: 16rpx;
-      margin-bottom: 24rpx;
-
-      .meta-tag {
-        display: flex;
-        align-items: center;
-        gap: 8rpx;
-        font-size: 24rpx;
-        color: var(--text-sub);
-        background: var(--bg-secondary);
-        padding: 10rpx 20rpx;
-        border-radius: 20rpx;
-
-        svg {
-          width: 24rpx;
-          height: 24rpx;
-        }
-      }
-    }
-
-    .bio-text {
-      font-size: 28rpx;
-      color: var(--text-sub);
-      max-width: 500rpx;
-      line-height: 1.6;
-    }
-  }
-}
-
-// 设置组
-.settings-group {
-  margin-bottom: 40rpx;
-
-  .group-label {
-    font-size: 26rpx;
-    color: var(--text-sub);
+  // 名字: text-2xl font-bold
+  .user-name {
+    font-size: 48rpx;                    // text-2xl = 24px = 48rpx
+    font-weight: 700;                    // font-bold
+    color: var(--text-main);
     margin-bottom: 16rpx;
-    margin-left: 12rpx;
-    font-weight: 600;
+  }
+
+  // 标签行
+  .tag-row {
+    display: flex;
+    gap: 16rpx;
+    margin-bottom: 32rpx;
+  }
+
+  // 标签: text-xs bg-gray-100 px-2 py-0.5 rounded
+  .info-tag {
+    font-size: 24rpx;                    // text-xs = 12px = 24rpx
+    color: var(--text-tertiary);
+    background: var(--bg-tag);
+    padding: 8rpx 16rpx;                 // px-2 py-0.5
+    border-radius: 8rpx;                 // rounded
+  }
+
+  // 签名: text-sm text-gray-500 text-center max-w-[200px]
+  .bio-text {
+    font-size: 28rpx;                    // text-sm = 14px = 28rpx
+    color: var(--text-sub);
+    text-align: center;
+    line-height: 1.6;                    // leading-relaxed
+    max-width: 400rpx;                   // max-w-[200px] = 400rpx
   }
 }
 
+// ==========================================
+// 设置卡片 (与设计稿一致: rounded-2xl shadow-sm border)
+// ==========================================
 .settings-card {
+  margin: 0 24rpx 48rpx;
   background: var(--bg-card);
-  border-radius: 24rpx;
+  border-radius: 32rpx;                  // rounded-2xl = 16px = 32rpx
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);  // shadow-sm
+  border: 2rpx solid var(--border-color);
   overflow: hidden;
+
+  .theme-dark & {
+    box-shadow: none;
+    border-color: rgba(41, 37, 36, 0.5);
+  }
 }
 
-.setting-item {
+// 设置行 (与设计稿一致)
+.setting-row {
   display: flex;
   align-items: center;
-  padding: 28rpx 28rpx;
-  border-bottom: 1rpx solid rgba(0, 0, 0, 0.04);
+  justify-content: space-between;
+  padding: 32rpx;                        // p-4 = 16px = 32rpx
+  border-bottom: 2rpx solid var(--border-color);
   transition: background 0.15s;
 
   .theme-dark & {
-    border-bottom-color: rgba(255, 255, 255, 0.06);
+    border-bottom-color: rgba(41, 37, 36, 0.5);
   }
 
-  &:last-child {
+  &.no-border {
     border-bottom: none;
   }
 
   &:active {
     background: rgba(0, 0, 0, 0.02);
-
     .theme-dark & {
       background: rgba(255, 255, 255, 0.02);
     }
   }
 
-  .icon-wrap {
-    width: 60rpx;
-    height: 60rpx;
-    border-radius: 16rpx;
+  .row-label {
+    font-size: 28rpx;                    // text-sm = 14px = 28rpx
+    font-weight: 500;                    // font-medium
+    color: var(--text-main);
+
+    .theme-dark & {
+      color: #e7e5e4;                    // warm-200
+    }
+  }
+
+  .row-right {
     display: flex;
     align-items: center;
-    justify-content: center;
-    margin-right: 24rpx;
-
-    svg {
-      width: 32rpx;
-      height: 32rpx;
-    }
-
-    &.color-blue { background: #0ea5e9; }
-    &.color-orange { background: #f97316; }
-    &.color-purple { background: #8b5cf6; }
-    &.color-red { background: #ef4444; }
+    gap: 8rpx;
   }
 
-  .item-body {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
+  .row-value {
+    font-size: 24rpx;                    // text-xs
+    color: var(--text-tertiary);
   }
 
-  .item-title {
-    font-size: 30rpx;
-    color: var(--text-main);
-    font-weight: 500;
-  }
-
-  .item-value {
-    font-size: 26rpx;
-    color: var(--text-sub);
-    margin-top: 4rpx;
-  }
-
-  .chevron {
+  .chevron-icon {
     width: 32rpx;
     height: 32rpx;
-    color: var(--text-sub);
-    opacity: 0.5;
+    color: #d1d5db;                      // gray-300
   }
 }
 
-.spacer {
-  height: 320rpx;
+// 自定义开关 (与设计稿一致)
+.toggle-wrap {
+  display: flex;
+  align-items: center;
 }
 
-// 底部操作台
+.custom-toggle {
+  width: 80rpx;                          // w-10 = 40px = 80rpx
+  height: 48rpx;                         // h-6 = 24px = 48rpx
+  background: var(--bg-toggle);
+  border-radius: 48rpx;                  // rounded-full
+  position: relative;
+  transition: background 0.2s;
+
+  .toggle-thumb {
+    position: absolute;
+    left: 8rpx;
+    top: 8rpx;
+    width: 32rpx;                        // w-4 = 16px = 32rpx
+    height: 32rpx;                       // h-4 = 16px = 32rpx
+    background: #fff;
+    border-radius: 50%;
+    box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);  // shadow-sm
+    transition: transform 0.2s;
+  }
+
+  &.active {
+    background: var(--color-brand);
+
+    .toggle-thumb {
+      transform: translateX(32rpx);      // 移动到右边
+    }
+  }
+}
+
+// ==========================================
+// 底部悬浮操作栏 (与设计稿一致: rounded-t-[32px] shadow-[0_-10px_40px])
+// ==========================================
 .floating-dock {
   position: fixed;
   bottom: 0;
   left: 0;
   right: 0;
-  padding: 30rpx 40rpx;
-  padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
+  padding: 32rpx 48rpx;                  // px-6 py-4
+  padding-bottom: calc(64rpx + env(safe-area-inset-bottom));  // pb-8
   background: var(--bg-card);
-  border-top: 1rpx solid rgba(0, 0, 0, 0.05);
-  border-radius: 64rpx 64rpx 0 0;
-  box-shadow: 0 -20rpx 80rpx rgba(0, 0, 0, 0.05);
+  border-top: 2rpx solid var(--border-color);
+  border-radius: 64rpx 64rpx 0 0;        // rounded-t-[32px] = 64rpx
+  box-shadow: 0 -20rpx 80rpx rgba(0, 0, 0, 0.05);  // shadow-[0_-10px_40px]
   z-index: 100;
 
   .theme-dark & {
-    border-top-color: rgba(255, 255, 255, 0.05);
+    border-top-color: #292524;           // warm-800
+  }
+}
+
+// 按钮行
+.dock-buttons {
+  display: flex;
+  gap: 32rpx;                            // gap-4 = 16px = 32rpx
+  margin-bottom: 32rpx;                  // mb-4
+}
+
+.dock-btn {
+  height: 96rpx;                         // h-12 = 48px = 96rpx
+  border-radius: 32rpx;                  // rounded-2xl
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 16rpx;
+  transition: all 0.15s;
+
+  svg {
+    width: 40rpx;                        // w-5 h-5 = 20px = 40rpx
+    height: 40rpx;
   }
 
-  .dock-content {
-    display: flex;
-    align-items: center;
-    gap: 24rpx;
-    margin-bottom: 24rpx;
+  &:active {
+    transform: scale(0.95);
+    opacity: 0.9;
+  }
 
-    .dock-btn {
-      height: 100rpx;
-      border-radius: 32rpx;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      transition: all 0.15s;
+  // 次要按钮: flex-1
+  &.secondary {
+    flex: 1;
+    background: var(--bg-tag);
+    color: var(--text-main);
 
-      svg {
-        width: 44rpx;
-        height: 44rpx;
-      }
+    .theme-dark & {
+      background: #292524;               // warm-800
+      color: #e7e5e4;                    // warm-200
+    }
 
-      &:active {
-        transform: scale(0.96);
-      }
-
-      &.primary {
-        flex: 2;
-        background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
-        color: #fff;
-        gap: 16rpx;
-        font-weight: 600;
-        font-size: 32rpx;
-        box-shadow: 0 8rpx 24rpx rgba(79, 70, 229, 0.25);
-
-        .theme-dark & {
-          background: linear-gradient(135deg, #fb923c 0%, #f97316 100%);
-          box-shadow: 0 8rpx 24rpx rgba(249, 115, 22, 0.25);
-        }
-      }
-
-      &.secondary {
-        flex: 1;
-        background: var(--bg-secondary);
-        color: var(--text-main);
+    &:hover {
+      background: #e5e7eb;               // gray-200
+      .theme-dark & {
+        background: #44403c;             // warm-700
       }
     }
   }
 
-  .danger-btn {
-    text-align: center;
+  // 主要按钮: flex-[2]
+  &.primary {
+    flex: 2;
+    background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
+    color: #fff;
+    font-weight: 700;                    // font-bold
+    font-size: 28rpx;
+    box-shadow: 0 8rpx 24rpx rgba(99, 102, 241, 0.3);
 
-    text {
-      color: var(--text-sub);
-      font-size: 26rpx;
-      padding: 10rpx 20rpx;
-      opacity: 0.6;
+    svg {
+      stroke: #fff;
     }
 
-    &:active text {
-      opacity: 1;
-      color: #ef4444;
+    .theme-dark & {
+      background: linear-gradient(135deg, #fb923c 0%, #ea580c 100%);
+      box-shadow: 0 8rpx 24rpx rgba(234, 88, 12, 0.3);
     }
   }
 }
 
+// 删除好友链接: text-xs text-gray-400 underline
+.delete-link {
+  text-align: center;
+
+  text {
+    font-size: 24rpx;                    // text-xs
+    color: var(--text-tertiary);
+    text-decoration: underline;          // underline
+  }
+
+  &:active text {
+    color: #ef4444;                      // hover:text-red-500
+  }
+}
+
+// 底部留白
+.bottom-spacer {
+  height: 360rpx;
+}
+
+// 加载中
 .center-loading {
   position: absolute;
   top: 50%;
@@ -549,3 +574,4 @@ async function deleteFriend() { try { await messageBox.confirm({ title: '提示'
   transform: translate(-50%, -50%);
 }
 </style>
+
diff --git a/src/pages/index/index.vue b/src/pages/index/index.vue
index bb0d543..adea5b4 100644
--- a/src/pages/index/index.vue
+++ b/src/pages/index/index.vue
@@ -32,22 +32,6 @@
         </view>
       </view>
 
-      <!-- 2. 搜索栏 (扁平化设计) -->
-      <view class="search-wrapper">
-        <view class="search-bar" @click="goSearch">
-          <svg class="search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-            <circle cx="11" cy="11" r="8"></circle>
-            <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
-          </svg>
-          <input
-            type="text"
-            class="search-input"
-            placeholder="搜索"
-            disabled
-          />
-        </view>
-      </view>
-
       <!-- 3. 会话列表 -->
       <scroll-view
           class="conversation-list custom-scrollbar"
@@ -56,6 +40,22 @@
           :refresher-triggered="refreshing"
           @refresherrefresh="onRefresh"
       >
+
+        <!-- 2. 搜索栏 (扁平化设计) -->
+        <view class="search-wrapper">
+          <view class="search-bar" @click="goSearch">
+            <svg class="search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <circle cx="11" cy="11" r="8"></circle>
+              <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+            </svg>
+            <input
+                type="text"
+                class="search-input"
+                placeholder="搜索"
+                disabled
+            />
+          </view>
+        </view>
         <view v-if="loading && conversations.length === 0" class="loading-state">
           <wd-loading size="50rpx" color="var(--color-primary)" />
           <text>连接中...</text>