编辑页面

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, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; background: #f5f7fa; min-height: 100vh; }
        
        /* 顶部导航 */
        .header { background: linear-gradient(135deg, #1a73e8 0%, #0d47a1 100%); color: white; padding: 0 24px; height: 64px; display: flex; align-items: center; justify-content: space-between; box-shadow: 0 2px 8px rgba(0,0,0,0.15); position: fixed; top: 0; left: 0; right: 0; z-index: 1000; }
        .header-left { display: flex; align-items: center; gap: 16px; }
        .logo { font-size: 20px; font-weight: 700; letter-spacing: 1px; }
        .header-nav { display: flex; gap: 8px; }
        .header-nav a { color: rgba(255,255,255,0.85); text-decoration: none; padding: 8px 16px; border-radius: 6px; transition: all 0.2s; }
        .header-nav a:hover, .header-nav a.active { background: rgba(255,255,255,0.2); color: white; }
        .header-right { display: flex; align-items: center; gap: 16px; }
        .header-right span { font-size: 14px; opacity: 0.9; }
        .user-avatar { width: 36px; height: 36px; background: rgba(255,255,255,0.3); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; cursor: pointer; }
        
        /* 主布局 */
        .main-container { display: flex; margin-top: 64px; min-height: calc(100vh - 64px); }
        
        /* 左侧菜单 */
        .sidebar { width: 240px; background: white; border-right: 1px solid #e8ecf1; position: fixed; top: 64px; left: 0; bottom: 0; overflow-y: auto; }
        .menu-item { border-bottom: 1px solid #f0f2f5; }
        .menu-title { padding: 14px 20px; font-size: 14px; font-weight: 600; color: #1f2329; cursor: pointer; display: flex; align-items: center; justify-content: space-between; transition: all 0.2s; }
        .menu-title:hover { background: #f5f7fa; }
        .menu-title.active { color: #1a73e8; background: #e8f0fe; }
        .menu-title .arrow { transition: transform 0.2s; font-size: 12px; }
        .menu-title.active .arrow { transform: rotate(180deg); }
        .submenu { display: none; background: #fafbfc; }
        .submenu.show { display: block; }
        .submenu-item { padding: 10px 20px 10px 40px; font-size: 13px; color: #586374; cursor: pointer; transition: all 0.2s; border-left: 3px solid transparent; }
        .submenu-item:hover { background: #f0f4ff; color: #1a73e8; border-left-color: #1a73e8; }
        .submenu-item.active { background: #e8f0fe; color: #1a73e8; border-left-color: #1a73e8; font-weight: 500; }
        
        /* 主内容区 */
        .content { flex: 1; margin-left: 240px; padding: 24px; }
        
        /* 面包屑 */
        .breadcrumb { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; font-size: 13px; color: #7a8599; }
        .breadcrumb span { cursor: pointer; }
        .breadcrumb span:hover { color: #1a73e8; }
        .breadcrumb .current { color: #1f2329; font-weight: 500; cursor: default; }
        
        /* 页面标题 */
        .page-title { font-size: 22px; font-weight: 600; color: #1f2329; margin-bottom: 24px; }
        
        /* 统计卡片 */
        .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 24px; }
        .stat-card { background: white; border-radius: 12px; padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); transition: all 0.3s; cursor: pointer; }
        .stat-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.12); }
        .stat-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
        .stat-card-icon { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 20px; }
        .stat-card-icon.blue { background: #e8f0fe; color: #1a73e8; }
        .stat-card-icon.green { background: #e8f5e9; color: #43a047; }
        .stat-card-icon.orange { background: #fff3e0; color: #fb8c00; }
        .stat-card-icon.purple { background: #f3e5f5; color: #8e24aa; }
        .stat-card-trend { font-size: 12px; padding: 2px 8px; border-radius: 4px; }
        .stat-card-trend.up { background: #e8f5e9; color: #43a047; }
        .stat-card-trend.down { background: #ffebee; color: #e53935; }
        .stat-card-value { font-size: 28px; font-weight: 700; color: #1f2329; margin-bottom: 4px; }
        .stat-card-label { font-size: 13px; color: #7a8599; }
        
        /* 内容卡片 */
        .card { background: white; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); margin-bottom: 20px; }
        .card-header { padding: 16px 20px; border-bottom: 1px solid #f0f2f5; display: flex; align-items: center; justify-content: space-between; }
        .card-title { font-size: 16px; font-weight: 600; color: #1f2329; }
        .card-body { padding: 20px; }
        
        /* 标签页 */
        .tabs { display: flex; gap: 4px; border-bottom: 1px solid #e8ecf1; padding: 0 20px; }
        .tab { padding: 12px 20px; font-size: 14px; color: #586374; cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.2s; }
        .tab:hover { color: #1a73e8; }
        .tab.active { color: #1a73e8; border-bottom-color: #1a73e8; font-weight: 500; }
        
        /* 表格 */
        .table-wrapper { overflow-x: auto; }
        table { width: 100%; border-collapse: collapse; }
        th { background: #fafbfc; padding: 12px 16px; text-align: left; font-size: 13px; font-weight: 600; color: #586374; border-bottom: 1px solid #e8ecf1; }
        td { padding: 14px 16px; font-size: 14px; color: #1f2329; border-bottom: 1px solid #f0f2f5; }
        tr:hover td { background: #fafbfc; }
        .status { display: inline-block; padding: 4px 10px; border-radius: 4px; font-size: 12px; font-weight: 500; }
        .status.pending { background: #fff3e0; color: #fb8c00; }
        .status.approved { background: #e8f5e9; color: #43a047; }
        .status.rejected { background: #ffebee; color: #e53935; }
        .status.draft { background: #e8ecf1; color: #586374; }
        
        /* 按钮 */
        .btn { padding: 8px 16px; border-radius: 6px; font-size: 13px; font-weight: 500; cursor: pointer; border: none; transition: all 0.2s; }
        .btn-primary { background: #1a73e8; color: white; }
        .btn-primary:hover { background: #1557b0; }
        .btn-secondary { background: #f0f2f5; color: #586374; }
        .btn-secondary:hover { background: #e8ecf1; }
        .btn-text { background: none; color: #1a73e8; padding: 4px 8px; }
        .btn-text:hover { background: #e8f0fe; }
        
        /* 表单元素 */
        .search-bar { display: flex; gap: 12px; margin-bottom: 20px; }
        .search-input { flex: 1; max-width: 300px; padding: 10px 14px; border: 1px solid #e8ecf1; border-radius: 8px; font-size: 14px; outline: none; transition: border-color 0.2s; }
        .search-input:focus { border-color: #1a73e8; }
        .filter-select { padding: 10px 14px; border: 1px solid #e8ecf1; border-radius: 8px; font-size: 14px; outline: none; min-width: 140px; cursor: pointer; }
        
        /* 图表区域 */
        .chart-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
        .chart-placeholder { background: linear-gradient(135deg, #f8fafc 0%, #f0f4f8 100%); border: 1px dashed #d0d7de; border-radius: 8px; height: 280px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #7a8599; }
        .chart-placeholder-icon { font-size: 48px; margin-bottom: 12px; opacity: 0.5; }
        .chart-placeholder-text { font-size: 14px; }
        
        /* 快捷操作 */
        .quick-actions { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
        .quick-action { background: white; border-radius: 12px; padding: 20px; text-align: center; cursor: pointer; transition: all 0.3s; border: 1px solid #f0f2f5; }
        .quick-action:hover { border-color: #1a73e8; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(26,115,232,0.15); }
        .quick-action-icon { width: 48px; height: 48px; background: #e8f0fe; border-radius: 12px; margin: 0 auto 12px; display: flex; align-items: center; justify-content: center; font-size: 22px; }
        .quick-action-label { font-size: 13px; font-weight: 500; color: #1f2329; }
        
        /* 待审批列表 */
        .approval-item { display: flex; align-items: center; padding: 16px 0; border-bottom: 1px solid #f0f2f5; }
        .approval-item:last-child { border-bottom: none; }
        .approval-icon { width: 40px; height: 40px; background: #fff3e0; border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-right: 14px; font-size: 18px; }
        .approval-content { flex: 1; }
        .approval-title { font-size: 14px; font-weight: 500; color: #1f2329; margin-bottom: 4px; }
        .approval-meta { font-size: 12px; color: #7a8599; }
        .approval-actions { display: flex; gap: 8px; }
        
        /* 列表项 */
        .list-item { display: flex; align-items: center; padding: 14px 0; border-bottom: 1px solid #f0f2f5; cursor: pointer; transition: all 0.2s; }
        .list-item:hover { background: #fafbfc; margin: 0 -20px; padding-left: 20px; padding-right: 20px; }
        .list-item:last-child { border-bottom: none; }
        .list-item-icon { width: 36px; height: 36px; background: #f0f4f8; border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-right: 12px; font-size: 16px; }
        .list-item-content { flex: 1; }
        .list-item-title { font-size: 14px; font-weight: 500; color: #1f2329; }
        .list-item-desc { font-size: 12px; color: #7a8599; margin-top: 2px; }
        
        /* 分页 */
        .pagination { display: flex; align-items: center; justify-content: space-between; margin-top: 20px; }
        .pagination-info { font-size: 13px; color: #7a8599; }
        .pagination-controls { display: flex; gap: 4px; }
        .pagination-btn { width: 32px; height: 32px; border: 1px solid #e8ecf1; border-radius: 6px; background: white; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 13px; color: #586374; transition: all 0.2s; }
        .pagination-btn:hover { border-color: #1a73e8; color: #1a73e8; }
        .pagination-btn.active { background: #1a73e8; color: white; border-color: #1a73e8; }
        
        /* 模态框 */
        .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: 2000; }
        .modal-overlay.show { display: flex; }
        .modal { background: white; border-radius: 16px; width: 90%; max-width: 600px; max-height: 80vh; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.3); }
        .modal-header { padding: 20px 24px; border-bottom: 1px solid #f0f2f5; display: flex; align-items: center; justify-content: space-between; }
        .modal-title { font-size: 18px; font-weight: 600; color: #1f2329; }
        .modal-close { width: 32px; height: 32px; border-radius: 8px; background: #f5f7fa; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 18px; color: #586374; transition: all 0.2s; }
        .modal-close:hover { background: #ffebee; color: #e53935; }
        .modal-body { padding: 24px; overflow-y: auto; max-height: calc(80vh - 130px); }
        .modal-footer { padding: 16px 24px; border-top: 1px solid #f0f2f5; display: flex; justify-content: flex-end; gap: 12px; }
        
        /* 表单 */
        .form-group { margin-bottom: 20px; }
        .form-label { display: block; font-size: 13px; font-weight: 500; color: #586374; margin-bottom: 8px; }
        .form-input { width: 100%; padding: 10px 14px; border: 1px solid #e8ecf1; border-radius: 8px; font-size: 14px; outline: none; transition: border-color 0.2s; }
        .form-input:focus { border-color: #1a73e8; }
        .form-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
        
        /* 功能详情页 */
        .feature-page { display: none; }
        .feature-page.active { display: block; }
        
        /* 切换动画 */
        .fade-in { animation: fadeIn 0.3s ease; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
        
        /* 响应式 */
        @media (max-width: 1200px) {
            .stats-grid { grid-template-columns: repeat(2, 1fr); }
            .chart-grid { grid-template-columns: 1fr; }
            .quick-actions { grid-template-columns: repeat(3, 1fr); }
        }
    </style>
</head>
<body>
    <!-- 顶部导航 -->
    <header class="header">
        <div class="header-left">
            <div class="logo">药企数据管理平台</div>
            <nav class="header-nav">
                <a href="#" class="active" onclick="showPage('dashboard')">工作台</a>
                <a href="#" onclick="showPage('drugManage')">药品管理</a>
                <a href="#" onclick="showPage('salesManage')">销售管理</a>
                <a href="#" onclick="showPage('inventoryManage')">库存管理</a>
                <a href="#" onclick="showPage('statistics')">数据统计</a>
                <a href="#" onclick="showPage('system')">系统设置</a>
            </nav>
        </div>
        <div class="header-right">
            <span>2026年5月12日 15:56</span>
            <div class="user-avatar" onclick="showModal('profileModal')">管</div>
        </div>
    </header>

    <!-- 主容器 -->
    <div class="main-container">
        <!-- 左侧菜单 -->
        <aside class="sidebar">
            <div class="menu-item">
                <div class="menu-title active" onclick="toggleSubmenu(this)">
                    <span>工作台</span>
                    <span class="arrow">▼</span>
                </div>
                <div class="submenu show">
                    <div class="submenu-item active" onclick="showPage('dashboard')">管理概览</div>
                    <div class="submenu-item" onclick="showPage('approval')">待审批</div>
                    <div class="submenu-item" onclick="showPage('quickAction')">快捷操作</div>
                </div>
            </div>
            <div class="menu-item">
                <div class="menu-title" onclick="toggleSubmenu(this)">
                    <span>基础数据</span>
                    <span class="arrow">▼</span>
                </div>
                <div class="submenu">
                    <div class="submenu-item" onclick="showPage('dictManage')">字典管理</div>
                    <div class="submenu-item" onclick="showPage('categoryManage')">分类管理</div>
                    <div class="submenu-item" onclick="showPage('templateManage')">模板管理</div>
                </div>
            </div>
            <div class="menu-item">
                <div class="menu-title" onclick="toggleSubmenu(this)">
                    <span>数据管理</span>
                    <span class="arrow">▼</span>
                </div>
                <div class="submenu">
                    <div class="submenu-item" onclick="showPage('dataReview')">数据审核</div>
                    <div class="submenu-item" onclick="showPage('dataEdit')">数据修改</div>
                    <div class="submenu-item" onclick="showPage('dataDelete')">数据删除</div>
                </div>
            </div>
            <div class="menu-item">
                <div class="menu-title" onclick="toggleSubmenu(this)">
                    <span>药品管理</span>
                    <span class="arrow">▼</span>
                </div>
                <div class="submenu">
                    <div class="submenu-item" onclick="showPage('drugLib')">药品库管理</div>
                    <div class="submenu-item" onclick="showPage('drugCategoryReview')">分类审核</div>
                </div>
            </div>
            <div class="menu-item">
                <div class="menu-title" onclick="toggleSubmenu(this)">
                    <span>销售管理</span>
                    <span class="arrow">▼</span>
                </div>
                <div class="submenu">
                    <div class="submenu-item" onclick="showPage('salesControl')">销售管控</div>
                    <div class="submenu-item" onclick="showPage('channelManage')">渠道管理</div>
                </div>
            </div>
            <div class="menu-item">
                <div class="menu-title" onclick="toggleSubmenu(this)">
                    <span>库存管理</span>
                    <span class="arrow">▼</span>
                </div>
                <div class="submenu">
                    <div class="submenu-item" onclick="showPage('warehouseManage')">仓库管理</div>
                    <div class="submenu-item" onclick="showPage('inventoryTransfer')">库存调拨</div>
                </div>
            </div>
            <div class="menu-item">
                <div class="menu-title" onclick="toggleSubmenu(this)">
                    <span>研发管理</span>
                    <span class="arrow">▼</span>
                </div>
                <div class="submenu">
                    <div class="submenu-item" onclick="showPage('rdControl')">研发管控</div>
                    <div class="submenu-item" onclick="showPage('achievementManage')">成果管理</div>
                </div>
            </div>
            <div class="menu-item">
                <div class="menu-title" onclick="toggleSubmenu(this)">
                    <span>数据统计</span>
                    <span class="arrow">▼</span>
                </div>
                <div class="submenu">
                    <div class="submenu-item" onclick="showPage('operationStats')">运营统计</div>
                    <div class="submenu-item" onclick="showPage('performanceReport')">业绩报表</div>
                </div>
            </div>
            <div class="menu-item">
                <div class="menu-title" onclick="toggleSubmenu(this)">
                    <span>数据可视化</span>
                    <span class="arrow">▼</span>
                </div>
                <div class="submenu">
                    <div class="submenu-item" onclick="showPage('monitorScreen')">监控大屏</div>
                    <div class="submenu-item" onclick="showPage('topicAnalysis')">专题分析</div>
                </div>
            </div>
            <div class="menu-item">
                <div class="menu-title" onclick="toggleSubmenu(this)">
                    <span>预警配置</span>
                    <span class="arrow">▼</span>
                </div>
                <div class="submenu">
                    <div class="submenu-item" onclick="showPage('alertManage')">预警管理</div>
                    <div class="submenu-item" onclick="showPage('alertMonitor')">预警监控</div>
                </div>
            </div>
            <div class="menu-item">
                <div class="menu-title" onclick="toggleSubmenu(this)">
                    <span>用户管理</span>
                    <span class="arrow">▼</span>
                </div>
                <div class="submenu">
                    <div class="submenu-item" onclick="showPage('userManage')">用户管理</div>
                    <div class="submenu-item" onclick="showPage('rolePermission')">角色权限</div>
                    <div class="submenu-item" onclick="showPage('deptManage')">部门管理</div>
                </div>
            </div>
            <div class="menu-item">
                <div class="menu-title" onclick="toggleSubmenu(this)">
                    <span>系统设置</span>
                    <span class="arrow">▼</span>
                </div>
                <div class="submenu">
                    <div class="submenu-item" onclick="showPage('paramConfig')">参数配置</div>
                    <div class="submenu-item" onclick="showPage('logAudit')">日志审计</div>
                    <div class="submenu-item" onclick="showPage('dataBackup')">数据备份</div>
                </div>
            </div>
        </aside>

        <!-- 主内容区 -->
        <main class="content">
            <!-- 管理概览页面 -->
            <div id="page-dashboard" class="feature-page active">
                <div class="breadcrumb">
                    <span onclick="showPage('dashboard')">工作台</span> / <span class="current">管理概览</span>
                </div>
                <h1 class="page-title">管理概览</h1>
                
                <!-- 统计卡片 -->
                <div class="stats-grid">
                    <div class="stat-card" onclick="showPage('drugLib')">
                        <div class="stat-card-header">
                            <div class="stat-card-icon blue">📦</div>
                            <span class="stat-card-trend up">↑ 12%</span>
                        </div>
                        <div class="stat-card-value">3,856</div>
                        <div class="stat-card-label">药品总数</div>
                    </div>
                    <div class="stat-card" onclick="showPage('salesControl')">
                        <div class="stat-card-header">
                            <div class="stat-card-icon green">📊</div>
                            <span class="stat-card-trend up">↑ 8.5%</span>
                        </div>
                        <div class="stat-card-value">¥2.85M</div>
                        <div class="stat-card-label">本月销售额</div>
                    </div>
                    <div class="stat-card" onclick="showPage('approval')">
                        <div class="stat-card-header">
                            <div class="stat-card-icon orange">⏳</div>
                            <span class="stat-card-trend down">↓ 3</span>
                        </div>
                        <div class="stat-card-value">18</div>
                        <div class="stat-card-label">待审批项</div>
                    </div>
                    <div class="stat-card" onclick="showPage('alertMonitor')">
                        <div class="stat-card-header">
                            <div class="stat-card-icon purple">🔔</div>
                            <span class="stat-card-trend down">↓ 5</span>
                        </div>
                        <div class="stat-card-value">7</div>
                        <div class="stat-card-label">预警提醒</div>
                    </div>
                </div>

                <!-- 待审批 -->
                <div class="card">
                    <div class="card-header">
                        <span class="card-title">待审批事项</span>
                        <button class="btn btn-text" onclick="showPage('approval')">查看全部 →</button>
                    </div>
                    <div class="card-body">
                        <div class="approval-item">
                            <div class="approval-icon">💊</div>
                            <div class="approval-content">
                                <div class="approval-title">新药品"阿莫西林胶囊"待审核</div>
                                <div class="approval-meta">提交人：张三 | 提交时间：2026-05-12 14:30</div>
                            </div>
                            <div class="approval-actions">
                                <button class="btn btn-primary" onclick="showModal('approveModal')">审批</button>
                            </div>
                        </div>
                        <div class="approval-item">
                            <div class="approval-icon">📋</div>
                            <div class="approval-content">
                                <div class="approval-title">销售数据批量导入待审核</div>
                                <div class="approval-meta">提交人：李四 | 提交时间：2026-05-12 11:20</div>
                            </div>
                            <div class="approval-actions">
                                <button class="btn btn-primary" onclick="showModal('approveModal')">审批</button>
                            </div>
                        </div>
                        <div class="approval-item">
                            <div class="approval-icon">🔄</div>
                            <div class="approval-content">
                                <div class="approval-title">库存调拨申请（仓库A→仓库B）</div>
                                <div class="approval-meta">提交人：王五 | 提交时间：2026-05-12 09:45</div>
                            </div>
                            <div class="approval-actions">
                                <button class="btn btn-primary" onclick="showModal('approveModal')">审批</button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 图表区域 -->
                <div class="chart-grid">
                    <div class="card">
                        <div class="card-header">
                            <span class="card-title">销售趋势</span>
                        </div>
                        <div class="card-body">
                            <div class="chart-placeholder">
                                <div class="chart-placeholder-icon">📈</div>
                                <div class="chart-placeholder-text">销售数据趋势图</div>
                                <div style="font-size: 12px; margin-top: 8px; color: #aaa;">近30天销售数据可视化</div>
                            </div>
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-header">
                            <span class="card-title">库存状态</span>
                        </div>
                        <div class="card-body">
                            <div class="chart-placeholder">
                                <div class="chart-placeholder-icon">📊</div>
                                <div class="chart-placeholder-text">库存分布统计图</div>
                                <div style="font-size: 12px; margin-top: 8px; color: #aaa;">各仓库库存占比分析</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 待审批页面 -->
            <div id="page-approval" class="feature-page">
                <div class="breadcrumb">
                    <span onclick="showPage('dashboard')">工作台</span> / <span class="current">待审批</span>
                </div>
                <h1 class="page-title">待审批</h1>
                
                <div class="search-bar">
                    <input type="text" class="search-input" placeholder="搜索待审批事项...">
                    <select class="filter-select">
                        <option>全部类型</option>
                        <option>药品审核</option>
                        <option>销售审核</option>
                        <option>调拨审核</option>
                    </select>
                    <select class="filter-select">
                        <option>全部状态</option>
                        <option>待审批</option>
                        <option>已通过</option>
                        <option>已驳回</option>
                    </select>
                </div>

                <div class="card">
                    <div class="card-body">
                        <div class="table-wrapper">
                            <table>
                                <thead>
                                    <tr>
                                        <th>类型</th>
                                        <th>申请内容</th>
                                        <th>提交人</th>
                                        <th>提交时间</th>
                                        <th>状态</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>💊 药品</td>
                                        <td>新药品"阿莫西林胶囊"待审核</td>
                                        <td>张三</td>
                                        <td>2026-05-12 14:30</td>
                                        <td><span class="status pending">待审批</span></td>
                                        <td>
                                            <button class="btn btn-primary" onclick="showModal('approveModal')">审批</button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>📋 数据</td>
                                        <td>销售数据批量导入（共128条）</td>
                                        <td>李四</td>
                                        <td>2026-05-12 11:20</td>
                                        <td><span class="status pending">待审批</span></td>
<td>
                                            <button class="btn btn-primary" onclick="showModal('approveModal')">审批</button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>🔄 调拨</td>
                                        <td>库存调拨申请（仓库A→仓库B）</td>
                                        <td>王五</td>
                                        <td>2026-05-12 09:45</td>
                                        <td><span class="status pending">待审批</span></td>
                                        <td>
                                            <button class="btn btn-primary" onclick="showModal('approveModal')">审批</button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>💊 药品</td>
                                        <td>药品分类调整申请</td>
                                        <td>赵六</td>
                                        <td>2026-05-11 16:30</td>
                                        <td><span class="status approved">已通过</span></td>
                                        <td>
                                            <button class="btn btn-text">查看</button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>📋 数据</td>
                                        <td>历史数据修改申请</td>
                                        <td>孙七</td>
                                        <td>2026-05-11 14:00</td>
                                        <td><span class="status rejected">已驳回</span></td>
                                        <td>
                                            <button class="btn btn-text">查看</button>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="pagination">
                            <div class="pagination-info">显示 1-5 共 18 条</div>
                            <div class="pagination-controls">
                                <button class="pagination-btn">«</button>
                                <button class="pagination-btn">‹</button>
                                <button class="pagination-btn active">1</button>
                                <button class="pagination-btn">2</button>
                                <button class="pagination-btn">3</button>
                                <button class="pagination-btn">›</button>
                                <button class="pagination-btn">»</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 快捷操作页面 -->
            <div id="page-quickAction" class="feature-page">
                <div class="breadcrumb">
                    <span onclick="showPage('dashboard')">工作台</span> / <span class="current">快捷操作</span>
                </div>
                <h1 class="page-title">快捷操作</h1>
                
                <div class="card">
                    <div class="card-body">
                        <div class="quick-actions">
                            <div class="quick-action" onclick="showModal('addDrugModal')">
                                <div class="quick-action-icon">💊</div>
                                <div class="quick-action-label">新增药品</div>
                            </div>
                            <div class="quick-action" onclick="showModal('importDataModal')">
                                <div class="quick-action-icon">📥</div>
                                <div class="quick-action-label">数据导入</div>
                            </div>
                            <div class="quick-action" onclick="showPage('dataReview')">
                                <div class="quick-action-icon">✅</div>
                                <div class="quick-action-label">数据审核</div>
                            </div>
                            <div class="quick-action" onclick="showModal('exportReportModal')">
                                <div class="quick-action-icon">📤</div>
                                <div class="quick-action-label">导出报表</div>
                            </div>
                            <div class="quick-action" onclick="showPage('alertManage')">
                                <div class="quick-action-icon">🔔</div>
                                <div class="quick-action-label">预警设置</div>
                            </div>
                            <div class="quick-action" onclick="showPage('drugLib')">
                                <div class="quick-action-icon">📦</div>
                                <div class="quick-action-label">药品库</div>
                            </div>
                            <div class="quick-action" onclick="showPage('warehouseManage')">
                                <div class="quick-action-icon">🏭</div>
                                <div class="quick-action-label">仓库管理</div>
                            </div>
                            <div class="quick-action" onclick="showPage('userManage')">
                                <div class="quick-action-icon">👥</div>
                                <div class="quick-action-label">用户管理</div>
                            </div>
                            <div class="quick-action" onclick="showPage('logAudit')">
                                <div class="quick-action-icon">📋</div>
                                <div class="quick-action-label">日志审计</div>
                            </div>
                            <div class="quick-action" onclick="showPage('monitorScreen')">
                                <div class="quick-action-icon">📺</div>
                                <div class="quick-action-label">监控大屏</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 药品库管理页面 -->
            <div id="page-drugLib" class="feature-page">
                <div class="breadcrumb">
                    <span onclick="showPage('dashboard')">工作台</span> / <span class="current">药品库管理</span>
                </div>
                <h1 class="page-title">药品库管理</h1>
                
                <div class="search-bar">
                    <input type="text" class="search-input" placeholder="搜索药品名称、编码...">
                    <select class="filter-select">
                        <option>全部分类</option>
                        <option>西药</option>
                        <option>中药</option>
                        <option>生物制品</option>
                    </select>
                    <button class="btn btn-primary" onclick="showModal('addDrugModal')">+ 新增药品</button>
                </div>

                <div class="card">
                    <div class="card-body">
                        <div class="table-wrapper">
                            <table>
                                <thead>
                                    <tr>
                                        <th>药品编码</th>
                                        <th>药品名称</th>
                                        <th>分类</th>
                                        <th>规格</th>
                                        <th>单位</th>
                                        <th>状态</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>YP001</td>
                                        <td>阿莫西林胶囊</td>
                                        <td>西药</td>
                                        <td>0.25g×24粒</td>
                                        <td>盒</td>
                                        <td><span class="status approved">正常</span></td>
                                        <td>
                                            <button class="btn btn-text">编辑</button>
                                            <button class="btn btn-text">详情</button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>YP002</td>
                                        <td>布洛芬缓释胶囊</td>
                                        <td>西药</td>
                                        <td>0.3g×20粒</td>
                                        <td>盒</td>
                                        <td><span class="status approved">正常</span></td>
                                        <td>
                                            <button class="btn btn-text">编辑</button>
                                            <button class="btn btn-text">详情</button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>YP003</td>
                                        <td>复方感冒灵颗粒</td>
                                        <td>中药</td>
                                        <td>10g×9袋</td>
                                        <td>盒</td>
                                        <td><span class="status draft">草稿</span></td>
                                        <td>
                                            <button class="btn btn-text">编辑</button>
                                            <button class="btn btn-text">详情</button>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="pagination">
                            <div class="pagination-info">显示 1-3 共 3856 条</div>
                            <div class="pagination-controls">
                                <button class="pagination-btn">«</button>
                                <button class="pagination-btn">‹</button>
                                <button class="pagination-btn active">1</button>
                                <button class="pagination-btn">2</button>
                                <button class="pagination-btn">3</button>
                                <button class="pagination-btn">›</button>
                                <button class="pagination-btn">»</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 销售管控页面 -->
            <div id="page-salesControl" class="feature-page">
                <div class="breadcrumb">
                    <span onclick="showPage('dashboard')">工作台</span> / <span class="current">销售管控</span>
                </div>
                <h1 class="page-title">销售管控</h1>
                
                <div class="stats-grid" style="grid-template-columns: repeat(3, 1fr);">
                    <div class="stat-card">
                        <div class="stat-card-value">¥2.85M</div>
                        <div class="stat-card-label">本月销售额</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-card-value">1,256</div>
                        <div class="stat-card-label">订单数量</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-card-value">¥2,270</div>
                        <div class="stat-card-label">客单价</div>
                    </div>
                </div>

                <div class="card">
                    <div class="tabs">
                        <div class="tab active">销售明细</div>
                        <div class="tab">价格管控</div>
                        <div class="tab">销售趋势</div>
                    </div>
                    <div class="card-body">
                        <div class="table-wrapper">
                            <table>
                                <thead>
                                    <tr>
                                        <th>订单编号</th>
                                        <th>客户名称</th>
                                        <th>药品</th>
                                        <th>数量</th>
                                        <th>金额</th>
                                        <th>下单时间</th>
                                        <th>状态</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>DD20260512001</td>
                                        <td>某某医药公司</td>
                                        <td>阿莫西林胶囊</td>
                                        <td>500</td>
                                        <td>¥15,000</td>
                                        <td>2026-05-12 10:30</td>
                                        <td><span class="status approved">已完成</span></td>
                                    </tr>
                                    <tr>
                                        <td>DD20260512002</td>
                                        <td>某某药店</td>
                                        <td>布洛芬缓释胶囊</td>
                                        <td>300</td>
                                        <td>¥9,000</td>
                                        <td>2026-05-12 09:15</td>
                                        <td><span class="status pending">处理中</span></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 仓库管理页面 -->
            <div id="page-warehouseManage" class="feature-page">
                <div class="breadcrumb">
                    <span onclick="showPage('dashboard')">工作台</span> / <span class="current">仓库管理</span>
                </div>
                <h1 class="page-title">仓库管理</h1>
                
                <div class="card">
                    <div class="card-header">
                        <span class="card-title">仓库列表</span>
                        <button class="btn btn-primary" onclick="showModal('addWarehouseModal')">+ 新增仓库</button>
                    </div>
                    <div class="card-body">
                        <div class="table-wrapper">
                            <table>
                                <thead>
                                    <tr>
                                        <th>仓库编码</th>
                                        <th>仓库名称</th>
                                        <th>地址</th>
                                        <th>库位数</th>
                                        <th>当前库存</th>
                                        <th>状态</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>CK001</td>
                                        <td>中心仓库A区</td>
                                        <td>北京市朝阳区xx路xx号</td>
                                        <td>1,256</td>
                                        <td>38,520</td>
                                        <td><span class="status approved">正常</span></td>
                                        <td>
                                            <button class="btn btn-text">编辑</button>
                                            <button class="btn btn-text">库位</button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>CK002</td>
                                        <td>中心仓库B区</td>
                                        <td>北京市朝阳区xx路xx号</td>
                                        <td>1,024</td>
                                        <td>25,680</td>
                                        <td><span class="status approved">正常</span></td>
                                        <td>
                                            <button class="btn btn-text">编辑</button>
                                            <button class="btn btn-text">库位</button>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 运营统计页面 -->
            <div id="page-operationStats" class="feature-page">
                <div class="breadcrumb">
                    <span onclick="showPage('dashboard')">工作台</span> / <span class="current">运营统计</span>
                </div>
                <h1 class="page-title">运营统计</h1>
                
                <div class="stats-grid">
                    <div class="stat-card">
                        <div class="stat-card-header">
                            <div class="stat-card-icon blue">💰</div>
                            <span class="stat-card-trend up">↑ 15%</span>
                        </div>
                        <div class="stat-card-value">¥12.5M</div>
                        <div class="stat-card-label">本季度营收</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-card-header">
                            <div class="stat-card-icon green">📦</div>
                            <span class="stat-card-trend up">↑ 8%</span>
                        </div>
                        <div class="stat-card-value">45,200</div>
                        <div class="stat-card-label">药品流转量</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-card-header">
                            <div class="stat-card-icon orange">⏱️</div>
                            <span class="stat-card-trend down">↓ 2天</span>
                        </div>
                        <div class="stat-card-value">18天</div>
                        <div class="stat-card-label">平均库存周转</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-card-icon purple">👥</div>
                        <div class="stat-card-value">1,258</div>
                        <div class="stat-card-label">活跃客户数</div>
                    </div>
                </div>

                <div class="chart-grid">
                    <div class="card">
                        <div class="card-header">
                            <span class="card-title">月度营收趋势</span>
                        </div>
                        <div class="card-body">
                            <div class="chart-placeholder">
                                <div class="chart-placeholder-icon">📈</div>
                                <div class="chart-placeholder-text">月度营收折线图</div>
                            </div>
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-header">
                            <span class="card-title">品类销售占比</span>
                        </div>
                        <div class="card-body">
                            <div class="chart-placeholder">
                                <div class="chart-placeholder-icon">🥧</div>
                                <div class="chart-placeholder-text">品类销售饼图</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 用户管理页面 -->
            <div id="page-userManage" class="feature-page">
                <div class="breadcrumb">
                    <span onclick="showPage('dashboard')">工作台</span> / <span class="current">用户管理</span>
                </div>
                <h1 class="page-title">用户管理</h1>
                
                <div class="search-bar">
                    <input type="text" class="search-input" placeholder="搜索用户姓名、账号...">
                    <select class="filter-select">
                        <option>全部角色</option>
                        <option>管理员</option>
                        <option>审核员</option>
                        <option>普通用户</option>
                    </select>
                    <button class="btn btn-primary" onclick="showModal('addUserModal')">+ 新增用户</button>
                </div>

                <div class="card">
                    <div class="card-body">
                        <div class="table-wrapper">
                            <table>
                                <thead>
                                    <tr>
                                        <th>账号</th>
                                        <th>姓名</th>
                                        <th>角色</th>
                                        <th>部门</th>
                                        <th>手机</th>
                                        <th>状态</th>
                                        <th>最后登录</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>admin</td>
                                        <td>管理员</td>
                                        <td>管理员</td>
                                        <td>综合管理部</td>
                                        <td>138****8888</td>
                                        <td><span class="status approved">正常</span></td>
                                        <td>2026-05-12 15:30</td>
                                        <td>
                                            <button class="btn btn-text">编辑</button>
                                            <button class="btn btn-text">禁用</button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>zhangsan</td>
                                        <td>张三</td>
                                        <td>审核员</td>
                                        <td>质量管理部</td>
                                        <td>139****1234</td>
                                        <td><span class="status approved">正常</span></td>
                                        <td>2026-05-12 14:20</td>
                                        <td>
                                            <button class="btn btn-text">编辑</button>
                                            <button class="btn btn-text">禁用</button>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 监控大屏页面 -->
            <div id="page-monitorScreen" class="feature-page">
                <div class="breadcrumb">
                    <span onclick="showPage('dashboard')">工作台</span> / <span class="current">监控大屏</span>
                </div>
                <h1 class="page-title">监控大屏</h1>
                
                <div class="card" style="background: linear-gradient(135deg, #1a237e 0%, #0d47a1 100%); color: white; min-height: 500px;">
                    <div class="card-body" style="display: flex; flex-direction: column; align-items: center; justify-content: center;">
                        <div style="font-size: 64px; margin-bottom: 20px;">📺</div>
                        <h2 style="font-size: 24px; margin-bottom: 12px;">数据监控大屏</h2>
                        <p style="opacity: 0.8; font-size: 14px;">实时展示全局运营数据，包括销售、库存、预警等关键指标</p>
                        <div style="margin-top: 30px; display: flex; gap: 40px;">
                            <div style="text-align: center;">
                                <div style="font-size: 36px; font-weight: 700;">3,856</div>
                                <div style="font-size: 12px; opacity: 0.7;">药品数量</div>
                            </div>
                            <div style="text-align: center;">
                                <div style="font-size: 36px; font-weight: 700;">¥2.85M</div>
                                <div style="font-size: 12px; opacity: 0.7;">今日销售额</div>
                            </div>
                            <div style="text-align: center;">
                                <div style="font-size: 36px; font-weight: 700;">18</div>
                                <div style="font-size: 12px; opacity: 0.7;">待审批项</div>
                            </div>
                            <div style="text-align: center;">
                                <div style="font-size: 36px; font-weight: 700;">7</div>
                                <div style="font-size: 12px; opacity: 0.7;">预警数</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 其他功能页面（简化版） -->
            <div id="page-other" class="feature-page">
                <div class="breadcrumb">
                    <span onclick="showPage('dashboard')">工作台</span> / <span class="current">功能页面</span>
                </div>
                <h1 class="page-title">功能页面</h1>
                <div class="card">
                    <div class="card-body" style="text-align: center; padding: 60px;">
                        <div style="font-size: 48px; margin-bottom: 20px;">🚧</div>
                        <h3 style="margin-bottom: 12px;">页面建设中</h3>
                        <p style="color: #7a8599;">该功能页面正在开发中...</p>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <!-- 审批模态框 -->
    <div class="modal-overlay" id="approveModal">
        <div class="modal">
            <div class="modal-header">
                <span class="modal-title">审批申请</span>
                <button class="modal-close" onclick="closeModal('approveModal')">×</button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label class="form-label">申请类型</label>
                    <input type="text" class="form-input" value="新药品审核" readonly>
                </div>
                <div class="form-group">
                    <label class="form-label">申请内容</label>
                    <input type="text" class="form-input" value="阿莫西林胶囊" readonly>
                </div>
                <div class="form-row">
                    <div class="form-group">
                        <label class="form-label">申请人</label>
                        <input type="text" class="form-input" value="张三" readonly>
                    </div>
                    <div class="form-group">
                        <label class="form-label">申请时间</label>
                        <input type="text" class="form-input" value="2026-05-12 14:30" readonly>
                    </div>
                </div>
                <div class="form-group">
                    <label class="form-label">审批意见</label>
                    <textarea class="form-input" rows="4" placeholder="请输入审批意见...">