vue-chat-kit 0.3.8 → 0.3.9

package/src/components/ChatPanel.vue

@@ -159,6 +159,70 @@
             >同意</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>
 
@@ -192,13 +256,14 @@
         </el-button>
       </div>
       
-      <!-- 聊天窗口 -->
-      <div v-if="currentChat" class="chat-window-area">
+      <!-- 聊天窗口（群聊或单聊） -->
+      <div v-if="currentChat || currentSelectGroup" class="chat-window-area">
         <!-- 顶部标题栏 -->
         <div class="chat-window-header">
           <div class="chat-window-title">
-            <span class="chat-window-name">{{ currentChat.name }}</span>
+            <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'
@@ -206,10 +271,19 @@
             >
               {{ 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>
@@ -222,7 +296,7 @@
           class="chat-messages-container"
         >
           <div
-            v-for="(msg, index) in currentMessages"
+            v-for="(msg, index) in currentSelectGroup ? currentGroupMessages : currentMessages"
             :key="index"
             :class="[
               'message-wrapper',
@@ -232,7 +306,7 @@
             <!-- 头像 -->
             <div class="message-avatar">
               <img
-                :src="msg.isSelf ? myAvatar : currentChat.avatar"
+                :src="msg.avatar"
                 class="message-avatar-img"
               />
             </div>
@@ -244,7 +318,9 @@
                 msg.isSelf ? 'message-content-self' : 'message-content-other'
               ]"
             >
-              <div v-if="!msg.isSelf" class="message-sender-name">{{ currentChat.name }}</div>
+              <div v-if="!msg.isSelf" class="message-sender-name">
+                {{ currentSelectGroup ? (msg.displayName || msg.sendUsername) : currentChat.name }}
+              </div>
 
               <div class="message-bubble-wrapper">
                 <!-- 文本消息 -->
@@ -423,6 +499,202 @@
       </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>
+
+            <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>
+
     <!-- 右侧详情面板 -->
     <div
       v-if="showChatDetail"
@@ -485,6 +757,286 @@
       </div>
     </el-dialog>
 
+    <!-- 创建群聊弹窗 -->
+    <el-dialog
+      v-model="createGroupDialogVisible"
+      title="创建群聊"
+      width="600px"
+      append-to-body
+    >
+      <div class="create-group-form">
+        <div class="form-item">
+          <label class="form-label">群名称</label>
+          <el-input
+            v-model="newGroupName"
+            placeholder="请输入群名称"
+            maxlength="50"
+          />
+        </div>
+        <div class="form-item">
+          <label class="form-label">群备注</label>
+          <el-input
+            v-model="newGroupRemark"
+            type="textarea"
+            placeholder="请输入群备注（可选）"
+            :rows="3"
+            maxlength="200"
+          />
+        </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>
+        </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>
+      </template>
+    </el-dialog>
+
+    <!-- 编辑群成员昵称弹窗 -->
+    <el-dialog
+      v-if="currentSelectGroup"
+      v-model="memberNickDialogVisible"
+      title="编辑群昵称"
+      width="400px"
+      append-to-body
+    >
+      <el-form label-width="80px">
+        <el-form-item label="成员">
+          <span>{{ editingMemberNick.targetUsername }}</span>
+        </el-form-item>
+        <el-form-item label="群昵称">
+          <el-input v-model="editingMemberNick.memberNick" placeholder="请输入群昵称" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="memberNickDialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="handleUpdateMemberNick">保存</el-button>
+      </template>
+    </el-dialog>
+
+    <!-- 消息已读成员弹窗 -->
+    <el-dialog
+      v-if="currentSelectGroup"
+      v-model="msgReadUserDialogVisible"
+      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 }})
+          </div>
+          <div class="users-list">
+            <el-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">
+                {{ user }}
+              </el-tag>
+            </div>
+          </div>
+        </div>
+        <div class="unread-users-section">
+          <div class="section-title">
+            <el-icon><Clock /></el-icon>未读 ({{ currentMsgReadList.unreadUserList.length }})
+          </div>
+          <div class="users-list">
+            <el-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">
+                {{ user }}
+              </el-tag>
+            </div>
+          </div>
+        </div>
+      </div>
+      <template #footer>
+        <el-button @click="msgReadUserDialogVisible = false">关闭</el-button>
+      </template>
+    </el-dialog>
+
+    <!-- 邀请成员弹窗 -->
+    <el-dialog
+      v-if="currentSelectGroup"
+      v-model="inviteMemberDialogVisible"
+      title="邀请成员"
+      width="500px"
+      append-to-body
+    >
+      <div class="invite-member-content">
+        <div class="invite-member-list">
+          <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',
+                selectedMembersForInvite.some(m => m.id === friend.id) ? 'member-selected' : ''
+              ]"
+              @click="toggleMemberForInvite(friend)"
+            >
+              <img
+                :src="friend.avatar"
+                :alt="friend.name"
+                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>
+            </div>
+          </div>
+        </div>
+      </div>
+      <template #footer>
+        <el-button @click="inviteMemberDialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="handleInviteMember" :disabled="selectedMembersForInvite.length === 0">
+          邀请 {{ selectedMembersForInvite.length }} 人
+        </el-button>
+      </template>
+    </el-dialog>
+
     <!-- 用户设置弹窗 -->
     <el-dialog
       v-model="showSettingsDialog"
