vue-chat-kit 0.1.1 → 0.1.3

package/src/components/ChatWindow.vue

@@ -8,38 +8,35 @@
     @closed="handleClosed"
     @open="handleOpen"
   >
-    <div class="chat-container flex h-[680px] bg-white overflow-hidden">
+    <div class="chat-container">
       <!-- 左侧图标导航栏 -->
-      <div class="w-16 theme-white flex flex-col items-center gap-2 bg-gray-50 border-r">
-        <div class="mb-4 cursor-pointer mt-4" @click="handleAvatarClick">
-          <img :src="myAvatar" alt="头像" class="w-10 h-10 rounded-full border-2 border-gray-200" />
+      <div class="sidebar-nav">
+        <div class="sidebar-avatar" @click="handleAvatarClick">
+          <img :src="myAvatar" alt="头像" class="avatar-img" />
         </div>
         
         <div
           v-for="tab in navTabs"
           :key="tab.id"
           :class="[
-            'w-10 h-10 flex items-center justify-center cursor-pointer rounded-lg transition-all relative',
-            currentNavTab === tab.id ? 'bg-green-50 text-green-600' : 'text-gray-500 hover:bg-gray-100'
+            'nav-item',
+            currentNavTab === tab.id ? 'nav-item-active' : 'nav-item-inactive'
           ]"
           @click="currentNavTab = tab.id"
         >
           <el-icon :size="24">
             <component :is="tab.icon" />
           </el-icon>
-          <span
-            v-if="tab.badge"
-            class="absolute -top-1 -right-1 w-4 h-4 bg-red-500 rounded-full text-xs text-white flex items-center justify-center"
-          >
+          <span v-if="tab.badge" class="nav-badge">
             {{ tab.badge > 99 ? '99+' : tab.badge }}
           </span>
         </div>
         
-        <div class="flex-1"></div>
+        <div class="nav-spacer"></div>
         
         <div
           v-if="config.modules.settings"
-          class="w-10 h-10 flex items-center justify-center cursor-pointer rounded-lg hover:bg-gray-100 transition-all mb-4 text-gray-500"
+          class="nav-item nav-item-inactive"
           @click="showSettingsDialog = true"
           title="设置"
         >
@@ -48,9 +45,9 @@
       </div>
 
       <!-- 中间内容栏 -->
-      <div class="w-72 bg-[#f5f5f5] border-r border-gray-200 flex flex-col">
+      <div class="content-panel">
         <!-- 搜索栏 -->
-        <div class="p-3">
+        <div class="search-bar">
           <el-input
             v-model="searchText"
             placeholder="搜索"
@@ -59,40 +56,40 @@
         </div>
 
         <!-- 内容区域 -->
-        <div class="flex-1 overflow-y-auto min-h-0">
+        <div class="content-scroll">
           <!-- 聊天列表 -->
           <div v-if="currentNavTab === 'chat'">
             <div
               v-for="chat in filteredUsers"
               :key="chat.id"
               :class="[
-                'flex items-center p-3 cursor-pointer hover:bg-[#e5e5e5] transition-colors',
-                currentChatId === chat.id ? 'bg-[#d6d6d6]' : ''
+                'chat-item',
+                currentChatId === chat.id ? 'chat-item-active' : ''
               ]"
               @click="selectChat(chat)"
               @contextmenu.prevent.stop="showContextMenu($event, chat)"
             >
-              <div class="relative flex-shrink-0">
+              <div class="friend-avatar-wrapper">
                 <img
                   :src="chat.avatar"
                   :alt="chat.name"
-                  class="w-11 h-11 rounded-full object-cover"
+                  class="friend-avatar"
                 />
                 <span
                   v-if="chat.online"
-                  class="absolute bottom-0 right-0 w-3 h-3 bg-green-500 rounded-full border-2 border-white"
+                  class="online-indicator"
                 ></span>
               </div>
-              <div class="ml-3 flex-1 overflow-hidden">
-                <div class="flex justify-between items-center">
-                  <span class="font-medium text-gray-800 text-sm">{{ chat.name }}</span>
-                  <span class="text-xs text-gray-400">{{ formatLastTime(chat.lastTime) }}</span>
+              <div class="friend-info">
+                <div class="friend-header">
+                  <span class="friend-name">{{ chat.name }}</span>
+                  <span class="last-time">{{ formatLastTime(chat.lastTime) }}</span>
                 </div>
-                <div class="flex justify-between items-center mt-1">
-                  <span class="text-xs text-gray-500 truncate pr-2">{{ chat.lastMsg }}</span>
+                <div class="friend-preview">
+                  <span class="last-msg">{{ chat.lastMsg }}</span>
                   <span
                     v-if="chat.unread > 0"
-                    class="bg-red-500 text-white text-xs rounded-full px-1.5 py-0.5 min-w-[18px] text-center"
+                    class="unread-badge"
                   >
                     {{ chat.unread > 99 ? '99+' : chat.unread }}
                   </span>
@@ -103,40 +100,38 @@
 
           <!-- 好友列表 -->
           <div v-if="currentNavTab === 'friends' && config.modules.friends">
-            <div class="p-3">
+            <div class="add-friend-section">
               <div
-                class="flex items-center gap-2 p-2 rounded-lg cursor-pointer hover:bg-[#e5e5e5]"
+                class="add-friend-btn"
                 @click="openAddFriendDialog"
               >
-                <div
-                  class="w-11 h-11 bg-green-500 rounded-lg flex items-center justify-center"
-                >
+                <div class="add-friend-icon">
                   <el-icon class="text-white" :size="20"><Plus /></el-icon>
                 </div>
-                <span class="text-sm text-gray-800">添加好友</span>
+                <span class="add-friend-text">添加好友</span>
               </div>
             </div>
             <div
               v-for="friend in filteredFriendList"
               :key="friend.id"
-              class="flex items-center p-3 cursor-pointer hover:bg-[#e5e5e5] transition-colors"
+              class="chat-item"
               @click="selectFriend(friend)"
             >
-              <div class="relative flex-shrink-0">
+              <div class="friend-avatar-wrapper">
                 <img
                   :src="friend.avatar"
                   :alt="friend.name"
-                  class="w-11 h-11 rounded-full object-cover"
+                  class="friend-avatar"
                 />
                 <span
                   :class="[
-                    'absolute bottom-0 right-0 w-3 h-3 rounded-full border-2 border-white',
-                    friend.online ? 'bg-green-500' : 'bg-gray-400'
+                    'online-indicator',
+                    friend.online ? 'online' : 'offline'
                   ]"
                 ></span>
               </div>
-              <div class="ml-3">
-                <span class="font-medium text-gray-800 text-sm">{{ friend.name }}</span>
+              <div class="friend-info">
+                <span class="friend-name">{{ friend.name }}</span>
               </div>
             </div>
           </div>
@@ -152,17 +147,17 @@
               v-else
               v-for="apply in friendApplyList"
               :key="apply.applyUser || apply.id"
-              class="flex items-center justify-between p-3 hover:bg-[#e5e5e5]"
+              class="friend-request-item"
             >
-              <div class="flex items-center">
+              <div class="request-info">
                 <img
                   :src="`https://api.dicebear.com/7.x/avataaars/svg?seed=${apply.applyUser}`"
                   :alt="apply.applyUser"
-                  class="w-11 h-11 rounded-full object-cover"
+                  class="request-avatar"
                 />
-                <div class="ml-3">
-                  <div class="font-medium text-gray-800 text-sm">{{ apply.applyUser }}</div>
-                  <div class="text-xs text-gray-500 mt-1">请求添加你为好友</div>
+                <div class="request-details">
+                  <div class="request-username">{{ apply.applyUser }}</div>
+                  <div class="request-desc">请求添加你为好友</div>
                 </div>
               </div>
               <el-button
