From 30c392c39eb40280367a098dd23b626bede2bbd4 Mon Sep 17 00:00:00 2001
From: liuwei <liuwei@wdtrgf.com.cn>
Date: Thu, 3 Apr 2025 10:51:09 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8A=A0=E5=85=A5=E9=80=9A=E8=AE=AF=E5=BD=95?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../templates/contacts_management.html        | 300 ++++++++++++++++++
 1 file changed, 300 insertions(+)
 create mode 100644 admin/dashboard/templates/contacts_management.html

diff --git a/admin/dashboard/templates/contacts_management.html b/admin/dashboard/templates/contacts_management.html
new file mode 100644
index 0000000..34cca41
--- /dev/null
+++ b/admin/dashboard/templates/contacts_management.html
@@ -0,0 +1,300 @@
+{% extends "base.html" %}
+
+{% block title %}通讯录管理 - 机器人管理后台{% endblock %}
+
+{% block content %}
+<!-- 通讯录管理 -->
+<div>
+    <el-row {% raw %}:gutter="20"{% endraw %}>
+        <el-col {% raw %}:span="24"{% endraw %}>
+            <el-card shadow="hover">
+                <div slot="header" class="clearfix">
+                    <span>通讯录管理</span>
+                    <el-button 
+                        type="primary" 
+                        size="small" 
+                        style="float: right; margin-left: 10px;"
+                        {% raw %}@click="refreshContacts"{% endraw %}>
+                        刷新数据
+                    </el-button>
+                    <el-input
+                        placeholder="搜索联系人..."
+                        {% raw %}v-model="searchQuery"{% endraw %}
+                        style="width: 200px; float: right"
+                        clearable>
+                    </el-input>
+                </div>
+                
+                <!-- 统计卡片 -->
+                <el-row {% raw %}:gutter="20"{% endraw %} style="margin-bottom: 20px;">
+                    <el-col {% raw %}:span="8"{% endraw %}>
+                        <el-card shadow="hover" class="stat-card">
+                            <div class="stat-title">总联系人数</div>
+                            <div class="stat-value">{% raw %}{{ statistics.total }}{% endraw %}</div>
+                        </el-card>
+                    </el-col>
+                    <el-col {% raw %}:span="8"{% endraw %}>
+                        <el-card shadow="hover" class="stat-card">
+                            <div class="stat-title">群组数</div>
+                            <div class="stat-value">{% raw %}{{ statistics.groups }}{% endraw %}</div>
+                        </el-card>
+                    </el-col>
+                    <el-col {% raw %}:span="8"{% endraw %}>
+                        <el-card shadow="hover" class="stat-card">
+                            <div class="stat-title">个人联系人数</div>
+                            <div class="stat-value">{% raw %}{{ statistics.personal }}{% endraw %}</div>
+                        </el-card>
+                    </el-col>
+                </el-row>
+                
+                <!-- 选项卡 -->
+                <el-tabs {% raw %}v-model="activeTab" @tab-click="handleTabClick"{% endraw %}>
+                    <!-- 群组联系人 -->
+                    <el-tab-pane label="群组" name="groups">
+                        <el-table 
+                            {% raw %}:data="filteredGroups"{% endraw %} 
+                            style="width: 100%" 
+                            border>
+                            <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-column label="操作" width="150">
+                                <template slot-scope="scope">
+                                    <el-button 
+                                        size="mini" 
+                                        type="primary" 
+                                        {% raw %}@click="viewGroupDetails(scope.row)"{% endraw %}>
+                                        查看详情
+                                    </el-button>
+                                </template>
+                            </el-table-column>
+                        </el-table>
+                    </el-tab-pane>
+                    
+                    <!-- 个人联系人 -->
+                    <el-tab-pane label="个人联系人" name="personal">
+                        <el-table 
+                            {% raw %}:data="filteredPersonal"{% endraw %} 
+                            style="width: 100%" 
+                            border>
+                            <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-column label="操作" width="150">
+                                <template slot-scope="scope">
+                                    <el-button 
+                                        size="mini" 
+                                        type="primary" 
+                                        {% raw %}@click="viewUserDetails(scope.row)"{% endraw %}>
+                                        查看详情
+                                    </el-button>
+                                </template>
+                            </el-table-column>
+                        </el-table>
+                    </el-tab-pane>
+                </el-tabs>
+                
+                <!-- 分页 -->
+                <div class="pagination-container" {% raw %}v-if="activeTab === 'groups' && groupsList.length > 10"{% endraw %}>
+                    <el-pagination
+                        {% raw %}@size-change="handleSizeChange"
+                        @current-change="handleCurrentChange"
+                        :current-page="currentPage"
+                        :page-sizes="[10, 20, 50, 100]"
+                        :page-size="pageSize"{% endraw %}
+                        layout="total, sizes, prev, pager, next, jumper"
+                        {% raw %}:total="groupsList.length"{% endraw %}>
+                    </el-pagination>
+                </div>
+                
+                <div class="pagination-container" {% raw %}v-if="activeTab === 'personal' && personalList.length > 10"{% endraw %}>
+                    <el-pagination
+                        {% raw %}@size-change="handleSizeChange"
+                        @current-change="handleCurrentChange"
+                        :current-page="currentPage"
+                        :page-sizes="[10, 20, 50, 100]"
+                        :page-size="pageSize"{% endraw %}
+                        layout="total, sizes, prev, pager, next, jumper"
+                        {% raw %}:total="personalList.length"{% endraw %}>
+                    </el-pagination>
+                </div>
+            </el-card>
+        </el-col>
+    </el-row>
+    
+    <!-- 群组详情对话框 -->
+    <el-dialog title="群组详情" {% raw %}:visible.sync="groupDetailDialogVisible"{% endraw %} width="50%">
+        <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>
+    </el-dialog>
+    
+    <!-- 用户详情对话框 -->
+    <el-dialog title="用户详情" {% raw %}:visible.sync="userDetailDialogVisible"{% endraw %} width="50%">
+        <el-descriptions {% raw %}:column="1"{% endraw %} border>
+            <el-descriptions-item label="微信ID">{% raw %}{{ currentUser.wxid }}{% endraw %}</el-descriptions-item>
+            <el-descriptions-item label="昵称">{% raw %}{{ currentUser.name }}{% endraw %}</el-descriptions-item>
+            <!-- 可以添加更多用户相关信息 -->
+        </el-descriptions>
+    </el-dialog>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script>
+    new Vue({
+        el: '#app',
+        mixins: [baseApp],
+        data() {
+            return {
+                activeTab: 'groups',
+                searchQuery: '',
+                currentPage: 1,
+                pageSize: 10,
+                groupsList: [],
+                personalList: [],
+                statistics: {
+                    total: 0,
+                    groups: 0,
+                    personal: 0
+                },
+                groupDetailDialogVisible: false,
+                userDetailDialogVisible: false,
+                currentGroup: {},
+                currentUser: {}
+            };
+        },
+        computed: {
+            filteredGroups() {
+                const query = this.searchQuery.toLowerCase();
+                if (!query) {
+                    return this.groupsList.slice(
+                        (this.currentPage - 1) * this.pageSize,
+                        this.currentPage * this.pageSize
+                    );
+                }
+                
+                return this.groupsList.filter(group => 
+                    group.wxid.toLowerCase().includes(query) || 
+                    group.name.toLowerCase().includes(query)
+                ).slice(
+                    (this.currentPage - 1) * this.pageSize,
+                    this.currentPage * this.pageSize
+                );
+            },
+            filteredPersonal() {
+                const query = this.searchQuery.toLowerCase();
+                if (!query) {
+                    return this.personalList.slice(
+                        (this.currentPage - 1) * this.pageSize,
+                        this.currentPage * this.pageSize
+                    );
+                }
+                
+                return this.personalList.filter(user => 
+                    user.wxid.toLowerCase().includes(query) || 
+                    user.name.toLowerCase().includes(query)
+                ).slice(
+                    (this.currentPage - 1) * this.pageSize,
+                    this.currentPage * this.pageSize
+                );
+            }
+        },
+        mounted() {
+            this.currentView = '10'; // 设置当前视图为通讯录管理
+            this.loadContactsData();
+        },
+        methods: {
+            loadContactsData() {
+                // 加载统计数据
+                axios.get('/api/contacts/statistics')
+                    .then(response => {
+                        if (response.data.success) {
+                            this.statistics = response.data.data;
+                        }
+                    })
+                    .catch(error => {
+                        console.error('加载联系人统计数据失败:', error);
+                        this.$message.error('加载联系人统计数据失败');
+                    });
+                    
+                // 加载群组数据
+                axios.get('/api/contacts/groups')
+                    .then(response => {
+                        if (response.data.success) {
+                            const groups = response.data.data.groups;
+                            this.groupsList = Object.entries(groups).map(([wxid, name]) => ({
+                                wxid,
+                                name
+                            }));
+                        }
+                    })
+                    .catch(error => {
+                        console.error('加载群组数据失败:', error);
+                        this.$message.error('加载群组数据失败');
+                    });
+                    
+                // 加载个人联系人数据
+                axios.get('/api/contacts/personal')
+                    .then(response => {
+                        if (response.data.success) {
+                            const personal = response.data.data.personal;
+                            this.personalList = Object.entries(personal).map(([wxid, name]) => ({
+                                wxid,
+                                name
+                            }));
+                        }
+                    })
+                    .catch(error => {
+                        console.error('加载个人联系人数据失败:', error);
+                        this.$message.error('加载个人联系人数据失败');
+                    });
+            },
+            refreshContacts() {
+                this.loadContactsData();
+                this.$message.success('联系人数据已刷新');
+            },
+            handleTabClick(tab) {
+                this.currentPage = 1; // 切换选项卡时重置页码
+            },
+            handleSizeChange(size) {
+                this.pageSize = size;
+            },
+            handleCurrentChange(page) {
+                this.currentPage = page;
+            },
+            viewGroupDetails(group) {
+                this.currentGroup = group;
+                this.groupDetailDialogVisible = true;
+            },
+            viewUserDetails(user) {
+                this.currentUser = user;
+                this.userDetailDialogVisible = true;
+            }
+        }
+    });
+</script>
+
+<style>
+.stat-card {
+    text-align: center;
+    padding: 10px;
+}
+.stat-title {
+    font-size: 16px;
+    color: #606266;
+    margin-bottom: 10px;
+}
+.stat-value {
+    font-size: 28px;
+    font-weight: bold;
+    color: #409EFF;
+}
+.pagination-container {
+    margin-top: 20px;
+    text-align: right;
+}
+</style>
+{% endblock %}
\ No newline at end of file