diff --git a/src/components/call/CallWindow.vue b/src/components/call/CallWindow.vue
index b740e64..7ff3caa 100644
--- a/src/components/call/CallWindow.vue
+++ b/src/components/call/CallWindow.vue
@@ -281,6 +281,7 @@ watch(() => props.remoteStream, (stream) => {
   position: absolute;
   inset: 0;
   overflow: hidden;
+  background: #0f172a; // 设计稿: 来电背景
 
   .blur-img {
     width: 100%;
@@ -294,7 +295,35 @@ watch(() => props.remoteStream, (stream) => {
   .blur-overlay {
     position: absolute;
     inset: 0;
-    background: linear-gradient(180deg, rgba(0,0,0,0.4) 0%, transparent 30%, rgba(0,0,0,0.9) 100%);
+    background: rgba(15, 23, 42, 0.8); // 设计稿: bg-[#0f172a]/80
+    backdrop-filter: blur(48px);
+    -webkit-backdrop-filter: blur(48px);
+  }
+  
+  // 设计稿: 呼吸光球动画
+  &::before, &::after {
+    content: '';
+    position: absolute;
+    width: 600rpx;
+    height: 600rpx;
+    border-radius: 50%;
+    filter: blur(160rpx);
+    opacity: 0.4;
+    animation: glow-breathe 8s ease-in-out infinite;
+  }
+  
+  &::before {
+    top: 10%;
+    left: -100rpx;
+    background: #9333ea; // purple-600
+    animation-delay: 0s;
+  }
+  
+  &::after {
+    bottom: 10%;
+    right: -100rpx;
+    background: #2563eb; // blue-600
+    animation-delay: 4s;
   }
 }
 
@@ -366,23 +395,36 @@ watch(() => props.remoteStream, (stream) => {
   position: relative;
   margin-bottom: 48rpx;
 
+  // 设计稿: 头像波纹效果
   .avatar-ring {
     position: absolute;
+    inset: -20rpx;
     border-radius: 50%;
-    border: 2rpx solid rgba(255, 255, 255, 0.1);
+    border: 2rpx solid rgba(255, 255, 255, 0.3); // 设计稿: border-white/30
+
+    &.ring-1 {
+      animation: ripple 2s cubic-bezier(0, 0, 0.2, 1) infinite;
+    }
+    
+    &.ring-2 {
+      animation: ripple 2s cubic-bezier(0, 0, 0.2, 1) infinite;
+      animation-delay: 1s;
+    }
 
     &.ring-ping {
       inset: -4rpx;
-      border: 2rpx solid rgba(255, 255, 255, 0.2);
+      border: 2rpx solid rgba(255, 255, 255, 0.3);
       animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
     }
   }
 
   .avatar-container {
+    position: relative;
     border: 4rpx solid rgba(255, 255, 255, 0.1);
     border-radius: 50%;
     padding: 4rpx;
     box-shadow: 0 40rpx 100rpx rgba(0, 0, 0, 0.4);
+    z-index: 1;
   }
 }
 
@@ -527,4 +569,16 @@ watch(() => props.remoteStream, (stream) => {
   from { transform: translateY(40rpx); opacity: 0; }
   to { transform: translateY(0); opacity: 1; }
 }
+
+// 设计稿: 呼吸光球动画
+@keyframes glow-breathe {
+  0%, 100% { transform: scale(1); opacity: 0.3; }
+  50% { transform: scale(1.2); opacity: 0.5; }
+}
+
+// 设计稿: 头像波纹动画
+@keyframes ripple {
+  0% { transform: scale(1); opacity: 0.4; }
+  100% { transform: scale(2.5); opacity: 0; }
+}
 </style>
diff --git a/src/components/common/AppDrawer.vue b/src/components/common/AppDrawer.vue
index 55b7b27..6757934 100644
--- a/src/components/common/AppDrawer.vue
+++ b/src/components/common/AppDrawer.vue
@@ -15,15 +15,12 @@
       <!-- 头部用户信息 -->
       <view class="drawer-header">
         <view class="avatar-wrap">
-          <image
-            v-if="user?.avatar"
-            class="avatar"
-            :src="resolveImageUrl(user.avatar)"
-            mode="aspectFill"
+          <app-avatar
+            :src="user?.avatar"
+            :name="user?.name"
+            :size="120"
+            round
           />
-          <view v-else class="avatar avatar-placeholder">
-            {{ (user?.name || '?').charAt(0) }}
-          </view>
         </view>
         <text class="username">{{ user?.name || '请登录' }}</text>
         <text class="bio">{{ user?.desc || '编辑个签，展示你的独特个性' }}</text>
@@ -66,6 +63,7 @@ import { computed } from 'vue'
 import { useAuthStore } from '@/stores'
 import { useTheme } from '@/composables/useTheme'
 import { resolveImageUrl } from '@/utils/image'
+import AppAvatar from '@/components/common/AppAvatar.vue'
 
 interface Props {
   modelValue: boolean
diff --git a/src/components/common/AppTabBar.vue b/src/components/common/AppTabBar.vue
index ac852ef..18fbb51 100644
--- a/src/components/common/AppTabBar.vue
+++ b/src/components/common/AppTabBar.vue
@@ -50,6 +50,18 @@
               <polygon points="16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76"/>
             </svg>
           </template>
+
+          <!-- 我的图标 (user) -->
+          <template v-else-if="tab.name === 'profile'">
+            <svg v-if="current === tab.name" class="icon" viewBox="0 0 24 24" fill="currentColor">
+              <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>
+            <svg v-else class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <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>
+          </template>
         </view>
         <text class="tabbar-text">{{ tab.label }}</text>
       </view>
@@ -74,11 +86,12 @@ const { isDark } = useTheme()
 const conversationStore = useConversationStore()
 const unreadCount = computed(() => conversationStore.totalUnread)
 
-// 底部导航只有3个: 消息/联系人/发现 (无"我的")
+// 底部导航4个: 消息/联系人/发现/我的
 const tabs = [
   { name: 'messages', label: '消息', path: '/pages/index/index' },
   { name: 'contacts', label: '联系人', path: '/pages/contact/index' },
-  { name: 'moments', label: '发现', path: '/pages/moment/index' }
+  { name: 'moments', label: '发现', path: '/pages/moment/index' },
+  { name: 'profile', label: '我的', path: '/pages/profile/index' }
 ]
 
 function switchTab(name: string) {
diff --git a/src/pages/chat/index.vue b/src/pages/chat/index.vue
index dfbeef6..fbf679a 100644
--- a/src/pages/chat/index.vue
+++ b/src/pages/chat/index.vue
@@ -75,15 +75,12 @@
             <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)">
-                <image 
-                  v-if="msg.isSelf ? currentUser?.avatar : getMessageSenderAvatar(msg)"
-                  :src="msg.isSelf ? resolveImageUrl(currentUser?.avatar || '') : getMessageSenderAvatar(msg)"
-                  class="avatar-img"
-                  mode="aspectFill"
+                <app-avatar
+                  :src="msg.isSelf ? currentUser?.avatar : getMessageSenderAvatar(msg)"
+                  :name="msg.isSelf ? currentUser?.name : getMessageSenderName(msg)"
+                  :size="80"
+                  radius="24rpx"
                 />
-                <view v-else class="avatar-placeholder">
-                  {{ msg.isSelf ? (currentUser?.name?.charAt(0) || '?') : (getMessageSenderName(msg)?.charAt(0) || '?') }}
-                </view>
               </view>
 
               <!-- 内容区 - 设计稿: flex flex-col max-w-[75%] -->
diff --git a/src/pages/contact/add.vue b/src/pages/contact/add.vue
index 6e460e6..e2d296f 100644
--- a/src/pages/contact/add.vue
+++ b/src/pages/contact/add.vue
@@ -1,112 +1,65 @@
 <template>
-  <view class="page-container" :class="{ 'theme-dark': isDark }">
-    <!-- 渐变弧形头部 -->
-    <view class="curved-header">
-      <view class="header-bg"></view>
-      <view class="decoration-orb orb-1"></view>
-      <view class="decoration-orb orb-2"></view>
-
-      <!-- 返回按钮 -->
-      <view class="nav-back" @click="goBack">
-        <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
-          <path d="M15 18l-6-6 6-6"/>
-        </svg>
+  <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>
+        <view class="decoration-ring"></view>
       </view>
-
-      <!-- 大标题 -->
+      
+      <!-- 顶部内容层 -->
       <view class="header-content">
-        <text class="main-title">发现新朋友</text>
-        <text class="sub-title">EXPANDING YOUR CIRCLE</text>
-      </view>
-    </view>
-
-    <!-- 悬浮搜索框 -->
-    <view class="search-floater">
-      <view class="search-box">
-        <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"/>
-          <line x1="21" y1="21" x2="16.65" y2="16.65"/>
-        </svg>
-        <input
-            class="search-input"
-            type="text"
-            v-model="keyword"
-            placeholder="搜索账号 / 手机号"
-            @confirm="doSearch"
-        />
-        <view v-if="keyword" class="clear-btn" @click="keyword = ''">
-          <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"/>
-          </svg>
+        <!-- 导航栏 -->
+        <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"/>
+            </svg>
+          </view>
+          <text class="nav-title">添加好友</text>
+          <view class="nav-placeholder"></view>
         </view>
-        <view v-else class="search-btn" @click="doSearch">
-          <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
-            <line x1="5" y1="12" x2="19" y2="12"/>
-            <polyline points="12 5 19 12 12 19"/>
-          </svg>
+        
+        <!-- 大标题 -->
+        <view class="hero-section">
+          <text class="hero-title">发现新朋友</text>
+          <text class="hero-subtitle">EXPANDING YOUR CIRCLE</text>
         </view>
-      </view>
-    </view>
-
-    <!-- 主内容 -->
-    <scroll-view scroll-y class="main-content custom-scrollbar">
-      <!-- 搜索结果 -->
-      <view v-if="searched" class="result-section animate-fade-in-up">
-        <view class="section-header">
-          <text class="section-title">搜索结果</text>
-        </view>
-
-        <!-- Loading -->
-        <view v-if="loading" class="loading-box">
-          <wd-loading size="50rpx" :color="isDark ? '#f97316' : '#4F46E5'" />
-          <text>正在寻找...</text>
-        </view>
-
-        <!-- Empty -->
-        <view v-else-if="results.length === 0" class="empty-box">
-          <svg class="empty-icon" 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>
-          <text class="empty-text">未找到匹配的用户</text>
-        </view>
-
-        <!-- List -->
-        <view v-else class="user-list">
-          <view
-              v-for="(item, index) in results"
-              :key="item.id"
-              class="user-card animate-fade-in-up"
-              :style="{ animationDelay: `${index * 50}ms` }"
-          >
-            <app-avatar
-                :src="item.avatar"
-                :name="item.name"
-                :size="100"
-                radius="28rpx"
+        
+        <!-- 搜索框 -->
+        <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="card-info">
-              <text class="user-name">{{ item.name }}</text>
-              <text class="user-id">ID: {{ item.id }}</text>
-            </view>
-            <view class="action-wrap" :class="{ added: addedIds.includes(item.id) }" @click.stop="addFriend(item)">
-              <svg v-if="!addedIds.includes(item.id)" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.5">
-                <line x1="12" y1="5" x2="12" y2="19"/>
-                <line x1="5" y1="12" x2="19" y2="12"/>
-              </svg>
-              <svg v-else viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.5">
-                <polyline points="20 6 9 17 4 12"/>
+            <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"/>
               </svg>
             </view>
           </view>
         </view>
       </view>
-
-      <!-- 初始态：扫一扫卡片 + 推荐用户 -->
-      <view v-else class="initial-content">
-        <view class="feature-card scan-card" @click="scanQrCode">
-          <view class="card-content">
-            <view class="icon-bubble">
+      
+      <!-- 内容区域 -->
+      <scroll-view class="content-area custom-scrollbar" scroll-y>
+        <!-- 初始状态 -->
+        <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"/>
@@ -115,137 +68,241 @@
                 <line x1="7" y1="12" x2="17" y2="12"/>
               </svg>
             </view>
-            <view class="text-group">
-              <text class="card-title">扫一扫</text>
-              <text class="card-desc">扫描二维码名片</text>
+            <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>
-          <svg class="arrow-icon" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,0.6)" stroke-width="2">
-            <polyline points="9 18 15 12 9 6"/>
-          </svg>
-        </view>
-
-        <!-- 推荐用户列表 -->
-        <view v-if="recommendUsers.length > 0" class="recommend-section animate-fade-in-up">
-          <view class="section-header">
-            <text class="section-title">为您推荐</text>
-          </view>
-          <view class="user-list">
-            <view
-                v-for="(item, index) in recommendUsers"
-                :key="item.id"
+          
+          <!-- 推荐列表 -->
+          <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` }"
-            >
-              <app-avatar
-                  :src="item.avatar"
-                  :name="item.name"
-                  :size="100"
-                  radius="28rpx"
-              />
-              <view class="card-info">
-                <text class="user-name">{{ item.name }}</text>
-                <text class="user-id">ID: {{ item.id }}</text>
-              </view>
-              <view class="action-wrap" :class="{ added: addedIds.includes(item.id) }" @click.stop="addFriend(item)">
-                <svg v-if="!addedIds.includes(item.id)" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.5">
-                  <line x1="12" y1="5" x2="12" y2="19"/>
-                  <line x1="5" y1="12" x2="19" y2="12"/>
-                </svg>
-                <svg v-else viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.5">
-                  <polyline points="20 6 9 17 4 12"/>
-                </svg>
+              >
+                <app-avatar :src="user.avatar" :name="user.name" :size="96" radius="50%" />
+                <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)"
+                >
+                  {{ addedIds.includes(user.id) ? '已发送' : '添加' }}
+                </view>
               </view>
             </view>
           </view>
-        </view>
-
-        <!-- 加载推荐用户中 -->
-        <view v-else-if="loadingRecommend" class="loading-box">
-          <wd-loading size="50rpx" :color="isDark ? '#f97316' : '#4F46E5'" />
-          <text>获取推荐...</text>
-        </view>
-      </view>
-    </scroll-view>
-
-    <wd-toast />
-    <wd-message-box />
-  </view>
+        </template>
+        
+        <!-- 加载状态 -->
+        <template v-else-if="viewState === 'loading'">
+          <view class="state-card animate-fade-in-up">
+            <wd-loading :color="isDark ? '#f97316' : '#5B7FFF'" />
+            <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>
+            </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)"
+              >
+                <app-avatar :src="user.avatar" :name="user.name" :size="96" radius="50%" />
+                <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)"
+                >
+                  {{ addedIds.includes(user.id) ? '已发送' : '添加' }}
+                </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 * as contactApi from '@/api/modules/contact'
-import { useToast, useMessage } from 'wot-design-uni'
 import { useTheme } from '@/composables/useTheme'
+import { useToast } from 'wot-design-uni'
+import * as contactApi from '@/api/modules/contact'
 import AppAvatar from '@/components/common/AppAvatar.vue'
 import type { User } from '@/types/api'
 
-// --- 保持逻辑完全不变 ---
-const toast = useToast(); const message = useMessage(); const { isDark } = useTheme();
-const keyword = ref(''); const loading = ref(false); const searched = ref(false); const results = ref<User[]>([]); const addedIds = ref<string[]>([]);
+const { isDark } = useTheme()
+const toast = useToast()
 
-// 推荐用户相关
-const recommendUsers = ref<User[]>([]); const loadingRecommend = ref(false);
+const searchKeyword = ref('')
+const viewState = ref<'initial' | 'loading' | 'empty' | 'results'>('initial')
+const addedIds = ref<string[]>([])
+const recommendUsers = ref<User[]>([])
+const searchResults = ref<User[]>([])
+let searchTimer: ReturnType<typeof setTimeout> | null = null
 
-function goBack() { uni.navigateBack() }
-async function doSearch() { if (!keyword.value.trim()) { toast.show('请输入搜索内容'); return } loading.value = true; searched.value = true; try { results.value = await contactApi.searchUsers(keyword.value.trim()) } catch (error) { console.error('搜索失败:', error); toast.error('搜索失败') } finally { loading.value = false } }
-async function addFriend(user: User) {
-  if (addedIds.value.includes(user.id)) { toast.show('已发送申请'); return }
-  try { const { value } = await message.prompt({ title: '添加好友', inputPlaceholder: '请输入验证消息', inputValue: '你好，我是...' }); await contactApi.addFriend({ to_user_id: user.id, message: value || '' }); addedIds.value.push(user.id); toast.success('申请已发送') } catch (e: any) { if (e !== 'cancel') { toast.error('发送失败') } }
-}
-function scanQrCode() { uni.scanCode({ onlyFromCamera: false, success: (res) => { console.log('扫码结果:', res.result); toast.show('扫码功能开发中') }, fail: () => { toast.error('扫码失败') } }) }
+onMounted(() => {
+  loadRecommendUsers()
+})
 
-// 加载推荐用户
 async function loadRecommendUsers() {
-  loadingRecommend.value = true;
   try {
-    // 尝试获取推荐用户，如果 API 不存在则使用空列表
-    if (typeof contactApi.getRecommendUsers === 'function') {
-      recommendUsers.value = await contactApi.getRecommendUsers();
-    } else {
-      // API 不存在时使用默认数据
-      recommendUsers.value = [];
-    }
-  } catch (error) {
-    console.error('获取推荐用户失败:', error);
-    recommendUsers.value = [];
-  } finally {
-    loadingRecommend.value = false;
+    // 加载推荐用户，这里可以调用实际的API
+    const users = await contactApi.searchUsers('')
+    recommendUsers.value = users.slice(0, 6)
+  } catch (e) {
+    console.error('加载推荐用户失败:', e)
   }
 }
 
-onMounted(() => {
-  loadRecommendUsers();
-});
+function goBack() {
+  uni.navigateBack()
+}
+
+function focusSearch() {
+  // Focus is handled by clicking
+}
+
+function onSearchInput() {
+  if (searchTimer) {
+    clearTimeout(searchTimer)
+  }
+  
+  if (searchKeyword.value.trim()) {
+    viewState.value = 'loading'
+    searchTimer = setTimeout(() => {
+      doSearch()
+    }, 800)
+  } else {
+    viewState.value = 'initial'
+  }
+}
+
+async function doSearch() {
+  if (!searchKeyword.value.trim()) {
+    viewState.value = 'initial'
+    return
+  }
+  
+  try {
+    const results = await contactApi.searchUsers(searchKeyword.value.trim())
+    searchResults.value = results
+    viewState.value = results.length > 0 ? 'results' : 'empty'
+  } catch (e) {
+    console.error('搜索失败:', e)
+    viewState.value = 'empty'
+  }
+}
+
+function clearSearch() {
+  searchKeyword.value = ''
+  viewState.value = 'initial'
+}
+
+function handleScan() {
+  uni.scanCode({
+    success: (res) => {
+      toast.success('扫码成功')
+      // 处理扫码结果
+      if (res.result) {
+        searchKeyword.value = res.result
+        doSearch()
+      }
+    },
+    fail: () => {
+      toast.error('扫码失败')
+    }
+  })
+}
+
+async function handleAdd(user: User) {
+  if (addedIds.value.includes(user.id)) return
+  
+  try {
+    await contactApi.sendFriendRequest(user.id, '我想加你为好友')
+    addedIds.value.push(user.id)
+    toast.success('已发送好友请求')
+  } catch (e: any) {
+    toast.error(e.message || '发送失败')
+  }
+}
+
+function goUserDetail(user: User) {
+  uni.navigateTo({ url: `/pages/contact/detail?userId=${user.id}` })
+}
 </script>
 
 <style lang="scss" scoped>
 // 页面容器 - 浅色模式
-.page-container {
-  --bg-base: #f7f8fa;
+.add-friend-page {
+  --bg-page: #ffffff;
   --bg-card: #ffffff;
-  --text-main: #1d1d1f;
-  --text-sub: #6b7280;
-  --color-brand: #4F46E5;
-  --gradient-start: #4b6cb7;
-  --gradient-end: #8E9EFE;
-
+  --text-main: #1f2937;
+  --text-sub: #9ca3af;
+  --gradient-from: #4b6cb7;
+  --gradient-to: #8E9EFE;
+  --btn-gradient-from: #5B7FFF;
+  --btn-gradient-to: #748EFF;
+  --search-bg: #ffffff;
+  --search-border: #f9fafb;
+  
   min-height: 100vh;
-  background: var(--bg-base);
+  background: var(--bg-page);
   position: relative;
   overflow: hidden;
+}
 
-  // 深色模式 - Warm Stone
-  &.theme-dark {
-    --bg-base: #1c1917;
-    --bg-card: #292524;
-    --text-main: #f5f5f4;
-    --text-sub: #78716c;
-    --color-brand: #f97316;
-    --gradient-start: #7c2d12;
-    --gradient-end: #b45309;
-  }
+// 深色模式 - Warm Stone
+.add-friend-page.dark {
+  --bg-page: #1c1917;
+  --bg-card: #292524;
+  --text-main: #e7e5e4;
+  --text-sub: #a8a29e;
+  --gradient-from: #7c2d12;
+  --gradient-to: #b45309;
+  --btn-gradient-from: #c2410c;
+  --btn-gradient-to: #ea580c;
+  --search-bg: #292524;
+  --search-border: #44403c;
 }
 
 // 动画
@@ -271,113 +328,152 @@ onMounted(() => {
   scrollbar-width: none;
 }
 
-// 渐变弧形头部
-.curved-header {
-  position: relative;
+// 顶部渐变背景
+.header-bg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
   height: 720rpx;
+  border-bottom-left-radius: 120rpx;
+  border-bottom-right-radius: 560rpx;
   overflow: hidden;
-
-  .header-bg {
+  z-index: 0;
+  
+  .gradient-layer {
     position: absolute;
     inset: 0;
-    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
-    clip-path: ellipse(150% 100% at 50% 0%);
+    background: linear-gradient(135deg, var(--gradient-from) 0%, var(--gradient-to) 100%);
   }
-
-  .decoration-orb {
+  
+  .blob-1 {
     position: absolute;
+    top: -100rpx;
+    left: -100rpx;
+    width: 700rpx;
+    height: 700rpx;
+    background: rgba(59, 79, 168, 0.8);
+    opacity: 0.8;
+    filter: blur(140rpx);
     border-radius: 50%;
-    filter: blur(70rpx);
-    pointer-events: none;
-
-    &.orb-1 {
-      width: 300rpx;
-      height: 300rpx;
-      background: rgba(255, 255, 255, 0.2);
-      top: 100rpx;
-      left: -50rpx;
-    }
-
-    &.orb-2 {
-      width: 250rpx;
-      height: 250rpx;
-      background: rgba(255, 255, 255, 0.15);
-      top: 200rpx;
-      right: -80rpx;
-      filter: blur(80rpx);
+    
+    .dark & {
+      background: rgba(69, 26, 3, 0.8);
     }
   }
-
-  .nav-back {
+  
+  .blob-2 {
     position: absolute;
-    top: calc(var(--status-bar-height) + 16rpx);
-    left: 24rpx;
+    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);
+    }
+  }
+  
+  .decoration-ring {
+    position: absolute;
+    top: 40rpx;
+    right: -40rpx;
+    width: 300rpx;
+    height: 300rpx;
+    border: 2rpx solid rgba(255, 255, 255, 0.1);
+    border-radius: 50%;
+  }
+}
+
+// 顶部内容层
+.header-content {
+  position: relative;
+  z-index: 10;
+  padding-top: var(--status-bar-height);
+}
+
+// 导航栏
+.nav-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 24rpx 32rpx;
+  
+  .nav-back {
     width: 72rpx;
     height: 72rpx;
-    background: rgba(255, 255, 255, 0.2);
-    border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
-    backdrop-filter: blur(10px);
-    z-index: 10;
+    border-radius: 50%;
     transition: all 0.15s;
-
+    
     svg {
-      width: 40rpx;
-      height: 40rpx;
+      width: 48rpx;
+      height: 48rpx;
+      color: #fff;
     }
-
+    
     &:active {
-      transform: scale(0.95);
-      background: rgba(255, 255, 255, 0.3);
+      background: rgba(255, 255, 255, 0.1);
     }
   }
-
-  .header-content {
-    position: absolute;
-    bottom: 200rpx;
-    left: 48rpx;
-    z-index: 2;
+  
+  .nav-title {
+    font-size: 36rpx;
+    font-weight: 700;
+    color: #fff;
+    letter-spacing: 2rpx;
+    opacity: 0.95;
   }
+  
+  .nav-placeholder {
+    width: 72rpx;
+  }
+}
 
-  .main-title {
-    display: block;
+// 大标题区域
+.hero-section {
+  padding: 60rpx 48rpx 40rpx;
+  
+  .hero-title {
     font-size: 72rpx;
     font-weight: 900;
     font-style: italic;
     color: #fff;
-    letter-spacing: -2rpx;
-    text-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.2);
-  }
-
-  .sub-title {
     display: block;
+    text-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.2);
+    letter-spacing: 2rpx;
+  }
+  
+  .hero-subtitle {
     font-size: 24rpx;
+    font-weight: 700;
     color: rgba(255, 255, 255, 0.8);
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 4rpx;
-    margin-top: 12rpx;
+    letter-spacing: 6rpx;
+    margin-top: 8rpx;
+    display: block;
   }
 }
 
-// 悬浮搜索框
-.search-floater {
-  position: relative;
-  margin-top: -80rpx;
-  padding: 0 32rpx;
-  z-index: 10;
+// 搜索框
+.search-wrapper {
+  padding: 0 48rpx 56rpx;
 }
 
 .search-box {
   display: flex;
   align-items: center;
-  background: var(--bg-card);
-  padding: 16rpx 24rpx;
-  border-radius: 50rpx;
-  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
-
+  height: 96rpx;
+  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;
@@ -385,269 +481,254 @@ onMounted(() => {
     margin-right: 16rpx;
     flex-shrink: 0;
   }
-
+  
   .search-input {
     flex: 1;
-    height: 72rpx;
+    height: 100%;
     font-size: 30rpx;
     color: var(--text-main);
     background: transparent;
     border: none;
-    outline: none;
-
+    
     &::placeholder {
       color: var(--text-sub);
-      opacity: 0.6;
     }
   }
-
+  
   .clear-btn {
-    width: 48rpx;
-    height: 48rpx;
+    width: 40rpx;
+    height: 40rpx;
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--text-sub);
-    margin-right: 12rpx;
-
-    svg {
-      width: 36rpx;
-      height: 36rpx;
-    }
-
-    &:active { opacity: 0.7; }
-  }
-
-  .search-btn {
-    width: 72rpx;
-    height: 72rpx;
-    background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
-    border-radius: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    box-shadow: 0 4rpx 16rpx rgba(79, 70, 229, 0.3);
     flex-shrink: 0;
-    transition: all 0.15s;
-
-    .theme-dark & {
-      background: linear-gradient(135deg, #fb923c 0%, #f97316 100%);
-      box-shadow: 0 4rpx 16rpx rgba(249, 115, 22, 0.3);
-    }
-
+    
     svg {
-      width: 36rpx;
-      height: 36rpx;
+      width: 32rpx;
+      height: 32rpx;
     }
-
+    
     &:active {
-      transform: scale(0.95);
+      opacity: 0.6;
     }
   }
 }
 
-// 主内容
-.main-content {
-  height: calc(100vh - 720rpx + 80rpx);
-  padding: 40rpx 32rpx;
-}
-
-// 结果区
-.result-section {
-  .section-header {
-    margin-bottom: 24rpx;
-
-    .section-title {
-      font-size: 30rpx;
-      font-weight: 700;
-      color: var(--text-main);
-    }
-  }
-}
-
-.loading-box, .empty-box {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 100rpx 0;
-  gap: 24rpx;
-  color: var(--text-sub);
-  font-size: 26rpx;
-}
-
-.empty-icon {
-  width: 100rpx;
-  height: 100rpx;
-  opacity: 0.4;
-}
-
-// 用户卡片
-.user-card {
-  background: var(--bg-card);
-  padding: 24rpx;
-  border-radius: 40rpx;
-  display: flex;
-  align-items: center;
-  margin-bottom: 24rpx;
-  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
-
-  .card-info {
-    flex: 1;
-    margin-left: 24rpx;
-
-    .user-name {
-      display: block;
-      font-size: 32rpx;
-      font-weight: 600;
-      color: var(--text-main);
-    }
-
-    .user-id {
-      display: block;
-      margin-top: 6rpx;
-      font-size: 24rpx;
-      color: var(--text-sub);
-      font-family: monospace;
-    }
-  }
-
-  .action-wrap {
-    width: 80rpx;
-    height: 80rpx;
-    border-radius: 24rpx;
-    background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: all 0.2s;
-    box-shadow: 0 4rpx 12rpx rgba(79, 70, 229, 0.25);
-
-    .theme-dark & {
-      background: linear-gradient(135deg, #fb923c 0%, #f97316 100%);
-      box-shadow: 0 4rpx 12rpx rgba(249, 115, 22, 0.25);
-    }
-
-    svg {
-      width: 36rpx;
-      height: 36rpx;
-    }
-
-    &.added {
-      background: #10b981;
-      box-shadow: 0 4rpx 12rpx rgba(16, 185, 129, 0.25);
-    }
-
-    &:active {
-      transform: scale(0.92);
-    }
-  }
-}
-
-// 初始内容
-.initial-content {
-  padding-top: 20rpx;
-}
-
-// 推荐区
-.recommend-section {
-  margin-top: 48rpx;
-
-  .section-header {
-    margin-bottom: 24rpx;
-
-    .section-title {
-      font-size: 30rpx;
-      font-weight: 700;
-      color: var(--text-main);
-    }
-  }
-
-  .user-list {
-    display: flex;
-    flex-direction: column;
-    gap: 24rpx;
-  }
-}
-
-// 功能卡片
-.feature-card {
+// 内容区域
+.content-area {
   position: relative;
-  border-radius: 40rpx;
-  padding: 40rpx;
-  overflow: hidden;
+  z-index: 5;
+  margin-top: -80rpx;
+  height: calc(100vh - 640rpx);
+  padding: 0 32rpx;
+}
+
+// 扫一扫卡片
+.scan-card {
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  box-shadow: 0 12rpx 32rpx rgba(79, 70, 229, 0.2);
-
-  .theme-dark & {
-    box-shadow: 0 12rpx 32rpx rgba(249, 115, 22, 0.2);
+  padding: 0 48rpx;
+  height: 192rpx;
+  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);
+  transition: all 0.15s;
+  
+  .dark & {
+    box-shadow: 0 16rpx 48rpx rgba(234, 88, 12, 0.3);
   }
-
-  &.scan-card {
-    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
-    color: #fff;
-  }
-
-  &::before {
-    content: '';
-    position: absolute;
-    top: -50%;
-    left: -20%;
-    width: 200%;
-    height: 200%;
-    background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 60%);
-    pointer-events: none;
-  }
-
-  .card-content {
-    display: flex;
-    align-items: center;
-    gap: 24rpx;
-    z-index: 2;
-  }
-
-  .icon-bubble {
-    width: 88rpx;
-    height: 88rpx;
-    background: rgba(255, 255, 255, 0.2);
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    border-radius: 28rpx;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    backdrop-filter: blur(4px);
-
-    svg {
-      width: 44rpx;
-      height: 44rpx;
-    }
-  }
-
-  .text-group {
-    display: flex;
-    flex-direction: column;
-
-    .card-title {
-      font-size: 36rpx;
-      font-weight: 700;
-      margin-bottom: 6rpx;
-    }
-
-    .card-desc {
-      font-size: 24rpx;
-      opacity: 0.8;
-    }
-  }
-
-  .arrow-icon {
-    width: 40rpx;
-    height: 40rpx;
-    z-index: 2;
-  }
-
+  
   &:active {
     transform: scale(0.98);
   }
+  
+  .scan-icon-box {
+    width: 96rpx;
+    height: 96rpx;
+    border-radius: 32rpx;
+    background: rgba(0, 0, 0, 0.2);
+    border: 2rpx solid rgba(255, 255, 255, 0.2);
+    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;
+    }
+    
+    .scan-desc {
+      font-size: 24rpx;
+      color: rgba(255, 255, 255, 0.9);
+      margin-top: 4rpx;
+      display: block;
+    }
+  }
+  
+  .scan-arrow {
+    width: 40rpx;
+    height: 40rpx;
+    opacity: 0.8;
+  }
+}
+
+// 列表区域
+.list-section {
+  margin-top: 16rpx;
+  
+  .list-title {
+    font-size: 24rpx;
+    font-weight: 700;
+    color: var(--text-sub);
+    text-transform: uppercase;
+    letter-spacing: 4rpx;
+    margin-bottom: 24rpx;
+    margin-left: 8rpx;
+    display: block;
+  }
+}
+
+.user-list {
+  display: flex;
+  flex-direction: column;
+  gap: 24rpx;
+}
+
+.user-card {
+  display: flex;
+  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);
+  
+  .dark & {
+    box-shadow: none;
+  }
+  
+  &:active {
+    transform: scale(0.99);
+    
+    .dark & {
+      background: #44403c;
+    }
+  }
+  
+  .user-info {
+    flex: 1;
+    margin-left: 24rpx;
+    
+    .user-name {
+      font-size: 32rpx;
+      font-weight: 700;
+      color: var(--text-main);
+      display: block;
+    }
+    
+    .user-id {
+      font-size: 24rpx;
+      color: var(--text-sub);
+      margin-top: 4rpx;
+      display: block;
+    }
+  }
+  
+  .add-btn {
+    padding: 16rpx 40rpx;
+    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;
+      }
+    }
+  }
+}
+
+// 状态卡片
+.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);
+  
+  .dark & {
+    box-shadow: none;
+  }
+  
+  .empty-icon-box {
+    width: 128rpx;
+    height: 128rpx;
+    border-radius: 50%;
+    background: #f9fafb;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 24rpx;
+    
+    .dark & {
+      background: #1c1917;
+    }
+    
+    svg {
+      width: 48rpx;
+      height: 48rpx;
+      color: var(--text-sub);
+    }
+  }
+  
+  .state-text {
+    font-size: 28rpx;
+    color: var(--text-sub);
+    margin-top: 24rpx;
+  }
+}
+
+.safe-area-spacer {
+  height: 64rpx;
 }
 </style>
+
diff --git a/src/pages/contact/detail.vue b/src/pages/contact/detail.vue
index d527fb0..d64d773 100644
--- a/src/pages/contact/detail.vue
+++ b/src/pages/contact/detail.vue
@@ -191,25 +191,33 @@ async function deleteFriend() { try { await messageBox.confirm({ title: '提示'
 </script>
 
 <style lang="scss" scoped>
-// 页面容器 - 浅色模式
+// 页面容器 - 浅色模式 (与设计稿完全一致)
 .detail-container {
-  --bg-base: #f7f8fa;
-  --bg-card: #ffffff;
-  --text-main: #1d1d1f;
-  --text-sub: #6b7280;
-  --color-brand: #4F46E5;
+  --bg-base: #ffffff;                  // 白色页面背景
+  --bg-card: #ffffff;                  // 卡片背景
+  --bg-secondary: #f3f4f6;             // gray-100 (次要背景/按钮)
+  --text-main: #1f2937;                // 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);
   position: relative;
 
-  // 深色模式 - Warm Stone
+  // 深色模式 - Warm Stone (与设计稿完全一致)
   &.theme-dark {
-    --bg-base: #1c1917;
-    --bg-card: #292524;
-    --text-main: #f5f5f4;
-    --text-sub: #78716c;
-    --color-brand: #f97316;
+    --bg-base: #0c0a09;                // warm-950 (极深背景)
+    --bg-card: #1c1917;                // warm-900
+    --bg-secondary: #292524;           // warm-800
+    --text-main: #f5f5f4;              // warm-100
+    --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
+    --gradient-to: #0c0a09;            // warm-950
   }
 }
 
@@ -263,7 +271,7 @@ async function deleteFriend() { try { await messageBox.confirm({ title: '提示'
   .gradient-mask {
     position: absolute;
     inset: 0;
-    background: linear-gradient(to bottom, transparent 0%, var(--bg-base) 85%);
+    background: linear-gradient(to bottom, transparent 0%, var(--gradient-to) 85%);
   }
 
   .nav-back {
@@ -341,14 +349,10 @@ async function deleteFriend() { try { await messageBox.confirm({ title: '提示'
         gap: 8rpx;
         font-size: 24rpx;
         color: var(--text-sub);
-        background: rgba(0, 0, 0, 0.04);
+        background: var(--bg-secondary);
         padding: 10rpx 20rpx;
         border-radius: 20rpx;
 
-        .theme-dark & {
-          background: rgba(255, 255, 255, 0.08);
-        }
-
         svg {
           width: 24rpx;
           height: 24rpx;
@@ -515,12 +519,8 @@ async function deleteFriend() { try { await messageBox.confirm({ title: '提示'
 
       &.secondary {
         flex: 1;
-        background: rgba(0, 0, 0, 0.04);
+        background: var(--bg-secondary);
         color: var(--text-main);
-
-        .theme-dark & {
-          background: rgba(255, 255, 255, 0.08);
-        }
       }
     }
   }
diff --git a/src/pages/contact/groups.vue b/src/pages/contact/groups.vue
index 3837617..5518fdd 100644
--- a/src/pages/contact/groups.vue
+++ b/src/pages/contact/groups.vue
@@ -20,16 +20,12 @@
               @click="goChat(group)"
           >
             <view class="card-left">
-              <wd-img
-                  v-if="group.room_avatar"
-                  :src="group.room_avatar"
-                  width="100rpx"
-                  height="100rpx"
-                  radius="20rpx"
+              <app-avatar
+                :src="group.room_avatar"
+                :name="group.room_name"
+                :size="100"
+                radius="20rpx"
               />
-              <view v-else class="avatar-placeholder" :style="{ background: generateColor(group.room_name || '') }">
-                {{ group.room_name?.charAt(0) || '群' }}
-              </view>
             </view>
 
             <view class="card-right">
@@ -59,6 +55,7 @@ import { ref, onMounted } from 'vue'
 import * as roomApi from '@/api/modules/room'
 import { generateColor } from '@/utils/format'
 import { useTheme } from '@/composables/useTheme'
+import AppAvatar from '@/components/common/AppAvatar.vue'
 
 // --- 逻辑保持不变 ---
 interface GroupItem { room_id: string; room_name: string; room_avatar: string; category: 'joined' | 'created' | 'managed' }
diff --git a/src/pages/contact/index.vue b/src/pages/contact/index.vue
index 570f5c6..8491f3c 100644
--- a/src/pages/contact/index.vue
+++ b/src/pages/contact/index.vue
@@ -50,6 +50,8 @@
       <scroll-view
           class="main-scroll custom-scrollbar"
           scroll-y
+          :scroll-into-view="scrollIntoViewId"
+          :scroll-with-animation="true"
           :refresher-enabled="true"
           :refresher-triggered="refreshing"
           @refresherrefresh="onRefresh"
@@ -292,7 +294,7 @@ import type { Contact, ContactGroup } from '@/types/api'
 // --- 逻辑完全不变 ---
 interface GroupChat { room_id: string; room_type: string; room_name: string; room_avatar: string; category: 'joined' | 'created' | 'managed'; }
 const contactStore = useContactStore(); const chatStore = useChatStore(); const { isDark } = useTheme(); const toast = useToast(); const messageBox = useMessage();
-const tabs = [{ key: 'groups', label: '分组' }, { key: 'friends', label: '好友' }, { key: 'chats', label: '群聊' }]; const activeTab = ref('groups'); const searchKeyword = ref(''); const refreshing = ref(false); const loading = ref(false); const collapsedIds = ref<(number | string)[]>([]); const contactGroups = ref<ContactGroup[]>([]); const groupChats = ref<GroupChat[]>([]); const showContactActions = ref(false); const selectedContact = ref<Contact | null>(null); const showMoveGroupModal = ref(false); const showRemarkModal = ref(false); const remarkName = ref(''); const savingRemark = ref(false); const showGroupActions = ref(false); const selectedGroup = ref<ContactGroup | null>(null); const showCreateGroupModal = ref(false); const showRenameGroupModal = ref(false); const newGroupName = ref(''); const renameGroupName = ref(''); const creating = ref(false); const renaming = ref(false);
+const tabs = [{ key: 'groups', label: '分组' }, { key: 'friends', label: '好友' }, { key: 'chats', label: '群聊' }]; const activeTab = ref('groups'); const searchKeyword = ref(''); const refreshing = ref(false); const loading = ref(false); const collapsedIds = ref<(number | string)[]>([]); const contactGroups = ref<ContactGroup[]>([]); const groupChats = ref<GroupChat[]>([]); const showContactActions = ref(false); const selectedContact = ref<Contact | null>(null); const showMoveGroupModal = ref(false); const showRemarkModal = ref(false); const remarkName = ref(''); const savingRemark = ref(false); const showGroupActions = ref(false); const selectedGroup = ref<ContactGroup | null>(null); const showCreateGroupModal = ref(false); const showRenameGroupModal = ref(false); const newGroupName = ref(''); const renameGroupName = ref(''); const creating = ref(false); const renaming = ref(false); const scrollIntoViewId = ref('');
 const contacts = computed(() => chatStore.contacts); const friendRequestCount = computed(() => contactStore.friendRequests.filter(r => r.status === 'pending').length); const ungroupedContacts = computed(() => contacts.value.filter(c => !c.group_id || c.group_id === 0)); function getGroupContacts(groupId: number): Contact[] { return contacts.value.filter(c => c.group_id === groupId) }
 const letters = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', '#']; const alphabetGroupedContacts = computed(() => { const groups: Record<string, Contact[]> = {}; contacts.value.forEach(contact => { const name = contact.remark_name || contact.user?.name || ''; const firstChar = name.charAt(0).toUpperCase(); const letter = /[A-Z]/.test(firstChar) ? firstChar : '#'; if (!groups[letter]) groups[letter] = []; groups[letter].push(contact) }); return Object.keys(groups).sort((a, b) => (a === '#' ? 1 : b === '#' ? -1 : a.localeCompare(b))).map(letter => ({ letter, contacts: groups[letter] })) });
 const createdGroups = computed(() => groupChats.value.filter(g => g.category === 'created')); const managedGroups = computed(() => groupChats.value.filter(g => g.category === 'managed')); const joinedGroups = computed(() => groupChats.value.filter(g => g.category === 'joined'));
@@ -312,7 +314,17 @@ function goFriendRequests() { uni.navigateTo({ url: '/pages/contact/requests' })
 function goGroupNotify() { uni.navigateTo({ url: '/pages/group/notify' }) }
 function goContactDetail(contact: Contact) { uni.navigateTo({ url: `/pages/contact/detail?id=${contact.id}` }) }
 function goGroupChat(group: GroupChat) { uni.navigateTo({ url: `/pages/chat/index?roomId=${group.room_id}&name=${encodeURIComponent(group.room_name || '群聊')}` }) }
-function scrollToLetter(letter: string) { console.log(letter) }
+function scrollToLetter(letter: string) { 
+  // 检查是否有该字母的分组
+  const hasGroup = alphabetGroupedContacts.value.some(g => g.letter === letter)
+  if (hasGroup) {
+    // 清空后再设置，确保重复点击同一字母也能触发滚动
+    scrollIntoViewId.value = ''
+    setTimeout(() => {
+      scrollIntoViewId.value = `letter-${letter}`
+    }, 10)
+  }
+}
 function handleContactLongPress(c: Contact) { selectedContact.value = c; remarkName.value = c.remark_name || ''; showContactActions.value = true }
 function onContactActionSelect(a: { value: string }) { showContactActions.value = false; if(a.value === 'remark') showRemarkModal.value = true; else if(a.value === 'move') showMoveGroupModal.value = true; else if(a.value === 'delete') handleDeleteContact() }
 async function handleSaveRemark() { if(!selectedContact.value) return; savingRemark.value=true; try { await contactApi.updateContact(selectedContact.value.id.toString(), {remark_name: remarkName.value}); const idx = chatStore.contacts.findIndex(c => c.id === selectedContact.value?.id); if(idx>-1) chatStore.contacts[idx].remark_name = remarkName.value; showRemarkModal.value=false; toast.success('备注已修改') } catch(e){toast.error('失败')} finally {savingRemark.value=false} }
@@ -330,18 +342,20 @@ async function handleDeleteGroup() { try { await messageBox.confirm({title:'提
 // 页面容器 - 浅色模式 (与设计稿一致)
 // ==========================================
 .page-container {
-  --bg-page: #ffffff;
-  --bg-surface: #ffffff;
-  --bg-highlight: #f5f5f5;
-  --bg-group: rgba(0, 0, 0, 0.02);
-  --text-primary: #1f2937;
-  --text-secondary: #6b7280;
-  --text-tertiary: #9ca3af;
-  --border-color: rgba(0, 0, 0, 0.05);
-  --color-brand: #4F46E5;
-  --tab-bg: #f1f1f1;
-  --tab-active-bg: #ffffff;
-  --search-bg: #f1f1f1;
+  --bg-page: #ffffff;                     // 页面背景
+  --bg-surface: #ffffff;                  // 卡片背景
+  --bg-highlight: #f9fafb;                // gray-50 (hover)
+  --bg-group: #f9fafb;                    // gray-50 (分组容器)
+  --text-primary: #1f2937;                // gray-900
+  --text-secondary: #6b7280;              // gray-500
+  --text-tertiary: #9ca3af;               // gray-400
+  --border-color: #f3f4f6;                // gray-100
+  --color-brand: #4F46E5;                 // indigo-600
+  --tab-bg: #f3f4f6;                      // gray-100
+  --tab-active-bg: #ffffff;               // white + shadow-sm
+  --search-bg: #f3f4f6;                   // gray-100
+  --index-bg: rgba(243, 244, 246, 0.8);   // gray-100/80
+  --index-hover: rgba(79, 70, 229, 0.1);  // indigo-100
 
   min-height: 100vh;
   background: var(--bg-page);
@@ -352,18 +366,20 @@ async function handleDeleteGroup() { try { await messageBox.confirm({title:'提
 // 深色模式 - Warm Stone (与设计稿一致)
 // ==========================================
 .page-container.dark {
-  --bg-page: #1c1917;
-  --bg-surface: #1c1917;
-  --bg-highlight: #44403c;
-  --bg-group: rgba(255, 255, 255, 0.03);
-  --text-primary: #f5f5f4;
-  --text-secondary: #e7e5e4;
-  --text-tertiary: #78716c;
-  --border-color: #44403c;
-  --color-brand: #f97316;
-  --tab-bg: #292524;
-  --tab-active-bg: #44403c;
-  --search-bg: #292524;
+  --bg-page: #1c1917;                      // warm-900
+  --bg-surface: #1c1917;                   // warm-900
+  --bg-highlight: #292524;                 // warm-800
+  --bg-group: rgba(41, 37, 36, 0.4);       // warm-800/40
+  --text-primary: #f5f5f4;                 // warm-100
+  --text-secondary: #a8a29e;               // warm-400
+  --text-tertiary: #78716c;                // warm-500
+  --border-color: rgba(41, 37, 36, 0.5);   // warm-800/50
+  --color-brand: #f97316;                  // orange-500
+  --tab-bg: #292524;                       // warm-800
+  --tab-active-bg: #44403c;                // warm-700
+  --search-bg: #292524;                    // warm-800
+  --index-bg: rgba(41, 37, 36, 0.8);       // warm-800/80
+  --index-hover: rgba(154, 52, 18, 0.3);   // orange-900/30
 }
 
 // 动画
@@ -754,23 +770,22 @@ async function handleDeleteGroup() { try { await messageBox.confirm({title:'提
   overflow: hidden;
 }
 
-// A-Z索引条
+// A-Z索引条 (设计稿: 带模糊背景)
 .index-bar {
   position: fixed;
-  right: 16rpx;
+  right: 20rpx;  // 设计稿: right-[20px] = 40rpx/2
   top: 50%;
   transform: translateY(-50%);
-  background: rgba(0, 0, 0, 0.04);
+  background: var(--index-bg);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
   border-radius: 20rpx;
   padding: 16rpx 8rpx;
   z-index: 101;
-
-  .dark & {
-    background: rgba(255, 255, 255, 0.08);
-  }
+  border: 1rpx solid var(--border-color);
 
   .index-item {
-    font-size: 20rpx;
+    font-size: 20rpx;  // 设计稿: text-[10px]
     font-weight: 600;
     width: 32rpx;
     height: 32rpx;
@@ -783,11 +798,7 @@ async function handleDeleteGroup() { try { await messageBox.confirm({title:'提
 
     &:active {
       color: var(--color-brand);
-      background: rgba(79, 70, 229, 0.1);
-
-      .dark & {
-        background: rgba(249, 115, 22, 0.15);
-      }
+      background: var(--index-hover);
     }
   }
 }
diff --git a/src/pages/index/index.vue b/src/pages/index/index.vue
index 37f0a08..82e200b 100644
--- a/src/pages/index/index.vue
+++ b/src/pages/index/index.vue
@@ -9,15 +9,12 @@
           <!-- 左侧: 头像 + 标题 -->
           <view class="nav-left" @click="openDrawer">
             <view class="avatar-container">
-              <image
-                v-if="user?.avatar"
-                class="nav-avatar"
-                :src="resolveImageUrl(user.avatar)"
-                mode="aspectFill"
+              <app-avatar
+                :src="user?.avatar"
+                :name="user?.name"
+                :size="72"
+                radius="16rpx"
               />
-              <view v-else class="nav-avatar avatar-placeholder">
-                {{ (user?.name || '?').charAt(0) }}
-              </view>
               <view class="online-dot" v-if="!loading"></view>
             </view>
             <text class="nav-title">消息</text>
@@ -307,20 +304,21 @@ async function logout() {
 
 <style lang="scss" scoped>
 // ==========================================
-// 页面容器 - 浅色模式变量
+// 页面容器 - 浅色模式变量 (与设计稿完全一致)
 // ==========================================
 .page-container {
-  --bg-page: #ffffff;
-  --bg-surface: #ffffff;
-  --bg-hover: #f5f5f5;
-  --bg-top: rgba(0, 0, 0, 0.02);
-  --text-primary: #1f2937;
-  --text-secondary: #6b7280;
-  --text-tertiary: #9ca3af;
+  --bg-page: #ffffff;           // 页面背景
+  --bg-surface: #ffffff;        // 卡片背景
+  --bg-hover: #f9fafb;          // gray-50 (设计稿: 会话项悬浮)
+  --bg-top: rgba(249, 250, 251, 0.7); // gray-50/70 (设计稿: 会话置顶背景)
+  --text-primary: #1f2937;      // gray-900 (设计稿: 会话名称)
+  --text-secondary: #6b7280;    // gray-500 (设计稿: 会话消息)
+  --text-tertiary: #9ca3af;     // gray-400 (设计稿: 会话时间)
+  --text-placeholder: #9ca3af;  // gray-400 (设计稿: 搜索placeholder)
   --border-color: rgba(0, 0, 0, 0.05);
   --nav-bg: rgba(255, 255, 255, 0.9);
-  --color-brand: #4F46E5;
-  --search-bg: #f1f1f1;
+  --color-brand: #4F46E5;       // indigo-600
+  --search-bg: #f1f1f1;         // gray-100
   --search-focus: rgba(79, 70, 229, 0.1);
 
   min-height: 100vh;
@@ -329,20 +327,21 @@ async function logout() {
 }
 
 // ==========================================
-// 深色模式 - Warm Stone 暖色调
+// 深色模式 - Warm Stone 暖色调 (与设计稿完全一致)
 // ==========================================
 .page-container.dark {
-  --bg-page: #1c1917;
-  --bg-surface: #1c1917;
-  --bg-hover: #44403c;
-  --bg-top: rgba(255, 255, 255, 0.03);
-  --text-primary: #f5f5f4;
-  --text-secondary: #e7e5e4;
-  --text-tertiary: #78716c;
-  --border-color: #44403c;
+  --bg-page: #1c1917;           // warm-900
+  --bg-surface: #1c1917;        // warm-900
+  --bg-hover: #292524;          // warm-800 (设计稿: 会话项悬浮)
+  --bg-top: rgba(41, 37, 36, 0.3); // warm-800/30 (设计稿: 会话置顶背景)
+  --text-primary: #f5f5f4;      // warm-100 (设计稿: 会话名称)
+  --text-secondary: #a8a29e;    // warm-400 (设计稿: 会话消息)
+  --text-tertiary: #78716c;     // warm-500 (设计稿: 会话时间)
+  --text-placeholder: #57534e;  // warm-600 (设计稿: 搜索placeholder)
+  --border-color: #44403c;      // warm-700
   --nav-bg: rgba(28, 25, 23, 0.9);
-  --color-brand: #f97316;
-  --search-bg: #292524;
+  --color-brand: #f97316;       // orange-500
+  --search-bg: #292524;         // warm-800
   --search-focus: rgba(249, 115, 22, 0.1);
 }
 
@@ -527,7 +526,7 @@ async function logout() {
   margin-left: 16rpx;
 
   &::placeholder {
-    color: var(--text-tertiary);
+    color: var(--text-placeholder);
   }
 }
 
diff --git a/src/pages/moment/detail.vue b/src/pages/moment/detail.vue
index 7ab6171..6064b0d 100644
--- a/src/pages/moment/detail.vue
+++ b/src/pages/moment/detail.vue
@@ -11,15 +11,12 @@
       <view class="moment-content">
         <!-- 用户信息 -->
         <view class="header">
-          <image
-            v-if="moment.user?.avatar"
-            class="avatar"
-            :src="resolveImageUrl(moment.user.avatar)"
-            mode="aspectFill"
+          <app-avatar
+            :src="moment.user?.avatar"
+            :name="moment.user?.name"
+            :size="80"
+            round
           />
-          <view v-else class="avatar avatar-placeholder">
-            {{ moment.user?.name?.charAt(0) || '?' }}
-          </view>
           <view class="user-info">
             <text class="name">{{ moment.user?.name || '未知' }}</text>
             <text class="time">{{ formatTime(moment.created_at) }}</text>
@@ -79,15 +76,12 @@
             :key="comment.id"
             class="comment-item"
           >
-            <image
-              v-if="comment.user?.avatar"
-              class="avatar"
-              :src="resolveImageUrl(comment.user.avatar)"
-              mode="aspectFill"
+            <app-avatar
+              :src="comment.user?.avatar"
+              :name="comment.user?.name"
+              :size="64"
+              round
             />
-            <view v-else class="avatar avatar-placeholder">
-              {{ comment.user?.name?.charAt(0) || '?' }}
-            </view>
             <view class="comment-content">
               <view class="comment-header">
                 <text class="name">{{ comment.user?.name || '未知' }}</text>
diff --git a/src/pages/moment/index.vue b/src/pages/moment/index.vue
index 7f0564c..e300a35 100644
--- a/src/pages/moment/index.vue
+++ b/src/pages/moment/index.vue
@@ -308,30 +308,32 @@ function getImageSize(moment: Moment): string {
 </script>
 
 <style lang="scss" scoped>
-// 页面容器 - 浅色模式
+// 页面容器 - 浅色模式 (与设计稿完全一致)
 .moments-page {
-  --bg-page: #ffffff;
-  --bg-nav-rgb: 255, 255, 255;
-  --bg-detail: #f7f7f7;
-  --text-main: #1d1d1f;
-  --text-blue: #576b95;
-  --color-brand: #4F46E5;
-  --border-color: rgba(0, 0, 0, 0.05);
+  --bg-page: #ffffff;                    // 页面背景
+  --bg-nav-rgb: 255, 255, 255;           // 导航栏背景 RGB
+  --bg-detail: #f3f4f6;                  // gray-100 (评论区背景)
+  --text-main: #1f2937;                  // gray-900 (动态内容)
+  --text-secondary: #9ca3af;             // gray-400 (时间)
+  --text-blue: #576b95;                  // 链接色 (作者名、点赞、评论)
+  --color-brand: #4F46E5;                // indigo-600
+  --border-color: #f3f4f6;               // gray-100
 
   height: 100vh;
   background: var(--bg-page);
   position: relative;
 }
 
-// 深色模式 - Warm Stone
+// 深色模式 - Warm Stone (与设计稿完全一致)
 .moments-page.dark {
-  --bg-page: #1c1917;
-  --bg-nav-rgb: 28, 25, 23;
-  --bg-detail: #292524;
-  --text-main: #f5f5f4;
-  --text-blue: #7e95c5;
-  --color-brand: #f97316;
-  --border-color: rgba(255, 255, 255, 0.1);
+  --bg-page: #1c1917;                    // warm-900
+  --bg-nav-rgb: 28, 25, 23;              // warm-900 RGB
+  --bg-detail: rgba(41, 37, 36, 0.6);    // warm-800/60 (评论区背景)
+  --text-main: #f5f5f4;                  // warm-100 (动态内容)
+  --text-secondary: #78716c;             // warm-500 (时间)
+  --text-blue: #7e95c5;                  // blue-400 (链接色)
+  --color-brand: #f97316;                // orange-500
+  --border-color: #44403c;               // warm-700
 }
 
 // 动画
@@ -577,8 +579,7 @@ function getImageSize(moment: Moment): string {
 
   .time {
     font-size: 24rpx;
-    color: var(--text-blue);
-    opacity: 0.6;
+    color: var(--text-secondary);
   }
 
   .action-btn {
@@ -619,7 +620,11 @@ function getImageSize(moment: Moment): string {
     height: 0;
     border-left: 12rpx solid transparent;
     border-right: 12rpx solid transparent;
-    border-bottom: 12rpx solid var(--bg-detail);
+    border-bottom: 12rpx solid #f3f4f6; // gray-100
+    
+    .dark & {
+      border-bottom-color: #292524; // 设计稿: warm-800
+    }
   }
 
   .likes-list {
diff --git a/src/pages/moment/notify.vue b/src/pages/moment/notify.vue
index a469212..a34ced0 100644
--- a/src/pages/moment/notify.vue
+++ b/src/pages/moment/notify.vue
@@ -23,16 +23,12 @@
         :class="{ unread: !item.is_read }"
         @click="goMomentDetail(item)"
       >
-        <wd-img
-          v-if="item.from_user?.avatar"
-          :src="resolveImageUrl(item.from_user.avatar)"
-          width="80rpx"
-          height="80rpx"
+        <app-avatar
+          :src="item.from_user?.avatar"
+          :name="item.from_user?.name"
+          :size="80"
           radius="8rpx"
         />
-        <view v-else class="avatar-placeholder" :style="{ background: generateColor(item.from_user?.name || '') }">
-          {{ item.from_user?.name?.charAt(0) || '?' }}
-        </view>
 
         <view class="notify-content">
           <view class="notify-header">
diff --git a/src/pages/profile/edit.vue b/src/pages/profile/edit.vue
index f7aa91b..ea948f4 100644
--- a/src/pages/profile/edit.vue
+++ b/src/pages/profile/edit.vue
@@ -49,8 +49,12 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
 import { useTheme } from '@/composables/useTheme'
+import { useAuthStore } from '@/stores'
+import * as userApi from '@/api/modules/user'
 
 const { isDark } = useTheme()
+const authStore = useAuthStore()
+const saving = ref(false)
 const field = ref('')
 const value = ref('')
 const placeholder = ref('')
@@ -89,13 +93,42 @@ onMounted(() => {
   }
 })
 
-function save() {
+async function save() {
   if (!value.value.trim()) {
     uni.showToast({ title: '内容不能为空', icon: 'none' })
     return
   }
-  uni.showToast({ title: '保存成功', icon: 'success' })
-  setTimeout(() => { uni.navigateBack() }, 1500)
+  if (saving.value) return
+  saving.value = true
+  
+  try {
+    const userId = authStore.user?.id
+    if (!userId) {
+      uni.showToast({ title: '用户信息异常', icon: 'none' })
+      return
+    }
+    
+    // 构建更新数据
+    const updates: Record<string, string> = {}
+    updates[field.value] = value.value.trim()
+    
+    // 调用 API 更新用户信息
+    const updatedUser = await userApi.updateUser({ id: userId, updates })
+    
+    // 更新本地 store
+    if (authStore.user) {
+      const newUserInfo = { ...authStore.user, ...updates }
+      authStore.updateUserInfo(newUserInfo)
+    }
+    
+    uni.showToast({ title: '保存成功', icon: 'success' })
+    setTimeout(() => { uni.navigateBack() }, 1500)
+  } catch (error: any) {
+    console.error('保存失败:', error)
+    uni.showToast({ title: error.message || '保存失败', icon: 'none' })
+  } finally {
+    saving.value = false
+  }
 }
 </script>
 
diff --git a/src/pages/profile/index.vue b/src/pages/profile/index.vue
index 0ac9194..28ef615 100644
--- a/src/pages/profile/index.vue
+++ b/src/pages/profile/index.vue
@@ -5,12 +5,7 @@
       <!-- 头部大卡片 -->
       <view class="profile-header">
         <view class="header-top">
-          <view class="back-btn" @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>
-          <text class="page-title">个人资料</text>
+          <text class="page-title">我的</text>
           <view class="icon-btn" @click="uni.navigateTo({ url: '/pages/settings/index' })">
             <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="3"/>
@@ -93,6 +88,7 @@
         </view>
       </view>
 
+      <app-tab-bar current="profile" />
     </view>
   </wd-config-provider>
 </template>
@@ -102,11 +98,11 @@ import { computed } from 'vue'
 import { useTheme } from '@/composables/useTheme'
 import { useAuthStore } from '@/stores'
 import AppAvatar from '@/components/common/AppAvatar.vue'
+import AppTabBar from '@/components/common/AppTabBar.vue'
 
 const { isDark } = useTheme()
 const authStore = useAuthStore()
 const userInfo = computed(() => authStore.userInfo || {})
-function goBack() { uni.navigateBack() }
 function goProfileEdit() { uni.navigateTo({ url: '/pages/profile/edit' }) }
 </script>
 
@@ -123,7 +119,7 @@ function goProfileEdit() { uni.navigateTo({ url: '/pages/profile/edit' }) }
 
   min-height: 100vh;
   background: var(--bg-page);
-  padding-bottom: 80rpx;
+  padding-bottom: 200rpx;
 }
 
 // 深色模式 - Warm Stone
@@ -169,30 +165,11 @@ function goProfileEdit() { uni.navigateTo({ url: '/pages/profile/edit' }) }
   align-items: center;
   margin-bottom: 48rpx;
 
-  .back-btn {
-    width: 72rpx;
-    height: 72rpx;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 50%;
-    transition: all 0.15s;
-
-    svg {
-      width: 40rpx;
-      height: 40rpx;
-      color: var(--text-primary);
-    }
-
-    &:active {
-      background: var(--border-color);
-    }
-  }
-
   .page-title {
-    font-size: 36rpx;
+    font-size: 42rpx;
     font-weight: 700;
     color: var(--text-primary);
+    letter-spacing: -0.5rpx;
   }
 
   .icon-btn {
diff --git a/src/pages/search/index.vue b/src/pages/search/index.vue
index f55e671..2790964 100644
--- a/src/pages/search/index.vue
+++ b/src/pages/search/index.vue
@@ -165,7 +165,7 @@ function clearHistory() {
 function goBack() { uni.navigateBack() }
 
 function goDetail(item: User) {
-  uni.navigateTo({ url: `/pages/contact/detail?id=${item.id}` })
+  uni.navigateTo({ url: `/pages/contact/detail?userId=${item.id}` })
 }
 
 // 高亮匹配文字
diff --git a/src/pages/settings/index.vue b/src/pages/settings/index.vue
index 31f8e62..30ff53e 100644
--- a/src/pages/settings/index.vue
+++ b/src/pages/settings/index.vue
@@ -185,27 +185,27 @@ function handleClearCache() {
 </script>
 
 <style lang="scss" scoped>
-// 页面容器 - 浅色模式
+// 页面容器 - 浅色模式 (与设计稿完全一致)
 .settings-page {
-  --bg-page: #f7f8fa;
-  --bg-surface: #ffffff;
-  --text-primary: #1d1d1f;
-  --text-secondary: #6b7280;
-  --text-tertiary: #9ca3af;
-  --border-color: rgba(0, 0, 0, 0.05);
+  --bg-page: #F5F7FA;                   // 设计稿: bg-[#F5F7FA]
+  --bg-surface: #ffffff;                 // 卡片背景
+  --text-primary: #1f2937;               // gray-800 (列表项文字)
+  --text-secondary: #9ca3af;             // gray-400 (分组标题)
+  --text-tertiary: #9ca3af;              // gray-400 (值/箭头)
+  --border-color: #f9fafb;               // gray-50
 
   min-height: 100vh;
   background: var(--bg-page);
 }
 
-// 深色模式 - Warm Stone
+// 深色模式 - Warm Stone (与设计稿完全一致)
 .settings-page.dark {
-  --bg-page: #1c1917;
-  --bg-surface: #292524;
-  --text-primary: #f5f5f4;
-  --text-secondary: #e7e5e4;
-  --text-tertiary: #78716c;
-  --border-color: rgba(255, 255, 255, 0.1);
+  --bg-page: #121212;                    // 设计稿: bg-[#121212]
+  --bg-surface: #1c1917;                 // warm-900 (卡片背景)
+  --text-primary: #e7e5e4;               // warm-200 (列表项文字)
+  --text-secondary: #78716c;             // warm-500 (分组标题)
+  --text-tertiary: #9ca3af;              // gray-400 (值/箭头)
+  --border-color: rgba(41, 37, 36, 0.5); // warm-800/50
 }
 
 // 动画
@@ -300,7 +300,11 @@ function handleClearCache() {
   }
 
   &:active {
-    background: var(--border-color);
+    background: #f9fafb; // gray-50
+    
+    .dark & {
+      background: #292524; // warm-800
+    }
   }
 
   .icon-box {