@@ -176,58 +171,54 @@
       </div>
 
       <!-- 右侧聊天/详情区域 -->
-      <div class="flex-1 flex flex-col min-w-0 bg-white">
+      <div class="chat-area">
         <!-- 好友信息展示区域 -->
-        <div v-if="currentSelectedFriend && !currentChat" class="flex-1 flex flex-col min-h-0">
-          <div
-            class="flex-1 flex flex-col items-center justify-center p-8 bg-[#f5f5f5]"
-          >
-            <img
-              :src="currentSelectedFriend.avatar"
-              :alt="currentSelectedFriend.name"
-              class="w-24 h-24 rounded-full object-cover mb-6"
-            />
-            <div class="text-xl font-medium text-gray-800 mb-2">{{ currentSelectedFriend.name }}</div>
-            <div class="flex items-center gap-2 mb-8">
-              <span
-                :class="[
-                  'w-2 h-2 rounded-full',
-                  currentSelectedFriend.online ? 'bg-green-500' : 'bg-gray-400'
-                ]"
-              ></span>
-              <span class="text-sm text-gray-500">{{ currentSelectedFriend.online ? '在线' : '离线' }}</span>
-            </div>
-            <el-button
-              type="primary"
-              size="large"
-              @click="handleStartChat"
-              class="w-40"
-            >
-              <el-icon><ChatDotRound /></el-icon>
-              <span>发消息</span>
-            </el-button>
+        <div v-if="currentSelectedFriend && !currentChat" class="friend-profile">
+          <img
+            :src="currentSelectedFriend.avatar"
+            :alt="currentSelectedFriend.name"
+            class="profile-avatar"
+          />
+          <div class="profile-name">{{ currentSelectedFriend.name }}</div>
+          <div class="profile-status">
+            <span
+              :class="[
+                'status-dot',
+                currentSelectedFriend.online ? 'status-online' : 'status-offline'
+              ]"
+            ></span>
+            <span>{{ currentSelectedFriend.online ? '在线' : '离线' }}</span>
           </div>
+          <el-button
+            type="primary"
+            size="large"
+            @click="handleStartChat"
+            class="start-chat-btn"
+          >
+            <el-icon><ChatDotRound /></el-icon>
+            <span>发消息</span>
+          </el-button>
         </div>
         
         <!-- 聊天窗口 -->
-        <div v-if="currentChat" class="flex-1 flex flex-col min-h-0">
+        <div v-if="currentChat" class="chat-window">
           <!-- 顶部标题栏 -->
-          <div class="h-14 border-b border-gray-200 flex items-center justify-between px-4 bg-white">
-            <div class="flex items-center gap-3">
-              <span class="font-medium text-gray-800">{{ currentChat.name }}</span>
+          <div class="chat-header">
+            <div class="chat-title">
+              <span class="chat-name">{{ currentChat.name }}</span>
               <span
                 :class="[
-                  'text-xs px-2 py-0.5 rounded',
-                  currentChat.online ? 'bg-green-100 text-green-600' : 'bg-gray-100 text-gray-500'
+                  'status-badge',
+                  currentChat.online ? 'status-badge-online' : 'status-badge-offline'
                 ]"
               >
                 {{ currentChat.online ? '在线' : '离线' }}
               </span>
             </div>
-            <div class="flex items-center gap-3 text-gray-500">
-              <el-icon class="cursor-pointer hover:text-gray-700"><Search /></el-icon>
+            <div class="chat-actions">
+              <el-icon class="action-icon"><Search /></el-icon>
               <el-icon
-                class="cursor-pointer hover:text-gray-700"
+                class="action-icon"
                 @click="showChatDetail = !showChatDetail"
               ><MoreFilled /></el-icon>
             </div>
@@ -236,40 +227,40 @@
           <!-- 聊天消息区域 -->
           <div
             ref="messagesContainer"
-            class="flex-1 overflow-y-auto p-4 bg-[#f5f5f5] min-h-0 message-list"
+            class="messages-container"
           >
             <div
               v-for="(msg, index) in currentMessages"
               :key="index"
               :class="[
-                'flex mb-6 items-start',
-                msg.isSelf ? 'flex-row-reverse' : 'flex-row'
+                'message-wrapper',
+                msg.isSelf ? 'message-self' : 'message-other'
               ]"
             >
               <!-- 头像 -->
-              <div class="flex-shrink-0">
+              <div class="message-avatar">
                 <img
                   :src="msg.isSelf ? myAvatar : currentChat.avatar"
-                  class="w-10 h-10 rounded-lg object-cover"
+                  class="avatar-sm"
                 />
               </div>
 
               <!-- 消息内容 -->
               <div
                 :class="[
-                  'flex flex-col max-w-[75%]',
-                  msg.isSelf ? 'mr-3 items-end' : 'ml-3 items-start'
+                  'message-content-wrapper',
+                  msg.isSelf ? 'content-self' : 'content-other'
                 ]"
               >
-                <div v-if="!msg.isSelf" class="text-xs text-gray-500 mb-1 ml-1">{{ currentChat.name }}</div>
+                <div v-if="!msg.isSelf" class="sender-name">{{ currentChat.name }}</div>
 
-                <div class="relative group">
+                <div class="message-bubble-wrapper">
                   <!-- 文本消息 -->
                   <div
                     v-if="msg.type === 'text'"
                     :class="[
-                      'px-3 py-2 text-sm break-all whitespace-pre-wrap rounded-lg shadow-sm',
-                      msg.isSelf ? 'bg-[#95ec69] text-gray-800 self-end message-bubble-self' : 'bg-white text-gray-800 message-bubble-other'
+                      'message-bubble',
+                      msg.isSelf ? 'bubble-self' : 'bubble-other'
                     ]"
                   >
                     {{ msg.text }}
@@ -279,65 +270,38 @@
                   <div
                     v-else-if="msg.type === 'file' && msg.fileType === 'image'"
                     :class="[
-                      'rounded-lg relative shadow-sm cursor-pointer overflow-hidden max-w-[300px]',
-                      msg.isSelf ? 'self-end' : 'self-start'
+                      'message-bubble',
+                      'image-bubble',
+                      msg.isSelf ? 'bubble-self' : 'bubble-other'
                     ]"
                     @click="openFile(msg.fileUrl)"
                   >
                     <img
                       :src="msg.fileUrl"
                       :alt="msg.fileName"
-                      class="w-full h-auto block"
+                      class="message-image"
                       @error="handleImageError"
                     />
-                    <div
-                      v-if="msg.fileName || msg.fileSize"
-                      :class="[
-                        msg.isSelf ? 'bg-[#95ec69] text-gray-700' : 'bg-white text-gray-500'
-                      ]"
-                    >
-                      <div class="absolute left-1 bottom-0 text-white" v-if="msg.fileSize">{{ formatFileSize(msg.fileSize) }}</div>
-                    </div>
+                    <div v-if="msg.fileSize" class="image-size">{{ formatFileSize(msg.fileSize) }}</div>
                   </div>
 
                   <!-- 文档文件消息 -->
                   <div
                     v-else-if="msg.type === 'file'"
                     :class="[
-                      'rounded-lg shadow-sm cursor-pointer overflow-hidden min-w-[200px]',
-                      msg.isSelf ? 'self-end message-bubble-self' : 'message-bubble-other'
+                      'message-bubble',
+                      'file-bubble',
+                      msg.isSelf ? 'bubble-self' : 'bubble-other'
                     ]"
                     @click="openFile(msg.fileUrl)"
                   >
