将看板功能独立,方便独立维护功能。

This commit is contained in:
liuwei
2025-03-27 11:06:22 +08:00
parent 94c42360f5
commit 4daf075138
15 changed files with 2176 additions and 1 deletions

30
admin/dashboard/README.md Normal file
View File

@@ -0,0 +1,30 @@
# WeChatRobot 管理后台
## 简介
WeChatRobot 管理后台是一个独立的Web应用用于管理和监控WeChatRobot的运行状态、使用情况和配置。
## 功能
- 群组管理:查看和管理群组,设置群组功能权限
- 插件统计:查看插件使用情况统计
- 用户统计:查看用户活跃度统计
- 错误日志:查看系统错误日志
- 系统配置:管理系统配置参数
## 安装与配置
1. 确保已安装WeChatRobot主程序
2. 复制`config.yaml.template``config.yaml`
3. 根据需要修改配置参数
## 启动方式
### Windows
双击`dashboard_start.bat`文件启动管理后台。
### 命令行
```bash
python dashboard_start.py [--host HOST] [--port PORT] [--username USERNAME] [--password PASSWORD]

View File

@@ -0,0 +1,6 @@
enable = true
host = "0.0.0.0"
port = 8888
username = "admin"
password = "admin123"
auto_start = "True"

392
admin/dashboard/server.py Normal file
View File

@@ -0,0 +1,392 @@
import logging
import os
import sys
import threading
import time
from datetime import datetime
# 添加项目根目录到系统路径,确保可以导入项目模块
sys.path.append(os.path.abspath(os.path.join(os.path.dirname(__file__), '..', '..')))
from flask import Flask, render_template, request, jsonify, redirect, url_for, session, send_from_directory
from werkzeug.security import check_password_hash, generate_password_hash
from db.connection import DBConnectionManager
from db.message_storage import MessageStorageDB
from db.stats_db import StatsDBOperator
from utils.wechat.contact_manager import ContactManager
from robot_cmd.robot_command import GroupBotManager, Feature, PermissionStatus
class DashboardServer:
"""统计看板服务器"""
def __init__(self, host: str = "0.0.0.0", port: int = 8888,
username: str = "admin", password: str = "admin123"):
self.host = host
self.port = port
self.username = username
self.password = password
self.logger = logging.getLogger("DashboardServer")
# 使用单例模式获取数据库连接
self.db_manager = DBConnectionManager.get_instance()
self.stats_db = StatsDBOperator(self.db_manager)
self.message_storage = MessageStorageDB(self.db_manager)
# 获取联系人管理器实例
self.contact_manager = ContactManager.get_instance()
self.app = self._create_app()
self._stop_event = threading.Event()
self._server = None # 存储服务器实例
def _create_app(self) -> Flask:
"""创建Flask应用"""
app = Flask(__name__)
app.secret_key = "stats_dashboard_secret_key"
# 实现基本的身份验证
def check_auth():
auth = request.authorization
if not auth or auth.username != self.username or auth.password != self.password:
return False
return True
# 静态文件目录
static_folder = os.path.join(os.path.dirname(os.path.abspath(__file__)), 'static')
@app.route('/static/<path:filename>')
def serve_static(filename):
return send_from_directory(static_folder, filename)
# 添加一个路由处理favicon请求
@app.route('/favicon.ico')
def favicon():
return send_from_directory(os.path.join(app.root_path, 'static'),
'favicon.ico', mimetype='image/vnd.microsoft.icon')
# 登录页面
@app.route('/login', methods=['GET', 'POST'])
def login():
error = None
if request.method == 'POST':
username = request.form['username']
password = request.form['password']
if username == self.username and password == self.password:
session['logged_in'] = True
return redirect(url_for('index'))
else:
error = '用户名或密码错误'
return render_template('login.html', error=error)
# 登出
@app.route('/logout')
def logout():
session.pop('logged_in', None)
return redirect(url_for('login'))
# 登录检查装饰器
def login_required(f):
def decorated_function(*args, **kwargs):
if not session.get('logged_in'):
return redirect(url_for('login'))
return f(*args, **kwargs)
decorated_function.__name__ = f.__name__
return decorated_function
@app.route('/')
@login_required
def index():
return render_template('index.html')
@app.route('/plugins')
@login_required
def plugins():
return render_template('plugins.html')
@app.route('/users')
@login_required
def users_page():
return render_template('users.html')
@app.route('/groups')
@login_required
def groups():
return render_template('groups.html')
@app.route('/errors')
@login_required
def errors():
return render_template('errors.html')
# 在_create_app方法中添加新的路由
@app.route('/robot_management')
@login_required
def robot_management():
return render_template('robot_management.html')
@app.route('/api/robot/groups')
@login_required
def api_robot_groups():
# 获取所有群组列表
groups = GroupBotManager.get_group_list()
group_data = []
for group_id in groups:
group_name = self.contact_manager.get_nickname(group_id)
robot_status = GroupBotManager.get_group_permission(group_id, Feature.ROBOT)
group_data.append({
"group_id": group_id,
"group_name": group_name,
"robot_status": robot_status.value
})
return jsonify({"success": True, "data": group_data})
@app.route('/api/robot/group/<group_id>/permissions')
@login_required
def api_robot_group_permissions(group_id):
permissions = GroupBotManager.list_group_permissions(group_id)
permission_data = []
for feature, status in permissions.items():
permission_data.append({
"feature_id": feature.value,
"feature_name": feature.name,
"feature_description": feature.description,
"status": status.value
})
return jsonify({"success": True, "data": permission_data})
@app.route('/api/robot/group/<group_id>/permissions', methods=['POST'])
@login_required
def api_update_robot_permissions(group_id):
# 更新群组功能权限
data = request.json
feature_id = data.get('feature_id')
status = data.get('status')
try:
feature = Feature(int(feature_id))
new_status = PermissionStatus(status)
# 特殊处理ROBOT功能
if feature == Feature.ROBOT:
r = self.db_manager.get_redis_connection()
if new_status == PermissionStatus.ENABLED:
GroupBotManager.local_cache["group_list"].add(group_id)
r.sadd("group:list", group_id)
else:
GroupBotManager.local_cache["group_list"].remove(group_id)
r.srem("group:list", group_id)
GroupBotManager.set_group_permission(group_id, feature, new_status)
return jsonify({"success": True})
except Exception as e:
self.logger.error(f"更新群组权限失败: {e}")
return jsonify({"success": False, "error": str(e)}), 400
@app.route('/api/robot/batch_operation', methods=['POST'])
@login_required
def api_robot_batch_operation():
# 批量操作接口
data = request.json
operation = data.get('operation')
group_ids = data.get('group_ids', [])
results = {}
try:
if operation == 'remove_groups':
for group_id in group_ids:
result = GroupBotManager.remove_group(group_id)
results[group_id] = result
return jsonify({"success": True, "results": results})
else:
return jsonify({"success": False, "error": "不支持的操作类型"}), 400
except Exception as e:
self.logger.error(f"批量操作失败: {e}")
return jsonify({"success": False, "error": str(e)}), 400
@app.route('/api/user_stats')
@login_required
def api_user_stats():
days = request.args.get('days', 7, type=int)
limit = request.args.get('limit', 10, type=int)
stats = self.stats_db.get_user_stats(days, limit)
# 将用户ID转换为名称
for item in stats:
if 'user_id' in item:
user_id = item['user_id']
item['user_name'] = self.contact_manager.get_nickname(user_id)
return jsonify({"success": True, "data": stats})
@app.route('/api/group_stats')
@login_required
def api_group_stats():
days = request.args.get('days', 7, type=int)
limit = request.args.get('limit', 10, type=int)
stats = self.stats_db.get_group_stats(days, limit)
# 将群ID转换为名称
for item in stats:
if 'group_id' in item:
group_id = item['group_id']
item['group_name'] = self.contact_manager.get_nickname(group_id)
return jsonify({"success": True, "data": stats})
@app.route('/api/plugin_stats')
@login_required
def api_plugin_stats():
days = request.args.get('days', 7, type=int)
stats = self.stats_db.get_plugin_stats(days)
return jsonify({"success": True, "data": stats})
@app.route('/api/error_logs')
@login_required
def api_error_logs():
days = request.args.get('days', 7, type=int)
limit = request.args.get('limit', 100, type=int)
logs = self.stats_db.get_error_logs(days, limit)
return jsonify({"success": True, "data": logs})
@app.route('/api/system_info')
@login_required
def api_system_info():
# 获取系统信息
import platform
import psutil
system_info = {
"os": platform.system(),
"os_version": platform.version(),
"python_version": platform.python_version(),
"cpu_usage": psutil.cpu_percent(),
"memory_usage": psutil.virtual_memory().percent,
"disk_usage": psutil.disk_usage('/').percent,
"uptime": time.time() - psutil.boot_time(),
"timestamp": datetime.now().strftime("%Y-%m-%d %H:%M:%S")
}
return jsonify({"success": True, "data": system_info})
return app
def run(self):
"""运行服务器"""
from waitress import serve
self.logger.info(f"启动服务器: {self.host}:{self.port}")
try:
serve(self.app, host=self.host, port=self.port)
except Exception as e:
self.logger.error(f"服务器运行失败: {e}")
self._stop_event.set()
def stop(self):
"""停止服务器"""
self.logger.info("正在停止服务器...")
self._stop_event.set()
# 如果使用了waitress需要额外的停止逻辑
# 这里可能需要根据实际情况调整
if self._server:
# 某些服务器可能有shutdown方法
if hasattr(self._server, 'shutdown'):
self._server.shutdown()
# 或者需要关闭socket
elif hasattr(self._server, 'socket'):
self._server.socket.close()
self.logger.info("服务器已停止")
# 在 _create_app 方法中添加以下路由
@app.route('/api/dashboard_summary')
@login_required
def api_dashboard_summary():
try:
days = request.args.get('days', 7, type=int)
summary = self.stats_db.get_dashboard_summary(days)
# 转换用户和群组ID为名称
if 'top_users' in summary:
for user in summary['top_users']:
if 'user_id' in user:
user['user_name'] = self.contact_manager.get_nickname(user['user_id'])
if 'top_groups' in summary:
for group in summary['top_groups']:
if 'group_id' in group:
group['group_name'] = self.contact_manager.get_nickname(group['group_id'])
self.logger.info(f"看板主页统计数据: {summary}")
return jsonify({"success": True, "data": summary})
except Exception as e:
self.logger.error(f"获取仪表盘摘要数据出错: {e}")
return jsonify({"success": False, "error": str(e)}), 500
@app.route('/api/plugin_trend')
@login_required
def api_plugin_trend():
days = request.args.get('days', 7, type=int)
plugin_name = request.args.get('plugin_name', '')
trend = self.stats_db.get_plugin_trend(plugin_name, days)
# 如果趋势数据中包含用户或群组ID也进行转换
if isinstance(trend, list):
for item in trend:
if 'user_id' in item:
item['user_name'] = self.contact_manager.get_nickname(item['user_id'])
if 'group_id' in item:
item['group_name'] = self.contact_manager.get_nickname(item['group_id'])
self.logger.info(f"看板主页/api/plugin_trend: {trend}")
return jsonify({"success": True, "data": trend})
@app.route('/api/robot/group/<group_id>/message_trend', methods=['GET'])
@login_required
def get_group_message_trend(group_id):
"""获取群组消息趋势数据"""
try:
days = request.args.get('days', default=7, type=int)
# 获取消息存储实例
trend_data = self.message_storage.get_message_trend(group_id, days)
# 格式化数据为前端需要的格式
dates = []
counts = []
for item in trend_data:
# 将日期转换为字符串
if isinstance(item['date'], datetime):
date_str = item['date'].strftime('%Y-%m-%d')
else:
date_str = str(item['date'])
dates.append(date_str)
counts.append(item['message_count'])
return jsonify({
'success': True,
'data': {
'dates': dates,
'counts': counts
}
})
except Exception as e:
return jsonify({
'success': False,
'error': str(e)
})
@app.route('/api/error_detail/<int:error_id>')
@login_required
def api_error_detail(error_id):
detail = self.stats_db.get_error_detail(error_id)
return jsonify({"success": True, "data": detail})

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

View File

@@ -0,0 +1,132 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}机器人管理后台{% endblock %}</title>
<!-- 添加favicon -->
<link rel="icon" href="/static/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="/static/favicon.ico" type="image/x-icon">
<!-- Element UI CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 自定义样式 -->
<link rel="stylesheet" href="/static/css/style.css">
{% block head %}{% endblock %}
</head>
<body>
<div id="app">
<el-container>
<el-aside width="200px">
<el-menu
default-active="{{ request.path }}"
class="el-menu-vertical-demo"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b"
router>
<div class="logo">WeChatRobot</div>
<el-menu-item index="/">
<i class="el-icon-s-home"></i>
<span slot="title">首页概览</span>
</el-menu-item>
<el-menu-item index="/plugins">
<i class="el-icon-s-grid"></i>
<span slot="title">插件统计</span>
</el-menu-item>
<el-menu-item index="/users">
<i class="el-icon-user"></i>
<span slot="title">用户统计</span>
</el-menu-item>
<el-menu-item index="/groups">
<i class="el-icon-s-cooperation"></i>
<span slot="title">群组统计</span>
</el-menu-item>
<el-menu-item index="/errors">
<i class="el-icon-warning"></i>
<span slot="title">错误日志</span>
</el-menu-item>
<el-menu-item index="/robot_management">
<i class="el-icon-setting"></i>
<span slot="title">群机器人管理</span>
</el-menu-item>
</el-menu>
</el-aside>
<el-container>
<el-header>
<div class="header-title">{% block header_title %}机器人管理后台{% endblock %}</div>
<div class="header-actions">
<el-dropdown @command="handleCommand">
<span class="el-dropdown-link">
管理员<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="logout">退出登录</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</el-header>
<el-main>
<!-- 时间范围选择器 -->
<el-row :gutter="20" style="margin-bottom: 20px;">
<el-col :span="24">
<el-card shadow="hover">
<el-form :inline="true" size="small">
<el-form-item label="统计时间范围">
<el-select v-model="timeRange" @change="loadData">
<el-option label="最近7天" value="7"></el-option>
<el-option label="最近30天" value="30"></el-option>
<el-option label="最近90天" value="90"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="loadData">刷新数据</el-button>
</el-form-item>
</el-form>
</el-card>
</el-col>
</el-row>
{% block content %}{% endblock %}
</el-main>
<el-footer>
<div class="footer-content">
WeChatRobot © 2024 - 由 Trae AI 提供技术支持
</div>
</el-footer>
</el-container>
</el-container>
</div>
<!-- Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<!-- Element UI JS -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!-- Axios -->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<!-- 图表库 -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
new Vue({
el: '#app',
data() {
return {
timeRange: '7'
}
},
methods: {
handleCommand(command) {
if (command === 'logout') {
window.location.href = '/logout';
}
},
loadData() {
// 由子组件实现
this.$emit('load-data', this.timeRange);
}
}
});
</script>
{% block scripts %}{% endblock %}
</body>
</html>

View File

@@ -0,0 +1,146 @@
{% extends "base.html" %}
{% block title %}错误日志 - 机器人管理后台{% endblock %}
{% block content %}
<!-- 错误日志 -->
<div>
<el-row :gutter="20">
<el-col :span="24">
<el-card shadow="hover">
<div slot="header">
<span>错误日志</span>
</div>
<el-table {% raw %}:data="errorLogs"{% endraw %} style="width: 100%" border>
<el-table-column prop="plugin_name" label="插件名称"></el-table-column>
<el-table-column prop="command" label="命令"></el-table-column>
<el-table-column prop="error_message" label="错误信息" :show-overflow-tooltip="true"></el-table-column>
<el-table-column prop="created_at" label="时间"></el-table-column>
<el-table-column label="用户">
<template slot-scope="scope">
<span v-if="scope.row.user_id">
{% raw %}{{ scope.row.user_name || scope.row.user_id }} ({{ scope.row.user_id }}){% endraw %}
</span>
<span v-else>-</span>
</template>
</el-table-column>
<el-table-column label="群组">
<template slot-scope="scope">
<span v-if="scope.row.group_id">
{% raw %}{{ scope.row.group_name || scope.row.group_id }} ({{ scope.row.group_id }}){% endraw %}
</span>
<span v-else>-</span>
</template>
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button size="mini" type="primary" @click="viewErrorDetail(scope.row)">查看详情</el-button>
</template>
</el-table-column>
</el-table>
<div class="pagination-container" style="margin-top: 20px; text-align: right;">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[10, 20, 50, 100]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="totalErrors">
</el-pagination>
</div>
</el-card>
</el-col>
</el-row>
<!-- 错误详情对话框 -->
<el-dialog title="错误详情" :visible.sync="errorDetailVisible" width="70%">
<div>
<p><strong>插件名称:</strong> {% raw %}{{ errorDetail.plugin_name }}{% endraw %}</p>
<p><strong>命令:</strong> {% raw %}{{ errorDetail.command }}{% endraw %}</p>
<p><strong>用户ID:</strong> {% raw %}{{ errorDetail.user_id }}{% endraw %}</p>
<p><strong>群组ID:</strong> {% raw %}{{ errorDetail.group_id || '无' }}{% endraw %}</p>
<p><strong>时间:</strong> {% raw %}{{ errorDetail.created_at }}{% endraw %}</p>
<p><strong>错误信息:</strong> {% raw %}{{ errorDetail.error_message }}{% endraw %}</p>
<div v-if="errorDetail.stack_trace">
<p><strong>堆栈跟踪:</strong></p>
<pre>{% raw %}{{ errorDetail.stack_trace }}{% endraw %}</pre>
</div>
</div>
</el-dialog>
</div>
{% endblock %}
{% block scripts %}
<script>
new Vue({
el: '#app',
mixins: [baseApp],
data() {
return {
errorLogs: [],
errorDetail: {},
errorDetailVisible: false,
currentPage: 1,
pageSize: 20,
totalErrors: 0
}
},
mounted() {
this.currentView = '5';
this.loadData();
},
methods: {
loadData() {
const days = parseInt(this.timeRange);
this.loadErrorLogs(days);
},
loadErrorLogs(days) {
axios.get(`/api/error_logs?days=${days}&limit=${this.pageSize}&offset=${(this.currentPage - 1) * this.pageSize}`)
.then(response => {
if (response.data.success) {
this.errorLogs = response.data.data.logs || [];
this.totalErrors = response.data.data.total || 0;
}
})
.catch(error => {
console.error('加载错误日志出错:', error);
this.$message.error('加载错误日志出错');
});
},
viewErrorDetail(error) {
// 如果已有错误ID直接加载详情
if (error.id) {
this.loadErrorDetail(error.id);
} else {
// 否则直接显示当前行的数据
this.errorDetail = error;
this.errorDetailVisible = true;
}
},
loadErrorDetail(errorId) {
axios.get(`/api/error_detail/${errorId}`)
.then(response => {
if (response.data.success) {
this.errorDetail = response.data.data || {};
this.errorDetailVisible = true;
}
})
.catch(error => {
console.error('加载错误详情出错:', error);
this.$message.error('加载错误详情出错');
});
},
handleSizeChange(size) {
this.pageSize = size;
this.currentPage = 1; // 重置到第一页
this.loadData();
},
handleCurrentChange(page) {
this.currentPage = page;
this.loadData();
}
}
});
</script>
{% endblock %}

View File

@@ -0,0 +1,79 @@
{% extends "base.html" %}
{% block title %}群组统计 - 机器人管理后台{% endblock %}
{% block content %}
<!-- 群组统计 -->
<div>
<el-row :gutter="20">
<el-col :span="24">
<el-card shadow="hover">
<div slot="header">
<span>群组活跃度排行</span>
</div>
<el-table {% raw %}:data="groupStats"{% endraw %} style="width: 100%" border>
<el-table-column label="群组信息">
<template slot-scope="scope">
{% raw %}{{ scope.row.group_name || scope.row.group_id }} ({{ scope.row.group_id }}){% endraw %}
</template>
</el-table-column>
<el-table-column prop="total_calls" label="调用次数" sortable></el-table-column>
<el-table-column prop="used_plugins" label="使用插件数" sortable></el-table-column>
<el-table-column prop="unique_users" label="唯一用户数" sortable></el-table-column>
<el-table-column prop="success_calls" label="成功次数" sortable></el-table-column>
<el-table-column prop="failed_calls" label="失败次数" sortable></el-table-column>
<el-table-column label="成功率" sortable>
<template slot-scope="scope">
{% raw %} {{ (scope.row.success_calls / scope.row.total_calls * 100).toFixed(2) }}{% endraw %}%
</template>
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button size="mini" type="primary" @click="viewGroupDetail(scope.row)">查看详情</el-button>
</template>
</el-table-column>
</el-table>
</el-card>
</el-col>
</el-row>
</div>
{% endblock %}
{% block scripts %}
<script>
new Vue({
el: '#app',
mixins: [baseApp],
data() {
return {
groupStats: []
}
},
mounted() {
this.currentView = '4';
this.loadData();
},
methods: {
loadData() {
const days = parseInt(this.timeRange);
this.loadGroupStats(days);
},
loadGroupStats(days) {
axios.get(`/api/group_stats?days=${days}&limit=20`)
.then(response => {
if (response.data.success) {
this.groupStats = response.data.data || [];
}
})
.catch(error => {
console.error('加载群组统计数据出错:', error);
this.$message.error('加载群组统计数据出错');
});
},
viewGroupDetail(group) {
this.$message.info('群组详情功能开发中');
}
}
});
</script>
{% endblock %}

View File

@@ -0,0 +1,386 @@
{% extends "base.html" %}
{% block title %}首页概览 - 机器人管理后台{% endblock %}
{% block content %}
<!-- 首页概览 -->
<div>
<el-row :gutter="20">
<el-col :span="4">
<el-card shadow="hover" class="stats-card">
<div slot="header">
<span>总调用次数</span>
</div>
<div style="font-size: 24px; text-align: center;">
{% raw %}{{ totalCalls }}{% endraw %}
</div>
</el-card>
</el-col>
<el-col :span="4">
<el-card shadow="hover" class="stats-card">
<div slot="header">
<span>成功率</span>
</div>
<div style="font-size: 24px; text-align: center;">
{% raw %}{{ successRate.toFixed(2) }}{% endraw %}%
</div>
</el-card>
</el-col>
<el-col :span="4">
<el-card shadow="hover" class="stats-card">
<div slot="header">
<span>活跃用户数</span>
</div>
<div style="font-size: 24px; text-align: center;">
{% raw %}{{ activeUsers }}{% endraw %}
</div>
</el-card>
</el-col>
<el-col :span="4">
<el-card shadow="hover" class="stats-card">
<div slot="header">
<span>活跃群组数</span>
</div>
<div style="font-size: 24px; text-align: center;">
{% raw %}{{ activeGroups }}{% endraw %}
</div>
</el-card>
</el-col>
<el-col :span="4">
<el-card shadow="hover" class="stats-card">
<div slot="header">
<span>平均响应时间</span>
</div>
<div style="font-size: 24px; text-align: center;">
{% raw %}{{ avgResponseTime.toFixed(2) }}{% endraw %} ms
</div>
</el-card>
</el-col>
</el-row>
<!-- 添加热门用户、群组和插件 -->
<el-row :gutter="20" style="margin-top: 20px;">
<el-col :span="8">
<el-card shadow="hover">
<div slot="header">
<span>热门用户</span>
</div>
<el-table :data="topUsers" style="width: 100%">
<!-- 修改将用户ID改为用户信息使用固定像素宽度 -->
<el-table-column label="用户信息" min-width="180">
<template slot-scope="scope">
{% raw %}{{ scope.row.user_name || scope.row.user_id }} ({{ scope.row.user_id }}){% endraw %}
</template>
</el-table-column>
<el-table-column prop="total_calls" label="调用次数" width="80" align="center"></el-table-column>
</el-table>
</el-card>
</el-col>
<el-col :span="8">
<el-card shadow="hover">
<div slot="header">
<span>热门群组</span>
</div>
<el-table :data="topGroups" style="width: 100%">
<!-- 修改将群组ID改为群组信息使用固定像素宽度 -->
<el-table-column label="群组信息" min-width="180">
<template slot-scope="scope">
{% raw %}{{ scope.row.group_name || scope.row.group_id }} ({{ scope.row.group_id }}){% endraw %}
</template>
</el-table-column>
<el-table-column prop="total_calls" label="调用次数" width="80" align="center"></el-table-column>
</el-table>
</el-card>
</el-col>
<el-col :span="8">
<el-card shadow="hover">
<div slot="header">
<span>热门插件</span>
</div>
<el-table :data="topPlugins" style="width: 100%">
<el-table-column prop="plugin_name" label="插件名称" min-width="180"></el-table-column>
<el-table-column prop="total_calls" label="调用次数" width="80" align="center"></el-table-column>
</el-table>
</el-card>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<div class="chart-container">
<h3>插件使用排行</h3>
<canvas id="pluginChart" width="400" height="200"></canvas>
</div>
</el-col>
<el-col :span="12">
<div class="chart-container">
<h3>成功率分析</h3>
<canvas id="successRateChart" width="400" height="200"></canvas>
</div>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="24">
<div class="chart-container">
<h3>使用趋势</h3>
<canvas id="trendChart" width="800" height="200"></canvas>
</div>
</el-col>
</el-row>
</div>
{% endblock %}
{% block scripts %}
<script>
new Vue({
el: '#app',
mixins: [baseApp],
data() {
return {
totalCalls: 0,
successRate: 0,
activeUsers: 0,
activeGroups: 0,
avgResponseTime: 0, // 确保这里初始化为数字
topUsers: [],
topGroups: [],
topPlugins: [],
pluginStats: [],
charts: {} // 添加charts对象
}
},
mounted() {
this.currentView = '1';
this.loadData();
},
methods: {
loadData() {
const days = parseInt(this.timeRange);
this.loadDashboardSummary(days);
this.loadPluginStats(days);
this.loadPluginTrend(days);
},
loadDashboardSummary(days) {
axios.get(`/api/dashboard_summary?days=${days}`)
.then(response => {
if (response.data.success) {
const data = response.data.data;
this.totalCalls = parseInt(data.total_calls) || 0;
this.successRate = parseFloat(data.success_rate) || 0;
this.activeUsers = data.active_users || 0;
this.activeGroups = data.active_groups || 0;
this.avgResponseTime = parseFloat(data.avg_response_time) || 0;
this.topUsers = data.top_users || [];
this.topGroups = data.top_groups || [];
this.topPlugins = data.top_plugins || [];
}
})
.catch(error => {
console.error('加载仪表盘摘要数据出错:', error);
this.$message.error('加载仪表盘摘要数据出错');
});
},
loadPluginStats(days) {
axios.get(`/api/plugin_stats?days=${days}`)
.then(response => {
if (response.data.success) {
this.pluginStats = response.data.data || [];
this.$nextTick(() => {
this.renderPluginChart();
this.renderSuccessRateChart();
});
}
})
.catch(error => {
console.error('加载插件统计数据出错:', error);
this.$message.error('加载插件统计数据出错');
});
},
loadPluginTrend(days) {
axios.get(`/api/plugin_trend?days=${days}`)
.then(response => {
if (response.data.success) {
const trendData = response.data.data || [];
this.$nextTick(() => {
this.renderTrendChart(trendData);
});
}
})
.catch(error => {
console.error('加载插件趋势数据出错:', error);
this.$message.error('加载插件趋势数据出错');
});
},
renderPluginChart() {
const ctx = document.getElementById('pluginChart').getContext('2d');
// 销毁旧图表
if (this.charts.pluginChart) {
this.charts.pluginChart.destroy();
}
// 准备数据
const sortedData = [...this.pluginStats].sort((a, b) => b.total_calls - a.total_calls).slice(0, 10);
// 修改这里:将插件名称和指令组合作为标签
const labels = sortedData.map(item => `${item.plugin_name}(${item.command})`);
const data = sortedData.map(item => item.total_calls);
// 创建新图表
this.charts.pluginChart = new Chart(ctx, {
type: 'bar',
data: {
labels: labels,
datasets: [{
label: '调用次数',
data: data,
backgroundColor: 'rgba(54, 162, 235, 0.6)',
borderColor: 'rgba(54, 162, 235, 1)',
borderWidth: 1
}]
},
options: {
responsive: true,
scales: {
y: {
beginAtZero: true
}
}
}
});
},
renderSuccessRateChart() {
const ctx = document.getElementById('successRateChart').getContext('2d');
// 销毁旧图表
if (this.charts.successRateChart) {
this.charts.successRateChart.destroy();
}
// 准备数据
const sortedData = [...this.pluginStats]
.filter(item => item.total_calls > 0)
.sort((a, b) => (b.success_calls / b.total_calls) - (a.success_calls / a.total_calls))
.slice(0, 10);
// 修改这里:将插件名称和指令组合作为标签
const labels = sortedData.map(item => `${item.plugin_name}(${item.command})`);
const data = sortedData.map(item => (item.success_calls / item.total_calls) * 100);
// 创建新图表
this.charts.successRateChart = new Chart(ctx, {
type: 'bar',
data: {
labels: labels,
datasets: [{
label: '成功率(%)',
data: data,
backgroundColor: 'rgba(75, 192, 192, 0.6)',
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1
}]
},
options: {
responsive: true,
scales: {
y: {
beginAtZero: true,
max: 100
}
}
}
});
},
renderTrendChart(trendData) {
const ctx = document.getElementById('trendChart').getContext('2d');
// 销毁旧图表
if (this.charts && this.charts.trendChart) {
this.charts.trendChart.destroy();
}
// 确保charts对象存在
if (!this.charts) {
this.charts = {};
}
// 准备数据 - 修改字段名匹配和数据类型转换
const labels = trendData.map(item => item.date); // 使用date而不是stat_date
const totalData = trendData.map(item => parseInt(item.total_calls) || 0); // 确保转换为数字
const successData = trendData.map(item => parseInt(item.success_calls) || 0);
const errorData = trendData.map(item => parseInt(item.failed_calls) || 0); // 使用failed_calls而不是error_calls
console.log('处理后的趋势数据:', { labels, totalData, successData, errorData });
// 创建新图表
this.charts.trendChart = new Chart(ctx, {
type: 'line',
data: {
labels: labels,
datasets: [
{
label: '总调用',
data: totalData,
fill: false,
backgroundColor: 'rgba(54, 162, 235, 0.6)',
borderColor: 'rgba(54, 162, 235, 1)',
tension: 0.1
},
{
label: '成功调用',
data: successData,
fill: false,
backgroundColor: 'rgba(75, 192, 192, 0.6)',
borderColor: 'rgba(75, 192, 192, 1)',
tension: 0.1
},
{
label: '失败调用',
data: errorData,
fill: false,
backgroundColor: 'rgba(255, 99, 132, 0.6)',
borderColor: 'rgba(255, 99, 132, 1)',
tension: 0.1
}
]
},
options: {
responsive: true,
maintainAspectRatio: true,
scales: {
y: {
beginAtZero: true
}
}
}
});
}
}
});
</script>
{% endblock %}
{% block styles %}
<style>
.stats-card {
margin-bottom: 15px;
height: 120px;
}
.chart-container {
margin-bottom: 20px;
padding: 10px;
background-color: #fff;
border-radius: 4px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.chart-container h3 {
margin-top: 0;
margin-bottom: 10px;
font-size: 16px;
color: #606266;
}
</style>
{% endblock %}

View File

@@ -0,0 +1,114 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登录 - WeChatRobot管理后台</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<style>
body {
margin: 0;
padding: 0;
font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
background-color: #f5f7fa;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.login-container {
width: 400px;
padding: 30px;
background-color: #fff;
border-radius: 4px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.login-title {
text-align: center;
margin-bottom: 30px;
color: #409EFF;
}
.login-form {
margin-top: 20px;
}
.login-button {
width: 100%;
margin-top: 20px;
}
.error-message {
color: #F56C6C;
margin-top: 10px;
text-align: center;
}
</style>
</head>
<body>
<div id="app" class="login-container">
<h2 class="login-title">WeChatRobot管理后台</h2>
<el-form class="login-form" :model="loginForm" :rules="loginRules" ref="loginForm">
<el-form-item prop="username">
<el-input v-model="loginForm.username" placeholder="用户名" prefix-icon="el-icon-user"></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input v-model="loginForm.password" placeholder="密码" prefix-icon="el-icon-lock" show-password></el-input>
</el-form-item>
<el-button type="primary" class="login-button" @click="submitForm('loginForm')">登录</el-button>
<div class="error-message" v-if="errorMessage">{{ errorMessage }}</div>
</el-form>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue({
el: '#app',
data() {
return {
loginForm: {
username: '',
password: ''
},
loginRules: {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' }
]
},
errorMessage: '{{ error }}'
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
// 创建表单并提交
const form = document.createElement('form');
form.method = 'POST';
form.action = '/login';
const usernameInput = document.createElement('input');
usernameInput.type = 'hidden';
usernameInput.name = 'username';
usernameInput.value = this.loginForm.username;
form.appendChild(usernameInput);
const passwordInput = document.createElement('input');
passwordInput.type = 'hidden';
passwordInput.name = 'password';
passwordInput.value = this.loginForm.password;
form.appendChild(passwordInput);
document.body.appendChild(form);
form.submit();
} else {
return false;
}
});
}
}
});
</script>
</body>
</html>

View File

@@ -0,0 +1,255 @@
{% 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">
<span>插件使用统计</span>
</div>
<el-table {% raw %}:data="pluginStats"{% endraw %} style="width: 100%" border>
<el-table-column prop="plugin_name" label="插件名称"></el-table-column>
<el-table-column prop="command" label="触发指令"></el-table-column>
<el-table-column prop="total_calls" label="调用次数" sortable>
<template slot-scope="scope">
{% raw %}{{ parseInt(scope.row.total_calls) || 0 }}{% endraw %}
</template>
</el-table-column>
<el-table-column prop="success_calls" label="成功次数" sortable>
<template slot-scope="scope">
{% raw %}{{ parseInt(scope.row.success_calls) || 0 }}{% endraw %}
</template>
</el-table-column>
<el-table-column prop="failed_calls" label="失败次数" sortable>
<template slot-scope="scope">
{% raw %}{{ parseInt(scope.row.failed_calls) || 0 }}{% endraw %}
</template>
</el-table-column>
<el-table-column label="成功率" sortable>
<template slot-scope="scope">
{% raw %}{{ parseInt(scope.row.total_calls) > 0 ? ((parseInt(scope.row.success_calls) / parseInt(scope.row.total_calls)) * 100).toFixed(2) : '100.00' }}{% endraw %}%
</template>
</el-table-column>
<el-table-column label="平均响应时间" sortable>
<template slot-scope="scope">
{% raw %}{{ (scope.row.avg_process_time || 0).toFixed(2) }}{% endraw %}ms
</template>
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button size="mini" type="primary" {% raw %}@click="viewPluginTrend(scope.row)"{% endraw %}>查看趋势</el-button>
</template>
</el-table-column>
</el-table>
<el-table {% raw %}:data="pluginUsers"{% endraw %} style="width: 100%" border v-if="showUserStats">
<el-table-column label="用户">
<template slot-scope="scope">
{% raw %}{{ scope.row.user_name || scope.row.user_id }} ({{ scope.row.user_id }}){% endraw %}
</template>
</el-table-column>
<el-table-column prop="total_calls" label="调用次数" sortable>
<template slot-scope="scope">
{% raw %}{{ parseInt(scope.row.total_calls) || 0 }}{% endraw %}
</template>
</el-table-column>
<el-table-column prop="success_calls" label="成功次数" sortable>
<template slot-scope="scope">
{% raw %}{{ parseInt(scope.row.success_calls) || 0 }}{% endraw %}
</template>
</el-table-column>
<el-table-column prop="failed_calls" label="失败次数" sortable>
<template slot-scope="scope">
{% raw %}{{ parseInt(scope.row.failed_calls) || 0 }}{% endraw %}
</template>
</el-table-column>
<el-table-column label="成功率" sortable>
<template slot-scope="scope">
{% raw %}{{ parseInt(scope.row.total_calls) > 0 ? ((parseInt(scope.row.success_calls) / parseInt(scope.row.total_calls)) * 100).toFixed(2) : '100.00' }}{% endraw %}%
</template>
</el-table-column>
<el-table-column label="平均响应时间" sortable>
<template slot-scope="scope">
{% raw %}{{ (scope.row.avg_process_time || 0).toFixed(2) }}{% endraw %}ms
</template>
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button size="mini" type="primary" {% raw %}@click="viewPluginTrend(scope.row)"{% endraw %}>查看趋势</el-button>
</template>
</el-table-column>
</el-table>
<el-table {% raw %}:data="pluginGroups"{% endraw %} style="width: 100%" border v-if="showGroupStats">
<el-table-column label="群组">
<template slot-scope="scope">
{% raw %}{{ scope.row.group_name || scope.row.group_id }} ({{ scope.row.group_id }}){% endraw %}
</template>
</el-table-column>
<el-table-column prop="total_calls" label="调用次数" sortable>
<template slot-scope="scope">
{% raw %}{{ parseInt(scope.row.total_calls) || 0 }}{% endraw %}
</template>
</el-table-column>
<el-table-column prop="success_calls" label="成功次数" sortable>
<template slot-scope="scope">
{% raw %}{{ parseInt(scope.row.success_calls) || 0 }}{% endraw %}
</template>
</el-table-column>
<el-table-column prop="failed_calls" label="失败次数" sortable>
<template slot-scope="scope">
{% raw %}{{ parseInt(scope.row.failed_calls) || 0 }}{% endraw %}
</template>
</el-table-column>
<el-table-column label="成功率" sortable>
<template slot-scope="scope">
{% raw %}{{ parseInt(scope.row.total_calls) > 0 ? ((parseInt(scope.row.success_calls) / parseInt(scope.row.total_calls)) * 100).toFixed(2) : '100.00' }}{% endraw %}%
</template>
</el-table-column>
<el-table-column label="平均响应时间" sortable>
<template slot-scope="scope">
{% raw %}{{ (scope.row.avg_process_time || 0).toFixed(2) }}{% endraw %}ms
</template>
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button size="mini" type="primary" {% raw %}@click="viewPluginTrend(scope.row)"{% endraw %}>查看趋势</el-button>
</template>
</el-table-column>
</el-table>
</el-card>
</el-col>
</el-row>
<!-- 插件趋势对话框 -->
<el-dialog title="插件使用趋势" {% raw %}:visible.sync="pluginTrendVisible"{% endraw %} width="70%">
<div class="chart-container">
<h3>{% raw %}{{ selectedPlugin ? selectedPlugin.plugin_name : '' }}{% endraw %} 使用趋势</h3>
<canvas id="pluginTrendChart" width="800" height="400"></canvas>
</div>
</el-dialog>
</div>
{% endblock %}
{% block scripts %}
<script>
new Vue({
el: '#app',
mixins: [baseApp],
data() {
return {
pluginStats: [],
pluginTrendVisible: false,
selectedPlugin: null
}
},
mounted() {
this.currentView = '2';
this.loadData();
},
methods: {
loadData() {
const days = parseInt(this.timeRange);
this.loadPluginStats(days);
},
loadPluginStats(days) {
axios.get(`/api/plugin_stats?days=${days}`)
.then(response => {
if (response.data.success) {
this.pluginStats = response.data.data || [];
}
})
.catch(error => {
console.error('加载插件统计数据出错:', error);
this.$message.error('加载插件统计数据出错');
});
},
viewPluginTrend(plugin) {
this.selectedPlugin = plugin;
this.pluginTrendVisible = true;
// 加载插件趋势数据
const days = parseInt(this.timeRange);
axios.get(`/api/plugin_trend?days=${days}&plugin_name=${plugin.plugin_name}`)
.then(response => {
if (response.data.success) {
const trendData = response.data.data || [];
this.$nextTick(() => {
this.renderPluginTrendChart(trendData, plugin.plugin_name);
});
}
})
.catch(error => {
console.error('加载插件趋势数据出错:', error);
this.$message.error('加载插件趋势数据出错');
});
},
renderPluginTrendChart(trendData, pluginName) {
const ctx = document.getElementById('pluginTrendChart').getContext('2d');
// 销毁旧图表
if (this.charts && this.charts.pluginTrendChart) {
this.charts.pluginTrendChart.destroy();
}
// 确保charts对象存在
if (!this.charts) {
this.charts = {};
}
// 准备数据
const labels = trendData.map(item => item.date || item.stat_date);
const totalData = trendData.map(item => parseInt(item.total_calls) || 0);
const successData = trendData.map(item => parseInt(item.success_calls) || 0);
const failedData = trendData.map(item => parseInt(item.failed_calls) || 0);
// 创建新图表
this.charts.pluginTrendChart = new Chart(ctx, {
type: 'line',
data: {
labels: labels,
datasets: [
{
label: `${pluginName} 总调用`,
data: totalData,
fill: false,
backgroundColor: 'rgba(54, 162, 235, 0.6)',
borderColor: 'rgba(54, 162, 235, 1)',
tension: 0.1
},
{
label: `${pluginName} 成功调用`,
data: successData,
fill: false,
backgroundColor: 'rgba(75, 192, 192, 0.6)',
borderColor: 'rgba(75, 192, 192, 1)',
tension: 0.1
},
{
label: `${pluginName} 失败调用`,
data: failedData,
fill: false,
backgroundColor: 'rgba(255, 99, 132, 0.6)',
borderColor: 'rgba(255, 99, 132, 1)',
tension: 0.1
}
]
},
options: {
responsive: true,
scales: {
y: {
beginAtZero: true
}
}
}
});
}
}
});
</script>
{% endblock %}

View File

@@ -0,0 +1,473 @@
{% extends "base.html" %}
{% block title %}群机器人管理 - 机器人管理后台{% endblock %}
{% block content %}
<!-- 群机器人管理 -->
<div>
<el-row :gutter="20">
<el-col :span="24">
<el-card shadow="hover">
<div slot="header" class="clearfix">
<span>群机器人管理</span>
<el-button
type="primary"
size="small"
style="float: right; margin-left: 10px;"
@click="showAddGroupDialog">
添加群组
</el-button>
<el-input
placeholder="搜索群组..."
v-model="searchQuery"
style="width: 200px; float: right"
clearable>
</el-input>
</div>
<!-- 群组列表 -->
<el-table
:data="filteredGroups"
style="width: 100%"
border
@selection-change="handleSelectionChange">
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column label="群组信息">
<template slot-scope="scope">
{% raw %}{{ scope.row.group_name || scope.row.group_id }} ({{ scope.row.group_id }}){% endraw %}
</template>
</el-table-column>
<el-table-column label="机器人状态" width="120">
<template slot-scope="scope">
<el-tag
:type="scope.row.robot_status === 'enabled' ? 'success' : 'danger'">
{% raw %}{{ scope.row.robot_status === 'enabled' ? '已启用' : '已关闭' }}{% endraw %}
</el-tag>
</template>
</el-table-column>
<el-table-column label="操作" width="280">
<template slot-scope="scope">
<el-button
size="mini"
type="primary"
@click="viewGroupPermissions(scope.row)">
查看权限
</el-button>
<el-button
size="mini"
:type="scope.row.robot_status === 'enabled' ? 'danger' : 'success'"
@click="toggleRobotStatus(scope.row)">
{% raw %}{{ scope.row.robot_status === 'enabled' ? '关闭' : '启用' }}{% endraw %}
</el-button>
<el-button
size="mini"
type="info"
@click="viewMessageTrend(scope.row)">
消息趋势
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 批量操作按钮 -->
<div style="margin-top: 20px" v-if="selectedGroups.length > 0">
<el-alert
title="批量操作"
type="info"
:closable="false">
<span>已选择 {% raw %}{{ selectedGroups.length }}{% endraw %} 个群组</span>
</el-alert>
<div style="margin-top: 10px">
<el-button type="success" size="small" @click="batchEnableRobot">批量启用</el-button>
<el-button type="danger" size="small" @click="batchDisableRobot">批量关闭</el-button>
<el-button type="warning" size="small" @click="batchRemoveGroups">批量移除</el-button>
</div>
</div>
</el-card>
</el-col>
</el-row>
<!-- 群组权限管理对话框 -->
<el-dialog
:title="currentGroupName + ' 功能权限管理'"
:visible.sync="permissionDialogVisible"
width="70%">
<el-table :data="permissions" style="width: 100%" border>
<el-table-column prop="feature_id" label="功能ID" width="80"></el-table-column>
<el-table-column prop="feature_description" label="功能描述"></el-table-column>
<el-table-column label="状态" width="100">
<template slot-scope="scope">
<el-tag
:type="scope.row.status === 'enabled' ? 'success' : 'danger'">
{% raw %}{{ scope.row.status === 'enabled' ? '已启用' : '已关闭' }}{% endraw %}
</el-tag>
</template>
</el-table-column>
<el-table-column label="操作" width="120">
<template slot-scope="scope">
<el-switch
v-model="scope.row.statusBool"
active-color="#13ce66"
inactive-color="#ff4949"
@change="togglePermission(scope.row)">
</el-switch>
</template>
</el-table-column>
</el-table>
<div slot="footer" class="dialog-footer">
<el-button @click="enableAllPermissions" type="success">一键启用全部</el-button>
<el-button @click="disableAllPermissions" type="danger">一键关闭全部</el-button>
<el-button @click="permissionDialogVisible = false">关闭</el-button>
</div>
</el-dialog>
<!-- 添加群组对话框 -->
<el-dialog
title="添加群组"
:visible.sync="addGroupDialogVisible"
width="30%">
<el-form :model="addGroupForm" :rules="addGroupRules" ref="addGroupForm">
<el-form-item label="群组ID" prop="groupId">
<el-input v-model="addGroupForm.groupId" placeholder="请输入群组ID"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="addGroupDialogVisible = false">取消</el-button>
<el-button type="primary" @click="submitAddGroup">确定</el-button>
</span>
</el-dialog>
<!-- 群组消息趋势对话框 -->
<el-dialog
title="群组消息趋势"
:visible.sync="messageTrendDialogVisible"
width="70%">
<div class="chart-container">
<h3>{% raw %}{{ currentGroupName }}{% endraw %} 消息趋势</h3>
<canvas id="messageTrendChart" width="800" height="400"></canvas>
</div>
</el-dialog>
</div>
{% endblock %}
{% block scripts %}
<script>
new Vue({
el: '#app',
mixins: [baseApp],
data() {
return {
groups: [],
permissions: [],
currentGroupId: null,
currentGroupName: '',
searchQuery: '',
selectedGroups: [],
permissionDialogVisible: false,
// 添加群组相关数据
addGroupDialogVisible: false,
addGroupForm: {
groupId: ''
},
addGroupRules: {
groupId: [
{ required: true, message: '请输入群组ID', trigger: 'blur' },
{ pattern: /^\S+$/, message: '群组ID不能包含空格', trigger: 'blur' }
]
},
// 添加消息趋势相关数据
messageTrendDialogVisible: false,
messageTrendData: {
dates: [],
counts: []
}
}
},
computed: {
filteredGroups() {
if (!this.searchQuery) return this.groups;
const query = this.searchQuery.toLowerCase();
return this.groups.filter(group =>
(group.group_id && group.group_id.toLowerCase().includes(query)) ||
(group.group_name && group.group_name.toLowerCase().includes(query))
);
}
},
mounted() {
this.currentView = '6'; // 设置当前菜单项
this.loadGroups();
},
methods: {
loadGroups() {
axios.get('/api/robot/groups')
.then(response => {
if (response.data.success) {
this.groups = response.data.data || [];
} else {
this.$message.error('加载群组失败');
}
})
.catch(error => {
console.error('加载群组失败:', error);
this.$message.error('加载群组失败: ' + error.message);
});
},
handleSelectionChange(selection) {
this.selectedGroups = selection.map(item => item.group_id);
},
viewGroupPermissions(group) {
this.currentGroupId = group.group_id;
this.currentGroupName = group.group_name || group.group_id;
axios.get(`/api/robot/group/${group.group_id}/permissions`)
.then(response => {
if (response.data.success) {
// 添加布尔值属性用于switch组件
const permissionsData = response.data.data || [];
this.permissions = permissionsData.map(p => ({
...p,
statusBool: p.status === 'enabled'
}));
this.permissionDialogVisible = true;
} else {
this.$message.error('加载权限失败');
}
})
.catch(error => {
console.error('加载权限失败:', error);
this.$message.error('加载权限失败: ' + error.message);
});
},
togglePermission(permission) {
const newStatus = permission.statusBool ? 'enabled' : 'disabled';
axios.post(`/api/robot/group/${this.currentGroupId}/permissions`, {
feature_id: permission.feature_id,
status: newStatus
})
.then(response => {
if (response.data.success) {
permission.status = newStatus;
this.$message.success('更新权限成功');
} else {
// 恢复原状态
permission.statusBool = !permission.statusBool;
this.$message.error('更新权限失败');
}
})
.catch(error => {
// 恢复原状态
permission.statusBool = !permission.statusBool;
console.error('更新权限失败:', error);
this.$message.error('更新权限失败: ' + error.message);
});
},
enableAllPermissions() {
this.updateAllPermissions('enabled');
},
disableAllPermissions() {
this.updateAllPermissions('disabled');
},
updateAllPermissions(status) {
axios.post(`/api/robot/group/${this.currentGroupId}/permissions`, {
status: status
})
.then(response => {
if (response.data.success) {
// 更新本地数据
this.permissions.forEach(p => {
p.status = status;
p.statusBool = status === 'enabled';
});
this.$message.success('批量更新权限成功');
} else {
this.$message.error('批量更新权限失败');
}
})
.catch(error => {
console.error('批量更新权限失败:', error);
this.$message.error('批量更新权限失败: ' + error.message);
});
},
toggleRobotStatus(group) {
const newStatus = group.robot_status === 'enabled' ? 'disabled' : 'enabled';
axios.post(`/api/robot/group/${group.group_id}/status`, {
status: newStatus
})
.then(response => {
if (response.data.success) {
group.robot_status = newStatus;
this.$message.success('更新机器人状态成功');
} else {
this.$message.error('更新机器人状态失败');
}
})
.catch(error => {
console.error('更新机器人状态失败:', error);
this.$message.error('更新机器人状态失败: ' + error.message);
});
},
showAddGroupDialog() {
this.addGroupForm.groupId = '';
this.addGroupDialogVisible = true;
},
submitAddGroup() {
this.$refs.addGroupForm.validate(valid => {
if (valid) {
axios.post('/api/robot/group', {
group_id: this.addGroupForm.groupId
})
.then(response => {
if (response.data.success) {
this.addGroupDialogVisible = false;
this.$message.success('添加群组成功');
// 重新加载群组列表
this.loadGroups();
} else {
this.$message.error('添加群组失败');
}
})
.catch(error => {
console.error('添加群组失败:', error);
this.$message.error('添加群组失败: ' + error.message);
});
}
});
},
batchEnableRobot() {
this.batchUpdateRobotStatus('enabled');
},
batchDisableRobot() {
this.batchUpdateRobotStatus('disabled');
},
batchUpdateRobotStatus(status) {
if (this.selectedGroups.length === 0) {
this.$message.warning('请先选择群组');
return;
}
axios.post('/api/robot/batch_operation', {
operation: 'update_status',
group_ids: this.selectedGroups,
status: status
})
.then(response => {
if (response.data.success) {
// 更新本地数据
this.groups.forEach(g => {
if (this.selectedGroups.includes(g.group_id)) {
g.robot_status = status;
}
});
this.$message.success('批量更新状态成功');
} else {
this.$message.error('批量更新状态失败');
}
})
.catch(error => {
console.error('批量更新状态失败:', error);
this.$message.error('批量更新状态失败: ' + error.message);
});
},
batchRemoveGroups() {
if (this.selectedGroups.length === 0) {
this.$message.warning('请先选择群组');
return;
}
this.$confirm(`确定要批量移除 ${this.selectedGroups.length} 个群组吗? 此操作将清除这些群组的所有设置。`, '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'danger'
}).then(() => {
axios.post('/api/robot/batch_operation', {
operation: 'remove_groups',
group_ids: this.selectedGroups
})
.then(response => {
if (response.data.success) {
// 从列表中移除这些群组
this.groups = this.groups.filter(g => !this.selectedGroups.includes(g.group_id));
this.selectedGroups = [];
this.$message.success('批量移除成功');
} else {
this.$message.error('批量移除失败');
}
})
.catch(error => {
console.error('批量移除失败:', error);
this.$message.error('批量移除失败: ' + error.message);
});
}).catch(() => {});
},
// 添加查看消息趋势的方法
viewMessageTrend(group) {
this.currentGroupId = group.group_id;
this.currentGroupName = group.group_name || group.group_id;
// 获取消息趋势数据
const days = parseInt(this.timeRange || 7);
axios.get(`/api/robot/group/${group.group_id}/message_trend?days=${days}`)
.then(response => {
if (response.data.success) {
this.messageTrendData = response.data.data || { dates: [], counts: [] };
this.messageTrendDialogVisible = true;
// 在下一个DOM更新周期渲染图表
this.$nextTick(() => {
this.renderMessageTrendChart();
});
} else {
this.$message.error('加载消息趋势失败');
}
})
.catch(error => {
console.error('加载消息趋势失败:', error);
this.$message.error('加载消息趋势失败: ' + error.message);
});
},
// 渲染消息趋势图表
renderMessageTrendChart() {
const ctx = document.getElementById('messageTrendChart').getContext('2d');
// 销毁旧图表
if (this.charts && this.charts.messageTrendChart) {
this.charts.messageTrendChart.destroy();
}
// 确保charts对象存在
if (!this.charts) {
this.charts = {};
}
// 创建新图表
this.charts.messageTrendChart = new Chart(ctx, {
type: 'line',
data: {
labels: this.messageTrendData.dates,
datasets: [
{
label: '消息数量',
data: this.messageTrendData.counts,
fill: false,
backgroundColor: 'rgba(75, 192, 192, 0.6)',
borderColor: 'rgba(75, 192, 192, 1)',
tension: 0.1
}
]
},
options: {
responsive: true,
scales: {
y: {
beginAtZero: true
}
}
}
});
}
}
});
</script>
{% endblock %}

View File

@@ -0,0 +1,77 @@
{% 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">
<span>用户活跃度排行</span>
</div>
<el-table {% raw %}:data="userStats"{% endraw %} style="width: 100%" border>
<el-table-column label="用户信息">
<template slot-scope="scope">
{% raw %}{{ scope.row.user_name || scope.row.user_id }} ({{ scope.row.user_id }}){% endraw %}
</template>
</el-table-column>
<el-table-column prop="total_calls" label="调用次数" sortable></el-table-column>
<el-table-column prop="success_calls" label="成功次数" sortable></el-table-column>
<el-table-column prop="failed_calls" label="失败次数" sortable></el-table-column>
<el-table-column label="成功率" sortable>
<template slot-scope="scope">
{% raw %}{{ (scope.row.success_calls / scope.row.total_calls * 100).toFixed(2) }}{% endraw %}%
</template>
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button size="mini" type="primary" {% raw %}@click="viewUserDetail(scope.row)"{% endraw %}>查看详情</el-button>
</template>
</el-table-column>
</el-table>
</el-card>
</el-col>
</el-row>
</div>
{% endblock %}
{% block scripts %}
<script>
new Vue({
el: '#app',
mixins: [baseApp],
data() {
return {
userStats: []
}
},
mounted() {
this.currentView = '3';
this.loadData();
},
methods: {
loadData() {
const days = parseInt(this.timeRange);
this.loadUserStats(days);
},
loadUserStats(days) {
axios.get(`/api/user_stats?days=${days}&limit=20`)
.then(response => {
if (response.data.success) {
this.userStats = response.data.data || [];
}
})
.catch(error => {
console.error('加载用户统计数据出错:', error);
this.$message.error('加载用户统计数据出错');
});
},
viewUserDetail(user) {
this.$message.info('用户详情功能开发中');
}
}
});
</script>
{% endblock %}

View File

@@ -0,0 +1,5 @@
@echo off
cd /d %~dp0
echo 正在启动WeChatRobot管理后台...
python dashboard_start.py
pause

80
admin/dashboard_start.py Normal file
View File

@@ -0,0 +1,80 @@
import os
import sys
import logging
import tomli
import argparse
# 添加项目根目录到系统路径
sys.path.append(os.path.abspath(os.path.dirname(os.path.dirname(__file__))))
from admin.dashboard.server import DashboardServer
def setup_logging():
"""设置日志"""
logging.basicConfig(
level=logging.INFO,
format='%(asctime)s - %(name)s - %(levelname)s - %(message)s',
handlers=[
logging.StreamHandler(),
logging.FileHandler(os.path.join(os.path.dirname(__file__), 'dashboard.log'))
]
)
def load_config():
"""加载TOML配置"""
config_path = os.path.join(os.path.dirname(__file__), 'dashboard', 'config.toml')
if not os.path.exists(config_path):
print(f"配置文件不存在: {config_path}")
return None
try:
with open(config_path, 'rb') as f:
config = tomli.load(f)
return config
except Exception as e:
print(f"加载配置文件失败: {e}")
return None
def main():
"""主函数"""
parser = argparse.ArgumentParser(description='启动WeChatRobot管理后台')
parser.add_argument('--host', type=str, help='服务器主机地址')
parser.add_argument('--port', type=int, help='服务器端口')
parser.add_argument('--username', type=str, help='管理员用户名')
parser.add_argument('--password', type=str, help='管理员密码')
args = parser.parse_args()
# 设置日志
setup_logging()
logger = logging.getLogger("Dashboard")
# 加载配置
config = load_config()
if not config:
logger.error("无法加载配置,使用默认配置")
config = {}
# 命令行参数优先级高于配置文件
host = args.host or config.get('host', '0.0.0.0')
port = args.port or config.get('port', 8888)
username = args.username or config.get('username', 'admin')
password = args.password or config.get('password', 'admin123')
# 检查是否启用
if not config.get('enable', True):
logger.info("管理后台已禁用,退出程序")
return
# 创建并启动服务器
server = DashboardServer(
host=host,
port=port,
username=username,
password=password
)
logger.info(f"启动管理后台服务器,访问地址: http://{host}:{port}")
server.run()
if __name__ == "__main__":
main()

View File

@@ -1,4 +1,4 @@
enable = true
enable = false
host = "0.0.0.0"
port = 8888
username = "admin"