176 lines
7.3 KiB
HTML
176 lines
7.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>系统管理</title>
|
|
<script th:src="@{/css/tailwindcss.css}"></script>
|
|
|
|
<link th:href="@{/v1/css/font-awesome.min.css}" rel="stylesheet">
|
|
|
|
<!-- 配置Tailwind自定义颜色 -->
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
primary: '#3B82F6',
|
|
secondary: '#93C5FD',
|
|
lightBlue: '#EFF6FF',
|
|
menuBg: '#DBEAFE',
|
|
},
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style type="text/tailwindcss">
|
|
@layer utilities {
|
|
.content-auto {
|
|
content-visibility: auto;
|
|
}
|
|
|
|
.menu-active {
|
|
@apply bg-primary text-white;
|
|
}
|
|
|
|
.iframe-container {
|
|
@apply w-full h-full overflow-hidden;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-lightBlue min-h-screen flex flex-col">
|
|
<!-- 主容器 -->
|
|
<div class="flex flex-1 mb-15px overflow-hidden">
|
|
<!-- 左侧菜单 -->
|
|
<aside class="w-64 bg-menuBg border-r border-secondary shadow-md flex-shrink-0 transition-all duration-300 ease-in-out">
|
|
<nav class="py-4">
|
|
<!-- 菜单组1 -->
|
|
<div class="menu-group">
|
|
<div class="menu-parent flex items-center justify-between px-4 py-3 cursor-pointer hover:bg-secondary transition-colors"
|
|
data-target="menu1">
|
|
<div class="flex items-center">
|
|
<i class="fa fa-home w-6"></i>
|
|
<span class="ml-2">首页管理</span>
|
|
</div>
|
|
<i class="fa fa-chevron-down text-xs transition-transform duration-300"></i>
|
|
</div>
|
|
<div id="menu1" class="menu-children hidden pl-10">
|
|
<a th:href="@{/biz/systemUser}" target="contentFrame"
|
|
class="block py-2 px-4 hover:bg-secondary transition-colors">
|
|
<i class="fa fa-bar-chart w-6"></i>统计分析
|
|
</a>
|
|
<a th:href="@{/biz/systemQuick}" target="contentFrame"
|
|
class="block py-2 px-4 hover:bg-secondary transition-colors">
|
|
<i class="fa fa-dashboard w-6"></i>快捷登录
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 菜单组2 -->
|
|
<div class="menu-group">
|
|
<div class="menu-parent flex items-center justify-between px-4 py-3 cursor-pointer hover:bg-secondary transition-colors"
|
|
data-target="menu2">
|
|
<div class="flex items-center">
|
|
<i class="fa fa-user w-6"></i>
|
|
<span class="ml-2">用户管理</span>
|
|
</div>
|
|
<i class="fa fa-chevron-down text-xs transition-transform duration-300"></i>
|
|
</div>
|
|
<div id="menu2" class="menu-children hidden pl-10">
|
|
<a th:href="@{/biz/systemUser}" target="contentFrame"
|
|
class="block py-2 px-4 hover:bg-secondary transition-colors">
|
|
<i class="fa fa-list w-6"></i>用户列表
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 菜单组3 -->
|
|
<div class="menu-group">
|
|
<div class="menu-parent flex items-center justify-between px-4 py-3 cursor-pointer hover:bg-secondary transition-colors"
|
|
data-target="menu3">
|
|
<div class="flex items-center">
|
|
<i class="fa fa-cog w-6"></i>
|
|
<span class="ml-2">系统设置</span>
|
|
</div>
|
|
<i class="fa fa-chevron-down text-xs transition-transform duration-300"></i>
|
|
</div>
|
|
<div id="menu3" class="menu-children hidden pl-10">
|
|
<a th:href="@{/biz/systemSettings}" target="contentFrame"
|
|
class="block py-2 px-4 hover:bg-secondary transition-colors">
|
|
<i class="fa fa-shield w-6"></i>安全设置
|
|
</a>
|
|
<a th:href="@{/biz/systemLogs}" target="contentFrame"
|
|
class="block py-2 px-4 hover:bg-secondary transition-colors">
|
|
<i class="fa fa-file-text w-6"></i>系统日志
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</aside>
|
|
<!-- 右侧内容区域 -->
|
|
<main class="flex-1 overflow-hidden relative">
|
|
<div class="iframe-container">
|
|
<iframe id="contentFrame" name="contentFrame" src="" frameborder="0" class="w-full h-full"></iframe>
|
|
</div>
|
|
<!-- 初始提示信息 -->
|
|
<div id="initialMessage" class="absolute inset-0 flex items-center justify-center bg-white/80 z-10">
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<script>
|
|
// 等待DOM加载完成
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
// 获取所有父菜单
|
|
const parentMenus = document.querySelectorAll('.menu-parent');
|
|
const initialMessage = document.getElementById('initialMessage');
|
|
const contentFrame = document.getElementById('contentFrame');
|
|
|
|
// 为每个父菜单添加点击事件
|
|
parentMenus.forEach(parent => {
|
|
parent.addEventListener('click', function () {
|
|
// 获取目标子菜单ID
|
|
const targetId = this.getAttribute('data-target');
|
|
const targetMenu = document.getElementById(targetId);
|
|
const icon = this.querySelector('.fa-chevron-down');
|
|
|
|
// 关闭所有其他子菜单
|
|
document.querySelectorAll('.menu-children').forEach(menu => {
|
|
if (menu.id !== targetId && !menu.classList.contains('hidden')) {
|
|
menu.classList.add('hidden');
|
|
// 重置其他父菜单的图标
|
|
const otherIcon = menu.previousElementSibling.querySelector('.fa-chevron-down');
|
|
otherIcon.style.transform = 'rotate(0deg)';
|
|
}
|
|
});
|
|
|
|
// 切换当前子菜单的显示状态
|
|
targetMenu.classList.toggle('hidden');
|
|
|
|
// 旋转图标
|
|
if (targetMenu.classList.contains('hidden')) {
|
|
icon.style.transform = 'rotate(0deg)';
|
|
} else {
|
|
icon.style.transform = 'rotate(180deg)';
|
|
}
|
|
});
|
|
});
|
|
|
|
// 为子菜单链接添加点击事件
|
|
const menuLinks = document.querySelectorAll('.menu-children a');
|
|
menuLinks.forEach(link => {
|
|
link.addEventListener('click', function () {
|
|
// 隐藏初始提示信息
|
|
initialMessage.style.display = 'none';
|
|
// 移除所有链接的活动状态
|
|
menuLinks.forEach(l => l.classList.remove('menu-active'));
|
|
// 为当前点击的链接添加活动状态
|
|
this.classList.add('menu-active');
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |