vue-chat-kit 0.3.10 → 0.3.11

package/src/components/ChatPanel.vue

@@ -1,713 +1,146 @@
 <template>
-  <div class="chat-panel">
+  <div class="chat-panel" :data-theme="appliedTheme">
     <!-- 左侧图标导航栏 -->
-    <div class="chat-sidebar">
-      <div class="sidebar-avatar" @click="handleAvatarClick">
-        <img :src="myAvatar" alt="头像" class="sidebar-avatar-img" />
-      </div>
-      
-      <div
-        v-for="tab in navTabs"
-        :key="tab.id"
-        :class="[
-          'sidebar-nav-item',
-          currentNavTab === tab.id ? 'sidebar-nav-item-active' : 'sidebar-nav-item-inactive'
-        ]"
-        @click="currentNavTab = tab.id"
-      >
-        <el-icon :size="24">
-          <component :is="tab.icon" />
-        </el-icon>
-        <span v-if="tab.badge" class="sidebar-nav-badge">
-          {{ tab.badge > 99 ? '99+' : tab.badge }}
-        </span>
-      </div>
-      
-      <div class="sidebar-spacer"></div>
-      
-      <div
-        v-if="config.modules.settings"
-        class="sidebar-nav-item sidebar-nav-item-inactive"
-        @click="showSettingsDialog = true"
-        title="设置"
-      >
-        <el-icon :size="24"><Setting /></el-icon>
-      </div>
-    </div>
+    <Sidebar
+      :my-avatar="myAvatar"
+      :nav-tabs="navTabs"
+      v-model:current-nav-tab="currentNavTab"
+      :config="config"
+      @avatar-click="handleAvatarClick"
+      @settings-click="showSettingsDialog = true"
+    />
 
     <!-- 中间内容栏 -->
-    <div class="chat-content-panel">
-      <!-- 搜索栏 -->
-      <div class="chat-search-bar">
-        <el-input
-          v-model="searchText"
-          placeholder="搜索"
-          :prefix-icon="Search"
-          class="chat-search-input"
-        />
-      </div>
-
-      <!-- 内容区域 -->
-      <div class="chat-content-scroll">
-        <!-- 聊天列表 -->
-        <div v-if="currentNavTab === 'chat'">
-          <div
-            v-for="chat in filteredUsers"
-            :key="chat.id"
-            :class="[
-              'chat-list-item',
-              currentChatId === chat.id ? 'chat-list-item-active' : ''
-            ]"
-            @click="selectChat(chat)"
-            @contextmenu.prevent.stop="showContextMenuFn($event, chat)"
-          >
-            <div class="chat-list-avatar-wrapper">
-              <img
-                :src="chat.avatar"
-                :alt="chat.name"
-                class="chat-list-avatar"
-              />
-              <span
-                v-if="chat.online"
-                class="chat-list-online-indicator"
-              ></span>
-            </div>
-            <div class="chat-list-info">
-              <div class="chat-list-header">
-                <span class="chat-list-name">{{ chat.name }}</span>
-                <span class="chat-list-time">{{ formatLastTime(chat.lastTime) }}</span>
-              </div>
-              <div class="chat-list-preview">
-                <span class="chat-list-last-msg">{{ chat.lastMsg }}</span>
-                <span
-                  v-if="chat.unread > 0"
-                  class="chat-list-unread"
-                >
-                  {{ chat.unread > 99 ? '99+' : chat.unread }}
-                </span>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <!-- 好友列表 -->
-        <div v-if="currentNavTab === 'friends' && config.modules.friends">
-          <div class="add-friend-section">
-            <div
-              class="add-friend-btn"
-              @click="openAddFriendDialog"
-            >
-              <div class="add-friend-icon">
-                <el-icon class="text-white" :size="20"><Plus /></el-icon>
-              </div>
-              <span class="add-friend-text">添加好友</span>
-            </div>
-          </div>
-          <div
-            v-for="friend in filteredFriendList"
-            :key="friend.id"
-            class="chat-list-item"
-            @click="selectFriend(friend)"
-          >
-            <div class="chat-list-avatar-wrapper">
-              <img
-                :src="friend.avatar"
-                :alt="friend.name"
-                class="chat-list-avatar"
-              />
-              <span
-                :class="[
-                  'chat-list-online-indicator',
-                  friend.online ? 'chat-list-online' : 'chat-list-offline'
-                ]"
-              ></span>
-            </div>
-            <div class="chat-list-info">
-              <span class="chat-list-name">{{ friend.name }}</span>
-            </div>
-          </div>
-        </div>
-
-        <!-- 申请列表 -->
-        <div v-if="currentNavTab === 'apply' && config.modules.apply">
-          <el-empty v-if="loadingFriendApply" description="加载中..." />
-          <el-empty
-            v-else-if="friendApplyList.length === 0"
-            description="暂无好友申请"
-          />
-          <div
-            v-else
-            v-for="apply in friendApplyList"
-            :key="apply.applyUser || apply.id"
-            class="friend-request-item"
-          >
-            <div class="friend-request-info">
-              <img
-                :src="`https://api.dicebear.com/7.x/avataaars/svg?seed=${apply.applyUser}`"
-                :alt="apply.applyUser"
-                class="friend-request-avatar"
-              />
-              <div class="friend-request-details">
-                <div class="friend-request-username">{{ apply.applyUser }}</div>
-                <div class="friend-request-desc">请求添加你为好友</div>
-              </div>
-            </div>
-            <el-button
-              type="primary"
-              size="small"
-              @click="agreeFriend(apply.applyUser)"
-            >同意</el-button>
-          </div>
-        </div>
-
-        <!-- 群聊列表 -->
-        <div v-if="currentNavTab === 'groups' && config.modules.groups">
-          <div class="add-friend-section">
-            <div
-              class="add-friend-btn"
-              @click="createGroupDialogVisible = true"
-            >
-              <div class="add-friend-icon">
-                <el-icon class="text-white" :size="20"><Plus /></el-icon>
-              </div>
-              <span class="add-friend-text">创建群聊</span>
-            </div>
-          </div>
-          <div
-            v-for="group in filteredGroupList"
-            :key="group.groupId"
-            :class="[
-              'chat-list-item',
-              currentSelectGroup?.groupId === group.groupId ? 'chat-list-item-active' : ''
-            ]"
-            @click="selectGroupChat(group)"
-          >
-            <div class="chat-list-avatar-wrapper">
-              <!-- 多方格群聊头像 -->
-              <div v-if="group.memberAvatars && group.memberAvatars.length > 0" class="group-avatar-grid">
-                <div 
-                  v-for="(member, index) in group.memberAvatars" 
-                  :key="member.username"
-                  class="group-avatar-item"
-                  :style="getGroupAvatarGridStyle(group.memberAvatars.length, index)"
-                >
-                  <img
-                    :src="member.avatar"
-                    :alt="member.username"
-                    class="group-avatar-img"
-                  />
-                </div>
-              </div>
-              <!-- 单个头像作为后备 -->
-              <img
-                v-else
-                :src="group.avatar"
-                :alt="group.name"
-                class="chat-list-avatar"
-              />
-            </div>
-            <div class="chat-list-info">
-              <div class="chat-list-header">
-                <span class="chat-list-name">{{ group.name }}</span>
-                <span class="chat-list-time">{{ formatLastTime(group.lastTime) }}</span>
-              </div>
-              <div class="chat-list-preview">
-                <span class="chat-list-last-msg">{{ group.lastMsg }}</span>
-                <span
-                  v-if="group.unread > 0"
-                  class="chat-list-unread"
-                >
-                  {{ group.unread > 99 ? '99+' : group.unread }}
-                </span>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
+    <ContentList
+      v-model:search-text="searchText"
+      :current-nav-tab="currentNavTab"
+      :config="config"
+      :combined-chat-list="combinedChatList"
+      :filtered-friend-list="filteredFriendList"
+      :filtered-group-list="filteredGroupList"
+      :current-chat-id="currentChatId"
+      :current-select-group="currentSelectGroup"
+      :current-selected-group="currentSelectedGroup"
+      :loading-friend-apply="loadingFriendApply"
+      :friend-apply-list="friendApplyList"
+      :format-last-time="formatLastTime"
+      @add-friend="openAddFriendDialog"
+      @create-group="createGroupDialogVisible = true"
+      @select-chat="selectChat"
+      @select-group-chat="selectGroupChat"
+      @select-friend="selectFriend"
+      @select-group="selectGroup"
+      @agree-friend="agreeFriend"
+      @contextmenu="showContextMenuFn"
+    />
 
     <!-- 右侧聊天/详情区域 -->
-    <div class="chat-main-area">
-      <!-- 好友信息展示区域 -->
-      <div v-if="currentSelectedFriend && !currentChat" class="friend-profile-area">
-        <img
-          :src="currentSelectedFriend.avatar"
-          :alt="currentSelectedFriend.name"
-          class="profile-avatar"
-        />
-        <div class="profile-name">{{ currentSelectedFriend.name }}</div>
-        <div class="profile-status">
-          <span
-            :class="[
-              'profile-status-dot',
-              currentSelectedFriend.online ? 'profile-status-online' : 'profile-status-offline'
-            ]"
-          ></span>
-          <span>{{ currentSelectedFriend.online ? '在线' : '离线' }}</span>
-        </div>
-        <el-button
-          type="primary"
-          size="large"
-          @click="handleStartChat"
-          class="profile-start-chat-btn"
-        >
-          <el-icon><ChatDotRound /></el-icon>
-          <span>发消息</span>
-        </el-button>
-      </div>
-      
-      <!-- 聊天窗口（群聊或单聊） -->
-      <div v-if="currentChat || currentSelectGroup" class="chat-window-area">
-        <!-- 顶部标题栏 -->
-        <div class="chat-window-header">
-          <div class="chat-window-title">
-            <span class="chat-window-name">{{ currentSelectGroup ? currentSelectGroup.name : currentChat.name }}</span>
-            <span
-              v-if="!currentSelectGroup"
-              :class="[
-                'chat-window-status',
-                currentChat.online ? 'chat-window-status-online' : 'chat-window-status-offline'
-              ]"
-            >
-              {{ currentChat.online ? '在线' : '离线' }}
-            </span>
-            <span v-if="currentSelectGroup" class="chat-window-status">
-              {{ groupMemberList.length }} 人
-            </span>
-          </div>
-          <div class="chat-window-actions">
-            <el-icon class="chat-action-icon"><Search /></el-icon>
-            <el-icon
-              v-if="currentSelectGroup"
-              class="chat-action-icon"
-              @click="showGroupSidebar = !showGroupSidebar"
-            ><MoreFilled /></el-icon>
-            <el-icon
-              v-else
-              class="chat-action-icon"
-              @click="showChatDetail = !showChatDetail"
-            ><MoreFilled /></el-icon>
-          </div>
-        </div>
-
-        <!-- 聊天消息区域 -->
-        <div
-          ref="messagesContainer"
-          class="chat-messages-container"
+    <MainArea
+      :current-selected-friend="currentSelectedFriend"
+      :current-selected-group="currentSelectedGroup"
+      :current-chat="currentChat"
+      :current-select-group="currentSelectGroup"
+      :current-nav-tab="currentNavTab"
+      @start-chat="handleStartChat"
+      @start-group-chat="handleStartGroupChat"
+    >
+      <template #chat-window>
+        <ChatWindow
+          ref="chatWindowRef"
+          :current-chat="currentChat"
+          :current-select-group="currentSelectGroup"
+          :group-member-list="groupMemberList"
+          :messages="currentSelectGroup ? currentGroupMessages : currentMessages"
+          :format-time="formatTime"
+          :format-file-size="formatFileSize"
+          @toggle-group-sidebar="showGroupSidebar = !showGroupSidebar"
+          @toggle-chat-detail="showChatDetail = !showChatDetail"
+          @open-file="openFile"
+          @hide-emoji="showEmojiPicker = false"
         >
