<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>企业管理系统 - 仪表盘</title>
    <link rel="shortcut icon" href="../../static/assets/silos/images/logo/logo.png" th:href="@{/assets/silos/images/logo/logo.png}"/>
    <link rel="bookmark" href="../../static/assets/silos/images/logo/logo.png" th:href="@{/assets/silos/images/logo/logo.png}"/>
    <link rel="stylesheet" href="../../static/assets/library/layui/css/layui.css" th:href="@{/assets/library/layui/css/layui.css}"/>
    <link rel="stylesheet" href="../../static/assets/library/fonts/fontawesome6/css/all.css" th:href="@{/assets/library/fonts/fontawesome6/css/all.css}">
    <link rel="stylesheet" href="../../static/business/dashboard/dashboard.css" th:href="@{/business/dashboard/dashboard.css}">

</head>
<body>
<!-- 主内容区 -->
<div class="main-content">
    <!-- 顶部导航栏 -->
    <div class="top-nav">
        <div class="search-bar">
            <i class="fas fa-search"></i>
            <input type="text" placeholder="搜索...">
        </div>
        <div class="nav-icons">
            <div class="icon">
                <i class="far fa-bell"></i>
                <div class="badge">5</div>
            </div>
            <div class="icon">
                <i class="far fa-envelope"></i>
                <div class="badge">3</div>
            </div>
            <div class="user-profile">
                <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="用户头像">
                <span>张经理</span>
            </div>
        </div>
    </div>

    <!-- 欢迎区域 -->
    <div class="welcome-section">
        <h1>早上好，张经理！</h1>
        <p>今天是2023年10月26日，天气晴朗。以下是您的系统概览。</p>
        <div class="quick-actions">
            <button class="action-btn"><i class="fas fa-plus"></i> 新建订单</button>
            <button class="action-btn"><i class="fas fa-user-plus"></i> 添加用户</button>
            <button class="action-btn"><i class="fas fa-file-export"></i> 导出数据</button>
            <button class="action-btn"><i class="fas fa-chart-pie"></i> 生成报告</button>
        </div>
    </div>

    <!-- KPI 卡片区域 -->
    <div class="kpi-cards">
        <div class="kpi-card sales">
            <div class="kpi-header">
                <h3>总销售额</h3>
                <i class="fas fa-shopping-cart"></i>
            </div>
            <div class="kpi-value">¥ 1,234,567</div>
            <div class="kpi-change positive">
                <i class="fas fa-arrow-up"></i> 12.5% 较上月
            </div>
        </div>
        <div class="kpi-card users">
            <div class="kpi-header">
                <h3>新增用户</h3>
                <i class="fas fa-users"></i>
            </div>
            <div class="kpi-value">1,234</div>
            <div class="kpi-change positive">
                <i class="fas fa-arrow-up"></i> 8.2% 较上月
            </div>
        </div>
        <div class="kpi-card orders">
            <div class="kpi-header">
                <h3>订单总数</h3>
                <i class="fas fa-clipboard-list"></i>
            </div>
            <div class="kpi-value">567</div>
            <div class="kpi-change negative">
                <i class="fas fa-arrow-down"></i> 2.1% 较上月
            </div>
        </div>
        <div class="kpi-card revenue">
            <div class="kpi-header">
                <h3>平均客单价</h3>
                <i class="fas fa-dollar-sign"></i>
            </div>
            <div class="kpi-value">¥ 245</div>
            <div class="kpi-change positive">
                <i class="fas fa-arrow-up"></i> 5.3% 较上月
            </div>
        </div>
    </div>

    <!-- 图表区域 -->
    <div class="charts-section">
        <div class="chart-container">
            <div class="chart-header">
                <h3>销售趋势</h3>
                <div class="chart-actions">
                    <select>
                        <option>最近7天</option>
                        <option>最近30天</option>
                        <option>最近90天</option>
                    </select>
                </div>
            </div>
            <canvas id="salesChart"></canvas>
        </div>
        <div class="chart-container">
            <div class="chart-header">
                <h3>用户来源</h3>
                <div class="chart-actions">
                    <select>
                        <option>本月</option>
                        <option>上个月</option>
                        <option>本季度</option>
                    </select>
                </div>
            </div>
            <canvas id="userSourceChart"></canvas>
        </div>
    </div>

    <!-- 动态信息区域 -->
    <div class="dynamic-info">
        <div class="info-card">
            <div class="info-header">
                <h3>最新订单</h3>
                <a href="#">查看全部</a>
            </div>
            <ul class="info-list">
                <li class="info-item">
                    <div>
                        <div>#ORD-7845</div>
                        <div class="text-muted">2023-10-26 10:23</div>
                    </div>
                    <div class="status pending">待处理</div>
                </li>
                <li class="info-item">
                    <div>
                        <div>#ORD-7844</div>
                        <div class="text-muted">2023-10-26 09:45</div>
                    </div>
                    <div class="status processing">处理中</div>
                </li>
                <li class="info-item">
                    <div>
                        <div>#ORD-7843</div>
                        <div class="text-muted">2023-10-26 08:12</div>
                    </div>
                    <div class="status completed">已完成</div>
                </li>
                <li class="info-item">
                    <div>
                        <div>#ORD-7842</div>
                        <div class="text-muted">2023-10-25 16:33</div>
                    </div>
                    <div class="status completed">已完成</div>
                </li>
            </ul>
        </div>
        <div class="info-card">
            <div class="info-header">
                <h3>系统活动</h3>
                <a href="#">查看全部</a>
            </div>
            <ul class="info-list">
                <li class="info-item">
                    <div>
                        <div>新用户注册</div>
                        <div class="text-muted">用户 "张三" 刚刚注册</div>
                    </div>
                    <div class="text-muted">2分钟前</div>
                </li>
                <li class="info-item">
                    <div>
                        <div>订单完成</div>
                        <div class="text-muted">订单 #ORD-7841 已标记为完成</div>
                    </div>
                    <div class="text-muted">15分钟前</div>
                </li>
                <li class="info-item">
                    <div>
                        <div>库存预警</div>
                        <div class="text-muted">产品 "智能手机" 库存不足</div>
                    </div>
                    <div class="text-muted">1小时前</div>
                </li>
                <li class="info-item">
                    <div>
                        <div>系统备份</div>
                        <div class="text-muted">每日系统备份已完成</div>
                    </div>
                    <div class="text-muted">3小时前</div>
                </li>
            </ul>
        </div>
    </div>

    <!-- 系统状态区域 -->
    <div class="system-status">
        <div class="info-header">
            <h3>系统状态</h3>
            <div class="text-muted">最后更新: 刚刚</div>
        </div>
        <div class="status-grid">
            <div class="status-item">
                <div class="status-header">
                    <span>CPU 使用率</span>
                    <span>42%</span>
                </div>
                <div class="progress-bar">
                    <div class="progress safe" style="width: 42%"></div>
                </div>
            </div>
            <div class="status-item">
                <div class="status-header">
                    <span>内存使用率</span>
                    <span>67%</span>
                </div>
                <div class="progress-bar">
                    <div class="progress warning" style="width: 67%"></div>
                </div>
            </div>
            <div class="status-item">
                <div class="status-header">
                    <span>磁盘空间</span>
                    <span>78%</span>
                </div>
                <div class="progress-bar">
                    <div class="progress warning" style="width: 78%"></div>
                </div>
            </div>
            <div class="status-item">
                <div class="status-header">
                    <span>数据库连接</span>
                    <span>正常</span>
                </div>
                <div class="progress-bar">
                    <div class="progress safe" style="width: 100%"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="../../static/assets/library/jquery/jquery.js" th:src="@{/assets/library/jquery/jquery.js}"></script>
<script src="../../static/assets/library/layui/layui.js" th:src="@{/assets/library/layui/layui.js}"></script>
<script src="../../static/assets/library/jplus/chart/chart.js" th:src="@{/assets/library/jplus/chart/chart.js}"></script>
<script src="../../static/business/dashboard/dashboard.js" th:src="@{/business/dashboard/dashboard.js}"></script>
</body>
</html>