@@ -661,10 +1213,17 @@ import {
   Bell,
   Setting,
   Document,
-  Download
+  Download,
+  CircleCheck,
+  Edit,
+  Delete,
+  Check,
+  Clock,
+  Close,
+  ArrowRight
 } from '@element-plus/icons-vue'
 import { useChat } from '../composables/useChat.js'
-import { ElMessage } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
 import AvatarCrop from './AvatarCrop.vue'
 import EmojiPicker from './EmojiPicker.vue'
 
@@ -694,6 +1253,33 @@ const {
   loadingAvailableUsers,
   friendApplyList,
   loadingFriendApply,
+  // ========== 群聊相关 ==========
+  activeTab,
+  groupList,
+  currentSelectGroup,
+  groupMsgList,
+  groupMemberList,
+  createGroupDialogVisible,
+  groupDetailVisible,
+  newGroupName,
+  newGroupRemark,
+  selectedMembersForCreate,
+  inviteMemberDialogVisible,
+  selectedMembersForInvite,
+  filteredGroupList,
+  currentChatTarget,
+  currentGroupMessages,
+  currentAllMessages,
+  groupInfoVisible,
+  editingGroupInfo,
+  editingMemberNick,
+  memberNickDialogVisible,
+  msgReadUserDialogVisible,
+  currentMsgReadList,
+  currentGroupInfo,
+  editingFields,
+  tempEditValues,
+  // ========== 方法 ==========
   formatTime,
   formatLastTime,
   scrollToBottom,
@@ -712,6 +1298,34 @@ const {
   loadFriendApplyList,
   agreeFriend,
   updateMyAvatar,
+  // ========== 群聊相关方法 ==========
+  getGroupList,
+  getGroupHistory,
+  getGroupMembers,
+  selectGroup,
+  createGroup,
+  inviteGroupMember,
+  quitGroup,
+  sendGroupMessage,
+  sendGroupFile,
+  sendGroupFilesAndText,
+  switchTab,
+  getGroupUnreadCount,
+  getMsgReadUserList,
+  updateGroupInfo,
+  updateMemberNick,
+  deleteGroup,
+  removeGroupMember,
+  transferGroupOwner,
+  readSingleGroupMsg,
+  readAllGroupMsg,
+  openEditGroupInfo,
+  openEditMemberNick,
+  fetchGroupDetail,
+  updateSingleGroupField,
+  startEditField,
+  cancelEditField,
+  saveEditField
 
 } = useChat(props.config, (message) => {
   emit('message', message)
@@ -724,6 +1338,10 @@ const navTabs = computed(() => {
     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.apply) {
     tabs.push({ id: 'apply', icon: Bell, badge: friendApplyList.value?.length || 0 })
   }
@@ -749,6 +1367,32 @@ const pendingFiles = ref([])
 const contextMenu = ref({ visible: false, x: 0, y: 0, chat: null })
 const showEmojiPicker = ref(false)
 
+// 群聊侧边栏相关
+const showGroupSidebar = ref(false)
+const muteGroup = ref(false)
+const groupNameInputRef = ref(null)
+
+// 监听侧边栏打开，获取群详情
+watch(showGroupSidebar, (newVal) => {
+  if (newVal && currentSelectGroup.value) {
+    fetchGroupDetail(currentSelectGroup.value.groupId)
+  }
+})
+
+// 计算属性：获取我在群里的昵称
+const myNicknameInGroup = computed(() => {
+  const me = groupMemberList.value.find(m => m.username === myUsername)
+  return me?.memberNick || ''
+})
+
+// 打开编辑我自己的群昵称
+const openMyNicknameEdit = () => {
+  const me = groupMemberList.value.find(m => m.username === myUsername)
+  if (me) {
+    openEditMemberNick(me)
+  }
+}
+
 const showContextMenuFn = (e, chat) => {
   e.preventDefault()
   e.stopPropagation()
@@ -775,7 +1419,9 @@ const selectChat = (chat) => {
   currentChatId.value = chat.id
   currentChat.value = chat
   currentSelectedFriend.value = null
+  currentSelectGroup.value = null
   showChatDetail.value = false
+  groupDetailVisible.value = false
   selectUser({
     id: chat.id,
     name: chat.name,
@@ -788,6 +1434,17 @@ const selectFriend = (friend) => {
   currentSelectedFriend.value = friend
   currentChatId.value = null
   currentChat.value = null
+  currentSelectGroup.value = null
+}
+
+const selectGroupChat = (group) => {
+  currentSelectGroup.value = group
+  currentChatId.value = null
+  currentChat.value = null
+  currentSelectedFriend.value = null
+  showChatDetail.value = false
+  groupDetailVisible.value = false
+  selectGroup(group)
 }
 
 const handleStartChat = async () => {
@@ -874,7 +1531,15 @@ const handleSend = async () => {
   })
   pendingFiles.value = []
 
-  await sendFilesAndText(filesToSend, textToSend)
+  // 根据当前选择的是群聊还是单聊来发送
+  if (currentSelectGroup.value) {
+    // 群聊发送
+    await sendGroupFilesAndText(filesToSend, textToSend)
+  } else {
+    // 单聊发送
+    await sendFilesAndText(filesToSend, textToSend)
+  }
+  
   emit('send', { text: textToSend, files: filesToSend })
 }
 
@@ -923,35 +1588,267 @@ const selectEmoji = (emoji) => {
   showEmojiPicker.value = false
 }
 
-const handleAvatarFileChange = (e) => {
-  const file = e.target.files[0]
-  if (!file) return
+// 获取群聊头像网格样式
+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
+}
 
-  if (!file.type.startsWith('image/')) {
-    ElMessage.error('只能上传图片文件')
-    return
+// ========== 群聊相关方法 ==========
+const toggleMemberForCreate = (friend) => {
+  const index = selectedMembersForCreate.value.findIndex(m => m.id === friend.id)
+  if (index !== -1) {
+    selectedMembersForCreate.value.splice(index, 1)
+  } else {
+    selectedMembersForCreate.value.push(friend)
   }
+}
 
-  if (file.size > 5 * 1024 * 1024) {
-    ElMessage.error('图片大小不能超过 5MB')
-    return
+const toggleMemberForInvite = (friend) => {
+  const index = selectedMembersForInvite.value.findIndex(m => m.id === friend.id)
+  if (index !== -1) {
+    selectedMembersForInvite.value.splice(index, 1)
+  } else {
+    selectedMembersForInvite.value.push(friend)
   }
+}
 
-  const reader = new FileReader()
-  reader.onload = (event) => {
-    avatarImageSrc.value = event.target.result
-    showAvatarEditor.value = true
+const handleCreateGroup = async () => {
+  const success = await createGroup()
+  if (success) {
+    ElMessage.success('群聊创建成功')
+  } else {
+    ElMessage.error('群聊创建失败')
   }
-  reader.readAsDataURL(file)
 }
 
-const handleAvatarCropConfirm = async ({ file }) => {
-  if (!file) return
+const handleInviteMember = async () => {
+  const success = await inviteGroupMember()
+  if (success) {
+    ElMessage.success('邀请成功')
+  } else {
+    ElMessage.error('邀请失败')
+  }
+}
 
-  avatarUploading.value = true
-  try {
-    const { ChatApi } = await import('../core/api.js')
-    const api = new ChatApi(props.config)
+const handleQuitGroup = async () => {
+    const confirm = await ElMessageBox.confirm('确定要退出群聊吗？', '提示', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning'
+    }).catch(() => {})
+    
+    if (confirm) {
+      const success = await quitGroup()
+      if (success) {
+        ElMessage.success('已退出群聊')
+      } else {
+        ElMessage.error('退出失败')
+      }
+    }
+  }
+
+  // 处理解散群聊
+  const handleDeleteGroup = async () => {
+    const confirm = await ElMessageBox.confirm(
+      '确定要解散该群聊吗？此操作不可恢复！',
+      '警告',
+      {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }
+    ).catch(() => {})
+    
+    if (confirm) {
+      const success = await deleteGroup()
+      if (success) {
+        ElMessage.success('群聊已解散')
+        showGroupSidebar.value = false
+      } else {
+        ElMessage.error('解散失败')
+      }
+    }
+  }
+
+  // 处理保存编辑字段
+  const handleSaveEditField = async (field) => {
+    const loading = ElLoading.service({
+      lock: true,
+      text: '保存中...',
+      background: 'rgba(0, 0, 0, 0.7)',
+    })
+    
+    try {
+      const success = await saveEditField(field)
+      if (success) {
+        ElMessage.success('保存成功')
+      } else {
+        ElMessage.error('保存失败')
+      }
+    } catch (error) {
+      console.error('保存失败', error)
+      ElMessage.error('保存失败')
+    } finally {
+      loading.close()
+    }
+  }
+
+  // 处理保存群成员昵称
+  const handleUpdateMemberNick = async () => {
+    const loading = ElLoading.service({
+      lock: true,
+      text: '保存中...',
+      background: 'rgba(0, 0, 0, 0.7)',
+    })
+    
+    try {
+      const success = await updateMemberNick()
+      if (success) {
+        ElMessage.success('群昵称修改成功')
+        memberNickDialogVisible.value = false
+      } else {
+        ElMessage.error('修改失败')
+      }
+    } catch (error) {
+      console.error('修改失败', error)
+      ElMessage.error('修改失败')
+    } finally {
+      loading.close()
+    }
+  }
+
+  // 处理移除群成员
+  const handleRemoveMember = async (username) => {
+    const confirm = await ElMessageBox.confirm(
+      `确定要移除成员 ${username} 吗？`,
+      '提示',
+      {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }
+    ).catch(() => {})
+    
+    if (confirm) {
+      const loading = ElLoading.service({
+        lock: true,
+        text: '移除中...',
+        background: 'rgba(0, 0, 0, 0.7)',
+      })
+      
+      try {
+        const success = await removeGroupMember(username)
+        if (success) {
+          ElMessage.success('成员已移除')
+        } else {
+          ElMessage.error('移除失败')
+        }
+      } catch (error) {
+        console.error('移除失败', error)
+        ElMessage.error('移除失败')
+      } finally {
+        loading.close()
+      }
+    }
+  }
+
+  // 处理转让群主
+  const handleTransferOwner = async (newOwnerUsername) => {
+    const confirm = await ElMessageBox.confirm(
+      `确定要将群主转让给 ${newOwnerUsername} 吗？`,
+      '提示',
+      {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }
+    ).catch(() => {})
+    
+    if (confirm) {
+      const loading = ElLoading.service({
+        lock: true,
+        text: '转让中...',
+        background: 'rgba(0, 0, 0, 0.7)',
+      })
+      
+      try {
+        const success = await transferGroupOwner(newOwnerUsername)
+        if (success) {
+          ElMessage.success('群主已转让')
+        } else {
+          ElMessage.error('转让失败')
+        }
+      } catch (error) {
+        console.error('转让失败', error)
+        ElMessage.error('转让失败')
+      } finally {
+        loading.close()
+      }
+    }
+  }
+
+  // 处理更新群信息
+  const handleUpdateGroupInfo = async () => {
+    const success = await updateGroupInfo()
+    if (success) {
+      ElMessage.success('群信息已更新')
+    } else {
+      ElMessage.error('更新失败')
+    }
+  }
+
+
+
+const handleAvatarFileChange = (e) => {
+  const file = e.target.files[0]
+  if (!file) return
+
+  if (!file.type.startsWith('image/')) {
+    ElMessage.error('只能上传图片文件')
+    return
+  }
+
+  if (file.size > 5 * 1024 * 1024) {
+    ElMessage.error('图片大小不能超过 5MB')
+    return
+  }
+
+  const reader = new FileReader()
+  reader.onload = (event) => {
+    avatarImageSrc.value = event.target.result
+    showAvatarEditor.value = true
+  }
+  reader.readAsDataURL(file)
+}
+
+const handleAvatarCropConfirm = async ({ file }) => {
+  if (!file) return
+
+  avatarUploading.value = true
+  try {
+    const { ChatApi } = await import('../core/api.js')
+    const api = new ChatApi(props.config)
     const res = await api.uploadAvatar(file, myUsername)
     if (res.code === 200) {
       ElMessage.success('头像上传成功')
@@ -1011,11 +1908,21 @@ const saveUserInfo = async () => {
 
 // 生命周期
 onMounted(async () => {
-  await Promise.all([getFriendList(), loadFriendApplyList()])
+  const promises = [getFriendList(), loadFriendApplyList()]
+  
+  // 如果启用了群聊模块，也加载群聊列表
+  if (props.config.modules.groups) {
+    promises.push(getGroupList())
+  }
+  
+  await Promise.all(promises)
+  
   initWebSocket()
+  
   if (filteredUsers.value.length > 0) {
     selectChat(filteredUsers.value[0])
   }
+  
   emit('init')
   document.addEventListener('click', hideContextMenu)
 })
@@ -1170,6 +2077,29 @@ onUnmounted(() => {
   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;
@@ -2137,4 +3067,542 @@ onUnmounted(() => {
 .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>