-          <div
-            v-for="(msg, index) in currentSelectGroup ? currentGroupMessages : currentMessages"
-            :key="index"
-            :class="[
-              'message-wrapper',
-              msg.isSelf ? 'message-self' : 'message-other'
-            ]"
-          >
-            <!-- 头像 -->
-            <div class="message-avatar">
-              <img
-                :src="msg.avatar"
-                class="message-avatar-img"
-              />
-            </div>
-
-            <!-- 消息内容 -->
-            <div
-              :class="[
-                'message-content',
-                msg.isSelf ? 'message-content-self' : 'message-content-other'
-              ]"
-            >
-              <div v-if="!msg.isSelf" class="message-sender-name">
-                {{ currentSelectGroup ? (msg.displayName || msg.sendUsername) : currentChat.name }}
-              </div>
-
-              <div class="message-bubble-wrapper">
-                <!-- 文本消息 -->
-                <div
-                  v-if="msg.type === 'text'"
-                  :class="[
-                    'message-bubble',
-                    msg.isSelf ? 'message-bubble-self' : 'message-bubble-other'
-                  ]"
-                >
-                  {{ msg.text }}
-                </div>
-
-                <!-- 图片文件消息 -->
-                <div
-                  v-else-if="msg.type === 'file' && msg.fileType === 'image'"
-                  :class="[
-                    'message-bubble',
-                    'message-image-bubble',
-                    msg.isSelf ? 'message-bubble-self' : 'message-bubble-other'
-                  ]"
-                  @click="openFile(msg.fileUrl)"
-                >
-                  <img
-                    :src="msg.fileUrl"
-                    :alt="msg.fileName"
-                    class="message-image"
-                    @error="handleImageError"
-                  />
-                  <div v-if="msg.fileSize" class="message-image-size">{{ formatFileSize(msg.fileSize) }}</div>
+          <template #input-area>
+            <!-- 待发送文件预览 -->
+            <div v-if="pendingFiles.length > 0" class="pending-files-area">
+              <div v-for="(file, index) in pendingFiles" :key="file.id" class="pending-file-item">
+                <div v-if="file.isImage" class="pending-image-wrapper">
+                  <img :src="file.previewUrl" :alt="file.name" class="pending-image" />
+                  <button @click="removePendingFile(index)" class="pending-file-remove-btn">×</button>
                 </div>
-
-                <!-- 文档文件消息 -->
-                <div
-                  v-else-if="msg.type === 'file'"
-                  :class="[
-                    'message-bubble',
-                    'message-file-bubble',
-                    msg.isSelf ? 'message-bubble-self' : 'message-bubble-other'
-                  ]"
-                  @click="openFile(msg.fileUrl)"
-                >
-                  <div class="message-file-content">
-                    <div class="message-file-icon">
-                      <el-icon :size="28"><Document /></el-icon>
-                    </div>
-                    <div class="message-file-info">
-                      <div class="message-file-name">{{ msg.fileName || msg.text }}</div>
-                      <div class="message-file-meta">
-                        <el-icon :size="12"><Download /></el-icon>
-                        <span>点击下载</span>
-                        <span v-if="msg.fileSize">· {{ formatFileSize(msg.fileSize) }}</span>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-
-                <!-- 时间显示在气泡下方 -->
-                <div
-                  :class="[
-                    'message-time',
-                    msg.isSelf ? 'message-time-right' : 'message-time-left'
-                  ]"
-                >
-                  {{ formatTime(msg.time) }}
+                <div v-else class="pending-file-wrapper">
+                  <span class="pending-file-icon"><Folder /></span>
+                  <span class="pending-file-name">{{ file.name }}</span>
+                  <button @click="removePendingFile(index)" class="pending-file-remove-btn">×</button>
                 </div>
               </div>
             </div>
-          </div>
-        </div>
 
-        <!-- 底部输入区域 -->
-        <div class="chat-input-area" @click="showEmojiPicker = false">
-          <!-- 待发送文件预览 -->
-          <div
-            v-if="pendingFiles.length > 0"
-            class="pending-files-area"
-          >
-            <div
-              v-for="(file, index) in pendingFiles"
-              :key="file.id"
-              class="pending-file-item"
-            >
-              <!-- 图片预览 -->
-              <div
-                v-if="file.isImage"
-                class="pending-image-wrapper"
-              >
-                <img
-                  :src="file.previewUrl"
-                  :alt="file.name"
-                  class="pending-image"
-                />
-                <button
-                  @click="removePendingFile(index)"
-                  class="pending-file-remove-btn"
-                >
-                  ×
-                </button>
-              </div>
-              <!-- 非图片文件预览 -->
-              <div
-                v-else
-                class="pending-file-wrapper"
-              >
-                <el-icon class="pending-file-icon"><Folder /></el-icon>
-                <span class="pending-file-name">{{ file.name }}</span>
-                <button
-                  @click="removePendingFile(index)"
-                  class="pending-file-remove-btn"
-                >
-                  ×
-                </button>
+            <div v-if="config.modules.fileUpload" class="input-toolbar">
+              <div class="emoji-button-wrapper">
+                <span class="input-toolbar-icon" @click.stop="showEmojiPicker = !showEmojiPicker"><ChatDotRound /></span>
+                <EmojiPicker :visible="showEmojiPicker" @select="selectEmoji" />
               </div>
+              <span class="input-toolbar-icon" @click="triggerFileSelect"><Folder /></span>
+              <span class="input-toolbar-icon"><Picture /></span>
             </div>
-          </div>
-
-          <div v-if="config.modules.fileUpload" class="input-toolbar">
-            <div class="emoji-button-wrapper">
-              <el-icon 
-                class="input-toolbar-icon" 
-                @click.stop="showEmojiPicker = !showEmojiPicker"
-              ><ChatDotRound /></el-icon>
-              <EmojiPicker 
-                :visible="showEmojiPicker" 
-                @select="selectEmoji"
+            <div class="input-textarea-wrapper">
+              <textarea
+                v-model="inputText"
+                @keydown.enter.prevent="handleSend"
+                @paste="handlePaste"
+                placeholder="输入消息或粘贴文件..."
+                class="message-input-textarea"
+                rows="3"
               />
             </div>
