<!DOCTYPE html>
<html lang="zh-CN" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" data-bs-theme="light">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>后台管理系统</title>
	<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
	<style>
		:root {
			--main-bg-color: #f8f9fa;
			--main-text-color: #333;
		}

		.dark-theme {
			--main-bg-color: #2c3e50;
			--main-text-color: #ecf0f1;
		}

		body {
			background-color: var(--main-bg-color);
			color: var(--main-text-color);
		}

		.sidebar {
			width: 250px;
			height: calc(100vh - 56px);
			position: fixed;
			left: 0;
			top: 56px;
			overflow-y: auto;
		}

		.main-content {
			margin-left: 250px;
			padding: 20px;
			margin-top: 56px;
		}

		.dropdown-menu {
			border: none;
			box-shadow: 0 0 15px rgba(0,0,0,0.1);
		}

		.nav-link:hover {
			background-color: rgba(0,0,0,0.05);
		}
	</style>
</head>
<body>
<!-- 登录页面 -->
<div id="login-page" class="container-fluid d-flex justify-content-center align-items-center vh-100">
	<div class="card col-md-4">
		<div class="card-body">
			<h3 class="card-title text-center mb-4">系统登录</h3>
			<form id="loginForm">
				<div class="mb-3">
					<label class="form-label">用户名</label>
					<input type="text" class="form-control" required>
				</div>
				<div class="mb-3">
					<label class="form-label">密码</label>
					<input type="password" class="form-control" required>
				</div>
				<div class="mb-3 row">
					<div class="col-6">
						<input type="text" class="form-control" placeholder="验证码" required>
					</div>
					<div class="col-6">
						<img src="captcha.jpg" alt="验证码" class="img-fluid" style="cursor: pointer;">
					</div>
				</div>
				<button type="submit" class="btn btn-primary w-100">登录</button>
			</form>
		</div>
	</div>
</div>

<!-- 后台主页 -->
<div id="main-page" style="display: none;">
	<!-- 顶部导航 -->
	<nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top">
		<div class="container-fluid">
			<a class="navbar-brand" href="#">管理系统</a>

			<!-- 主题切换 -->
			<div class="ms-auto">
				<div class="dropdown">
					<button class="btn btn-light dropdown-toggle" data-bs-toggle="dropdown">
						主题切换
					</button>
					<ul class="dropdown-menu">
						<li><a class="dropdown-item theme-btn" data-theme="default">默认主题</a></li>
						<li><a class="dropdown-item theme-btn" data-theme="dark">深色主题</a></li>
					</ul>
				</div>

				<!-- 用户菜单 -->
				<div class="dropdown ms-2">
					<button class="btn btn-light dropdown-toggle" data-bs-toggle="dropdown">
						当前用户
					</button>
					<ul class="dropdown-menu dropdown-menu-end">
						<li><a class="dropdown-item" href="#">个人中心</a></li>
						<li><a class="dropdown-item" id="logout">切换账号</a></li>
					</ul>
				</div>
			</div>
		</div>
	</nav>

	<!-- 侧边栏菜单 -->
	<div class="sidebar bg-light">
		<div class="list-group list-group-flush">
			<!-- 看板菜单 -->
			<div class="list-group-item dropdown">
				<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown">看板</a>
				<ul class="dropdown-menu">
					<li><a class="dropdown-item" href="#">进销看板</a></li>
					<li><a class="dropdown-item" href="#">收支看板</a></li>
				</ul>
			</div>

			<a href="#" class="list-group-item list-group-item-action">进销管理</a>
			<a href="#" class="list-group-item list-group-item-action">日常开支</a>

			<!-- 系统管理 -->
			<div class="list-group-item dropdown">
				<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown">系统管理</a>
				<ul class="dropdown-menu">
					<li><a class="dropdown-item" href="#">登录账户管理</a></li>
					<li><a class="dropdown-item" href="#">角色管理</a></li>
					<li><a class="dropdown-item" href="#">权限配置</a></li>
					<li><a class="dropdown-item" href="#">字典管理</a></li>
				</ul>
			</div>
		</div>
	</div>

	<!-- 主内容区 -->
	<div class="main-content">
		<div class="container-fluid">
			<h4 class="mb-4">仪表盘</h4>
			<div class="row">
				<!-- 这里添加具体内容 -->
			</div>
		</div>
	</div>
</div>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
<script>
	$(document).ready(function() {
		// 登录表单提交
		$('#loginForm').submit(function(e) {
			e.preventDefault();
			$('#login-page').hide();
			$('#main-page').show();
		});

		// 主题切换
		$('.theme-btn').click(function() {
			const theme = $(this).data('theme');
			$('body').removeClass('dark-theme');
			if(theme === 'dark') {
				$('body').addClass('dark-theme');
			}
		});

		// 切换账号
		$('#logout').click(function() {
			$('#main-page').hide();
			$('#login-page').show();
		});

		// 验证码刷新
		$('img[src="captcha.jpg"]').click(function() {
			$(this).attr('src', 'captcha.jpg?t=' + new Date().getTime());
		});

		// 菜单悬停效果
		$('.dropdown').hover(function() {
			$(this).addClass('show');
			$(this).find('.dropdown-menu').addClass('show');
		}, function() {
			$(this).removeClass('show');
			$(this).find('.dropdown-menu').removeClass('show');
		});
	});
</script>
</body>
</html>