599 lines
20 KiB
HTML
599 lines
20 KiB
HTML
<!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">
|
|
|
|
<!-- 极简风格重置 + 全局美化 -->
|
|
<style>
|
|
/* ------------------------------
|
|
GLOBAL RESET
|
|
------------------------------ */
|
|
:root {
|
|
--tech-bg: #fdfcfb;
|
|
--tech-bg-2: #fefefc;
|
|
--tech-panel: #ffffff;
|
|
--tech-panel-2: #fcfaf8;
|
|
--tech-sub-surface: #faf9f7;
|
|
--tech-border: #e5e0d9;
|
|
--tech-border-2: #e8e3dc;
|
|
--tech-text: #111827;
|
|
--tech-text-strong: #0f172a;
|
|
--tech-text-muted: #6b7280;
|
|
--tech-accent: #f97316;
|
|
--tech-accent-2: #f59e0b;
|
|
--tech-accent-soft: #fffbeb;
|
|
--tech-highlight: #fbbf24;
|
|
--tech-accent-alt: #8b5cf6;
|
|
--tech-glow: #fbbf24;
|
|
--tech-success: #22c55e;
|
|
--tech-warning: #f59e0b;
|
|
--tech-danger: #f87171;
|
|
--tech-shadow: 0 10px 24px rgba(17, 24, 39, 0.08);
|
|
}
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
background: var(--tech-bg);
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
|
|
"PingFang SC", "Hiragino Sans GB", "Microsoft YaHei";
|
|
color: var(--tech-text);
|
|
overflow: hidden; /* 禁止 body 出滚动条 */
|
|
}
|
|
|
|
h1,h2,h3,h4,h5,h6 {
|
|
font-weight: 600;
|
|
margin: 0;
|
|
}
|
|
|
|
/* 动画防闪烁 */
|
|
.app-container {
|
|
opacity: 0;
|
|
transition: opacity .3s ease-in-out;
|
|
}
|
|
.app-container.loaded {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* ------------------------------
|
|
TOP HEADER（极简顶部导航）
|
|
------------------------------ */
|
|
.header {
|
|
height: 58px;
|
|
padding: 0 16px;
|
|
background: var(--tech-panel);
|
|
border-bottom: 1px solid var(--tech-border);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
box-shadow: var(--tech-shadow);
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 100;
|
|
}
|
|
.header::after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 12px;
|
|
right: 12px;
|
|
bottom: 0;
|
|
height: 1px;
|
|
background: rgba(245, 158, 11, 0.35);
|
|
box-shadow: 0 0 8px rgba(245, 158, 11, 0.35);
|
|
}
|
|
|
|
.header-left {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.header-logo {
|
|
width: 36px;
|
|
height: 36px;
|
|
margin-right: 8px;
|
|
filter: drop-shadow(0 0 6px rgba(245, 158, 11, 0.25));
|
|
}
|
|
|
|
.header-right {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.user-info {
|
|
margin-right: 8px;
|
|
font-size: 14px;
|
|
color: var(--tech-text-muted);
|
|
}
|
|
|
|
.logout-btn {
|
|
color: var(--tech-text);
|
|
font-weight: 500;
|
|
transition: 0.2s;
|
|
}
|
|
.logout-btn:hover {
|
|
color: var(--tech-accent);
|
|
}
|
|
.header h2 {
|
|
color: var(--tech-text-strong);
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
/* ------------------------------
|
|
LAYOUT
|
|
------------------------------ */
|
|
.main-container {
|
|
display: flex;
|
|
height: calc(100vh - 58px);
|
|
}
|
|
|
|
/* ------------------------------
|
|
SIDEBAR（极简风侧栏）
|
|
------------------------------ */
|
|
.sidebar {
|
|
width: 190px;
|
|
background: var(--tech-panel-2);
|
|
border-right: 1px solid var(--tech-border);
|
|
box-shadow: var(--tech-shadow);
|
|
}
|
|
|
|
/* Element 菜单自定义美化 */
|
|
.el-menu {
|
|
border-right: none !important;
|
|
background: transparent !important;
|
|
padding: 6px 6px !important;
|
|
}
|
|
|
|
.el-menu-item {
|
|
height: 46px !important;
|
|
line-height: 46px !important;
|
|
margin: 4px 2px !important;
|
|
border-radius: 6px !important;
|
|
color: var(--tech-text-muted) !important;
|
|
transition: background 0.2s ease, box-shadow 0.2s ease, color 0.2s ease !important;
|
|
position: relative;
|
|
}
|
|
.el-menu-item:hover {
|
|
background: var(--tech-accent-soft) !important;
|
|
color: var(--tech-text-strong) !important;
|
|
}
|
|
.el-menu-item.is-active {
|
|
background: var(--tech-accent-soft) !important;
|
|
color: var(--tech-accent) !important;
|
|
font-weight: 600;
|
|
box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.25),
|
|
0 0 10px rgba(245, 158, 11, 0.2);
|
|
}
|
|
.el-menu-item.is-active::before {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
top: 10px;
|
|
bottom: 10px;
|
|
width: 3px;
|
|
background: var(--tech-accent);
|
|
box-shadow: 0 0 8px rgba(245, 158, 11, 0.35);
|
|
border-radius: 2px;
|
|
}
|
|
.el-menu-item i {
|
|
color: var(--tech-text-muted) !important;
|
|
margin-right: 6px;
|
|
}
|
|
.el-menu-item.is-active i,
|
|
.el-menu-item:hover i {
|
|
color: var(--tech-accent) !important;
|
|
}
|
|
|
|
/* ------------------------------
|
|
CONTENT（内容区）
|
|
------------------------------ */
|
|
.content {
|
|
flex: 1;
|
|
padding: 16px;
|
|
overflow-y: auto;
|
|
background: var(--tech-bg);
|
|
position: relative;
|
|
}
|
|
.content::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
background-image:
|
|
linear-gradient(rgba(232, 227, 220, 0.7) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(232, 227, 220, 0.7) 1px, transparent 1px);
|
|
background-size: 28px 28px;
|
|
opacity: 0.35;
|
|
pointer-events: none;
|
|
}
|
|
.content::after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 12px;
|
|
right: 12px;
|
|
top: 0;
|
|
height: 1px;
|
|
background: rgba(245, 158, 11, 0.35);
|
|
box-shadow: 0 0 10px rgba(245, 158, 11, 0.35);
|
|
pointer-events: none;
|
|
}
|
|
.content > * {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* 全局卡片样式统一 */
|
|
.el-card {
|
|
border-radius: 0 !important;
|
|
box-shadow: var(--tech-shadow) !important;
|
|
border: 1px solid var(--tech-border) !important;
|
|
background: var(--tech-panel) !important;
|
|
}
|
|
.el-card__body {
|
|
padding: 12px !important;
|
|
}
|
|
.el-button {
|
|
border-radius: 0 !important;
|
|
}
|
|
.el-input__inner {
|
|
border-radius: 0 !important;
|
|
}
|
|
.el-select .el-input__inner {
|
|
border-radius: 0 !important;
|
|
}
|
|
.el-tag {
|
|
border-radius: 0 !important;
|
|
}
|
|
.el-dialog,
|
|
.el-message-box {
|
|
border-radius: 0 !important;
|
|
}
|
|
.el-form--inline .el-form-item {
|
|
margin-right: 8px !important;
|
|
margin-bottom: 8px !important;
|
|
}
|
|
|
|
/* ------------------------------
|
|
TECH THEME OVERRIDES
|
|
------------------------------ */
|
|
a {
|
|
color: var(--tech-accent-alt);
|
|
}
|
|
a:hover {
|
|
color: #a78bfa;
|
|
}
|
|
|
|
.el-card__header {
|
|
background: var(--tech-panel-2) !important;
|
|
border-bottom: 1px solid var(--tech-border) !important;
|
|
color: var(--tech-text) !important;
|
|
}
|
|
|
|
.el-button--primary {
|
|
background: var(--tech-accent) !important;
|
|
border-color: var(--tech-accent) !important;
|
|
color: #ffffff !important;
|
|
}
|
|
.el-button--primary:hover,
|
|
.el-button--primary:focus {
|
|
background: var(--tech-accent-2) !important;
|
|
border-color: var(--tech-accent-2) !important;
|
|
color: #ffffff !important;
|
|
}
|
|
.el-button--success,
|
|
.el-button--warning,
|
|
.el-button--danger,
|
|
.el-button--info {
|
|
color: #ffffff !important;
|
|
}
|
|
.el-button--success {
|
|
background: var(--tech-success) !important;
|
|
border-color: var(--tech-success) !important;
|
|
}
|
|
.el-button--warning {
|
|
background: var(--tech-warning) !important;
|
|
border-color: var(--tech-warning) !important;
|
|
}
|
|
.el-button--danger {
|
|
background: var(--tech-danger) !important;
|
|
border-color: var(--tech-danger) !important;
|
|
}
|
|
.el-button--info {
|
|
background: #6b7280 !important;
|
|
border-color: #6b7280 !important;
|
|
}
|
|
.el-button--success:hover,
|
|
.el-button--warning:hover,
|
|
.el-button--danger:hover,
|
|
.el-button--info:hover,
|
|
.el-button--success:focus,
|
|
.el-button--warning:focus,
|
|
.el-button--danger:focus,
|
|
.el-button--info:focus {
|
|
color: #ffffff !important;
|
|
}
|
|
.el-button--default {
|
|
background: var(--tech-panel-2) !important;
|
|
border-color: var(--tech-border) !important;
|
|
color: var(--tech-text) !important;
|
|
}
|
|
.el-button--default:hover,
|
|
.el-button--default:focus {
|
|
border-color: var(--tech-accent) !important;
|
|
color: var(--tech-accent) !important;
|
|
}
|
|
.el-button--text {
|
|
color: var(--tech-accent-alt) !important;
|
|
}
|
|
|
|
.el-input__inner,
|
|
.el-textarea__inner {
|
|
background: var(--tech-panel-2) !important;
|
|
border-color: var(--tech-border) !important;
|
|
color: var(--tech-text) !important;
|
|
}
|
|
.el-input__inner::placeholder,
|
|
.el-textarea__inner::placeholder {
|
|
color: var(--tech-text-muted) !important;
|
|
}
|
|
.el-input__inner:focus,
|
|
.el-textarea__inner:focus {
|
|
border-color: var(--tech-accent) !important;
|
|
box-shadow: 0 0 0 2px rgba(167, 139, 250, 0.2) !important;
|
|
}
|
|
|
|
.el-table {
|
|
color: var(--tech-text) !important;
|
|
background: var(--tech-panel) !important;
|
|
}
|
|
.el-table__header-wrapper,
|
|
.el-table__body-wrapper,
|
|
.el-table__footer-wrapper {
|
|
background: var(--tech-panel) !important;
|
|
}
|
|
.el-table tr {
|
|
background: var(--tech-panel) !important;
|
|
}
|
|
.el-table th {
|
|
background: var(--tech-panel-2) !important;
|
|
color: var(--tech-text) !important;
|
|
}
|
|
.el-table td,
|
|
.el-table th.is-leaf {
|
|
border-bottom: 1px solid var(--tech-border) !important;
|
|
}
|
|
.el-table--border,
|
|
.el-table--group {
|
|
border: 1px solid var(--tech-border) !important;
|
|
}
|
|
.el-table--border th,
|
|
.el-table--border td {
|
|
border-right: 1px solid var(--tech-border) !important;
|
|
}
|
|
.el-table__row:hover > td {
|
|
background: var(--tech-accent-soft) !important;
|
|
}
|
|
|
|
.el-pagination .el-pager li.active {
|
|
background: var(--tech-accent) !important;
|
|
color: #ffffff !important;
|
|
}
|
|
.el-pagination .el-pager li:hover {
|
|
color: var(--tech-accent) !important;
|
|
}
|
|
.el-pagination .el-pager li {
|
|
background: var(--tech-panel-2) !important;
|
|
border: 1px solid var(--tech-border) !important;
|
|
color: var(--tech-text) !important;
|
|
}
|
|
.el-pagination button,
|
|
.el-pagination span {
|
|
color: var(--tech-text-muted) !important;
|
|
}
|
|
.el-pagination button {
|
|
background: var(--tech-panel-2) !important;
|
|
border: 1px solid var(--tech-border) !important;
|
|
}
|
|
.el-pagination.is-background .btn-next,
|
|
.el-pagination.is-background .btn-prev,
|
|
.el-pagination.is-background .el-pager li {
|
|
background-color: var(--tech-panel-2) !important;
|
|
color: var(--tech-text-muted) !important;
|
|
}
|
|
.el-pagination.is-background .el-pager li:not(.disabled).active {
|
|
background-color: var(--tech-accent) !important;
|
|
color: #ffffff !important;
|
|
}
|
|
|
|
.el-tabs__item {
|
|
color: var(--tech-text-muted) !important;
|
|
}
|
|
.el-tabs__item.is-active {
|
|
color: var(--tech-accent-alt) !important;
|
|
}
|
|
.el-tabs__item:hover {
|
|
color: var(--tech-accent-alt) !important;
|
|
}
|
|
.el-tabs__active-bar {
|
|
background: var(--tech-accent-alt) !important;
|
|
}
|
|
|
|
.el-tag {
|
|
background: var(--tech-panel-2) !important;
|
|
border-color: var(--tech-border) !important;
|
|
color: var(--tech-text) !important;
|
|
}
|
|
|
|
.el-dialog,
|
|
.el-message-box {
|
|
border: 1px solid var(--tech-border) !important;
|
|
background: var(--tech-panel) !important;
|
|
}
|
|
.el-dialog__header,
|
|
.el-message-box__header {
|
|
background: var(--tech-panel-2) !important;
|
|
border-bottom: 1px solid var(--tech-border) !important;
|
|
}
|
|
.el-dialog__title,
|
|
.el-message-box__title {
|
|
color: var(--tech-text) !important;
|
|
}
|
|
.el-dialog__body,
|
|
.el-message-box__content {
|
|
color: var(--tech-text) !important;
|
|
}
|
|
|
|
/* Keep mask invisible but clickable for close-on-click */
|
|
.v-modal {
|
|
background-color: transparent !important;
|
|
opacity: 0 !important;
|
|
}
|
|
</style>
|
|
|
|
<!-- Element UI CSS -->
|
|
<link rel="stylesheet" href="/static/css/element-ui/theme-chalk/index.min.css">
|
|
{% block styles %}{% endblock %}
|
|
<script src="/static/js/chart.js"></script>
|
|
<script src="/static/js/vue.js"></script>
|
|
<script src="/static/js/element-ui/index.min.js"></script>
|
|
<script src="/static/js/axios.min.js"></script>
|
|
|
|
{% block head %}{% endblock %}
|
|
</head>
|
|
|
|
<body>
|
|
<div id="app" class="app-container">
|
|
|
|
<!-- HEADER -->
|
|
<header class="header">
|
|
<div class="header-left">
|
|
<img src="/static/logo.png" class="header-logo">
|
|
<h2 style="font-size:18px;">机器人管理后台</h2>
|
|
</div>
|
|
|
|
<div class="header-right">
|
|
<span class="user-info">管理员</span>
|
|
<el-button type="text" class="logout-btn" @click="logout">
|
|
<i class="el-icon-switch-button"></i> 退出
|
|
</el-button>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- MAIN AREA -->
|
|
<div class="main-container">
|
|
|
|
<!-- SIDEBAR -->
|
|
<div class="sidebar">
|
|
<el-menu
|
|
:default-active="currentView"
|
|
background-color="#fcfaf8"
|
|
text-color="#6b7280"
|
|
active-text-color="#f97316"
|
|
@select="handleSelect">
|
|
|
|
<el-menu-item index="1"><i class="el-icon-s-home"></i> 首页概览</el-menu-item>
|
|
<el-menu-item index="2"><i class="el-icon-s-grid"></i> 插件统计</el-menu-item>
|
|
<el-menu-item index="3"><i class="el-icon-user"></i> 用户统计</el-menu-item>
|
|
<el-menu-item index="4"><i class="el-icon-s-cooperation"></i> 群组统计</el-menu-item>
|
|
<el-menu-item index="6"><i class="el-icon-setting"></i> 权限管理</el-menu-item>
|
|
<el-menu-item index="7"><i class="el-icon-chat-line-square"></i> 消息列表</el-menu-item>
|
|
<el-menu-item index="10"><i class="el-icon-notebook-1"></i> 通讯录</el-menu-item>
|
|
<el-menu-item index="11"><i class="el-icon-s-tools"></i> 插件管理</el-menu-item>
|
|
<el-menu-item index="12"><i class="el-icon-connection"></i> 虚拟群组</el-menu-item>
|
|
<el-menu-item index="16"><i class="el-icon-time"></i> 定时推送</el-menu-item>
|
|
<el-menu-item index="13"><i class="el-icon-document"></i> 接口文档</el-menu-item>
|
|
<el-menu-item index="14"><i class="el-icon-cpu"></i> 资源监控</el-menu-item>
|
|
<el-menu-item index="15"><i class="el-icon-folder"></i> 文件浏览</el-menu-item>
|
|
<el-menu-item index="9"><i class="el-icon-document"></i> 运行日志</el-menu-item>
|
|
<el-menu-item index="5"><i class="el-icon-warning"></i> 错误日志</el-menu-item>
|
|
|
|
</el-menu>
|
|
</div>
|
|
|
|
<!-- CONTENT -->
|
|
<div class="content">
|
|
|
|
<!-- 时间范围选择器 -->
|
|
<el-row v-if="showTimeRangeSelector" :gutter="12" style="margin-bottom:16px;">
|
|
<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 %}
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const baseApp = {
|
|
data() {
|
|
return {
|
|
currentView: '1',
|
|
timeRange: '7',
|
|
showTimeRangeSelector: false
|
|
}
|
|
},
|
|
created() {
|
|
const path = window.location.pathname;
|
|
this.showTimeRangeSelector = ['/', '/plugins', '/users', '/groups','/robot','/errors'].includes(path);
|
|
},
|
|
mounted() {
|
|
document.querySelector('.app-container').classList.add('loaded');
|
|
},
|
|
methods: {
|
|
handleSelect(key) {
|
|
const routes = {
|
|
'1': '/',
|
|
'2': '/plugins',
|
|
'3': '/users',
|
|
'4': '/groups',
|
|
'5': '/errors',
|
|
'6': '/robot',
|
|
'7': '/messages',
|
|
'9': '/wx_logs',
|
|
'10': '/contacts',
|
|
'11': '/plugins_manage',
|
|
'12': '/virtual_group',
|
|
'13': '/api_docs',
|
|
'14': '/system_status',
|
|
'15': '/file_browser',
|
|
'16': '/message_push'
|
|
};
|
|
if (routes[key] && window.location.pathname !== routes[key]) {
|
|
window.location.href = routes[key];
|
|
}
|
|
},
|
|
logout() {
|
|
this.$confirm('确认退出登录吗？', '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
}).then(() => {
|
|
window.location.href = '/logout';
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
{% block scripts %}{% endblock %}
|
|
</body>
|
|
</html>
|