编辑页面

页面标题

有效期修改后将从当前时间重新计算过期时间

CSS文件（可选）

JS文件（可选）

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>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: -apple-system, BlinkMacSystemFont, 'Microsoft YaHei', sans-serif; background: #f0f2f5; color: #333; min-height: 100vh; }
        
        /* 整体布局 */
        .layout { display: flex; min-height: 100vh; }
        
        /* 左侧导航 */
        .sidebar { width: 220px; background: #001529; color: #fff; position: fixed; height: 100vh; overflow-y: auto; z-index: 100; }
        .logo { height: 64px; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 600; border-bottom: 1px solid rgba(255,255,255,0.1); }
        .logo .icon { font-size: 24px; margin-right: 8px; }
        .nav-menu { padding: 8px 0; }
        .nav-item { padding: 12px 20px; cursor: pointer; display: flex; align-items: center; transition: all 0.2s; }
        .nav-item:hover { background: rgba(255,255,255,0.1); }
        .nav-item.active { background: #1890ff; }
        .nav-item .icon { margin-right: 10px; font-size: 16px; }
        .nav-item .arrow { margin-left: auto; transition: transform 0.2s; }
        .nav-item.open .arrow { transform: rotate(90deg); }
        .sub-menu { background: rgba(0,0,0,0.2); display: none; }
        .nav-item.open + .sub-menu { display: block; }
        .sub-menu .sub-item { padding: 10px 20px 10px 50px; cursor: pointer; font-size: 14px; transition: all 0.2s; }
        .sub-menu .sub-item:hover { background: rgba(255,255,255,0.1); }
        .sub-menu .sub-item.active { color: #1890ff; border-left: 3px solid #1890ff; }
        
        /* 右侧内容 */
        .main { flex: 1; margin-left: 220px; }
        
        /* 顶部 */
        .header { height: 64px; background: #fff; border-bottom: 1px solid #e8e8e8; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; position: sticky; top: 0; z-index: 50; }
        .header-left { display: flex; align-items: center; gap: 16px; }
        .breadcrumb { color: #666; font-size: 14px; }
        .breadcrumb span { color: #999; margin: 0 8px; }
        .header-right { display: flex; align-items: center; gap: 20px; }
        .header-icon { font-size: 20px; cursor: pointer; position: relative; }
        .header-icon .badge { position: absolute; top: -5px; right: -5px; width: 18px; height: 18px; background: #ff4d4f; color: #fff; border-radius: 50%; font-size: 10px; display: flex; align-items: center; justify-content: center; }
        .user-info { display: flex; align-items: center; gap: 8px; cursor: pointer; }
        .user-avatar { width: 32px; height: 32px; background: #1890ff; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 14px; }
        
        /* 内容区 */
        .content { padding: 24px; }
        
        /* 统计卡片 */
        .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 24px; }
        .stat-card { background: #fff; border-radius: 8px; padding: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
        .stat-card .label { font-size: 14px; color: #999; margin-bottom: 8px; }
        .stat-card .value { font-size: 28px; font-weight: 600; color: #333; }
        .stat-card .trend { font-size: 12px; margin-top: 8px; }
        .stat-card .trend.up { color: #52c41a; }
        .stat-card .trend.down { color: #ff4d4f; }
        .stat-card .icon-wrap { float: right; width: 48px; height: 48px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 24px; }
        
        /* 搜索栏 */
        .search-bar { background: #fff; border-radius: 8px; padding: 16px; margin-bottom: 16px; display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
        .search-item { display: flex; align-items: center; gap: 8px; }
        .search-item label { font-size: 14px; color: #666; white-space: nowrap; }
        .search-item input, .search-item select { height: 32px; border: 1px solid #d9d9d9; border-radius: 4px; padding: 0 12px; font-size: 14px; outline: none; }
        .search-item input:focus, .search-item select:focus { border-color: #1890ff; }
        
        /* 按钮 */
        .btn { height: 32px; padding: 0 16px; border: none; border-radius: 4px; font-size: 14px; cursor: pointer; transition: all 0.2s; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
        .btn-primary { background: #1890ff; color: #fff; }
        .btn-primary:hover { background: #40a9ff; }
        .btn-default { background: #fff; border: 1px solid #d9d9d9; }
        .btn-default:hover { color: #1890ff; border-color: #1890ff; }
        .btn-danger { background: #ff4d4f; color: #fff; }
        .btn-danger:hover { background: #ff7875; }
        .btn-success { background: #52c41a; color: #fff; }
        .btn-success:hover { background: #73d13d; }
        .btn-warning { background: #faad14; color: #fff; }
        .btn-warning:hover { background: #ffc53d; }
        
        /* 表格 */
        .table-wrap { background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
        .table-header { padding: 16px; border-bottom: 1px solid #e8e8e8; display: flex; justify-content: space-between; align-items: center; }
        .table-title { font-size: 16px; font-weight: 500; }
        .table-actions { display: flex; gap: 8px; }
        table { width: 100%; border-collapse: collapse; }
        th, td { padding: 12px 16px; text-align: left; border-bottom: 1px solid #e8e8e8; font-size: 14px; }
        th { background: #fafafa; font-weight: 500; color: #333; }
        tr:hover { background: #f5f5f5; }
        .status-badge { padding: 2px 8px; border-radius: 4px; font-size: 12px; }
        .status-badge.success { background: #f6ffed; color: #52c41a; border: 1px solid #b7eb8f; }
        .status-badge.warning { background: #fffbe6; color: #faad14; border: 1px solid #ffe58f; }
        .status-badge.danger { background: #fff2f0; color: #ff4d4f; border: 1px solid #ffccc7; }
        .status-badge.info { background: #e6f7ff; color: #1890ff; border: 1px solid #91d5ff; }
        
        /* 分页 */
        .pagination { padding: 16px; display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
        .pagination button { min-width: 32px; height: 32px; border: 1px solid #d9d9d9; background: #fff; border-radius: 4px; cursor: pointer; }
        .pagination button:hover { color: #1890ff; border-color: #1890ff; }
        .pagination button.active { background: #1890ff; color: #fff; border-color: #1890ff; }
        .pagination button:disabled { color: #d9d9d9; cursor: not-allowed; }
        
        /* 卡片网格 */
        .card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
        .card { background: #fff; border-radius: 8px; padding: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); cursor: pointer; transition: all 0.2s; }
        .card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.12); transform: translateY(-2px); }
        .card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; }
        .card-title { font-size: 16px; font-weight: 500; }
        .card-icon { width: 40px; height: 40px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 20px; }
        .card-info { font-size: 14px; color: #666; }
        .card-info p { margin-bottom: 4px; }
        
        /* 表单 */
        .form-wrap { background: #fff; border-radius: 8px; padding: 24px; }
        .form-row { display: flex; margin-bottom: 20px; align-items: flex-start; }
        .form-row .label { width: 120px; text-align: right; padding-right: 12px; font-size: 14px; color: #666; line-height: 32px; }
        .form-row .field { flex: 1; }
        .form-row input, .form-row select, .form-row textarea { width: 100%; border: 1px solid #d9d9d9; border-radius: 4px; padding: 8px 12px; font-size: 14px; outline: none; }
        .form-row textarea { min-height: 100px; resize: vertical; }
        .form-row input:focus, .form-row select:focus, .form-row textarea:focus { border-color: #1890ff; }
        .form-actions { margin-top: 24px; padding-top: 24px; border-top: 1px solid #e8e8e8; display: flex; justify-content: center; gap: 12px; }
        
        /* 详情页 */
        .detail-section { background: #fff; border-radius: 8px; margin-bottom: 16px; }
        .detail-header { padding: 16px 20px; border-bottom: 1px solid #e8e8e8; font-weight: 500; font-size: 16px; }
        .detail-body { padding: 20px; }
        .detail-row { display: flex; padding: 8px 0; border-bottom: 1px solid #f0f0f0; }
        .detail-row:last-child { border-bottom: none; }
        .detail-row .label { width: 120px; color: #999; font-size: 14px; }
        .detail-row .value { flex: 1; font-size: 14px; color: #333; }
        
        /* 弹窗 */
        .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); display: none; align-items: center; justify-content: center; z-index: 1000; }
        .modal-overlay.show { display: flex; }
        .modal { background: #fff; border-radius: 8px; width: 90%; max-width: 600px; max-height: 80vh; overflow: auto; }
        .modal-header { padding: 16px 20px; border-bottom: 1px solid #e8e8e8; display: flex; justify-content: space-between; align-items: center; }
        .modal-header h3 { font-size: 16px; font-weight: 500; }
        .modal-close { font-size: 20px; cursor: pointer; color: #999; }
        .modal-close:hover { color: #333; }
        .modal-body { padding: 20px; }
        .modal-footer { padding: 16px 20px; border-top: 1px solid #e8e8e8; display: flex; justify-content: flex-end; gap: 8px; }
        
        /* 标签页 */
        .tabs { background: #fff; border-bottom: 1px solid #e8e8e8; display: flex; padding: 0 24px; }
        .tab { padding: 16px 24px; cursor: pointer; font-size: 14px; color: #666; border-bottom: 2px solid transparent; transition: all 0.2s; }
        .tab:hover { color: #1890ff; }
        .tab.active { color: #1890ff; border-bottom-color: #1890ff; }
        
        /* Toast */
        .toast { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0,0,0,0.8); color: #fff; padding: 16px 32px; border-radius: 8px; z-index: 9999; animation: toastShow 2s ease; pointer-events: none; }
        @keyframes toastShow { 0%, 100% { opacity: 0; } 10%, 90% { opacity: 1; } }
        
        /* 图表区 */
        .chart-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; margin-bottom: 24px; }
        .chart-box { background: #fff; border-radius: 8px; padding: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
        .chart-title { font-size: 16px; font-weight: 500; margin-bottom: 16px; }
        .chart-placeholder { height: 280px; background: linear-gradient(135deg, #f5f7fa, #e8ecf1); border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #999; }
        .chart-placeholder .icon { font-size: 48px; margin-bottom: 12px; }
        .chart-list { display: flex; flex-direction: column; gap: 16px; }
        .chart-item { display: flex; align-items: center; gap: 12px; }
        .chart-item .bar { flex: 1; height: 24px; background: #f0f0f0; border-radius: 4px; overflow: hidden; }
        .chart-item .bar-fill { height: 100%; border-radius: 4px; }
        .chart-item .label { width: 80px; font-size: 14px; }
        .chart-item .value { width: 60px; text-align: right; font-size: 14px; font-weight: 500; }
        
        /* 列表项 */
        .list-item { display: flex; align-items: center; padding: 16px; border-bottom: 1px solid #f0f0f0; cursor: pointer; transition: background 0.2s; }
        .list-item:hover { background: #f9f9f9; }
        .list-item:last-child { border-bottom: none; }
        .list-item .icon { width: 40px; height: 40px; border-radius: 50%; background: #e6f7ff; display: flex; align-items: center; justify-content: center; font-size: 18px; margin-right: 12px; }
        .list-item .content { flex: 1; }
        .list-item .content h4 { font-size: 14px; font-weight: 500; margin-bottom: 4px; }
        .list-item .content p { font-size: 12px; color: #999; }
        .list-item .time { font-size: 12px; color: #999; }
        
        /* 操作按钮组 */
        .action-group { display: flex; gap: 8px; }
        .action-group .btn { height: 28px; padding: 0 12px; font-size: 12px; }
    </style>
</head>
<body>
    <div class="layout">
        <!-- 左侧导航 -->
        <div class="sidebar">
            <div class="logo">
                <span class="icon">⛽</span>
                <span>司机加油系统</span>
            </div>
            <div class="nav-menu">
                <div class="nav-item active" onclick="toggleNav(this); navigatePage('dashboard')">
                    <span class="icon">📊</span>
                    <span>数据概览</span>
                </div>
                
                <div class="nav-item" onclick="toggleNav(this);">
                    <span class="icon">👤</span>
                    <span>司机管理</span>
                    <span class="arrow">›</span>
                </div>
                <div class="sub-menu">
                    <div class="sub-item" onclick="navigatePage('driver-verify'); event.stopPropagation();">司机注册审核</div>
                    <div class="sub-item" onclick="navigatePage('driver-list'); event.stopPropagation();">司机列表</div>
                    <div class="sub-item" onclick="navigatePage('driver-detail'); event.stopPropagation();">司机详情</div>
                </div>
                
                <div class="nav-item" onclick="toggleNav(this);">
                    <span class="icon">🏢</span>
                    <span>企业/车队管理</span>
                    <span class="arrow">›</span>
                </div>
                <div class="sub-menu">
                    <div class="sub-item" onclick="navigatePage('company'); event.stopPropagation();">企业管理</div>
                    <div class="sub-item" onclick="navigatePage('fleet'); event.stopPropagation();">车队管理</div>
                    <div class="sub-item" onclick="navigatePage('quota-allocation'); event.stopPropagation();">额度分配</div>
                    <div class="sub-item" onclick="navigatePage('quota-monitor'); event.stopPropagation();">额度监控</div>
                </div>
                
                <div class="nav-item" onclick="toggleNav(this);">
                    <span class="icon">⛽</span>
                    <span>加油站管理</span>
                    <span class="arrow">›</span>
                </div>
                <div class="sub-menu">
                    <div class="sub-item" onclick="navigatePage('station'); event.stopPropagation();">油站信息管理</div>
                    <div class="sub-item" onclick="navigatePage('price'); event.stopPropagation();">油品价格管理</div>
                    <div class="sub-item" onclick="navigatePage('device'); event.stopPropagation();">加油机关联管理</div>
                </div>
                
                <div class="nav-item" onclick="toggleNav(this);">
                    <span class="icon">💰</span>
                    <span>对账结算</span>
                    <span class="arrow">›</span>
                </div>
                <div class="sub-menu">
                    <div class="sub-item" onclick="navigatePage('reconcile-station'); event.stopPropagation();">平台与油站对账</div>
                    <div class="sub-item" onclick="navigatePage('reconcile-company'); event.stopPropagation();">平台与企业对账</div>
                    <div class="sub-item" onclick="navigatePage('statement'); event.stopPropagation();">对账单管理</div>
                    <div class="sub-item" onclick="navigatePage('settlement'); event.stopPropagation();">结算记录</div>
                </div>
                
                <div class="nav-item" onclick="toggleNav(this);">
                    <span class="icon">📋</span>
                    <span>订单管理</span>
                    <span class="arrow">›</span>
                </div>
                <div class="sub-menu">
                    <div class="sub-item" onclick="navigatePage('order-list'); event.stopPropagation();">订单列表</div>
                    <div class="sub-item" onclick="navigatePage('order-detail'); event.stopPropagation();">订单详情</div>
                    <div class="sub-item" onclick="navigatePage('order-exception'); event.stopPropagation();">异常订单处理</div>
                </div>
                
                <div class="nav-item" onclick="toggleNav(this);">
                    <span class="icon">📈</span>
                    <span>数据统计</span>
                    <span class="arrow">›</span>
                </div>
                <div class="sub-menu">
                    <div class="sub-item" onclick="navigatePage('stats-overview'); event.stopPropagation();">加油数据总览</div>
                    <div class="sub-item" onclick="navigatePage('stats-company'); event.stopPropagation();">按企业统计</div>
                    <div class="sub-item" onclick="navigatePage('stats-station'); event.stopPropagation();">按油站统计</div>
                    <div class="sub-item" onclick="navigatePage('stats-time'); event.stopPropagation();">按时间段统计</div>
                </div>
                
                <div class="nav-item" onclick="toggleNav(this);">
                    <span class="icon">⚙️</span>
                    <span>系统配置</span>
                    <span class="arrow">›</span>
                </div>
                <div class="sub-menu">
                    <div class="sub-item" onclick="navigatePage('role'); event.stopPropagation();">角色权限管理</div>
                    <div class="sub-item" onclick="navigatePage('log'); event.stopPropagation();">操作日志</div>
                    <div class="sub-item" onclick="navigatePage('notify-config'); event.stopPropagation();">消息通知配置</div>
                    <div class="sub-item" onclick="navigatePage('payment-config'); event.stopPropagation();">支付参数配置</div>
                </div>
            </div>
        </div>
        
        <!-- 右侧主内容 -->
        <div class="main">
            <div class="header">
                <div class="header-left">
                    <div class="breadcrumb">
                        首页 <span>/</span> <span id="current-nav">数据概览</span>
                    </div>
                </div>
                <div class="header-right">
                    <div class="header-icon">🔔<span class="badge">3</span></div>
                    <div class="header-icon">📧</div>
                    <div class="user-info">
                        <div class="user-avatar">管</div>
                        <span>管理员</span>
                    </div>
                </div>
            </div>
            
            <div class="content" id="page-content">
                <!-- 页面内容将动态加载 -->
            </div>
        </div>
    </div>
    
    <!-- 弹窗 -->
    <div class="modal-overlay" id="modal">
        <div class="modal">
            <div class="modal-header">
                <h3 id="modal-title">标题</h3>
                <span class="modal-close" onclick="closeModal()">×</span>
            </div>
            <div class="modal-body" id="modal-body">
                <!-- 弹窗内容 -->
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" onclick="closeModal()">取消</button>
                <button class="btn btn-primary" onclick="confirmModal()">确定</button>
            </div>
        </div>
    </div>

    <script>
        // 页面导航历史
        let pageHistory = ['dashboard'];
        
        // 切换导航展开
        function toggleNav(el) {
            if (el.querySelector('.arrow')) {
                el.classList.toggle('open');
            }
            el.parentElement.querySelectorAll('.nav-item').forEach(item => {
                if (item !== el) item.classList.remove('active');
            });
            el.classList.add('active');
        }
        
        // 页面导航
        function navigatePage(pageId) {
            pageHistory.push(pageId);
            
            // 更新侧边栏选中状态
            document.querySelectorAll('.sub-item').forEach(item => item.classList.remove('active'));
            document.querySelectorAll('.nav-item').forEach(item => item.classList.remove('active'));
            
            // 渲染页面
            renderPage(pageId);
            
            // 更新面包屑
            updateBreadcrumb(pageId);
        }
        
        // 更新面包屑
        function updateBreadcrumb(pageId) {
            const navMap = {
                'dashboard': '数据概览',
                'driver-verify': '司机管理 > 司机注册审核',
                'driver-list': '司机管理 > 司机列表',
                'driver-detail': '司机管理 > 司机详情',
                'company': '企业/车队管理 > 企业管理',
                'fleet': '企业/车队管理 > 车队管理',
                'quota-allocation': '企业/车队管理 > 额度分配',
                'quota-monitor': '企业/车队管理 > 额度监控',
                'station': '加油站管理 > 油站信息管理',
                'price': '加油站管理 > 油品价格管理',
                'device': '加油站管理 > 加油机关联管理',
                'reconcile-station': '对账结算 > 平台与油站对账',
                'reconcile-company': '对账结算 > 平台与企业对账',
                'statement': '对账结算 > 对账单管理',
                'settlement': '对账结算 > 结算记录',
                'order-list': '订单管理 > 订单列表',
                'order-detail': '订单管理 > 订单详情',
                'order-exception': '订单管理 > 异常订单处理',
                'stats-overview': '数据统计 > 加油数据总览',
                'stats-company': '数据统计 > 按企业统计',
                'stats-station': '数据统计 > 按油站统计',
                'stats-time': '数据统计 > 按时间段统计',
                'role': '系统配置 > 角色权限管理',
                'log': '系统配置 > 操作日志',
                'notify-config': '系统配置 > 消息通知配置',
                'payment-config': '系统配置 > 支付参数配置'
            };
            document.getElementById('current-nav').textContent = navMap[pageId] || '数据概览';
        }
        
        // 渲染页面
        function renderPage(pageId) {
            const content = document.getElementById('page-content');
            
            const pages = {
                'dashboard': `
                    <div class="stats-grid">
                        <div class="stat-card">
                            <div class="label">今日订单数</div>
                            <div class="value">1,234</div>
                            <div class="trend up">↑ 12.5% 较昨日</div>
                            <div class="icon-wrap" style="background: #e6f7ff;">📋</div>
                        </div>
                        <div class="stat-card">
                            <div class="label">今日加油量(升)</div>
                            <div class="value">45,678</div>
                            <div class="trend up">↑ 8.3% 较昨日</div>
                            <div class="icon-wrap" style="background: #f6ffed;">⛽</div>
                        </div>
                        <div class="stat-card">
                            <div class="label">今日交易金额(元)</div>
                            <div class="value">¥356,789</div>
                            <div class="trend up">↑ 15.2% 较昨日</div>
                            <div class="icon-wrap" style="background: #fff7e6;">💰</div>
                        </div>
                        <div class="stat-card">
                            <div class="label">注册司机数</div>
                            <div class="value">5,678</div>
                            <div class="trend up">↑ 23 新增</div>
                            <div class="icon-wrap" style="background: #fff1f0;">👤</div>
                        </div>
                    </div>
                    
                    <div class="chart-grid">
                        <div class="chart-box">
                            <div class="chart-title">近7天加油趋势</div>
                            <div class="chart-placeholder">
                                <div class="icon">📈</div>
                                <p>图表展示区域</p>
                                <p style="font-size: 12px;">展示每日订单数、加油量、交易金额趋势</p>
                            </div>
                        </div>
                        <div class="chart-box">
                            <div class="chart-title">各油站今日订单量排名</div>
                            <div class="chart-list">
                                <div class="chart-item">
                                    <span class="label">中石化朝阳站</span>
                                    <div class="bar"><div class="bar-fill" style="width: 85%; background: #1890ff;"></div></div>
                                    <span class="value">256</span>
                                </div>
                                <div class="chart-item">
                                    <span class="label">中石油望京站</span>
                                    <div class="bar"><div class="bar-fill" style="width: 70%; background: #52c41a;"></div></div>
                                    <span class="value">198</span>
                                </div>
                                <div class="chart-item">
                                    <span class="label">壳牌中关村站</span>
                                    <div class="bar"><div class="bar-fill" style="width: 55%; background: #faad14;"></div></div>
                                    <span class="value">156</span>
                                </div>
                                <div class="chart-item">
                                    <span class="label">中化道达尔站</span>
                                    <div class="bar"><div class="bar-fill" style="width: 40%; background: #f5222d;"></div></div>
                                    <span class="value">112</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px;">
                        <div class="table-wrap">
                            <div class="table-header">
                                <span class="table-title">待审核司机</span>
                                <button class="btn btn-default" onclick="navigatePage('driver-verify')">查看全部</button>
                            </div>
                            <table>
                                <thead><tr><th>姓名</th><th>手机号</th><th>企业</th><th>状态</th><th>操作</th></tr></thead>
                                <tbody>
                                    <tr><td>李师傅</td><td>138****1234</td><td>中通物流</td><td><span class="status-badge warning">待审核</span></td><td><button class="btn btn-primary" style="height:26px;padding:0 10px;font-size:12px;" onclick="navigatePage('driver-verify')">审核</button></td></tr>
                                    <tr><td>王师傅</td><td>139****5678</td><td>圆通速递</td><td><span class="status-badge warning">待审核</span></td><td><button class="btn btn-primary" style="height:26px;padding:0 10px;font-size:12px;" onclick="navigatePage('driver-verify')">审核</button></td></tr>
                                    <tr><td>张师傅</td><td>137****9012</td><td>申通快递</td><td><span class="status-badge warning">待审核</span></td><td><button class="btn btn-primary" style="height:26px;padding:0 10px;font-size:12px;" onclick="navigatePage('driver-verify')">审核</button></td></tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="table-wrap">
                            <div class="table-header">
                                <span class="table-title">异常订单</span>
                                <button class="btn btn-default" onclick="navigatePage('order-exception')">查看全部</button>
                            </div>
                            <table>
                                <thead><tr><th>订单号</th><th>司机</th><th>金额</th><th>状态</th><th>操作</th></tr></thead>
                                <tbody>
                                    <tr><td>DD2026042801</td><td>李师傅</td><td>¥356.00</td><td><span class="status-badge danger">支付失败</span></td><td><button class="btn btn-warning" style="height:26px;padding:0 10px;font-size:12px;" onclick="navigatePage('order-exception')">处理</button></td></tr>
                                    <tr><td>DD2026042802</td><td>王师傅</td><td>¥289.50</td><td><span class="status-badge warning">数据异常</span></td><td><button class="btn btn-warning" style="height:26px;padding:0 10px;font-size:12px;" onclick="navigatePage('order-exception')">处理</button></td></tr>
                                    <tr><td>DD2026042803</td><td>张师傅</td><td>¥420.00</td><td><span class="status-badge danger">核销超时</span></td><td><button class="btn btn-warning" style="height:26px;padding:0 10px;font-size:12px;" onclick="navigatePage('order-exception')">处理</button></td></tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                `,
                
                'driver-verify': `
                    <div class="search-bar">
                        <div class="search-item"><label>手机号</label><input type="text" placeholder="请输入手机号"></div>
                        <div class="search-item"><label>企业</label><select><option>全部</option><option>中通物流</option><option>圆通速递</option><option>申通快递</option></select></div>
                        <div class="search-item"><label>提交时间</label><input type="date"></div>
                        <button class="btn btn-primary">搜索</button>
                        <button class="btn btn-default">重置</button>
                    </div>
                    <div class="table-wrap">
                        <div class="table-header">
                            <span class="table-title">司机注册待审核列表</span>
                            <div class="table-actions">
                                <button class="btn btn-default">导出</button>
                            </div>
                        </div>
                        <table>
                            <thead><tr><th>姓名</th><th>手机号</th><th>车牌号</th><th>企业/车队</th><th>提交时间</th><th>状态</th><th>操作</th></tr></thead>
                            <tbody>
                                <tr><td>李师傅</td><td>138****1234</td><td>京A12345</td><td>中通物流/北京一队</td><td>2026-04-28 10:30</td><td><span class="status-badge warning">待审核</span></td><td><div class="action-group"><button class="btn btn-success" onclick="showToast('已通过')">通过</button><button class="btn btn-danger" onclick="showModal('拒绝原因', '<textarea placeholder=\\'请输入拒绝原因\\'>

')">拒绝

王师傅139****5678京B67890圆通速递/上海车队2026-04-28 09:15待审核

张师傅137****9012京C11111申通快递/广州车队2026-04-27 16:45已通过

`, 'driver-list': `

司机姓名

手机号

企业

状态

司机列表

姓名	手机号	车牌号	企业/车队	额度余额	累计加油	状态
张师傅	138****8888	京A12345	中通物流/北京一队	¥5,000	12,345升	正常
赵师傅	139****2222	京B33333	圆通速递/上海车队	¥3,000	8,765升	正常
钱师傅	137****4444	京C55555	申通快递/广州车队	¥0	15,678升	禁用

`, 'driver-detail': `

基本信息

姓名张师傅

手机号138****8888

车牌号京A12345

企业/车队中通物流 / 北京一队

注册时间2026-04-15 10:30

状态已认证

资质证件

📄

驾驶证

📄

行驶证

📄

从业资格证

额度信息

可用额度

¥5,000

总额度 ¥10,000 | 已用 ¥5,000

加油统计

累计加油12,345 升

累计金额¥98,760

加油次数156 次

加油记录

订单号	油站	油品	加油量	金额	时间	状态
DD2026042801	中石化朝阳加油站	92# 汽油	25.48升	¥200.00	2026-04-28 15:30	已完成
DD2026042501	中石油望京加油站	95# 汽油	36.14升	¥302.00	2026-04-25 09:15	已完成

`, 'company': `

企业名称

中通物流

🏢

联系人：王总

电话：010-12345678

司机数量：128人

总额度：¥500,000

圆通速递

🏢

联系人：李总

电话：010-23456789

司机数量：95人

总额度：¥380,000

申通快递

🏢

联系人：赵总

电话：010-34567890

司机数量：86人

总额度：¥320,000

`, 'fleet': `

所属企业

车队名称

车队列表

车队名称	所属企业	负责人	司机数量	总额度	已用额度
北京一队	中通物流	张队长	45人	¥180,000	¥85,600
上海车队	圆通速递	李队长	38人	¥150,000	¥62,300
广州车队	申通快递	王队长	32人	¥120,000	¥45,200

`, 'quota-allocation': `

企业/车队

额度分配记录

企业	车队	分配额度	有效期	分配时间	操作人
中通物流	北京一队	+¥50,000	2026-05-31	2026-04-01 10:00	管理员
圆通速递	上海车队	+¥30,000	2026-05-31	2026-04-01 10:00	管理员
申通快递	广州车队	+¥20,000	2026-05-31	2026-04-01 10:00	管理员

`, 'quota-monitor': `

总分配额度

¥1,200,000

💰

已使用额度

¥456,789

📉

剩余额度

¥743,211

✅

预警企业数

⚠️

额度使用监控

企业/车队	总额度	已用	剩余	使用率	预警状态
中通物流/北京一队	¥180,000	¥85,600	¥94,400	47%	正常
圆通速递/上海车队	¥150,000	¥62,300	¥87,700	41%	正常
申通快递/广州车队	¥120,000	¥108,000	¥12,000	90%	额度不足

`, 'station': `

油站名称

状态

加油站列表

油站名称	地址	营业时间	今日订单	今日营收	状态
中石化朝阳加油站	朝阳区建国路88号	24小时	256单	¥89,500	营业中
中石油望京加油站	望京SOHO T3对面	06:00-23:00	198单	¥68,200	营业中
壳牌中关村加油站	海淀区中关村大街1号	24小时	156单	¥52,800	营业中

`, 'price': `

油站

油品价格管理

油站	92#汽油	95#汽油	98#汽油	0#柴油	更新时间
中石化朝阳加油站	¥7.85	¥8.36	¥9.50	¥7.58	2026-04-28 08:00
中石油望京加油站	¥7.80	¥8.30	-	¥7.55	2026-04-28 08:00
壳牌中关村加油站	¥7.78	¥8.28	¥9.45	-	2026-04-28 08:00

`, 'device': `

油站

加油机关联列表

油站	设备编号	设备名称	状态	最后通讯
中石化朝阳加油站	JYZ-001	1号加油机	在线	2026-04-28 15:30
中石化朝阳加油站	JYZ-002	2号加油机	在线	2026-04-28 15:30
中石油望京加油站	WJ-001	1号加油机	离线	2026-04-28 12:00

`, 'order-list': `

订单号

油站

企业

时间

订单列表

订单号	司机	油站	油品	加油量	金额	支付方式	时间	状态
DD2026042801	张师傅	中石化朝阳加油站	92#汽油	25.48升	¥200.00	企业额度	2026-04-28 15:30	已完成
DD2026042802	李师傅	中石油望京加油站	95#汽油	36.14升	¥302.00	企业额度	2026-04-28 14:20	已完成
DD2026042803	王师傅	壳牌中关村加油站	92#汽油	-	¥356.00	微信支付	2026-04-28 10:15	支付失败

`, 'order-detail': `

订单信息

订单号DD2026042801

下单时间2026-04-28 15:00

加油时间2026-04-28 15:30

支付时间2026-04-28 15:30

订单状态已完成

司机信息

姓名张师傅

手机号138****8888

车牌号京A12345

企业中通物流

加油信息

油站中石化朝阳加油站

油品92# 汽油

单价¥7.85/升

加油量25.48 升

应付金额¥200.00

支付方式企业额度

实付金额¥200.00

`, 'order-exception': `

异常类型

时间

异常订单列表

订单号	司机	油站	金额	异常类型	异常时间	状态	操作
DD2026042803	王师傅	壳牌中关村加油站	¥356.00	支付失败	2026-04-28 10:15	待处理
DD2026042701	赵师傅	中石化朝阳加油站	¥289.50	数据异常	2026-04-27 16:30	待处理

`, 'stats-overview': `

总订单数

125,678

↑ 12.5%

📋

总加油量

4,567,890 升

↑ 8.3%

⛽

总交易金额

¥35,678,900

↑ 15.2%

💰

合作油站数

128

↑ 5 新增

🏪

月度加油趋势

📈

图表展示区域

展示每月订单数、加油量、交易金额趋势

油品销售占比

92# 汽油45%

95# 汽油30%

0# 柴油20%

98# 汽油5%

`, 'stats-company': `

时间范围

企业加油消费排名

排名	企业名称	加油笔数	总加油量	总金额	占比
🥇	中通物流	5,678	189,234 升	¥1,523,456	28.5%
🥈	圆通速递	4,321	145,678 升	¥1,168,920	21.8%
🥉	申通快递	3,456	112,345 升	¥895,600	16.7%
4	韵达快运	2,890	98,765 升	¥768,234	14.3%

`, 'stats-station': `

时间范围

油站营收排名

排名	油站名称	订单数	总加油量	总营收	状态
🥇	中石化朝阳加油站	8,956	298,765 升	¥2,345,678	营业中
🥈	中石油望京加油站	7,234	245,678 升	¥1,892,345	营业中
🥉	壳牌中关村加油站	5,678	189,456 升	¥1,456,789	营业中

`, 'stats-time': `

统计维度

时间范围 -

加油数据趋势

📈

趋势图表展示区域

展示每日/周/月的订单数、加油量、交易金额变化趋势

数据明细

日期	订单数	加油量(升)	交易金额(元)	同比变化
2026-04-28	1,234	45,678	¥356,789	↑ 12.5%
2026-04-27	1,098	40,234	¥315,678	↑ 8.3%
2026-04-26	1,015	37,890	¥298,456	↓ 3.2%

`, 'role': `

角色列表

角色名称	角色描述	用户数	创建时间
超级管理员	拥有系统所有权限	2	2026-01-01
运营主管	负责日常运营管理	5	2026-01-15
财务专员	负责对账结算	3	2026-02-01
客服专员	负责订单查询处理	8	2026-02-15

`, 'log': `

操作人

操作类型

时间

操作日志

操作时间	操作人	操作类型	操作模块	操作内容	IP地址
2026-04-28 15:30:25	管理员	新增	司机管理	审核通过司机：李师傅	192.168.1.100
2026-04-28 15:15:10	管理员	编辑	油站管理	修改油品价格：中石化朝阳加油站92#汽油调整为¥7.85	192.168.1.100
2026-04-28 14:30:45	运营主管	新增	企业管理	新增企业：顺丰速运	192.168.1.105
2026-04-28 14:00:20	管理员	编辑	额度管理	为中通物流北京一队分配额度¥50,000	192.168.1.100

`, 'notify-config': `

消息通知模板

司机审核结果通知

【司机加油系统】尊敬的{姓名}，您的司机注册申请已{审核结果}。

{失败原因}

加油完成通知

【司机加油系统】您已完成加油，加油量{升数}升，金额{金额}元。

额度不足提醒

【司机加油系统】您的加油额度即将用完（剩余不足{百分比}%），请及时联系管理员充值。

`, 'payment-config': `

微信支付

启用微信支付

商户号

API密钥

结算账户

结算周期

`, 'reconcile-station': `

油站

结算周期

平台与油站对账

油站	结算周期	订单数	总加油量	应付金额	状态
中石化朝阳加油站	2026-04(上)	4,568	156,789升	¥1,234,567	待确认
中石油望京加油站	2026-04(上)	3,456	118,234升	¥956,789	已确认
壳牌中关村加油站	2026-04(上)	2,890	98,567升	¥768,234	已结算

`, 'reconcile-company': `

企业

结算周期

平台与企业对账

企业	结算周期	司机数	加油笔数	消费金额	状态
中通物流	2026-04	128	5,678	¥1,523,456	待确认
圆通速递	2026-04	95	4,321	¥1,168,920	已确认
申通快递	2026-04	86	3,456	¥895,600	已结算

`, 'statement': `

对账单号

状态

对账单列表

对账单号	类型	对象	结算周期	金额	状态	生成时间
DZ202604001	油站对账	中石化朝阳加油站	2026-04(上)	¥1,234,567	待确认	2026-04-15 10:00
DZ202604002	企业对账	中通物流	2026-04	¥1,523,456	待确认	2026-04-15 10:00
DZ202604003	企业对账	圆通速递	2026-04	¥1,168,920	已确认	2026-04-15 10:00

`, 'settlement': `

结算单号

时间

结算记录

结算单号	结算对象	结算金额	结算周期	结算时间	状态
JS202603001	壳牌中关村加油站	¥768,234	2026-03(下)	2026-04-05 15:30	已结算
JS202603002	申通快递	¥895,600	2026-03	2026-04-05 15:30	已结算
JS202603003	中石油望京加油站	¥956,789	2026-03(下)	2026-04-05 15:30	已结算

` }; content.innerHTML = pages[pageId] || '

页面加载中...

'; } // 弹窗 function showModal(title, body) { document.getElementById('modal-title').textContent = title; document.getElementById('modal-body').innerHTML = body; document.getElementById('modal').classList.add('show'); } function closeModal() { document.getElementById('modal').classList.remove('show'); } function confirmModal() { showToast('操作成功'); closeModal(); } // Toast function showToast(message) { const existingToast = document.querySelector('.toast'); if (existingToast) existingToast.remove(); const toast = document.createElement('div'); toast.className = 'toast'; toast.textContent = message; document.body.appendChild(toast); setTimeout(() => toast.remove(), 2000); } // 初始化 document.addEventListener('DOMContentLoaded', function() { renderPage('dashboard'); });