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

解决刷新时样式失效问题。

Browse Source
This commit is contained in:
liuwei
2025-06-09 18:06:08 +08:00
parent 2c5ae818ce
commit 674b148bf1
1 changed files with 38 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -7,18 +7,18 @@
<!-- 添加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="/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>
<!-- 添加初始样式，防止闪烁 -->
<style>
/* 初始加载时的样式 */
.app-container {
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
.app-container.loaded {
opacity: 1;
}
/* 其他基础样式 */
body {
margin: 0;
padding: 0;
@@ -63,8 +63,8 @@
padding: 20px;
overflow-y: auto;
background-color: #f0f2f5;
display: flex; /* 添加Flex布局 */
flex-direction: column; /* 确保子元素垂直排列 */
display: flex;
flex-direction: column;
}
.el-menu {
border-right: none;
@@ -79,7 +79,6 @@
.stats-card {
margin-bottom: 20px;
}
/* 添加退出登录按钮样式 */
.logout-btn {
color: white;
cursor: pointer;
@@ -93,6 +92,18 @@
margin-right: 10px;
}
</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>
@@ -228,20 +239,21 @@
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',
@@ -259,26 +271,29 @@
'15': '/file_browser'
};
// 如果当前不在对应页面，则跳转
const currentPath = window.location.pathname;
const targetPath = routes[key];
if (currentPath !== targetPath && targetPath !== undefined) {
window.location.href = targetPath;
// 添加页面切换时的过渡效果
document.querySelector('.app-container').classList.remove('loaded');
setTimeout(() => {
window.location.href = targetPath;
}, 300);
}
},
loadData() {
// 由子组件实现
},
// 添加退出登录方法
logout() {
// 显示确认对话框
this.$confirm('确认退出登录吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
// 用户点击确定，跳转到登出页面
window.location.href = '/logout';
document.querySelector('.app-container').classList.remove('loaded');
setTimeout(() => {
window.location.href = '/logout';
}, 300);
}).catch(() => {
// 用户点击取消，不做任何操作
});