-                    <div
-                      :class="[
-                        'flex items-center gap-3 px-4 py-3',
-                        msg.isSelf ? 'bg-[#95ec69]' : 'bg-white'
-                      ]"
-                    >
-                      <!-- 文件图标 -->
-                      <div class="w-10 h-10 flex items-center justify-center rounded-lg flex-shrink-0">
-                        <el-icon :size="28" :class="msg.isSelf ? 'text-gray-700' : 'text-gray-500'">
-                          <Document />
-                        </el-icon>
+                    <div class="file-content">
+                      <div class="file-icon">
+                        <el-icon :size="28"><Document /></el-icon>
                       </div>
-
-                      <!-- 文件信息 -->
-                      <div class="flex-1 min-w-0">
-                        <div
-                          :class="[
-                            'truncate text-sm font-medium leading-tight',
-                            msg.isSelf ? 'text-gray-800' : 'text-gray-800'
-                          ]"
-                        >
-                          {{ msg.fileName || msg.text }}
-                        </div>
-                        <div
-                          :class="[
-                            'text-xs mt-1 flex items-center gap-2',
-                            msg.isSelf ? 'text-gray-600' : 'text-gray-500'
-                          ]"
-                        >
+                      <div class="file-info">
+                        <div class="file-name">{{ msg.fileName || msg.text }}</div>
+                        <div class="file-meta">
                           <el-icon :size="12"><Download /></el-icon>
                           <span>点击下载</span>
                           <span v-if="msg.fileSize">· {{ formatFileSize(msg.fileSize) }}</span>
@@ -349,8 +313,8 @@
                   <!-- 时间显示在气泡下方 -->
                   <div
                     :class="[
-                      'text-[10px] text-gray-400 mt-1',
-                      msg.isSelf ? 'text-right' : 'text-left'
+                      'message-time',
+                      msg.isSelf ? 'time-right' : 'time-left'
                     ]"
                   >
                     {{ formatTime(msg.time) }}
@@ -361,30 +325,30 @@
           </div>
 
           <!-- 底部输入区域 -->
-          <div class="bg-white border-t border-gray-200">
+          <div class="input-area">
             <!-- 待发送文件预览 -->
             <div
               v-if="pendingFiles.length > 0"
-              class="px-3 py-2 border-b border-gray-100 flex flex-wrap gap-2"
+              class="pending-files"
             >
               <div
                 v-for="(file, index) in pendingFiles"
                 :key="file.id"
-                class="relative group"
+                class="pending-file"
               >
                 <!-- 图片预览 -->
                 <div
                   v-if="file.isImage"
-                  class="relative w-20 h-20 rounded-lg overflow-hidden border border-gray-200"
+                  class="pending-image-wrapper"
                 >
                   <img
                     :src="file.previewUrl"
                     :alt="file.name"
-                    class="w-full h-full object-cover"
+                    class="pending-image"
                   />
                   <button
                     @click="removePendingFile(index)"
-                    class="absolute top-1 right-1 w-5 h-5 bg-black/50 text-white rounded-full flex items-center justify-center hover:bg-black/70 transition-colors text-xs"
+                    class="remove-file-btn"
                   >
                     ×
                   </button>
@@ -392,13 +356,13 @@
                 <!-- 非图片文件预览 -->
                 <div
                   v-else
-                  class="relative w-24 h-20 rounded-lg border border-gray-200 bg-gray-50 flex flex-col items-center justify-center p-1"
+                  class="pending-file-wrapper"
                 >
-                  <el-icon class="text-gray-400 text-2xl mb-1"><Folder /></el-icon>
-                  <span class="text-xs text-gray-500 truncate w-full text-center px-1">{{ file.name }}</span>
+                  <el-icon class="pending-file-icon"><Folder /></el-icon>
+                  <span class="pending-file-name">{{ file.name }}</span>
                   <button
                     @click="removePendingFile(index)"
-                    class="absolute top-1 right-1 w-5 h-5 bg-black/50 text-white rounded-full flex items-center justify-center hover:bg-black/70 transition-colors text-xs"
+                    class="remove-file-btn"
                   >
                     ×
                   </button>
@@ -406,30 +370,30 @@
               </div>
             </div>
 
-            <div v-if="config.modules.fileUpload" class="flex items-center p-3 gap-2">
-              <el-icon class="text-gray-500 cursor-pointer hover:text-gray-700"><ChatDotRound /></el-icon>
+            <div v-if="config.modules.fileUpload" class="input-actions">
+              <el-icon class="action-icon"><ChatDotRound /></el-icon>
               <el-icon
-                class="text-gray-500 cursor-pointer hover:text-gray-700"
+                class="action-icon"
                 @click="triggerFileSelect"
               ><Folder /></el-icon>
-              <el-icon class="text-gray-500 cursor-pointer hover:text-gray-700"><Picture /></el-icon>
+              <el-icon class="action-icon"><Picture /></el-icon>
             </div>
-            <div class="px-3 pb-3">
+            <div class="input-wrapper">
               <textarea
                 v-model="inputText"
                 @keydown.enter.prevent="handleSend"
                 @paste="handlePaste"
                 placeholder="输入消息或粘贴文件..."
-                class="w-full resize-none border-0 outline-none text-sm h-[80px]"
+                class="message-input"
                 rows="3"
               />
             </div>
-            <div class="flex justify-end px-3 pb-3">
+            <div class="send-btn-wrapper">
               <el-button
                 type="primary"
                 :disabled="!inputText.trim() && pendingFiles.length === 0"
                 @click="handleSend"
-                class="bg-[#07c160] hover:bg-[#06ad56] border-0 text-sm px-6"
+                class="send-btn"
               >
                 发送
               </el-button>
@@ -440,7 +404,7 @@
               ref="fileInputRef"
               type="file"
               multiple
-              class="hidden"
+              class="hidden-file-input"
               @change="handleFileSelect"
             />
           </div>
@@ -449,10 +413,10 @@
         <!-- 空状态 -->
         <div
           v-else-if="!currentSelectedFriend"
-          class="flex-1 flex items-center justify-center flex-col bg-[#f5f5f5]"
+          class="empty-state"
         >
-          <el-icon :size="64" class="text-gray-300 mb-2"><ChatLineRound /></el-icon>
-          <div class="text-gray-400">
+          <el-icon :size="64" class="empty-icon"><ChatLineRound /></el-icon>
+          <div class="empty-text">
             {{ currentNavTab === 'apply' ? '在左侧选择好友申请' : '在左侧选择好友开始聊天' }}
           </div>
         </div>
@@ -461,28 +425,20 @@
       <!-- 右侧详情面板 -->
       <div
         v-if="showChatDetail"
-        class="w-64 bg-[#f5f5f5] border-l border-gray-200 flex flex-col"
+        class="detail-panel"
       >
-        <div class="h-14 flex items-center justify-center border-b border-gray-200">
-          <span class="font-medium text-gray-700">聊天详情</span>
-        </div>
-        <div class="flex-1 p-4">
-          <div class="flex flex-col items-center">
+        <div class="detail-header">聊天详情</div>
+        <div class="detail-content">
+          <div class="detail-profile">
             <img
               :src="currentChat?.avatar"
               :alt="currentChat?.name"
-              class="w-20 h-20 rounded-full object-cover"
+              class="detail-avatar"
             />
