354 lines
12 KiB
HTML
354 lines
12 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
|
||
------------------------------ */
|
||
body {
|
||
margin: 0;
|
||
padding: 0;
|
||
background: #f2f6fb;
|
||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
|
||
"PingFang SC", "Hiragino Sans GB", "Microsoft YaHei";
|
||
color: #22324a;
|
||
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: #0b1d33;
|
||
border-bottom: 1px solid #0f2a4a;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
box-shadow: 0 2px 10px rgba(0, 163, 255, 0.12);
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 100;
|
||
}
|
||
.header::after {
|
||
content: "";
|
||
position: absolute;
|
||
left: 12px;
|
||
right: 12px;
|
||
bottom: 0;
|
||
height: 1px;
|
||
background: rgba(91, 211, 255, 0.35);
|
||
box-shadow: 0 0 8px rgba(91, 211, 255, 0.4);
|
||
}
|
||
|
||
.header-left {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.header-logo {
|
||
width: 36px;
|
||
height: 36px;
|
||
margin-right: 8px;
|
||
filter: drop-shadow(0 0 6px rgba(91, 211, 255, 0.35));
|
||
}
|
||
|
||
.header-right {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.user-info {
|
||
margin-right: 8px;
|
||
font-size: 14px;
|
||
color: #cfe6ff;
|
||
}
|
||
|
||
.logout-btn {
|
||
color: #9fd7ff;
|
||
font-weight: 500;
|
||
transition: 0.2s;
|
||
}
|
||
.logout-btn:hover {
|
||
color: #5bd3ff;
|
||
}
|
||
.header h2 {
|
||
color: #e6f3ff;
|
||
letter-spacing: 0.5px;
|
||
}
|
||
|
||
/* ------------------------------
|
||
LAYOUT
|
||
------------------------------ */
|
||
.main-container {
|
||
display: flex;
|
||
height: calc(100vh - 58px);
|
||
}
|
||
|
||
/* ------------------------------
|
||
SIDEBAR（极简风侧栏）
|
||
------------------------------ */
|
||
.sidebar {
|
||
width: 190px;
|
||
background: #0b1d33;
|
||
border-right: 1px solid #0f2a4a;
|
||
box-shadow: 4px 0 14px rgba(0, 163, 255, 0.12);
|
||
}
|
||
|
||
/* 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: #cfe6ff !important;
|
||
transition: background 0.2s ease, box-shadow 0.2s ease, color 0.2s ease !important;
|
||
position: relative;
|
||
}
|
||
.el-menu-item:hover {
|
||
background: rgba(60, 203, 255, 0.12) !important;
|
||
color: #e9f6ff !important;
|
||
}
|
||
.el-menu-item.is-active {
|
||
background: rgba(60, 203, 255, 0.18) !important;
|
||
color: #5bd3ff !important;
|
||
font-weight: 600;
|
||
box-shadow: inset 0 0 0 1px rgba(91, 211, 255, 0.35),
|
||
0 0 10px rgba(91, 211, 255, 0.25);
|
||
}
|
||
.el-menu-item.is-active::before {
|
||
content: "";
|
||
position: absolute;
|
||
left: 0;
|
||
top: 10px;
|
||
bottom: 10px;
|
||
width: 3px;
|
||
background: #5bd3ff;
|
||
box-shadow: 0 0 10px rgba(91, 211, 255, 0.6);
|
||
border-radius: 2px;
|
||
}
|
||
.el-menu-item i {
|
||
color: #8db7e6 !important;
|
||
margin-right: 6px;
|
||
}
|
||
.el-menu-item.is-active i,
|
||
.el-menu-item:hover i {
|
||
color: #5bd3ff !important;
|
||
}
|
||
|
||
/* ------------------------------
|
||
CONTENT（内容区）
|
||
------------------------------ */
|
||
.content {
|
||
flex: 1;
|
||
padding: 16px;
|
||
overflow-y: auto;
|
||
background: #f2f6fb;
|
||
}
|
||
|
||
/* 全局卡片样式统一 */
|
||
.el-card {
|
||
border-radius: 0 !important;
|
||
box-shadow: 0 6px 18px rgba(11, 29, 51, 0.06) !important;
|
||
border: 1px solid #d6e6ff !important;
|
||
background: #ffffff !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;
|
||
}
|
||
</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="#0b1d33"
|
||
text-color="#cfe6ff"
|
||
active-text-color="#5bd3ff"
|
||
@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>
|