admin/aitsc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

后台管理页面导航栏修改为侧边

Browse Source
This commit is contained in:
rjb
2025-09-07 22:33:16 +08:00
parent 177079221e
commit 78aab17511
14 changed files with 2969 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

187
src/flask_prompt_master/templates/admin/master.html
View File

@@ -23,6 +23,7 @@
--dark-color: #5a5c69;
--light-color: #f8f9fc;
--sidebar-width: 250px;
--sidebar-collapsed-width: 70px;
--header-height: 70px;
}
@@ -46,6 +47,29 @@
box-shadow: 4px 0 10px rgba(0,0,0,0.1);
z-index: 1000;
transition: all 0.3s ease;
overflow-y: auto;
overflow-x: hidden;
}
.sidebar.collapsed {
width: var(--sidebar-collapsed-width);
}
.sidebar.collapsed .sidebar-brand-text {
display: none;
}
.sidebar.collapsed .sidebar-link-text {
display: none;
}
.sidebar.collapsed .sidebar-link {
justify-content: center;
padding: 0.75rem 0.5rem;
}
.sidebar.collapsed .sidebar-icon {
margin-right: 0;
}
.sidebar-header {
@@ -111,6 +135,10 @@
transition: all 0.3s ease;
}
.main-content.sidebar-collapsed {
margin-left: var(--sidebar-collapsed-width);
}
/* 顶部导航栏 */
.top-navbar {
background: white;
@@ -124,6 +152,67 @@
z-index: 999;
}
.navbar-left {
display: flex;
align-items: center;
gap: 1rem;
}
.sidebar-toggle {
background: none;
border: none;
font-size: 1.2rem;
color: var(--dark-color);
cursor: pointer;
padding: 0.5rem;
border-radius: 0.5rem;
transition: all 0.3s ease;
}
.sidebar-toggle:hover {
background: var(--light-color);
color: var(--primary-color);
}
/* 响应式设计 */
@media (max-width: 768px) {
.sidebar {
transform: translateX(-100%);
}
.sidebar.mobile-open {
transform: translateX(0);
}
.main-content {
margin-left: 0;
}
.top-navbar {
padding: 1rem;
}
.page-title {
font-size: 1.2rem;
}
}
@media (max-width: 576px) {
.top-navbar {
padding: 0.75rem;
}
.user-menu {
flex-direction: column;
align-items: flex-end;
gap: 0.5rem;
}
.user-info {
text-align: right;
}
}
.page-title {
font-size: 1.5rem;
font-weight: 600;
@@ -395,6 +484,69 @@
</style>
{% block head %}{% endblock %}
<!-- JavaScript -->
<script>
document.addEventListener('DOMContentLoaded', function() {
const sidebar = document.querySelector('.sidebar');
const mainContent = document.querySelector('.main-content');
const sidebarToggle = document.getElementById('sidebarToggle');
const isMobile = window.innerWidth <= 768;
// 初始化侧边栏状态
let sidebarCollapsed = localStorage.getItem('sidebarCollapsed') === 'true';
if (sidebarCollapsed && !isMobile) {
sidebar.classList.add('collapsed');
mainContent.classList.add('sidebar-collapsed');
}
// 切换侧边栏
function toggleSidebar() {
if (isMobile) {
// 移动端：显示/隐藏侧边栏
sidebar.classList.toggle('mobile-open');
} else {
// 桌面端：折叠/展开侧边栏
sidebar.classList.toggle('collapsed');
mainContent.classList.toggle('sidebar-collapsed');
sidebarCollapsed = sidebar.classList.contains('collapsed');
localStorage.setItem('sidebarCollapsed', sidebarCollapsed);
}
}
// 绑定点击事件
sidebarToggle.addEventListener('click', toggleSidebar);
// 移动端点击遮罩关闭侧边栏
if (isMobile) {
mainContent.addEventListener('click', function() {
if (sidebar.classList.contains('mobile-open')) {
sidebar.classList.remove('mobile-open');
}
});
}
// 响应式处理
window.addEventListener('resize', function() {
const newIsMobile = window.innerWidth <= 768;
if (newIsMobile !== isMobile) {
// 屏幕尺寸改变时重新加载页面
window.location.reload();
}
});
// 侧边栏链接点击后自动关闭移动端侧边栏
if (isMobile) {
const sidebarLinks = document.querySelectorAll('.sidebar-link');
sidebarLinks.forEach(link => {
link.addEventListener('click', function() {
sidebar.classList.remove('mobile-open');
});
});
}
});
</script>
</head>
<body>
<!-- 侧边栏 -->
@@ -402,7 +554,7 @@
<div class="sidebar-header">
<a href="{{ url_for('admin.index') }}" class="sidebar-brand">
<i class="fas fa-magic me-2"></i>
提示词大师
<span class="sidebar-brand-text">提示词大师</span>
</a>
</div>
@@ -410,77 +562,77 @@
<div class="sidebar-item">
<a href="{{ url_for('admin.index') }}" class="sidebar-link {% if request.endpoint == 'admin.index' %}active{% endif %}">
<i class="fas fa-tachometer-alt sidebar-icon"></i>
仪表板
<span class="sidebar-link-text">仪表板</span>
</a>
</div>
<div class="sidebar-item">
<a href="{{ url_for('admin_user.index_view') }}" class="sidebar-link {% if 'admin_user' in request.endpoint %}active{% endif %}">
<i class="fas fa-users sidebar-icon"></i>
用户管理
<span class="sidebar-link-text">用户管理</span>
</a>
</div>
<div class="sidebar-item">
<a href="{{ url_for('admin_prompt.index_view') }}" class="sidebar-link {% if 'admin_prompt' in request.endpoint %}active{% endif %}">
<i class="fas fa-magic sidebar-icon"></i>
提示词管理
<span class="sidebar-link-text">提示词管理</span>
</a>
</div>
<div class="sidebar-item">
<a href="{{ url_for('admin_template.index_view') }}" class="sidebar-link {% if 'admin_template' in request.endpoint %}active{% endif %}">
<i class="fas fa-clipboard-list sidebar-icon"></i>
模板管理
<span class="sidebar-link-text">模板管理</span>
</a>
</div>
<div class="sidebar-item">
<a href="{{ url_for('analytics_admin.index') }}" class="sidebar-link {% if 'analytics_admin' in request.endpoint %}active{% endif %}">
<i class="fas fa-chart-line sidebar-icon"></i>
数据分析
<span class="sidebar-link-text">数据分析</span>
</a>
</div>
<div class="sidebar-item">
<a href="{{ url_for('batch_admin.index') }}" class="sidebar-link {% if 'batch_admin' in request.endpoint %}active{% endif %}">
<i class="fas fa-tasks sidebar-icon"></i>
批量操作
<span class="sidebar-link-text">批量操作</span>
</a>
</div>
<div class="sidebar-item">
<a href="{{ url_for('monitor_admin.index') }}" class="sidebar-link {% if 'monitor_admin' in request.endpoint %}active{% endif %}">
<i class="fas fa-tachometer-alt sidebar-icon"></i>
系统监控
<span class="sidebar-link-text">系统监控</span>
</a>
</div>
<div class="sidebar-item">
<a href="{{ url_for('report_admin.index') }}" class="sidebar-link {% if 'report_admin' in request.endpoint %}active{% endif %}">
<i class="fas fa-chart-bar sidebar-icon"></i>
高级报表
<span class="sidebar-link-text">高级报表</span>
</a>
</div>
<div class="sidebar-item">
<a href="{{ url_for('backup_admin.index') }}" class="sidebar-link {% if 'backup_admin' in request.endpoint %}active{% endif %}">
<i class="fas fa-database sidebar-icon"></i>
数据备份
<span class="sidebar-link-text">数据备份</span>
</a>
</div>
<div class="sidebar-item">
<a href="{{ url_for('api_admin.index') }}" class="sidebar-link {% if 'api_admin' in request.endpoint %}active{% endif %}">
<i class="fas fa-code sidebar-icon"></i>
API管理
<span class="sidebar-link-text">API管理</span>
</a>
</div>
<div class="sidebar-item">
<a href="{{ url_for('admin_system.index') }}" class="sidebar-link {% if 'admin_system' in request.endpoint %}active{% endif %}">
<i class="fas fa-cogs sidebar-icon"></i>
系统管理
<span class="sidebar-link-text">系统管理</span>
</a>
</div>
</div>
@@ -490,9 +642,14 @@
<div class="main-content">
<!-- 顶部导航栏 -->
<header class="top-navbar">
<h1 class="page-title">
{% block page_title %}{% endblock %}
</h1>
<div class="navbar-left">
<button class="sidebar-toggle" id="sidebarToggle">
<i class="fas fa-bars"></i>
</button>
<h1 class="page-title">
{% block page_title %}{% endblock %}
</h1>
</div>
<div class="user-menu">
<div class="user-info">