<!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>