-            <el-icon
-              class="input-toolbar-icon"
-              @click="triggerFileSelect"
-            ><Folder /></el-icon>
-            <el-icon class="input-toolbar-icon"><Picture /></el-icon>
-          </div>
-          <div class="input-textarea-wrapper">
-            <textarea
-              v-model="inputText"
-              @keydown.enter.prevent="handleSend"
-              @paste="handlePaste"
-              placeholder="输入消息或粘贴文件..."
-              class="message-input-textarea"
-              rows="3"
-            />
-          </div>
-          <div class="input-send-wrapper">
-            <el-button
-              type="primary"
-              :disabled="!inputText.trim() && pendingFiles.length === 0"
-              @click="handleSend"
-              class="send-message-btn"
-            >
-              发送
-            </el-button>
-          </div>
-
-          <!-- 隐藏的文件 input -->
-          <input
-            ref="fileInputRef"
-            type="file"
-            multiple
-            class="hidden-file-input"
-            @change="handleFileSelect"
-          />
-        </div>
-      </div>
-
-      <!-- 空状态 -->
-      <div
-        v-else-if="!currentSelectedFriend"
-        class="chat-empty-state"
-      >
-        <el-icon :size="64" class="empty-state-icon"><ChatLineRound /></el-icon>
-        <div class="empty-state-text">
-          {{ currentNavTab === 'apply' ? '在左侧选择好友申请' : '在左侧选择好友开始聊天' }}
-        </div>
-      </div>
-    </div>
-
-    <!-- 群聊侧边栏 -->
-    <transition name="slide">
-      <div
-        v-if="showGroupSidebar && currentSelectGroup"
-        class="group-sidebar"
-      >
-        <!-- 关闭按钮 -->
-        <div class="group-sidebar-header">
-          <span class="group-sidebar-title">群聊信息</span>
-          <el-icon class="group-sidebar-close" @click="showGroupSidebar = false">
-            <Close />
-          </el-icon>
-        </div>
-
-        <div class="group-sidebar-content">
-          <!-- 群成员头像展示区 -->
-          <div class="group-members-avatar-section">
-            <div class="group-members-grid">
-              <div
-                v-for="member in groupMemberList.slice(0, 12)"
-                :key="member.username"
-                class="group-member-avatar-item"
-                @click="openEditMemberNick(member)"
-              >
-                <img
-                  :src="member.avatar ? `${config.api.baseUrl}${member.avatar}` : `https://api.dicebear.com/7.x/avataaars/svg?seed=${member.username}`"
-                  :alt="member.username"
-                  class="group-member-avatar-small"
-                />
-                <span class="group-member-nickname">{{ member.memberNick || member.username }}</span>
-              </div>
-              <div
-                v-if="groupMemberList.length > 12"
-                class="group-member-avatar-item"
-                @click="inviteMemberDialogVisible = true"
-              >
-                <div class="group-member-add-icon">
-                  <el-icon><Plus /></el-icon>
-                </div>
-                <span class="group-member-nickname">邀请</span>
-              </div>
-              <div
-                v-else
-                class="group-member-avatar-item"
-                @click="inviteMemberDialogVisible = true"
-              >
-                <div class="group-member-add-icon">
-                  <el-icon><Plus /></el-icon>
-                </div>
-                <span class="group-member-nickname">邀请</span>
-              </div>
-            </div>
-          </div>
-
-          <!-- 分割线 -->
-          <div class="group-divider"></div>
-
-          <!-- 群设置项 -->
-          <div class="group-settings-section">
-            <!-- 群名称 -->
-            <div class="group-setting-item" v-if="currentSelectGroup?.owner === myUsername">
-              <span class="group-setting-label">群聊名称</span>
-              <div class="group-setting-value-wrapper">
-                <div v-if="editingFields.groupNickname" class="group-edit-wrapper">
-                  <el-input
-                    v-model="tempEditValues.groupNickname"
-                    placeholder="请输入群聊名称"
-                    @keyup.enter="handleSaveEditField('groupNickname')"
-                    class="group-input-edit"
-                  />
-                  <div class="group-edit-buttons">
-                    <el-button size="small" @click="cancelEditField('groupNickname')">取消</el-button>
-                    <el-button size="small" type="primary" @click="handleSaveEditField('groupNickname')">保存</el-button>
-                  </div>
-                </div>
-                <div 
-                  v-else
-                  class="group-setting-value"
-                  @click="startEditField('groupNickname')"
-                >
-                  <span>{{ currentGroupInfo?.groupNickname || currentGroupInfo?.groupName || currentSelectGroup?.name || '' }}</span>
-                  <el-icon><Edit /></el-icon>
-                </div>
-              </div>
-            </div>
-            <div class="group-setting-item" v-else>
-              <span class="group-setting-label">群聊名称</span>
-              <span class="group-setting-value-text">{{ currentGroupInfo?.groupNickname || currentGroupInfo?.groupName || currentSelectGroup?.name || '' }}</span>
-            </div>
-
-            <!-- 群公告 -->
-            <div class="group-setting-item" v-if="currentSelectGroup?.owner === myUsername">
-              <span class="group-setting-label">群公告</span>
-              <div class="group-setting-value-wrapper">
-                <div v-if="editingFields.notice" class="group-edit-wrapper">
-                  <el-input
-                    v-model="tempEditValues.notice"
-                    type="textarea"
-                    :rows="3"
-                    placeholder="请输入群公告"
-                    class="group-input-edit"
-                  />
-                  <div class="group-edit-buttons">
-                    <el-button size="small" @click="cancelEditField('notice')">取消</el-button>
-                    <el-button size="small" type="primary" @click="handleSaveEditField('notice')">保存</el-button>
-                  </div>
-                </div>
-                <div 
-                  v-else
-                  class="group-setting-value"
-                  @click="startEditField('notice')"
-                >
-                  <span class="group-setting-value-text">{{ currentGroupInfo?.notice || '暂无公告' }}</span>
-                  <el-icon><Edit /></el-icon>
-                </div>
-              </div>
-            </div>
-            <div class="group-setting-item" v-else>
-              <span class="group-setting-label">群公告</span>
-              <span class="group-setting-value-text">{{ currentGroupInfo?.notice || '暂无公告' }}</span>
-            </div>
-
-            <!-- 备注 -->
-            <div class="group-setting-item" v-if="currentSelectGroup?.owner === myUsername">
-              <span class="group-setting-label">备注</span>
-              <div class="group-setting-value-wrapper">
-                <div v-if="editingFields.remark" class="group-edit-wrapper">
-                  <el-input
-                    v-model="tempEditValues.remark"
-                    placeholder="请输入备注"
-                    @keyup.enter="handleSaveEditField('remark')"
-                    class="group-input-edit"
-                  />
-                  <div class="group-edit-buttons">
-                    <el-button size="small" @click="cancelEditField('remark')">取消</el-button>
-                    <el-button size="small" type="primary" @click="handleSaveEditField('remark')">保存</el-button>
-                  </div>
-                </div>
-                <div 
-                  v-else
-                  class="group-setting-value"
-                  @click="startEditField('remark')"
-                >
-                  <span class="group-setting-value-text">{{ currentGroupInfo?.remark || '群聊的备注仅自己可见' }}</span>
-                  <el-icon><Edit /></el-icon>
-                </div>
-              </div>
-            </div>
-            <div class="group-setting-item" v-else>
-              <span class="group-setting-label">备注</span>
-              <span class="group-setting-value-text">{{ currentGroupInfo?.remark || '群聊的备注仅自己可见' }}</span>
-            </div>
-
-            <!-- 我在本群的昵称 -->
-            <div class="group-setting-item" @click="openMyNicknameEdit">
-              <span class="group-setting-label">我在本群的昵称</span>
-              <div class="group-setting-value">
-                <span class="group-setting-value-text">{{ myNicknameInGroup || myUsername }}</span>
-                <el-icon><Edit /></el-icon>
-              </div>
-            </div>
-
-            <div class="group-divider"></div>
-
-            <!-- 查找聊天内容 -->
-            <div class="group-setting-item">
-              <span class="group-setting-label">查找聊天内容</span>
-              <el-icon><ArrowRight /></el-icon>
-            </div>
-
-            <!-- 消息免打扰 -->
-            <div class="group-setting-item">
-              <span class="group-setting-label">消息免打扰</span>
-              <el-switch v-model="muteGroup" />
+            <div class="input-send-wrapper">
+              <Button
+                type="primary"
+                :disabled="!inputText.trim() && pendingFiles.length === 0"
+                @click="handleSend"
+                class="send-message-btn"
+              >发送</Button>
             </div>
+            <input ref="fileInputRef" type="file" multiple class="hidden-file-input" @change="handleFileSelect" />
+          </template>
+        </ChatWindow>
+      </template>
+    </MainArea>
 
-            <div class="group-divider"></div>
-
-            <!-- 群主专属功能 -->
-            <template v-if="currentSelectGroup.owner === myUsername">
-              <div class="group-setting-item danger" @click="handleDeleteGroup">
-                <span class="group-setting-label">解散群聊</span>
-              </div>
-            </template>
-
-            <!-- 普通成员退出 -->
-            <template v-else>
-              <div class="group-setting-item danger" @click="handleQuitGroup">
-                <span class="group-setting-label">删除并退出</span>
-              </div>
-            </template>
-          </div>
-        </div>
-      </div>
-    </transition>
+    <!-- 群聊侧边栏 -->
+    <GroupSidebar
+      :visible="showGroupSidebar && !!currentSelectGroup"
+      :current-select-group="currentSelectGroup"
+      :group-member-list="groupMemberList"
+      :is-remove-member-mode="isRemoveMemberMode"
+      :config="config"
+      :my-username="myUsername"
+      :editing-fields="editingFields"
+      :temp-edit-values="tempEditValues"
+      :current-group-info="currentGroupInfo"
+      :my-nickname-in-group="myNicknameInGroup"
+      :group-owner-username="groupOwnerUsername"
+      v-model:mute-group="muteGroup"
+      @close="showGroupSidebar = false"
+      @remove-member="handleRemoveMember"
+      @edit-member-nick="openEditMemberNick"
+      @invite-member="inviteMemberDialogVisible = true; isRemoveMemberMode = false"
+      @toggle-remove-mode="isRemoveMemberMode = !isRemoveMemberMode"
+      @start-edit="startEditField"
+      @cancel-edit="cancelEditField"
+      @save-field="handleSaveEditField"
+      @update:temp-edit-value="({ field, value }) => tempEditValues[field] = value"
+      @edit-my-nick="openMyNicknameEdit"
+      @show-group-detail="groupDetailVisible = true"
+      @delete-group="handleDeleteGroup"
+      @quit-group="handleQuitGroup"
+    />
 
     <!-- 右侧详情面板 -->
-    <div
-      v-if="showChatDetail"
-      class="chat-detail-panel"
-    >
+    <div v-if="showChatDetail" class="chat-detail-panel">
       <div class="chat-detail-header">聊天详情</div>
       <div class="chat-detail-content">
         <div class="chat-detail-profile">
-          <img
-            :src="currentChat?.avatar"
-            :alt="currentChat?.name"
-            class="chat-detail-avatar"
-          />
+          <img :src="currentChat?.avatar" :alt="currentChat?.name" class="chat-detail-avatar" />
           <div class="chat-detail-name">{{ currentChat?.name }}</div>
           <div class="chat-detail-actions">
             <div class="chat-detail-action-item">查找聊天记录</div>
@@ -717,296 +150,164 @@
       </div>
     </div>
 
-    <!-- 添加好友弹窗 -->
-    <el-dialog
-      v-model="addFriendDialogVisible"
-      title="添加好友"
+    <!-- 弹窗组件 -->
+    <AddFriendDialog
+      v-model:visible="addFriendDialogVisible"
+      v-model:search-text="addFriendSearchText"
+      :loading="loadingAvailableUsers"
+      :users="filteredAvailableUsers"
+      @add="addFriend"
+    />
+
+    <CreateGroupDialog
+      v-model:visible="createGroupDialogVisible"
+      v-model:group-name="newGroupName"
+      v-model:group-remark="newGroupRemark"
+      :friend-list="filteredFriendList"
+      :selected-members="selectedMembersForCreate"
+      @toggle-member="toggleMemberForCreate"
+      @create="handleCreateGroup"
+    />
+
+    <GroupDetailDialog
+      v-if="currentSelectGroup"
+      v-model:visible="groupDetailVisible"
+      :current-select-group="currentSelectGroup"
+      :group-member-list="groupMemberList"
+      :my-username="myUsername"
+      :config="config"
+      :group-owner-username="groupOwnerUsername"
+      @edit-info="openEditGroupInfo"
+      @delete="handleDeleteGroup"
+      @invite="inviteMemberDialogVisible = true"
+      @edit-member-nick="openEditMemberNick"
+      @remove-member="handleRemoveMember"
+      @transfer-owner="handleTransferOwner"
+      @quit="handleQuitGroup"
+    />
+
+    <!-- 其他弹窗（暂时保留在原处，后续可继续拆分） -->
+    <!-- 编辑群信息弹窗 -->
+    <Dialog
+      v-if="currentSelectGroup"
+      :model-value="groupInfoVisible"
+      @update:model-value="groupInfoVisible = $event"
+      title="编辑群信息"
       width="500px"
-      append-to-body
-    >
-      <div class="add-friend-search-wrapper">
-        <el-input
-          v-model="addFriendSearchText"
-          placeholder="搜索用户"
-          :prefix-icon="Search"
-          class="add-friend-search-input"
-        />
-      </div>
-      <div class="add-friend-users-list">
-        <el-empty v-if="loadingAvailableUsers" description="加载中..." />
-        <el-empty
-          v-else-if="filteredAvailableUsers.length === 0"
-          description="暂无用户"
-        />
-        <div
-          v-else
-          v-for="user in filteredAvailableUsers"
-          :key="user.username"
-          class="add-friend-user-item"
-        >
-          <div class="add-friend-user-info">
-            <img
-              :src="`https://api.dicebear.com/7.x/avataaars/svg?seed=${user.username}`"
-              :alt="user.username"
-              class="add-friend-user-avatar"
-            />
-            <div class="add-friend-user-name">{{ user.username }}</div>
-          </div>
-          <el-button type="primary" size="small" @click="addFriend(user)">添加</el-button>
-        </div>
-      </div>
-    </el-dialog>
-
-    <!-- 创建群聊弹窗 -->
-    <el-dialog
-      v-model="createGroupDialogVisible"
-      title="创建群聊"
-      width="600px"
-      append-to-body
     >
-      <div class="create-group-form">
+      <div class="edit-group-form">
         <div class="form-item">
           <label class="form-label">群名称</label>
-          <el-input
-            v-model="newGroupName"
+          <Input
+            v-model="editingGroupInfo.groupNickname"
             placeholder="请输入群名称"
-            maxlength="50"
           />
         </div>
         <div class="form-item">
           <label class="form-label">群备注</label>
