<!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">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
    <title>智慧管理平台</title>
    <style>
        :root {
            --primary-color: #4361ee;
            --secondary-color: #3f37c9;
            --success-gradient: linear-gradient(45deg, #4CCD99, #3CAEA3);
            --info-gradient: linear-gradient(45deg, #4361ee, #3a0ca3);
        }

        body {
            background-color: #f8f9fa;
            min-height: 100vh;
        }

        .navbar {
            box-shadow: 0 2px 15px rgba(0,0,0,0.1);
            background: var(--info-gradient) !important;
        }

        .navbar-brand {
            font-weight: 700;
            letter-spacing: 1px;
            color: white !important;
        }

        .nav-link {
            color: rgba(255,255,255,0.8) !important;
            transition: all 0.3s ease;
            border-radius: 8px;
            margin: 0 5px;
        }

        .nav-link:hover {
            color: white !important;
            background: rgba(255,255,255,0.15);
        }

        .dropdown-menu {
            border: none;
            box-shadow: 0 5px 25px rgba(0,0,0,0.1);
            border-radius: 12px;
            margin-top: 8px;
        }

        .dropdown-item {
            padding: 8px 20px;
            transition: all 0.2s ease;
        }

        .dashboard-card {
            border: none;
            border-radius: 16px;
            box-shadow: 0 5px 25px rgba(0,0,0,0.08);
            transition: transform 0.3s ease;
            background: white;
        }

        .dashboard-card:hover {
            transform: translateY(-5px);
        }

        .theme-switcher {
            width: 30px;
            height: 30px;
            border-radius: 8px;
            cursor: pointer;
            transition: transform 0.3s ease;
        }

        .theme-switcher:hover {
            transform: scale(1.1);
        }

        [data-bs-theme="dark"] {
            color-scheme: dark;
            --primary-color: #6c63ff;
            --secondary-color: #564dff;
            background-color: #1a1a1a;
        }

        [data-bs-theme="dark"] .dashboard-card {
            background: #2d2d2d;
            color: white;
        }
    </style>
</head>

<body>
<!-- 主内容 -->
<div class="container mt-5 pt-5">
    <div class="row g-4">
        <div class="col-12">
            <div class="dashboard-card p-4">
                <h3 class="mb-4"><i class="bi bi-speedometer2 me-2"></i>数据总览</h3>
                <div class="row g-4">
                    <div class="col-md-3">
                        <div class="p-3 text-white rounded-3" style="background: var(--success-gradient)">
                            <h5><i class="bi bi-currency-exchange me-2"></i>今日营收</h5>
                            <h2 class="mt-2">¥ 45,680</h2>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="p-3 text-white rounded-3" style="background: var(--info-gradient)">
                            <h5><i class="bi bi-box-seam me-2"></i>库存总量</h5>
                            <h2 class="mt-2">8,452</h2>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="p-3 text-white rounded-3 bg-warning">
                            <h5><i class="bi bi-cash-stack me-2"></i>本月支出</h5>
                            <h2 class="mt-2">¥ 12,340</h2>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="p-3 text-white rounded-3 bg-secondary">
                            <h5><i class="bi bi-activity me-2"></i>运营指标</h5>
                            <h2 class="mt-2">86%</h2>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-8">
            <div class="dashboard-card p-4 h-100">
                <h4 class="mb-4"><i class="bi bi-bar-chart-line me-2"></i>趋势分析</h4>
                <div style="height: 300px" class="bg-light rounded-3">
                    <!-- 这里可以放置图表 -->
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="dashboard-card p-4 h-100">
                <h4 class="mb-4"><i class="bi bi-clock-history me-2"></i>最近操作</h4>
                <ul class="list-group list-group-flush">
                    <li class="list-group-item d-flex">
                        <i class="bi bi-cart-check me-3 fs-5 text-success"></i>
                        <div>
                            <div>新订单创建</div>
                            <small class="text-muted">2分钟前</small>
                        </div>
                    </li>
                    <li class="list-group-item d-flex">
                        <i class="bi bi-box-seam me-3 fs-5 text-primary"></i>
                        <div>
                            <div>库存更新</div>
                            <small class="text-muted">1小时前</small>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

<script src="../static/bootstrap/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="../static/bootstrap/bootstrap-icons.css">

<script type="javascript">
    document.addEventListener('DOMContentLoaded', function () {
        // 获取所有导航链接
        const navLinks = document.querySelectorAll('.nav-link');

        // 为每个导航链接添加点击事件监听器
        navLinks.forEach(link => {
            link.addEventListener('click', function (event) {
                event.preventDefault(); // 阻止默认的链接跳转行为

                // 获取要显示的内容标识符
                const target = this.getAttribute('data-target');

                // 更新主内容区域的内容
                updateMainContent(target);
            });
        });
    });

    function updateMainContent(target) {
        // 清空主内容区域
        const mainContent = document.querySelector('.container.mt-5.pt-5');
        mainContent.innerHTML = '';

        // 根据目标标识符更新主内容区域的内容
        switch (target) {
            case 'dashboard':
                mainContent.innerHTML = `
          <div class="col-12">
            <div class="dashboard-card p-4">
              <h3 class="mb-4"><i class="bi bi-speedometer2 me-2"></i>数据总览</h3>
              <div class="row g-4">
                <div class="col-md-3">
                  <div class="p-3 text-white rounded-3" style="background: var(--success-gradient)">
                    <h5><i class="bi bi-currency-exchange me-2"></i>今日营收</h5>
                    <h2 class="mt-2">¥ 45,680</h2>
                  </div>
                </div>
                <div class="col-md-3">
                  <div class="p-3 text-white rounded-3" style="background: var(--info-gradient)">
                    <h5><i class="bi bi-box-seam me-2"></i>库存总量</h5>
                    <h2 class="mt-2">8,452</h2>
                  </div>
                </div>
                <div class="col-md-3">
                  <div class="p-3 text-white rounded-3 bg-warning">
                    <h5><i class="bi bi-cash-stack me-2"></i>本月支出</h5>
                    <h2 class="mt-2">¥ 12,340</h2>
                  </div>
                </div>
                <div class="col-md-3">
                  <div class="p-3 text-white rounded-3 bg-secondary">
                    <h5><i class="bi bi-activity me-2"></i>运营指标</h5>
                    <h2 class="mt-2">86%</h2>
                  </div>
                </div>
              </div>
            </div>
          </div>
        `;
                break;
            case 'sales-dashboard':
                mainContent.innerHTML = '<h2>进销看板内容</h2>';
                break;
            case 'finance-dashboard':
                mainContent.innerHTML = '<h2>收支看板内容</h2>';
                break;
            case 'inventory-management':
                mainContent.innerHTML = '<h2>进销管理内容</h2>';
                break;
            case 'daily-expenses':
                mainContent.innerHTML = '<h2>日常开支内容</h2>';
                break;
            case 'system-management':
                mainContent.innerHTML = '<h2>系统管理内容</h2>';
                break;
            case 'account-management':
                mainContent.innerHTML = '<h2>账户管理内容</h2>';
                break;
            case 'permission-configuration':
                mainContent.innerHTML = '<h2>权限配置内容</h2>';
                break;
            case 'dictionary-management':
                mainContent.innerHTML = '<h2>字典管理内容</h2>';
                break;
            default:
                mainContent.innerHTML = '<h2>未找到内容</h2>';
        }
    }
</script>
</body>
</html>