-            <div class="mt-3 font-medium text-gray-800 text-lg">{{ currentChat?.name }}</div>
-            <div class="mt-6 w-full">
-              <div class="bg-white rounded-lg">
-                <div class="p-3 border-b border-gray-100 cursor-pointer hover:bg-gray-50">
-                  <span class="text-sm text-gray-700">查找聊天记录</span>
-                </div>
-                <div class="p-3 border-b border-gray-100 cursor-pointer hover:bg-gray-50">
-                  <span class="text-sm text-gray-700">清空聊天记录</span>
-                </div>
-              </div>
+            <div class="detail-name">{{ currentChat?.name }}</div>
+            <div class="detail-actions">
+              <div class="detail-action-item">查找聊天记录</div>
+              <div class="detail-action-item">清空聊天记录</div>
             </div>
           </div>
         </div>
@@ -496,8 +452,8 @@
       width="500px"
       append-to-body
     >
-      <div class="mb-4">
-        <div class="relative">
+      <div class="search-users-wrapper">
+        <div class="search-users-input">
           <el-input
             v-model="addFriendSearchText"
             placeholder="搜索用户"
@@ -505,7 +461,7 @@
           />
         </div>
       </div>
-      <div class="max-h-[400px] overflow-y-auto">
+      <div class="users-list-scroll">
         <el-empty v-if="loadingAvailableUsers" description="加载中..." />
         <el-empty
           v-else-if="filteredAvailableUsers.length === 0"
@@ -515,17 +471,15 @@
           v-else
           v-for="user in filteredAvailableUsers"
           :key="user.username"
-          class="flex items-center justify-between p-3 hover:bg-gray-50 rounded-lg mb-2 transition-colors"
+          class="available-user-item"
         >
-          <div class="flex items-center">
+          <div class="available-user-info">
             <img
               :src="`https://api.dicebear.com/7.x/avataaars/svg?seed=${user.username}`"
               :alt="user.username"
-              class="w-10 h-10 rounded-full object-cover"
+              class="available-user-avatar"
             />
-            <div class="ml-3">
-              <div class="font-medium text-gray-800">{{ user.username }}</div>
-            </div>
+            <div class="available-user-name">{{ user.username }}</div>
           </div>
           <el-button type="primary" size="small" @click="addFriend(user)">添加</el-button>
         </div>
@@ -541,40 +495,40 @@
       append-to-body
       class="settings-dialog"
     >
-      <div class="flex flex-col">
+      <div class="settings-container">
         <!-- 头像设置区域 -->
-        <div class="flex flex-col items-center mb-8 pb-6 border-b border-gray-100">
-          <div class="relative mb-4">
+        <div class="settings-avatar-section">
+          <div class="settings-avatar-wrapper">
             <img
               :src="myAvatar"
               alt="头像"
-              class="w-28 h-28 rounded-full object-cover border-4 border-white shadow-lg"
+              class="settings-avatar"
             />
             <div
               v-if="config.modules.avatarCrop"
-              class="absolute -bottom-1 -right-1 w-10 h-10 bg-green-500 rounded-full flex items-center justify-center cursor-pointer hover:bg-green-600 transition-all shadow-md"
+              class="settings-avatar-edit"
               @click="triggerAvatarUpload"
             >
-              <el-icon :size="18" class="text-white"><Camera /></el-icon>
+              <el-icon :size="18" class="settings-avatar-icon"><Camera /></el-icon>
             </div>
             <input
               ref="avatarInputRef"
               type="file"
               accept="image/*"
-              class="hidden"
+              class="hidden-avatar-input"
               @change="handleAvatarFileChange"
             />
           </div>
-          <div class="text-center">
-            <div class="font-semibold text-gray-800 text-xl">{{ userInfo.nickname || myUsername }}</div>
-            <div class="text-sm text-gray-500 mt-1">@{{ myUsername }}</div>
+          <div class="settings-user-display">
+            <div class="settings-nickname">{{ userInfo.nickname || myUsername }}</div>
+            <div class="settings-username">@{{ myUsername }}</div>
           </div>
         </div>
 
         <!-- 用户信息表单 -->
-        <div class="space-y-5">
-          <div class="flex items-center justify-between mb-2">
-            <div class="text-gray-700 font-semibold flex items-center gap-2">
+        <div class="settings-form-section">
+          <div class="settings-form-header">
+            <div class="settings-form-title">
               <el-icon><UserFilled /></el-icon>
               个人信息
             </div>
@@ -583,16 +537,16 @@
               type="primary"
               size="small"
               @click="startEditUserInfo"
-              class="rounded-full"
+              class="settings-edit-btn"
             >
               编辑
             </el-button>
           </div>
 
-          <div class="bg-gray-50 rounded-xl p-6 space-y-5">
+          <div class="settings-form">
             <!-- 昵称 -->
-            <div>
-              <label class="block text-sm text-gray-600 mb-2 font-medium">昵称</label>
+            <div class="settings-form-item">
+              <label class="settings-form-label">昵称</label>
               <el-input
                 v-if="isEditingUserInfo"
                 v-model="editingUserInfo.nickname"
@@ -601,15 +555,15 @@
               />
               <div
                 v-else
-                class="text-gray-800 bg-white rounded-lg px-4 py-3 border border-gray-200"
+                class="settings-form-value"
               >
                 {{ userInfo.nickname || '未设置' }}
               </div>
             </div>
 
             <!-- 邮箱 -->
-            <div>
-              <label class="block text-sm text-gray-600 mb-2 font-medium">邮箱</label>
+            <div class="settings-form-item">
+              <label class="settings-form-label">邮箱</label>
               <el-input
                 v-if="isEditingUserInfo"
                 v-model="editingUserInfo.email"
@@ -618,15 +572,15 @@
               />
               <div
                 v-else
-                class="text-gray-800 bg-white rounded-lg px-4 py-3 border border-gray-200"
+                class="settings-form-value"
               >
                 {{ userInfo.email || '未设置' }}
               </div>
             </div>
 
             <!-- 手机号 -->
-            <div>
-              <label class="block text-sm text-gray-600 mb-2 font-medium">手机号</label>
+            <div class="settings-form-item">
+              <label class="settings-form-label">手机号</label>
               <el-input
                 v-if="isEditingUserInfo"
                 v-model="editingUserInfo.phone"
@@ -635,15 +589,15 @@
               />
               <div
                 v-else
-                class="text-gray-800 bg-white rounded-lg px-4 py-3 border border-gray-200"
+                class="settings-form-value"
               >
                 {{ userInfo.phone || '未设置' }}
               </div>
             </div>
 
             <!-- 个人简介 -->
-            <div>
-              <label class="block text-sm text-gray-600 mb-2 font-medium">个人简介</label>
+            <div class="settings-form-item">
+              <label class="settings-form-label">个人简介</label>
               <el-input
                 v-if="isEditingUserInfo"
                 v-model="editingUserInfo.bio"
@@ -654,14 +608,14 @@
               />
               <div
                 v-else
-                class="text-gray-800 bg-white rounded-lg px-4 py-3 border border-gray-200 min-h-[80px]"
+                class="settings-form-value bio-value"
               >
                 {{ userInfo.bio || '这个人很懒，什么都没写~' }}
               </div>
             </div>
 
             <!-- 编辑按钮 -->
-            <div v-if="isEditingUserInfo" class="flex gap-3 justify-end pt-2">
+            <div v-if="isEditingUserInfo" class="settings-form-actions">
               <el-button size="default" @click="cancelEditUserInfo">取消</el-button>
               <el-button
                 type="primary"
@@ -685,16 +639,16 @@
     <!-- 右键菜单 -->
     <div
       v-if="contextMenu.visible"