-          <el-input
-            v-model="newGroupRemark"
+          <Input
+            v-model="editingGroupInfo.remark"
             type="textarea"
-            placeholder="请输入群备注（可选）"
             :rows="3"
-            maxlength="200"
+            placeholder="请输入群备注"
           />
         </div>
         <div class="form-item">
-          <label class="form-label">选择成员</label>
-          <div class="member-selection">
-            <el-empty v-if="filteredFriendList.length === 0" description="暂无好友可以添加" />
-            <div
-              v-else
-              class="member-list"
-            >
-              <div
-                v-for="friend in filteredFriendList"
-                :key="friend.id"
-                :class="[
-                  'member-item',
-                  selectedMembersForCreate.some(m => m.id === friend.id) ? 'member-selected' : ''
-                ]"
-                @click="toggleMemberForCreate(friend)"
-              >
-                <img
-                  :src="friend.avatar"
-                  :alt="friend.name"
-                  class="member-avatar"
-                />
-                <span class="member-name">{{ friend.name }}</span>
-                <el-icon v-if="selectedMembersForCreate.some(m => m.id === friend.id)" class="member-check"><CircleCheck /></el-icon>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <template #footer>
-        <el-button @click="createGroupDialogVisible = false">取消</el-button>
-        <el-button type="primary" @click="handleCreateGroup" :disabled="!newGroupName.trim()">创建</el-button>
-      </template>
-    </el-dialog>
-
-    <!-- 群聊详情弹窗 -->
-    <el-dialog
-      v-if="currentSelectGroup"
-      v-model="groupDetailVisible"
-      :title="currentSelectGroup.name"
-      width="500px"
-      append-to-body
-    >
-      <div class="group-detail-content">
-        <div class="group-info-section">
-          <div class="group-info-item">
-            <span class="info-label">群ID</span>
-            <span class="info-value">{{ currentSelectGroup.groupId }}</span>
-          </div>
-          <div class="group-info-item">
-            <span class="info-label">群主</span>
-            <span class="info-value">{{ currentSelectGroup.owner }}</span>
-          </div>
-          <div class="group-info-item">
-            <span class="info-label">成员数</span>
-            <span class="info-value">{{ groupMemberList.length }}</span>
-          </div>
-        </div>
-        
-        <div class="group-actions-section" v-if="currentSelectGroup.owner === myUsername">
-          <div class="section-header">
-            <span class="section-title">群管理</span>
-          </div>
-          <div class="group-actions-list">
-            <el-button type="primary" size="small" @click="openEditGroupInfo">
-              <el-icon><Edit /></el-icon>编辑群信息
-            </el-button>
-            <el-button type="danger" size="small" @click="handleDeleteGroup">
-              <el-icon><Delete /></el-icon>解散群聊
-            </el-button>
-          </div>
-        </div>
-        
-        <div class="group-members-section">
-          <div class="section-header">
-            <span class="section-title">群成员</span>
-            <el-button size="small" @click="inviteMemberDialogVisible = true">
-              <el-icon><Plus /></el-icon>邀请成员
-            </el-button>
-          </div>
-          <div class="group-members-list">
-            <el-empty v-if="groupMemberList.length === 0" description="暂无成员" />
-            <div
-              v-else
-              v-for="member in groupMemberList"
-              :key="member.id || member.username"
-              class="group-member-item"
-            >
-              <img
-                :src="member.avatar ? `${props.config.api.baseUrl}${member.avatar}` : `https://api.dicebear.com/7.x/avataaars/svg?seed=${member.username}`"
-                :alt="member.username"
-                class="group-member-avatar"
-              />
-              <div class="group-member-info">
-                <span class="group-member-name">{{ member.memberNick || member.username }}</span>
-                <span v-if="member.username === currentSelectGroup.owner" class="group-member-badge">群主</span>
-              </div>
-              <div class="group-member-actions" v-if="currentSelectGroup.owner === myUsername && member.username !== myUsername">
-                <el-button size="small" link @click="openEditMemberNick(member)">
-                  改昵称
-                </el-button>
-                <el-button size="small" link type="danger" @click="handleRemoveMember(member.username)">
-                  移除
-                </el-button>
-                <el-button size="small" link type="warning" @click="handleTransferOwner(member.username)">
-                  转让
-                </el-button>
-              </div>
-              <div class="group-member-actions" v-else-if="member.username === myUsername">
-                <el-button size="small" link @click="openEditMemberNick(member)">
-                  改昵称
-                </el-button>
-              </div>
-            </div>
-          </div>
+          <label class="form-label">群公告</label>
+          <Input
+            v-model="editingGroupInfo.notice"
+            type="textarea"
+            :rows="3"
+            placeholder="请输入群公告"
+          />
         </div>
       </div>
       <template #footer>
-        <el-button @click="groupDetailVisible = false">关闭</el-button>
-        <el-button type="danger" @click="handleQuitGroup">退出群聊</el-button>
-      </template>
-    </el-dialog>
-
-    <!-- 编辑群信息弹窗 -->
-    <el-dialog
-      v-if="currentSelectGroup"
-      v-model="groupInfoVisible"
-      title="编辑群信息"
-      width="500px"
-      append-to-body
-    >
-      <el-form label-width="80px">
-        <el-form-item label="群名称">
-          <el-input v-model="editingGroupInfo.groupNickname" placeholder="请输入群名称" />
-        </el-form-item>
-        <el-form-item label="群备注">
-          <el-input v-model="editingGroupInfo.remark" type="textarea" :rows="3" placeholder="请输入群备注" />
-        </el-form-item>
-        <el-form-item label="群公告">
-          <el-input v-model="editingGroupInfo.notice" type="textarea" :rows="3" placeholder="请输入群公告" />
-        </el-form-item>
-      </el-form>
-      <template #footer>
-        <el-button @click="groupInfoVisible = false">取消</el-button>
-        <el-button type="primary" @click="handleUpdateGroupInfo">保存</el-button>
+        <Button @click="groupInfoVisible = false">取消</Button>
+        <Button type="primary" @click="handleUpdateGroupInfo">保存</Button>
       </template>
-    </el-dialog>
+    </Dialog>
 
     <!-- 编辑群成员昵称弹窗 -->
-    <el-dialog
+    <Dialog
       v-if="currentSelectGroup"
-      v-model="memberNickDialogVisible"
+      :model-value="memberNickDialogVisible"
+      @update:model-value="memberNickDialogVisible = $event"
       title="编辑群昵称"
       width="400px"
-      append-to-body
     >
-      <el-form label-width="80px">
-        <el-form-item label="成员">
+      <div class="edit-member-nick-form">
+        <div class="form-item">
+          <label class="form-label">成员</label>
           <span>{{ editingMemberNick.targetUsername }}</span>
-        </el-form-item>
-        <el-form-item label="群昵称">
-          <el-input v-model="editingMemberNick.memberNick" placeholder="请输入群昵称" />
-        </el-form-item>
-      </el-form>
+        </div>
+        <div class="form-item">
+          <label class="form-label">群昵称</label>
+          <Input
+            v-model="editingMemberNick.memberNick"
+            placeholder="请输入群昵称"
+          />
+        </div>
+      </div>
       <template #footer>
-        <el-button @click="memberNickDialogVisible = false">取消</el-button>
-        <el-button type="primary" @click="handleUpdateMemberNick">保存</el-button>
+        <Button @click="memberNickDialogVisible = false">取消</Button>
+        <Button type="primary" @click="handleUpdateMemberNick">保存</Button>
       </template>
-    </el-dialog>
+    </Dialog>
 
     <!-- 消息已读成员弹窗 -->
-    <el-dialog
+    <Dialog
       v-if="currentSelectGroup"
-      v-model="msgReadUserDialogVisible"
+      :model-value="msgReadUserDialogVisible"
+      @update:model-value="msgReadUserDialogVisible = $event"
       title="消息已读状态"
       width="500px"
-      append-to-body
     >
       <div class="msg-read-users-content">
         <div class="read-users-section">
           <div class="section-title">
-            <el-icon><Check /></el-icon>已读 ({{ currentMsgReadList.readUserList.length }})
+            <Check />已读 ({{ currentMsgReadList.readUserList.length }})
           </div>
           <div class="users-list">
-            <el-empty v-if="currentMsgReadList.readUserList.length === 0" description="暂无已读成员" />
+            <Empty v-if="currentMsgReadList.readUserList.length === 0" description="暂无已读成员" />
             <div v-else class="users-tag-list">
-              <el-tag v-for="user in currentMsgReadList.readUserList" :key="user" class="user-tag">
+              <Tag v-for="user in currentMsgReadList.readUserList" :key="user" class="user-tag">
                 {{ user }}
-              </el-tag>
+              </Tag>
             </div>
           </div>
         </div>
         <div class="unread-users-section">
           <div class="section-title">
-            <el-icon><Clock /></el-icon>未读 ({{ currentMsgReadList.unreadUserList.length }})
+            <Clock />未读 ({{ currentMsgReadList.unreadUserList.length }})
           </div>
           <div class="users-list">
-            <el-empty v-if="currentMsgReadList.unreadUserList.length === 0" description="全部已读" />
+            <Empty v-if="currentMsgReadList.unreadUserList.length === 0" description="全部已读" />
             <div v-else class="users-tag-list">
-              <el-tag v-for="user in currentMsgReadList.unreadUserList" :key="user" type="info" class="user-tag">
+              <Tag v-for="user in currentMsgReadList.unreadUserList" :key="user" type="info" class="user-tag">
                 {{ user }}
-              </el-tag>
+              </Tag>
             </div>
           </div>
         </div>
       </div>
       <template #footer>
-        <el-button @click="msgReadUserDialogVisible = false">关闭</el-button>
+        <Button @click="msgReadUserDialogVisible = false">关闭</Button>
       </template>
-    </el-dialog>
+    </Dialog>
 
     <!-- 邀请成员弹窗 -->
-    <el-dialog
+    <Dialog
       v-if="currentSelectGroup"
-      v-model="inviteMemberDialogVisible"
+      :model-value="inviteMemberDialogVisible"
+      @update:model-value="inviteMemberDialogVisible = $event"
       title="邀请成员"
       width="500px"
-      append-to-body
     >
       <div class="invite-member-content">
         <div class="invite-member-list">
-          <el-empty v-if="filteredFriendList.length === 0" description="暂无好友可以邀请" />
+          <Empty v-if="filteredFriendList.length === 0" description="暂无好友可以邀请" />
           <div
-            v-else
             class="member-list"
           >
             <div
@@ -1024,26 +325,26 @@
                 class="member-avatar"
               />
               <span class="member-name">{{ friend.name }}</span>
-              <el-icon v-if="selectedMembersForInvite.some(m => m.id === friend.id)" class="member-check"><CircleCheck /></el-icon>
+              <CircleCheck v-if="selectedMembersForInvite.some(m => m.id === friend.id)" class="member-check" />
             </div>
           </div>
         </div>
       </div>
       <template #footer>
