liuwei_x_x/abot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

美化UI1.0

Browse Source
This commit is contained in:
liuwei
2025-11-25 16:51:56 +08:00
parent 64ed4e2127
commit d55548f5a2
1 changed files with 197 additions and 218 deletions
Download Patch File Download Diff File Expand all files Collapse all files

415
admin/dashboard/templates/base.html
View File

@@ -4,218 +4,210 @@
<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">
<!-- 添加初始样式，防止闪烁 -->
<!-- favicon -->
<link rel="icon" href="/static/favicon.ico">
<!-- 极简风格重置 + 全局美化 -->
<style>
/* 初始加载时的样式 */
/* ------------------------------
GLOBAL RESET
------------------------------ */
body {
margin: 0;
padding: 0;
background: #f7f7f8;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"PingFang SC", "Hiragino Sans GB", "Microsoft YaHei";
color: #333;
}
h1,h2,h3,h4,h5,h6 {
font-weight: 600;
margin: 0;
}
/* 动画防闪烁 */
.app-container {
opacity: 0;
transition: opacity 0.3s ease-in-out;
transition: opacity .3s ease-in-out;
}
.app-container.loaded {
opacity: 1;
}
/* 其他基础样式 */
body {
margin: 0;
padding: 0;
font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
}
.app-container {
height: 100vh;
display: flex;
flex-direction: column;
}
/* ------------------------------
TOP HEADER（极简顶部导航）
------------------------------ */
.header {
background-color: #006af5;
color: white;
padding: 0 20px;
height: 60px;
height: 58px;
padding: 0 24px;
background: #ffffff;
border-bottom: 1px solid #e5e6eb;
display: flex;
align-items: center;
justify-content: space-between;
box-shadow: 0 2px 6px rgba(0,0,0,0.04);
position: sticky;
top: 0;
z-index: 100;
}
.header-left {
display: flex;
align-items: center;
}
.header-logo {
width: 40px;
height: 40px;
margin-right: 10px;
}
.main-container {
display: flex;
flex: 1;
overflow: hidden;
}
.sidebar {
width: 180px;
background-color: #545c64;
height: 100%;
overflow-y: auto;
}
.content {
flex: 1;
padding: 20px;
overflow-y: auto;
background-color: #f0f2f5;
display: flex;
flex-direction: column;
}
.el-menu {
border-right: none;
}
.chart-container {
background-color: white;
padding: 20px;
border-radius: 4px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
}
.stats-card {
margin-bottom: 20px;
}
.logout-btn {
color: white;
cursor: pointer;
margin-left: 15px;
width: 36px;
height: 36px;
margin-right: 12px;
}
.header-right {
display: flex;
align-items: center;
}
.user-info {
margin-right: 10px;
margin-right: 12px;
font-size: 14px;
color: #444;
}
.logout-btn {
color: #444;
font-weight: 500;
transition: 0.2s;
}
.logout-btn:hover {
color: #000;
}
/* ------------------------------
LAYOUT
------------------------------ */
.main-container {
display: flex;
height: calc(100vh - 58px);
}
/* ------------------------------
SIDEBAR（极简风侧栏）
------------------------------ */
.sidebar {
width: 190px;
background: #fafafa;
border-right: 1px solid #e5e6eb;
box-shadow: 2px 0 4px rgba(0,0,0,0.03);
}
/* Element 菜单自定义美化 */
.el-menu {
border-right: none !important;
}
.el-menu-item {
height: 46px !important;
line-height: 46px !important;
margin: 4px 8px !important;
border-radius: 8px !important;
transition: 0.2s !important;
}
.el-menu-item:hover {
background: #e5e6eb55 !important;
}
.el-menu-item.is-active {
background: #e3e6ff !important;
color: #2f54eb !important;
font-weight: 600;
}
/* ------------------------------
CONTENT（内容区）
------------------------------ */
.content {
flex: 1;
padding: 24px;
overflow-y: auto;
}
/* 全局卡片样式统一 */
.el-card {
border-radius: 12px !important;
box-shadow: 0 4px 12px rgba(0,0,0,0.04) !important;
border: 1px solid #e5e6eb !important;
}
</style>
<!-- Element UI CSS -->
<link rel="stylesheet" href="/static/css/element-ui/theme-chalk/index.min.css">
<!-- 图表库 -->
<script src="/static/js/chart.js"></script>
<!-- Vue.js -->
<script src="/static/js/vue.js"></script>
<!-- Element UI JS -->
<script src="/static/js/element-ui/index.min.js"></script>
<!-- Axios -->
<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" alt="Logo" class="header-logo">
<h2>机器人管理后台</h2>
<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> 退出登录
<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"
class="el-menu-vertical-demo"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b"
background-color="#fafafa"
text-color="#555"
active-text-color="#2f54eb"
@select="handleSelect">
<el-menu-item index="1">
<i class="el-icon-s-home"></i>
<span slot="title">首页概览</span>
</el-menu-item>
<el-menu-item index="2">
<i class="el-icon-s-grid"></i>
<span slot="title">插件统计</span>
</el-menu-item>
<el-menu-item index="3">
<i class="el-icon-user"></i>
<span slot="title">用户统计</span>
</el-menu-item>
<el-menu-item index="4">
<i class="el-icon-s-cooperation"></i>
<span slot="title">群组统计</span>
</el-menu-item>
<!-- 在左侧菜单中添加群机器人管理选项 -->
<!-- 找到el-menu标签内的菜单项列表，添加以下内容 -->
<el-menu-item index="6">
<i class="el-icon-setting"></i>
<span slot="title">权限管理</span>
</el-menu-item>
<!-- 在左侧菜单中添加消息列表选项 -->
<el-menu-item index="7">
<i class="el-icon-chat-line-square"></i>
<span slot="title">消息列表</span>
</el-menu-item>
<!-- 在导航菜单中添加通讯录管理入口 -->
<el-menu-item index="10">
<i class="el-icon-notebook-1"></i>
<span slot="title">通讯录</span>
</el-menu-item>
<!-- 在导航菜单中添加插件管理选项 -->
<el-menu-item index="11">
<i class="el-icon-s-tools"></i>
<span slot="title">插件管理</span>
</el-menu-item>
<!-- 在导航菜单中添加虚拟群组管理 -->
<el-menu-item index="12">
<i class="el-icon-connection"></i>
<span slot="title">虚拟群组</span>
</el-menu-item>
<!-- 添加定时推送菜单项 -->
<el-menu-item index="16">
<i class="el-icon-time"></i>
<span slot="title">定时推送</span>
</el-menu-item>
<!-- 添加接口文档菜单项 -->
<el-menu-item index="13">
<i class="el-icon-document"></i>
<span slot="title">接口文档</span>
</el-menu-item>
<el-menu-item index="14">
<i class="el-icon-cpu"></i>
<span slot="title">资源监控</span>
</el-menu-item>
<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-item index="15">
<i class="el-icon-folder"></i>
<span slot="title">文件浏览</span>
</el-menu-item>
<!-- 运行日志 -->
<el-menu-item index="9">
<i class="el-icon-document"></i>
<span slot="title">运行日志</span>
</el-menu-item>
<el-menu-item index="5">
<i class="el-icon-warning"></i>
<span slot="title">错误日志</span>
</el-menu-item>
</el-menu>
</div>
<!-- 右侧内容区 -->
<!-- CONTENT -->
<div class="content">
<!-- 时间范围选择器 - 只在特定页面显示 -->
<el-row :gutter="20" style="margin-bottom: 20px;" v-if="showTimeRangeSelector">
<!-- 时间范围选择器 -->
<el-row v-if="showTimeRangeSelector" :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-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>
@@ -223,84 +215,71 @@
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="loadData">刷新数据</el-button>
<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>
<!-- 基础 Vue 实例 -->
<script>
const baseApp = {
data() {
return {
currentView: '1',
timeRange: '7',
charts: {},
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, keyPath) {
this.currentView = 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' // 添加定时推送路由
};
const currentPath = window.location.pathname;
const targetPath = routes[key];
if (currentPath !== targetPath && targetPath !== undefined) {
window.location.href = targetPath;
}
},
loadData() {
// 由子组件实现
},
logout() {
this.$confirm('确认退出登录吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
window.location.href = '/logout';
}).catch(() => {
// 用户点击取消，不做任何操作
});
}
<script>
const baseApp = {
data() {
return {
currentView: '1',
timeRange: '7',
showTimeRangeSelector: false
}
};
</script>
},
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 %}
{% block scripts %}{% endblock %}
</body>
</html>
</html>