-      class="context-menu fixed bg-white rounded-lg shadow-lg border py-1 z-50"
+      class="context-menu"
       :style="{ left: contextMenu.x + 'px', top: contextMenu.y + 'px' }"
     >
-      <div class="px-4 py-2 hover:bg-gray-100 cursor-pointer" @click="handleRemoveChat">删除聊天</div>
+      <div class="context-menu-item" @click="handleRemoveChat">删除聊天</div>
     </div>
   </el-dialog>
 </template>
 
 <script setup>
-import { computed, watch, nextTick, ref, onMounted, onUnmounted, inject } from 'vue'
+import { computed, watch, nextTick, ref, onMounted, onUnmounted } from 'vue'
 import {
   Camera,
   ChatDotRound,
@@ -711,15 +665,14 @@ import {
   Download
 } from '@element-plus/icons-vue'
 import { useChat } from '../composables/useChat.js'
-import AvatarCrop from './AvatarCrop.vue'
 import { ElMessage } from 'element-plus'
+import AvatarCrop from './AvatarCrop.vue'
 
 const props = defineProps({
   modelValue: { type: Boolean, default: false },
   config: { type: Object, required: true },
   width: { type: [String, Number], default: '1100px' }
 })
-
 const emit = defineEmits(['update:modelValue', 'open', 'close', 'message', 'send', 'error'])
 
 const visible = computed({
@@ -727,7 +680,6 @@ const visible = computed({
   set: (val) => emit('update:modelValue', val)
 })
 
-// 使用聊天 hook
 const {
   myUsername,
   myAvatar,
@@ -770,7 +722,6 @@ const {
   updateUserInfo
 } = useChat(props.config)
 
-// 导航 tab
 const navTabs = computed(() => {
   const tabs = [{ id: 'chat', icon: ChatDotRound, badge: 0 }]
   
@@ -784,47 +735,33 @@ const navTabs = computed(() => {
   
   return tabs
 })
-
 const currentNavTab = ref('chat')
 const currentChatId = ref(null)
 const currentChat = ref(null)
 const currentSelectedFriend = ref(null)
 const showChatDetail = ref(false)
-
-// 用户信息编辑
 const isEditingUserInfo = ref(false)
 const editingUserInfo = ref({ nickname: '', email: '', phone: '', bio: '' })
 const savingUserInfo = ref(false)
-
-// 设置弹窗
 const showSettingsDialog = ref(false)
-
-// 头像相关
 const showAvatarEditor = ref(false)
 const avatarUploading = ref(false)
 const avatarInputRef = ref(null)
 const avatarImageSrc = ref('')
-
-// 文件上传相关
 const fileInputRef = ref(null)
 const pendingFiles = ref([])
-
-// 右键菜单
 const contextMenu = ref({ visible: false, x: 0, y: 0, chat: null })
 
-// 显示右键菜单
-const showContextMenu = (e, chat) => {
+const showContextMenuFn = (e, chat) => {
   e.preventDefault()
   e.stopPropagation()
   contextMenu.value = { visible: true, x: e.clientX, y: e.clientY, chat }
 }
 
-// 隐藏右键菜单
 const hideContextMenu = () => {
   contextMenu.value.visible = false
 }
 
-// 删除聊天
 const handleRemoveChat = async () => {
   if (!contextMenu.value.chat) return
   const success = await setFriendToChatStatus(contextMenu.value.chat.id, 0)
@@ -837,7 +774,6 @@ const handleRemoveChat = async () => {
   hideContextMenu()
 }
 
-// 选择聊天
 const selectChat = (chat) => {
   currentChatId.value = chat.id
   currentChat.value = chat
@@ -851,14 +787,12 @@ const selectChat = (chat) => {
   })
 }
 
-// 选择好友
 const selectFriend = (friend) => {
   currentSelectedFriend.value = friend
   currentChatId.value = null
   currentChat.value = null
 }
 
-// 开始聊天
 const handleStartChat = async () => {
   if (!currentSelectedFriend.value) return
   
@@ -874,17 +808,14 @@ const handleStartChat = async () => {
   }
 }
 
-// 头像点击
 const handleAvatarClick = () => {
   showSettingsDialog.value = true
 }
 
-// 触发头像上传
 const triggerAvatarUpload = () => {
   avatarInputRef.value?.click()
 }
 
-// 文件选择
 const triggerFileSelect = () => {
   fileInputRef.value?.click()
 }
@@ -916,7 +847,6 @@ const handleFileSelect = (e) => {
   }
 }
 
-// 移除待发送文件
 const removePendingFile = (index) => {
   const file = pendingFiles.value[index]
   if (file.previewUrl) {
@@ -925,7 +855,6 @@ const removePendingFile = (index) => {
   pendingFiles.value.splice(index, 1)
 }
 
-// 格式化文件大小
 const formatFileSize = (bytes) => {
   if (bytes === 0) return '0 B'
   const k = 1024
@@ -934,7 +863,6 @@ const formatFileSize = (bytes) => {
   return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
 }
 
-// 发送消息
 const handleSend = async () => {
   if (!inputText.value.trim() && pendingFiles.value.length === 0) return
 
@@ -953,7 +881,6 @@ const handleSend = async () => {
   emit('send', { text: textToSend, files: filesToSend })
 }
 
-// 处理粘贴
 const handlePaste = (e) => {
   const items = e.clipboardData?.items
   if (!items) return
@@ -982,7 +909,6 @@ const handlePaste = (e) => {
   }
 }
 
-// 打开文件
 const openFile = (fileUrl) => {
   if (!fileUrl) {
     ElMessage.warning('文件地址无效')
@@ -991,12 +917,10 @@ const openFile = (fileUrl) => {
   window.open(fileUrl, '_blank')
 }
 
-// 图片加载错误
 const handleImageError = (e) => {
   console.warn('图片加载失败', e)
 }
 
-// 处理头像文件选择
 const handleAvatarFileChange = (e) => {
   const file = e.target.files[0]
   if (!file) return
@@ -1019,13 +943,13 @@ const handleAvatarFileChange = (e) => {
   reader.readAsDataURL(file)
 }
 
-// 处理头像裁剪确认
 const handleAvatarCropConfirm = async ({ file }) => {
   if (!file) return
 
   avatarUploading.value = true
   try {
-    const api = new (require('../core/api.js').ChatApi)(props.config)
+    const { ChatApi } = await import('../core/api.js')
+    const api = new ChatApi(props.config)
     const res = await api.uploadAvatar(file, myUsername)
     if (res.code === 200) {
       ElMessage.success('头像上传成功')
@@ -1050,7 +974,6 @@ const resetAvatar = () => {
   }
 }
 
-// 开始编辑用户信息
 const startEditUserInfo = () => {
   editingUserInfo.value = {
     nickname: userInfo.value.nickname || '',
@@ -1061,13 +984,11 @@ const startEditUserInfo = () => {
   isEditingUserInfo.value = true
 }
 
-// 取消编辑
 const cancelEditUserInfo = () => {
   isEditingUserInfo.value = false
   editingUserInfo.value = { nickname: '', email: '', phone: '', bio: '' }
 }
 
-// 保存用户信息
 const saveUserInfo = async () => {
   savingUserInfo.value = true
   try {
@@ -1086,7 +1007,6 @@ const saveUserInfo = async () => {
   }
 }
 
-// 处理弹窗关闭
 const handleClosed = () => {
   reset()
   closeWebSocket()
@@ -1097,7 +1017,6 @@ const handleClosed = () => {
   emit('close')
 }
 
-// 处理弹窗打开
 const handleOpen = async () => {
   await Promise.all([getFriendList(), loadFriendApplyList(), getUserInfo()])
   initWebSocket()
@@ -1107,7 +1026,6 @@ const handleOpen = async () => {
   emit('open')
 }
 
-// 生命周期
 onMounted(() => {
   document.addEventListener('click', hideContextMenu)
 })
@@ -1134,12 +1052,12 @@ onUnmounted(() => {
 }
 
 /* 微信样式消息气泡 */
-.message-bubble-self {
+.bubble-self {
   position: relative;
   background-color: #95ec69 !important;
 }
 
-.message-bubble-self::after {
+.bubble-self::after {
   content: '';
   position: absolute;
   right: -5px;
@@ -1151,12 +1069,12 @@ onUnmounted(() => {
   box-shadow: 2px -2px 2px 0 rgba(0, 0, 0, 0.05);
 }
 
-.message-bubble-other {
+.bubble-other {
   position: relative;
   background-color: white !important;
 }
 
-.message-bubble-other::after {
+.bubble-other::after {
   content: '';
   position: absolute;
   left: -5px;
@@ -1169,14 +1087,14 @@ onUnmounted(() => {
 }
 
 /* 消息列表滚动条 */
-.message-list::-webkit-scrollbar {
+.messages-container::-webkit-scrollbar {
   width: 6px;
 }
-.message-list::-webkit-scrollbar-thumb {
+.messages-container::-webkit-scrollbar-thumb {
   background: #ccc;
   border-radius: 3px;
 }
-.message-list::-webkit-scrollbar-track {
+.messages-container::-webkit-scrollbar-track {
   background: transparent;
 }
 
@@ -1197,130 +1115,980 @@ onUnmounted(() => {
   color: #1f2937;
 }
 
-/* 简单的 flex 工具类 */
-.flex { display: flex; }
-.flex-col { flex-direction: column; }
-.flex-1 { flex: 1; }
-.items-center { align-items: center; }
-.justify-center { justify-content: center; }
-.justify-between { justify-content: space-between; }
-.gap-2 { gap: 0.5rem; }
-.gap-3 { gap: 0.75rem; }
-.p-3 { padding: 0.75rem; }
-.p-4 { padding: 1rem; }
-.p-8 { padding: 2rem; }
-.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
-.px-4 { padding-left: 1rem; padding-right: 1rem; }
-.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
-.pb-3 { padding-bottom: 0.75rem; }
-.mb-2 { margin-bottom: 0.5rem; }
-.mb-4 { margin-bottom: 1rem; }
-.mb-6 { margin-bottom: 1.5rem; }
-.mb-8 { margin-bottom: 2rem; }
-.mt-1 { margin-top: 0.25rem; }
-.mt-3 { margin-top: 0.75rem; }
-.mt-4 { margin-top: 1rem; }
-.mt-6 { margin-top: 1.5rem; }
-.mr-3 { margin-right: 0.75rem; }
-.ml-3 { margin-left: 0.75rem; }
-.w-10 { width: 2.5rem; }
-.w-11 { width: 2.75rem; }
-.w-16 { width: 4rem; }
-.w-20 { width: 5rem; }
-.w-24 { width: 6rem; }
-.w-28 { width: 7rem; }
-.w-64 { width: 16rem; }
-.w-72 { width: 18rem; }
-.w-full { width: 100%; }
-.h-10 { height: 2.5rem; }
-.h-11 { height: 2.75rem; }
-.h-14 { height: 3.5rem; }
-.h-20 { height: 5rem; }
-.h-24 { height: 6rem; }
-.h-28 { height: 7rem; }
-.h-[680px] { height: 680px; }
-.h-[80px] { height: 80px; }
-.h-auto { height: auto; }
-.h-full { height: 100%; }
-.min-h-0 { min-height: 0; }
-.max-w-\[300px\] { max-width: 300px; }
-.max-w-\[75\%\] { max-width: 75%; }
-.min-w-\[200px\] { min-width: 200px; }
-.min-w-0 { min-width: 0; }
-.rounded-full { border-radius: 9999px; }
-.rounded-lg { border-radius: 0.5rem; }
-.rounded-xl { border-radius: 0.75rem; }
-.border { border-width: 1px; }
-.border-0 { border-width: 0; }
-.border-2 { border-width: 2px; }
-.border-4 { border-width: 4px; }
-.border-b { border-bottom-width: 1px; }
-.border-l { border-left-width: 1px; }
-.border-r { border-right-width: 1px; }
-.border-gray-100 { border-color: #f3f4f6; }
-.border-gray-200 { border-color: #e5e7eb; }
-.border-white { border-color: #fff; }
-.bg-\[\#07c160\] { background-color: #07c160; }
-.bg-\[\#95ec69\] { background-color: #95ec69; }
-.bg-\[\#f5f5f5\] { background-color: #f5f5f5; }
-.bg-gray-50 { background-color: #f9fafb; }
-.bg-gray-100 { background-color: #f3f4f6; }
-.bg-green-100 { background-color: #dcfce7; }
-.bg-green-50 { background-color: #f0fdf4; }
-.bg-green-500 { background-color: #22c55e; }
-.bg-red-500 { background-color: #ef4444; }
-.bg-white { background-color: #fff; }
-.hover\:bg-\[\#06ad56\]:hover { background-color: #06ad56; }
-.hover\:bg-\[\#e5e5e5\]:hover { background-color: #e5e5e5; }
-.hover\:bg-gray-100:hover { background-color: #f3f4f6; }
-.hover\:bg-gray-50:hover { background-color: #f9fafb; }
-.object-cover { object-fit: cover; }
-.overflow-hidden { overflow: hidden; }
-.overflow-y-auto { overflow-y: auto; }
-.text-center { text-align: center; }
-.text-right { text-align: right; }
-.text-left { text-align: left; }
-.text-xs { font-size: 0.75rem; }
-.text-sm { font-size: 0.875rem; }
-.text-lg { font-size: 1.125rem; }
-.text-xl { font-size: 1.25rem; }
-.font-medium { font-weight: 500; }
-.font-semibold { font-weight: 600; }
-.text-gray-300 { color: #d1d5db; }
-.text-gray-400 { color: #9ca3af; }
-.text-gray-500 { color: #6b7280; }
-.text-gray-600 { color: #4b5563; }
-.text-gray-700 { color: #374151; }
-.text-gray-800 { color: #1f2937; }
-.text-green-600 { color: #16a34a; }
-.text-white { color: #fff; }
-.cursor-pointer { cursor: pointer; }
-.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); }
-.shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }
-.flex-wrap { flex-wrap: wrap; }
-.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.break-all { word-break: break-all; }
-.whitespace-pre-wrap { white-space: pre-wrap; }
-.select-none { user-select: none; }
-.transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
-.transition-colors { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
-.self-end { align-self: flex-end; }
-.self-start { align-self: flex-start; }
-.flex-shrink-0 { flex-shrink: 0; }
-.flex-row-reverse { flex-direction: row-reverse; }
-.flex-row { flex-direction: row; }
-.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
-.absolute { position: absolute; }
-.relative { position: relative; }
-.fixed { position: fixed; }
-.top-0 { top: 0; }
-.bottom-0 { bottom: 0; }
-.left-0 { left: 0; }
-.right-0 { right: 0; }
-.top-1 { top: 0.25rem; }
-.right-1 { right: 0.25rem; }
-.-top-1 { top: -0.25rem; }
-.-right-1 { right: -0.25rem; }
-.-bottom-1 { bottom: -0.25rem; }
-.z-50 { z-index: 50; }
+/* 完整的 CSS 样式 */
+.chat-container {
+  display: flex;
+  height: 680px;
+  background-color: white;
+  overflow: hidden;
+}
+
+/* 侧边栏导航 */
+.sidebar-nav {
+  width: 64px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  background-color: #f9fafb;
+  border-right: 1px solid #e5e7eb;
+}
+
+.sidebar-avatar {
+  margin-top: 16px;
+  margin-bottom: 16px;
+  cursor: pointer;
+}
+
+.avatar-img {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  border: 2px solid #e5e7eb;
+}
+
+.nav-item {
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  border-radius: 8px;
+  transition: all 0.2s;
+  position: relative;
+}
+
+.nav-item-active {
+  background-color: #f0fdf4;
+  color: #16a34a;
+}
+
+.nav-item-inactive {
+  color: #6b7280;
+}
+
+.nav-item-inactive:hover {
+  background-color: #f3f4f6;
+}
+
+.nav-badge {
+  position: absolute;
+  top: -4px;
+  right: -4px;
+  width: 16px;
+  height: 16px;
+  background-color: #ef4444;
+  border-radius: 50%;
+  font-size: 10px;
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.nav-spacer {
+  flex: 1;
+}
+
+/* 内容面板 */
+.content-panel {
+  width: 288px;
+  background-color: #f5f5f5;
+  border-right: 1px solid #e5e7eb;
+  display: flex;
+  flex-direction: column;
+}
+
+.search-bar {
+  padding: 12px;
+}
+
+.content-scroll {
+  flex: 1;
+  overflow-y: auto;
+  min-height: 0;
+}
+
+/* 聊天和好友项 */
+.chat-item {
+  display: flex;
+  align-items: center;
+  padding: 12px;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.chat-item:hover {
+  background-color: #e5e5e5;
+}
+
+.chat-item-active {
+  background-color: #d6d6d6;
+}
+
+.friend-avatar-wrapper {
+  position: relative;
+  flex-shrink: 0;
+}
+
+.friend-avatar {
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+.online-indicator {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 12px;
+  height: 12px;
+  background-color: #22c55e;
+  border-radius: 50%;
+  border: 2px solid white;
+}
+
+.online-indicator.offline {
+  background-color: #9ca3af;
+}
+
+.friend-info {
+  margin-left: 12px;
+  flex: 1;
+  overflow: hidden;
+}
+
+.friend-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.friend-name {
+  font-weight: 500;
+  color: #1f2937;
+  font-size: 14px;
+}
+
+.last-time {
+  font-size: 12px;
+  color: #9ca3af;
+}
+
+.friend-preview {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 4px;
+}
+
+.last-msg {
+  font-size: 12px;
+  color: #6b7280;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding-right: 8px;
+  flex: 1;
+}
+
+.unread-badge {
+  background-color: #ef4444;
+  color: white;
+  font-size: 10px;
+  border-radius: 9999px;
+  padding: 2px 6px;
+  min-width: 18px;
+  text-align: center;
+}
+
+/* 添加好友 */
+.add-friend-section {
+  padding: 12px;
+}
+
+.add-friend-btn {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px;
+  border-radius: 8px;
+  cursor: pointer;
+}
+
+.add-friend-btn:hover {
+  background-color: #e5e5e5;
+}
+
+.add-friend-icon {
+  width: 44px;
+  height: 44px;
+  background-color: #22c55e;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.add-friend-text {
+  font-size: 14px;
+  color: #1f2937;
+}
+
+/* 好友申请 */
+.friend-request-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px;
+}
+
+.friend-request-item:hover {
+  background-color: #e5e5e5;
+}
+
+.request-info {
+  display: flex;
+  align-items: center;
+}
+
+.request-avatar {
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+.request-details {
+  margin-left: 12px;
+}
+
+.request-username {
+  font-weight: 500;
+  color: #1f2937;
+  font-size: 14px;
+}
+
+.request-desc {
+  font-size: 12px;
+  color: #6b7280;
+  margin-top: 4px;
+}
+
+/* 聊天区域 */
+.chat-area {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  background-color: white;
+}
+
+.friend-profile {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 32px;
+  background-color: #f5f5f5;
+}
+
+.profile-avatar {
+  width: 96px;
+  height: 96px;
+  border-radius: 50%;
+  object-fit: cover;
+  margin-bottom: 24px;
+}
+
+.profile-name {
+  font-size: 20px;
+  font-weight: 500;
+  color: #1f2937;
+  margin-bottom: 8px;
+}
+
+.profile-status {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 32px;
+}
+
+.status-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+}
+
+.status-online {
+  background-color: #22c55e;
+}
+
+.status-offline {
+  background-color: #9ca3af;
+}
+
+.start-chat-btn {
+  width: 160px;
+}
+
+/* 聊天窗口 */
+.chat-window {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.chat-header {
+  height: 56px;
+  border-bottom: 1px solid #e5e7eb;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 16px;
+  background-color: white;
+}
+
+.chat-title {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.chat-name {
+  font-weight: 500;
+  color: #1f2937;
+}
+
+.status-badge {
+  font-size: 12px;
+  padding: 2px 8px;
+  border-radius: 4px;
+}
+
+.status-badge-online {
+  background-color: #dcfce7;
+  color: #16a34a;
+}
+
+.status-badge-offline {
+  background-color: #f3f4f6;
+  color: #6b7280;
+}
+
+.chat-actions {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  color: #6b7280;
+}
+
+.action-icon {
+  cursor: pointer;
+}
+
+.action-icon:hover {
+  color: #374151;
+}
+
+.messages-container {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px;
+  background-color: #f5f5f5;
+  min-height: 0;
+}
+
+/* 消息样式 */
+.message-wrapper {
+  display: flex;
+  margin-bottom: 24px;
+  align-items: flex-start;
+}
+
+.message-self {
+  flex-direction: row-reverse;
+}
+
+.message-other {
+  flex-direction: row;
+}
+
+.message-avatar {
+  flex-shrink: 0;
+}
+
+.avatar-sm {
+  width: 40px;
+  height: 40px;
+  border-radius: 8px;
+  object-fit: cover;
+}
+
+.message-content-wrapper {
+  display: flex;
+  flex-direction: column;
+  max-width: 75%;
+}
+
+.content-self {
+  margin-right: 12px;
+  align-items: flex-end;
+}
+
+.content-other {
+  margin-left: 12px;
+  align-items: flex-start;
+}
+
+.sender-name {
+  font-size: 12px;
+  color: #6b7280;
+  margin-bottom: 4px;
+  margin-left: 4px;
+}
+
+.message-bubble-wrapper {
+  position: relative;
+}
+
+.message-bubble {
+  padding: 8px 12px;
+  font-size: 14px;
+  word-break: break-all;
+  white-space: pre-wrap;
+  border-radius: 8px;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+}
+
+.image-bubble {
+  border-radius: 8px;
+  position: relative;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  cursor: pointer;
+  overflow: hidden;
+  max-width: 300px;
+}
+
+.message-image {
+  width: 100%;
+  height: auto;
+  display: block;
+}
+
+.image-size {
+  position: absolute;
+  left: 4px;
+  bottom: 0;
+  color: white;
+  font-size: 10px;
+}
+
+.file-bubble {
+  border-radius: 8px;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  cursor: pointer;
+  overflow: hidden;
+  min-width: 200px;
+}
+
+.file-content {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 16px;
+}
+
+.file-icon {
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 8px;
+  flex-shrink: 0;
+}
+
+.bubble-self .file-icon {
+  color: #374151;
+}
+
+.bubble-other .file-icon {
+  color: #6b7280;
+}
+
+.file-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.file-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1.2;
+}
+
+.bubble-self .file-name {
+  color: #1f2937;
+}
+
+.bubble-other .file-name {
+  color: #1f2937;
+}
+
+.file-meta {
+  font-size: 12px;
+  margin-top: 4px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.bubble-self .file-meta {
+  color: #4b5563;
+}
+
+.bubble-other .file-meta {
+  color: #6b7280;
+}
+
+.message-time {
+  font-size: 10px;
+  color: #9ca3af;
+  margin-top: 4px;
+}
+
+.time-right {
+  text-align: right;
+}
+
+.time-left {
+  text-align: left;
+}
+
+/* 输入区域 */
+.input-area {
+  background-color: white;
+  border-top: 1px solid #e5e7eb;
+}
+
+.pending-files {
+  padding: 8px 12px;
+  border-bottom: 1px solid #f3f4f6;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.pending-file {
+  position: relative;
+}
+
+.pending-image-wrapper {
+  position: relative;
+  width: 80px;
+  height: 80px;
+  border-radius: 8px;
+  overflow: hidden;
+  border: 1px solid #e5e7eb;
+}
+
+.pending-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.pending-file-wrapper {
+  position: relative;
+  width: 96px;
+  height: 80px;
+  border-radius: 8px;
+  border: 1px solid #e5e7eb;
+  background-color: #f9fafb;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 4px;
+}
+
+.pending-file-icon {
+  color: #9ca3af;
+  font-size: 28px;
+  margin-bottom: 4px;
+}
+
+.pending-file-name {
+  font-size: 10px;
+  color: #6b7280;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 100%;
+  text-align: center;
+  padding: 0 4px;
+}
+
+.remove-file-btn {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 20px;
+  height: 20px;
+  background-color: rgba(0, 0, 0, 0.5);
+  color: white;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: background-color 0.2s;
+  font-size: 14px;
+  border: none;
+}
+
+.remove-file-btn:hover {
+  background-color: rgba(0, 0, 0, 0.7);
+}
+
+.input-actions {
+  display: flex;
+  align-items: center;
+  padding: 12px;
+  gap: 8px;
+}
+
+.input-wrapper {
+  padding: 0 12px 12px;
+}
+
+.message-input {
+  width: 100%;
+  resize: none;
+  border: none;
+  outline: none;
+  font-size: 14px;
+  height: 80px;
+}
+
+.send-btn-wrapper {
+  display: flex;
+  justify-content: flex-end;
+  padding: 0 12px 12px;
+}
+
+.send-btn {
+  background-color: #07c160;
+  border: none;
+  font-size: 14px;
+  padding: 8px 24px;
+}
+
+.send-btn:hover {
+  background-color: #06ad56;
+}
+
+.hidden-file-input {
+  display: none;
+}
+
+/* 空状态 */
+.empty-state {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  background-color: #f5f5f5;
+}
+
+.empty-icon {
+  color: #d1d5db;
+  margin-bottom: 8px;
+}
+
+.empty-text {
+  color: #9ca3af;
+}
+
+/* 详情面板 */
+.detail-panel {
+  width: 256px;
+  background-color: #f5f5f5;
+  border-left: 1px solid #e5e7eb;
+  display: flex;
+  flex-direction: column;
+}
+
+.detail-header {
+  height: 56px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-bottom: 1px solid #e5e7eb;
+  font-weight: 500;
+  color: #374151;
+}
+
+.detail-content {
+  flex: 1;
+  padding: 16px;
+}
+
+.detail-profile {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.detail-avatar {
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+.detail-name {
+  margin-top: 12px;
+  font-weight: 500;
+  color: #1f2937;
+  font-size: 18px;
+}
+
+.detail-actions {
+  margin-top: 24px;
+  width: 100%;
+}
+
+.detail-action-item {
+  padding: 12px;
+  border-bottom: 1px solid #f3f4f6;
+  cursor: pointer;
+  background-color: white;
+}
+
+.detail-action-item:hover {
+  background-color: #f9fafb;
+}
+
+.detail-action-item:first-child {
+  border-radius: 8px 8px 0 0;
+}
+
+.detail-action-item:last-child {
+  border-bottom: none;
+  border-radius: 0 0 8px 8px;
+}
+
+/* 搜索用户 */
+.search-users-wrapper {
+  margin-bottom: 16px;
+}
+
+.search-users-input {
+  position: relative;
+}
+
+.users-list-scroll {
+  max-height: 400px;
+  overflow-y: auto;
+}
+
+.available-user-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px;
+  margin-bottom: 8px;
+  border-radius: 8px;
+  transition: background-color 0.2s;
+}
+
+.available-user-item:hover {
+  background-color: #f9fafb;
+}
+
+.available-user-info {
+  display: flex;
+  align-items: center;
+}
+
+.available-user-avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+.available-user-name {
+  margin-left: 12px;
+  font-weight: 500;
+  color: #1f2937;
+}
+
+/* 设置页面 */
+.settings-container {
+  display: flex;
+  flex-direction: column;
+}
+
+.settings-avatar-section {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-bottom: 32px;
+  padding-bottom: 24px;
+  border-bottom: 1px solid #f3f4f6;
+}
+
+.settings-avatar-wrapper {
+  position: relative;
+  margin-bottom: 16px;
+}
+
+.settings-avatar {
+  width: 112px;
+  height: 112px;
+  border-radius: 50%;
+  object-fit: cover;
+  border: 4px solid white;
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+}
+
+.settings-avatar-edit {
+  position: absolute;
+  bottom: -4px;
+  right: -4px;
+  width: 40px;
+  height: 40px;
+  background-color: #22c55e;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: background-color 0.2s;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+}
+
+.settings-avatar-edit:hover {
+  background-color: #16a34a;
+}
+
+.settings-avatar-icon {
+  color: white;
+}
+
+.hidden-avatar-input {
+  display: none;
+}
+
+.settings-user-display {
+  text-align: center;
+}
+
+.settings-nickname {
+  font-weight: 600;
+  color: #1f2937;
+  font-size: 20px;
+}
+
+.settings-username {
+  font-size: 14px;
+  color: #6b7280;
+  margin-top: 4px;
+}
+
+.settings-form-section {
+  gap: 20px;
+}
+
+.settings-form-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8px;
+}
+
+.settings-form-title {
+  color: #374151;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.settings-edit-btn {
+  border-radius: 9999px;
+}
+
+.settings-form {
+  background-color: #f9fafb;
+  border-radius: 16px;
+  padding: 24px;
+  gap: 20px;
+  display: flex;
+  flex-direction: column;
+}
+
+.settings-form-item {
+  display: flex;
+  flex-direction: column;
+}
+
+.settings-form-label {
+  display: block;
+  font-size: 14px;
+  color: #4b5563;
+  margin-bottom: 8px;
+  font-weight: 500;
+}
+
+.settings-form-value {
+  color: #1f2937;
+  background-color: white;
+  border-radius: 8px;
+  padding: 12px 16px;
+  border: 1px solid #e5e7eb;
+}
+
+.bio-value {
+  min-height: 80px;
+}
+
+.settings-form-actions {
+  display: flex;
+  gap: 12px;
+  justify-content: flex-end;
+  padding-top: 8px;
+}
+
+/* 右键菜单 */
+.context-menu {
+  position: fixed;
+  background-color: white;
+  border-radius: 8px;
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  border: 1px solid #e5e7eb;
+  padding: 4px 0;
+  z-index: 1000;
+}
+
+.context-menu-item {
+  padding: 8px 16px;
+  cursor: pointer;
+  font-size: 14px;
+}
+
+.context-menu-item:hover {
+  background-color: #f3f4f6;
+}
 </style>