-        <el-button @click="inviteMemberDialogVisible = false">取消</el-button>
-        <el-button type="primary" @click="handleInviteMember" :disabled="selectedMembersForInvite.length === 0">
+        <Button @click="inviteMemberDialogVisible = false">取消</Button>
+        <Button type="primary" @click="handleInviteMember" :disabled="selectedMembersForInvite.length === 0">
           邀请 {{ selectedMembersForInvite.length }} 人
-        </el-button>
+        </Button>
       </template>
-    </el-dialog>
+    </Dialog>
 
     <!-- 用户设置弹窗 -->
-    <el-dialog
-      v-model="showSettingsDialog"
+    <Dialog
+      :model-value="showSettingsDialog"
+      @update:model-value="showSettingsDialog = $event"
       title="个人设置"
       width="560px"
       :close-on-click-modal="false"
-      append-to-body
       class="chat-settings-dialog"
     >
       <div class="chat-settings-container">
@@ -1060,7 +361,7 @@
               class="chat-settings-avatar-edit"
               @click="triggerAvatarUpload"
             >
-              <el-icon :size="18" class="chat-settings-avatar-icon"><Camera /></el-icon>
+              <span :size="18" class="chat-settings-avatar-icon"><Camera /></span>
             </div>
             <input
               ref="avatarInputRef"
@@ -1076,33 +377,61 @@
           </div>
         </div>
 
-        <!-- 用户信息表单 -->
+        <!-- 主题选择 -->
         <div class="chat-settings-form-section">
           <div class="chat-settings-form-header">
             <div class="chat-settings-form-title">
-              <el-icon><UserFilled /></el-icon>
-              个人信息
+              <Setting />
+              主题设置
             </div>
-            <el-button
-              v-if="!isEditingUserInfo"
-              type="primary"
+          </div>
+          <div class="chat-settings-form">
+            <div class="theme-options">
+              <div
+                v-for="themeOption in THEME_OPTIONS_WITH_ICONS"
+                :key="themeOption.value"
+                :class="[
+                  'theme-option',
+                  currentTheme === themeOption.value ? 'theme-option-active' : ''
+                ]"
+                @click="setTheme(themeOption.value)"
+              >
+                <span class="theme-option-icon">
+                  <component :is="themeOption.iconComponent" />
+                </span>
+                <span class="theme-option-label">{{ themeOption.label }}</span>
+                <Check v-if="currentTheme === themeOption.value" class="theme-option-check" />
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 用户信息表单 -->
+        <div class="chat-settings-form-section">
+          <div class="chat-settings-form-header">
+            <div class="chat-settings-form-title">
+              <UserFilled />
+              个人信息
+            </div>
+            <Button
+              v-if="!isEditingUserInfo"
+              type="primary"
               size="small"
               @click="startEditUserInfo"
               class="chat-settings-edit-btn"
             >
               编辑
-            </el-button>
+            </Button>
           </div>
 
           <div class="chat-settings-form">
             <!-- 昵称 -->
             <div class="chat-settings-form-item">
               <label class="chat-settings-form-label">昵称</label>
-              <el-input
+              <Input
                 v-if="isEditingUserInfo"
                 v-model="editingUserInfo.nickname"
                 placeholder="请输入昵称"
-                size="large"
               />
               <div
                 v-else
@@ -1115,11 +444,10 @@
             <!-- 邮箱 -->
             <div class="chat-settings-form-item">
               <label class="chat-settings-form-label">邮箱</label>
-              <el-input
+              <Input
                 v-if="isEditingUserInfo"
                 v-model="editingUserInfo.email"
                 placeholder="请输入邮箱"
-                size="large"
               />
               <div
                 v-else
@@ -1132,11 +460,10 @@
             <!-- 手机号 -->
             <div class="chat-settings-form-item">
               <label class="chat-settings-form-label">手机号</label>
-              <el-input
+              <Input
                 v-if="isEditingUserInfo"
                 v-model="editingUserInfo.phone"
                 placeholder="请输入手机号"
-                size="large"
               />
               <div
                 v-else
@@ -1149,13 +476,12 @@
             <!-- 个人简介 -->
             <div class="chat-settings-form-item">
               <label class="chat-settings-form-label">个人简介</label>
-              <el-input
+              <Input
                 v-if="isEditingUserInfo"
                 v-model="editingUserInfo.bio"
                 type="textarea"
                 :rows="4"
                 placeholder="介绍一下自己吧..."
-                size="large"
               />
               <div
                 v-else
@@ -1167,18 +493,17 @@
 
             <!-- 编辑按钮 -->
             <div v-if="isEditingUserInfo" class="chat-settings-form-actions">
-              <el-button size="default" @click="cancelEditUserInfo">取消</el-button>
-              <el-button
+              <Button @click="cancelEditUserInfo">取消</Button>
+              <Button
                 type="primary"
-                size="default"
                 :loading="savingUserInfo"
                 @click="saveUserInfo"
-              >保存更改</el-button>
+              >保存更改</Button>
             </div>
           </div>
         </div>
       </div>
-    </el-dialog>
+    </Dialog>
 
     <!-- 头像裁剪弹窗 -->
     <AvatarCrop
@@ -1188,13 +513,13 @@
     />
 
     <!-- 右键菜单 -->
-    <div
-      v-if="contextMenu.visible"
-      class="chat-context-menu"
-      :style="{ left: contextMenu.x + 'px', top: contextMenu.y + 'px' }"
+    <ContextMenu
+      :visible="contextMenu.visible"
+      :x="contextMenu.x"
+      :y="contextMenu.y"
     >
-      <div class="chat-context-menu-item" @click="handleRemoveChat">删除聊天</div>
-    </div>
+      <div class="context-menu-item danger" @click="handleRemoveChat">删除聊天</div>
+    </ContextMenu>
   </div>
 </template>
 
@@ -1205,34 +530,77 @@ import {
   ChatDotRound,
   Folder,
   Picture,
-  ChatLineRound,
-  MoreFilled,
-  Search,
   Plus,
+  User,
   UserFilled,
   Bell,
   Setting,
-  Document,
-  Download,
   CircleCheck,
   Edit,
   Delete,
   Check,
   Clock,
   Close,
-  ArrowRight
-} from '@element-plus/icons-vue'
+  ArrowRight,
+  ArrowDown,
+  Sunny,
+  Moon,
+  Monitor
+} from './ui/icons/index.js'
 import { useChat } from '../composables/useChat.js'
-import { ElMessage, ElMessageBox } from 'element-plus'
+import { useTheme } from '../composables/useTheme.js'
+import { THEME_OPTIONS } from '../const/theme.js'
+import { useMessageBox } from '../composables/useMessageBox.js'
 import AvatarCrop from './AvatarCrop.vue'
 import EmojiPicker from './EmojiPicker.vue'
 
+// 导入自定义 UI 组件
+import { Button, Dialog, Input, Empty, Tag } from './ui/index.js'
+
+// 导入新拆分的子组件
+import Sidebar from './chat/Sidebar.vue'
+import ContentList from './chat/ContentList.vue'
+import MainArea from './chat/MainArea.vue'
+import ChatWindow from './chat/ChatWindow.vue'
+import GroupSidebar from './chat/GroupSidebar.vue'
+import AddFriendDialog from './chat/dialogs/AddFriendDialog.vue'
+import CreateGroupDialog from './chat/dialogs/CreateGroupDialog.vue'
+import GroupDetailDialog from './chat/dialogs/GroupDetailDialog.vue'
+import ContextMenu from './chat/ContextMenu.vue'
+
+// 创建 Message 工具函数（简单实现）
+const ElMessage = {
+  success: (text) => console.log('Success:', text),
+  warning: (text) => console.warn('Warning:', text),
+  error: (text) => console.error('Error:', text),
+  info: (text) => console.info('Info:', text)
+}
+
+const ElMessageBox = useMessageBox()
+
 const props = defineProps({
-  config: { type: Object, required: true }
+  config: { type: Object, required: true },
+  groupOwnerUsername: { type: String, default: '' }
 })
 
 const emit = defineEmits(['message', 'send', 'error', 'init'])
 
