加入群成员列表功能

admin/dashboard/blueprints/contacts.py

@@ -124,4 +124,26 @@ def api_contacts_public():
         })
     except Exception as e:
         logger.error(f"获取公共好友信息失败: {e}")
+        return jsonify({"success": False, "error": str(e)}), 500
+
+@contacts_bp.route('/api/group_members/<roomid>', methods=['GET'])
+@login_required
+def api_group_members(roomid):
+    """获取指定群的成员列表API
+    
+    Args:
+        roomid: 群ID
+    """
+    try:
+        server = current_app.dashboard_server
+        group_members = server.contact_manager.get_group_members(roomid)
+        
+        return jsonify({
+            "success": True,
+            "data": {
+                "members": group_members
+            }
+        })
+    except Exception as e:
+        logger.error(f"获取群成员列表失败: {e}")
         return jsonify({"success": False, "error": str(e)}), 500

admin/dashboard/templates/contacts_management.html

@@ -197,12 +197,48 @@
     </el-row>
     
     <!-- 群组详情对话框 -->
-    <el-dialog title="群组详情" {% raw %}:visible.sync="groupDetailDialogVisible"{% endraw %} width="50%">
+    <el-dialog title="群组详情" {% raw %}:visible.sync="groupDetailDialogVisible"{% endraw %} width="70%">
         <el-descriptions {% raw %}:column="1"{% endraw %} border>
             <el-descriptions-item label="群ID">{% raw %}{{ currentGroup.wxid }}{% endraw %}</el-descriptions-item>
             <el-descriptions-item label="群名称">{% raw %}{{ currentGroup.name }}{% endraw %}</el-descriptions-item>
             <!-- 可以添加更多群组相关信息 -->
         </el-descriptions>
+        
+        <!-- 群成员列表 -->
+        <div style="margin-top: 20px;">
+            <div class="section-title">
+                <h3>群成员列表</h3>
+                <el-input
+                    placeholder="搜索群成员..."
+                    {% raw %}v-model="groupMemberSearchQuery"{% endraw %}
+                    style="width: 200px; float: right; margin-bottom: 10px;"
+                    clearable>
+                </el-input>
+            </div>
+            
+            <el-table 
+                {% raw %}:data="filteredGroupMembers"{% endraw %} 
+                style="width: 100%" 
+                border
+                {% raw %}v-loading="groupMembersLoading"{% endraw %}>
+                <el-table-column type="index" width="50"></el-table-column>
+                <el-table-column prop="wxid" label="成员ID" width="220"></el-table-column>
+                <el-table-column prop="name" label="成员昵称"></el-table-column>
+            </el-table>
+            
+            <!-- 群成员分页 -->
+            <div class="pagination-container" {% raw %}v-if="groupMembersList.length > 10"{% endraw %}>
+                <el-pagination
+                    {% raw %}@size-change="handleGroupMembersSizeChange"
+                    @current-change="handleGroupMembersCurrentChange"
+                    :current-page="groupMembersCurrentPage"
+                    :page-sizes="[10, 20, 50, 100]"
+                    :page-size="groupMembersPageSize"{% endraw %}
+                    layout="total, sizes, prev, pager, next, jumper"
+                    {% raw %}:total="groupMembersList.length"{% endraw %}>
+                </el-pagination>
+            </div>
+        </div>
     </el-dialog>
     
     <!-- 用户详情对话框 -->
@@ -263,7 +299,13 @@
                 currentGroup: {},
                 currentUser: {},
                 currentOfficial: {},
-                currentPublic: {}
+                currentPublic: {},
+                // 新增群成员相关数据
+                groupMembersList: [],
+                groupMembersCurrentPage: 1,
+                groupMembersPageSize: 10,
+                groupMemberSearchQuery: '',
+                groupMembersLoading: false
             };
         },
         computed: {
@@ -436,6 +478,7 @@
             viewGroupDetails(group) {
                 this.currentGroup = group;
                 this.groupDetailDialogVisible = true;
+                this.loadGroupMembers(group.wxid);
             },
             viewUserDetails(user) {
                 this.currentUser = user;
@@ -448,6 +491,38 @@
             viewPublicDetails(publicFriend) {
                 this.currentPublic = publicFriend;
                 this.publicDetailDialogVisible = true;
+            },
+            // 添加加载群成员的方法
+            loadGroupMembers(roomid) {
+                this.groupMembersLoading = true;
+                this.groupMembersList = [];
+                this.groupMembersCurrentPage = 1;
+                
+                axios.get(`/contacts/api/group_members/${roomid}`)
+                    .then(response => {
+                        if (response.data.success) {
+                            const members = response.data.data.members;
+                            this.groupMembersList = Object.entries(members).map(([wxid, name]) => ({
+                                wxid,
+                                name
+                            }));
+                        }
+                    })
+                    .catch(error => {
+                        console.error('加载群成员数据失败:', error);
+                        this.$message.error('加载群成员数据失败');
+                    })
+                    .finally(() => {
+                        this.groupMembersLoading = false;
+                    });
+            },
+            
+            // 群成员分页方法
+            handleGroupMembersSizeChange(size) {
+                this.groupMembersPageSize = size;
+            },
+            handleGroupMembersCurrentChange(page) {
+                this.groupMembersCurrentPage = page;
             }
         }
     });
@@ -472,5 +547,18 @@
     margin-top: 20px;
     text-align: right;
 }
+.section-title {
+    margin: 20px 0 15px 0;
+    border-bottom: 1px solid #ebeef5;
+    padding-bottom: 10px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+.section-title h3 {
+    margin: 0;
+    font-size: 18px;
+    color: #303133;
+}
 </style>
 {% endblock %}