315 lines
11 KiB
HTML
315 lines
11 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>后台管理系统</title>
|
|
<script src ="public/login/js/tailwindcss.js"></script>
|
|
<!-- 配置Tailwind自定义主题 -->
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
primary: '#165DFF',
|
|
secondary: '#0E2E8A',
|
|
accent: '#36CFC9',
|
|
neutral: '#F5F7FA',
|
|
'neutral-dark': '#1D2129',
|
|
},
|
|
fontFamily: {
|
|
inter: ['Inter', 'system-ui', 'sans-serif'],
|
|
},
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<!-- 自定义工具类 -->
|
|
<style type="text/tailwindcss">
|
|
@layer utilities {
|
|
.content-auto {
|
|
content-visibility: auto;
|
|
}
|
|
.sidebar-shadow {
|
|
box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
|
|
}
|
|
.card-hover {
|
|
transition: all 0.3s ease;
|
|
}
|
|
.card-hover:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 10px 20px rgba(22, 93, 255, 0.1);
|
|
}
|
|
.iframe-loading {
|
|
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
|
|
background-size: 200% 100%;
|
|
animation: loading 1.5s infinite;
|
|
}
|
|
@keyframes loading {
|
|
0% { background-position: 200% 0; }
|
|
100% { background-position: -200% 0; }
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<!-- 图标备选方案 - 如果Font Awesome加载失败 -->
|
|
<style>
|
|
.icon {
|
|
display: inline-block;
|
|
width: 1em;
|
|
height: 1em;
|
|
stroke-width: 0;
|
|
stroke: currentColor;
|
|
fill: currentColor;
|
|
text-align: center;
|
|
}
|
|
|
|
/* 基础图标样式 */
|
|
.icon-menu::before { content: "≡"; }
|
|
.icon-cogs::before { content: "⚙"; }
|
|
.icon-bell::before { content: "🔔"; }
|
|
.icon-angle-down::before { content: "▼"; }
|
|
.icon-dashboard::before { content: "📊"; }
|
|
.icon-users::before { content: "👥"; }
|
|
.icon-refresh::before { content: "♻"; }
|
|
</style>
|
|
</head>
|
|
<body class="font-inter bg-neutral text-neutral-dark min-h-screen flex flex-col overflow-hidden" style="height: 100%;width: 100%;">
|
|
<!-- 顶部导航栏 -->
|
|
<header class="bg-white shadow-sm fixed top-0 left-0 right-0 z-20 transition-all duration-300" id="header">
|
|
<div class="flex items-center justify-between h-16 px-4 sm:px-6 lg:px-8">
|
|
<!-- 左侧Logo和菜单切换 -->
|
|
<div class="flex items-center">
|
|
<button id="menu-toggle" class="lg:hidden mr-3 text-gray-500 hover:text-primary focus:outline-none">
|
|
<i class="fa fa-bars text-xl icon-menu"></i>
|
|
</button>
|
|
<div class="flex items-center">
|
|
<div class="h-8 w-8 rounded-md bg-primary flex items-center justify-center text-white">
|
|
<i class="fa fa-cogs icon-cogs"></i>
|
|
</div>
|
|
<span class="ml-2 text-lg font-semibold hidden sm:block">后台管理系统</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 右侧用户信息 -->
|
|
<div class="flex items-center space-x-4">
|
|
<!-- <button class="text-gray-500 hover:text-primary relative">
|
|
<i class="fa fa-bell-o text-xl icon-bell"></i>
|
|
<span class="absolute top-0 right-0 h-4 w-4 bg-red-500 rounded-full text-white text-xs flex items-center justify-center">3</span>
|
|
</button> -->
|
|
<div class="flex items-center cursor-pointer hover:text-primary">
|
|
<img src="https://picsum.photos/id/1005/40/40" alt="用户头像" class="h-8 w-8 rounded-full object-cover border-2 border-primary/20">
|
|
<span class="ml-2 hidden md:block">管理员</span>
|
|
<!-- <i class="fa fa-angle-down ml-1 text-xs icon-angle-down"></i> -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- 侧边栏 - 只保留仪表盘和用户管理 -->
|
|
<aside id="sidebar" class="fixed left-0 top-16 bottom-0 w-64 bg-white sidebar-shadow transform -translate-x-full lg:translate-x-0 transition-transform duration-300 z-10 overflow-y-auto">
|
|
<nav class="py-4">
|
|
<!-- <div class="px-4 mb-4">
|
|
<div class="text-xs text-gray-400 uppercase font-semibold">主导航</div>
|
|
</div>
|
|
-->
|
|
<!-- 仪表盘 -->
|
|
<a href="#" id="dashboard-link" class="flex items-center px-4 py-3 text-primary bg-primary/5 border-l-4 border-primary">
|
|
<i class="fa fa-dashboard w-6 icon-dashboard"></i>
|
|
<span class="ml-2">系统管理</span>
|
|
</a>
|
|
|
|
<!-- 用户管理 -->
|
|
<a href="#" id="users-link" class="flex items-center px-4 py-3 text-gray-600 hover:bg-gray-50 hover:text-primary">
|
|
<i class="fa fa-users w-6 text-gray-500 icon-users"></i>
|
|
<span class="ml-2">用户管理</span>
|
|
</a>
|
|
</nav>
|
|
</aside>
|
|
|
|
<!-- 主内容区域 - 使用IFrame展示页面 -->
|
|
<main class="flex-1 pt-16 lg:pl-64 transition-all duration-300 h-[calc(100vh-4rem)] overflow-hidden" >
|
|
<!-- 加载遮罩 -->
|
|
<div id="loading-overlay" class="absolute inset-0 bg-white/80 flex items-center justify-center z-30 hidden">
|
|
<div class="text-center">
|
|
<div class="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-primary mb-4"></div>
|
|
<p class="text-gray-600">加载中...</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- IFrame容器 -->
|
|
<div class="w-full h-full relative" style="height: 1920px;width: 100%;">
|
|
<iframe
|
|
id="content-iframe"
|
|
src="about:blank"
|
|
class="w-full h-full border-0"
|
|
frameborder="0"
|
|
allowfullscreen
|
|
scrolling="auto"
|
|
style="height: 100%;width: 100%;"
|
|
></iframe>
|
|
|
|
<!-- 默认内容提示 -->
|
|
<div id="default-content" class="absolute inset-0 flex items-center justify-center bg-neutral">
|
|
<div class="text-center">
|
|
<i class="fa fa-dashboard text-5xl text-gray-300 mb-4 icon-dashboard"></i>
|
|
<h3 class="text-xl font-semibold text-gray-500 mb-2">欢迎使用管理系统</h3>
|
|
<p class="text-gray-400">请从左侧菜单选择要查看的页面</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- 遮罩层 -->
|
|
<div id="overlay" class="fixed inset-0 bg-black bg-opacity-50 z-10 hidden lg:hidden"></div>
|
|
|
|
<!-- JavaScript -->
|
|
<script>
|
|
// 页面URL配置
|
|
const PAGE_URLS = {
|
|
index: 'public/html/index.html', // 仪表盘页面URL
|
|
user: 'public/html/user.html' // 用户管理页面URL
|
|
};
|
|
|
|
// 菜单切换
|
|
const menuToggle = document.getElementById('menu-toggle');
|
|
const sidebar = document.getElementById('sidebar');
|
|
const overlay = document.getElementById('overlay');
|
|
const loadingOverlay = document.getElementById('loading-overlay');
|
|
const defaultContent = document.getElementById('default-content');
|
|
const contentIframe = document.getElementById('content-iframe');
|
|
|
|
// 导航链接
|
|
const dashboardLink = document.getElementById('dashboard-link');
|
|
const usersLink = document.getElementById('users-link');
|
|
|
|
// 初始化默认页面
|
|
let currentPage = 'index1';
|
|
|
|
// 菜单切换逻辑
|
|
menuToggle.addEventListener('click', () => {
|
|
sidebar.classList.toggle('-translate-x-full');
|
|
overlay.classList.toggle('hidden');
|
|
document.body.classList.toggle('overflow-hidden');
|
|
});
|
|
|
|
overlay.addEventListener('click', () => {
|
|
sidebar.classList.add('-translate-x-full');
|
|
overlay.classList.add('hidden');
|
|
document.body.classList.remove('overflow-hidden');
|
|
});
|
|
|
|
// 显示加载状态
|
|
function showLoading() {
|
|
loadingOverlay.classList.remove('hidden');
|
|
defaultContent.classList.add('hidden');
|
|
}
|
|
|
|
// 隐藏加载状态
|
|
function hideLoading() {
|
|
loadingOverlay.classList.add('hidden');
|
|
}
|
|
|
|
// 更新导航菜单激活状态
|
|
function updateNavActive(page) {
|
|
// 重置所有链接样式
|
|
dashboardLink.classList.remove('text-primary', 'bg-primary/5', 'border-l-4', 'border-primary');
|
|
dashboardLink.classList.add('text-gray-600', 'hover:bg-gray-50', 'hover:text-primary');
|
|
|
|
usersLink.classList.remove('text-primary', 'bg-primary/5', 'border-l-4', 'border-primary');
|
|
usersLink.classList.add('text-gray-600', 'hover:bg-gray-50', 'hover:text-primary');
|
|
|
|
// 设置当前页面链接样式
|
|
if (page === 'index') {
|
|
dashboardLink.classList.remove('text-gray-600', 'hover:bg-gray-50', 'hover:text-primary');
|
|
dashboardLink.classList.add('text-primary', 'bg-primary/5', 'border-l-4', 'border-primary');
|
|
} else if (page === 'users') {
|
|
usersLink.classList.remove('text-gray-600', 'hover:bg-gray-50', 'hover:text-primary');
|
|
usersLink.classList.add('text-primary', 'bg-primary/5', 'border-l-4', 'border-primary');
|
|
}
|
|
}
|
|
|
|
// 加载页面到IFrame
|
|
function loadPage(page) {
|
|
if (currentPage === page) return;
|
|
|
|
showLoading();
|
|
updateNavActive(page);
|
|
|
|
// 设置IFrame源
|
|
contentIframe.src = PAGE_URLS[page];
|
|
|
|
// 监听IFrame加载完成
|
|
contentIframe.onload = function() {
|
|
hideLoading();
|
|
currentPage = page;
|
|
|
|
// 移动端自动隐藏侧边栏
|
|
if (window.innerWidth < 1024) {
|
|
sidebar.classList.add('-translate-x-full');
|
|
overlay.classList.add('hidden');
|
|
}
|
|
};
|
|
|
|
// 处理IFrame加载错误
|
|
contentIframe.onerror = function() {
|
|
hideLoading();
|
|
// 显示错误页面或备用内容
|
|
contentIframe.src = `about:blank`;
|
|
|
|
// 创建错误提示内容
|
|
const errorHtml ='' ;
|
|
// 写入错误提示到IFrame
|
|
contentIframe.contentDocument.open();
|
|
contentIframe.contentDocument.write(errorHtml);
|
|
contentIframe.contentDocument.close();
|
|
};
|
|
}
|
|
|
|
// 刷新当前页面
|
|
function reloadCurrentPage() {
|
|
showLoading();
|
|
contentIframe.src = contentIframe.src;
|
|
}
|
|
|
|
// 暴露刷新函数到window对象供IFrame调用
|
|
window.reloadCurrentPage = reloadCurrentPage;
|
|
|
|
// 导航链接点击事件
|
|
dashboardLink.addEventListener('click', (e) => {
|
|
e.preventDefault();
|
|
loadPage('index');
|
|
});
|
|
|
|
usersLink.addEventListener('click', (e) => {
|
|
e.preventDefault();
|
|
loadPage('user');
|
|
});
|
|
|
|
// 初始化加载仪表盘页面
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
loadPage('index');
|
|
});
|
|
|
|
// 响应式处理
|
|
window.addEventListener('resize', () => {
|
|
if (window.innerWidth >= 1024) {
|
|
sidebar.classList.remove('-translate-x-full');
|
|
overlay.classList.add('hidden');
|
|
}
|
|
});
|
|
|
|
// 滚动时改变header样式
|
|
window.addEventListener('scroll', () => {
|
|
const header = document.getElementById('header');
|
|
if (window.scrollY > 10) {
|
|
header.classList.add('shadow');
|
|
} else {
|
|
header.classList.remove('shadow');
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|