+// 初始化主题系统
+const { currentTheme, appliedTheme, setTheme, THEMES } = useTheme()
+
+// 图标映射
+const iconMap = {
+  sun: Sunny,
+  moon: Moon,
+  monitor: Monitor
+}
+
+// 为 THEME_OPTIONS 绑定图标组件
+const THEME_OPTIONS_WITH_ICONS = THEME_OPTIONS.map(opt => ({
+  ...opt,
+  iconComponent: iconMap[opt.icon]
+}))
+
 const {
   myUsername,
   myAvatar,
@@ -1256,6 +624,7 @@ const {
   // ========== 群聊相关 ==========
   activeTab,
   groupList,
+  chatList: groupChatList, // 正在聊天的群聊
   currentSelectGroup,
   groupMsgList,
   groupMemberList,
@@ -1272,6 +641,7 @@ const {
   currentAllMessages,
   groupInfoVisible,
   editingGroupInfo,
+  isRemoveMemberMode,
   editingMemberNick,
   memberNickDialogVisible,
   msgReadUserDialogVisible,
@@ -1302,7 +672,7 @@ const {
   getGroupList,
   getGroupHistory,
   getGroupMembers,
-  selectGroup,
+  selectGroup: selectGroupFromComposable,
   createGroup,
   inviteGroupMember,
   quitGroup,
@@ -1325,7 +695,8 @@ const {
   updateSingleGroupField,
   startEditField,
   cancelEditField,
-  saveEditField
+  saveEditField,
+  setGroupToChatStatus
 
 } = useChat(props.config, (message) => {
   emit('message', message)
@@ -1334,12 +705,8 @@ const {
 const navTabs = computed(() => {
   const tabs = [{ id: 'chat', icon: ChatDotRound, badge: 0 }]
   
-  if (props.config.modules.friends) {
-    tabs.push({ id: 'friends', icon: UserFilled, badge: 0 })
-  }
-  
-  if (props.config.modules.groups) {
-    tabs.push({ id: 'groups', icon: UserFilled, badge: 0 })
+  if (props.config.modules.friends || props.config.modules.groups) {
+    tabs.push({ id: 'contacts', icon: UserFilled, badge: 0 })
   }
   
   if (props.config.modules.apply) {
@@ -1353,6 +720,7 @@ const currentNavTab = ref('chat')
 const currentChatId = ref(null)
 const currentChat = ref(null)
 const currentSelectedFriend = ref(null)
+const currentSelectedGroup = ref(null)
 const showChatDetail = ref(false)
 const isEditingUserInfo = ref(false)
 const editingUserInfo = ref({ nickname: '', email: '', phone: '', bio: '' })
@@ -1367,6 +735,59 @@ const pendingFiles = ref([])
 const contextMenu = ref({ visible: false, x: 0, y: 0, chat: null })
 const showEmojiPicker = ref(false)
 
+// 联系人列表折叠状态
+const friendsCollapsed = ref(false)
+const groupsCollapsed = ref(false)
+
+const chatWindowRef = ref(null)
+
+// 组合的聊天列表（好友+群聊）
+const combinedChatList = computed(() => {
+  const friends = filteredUsers.value.map(u => ({ ...u, type: 'friend' }))
+  
+  const groups = groupChatList.value.map(g => {
+    // 使用接口返回的 groupAvatarList 来生成 memberAvatars
+    const memberAvatars = (g.groupAvatarList || []).map((avatarPath, index) => ({
+      username: `member-${index}`,
+      avatar: `${props.config.api.baseUrl}${avatarPath}`
+    })).slice(0, 4)
+    
+    // 获取最后一条消息
+    const lastMsg = g.lastMsgContent || '暂无消息'
+    
+    // 获取最后消息发送者
+    const lastMsgSender = g.lastMsgSender || ''
+    
+    // 获取未读数
+    const unread = g.unreadCount || 0
+    
+    // 获取最后时间
+    const lastTime = g.lastMsgTime
+    
+    return {
+      id: g.groupId,
+      groupId: g.groupId,
+      name: g.groupName,
+      avatar: `https://api.dicebear.com/7.x/avataaars/svg?seed=${g.groupId}`,
+      memberAvatars,
+      lastMsg: lastMsg,
+      lastMsgSender: lastMsgSender,
+      lastTime: lastTime,
+      unread: unread,
+      type: 'group'
+    }
+  })
+  
+  const result = [...friends, ...groups].sort((a, b) => {
+    // 按时间排序
+    if (!a.lastTime) return 1
+    if (!b.lastTime) return -1
+    return new Date(b.lastTime) - new Date(a.lastTime)
+  })
+  
+  return result
+})
+
 // 群聊侧边栏相关
 const showGroupSidebar = ref(false)
 const muteGroup = ref(false)
@@ -1405,13 +826,53 @@ const hideContextMenu = () => {
 
 const handleRemoveChat = async () => {
   if (!contextMenu.value.chat) return
-  const success = await setFriendToChatStatus(contextMenu.value.chat.id, 0)
-  if (success) {
-    if (currentChatId.value === contextMenu.value.chat.id) {
-      currentChatId.value = null
-      currentChat.value = null
+  
+  const chat = contextMenu.value.chat
+  
+  try {
+    // 确认对话框
+    const confirmText = chat.type === 'group' 
+      ? `确定要删除与「${chat.name}」的群聊吗？` 
+      : `确定要删除与「${chat.name}」的聊天吗？`
+    
+    await ElMessageBox.confirm(confirmText, '删除聊天', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning'
+    })
+    
+    let success = false
+    
+    if (chat.type === 'group') {
+      // 群聊，使用 setGroupToChatStatus
+      success = await setGroupToChatStatus(chat.groupId, 0)
+      if (success) {
+        if (currentSelectGroup.value?.groupId === chat.groupId) {
+          currentSelectGroup.value = null
+          currentSelectedGroup.value = null
+        }
+      }
+    } else {
+      // 好友，使用 setFriendToChatStatus
+      success = await setFriendToChatStatus(chat.id, 0)
+      if (success) {
+        if (currentChatId.value === chat.id) {
+          currentChatId.value = null
+          currentChat.value = null
+        }
+      }
+    }
+    
+    if (success) {
+      ElMessage.success('删除聊天成功')
+    }
+  } catch (error) {
+    if (error !== 'cancel') {
+      console.error('删除聊天失败:', error)
+      ElMessage.error('删除聊天失败')
     }
   }
+  
   hideContextMenu()
 }
 
@@ -1432,19 +893,18 @@ const selectChat = (chat) => {
 
 const selectFriend = (friend) => {
   currentSelectedFriend.value = friend
+  currentSelectedGroup.value = null
   currentChatId.value = null
   currentChat.value = null
   currentSelectGroup.value = null
 }
 
-const selectGroupChat = (group) => {
-  currentSelectGroup.value = group
+const selectGroup = (group) => {
+  currentSelectedGroup.value = group
+  currentSelectedFriend.value = null
   currentChatId.value = null
   currentChat.value = null
-  currentSelectedFriend.value = null
-  showChatDetail.value = false
-  groupDetailVisible.value = false
-  selectGroup(group)
+  currentSelectGroup.value = null
 }
 
 const handleStartChat = async () => {
@@ -1462,6 +922,42 @@ const handleStartChat = async () => {
   }
 }
 
+const handleStartGroupChat = async () => {
+  if (!currentSelectedGroup.value) return
+  
+  const success = await setGroupToChatStatus(currentSelectedGroup.value.groupId, 1)
+  if (success) {
+    currentNavTab.value = 'chat'
+    await nextTick()
+    const chatItem = combinedChatList.value.find(item => item.type === 'group' && item.groupId === currentSelectedGroup.value.groupId)
+    if (chatItem) {
+      selectGroupChat(chatItem)
+    } else {
+      // 如果在组合列表中没找到，直接选择
+      selectGroupChat(currentSelectedGroup.value)
+    }
+    currentSelectedGroup.value = null
+  }
+}
+
+const selectGroupChat = async (group) => {
+  currentSelectGroup.value = group
+  currentChatId.value = null
+  currentChat.value = null
+  currentSelectedFriend.value = null
+  currentSelectedGroup.value = null
+  showChatDetail.value = false
+  groupDetailVisible.value = false
+  
+  // 如果群聊还不在聊天列表中，设置为聊天状态
+  const isInChatList = groupChatList.value.some(g => g.groupId === group.groupId)
+  if (!isInChatList) {
+    await setGroupToChatStatus(group.groupId, 1)
+  }
+  
+  selectGroupFromComposable(group)
+}
+
 const handleAvatarClick = () => {
   showSettingsDialog.value = true
 }
@@ -1588,32 +1084,6 @@ const selectEmoji = (emoji) => {
   showEmojiPicker.value = false
 }
 
-// 获取群聊头像网格样式
-const getGroupAvatarGridStyle = (count, index) => {
-  const styles = {}
-  
-  if (count === 1) {
-    styles.width = '100%'
-    styles.height = '100%'
-  } else if (count === 2) {
-    styles.width = '50%'
-    styles.height = '100%'
-  } else if (count === 3) {
-    if (index === 0) {
-      styles.width = '100%'
-      styles.height = '50%'
-    } else {
-      styles.width = '50%'
-      styles.height = '50%'
-    }
-  } else {
-    styles.width = '50%'
-    styles.height = '50%'
-  }
-  
-  return styles
-}
-
 // ========== 群聊相关方法 ==========
 const toggleMemberForCreate = (friend) => {
   const index = selectedMembersForCreate.value.findIndex(m => m.id === friend.id)
@@ -1675,9 +1145,24 @@ const handleQuitGroup = async () => {
   // 处理移除群成员
   const handleRemoveMember = async (username) => {
     try {
-      await removeGroupMember(username)
+      await ElMessageBox.confirm(
+        `确定要将成员“${username}”移出群聊吗？`,
+        '移除成员',
+        {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }
+      )
+      const success = await removeGroupMember(username, false)
+      if (success) {
+        ElMessage.success('移除成功')
+      }
     } catch (error) {
-      console.error('移除失败', error)
+      if (error !== 'cancel') {
+        console.error('移除失败', error)
+        ElMessage.error('移除失败')
+      }
     }
   }
 
@@ -1803,1675 +1288,6 @@ onUnmounted(() => {
 })
 </script>
 
-<style scoped>
-/* ========== 基础样式 ========== */
-.chat-panel {
-  display: flex;
-  height: 680px;
-  background: rgba(255, 255, 255, 0.7);
-  backdrop-filter: blur(20px);
-  -webkit-backdrop-filter: blur(20px);
-  overflow: hidden;
-  border-radius: 20px;
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12),
-              0 2px 12px rgba(0, 0, 0, 0.08);
-  border: 1px solid rgba(255, 255, 255, 0.3);
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-}
-
-/* ========== 左侧导航栏 ========== */
-.chat-sidebar {
-  width: 64px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 8px;
-  background: rgba(249, 250, 251, 0.6);
-  backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
-  border-right: 1px solid rgba(229, 231, 235, 0.5);
-}
-
-.sidebar-avatar {
-  margin-top: 16px;
-  margin-bottom: 16px;
-  cursor: pointer;
-}
-
-.sidebar-avatar-img {
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-  border: 2px solid #e5e7eb;
-  object-fit: cover;
-}
-
-.sidebar-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;
-}
-
-.sidebar-nav-item-active {
-  background-color: #dcfce7;
-  color: #07c160;
-}
-
-.sidebar-nav-item-inactive {
-  color: #6b7280;
-}
-
-.sidebar-nav-item-inactive:hover {
-  background-color: #f3f4f6;
-}
-
-.sidebar-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;
-}
-
-.sidebar-spacer {
-  flex: 1;
-}
-
-/* ========== 中间内容面板 ========== */
-.chat-content-panel {
-  width: 288px;
-  background: rgba(245, 245, 245, 0.5);
-  backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
-  border-right: 1px solid rgba(229, 231, 235, 0.5);
-  display: flex;
-  flex-direction: column;
-}
-
-.chat-search-bar {
-  padding: 12px;
-}
-
-.chat-search-input {
-  width: 100%;
-}
-
-.chat-content-scroll {
-  flex: 1;
-  overflow-y: auto;
-  min-height: 0;
-}
-
-/* 聊天列表项 */
-.chat-list-item {
-  display: flex;
-  align-items: center;
-  padding: 12px;
-  cursor: pointer;
-  transition: background-color 0.2s;
-  border-radius: 8px;
-  margin: 0 8px;
-}
-
-.chat-list-item:hover {
-  background: rgba(229, 229, 229, 0.6);
-}
-
-.chat-list-item-active {
-  background: rgba(7, 193, 96, 0.15);
-}
-
-.chat-list-avatar-wrapper {
-  position: relative;
-  flex-shrink: 0;
-}
-
-.chat-list-avatar {
-  width: 44px;
-  height: 44px;
-  border-radius: 50%;
-  object-fit: cover;
-}
-
-/* 多方格群聊头像 */
-.group-avatar-grid {
-  width: 44px;
-  height: 44px;
-  border-radius: 8px;
-  overflow: hidden;
-  display: flex;
-  flex-wrap: wrap;
-  background-color: #f3f4f6;
-}
-
-.group-avatar-item {
-  overflow: hidden;
-  box-sizing: border-box;
-  border: 0.5px solid rgba(255, 255, 255, 0.3);
-}
-
-.group-avatar-img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.chat-list-online-indicator {
-  position: absolute;
-  bottom: 0;
-  right: 0;
-  width: 12px;
-  height: 12px;
-  background-color: #22c55e;
-  border-radius: 50%;
-  border: 2px solid white;
-}
-
-.chat-list-online-indicator.chat-list-offline {
-  background-color: #9ca3af;
-}
-
-.chat-list-info {
-  margin-left: 12px;
-  flex: 1;
-  overflow: hidden;
-}
-
-.chat-list-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.chat-list-name {
-  font-weight: 500;
-  color: #1f2937;
-  font-size: 14px;
-}
-
-.chat-list-time {
-  font-size: 12px;
-  color: #9ca3af;
-}
-
-.chat-list-preview {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-top: 4px;
-}
-
-.chat-list-last-msg {
-  font-size: 12px;
-  color: #6b7280;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  padding-right: 8px;
-  flex: 1;
-}
-
-.chat-list-unread {
-  background-color: #ef4444;
-  color: white;
-  font-size: 10px;
-  border-radius: 9999px;
-  padding: 2px 6px;
-  min-width: 18px;
-  min-height: 18px;
-  height: 18px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-  line-height: 1;
-}
-
-/* 添加好友 */
-.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: #07c160;
-  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;
-}
-
-.friend-request-info {
-  display: flex;
-  align-items: center;
-}
-
-.friend-request-avatar {
-  width: 44px;
-  height: 44px;
-  border-radius: 50%;
-  object-fit: cover;
-}
-
-.friend-request-details {
-  margin-left: 12px;
-}
-
-.friend-request-username {
-  font-weight: 500;
-  color: #1f2937;
-  font-size: 14px;
-}
-
-.friend-request-desc {
-  font-size: 12px;
-  color: #6b7280;
-  margin-top: 4px;
-}
-
-/* ========== 右侧聊天区域 ========== */
-.chat-main-area {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
-  background: rgba(255, 255, 255, 0.5);
-  backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
-}
-
-/* 好友信息 */
-.friend-profile-area {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 32px;
-  background: rgba(245, 245, 245, 0.4);
-}
-
-.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;
-}
-
-.profile-status-dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-}
-
-.profile-status-online {
-  background-color: #22c55e;
-}
-
-.profile-status-offline {
-  background-color: #9ca3af;
-}
-
-.profile-start-chat-btn {
-  width: 160px;
-}
-
-/* 聊天窗口 */
-.chat-window-area {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-}
-
-.chat-window-header {
-  height: 56px;
-  border-bottom: 1px solid rgba(229, 231, 235, 0.5);
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 16px;
-  background: rgba(255, 255, 255, 0.3);
-  backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
-}
-
-.chat-window-title {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.chat-window-name {
-  font-weight: 500;
-  color: #1f2937;
-}
-
-.chat-window-status {
-  font-size: 12px;
-  padding: 2px 8px;
-  border-radius: 4px;
-}
-
-.chat-window-status-online {
-  background-color: #dcfce7;
-  color: #16a34a;
-}
-
-.chat-window-status-offline {
-  background-color: #f3f4f6;
-  color: #6b7280;
-}
-
-.chat-window-actions {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  color: #6b7280;
-}
-
-.chat-action-icon {
-  cursor: pointer;
-}
-
-.chat-action-icon:hover {
-  color: #374151;
-}
-
-/* 消息容器 */
-.chat-messages-container {
-  flex: 1;
-  overflow-y: auto;
-  padding: 16px;
-  background: rgba(245, 245, 245, 0.3);
-  min-height: 0;
-}
-
-.chat-messages-container::-webkit-scrollbar {
-  width: 6px;
-}
-
-.chat-messages-container::-webkit-scrollbar-thumb {
-  background: #ccc;
-  border-radius: 3px;
-}
-
-.chat-messages-container::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-/* 消息样式 */
-.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;
-}
-
-.message-avatar-img {
-  width: 40px;
-  height: 40px;
-  border-radius: 8px;
-  object-fit: cover;
-}
-
-.message-content {
-  display: flex;
-  flex-direction: column;
-  max-width: 75%;
-}
-
-.message-content-self {
-  margin-right: 12px;
-  align-items: flex-end;
-}
-
-.message-content-other {
-  margin-left: 12px;
-  align-items: flex-start;
-}
-
-.message-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);
-}
-
-.message-bubble-self {
-  background-color: #95ec69;
-  color: #1f2937;
-  position: relative;
-}
-
-.message-bubble-self::after {
-  content: '';
-  position: absolute;
-  right: -5px;
-  top: 10px;
-  width: 10px;
-  height: 10px;
-  background-color: #95ec69;
-  transform: rotate(45deg);
-  box-shadow: 2px -2px 2px 0 rgba(0, 0, 0, 0.05);
-}
-
-.message-bubble-other {
-  background-color: white;
-  color: #1f2937;
-  position: relative;
-}
-
-.message-bubble-other::after {
-  content: '';
-  position: absolute;
-  left: -5px;
-  top: 10px;
-  width: 10px;
-  height: 10px;
-  background-color: white;
-  transform: rotate(45deg);
-  box-shadow: -2px 2px 2px 0 rgba(0, 0, 0, 0.05);
-}
-
-/* 图片消息 */
-.message-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;
-  padding: 0;
-}
-
-.message-image {
-  width: 100%;
-  height: auto;
-  display: block;
-}
-
-.message-image-size {
-  position: absolute;
-  left: 4px;
-  bottom: 0;
-  color: white;
-  font-size: 10px;
-}
-
-/* 文件消息 */
-.message-file-bubble {
-  border-radius: 8px;
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-  cursor: pointer;
-  overflow: hidden;
-  min-width: 200px;
-}
-
-.message-file-content {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 12px 16px;
-}
-
-.message-file-icon {
-  width: 40px;
-  height: 40px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 8px;
-  flex-shrink: 0;
-}
-
-.message-bubble-self .message-file-icon {
-  color: #374151;
-}
-
-.message-bubble-other .message-file-icon {
-  color: #6b7280;
-}
-
-.message-file-info {
-  flex: 1;
-  min-width: 0;
-}
-
-.message-file-name {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 1.2;
-}
-
-.message-bubble-self .message-file-name {
-  color: #1f2937;
-}
-
-.message-bubble-other .message-file-name {
-  color: #1f2937;
-}
-
-.message-file-meta {
-  font-size: 12px;
-  margin-top: 4px;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.message-bubble-self .message-file-meta {
-  color: #4b5563;
-}
-
-.message-bubble-other .message-file-meta {
-  color: #6b7280;
-}
-
-.message-time {
-  font-size: 10px;
-  color: #9ca3af;
-  margin-top: 4px;
-}
-
-.message-time-right {
-  text-align: right;
-}
-
-.message-time-left {
-  text-align: left;
-}
-
-/* 输入区域 */
-.chat-input-area {
-  background: rgba(255, 255, 255, 0.6);
-  backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
-  border-top: 1px solid rgba(229, 231, 235, 0.5);
-  position: relative;
-}
-
-/* 表情按钮包装 */
-.emoji-button-wrapper {
-  position: relative;
-  display: inline-block;
-}
-
-.pending-files-area {
-  padding: 8px 12px;
-  border-bottom: 1px solid #f3f4f6;
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-}
-
-.pending-file-item {
-  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;
-}
-
-.pending-file-remove-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;
-}
-
-.pending-file-remove-btn:hover {
-  background-color: rgba(0, 0, 0, 0.7);
-}
-
-.input-toolbar {
-  display: flex;
-  align-items: center;
-  padding: 12px;
-  gap: 8px;
-}
-
-.input-toolbar-icon {
-  color: #6b7280;
-  cursor: pointer;
-  font-size: 20px;
-}
-
-.input-toolbar-icon:hover {
-  color: #374151;
-}
-
-.input-textarea-wrapper {
-  padding: 0 12px 12px;
-}
-
-.message-input-textarea {
-  width: 100%;
-  resize: none;
-  border: none;
-  outline: none;
-  font-size: 14px;
-  height: 80px;
-  font-family: inherit;
-}
-
-.input-send-wrapper {
-  display: flex;
-  justify-content: flex-end;
-  padding: 0 12px 12px;
-}
-
-.send-message-btn {
-  background-color: #07c160;
-  border: none;
-  font-size: 14px;
-  padding: 8px 24px;
-}
-
-.send-message-btn:hover {
-  background-color: #06ad56;
-}
-
-.hidden-file-input {
-  display: none;
-}
-
-/* 空状态 */
-.chat-empty-state {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-  background-color: #f5f5f5;
-}
-
-.empty-state-icon {
-  color: #d1d5db;
-  margin-bottom: 8px;
-}
-
-.empty-state-text {
-  color: #9ca3af;
-  font-size: 14px;
-}
-
-/* ========== 右侧详情面板 ========== */
-.chat-detail-panel {
-  width: 256px;
-  background: rgba(245, 245, 245, 0.5);
-  backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
-  border-left: 1px solid rgba(229, 231, 235, 0.5);
-  display: flex;
-  flex-direction: column;
-}
-
-.chat-detail-header {
-  height: 56px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-bottom: 1px solid rgba(229, 231, 235, 0.5);
-  font-weight: 500;
-  color: #374151;
-  font-size: 14px;
-}
-
-.chat-detail-content {
-  flex: 1;
-  padding: 16px;
-}
-
-.chat-detail-profile {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-.chat-detail-avatar {
-  width: 80px;
-  height: 80px;
-  border-radius: 50%;
-  object-fit: cover;
-}
-
-.chat-detail-name {
-  margin-top: 12px;
-  font-weight: 500;
-  color: #1f2937;
-  font-size: 18px;
-}
-
-.chat-detail-actions {
-  margin-top: 24px;
-  width: 100%;
-}
-
-.chat-detail-action-item {
-  padding: 12px;
-  border-bottom: 1px solid #f3f4f6;
-  cursor: pointer;
-  background-color: white;
-  font-size: 14px;
-  color: #374151;
-}
-
-.chat-detail-action-item:hover {
-  background-color: #f9fafb;
-}
-
-.chat-detail-action-item:first-child {
-  border-radius: 8px 8px 0 0;
-}
-
-.chat-detail-action-item:last-child {
-  border-bottom: none;
-  border-radius: 0 0 8px 8px;
-}
-
-/* ========== 添加好友搜索 ========== */
-.add-friend-search-wrapper {
-  margin-bottom: 16px;
-}
-
-.add-friend-search-input {
-  width: 100%;
-}
-
-.add-friend-users-list {
-  max-height: 400px;
-  overflow-y: auto;
-}
-
-.add-friend-user-item {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 12px;
-  margin-bottom: 8px;
-  border-radius: 8px;
-  transition: background-color 0.2s;
-}
-
-.add-friend-user-item:hover {
-  background-color: #f9fafb;
-}
-
-.add-friend-user-info {
-  display: flex;
-  align-items: center;
-}
-
-.add-friend-user-avatar {
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-  object-fit: cover;
-}
-
-.add-friend-user-name {
-  margin-left: 12px;
-  font-weight: 500;
-  color: #1f2937;
-  font-size: 14px;
-}
-
-/* ========== 设置弹窗 ========== */
-.chat-settings-dialog :deep(.el-dialog) {
-  border-radius: 16px;
-  overflow: hidden;
-}
-
-.chat-settings-dialog :deep(.el-dialog__header) {
-  padding: 24px 24px 0;
-  margin: 0;
-}
-
-.chat-settings-dialog :deep(.el-dialog__title) {
-  font-size: 20px;
-  font-weight: 600;
-  color: #1f2937;
-}
-
-.chat-settings-container {
-  display: flex;
-  flex-direction: column;
-}
-
-.chat-settings-avatar-section {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  margin-bottom: 32px;
-  padding-bottom: 24px;
-  border-bottom: 1px solid #f3f4f6;
-}
-
-.chat-settings-avatar-wrapper {
-  position: relative;
-  margin-bottom: 16px;
-}
-
-.chat-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);
-}
-
-.chat-settings-avatar-edit {
-  position: absolute;
-  bottom: -4px;
-  right: -4px;
-  width: 40px;
-  height: 40px;
-  background-color: #07c160;
-  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);
-}
-
-.chat-settings-avatar-edit:hover {
-  background-color: #06ad56;
-}
-
-.chat-settings-avatar-icon {
-  color: white;
-}
-
-.hidden-avatar-input {
-  display: none;
-}
-
-.chat-settings-user-display {
-  text-align: center;
-}
-
-.chat-settings-nickname {
-  font-weight: 600;
-  color: #1f2937;
-  font-size: 20px;
-}
-
-.chat-settings-username {
-  font-size: 14px;
-  color: #6b7280;
-  margin-top: 4px;
-}
-
-.chat-settings-form-section {
-  gap: 20px;
-}
-
-.chat-settings-form-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 8px;
-}
-
-.chat-settings-form-title {
-  color: #374151;
-  font-weight: 600;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 14px;
-}
-
-.chat-settings-edit-btn {
-  border-radius: 9999px;
-}
-
-.chat-settings-form {
-  background-color: #f9fafb;
-  border-radius: 16px;
-  padding: 24px;
-  gap: 20px;
-  display: flex;
-  flex-direction: column;
-}
-
-.chat-settings-form-item {
-  display: flex;
-  flex-direction: column;
-}
-
-.chat-settings-form-label {
-  display: block;
-  font-size: 14px;
-  color: #4b5563;
-  margin-bottom: 8px;
-  font-weight: 500;
-}
-
-.chat-settings-form-value {
-  color: #1f2937;
-  background-color: white;
-  border-radius: 8px;
-  padding: 12px 16px;
-  border: 1px solid #e5e7eb;
-  font-size: 14px;
-}
-
-.chat-settings-form-value.bio-value {
-  min-height: 80px;
-}
-
-.chat-settings-form-actions {
-  display: flex;
-  gap: 12px;
-  justify-content: flex-end;
-  padding-top: 8px;
-}
-
-/* ========== 右键菜单 ========== */
-.chat-context-menu {
-  position: fixed;
-  background: rgba(255, 255, 255, 0.9);
-  backdrop-filter: blur(20px);
-  -webkit-backdrop-filter: blur(20px);
-  border-radius: 12px;
-  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
-  border: 1px solid rgba(255, 255, 255, 0.3);
-  padding: 4px 0;
-  z-index: 1000;
-}
-
-.chat-context-menu-item {
-  padding: 8px 16px;
-  cursor: pointer;
-  font-size: 14px;
-  color: #374151;
-  margin: 2px 4px;
-  border-radius: 8px;
-  transition: background-color 0.2s;
-}
-
-.chat-context-menu-item:hover {
-  background-color: rgba(243, 244, 246, 0.8);
-}
-
-/* ========== 群聊相关样式 ========== */
-.create-group-form {
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-}
-
-.form-item {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.form-label {
-  font-size: 14px;
-  font-weight: 500;
-  color: #374151;
-}
-
-.member-selection {
-  border: 1px solid #e5e7eb;
-  border-radius: 8px;
-  padding: 12px;
-  background-color: #f9fafb;
-}
-
-.member-list {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
-  gap: 12px;
-}
-
-.member-item {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 12px 8px;
-  border-radius: 8px;
-  cursor: pointer;
-  transition: background-color 0.2s;
-  border: 2px solid transparent;
-}
-
-.member-item:hover {
-  background-color: rgba(243, 244, 246, 0.8);
-}
-
-.member-item.member-selected {
-  border-color: #07c160;
-  background-color: rgba(7, 193, 96, 0.05);
-}
-
-.member-item img {
-  width: 56px;
-  height: 56px;
-  border-radius: 50%;
-  object-fit: cover;
-  margin-bottom: 8px;
-}
-
-.member-item span {
-  font-size: 13px;
-  color: #374151;
-  text-align: center;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  max-width: 100%;
-}
-
-.member-check {
-  color: #07c160;
-  margin-top: 4px;
-}
-
-.group-detail-content {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
-
-.group-info-section {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.group-info-item {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 8px 0;
-}
-
-.info-label {
-  font-size: 14px;
-  color: #6b7280;
-}
-
-.info-value {
-  font-size: 14px;
-  color: #1f2937;
-  font-weight: 500;
-}
-
-.group-members-section {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.section-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.section-title {
-  font-size: 14px;
-  font-weight: 500;
-  color: #374151;
-}
-
-.group-members-list {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  max-height: 300px;
-  overflow-y: auto;
-}
-
-.group-member-item {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 8px 12px;
-  border-radius: 8px;
-  background-color: white;
-  transition: background-color 0.2s;
-}
-
-.group-member-item:hover {
-  background-color: #f9fafb;
-}
-
-.group-member-avatar {
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-  object-fit: cover;
-  flex-shrink: 0;
-}
-
-.group-member-name {
-  font-size: 14px;
-  color: #1f2937;
-  flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-/* ========== 群聊侧边栏样式 ========== */
-.group-sidebar {
-  width: 320px;
-  background-color: #f5f5f5;
-  border-left: 1px solid #e5e7eb;
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  overflow: hidden;
-}
-
-.slide-enter-active,
-.slide-leave-active {
-  transition: transform 0.3s ease;
-}
-
-.slide-enter-from,
-.slide-leave-to {
-  transform: translateX(100%);
-}
-
-.group-sidebar-header {
-  height: 56px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0 16px;
-  border-bottom: 1px solid #e5e7eb;
-  background-color: white;
-}
-
-.group-sidebar-title {
-  font-size: 16px;
-  font-weight: 500;
-  color: #1f2937;
-}
-
-.group-sidebar-close {
-  width: 32px;
-  height: 32px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 50%;
-  cursor: pointer;
-  transition: background-color 0.2s;
-  color: #6b7280;
-}
-
-.group-sidebar-close:hover {
-  background-color: #f3f4f6;
-  color: #374151;
-}
-
-.group-sidebar-content {
-  flex: 1;
-  overflow-y: auto;
-  padding: 16px;
-}
-
-.group-members-avatar-section {
-  margin-bottom: 16px;
-}
-
-.group-members-grid {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: 16px;
-}
-
-.group-member-avatar-item {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  cursor: pointer;
-  padding: 4px;
-  border-radius: 8px;
-  transition: background-color 0.2s;
-}
-
-.group-member-avatar-item:hover {
-  background-color: rgba(0, 0, 0, 0.05);
-}
-
-.group-member-avatar-small {
-  width: 48px;
-  height: 48px;
-  border-radius: 50%;
-  object-fit: cover;
-  margin-bottom: 4px;
-}
-
-.group-member-add-icon {
-  width: 48px;
-  height: 48px;
-  border-radius: 50%;
-  background-color: #f3f4f6;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: #6b7280;
-  margin-bottom: 4px;
-}
-
-.group-member-nickname {
-  font-size: 12px;
-  color: #6b7280;
-  text-align: center;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  max-width: 100%;
-}
-
-.group-divider {
-  height: 12px;
-  background-color: transparent;
-  border-top: 1px solid #e5e7eb;
-  margin: 16px 0;
-}
-
-.group-settings-section {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.group-setting-item {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 14px 16px;
-  background-color: white;
-  cursor: pointer;
-  transition: background-color 0.2s;
-  border-radius: 8px;
-  margin-bottom: 4px;
-}
-
-.group-setting-item:hover {
-  background-color: #f9fafb;
-}
-
-.group-setting-item.danger {
-  color: #ef4444;
-  margin-top: 8px;
-}
-
-.group-setting-item.danger:hover {
-  background-color: #fef2f2;
-}
-
-.group-setting-label {
-  font-size: 14px;
-  color: #1f2937;
-}
-
-.group-setting-item.danger .group-setting-label {
-  color: #ef4444;
-}
-
-.group-setting-value {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  color: #6b7280;
-  font-size: 14px;
-}
-
-.group-setting-value-text {
-  max-width: 160px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.group-setting-value-wrapper {
-  display: flex;
-  flex: 1;
-  justify-content: flex-end;
-}
-
-.group-edit-wrapper {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.group-edit-buttons {
-  display: flex;
-  justify-content: flex-end;
-  gap: 8px;
-}
-
-.group-input-edit {
-  flex: 1;
-}
-
-.group-edit-actions {
-  display: flex;
-  gap: 8px;
-  justify-content: flex-end;
-  margin-top: 8px;
-}
-
-/* ========== 消息已读成员弹窗样式 ========== */
-.msg-read-users-content {
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-}
-
-.read-users-section,
-.unread-users-section {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.users-list {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.users-tag-list {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-}
-
-.user-tag {
-  padding: 6px 12px;
-  background-color: #f3f4f6;
-  border-radius: 9999px;
-  font-size: 13px;
-  color: #374151;
-
-  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
-  gap: 12px;
-}
-
-.member-item {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 12px;
-  border-radius: 8px;
-  cursor: pointer;
-  transition: all 0.2s;
-  border: 2px solid transparent;
-  background-color: white;
-}
-
-.member-item:hover {
-  background-color: #f3f4f6;
-}
-
-.member-selected {
-  background-color: rgba(7, 193, 96, 0.1);
-  border-color: #07c160;
-}
-
-.member-avatar {
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-  object-fit: cover;
-}
-
-.member-name {
-  flex: 1;
-  font-size: 14px;
-  color: #374151;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.member-check {
-  color: #07c160;
-  font-size: 20px;
-}
-
-.group-detail-content {
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-}
-
-.group-info-section {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.group-info-item {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 12px;
-  background-color: #f9fafb;
-  border-radius: 8px;
-}
-
-.info-label {
-  font-size: 14px;
-  color: #6b7280;
-}
-
-.info-value {
-  font-size: 14px;
-  color: #374151;
-  font-weight: 500;
-}
-
-.group-members-section {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.section-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.section-title {
-  font-size: 14px;
-  font-weight: 500;
-  color: #374151;
-}
-
-.group-members-list {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
-  gap: 12px;
-  max-height: 300px;
-  overflow-y: auto;
-}
-
-.group-member-item {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 8px;
-  padding: 12px;
-  border-radius: 8px;
-  background-color: #f9fafb;
-  text-align: center;
-}
-
-.group-member-avatar {
-  width: 50px;
-  height: 50px;
-  border-radius: 50%;
-  object-fit: cover;
-}
-
-.group-member-name {
-  font-size: 12px;
-  color: #374151;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  width: 100%;
-}
-
-.invite-member-content {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
+<style scoped lang="scss">
+@use '../styles/components/chat-panel';
 </style>