编辑页面

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; color: #333; }
        .admin-container { display: flex; min-height: 100vh; }
        .sidebar { width: 240px; background: linear-gradient(180deg, #1a1f36 0%, #2d3555 100%); color: #fff; padding: 24px 0; position: fixed; height: 100vh; overflow-y: auto; }
        .sidebar-logo { padding: 0 24px 24px; border-bottom: 1px solid rgba(255,255,255,0.1); margin-bottom: 24px; }
        .sidebar-logo h1 { font-size: 20px; font-weight: 600; display: flex; align-items: center; gap: 12px; }
        .sidebar-logo .icon { width: 36px; height: 36px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; }
        .nav-section { margin-bottom: 24px; }
        .nav-section-title { padding: 8px 24px; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: rgba(255,255,255,0.5); margin-bottom: 8px; }
        .nav-item { padding: 12px 24px; display: flex; align-items: center; gap: 12px; cursor: pointer; transition: all 0.2s; border-left: 3px solid transparent; }
        .nav-item:hover { background: rgba(255,255,255,0.08); }
        .nav-item.active { background: rgba(102, 126, 234, 0.2); border-left-color: #667eea; }
        .nav-item .icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 16px; }
        .nav-item.dashboard .icon { background: rgba(102, 126, 234, 0.2); }
        .nav-item.users .icon { background: rgba(34, 197, 94, 0.2); }
        .nav-item.words .icon { background: rgba(59, 130, 246, 0.2); }
        .nav-item.plans .icon { background: rgba(245, 158, 11, 0.2); }
        .nav-item.checkins .icon { background: rgba(236, 72, 153, 0.2); }
        .nav-item.news .icon { background: rgba(14, 165, 233, 0.2); }
        .nav-item.settings .icon { background: rgba(107, 114, 128, 0.2); }
        .main-content { flex: 1; margin-left: 240px; padding: 24px; }
        .header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; padding: 16px 24px; background: #fff; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
        .breadcrumb { font-size: 14px; color: #666; }
        .header-right { display: flex; align-items: center; gap: 16px; }
        .search-box { display: flex; align-items: center; background: #f5f7fa; border-radius: 8px; padding: 8px 16px; }
        .search-box input { border: none; background: transparent; outline: none; width: 200px; font-size: 14px; }
        .user-info { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 8px 12px; border-radius: 8px; transition: background 0.2s; }
        .user-info:hover { background: #f5f7fa; }
        .user-avatar { width: 36px; height: 36px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 600; }
        
        /* Page display logic with !important */
        .page { display: none !important; }
        .page.active { display: block !important; }
        
        .page { padding: 0; background: transparent; border-radius: 0; box-shadow: none; }
        
        .card { background: #fff; border-radius: 12px; padding: 24px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); margin-bottom: 24px; }
        .card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
        .card-title { font-size: 18px; font-weight: 600; }
        
        /* Stats Grid */
        .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-bottom: 24px; }
        .stat-card { background: #fff; border-radius: 12px; padding: 24px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
        .stat-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 24px; margin-bottom: 16px; }
        .stat-icon.users { background: rgba(102, 126, 234, 0.15); }
        .stat-icon.words { background: rgba(34, 197, 94, 0.15); }
        .stat-icon.plans { background: rgba(59, 130, 246, 0.15); }
        .stat-icon.checkins { background: rgba(236, 72, 153, 0.15); }
        .stat-value { font-size: 32px; font-weight: 700; margin-bottom: 4px; }
        .stat-label { font-size: 14px; color: #666; }
        .stat-change { font-size: 12px; margin-top: 8px; }
        .stat-change.up { color: #22c55e; }
        .stat-change.down { color: #ef4444; }
        
        /* Charts */
        .charts-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; }
        .chart-card { background: #fff; border-radius: 12px; padding: 24px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
        .chart-title { font-size: 16px; font-weight: 600; margin-bottom: 20px; }
        .chart-placeholder { height: 250px; background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 100%); border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #999; }
        .bar-chart { display: flex; align-items: flex-end; gap: 16px; height: 180px; padding: 20px 0; }
        .bar { flex: 1; background: linear-gradient(180deg, #667eea 0%, #764ba2 100%); border-radius: 4px 4px 0 0; transition: height 0.3s; }
        .pie-chart { width: 150px; height: 150px; border-radius: 50%; background: conic-gradient(#667eea 0% 40%, #22c55e 40% 70%, #f59e0b 70% 90%, #ef4444 90% 100%); margin: 20px auto; position: relative; }
        .pie-legend { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 20px; font-size: 12px; }
        .legend-item { display: flex; align-items: center; gap: 6px; }
        .legend-dot { width: 10px; height: 10px; border-radius: 50%; }
        
        /* Tables */
        .table-container { overflow-x: auto; }
        table { width: 100%; border-collapse: collapse; }
        th, td { padding: 14px 16px; text-align: left; border-bottom: 1px solid #f0f0f0; }
        th { font-weight: 600; color: #666; font-size: 13px; background: #fafafa; }
        td { font-size: 14px; }
        tr:hover { background: #fafafa; }
        .status { display: inline-flex; padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 500; }
        .status.active { background: rgba(34, 197, 94, 0.1); color: #22c55e; }
        .status.inactive { background: rgba(239, 68, 68, 0.1); color: #ef4444; }
        .status.pending { background: rgba(245, 158, 11, 0.1); color: #f59e0b; }
        .action-btns { display: flex; gap: 8px; }
        .btn { padding: 8px 16px; border-radius: 6px; border: none; cursor: pointer; font-size: 13px; transition: all 0.2s; }
        .btn-primary { background: #667eea; color: #fff; }
        .btn-primary:hover { background: #5a6fd6; }
        .btn-secondary { background: #f3f4f6; color: #666; }
        .btn-secondary:hover { background: #e5e7eb; }
        .btn-sm { padding: 6px 12px; font-size: 12px; }
        
        /* Pagination */
        .pagination { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; }
        .pagination-info { font-size: 13px; color: #666; }
        .pagination-btns { display: flex; gap: 4px; }
        .pagination-btns button { width: 32px; height: 32px; border: 1px solid #e5e7eb; background: #fff; border-radius: 6px; cursor: pointer; transition: all 0.2s; }
        .pagination-btns button:hover { background: #f5f7fa; }
        .pagination-btns button.active { background: #667eea; color: #fff; border-color: #667eea; }
        .pagination-btns button:disabled { opacity: 0.5; cursor: not-allowed; }
        
        /* Forms */
        .form-group { margin-bottom: 20px; }
        .form-label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 500; }
        .form-input { width: 100%; padding: 10px 14px; border: 1px solid #e5e7eb; border-radius: 8px; font-size: 14px; transition: border-color 0.2s; }
        .form-input:focus { outline: none; border-color: #667eea; }
        textarea.form-input { min-height: 100px; resize: vertical; }
        select.form-input { cursor: pointer; }
        
        /* Modal */
        .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.active { display: flex; }
        .modal { background: #fff; border-radius: 12px; width: 90%; max-width: 500px; max-height: 90vh; overflow-y: auto; }
        .modal-header { padding: 20px 24px; border-bottom: 1px solid #e5e7eb; display: flex; justify-content: space-between; align-items: center; }
        .modal-title { font-size: 18px; font-weight: 600; }
        .modal-close { width: 32px; height: 32px; border-radius: 6px; border: none; background: #f5f7fa; cursor: pointer; font-size: 18px; display: flex; align-items: center; justify-content: center; }
        .modal-close:hover { background: #e5e7eb; }
        .modal-body { padding: 24px; }
        .modal-footer { padding: 16px 24px; border-top: 1px solid #e5e7eb; display: flex; justify-content: flex-end; gap: 12px; }
        
        /* Toast */
        .toast { position: fixed; top: 24px; right: 24px; background: #fff; padding: 16px 24px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); display: none; align-items: center; gap: 12px; z-index: 1001; }
        .toast.show { display: flex; }
        .toast.success { border-left: 4px solid #22c55e; }
        .toast.error { border-left: 4px solid #ef4444; }
        
        /* Tab bar */
        .tab-bar { display: flex; gap: 8px; margin-bottom: 20px; border-bottom: 1px solid #e5e7eb; padding-bottom: 12px; }
        .tab-item { padding: 8px 16px; border-radius: 6px; cursor: pointer; font-size: 14px; color: #666; transition: all 0.2s; }
        .tab-item:hover { background: #f5f7fa; }
        .tab-item.active { background: #667eea; color: #fff; }
        
        /* Settings */
        .settings-section { margin-bottom: 32px; }
        .settings-title { font-size: 16px; font-weight: 600; margin-bottom: 16px; padding-bottom: 8px; border-bottom: 1px solid #e5e7eb; }
        .setting-item { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; border-bottom: 1px solid #f0f0f0; }
        .setting-info h4 { font-size: 14px; margin-bottom: 4px; }
        .setting-info p { font-size: 12px; color: #999; }
        .toggle { width: 48px; height: 26px; background: #ddd; border-radius: 13px; position: relative; cursor: pointer; transition: background 0.2s; }
        .toggle.active { background: #22c55e; }
        .toggle::after { content: ''; position: absolute; width: 22px; height: 22px; background: #fff; border-radius: 50%; top: 2px; left: 2px; transition: transform 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
        .toggle.active::after { transform: translateX(22px); }
        
        /* Recent activity */
        .activity-list { display: flex; flex-direction: column; gap: 16px; }
        .activity-item { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid #f0f0f0; }
        .activity-item:last-child { border-bottom: none; }
        .activity-icon { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(102, 126, 234, 0.1); color: #667eea; flex-shrink: 0; }
        .activity-content { flex: 1; }
        .activity-text { font-size: 13px; margin-bottom: 4px; }
        .activity-text strong { color: #333; }
        .activity-time { font-size: 11px; color: #999; }
        
        /* Badge */
        .badge { display: inline-flex; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 500; }
        .badge.cet4 { background: rgba(102, 126, 234, 0.1); color: #667eea; }
        .badge.cet6 { background: rgba(236, 72, 153, 0.1); color: #ec4899; }
    </style>
</head>
<body>
    <div class="admin-container">
        <!-- Sidebar -->
        <div class="sidebar">
            <div class="sidebar-logo">
                <h1><span class="icon">W</span> 单词管理</h1>
            </div>
            <div class="nav-section">
                <div class="nav-section-title">主菜单</div>
                <div class="nav-item dashboard active" onclick="showPage('dashboard', this)">
                    <span class="icon">■</span>
                    <span>数据概览</span>
                </div>
                <div class="nav-item users" onclick="showPage('users', this)">
                    <span class="icon">★</span>
                    <span>用户管理</span>
                </div>
                <div class="nav-item words" onclick="showPage('words', this)">
                    <span class="icon">●</span>
                    <span>单词管理</span>
                </div>
                <div class="nav-item plans" onclick="showPage('plans', this)">
                    <span class="icon">☆</span>
                    <span>学习计划</span>
                </div>
                <div class="nav-item checkins" onclick="showPage('checkins', this)">
                    <span class="icon">○</span>
                    <span>打卡记录</span>
                </div>
                <div class="nav-item news" onclick="showPage('news', this)">
                    <span class="icon">◉</span>
                    <span>新闻管理</span>
                </div>
            </div>
            <div class="nav-section">
                <div class="nav-section-title">系统</div>
                <div class="nav-item settings" onclick="showPage('settings', this)">
                    <span class="icon">⚙</span>
                    <span>系统设置</span>
                </div>
            </div>
        </div>

        <!-- Main Content -->
        <div class="main-content">
            <div class="header">
                <div class="breadcrumb">首页 / <span id="current-page-name">数据概览</span></div>
                <div class="header-right">
                    <div class="search-box">
                        <span>🔍</span>
                        <input type="text" placeholder="搜索...">
                    </div>
                    <div class="user-info">
                        <div class="user-avatar">A</div>
                        <span>Admin</span>
                    </div>
                </div>
            </div>

            <!-- Dashboard Page -->
            <div id="page-dashboard" class="page active">
                <div class="stats-grid">
                    <div class="stat-card">
                        <div class="stat-icon users">★</div>
                        <div class="stat-value">12,845</div>
                        <div class="stat-label">注册用户</div>
                        <div class="stat-change up">较上月 +18.2%</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-icon words">●</div>
                        <div class="stat-value">8,562</div>
                        <div class="stat-label">单词总数</div>
                        <div class="stat-change up">较上月 +5.3%</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-icon plans">☆</div>
                        <div class="stat-value">3,247</div>
                        <div class="stat-label">学习计划</div>
                        <div class="stat-change up">较上月 +12.8%</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-icon checkins">○</div>
                        <div class="stat-value">45,892</div>
                        <div class="stat-label">打卡次数</div>
                        <div class="stat-change up">较上月 +25.6%</div>
                    </div>
                </div>
                <div class="charts-grid">
                    <div class="chart-card">
                        <div class="chart-title">学习趋势（近7天）</div>
                        <div class="bar-chart">
                            <div class="bar" style="height: 60%;"></div>
                            <div class="bar" style="height: 75%;"></div>
                            <div class="bar" style="height: 45%;"></div>
                            <div class="bar" style="height: 80%;"></div>
                            <div class="bar" style="height: 65%;"></div>
                            <div class="bar" style="height: 90%;"></div>
                            <div class="bar" style="height: 85%;"></div>
                        </div>
                        <div style="display: flex; justify-content: space-around; font-size: 12px; color: #999; margin-top: 8px;">
                            <span>周一</span><span>周二</span><span>周三</span><span>周四</span><span>周五</span><span>周六</span><span>周日</span>
                        </div>
                    </div>
                    <div class="chart-card">
                        <div class="chart-title">用户分布</div>
                        <div class="pie-chart"></div>
                        <div class="pie-legend">
                            <div class="legend-item"><span class="legend-dot" style="background: #667eea;"></span> CET-4</div>
                            <div class="legend-item"><span class="legend-dot" style="background: #22c55e;"></span> CET-6</div>
                            <div class="legend-item"><span class="legend-dot" style="background: #f59e0b;"></span> 考研</div>
                            <div class="legend-item"><span class="legend-dot" style="background: #ef4444;"></span> 留学</div>
                        </div>
                    </div>
                </div>
                <div class="card" style="margin-top: 24px;">
                    <div class="card-header">
                        <div class="card-title">最近活动</div>
                        <button class="btn btn-secondary btn-sm">查看全部</button>
                    </div>
                    <div class="activity-list">
                        <div class="activity-item">
                            <div class="activity-icon">✓</div>
                            <div class="activity-content">
                                <div class="activity-text"><strong>张小明</strong> 完成了今日打卡，连续打卡 7 天</div>
                                <div class="activity-time">3 分钟前</div>
                            </div>
                        </div>
                        <div class="activity-item">
                            <div class="activity-icon">★</div>
                            <div class="activity-content">
                                <div class="activity-text"><strong>李华</strong> 加入了 CET-6 学习计划</div>
                                <div class="activity-time">15 分钟前</div>
                            </div>
                        </div>
                        <div class="activity-item">
                            <div class="activity-icon">●</div>
                            <div class="activity-content">
                                <div class="activity-text"><strong>王芳</strong> 学习并掌握了 20 个新单词</div>
                                <div class="activity-time">32 分钟前</div>
                            </div>
                        </div>
                        <div class="activity-item">
                            <div class="activity-icon">☆</div>
                            <div class="activity-content">
                                <div class="activity-text"><strong>陈思思</strong> 完成了单词测试，获得 95 分</div>
                                <div class="activity-time">1 小时前</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Users Page -->
            <div id="page-users" class="page">
                <div class="card">
                    <div class="card-header">
                        <div class="card-title">用户列表</div>
                        <button class="btn btn-primary" onclick="openModal('addUserModal')">+ 添加用户</button>
                    </div>
                    <div class="tab-bar">
                        <div class="tab-item active">全部用户</div>
                        <div class="tab-item">CET-4 用户</div>
                        <div class="tab-item">CET-6 用户</div>
                        <div class="tab-item">VIP 用户</div>
                    </div>
                    <div class="table-container">
                        <table>
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>用户名</th>
                                    <th>手机号</th>
                                    <th>学习计划</th>
                                    <th>累计打卡</th>
                                    <th>注册时间</th>
                                    <th>状态</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>10001</td>
                                    <td>张小明</td>
                                    <td>138****1234</td>
                                    <td><span class="badge cet4">CET-4</span></td>
                                    <td>45</td>
                                    <td>2024-01-15</td>
                                    <td><span class="status active">正常</span></td>
                                    <td class="action-btns">
                                        <button class="btn btn-secondary btn-sm">编辑</button>
                                        <button class="btn btn-secondary btn-sm">禁用</button>
                                    </td>
                                </tr>
                                <tr>
                                    <td>10002</td>
                                    <td>李华</td>
                                    <td>139****5678</td>
                                    <td><span class="badge cet6">CET-6</span></td>
                                    <td>128</td>
                                    <td>2024-01-10</td>
                                    <td><span class="status active">正常</span></td>
                                    <td class="action-btns">
                                        <button class="btn btn-secondary btn-sm">编辑</button>
                                        <button class="btn btn-secondary btn-sm">禁用</button>
                                    </td>
                                </tr>
                                <tr>
                                    <td>10003</td>
                                    <td>王芳</td>
                                    <td>136****9012</td>
                                    <td><span class="badge cet4">CET-4</span></td>
                                    <td>23</td>
                                    <td>2024-02-01</td>
                                    <td><span class="status active">正常</span></td>
                                    <td class="action-btns">
                                        <button class="btn btn-secondary btn-sm">编辑</button>
                                        <button class="btn btn-secondary btn-sm">禁用</button>
                                    </td>
                                </tr>
                                <tr>
                                    <td>10004</td>
                                    <td>陈思思</td>
                                    <td>135****3456</td>
                                    <td><span class="badge cet6">CET-6</span></td>
                                    <td>256</td>
                                    <td>2023-12-20</td>
                                    <td><span class="status active">正常</span></td>
                                    <td class="action-btns">
                                        <button class="btn btn-secondary btn-sm">编辑</button>
                                        <button class="btn btn-secondary btn-sm">禁用</button>
                                    </td>
                                </tr>
                                <tr>
                                    <td>10005</td>
                                    <td>刘伟</td>
                                    <td>137****7890</td>
                                    <td><span class="badge cet4">CET-4</span></td>
                                    <td>0</td>
                                    <td>2024-02-10</td>
                                    <td><span class="status inactive">禁用</span></td>
                                    <td class="action-btns">
                                        <button class="btn btn-secondary btn-sm">编辑</button>
                                        <button class="btn btn-secondary btn-sm">启用</button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="pagination">
                        <div class="pagination-info">共 128 条记录，第 1/13 页</div>
                        <div class="pagination-btns">
                            <button disabled><</button>
                            <button class="active">1</button>
                            <button>2</button>
                            <button>3</button>
                            <button>4</button>
                            <button>5</button>
                            <button>...</button>
                            <button>13</button>
                            <button>></button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Words Page -->
            <div id="page-words" class="page">
                <div class="card">
                    <div class="card-header">
                        <div class="card-title">单词列表</div>
                        <button class="btn btn-primary" onclick="openModal('addWordModal')">+ 添加单词</button>
                    </div>
                    <div class="tab-bar">
                        <div class="tab-item active">全部单词</div>
                        <div class="tab-item">CET-4</div>
                        <div class="tab-item">CET-6</div>
                        <div class="tab-item">高频词汇</div>
                    </div>
                    <div class="table-container">
                        <table>
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>单词</th>
                                    <th>音标</th>
                                    <th>释义</th>
                                    <th>类型</th>
                                    <th>难度</th>
                                    <th>热度</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>1</td>
                                    <td><strong>abandon</strong></td>
                                    <td>/ə'bændən/</td>
                                    <td>vt. 放弃；遗弃 n. 放任</td>
                                    <td><span class="badge cet4">CET-4</span></td>
                                    <td><span class="status pending">中</span></td>
                                    <td>98</td>
                                    <td class="action-btns">
                                        <button class="btn btn-secondary btn-sm">编辑</button>
                                        <button class="btn btn-secondary btn-sm">删除</button>
                                    </td>
                                </tr>
                                <tr>
                                    <td>2</td>
                                    <td><strong>ability</strong></td>
                                    <td>/ə'biliti/</td>
                                    <td>n. 能力；才能</td>
                                    <td><span class="badge cet4">CET-4</span></td>
                                    <td><span class="status active">低</span></td>
                                    <td>95</td>
<td class="action-btns">
                                        <button class="btn btn-secondary btn-sm">编辑</button>
                                        <button class="btn btn-secondary btn-sm">删除</button>
                                    </td>
                                </tr>
                                <tr>
                                    <td>3</td>
                                    <td><strong>absent</strong></td>
                                    <td>/'æbsənt/</td>
                                    <td>adj. 缺席的；缺少的</td>
                                    <td><span class="badge cet4">CET-4</span></td>
                                    <td><span class="status active">低</span></td>
                                    <td>92</td>
                                    <td class="action-btns">
                                        <button class="btn btn-secondary btn-sm">编辑</button>
                                        <button class="btn btn-secondary btn-sm">删除</button>
                                    </td>
                                </tr>
                                <tr>
                                    <td>4</td>
                                    <td><strong>abstract</strong></td>
                                    <td>/'æbstrækt/</td>
                                    <td>adj. 抽象的 n. 摘要</td>
                                    <td><span class="badge cet6">CET-6</span></td>
                                    <td><span class="status pending">中</span></td>
                                    <td>88</td>
                                    <td class="action-btns">
                                        <button class="btn btn-secondary btn-sm">编辑</button>
                                        <button class="btn btn-secondary btn-sm">删除</button>
                                    </td>
                                </tr>
                                <tr>
                                    <td>5</td>
                                    <td><strong>abundant</strong></td>
                                    <td>/ə'bʌndənt/</td>
                                    <td>adj. 丰富的；充裕的</td>
                                    <td><span class="badge cet6">CET-6</span></td>
                                    <td><span class="status inactive">高</span></td>
                                    <td>85</td>
                                    <td class="action-btns">
                                        <button class="btn btn-secondary btn-sm">编辑</button>
                                        <button class="btn btn-secondary btn-sm">删除</button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="pagination">
                        <div class="pagination-info">共 8562 条记录，第 1/857 页</div>
                        <div class="pagination-btns">
                            <button disabled><</button>
                            <button class="active">1</button>
                            <button>2</button>
                            <button>3</button>
                            <button>4</button>
                            <button>5</button>
                            <button>...</button>
                            <button>857</button>
                            <button>></button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Plans Page -->
            <div id="page-plans" class="page">
                <div class="card">
                    <div class="card-header">
                        <div class="card-title">学习计划管理</div>
                        <button class="btn btn-primary" onclick="openModal('addPlanModal')">+ 创建计划</button>
                    </div>
                    <div class="table-container">
                        <table>
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>计划名称</th>
                                    <th>类型</th>
                                    <th>单词数</th>
                                    <th>学习天数</th>
                                    <th>参与人数</th>
                                    <th>状态</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>1</td>
                                    <td>CET-4 核心词汇速记</td>
                                    <td><span class="badge cet4">CET-4</span></td>
                                    <td>2500</td>
                                    <td>30</td>
                                    <td>5,234</td>
                                    <td><span class="status active">进行中</span></td>
                                    <td class="action-btns">
                                        <button class="btn btn-secondary btn-sm">编辑</button>
                                        <button class="btn btn-secondary btn-sm">详情</button>
                                    </td>
                                </tr>
                                <tr>
                                    <td>2</td>
                                    <td>CET-6 高频词汇</td>
                                    <td><span class="badge cet6">CET-6</span></td>
                                    <td>2000</td>
                                    <td>45</td>
                                    <td>3,892</td>
                                    <td><span class="status active">进行中</span></td>
                                    <td class="action-btns">
                                        <button class="btn btn-secondary btn-sm">编辑</button>
                                        <button class="btn btn-secondary btn-sm">详情</button>
                                    </td>
                                </tr>
                                <tr>
                                    <td>3</td>
                                    <td>考研英语词汇精讲</td>
                                    <td><span class="badge" style="background: rgba(245,158,11,0.1); color: #f59e0b;">考研</span></td>
                                    <td>5500</td>
                                    <td>90</td>
                                    <td>2,156</td>
                                    <td><span class="status active">进行中</span></td>
                                    <td class="action-btns">
                                        <button class="btn btn-secondary btn-sm">编辑</button>
                                        <button class="btn btn-secondary btn-sm">详情</button>
                                    </td>
                                </tr>
                                <tr>
                                    <td>4</td>
                                    <td>雅思核心词汇</td>
                                    <td><span class="badge" style="background: rgba(14,165,233,0.1); color: #0ea5e9;">雅思</span></td>
                                    <td>3000</td>
                                    <td>60</td>
                                    <td>1,245</td>
                                    <td><span class="status pending">未开始</span></td>
                                    <td class="action-btns">
                                        <button class="btn btn-secondary btn-sm">编辑</button>
                                        <button class="btn btn-secondary btn-sm">详情</button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="pagination">
                        <div class="pagination-info">共 12 条记录，第 1/2 页</div>
                        <div class="pagination-btns">
                            <button disabled><</button>
                            <button class="active">1</button>
                            <button>2</button>
                            <button>></button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Checkins Page -->
            <div id="page-checkins" class="page">
                <div class="card">
                    <div class="card-header">
                        <div class="card-title">打卡记录</div>
                        <button class="btn btn-secondary btn-sm">导出数据</button>
                    </div>
                    <div class="tab-bar">
                        <div class="tab-item active">全部记录</div>
                        <div class="tab-item">今日打卡</div>
                        <div class="tab-item">连续打卡</div>
                    </div>
                    <div class="table-container">
                        <table>
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>用户名</th>
                                    <th>学习计划</th>
                                    <th>打卡时间</th>
                                    <th>学习单词数</th>
                                    <th>学习时长</th>
                                    <th>打卡方式</th>
                                    <th>状态</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>1001</td>
                                    <td>张小明</td>
                                    <td><span class="badge cet4">CET-4</span></td>
                                    <td>2024-02-15 08:30</td>
                                    <td>30</td>
                                    <td>25 分钟</td>
                                    <td>小程序</td>
                                    <td><span class="status active">成功</span></td>
                                </tr>
                                <tr>
                                    <td>1002</td>
                                    <td>李华</td>
                                    <td><span class="badge cet6">CET-6</span></td>
                                    <td>2024-02-15 07:45</td>
                                    <td>50</td>
                                    <td>40 分钟</td>
                                    <td>APP</td>
                                    <td><span class="status active">成功</span></td>
                                </tr>
                                <tr>
                                    <td>1003</td>
                                    <td>王芳</td>
                                    <td><span class="badge cet4">CET-4</span></td>
                                    <td>2024-02-15 09:15</td>
                                    <td>20</td>
                                    <td>18 分钟</td>
                                    <td>小程序</td>
                                    <td><span class="status active">成功</span></td>
                                </tr>
                                <tr>
                                    <td>1004</td>
                                    <td>陈思思</td>
                                    <td><span class="badge cet6">CET-6</span></td>
                                    <td>2024-02-15 06:30</td>
                                    <td>80</td>
                                    <td>60 分钟</td>
                                    <td>APP</td>
                                    <td><span class="status active">成功</span></td>
                                </tr>
                                <tr>
                                    <td>1005</td>
                                    <td>刘伟</td>
                                    <td><span class="badge cet4">CET-4</span></td>
                                    <td>2024-02-14 20:00</td>
                                    <td>15</td>
                                    <td>12 分钟</td>
                                    <td>网页</td>
                                    <td><span class="status inactive">失败</span></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="pagination">
                        <div class="pagination-info">共 45892 条记录，第 1/4590 页</div>
                        <div class="pagination-btns">
                            <button disabled><</button>
                            <button class="active">1</button>
                            <button>2</button>
                            <button>3</button>
                            <button>4</button>
                            <button>5</button>
                            <button>...</button>
                            <button>4590</button>
                            <button>></button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- News Page -->
            <div id="page-news" class="page">
                <div class="card">
                    <div class="card-header">
                        <div class="card-title">新闻管理</div>
                        <button class="btn btn-primary" onclick="openModal('addNewsModal')">+ 发布新闻</button>
                    </div>
                    <div class="tab-bar">
                        <div class="tab-item active">全部新闻</div>
                        <div class="tab-item">英语学习</div>
                        <div class="tab-item">考试资讯</div>
                        <div class="tab-item">留学资讯</div>
                    </div>
                    <div class="table-container">
                        <table>
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>标题</th>
                                    <th>分类</th>
                                    <th>来源</th>
                                    <th>发布时间</th>
                                    <th>阅读量</th>
                                    <th>状态</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>1</td>
                                    <td>2024年考研英语大纲重大调整</td>
                                    <td>考试资讯</td>
                                    <td>官方发布</td>
                                    <td>2024-02-14</td>
                                    <td>12,356</td>
                                    <td><span class="status active">已发布</span></td>
                                    <td class="action-btns">
                                        <button class="btn btn-secondary btn-sm">编辑</button>
                                        <button class="btn btn-secondary btn-sm">下架</button>
                                    </td>
                                </tr>
                                <tr>
                                    <td>2</td>
                                    <td>雅思口语考试改用AI评分系统</td>
                                    <td>留学资讯</td>
                                    <td>考试院</td>
                                    <td>2024-02-13</td>
                                    <td>8,942</td>
                                    <td><span class="status active">已发布</span></td>
                                    <td class="action-btns">
                                        <button class="btn btn-secondary btn-sm">编辑</button>
                                        <button class="btn btn-secondary btn-sm">下架</button>
                                    </td>
                                </tr>
                                <tr>
                                    <td>3</td>
                                    <td>高效背单词的10个科学方法</td>
                                    <td>英语学习</td>
                                    <td>原创</td>
                                    <td>2024-02-12</td>
                                    <td>15,678</td>
                                    <td><span class="status active">已发布</span></td>
                                    <td class="action-btns">
                                        <button class="btn btn-secondary btn-sm">编辑</button>
                                        <button class="btn btn-secondary btn-sm">下架</button>
                                    </td>
                                </tr>
                                <tr>
                                    <td>4</td>
                                    <td>CET-4/6考试成绩查询时间公布</td>
                                    <td>考试资讯</td>
                                    <td>考试院</td>
                                    <td>2024-02-10</td>
                                    <td>25,432</td>
                                    <td><span class="status pending">草稿</span></td>
                                    <td class="action-btns">
                                        <button class="btn btn-secondary btn-sm">编辑</button>
                                        <button class="btn btn-secondary btn-sm">发布</button>
                                    </td>
                                </tr>
                                <tr>
                                    <td>5</td>
                                    <td>托福考试新增学术写作题型</td>
                                    <td>留学资讯</td>
                                    <td>ETS</td>
                                    <td>2024-02-08</td>
                                    <td>6,789</td>
                                    <td><span class="status inactive">已下架</span></td>
                                    <td class="action-btns">
                                        <button class="btn btn-secondary btn-sm">编辑</button>
                                        <button class="btn btn-secondary btn-sm">上架</button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="pagination">
                        <div class="pagination-info">共 128 条记录，第 1/13 页</div>
                        <div class="pagination-btns">
                            <button disabled><</button>
                            <button class="active">1</button>
                            <button>2</button>
                            <button>3</button>
                            <button>4</button>
                            <button>5</button>
                            <button>...</button>
                            <button>13</button>
                            <button>></button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Settings Page -->
            <div id="page-settings" class="page">
                <div class="card">
                    <div class="card-header">
                        <div class="card-title">系统设置</div>
                    </div>
                    <div class="settings-section">
                        <div class="settings-title">基础设置</div>
                        <div class="setting-item">
                            <div class="setting-info">
                                <h4>系统名称</h4>
                                <p>显示在系统各处的名称</p>
                            </div>
                            <input type="text" class="form-input" style="width: 200px;" value="英语单词学习小程序">
                        </div>
                        <div class="setting-item">
                            <div class="setting-info">
                                <h4>每日打卡提醒</h4>
                                <p>开启后将在设定时间提醒用户打卡</p>
                            </div>
                            <div class="toggle active" onclick="this.classList.toggle('active')"></div>
                        </div>
                        <div class="setting-item">
                            <div class="setting-info">
                                <h4>新用户引导</h4>
                                <p>首次登录时显示使用引导</p>
                            </div>
                            <div class="toggle active" onclick="this.classList.toggle('active')"></div>
                        </div>
                    </div>
                    <div class="settings-section">
                        <div class="settings-title">学习设置</div>
                        <div class="setting-item">
                            <div class="setting-info">
                                <h4>每日学习目标</h4>
                                <p>用户每日应学习的单词数量</p>
                            </div>
                            <input type="number" class="form-input" style="width: 100px;" value="20">
                        </div>
                        <div class="setting-item">
                            <div class="setting-info">
                                <h4>艾宾浩斯遗忘曲线</h4>
                                <p>根据记忆规律安排复习计划</p>
                            </div>
                            <div class="toggle active" onclick="this.classList.toggle('active')"></div>
                        </div>
                        <div class="setting-item">
                            <div class="setting-info">
                                <h4>语音朗读</h4>
                                <p>自动播放单词发音</p>
                            </div>
                            <div class="toggle" onclick="this.classList.toggle('active')"></div>
                        </div>
                    </div>
                    <div class="settings-section">
                        <div class="settings-title">通知设置</div>
                        <div class="setting-item">
                            <div class="setting-info">
                                <h4>推送通知</h4>
                                <p>允许发送系统通知</p>
                            </div>
                            <div class="toggle active" onclick="this.classList.toggle('active')"></div>
                        </div>
                        <div class="setting-item">
                            <div class="setting-info">
                                <h4>打卡成功通知</h4>
                                <p>用户完成打卡后发送通知</p>
                            </div>
                            <div class="toggle active" onclick="this.classList.toggle('active')"></div>
                        </div>
                    </div>
                    <div style="margin-top: 24px;">
                        <button class="btn btn-primary" onclick="showToast('设置已保存', 'success')">保存设置</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modals -->
    <div id="addUserModal" class="modal-overlay">
        <div class="modal">
            <div class="modal-header">
                <div class="modal-title">添加用户</div>
                <button class="modal-close" onclick="closeModal('addUserModal')">×</button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label class="form-label">用户名</label>
                    <input type="text" class="form-input" placeholder="请输入用户名">
                </div>
                <div class="form-group">
                    <label class="form-label">手机号</label>
                    <input type="tel" class="form-input" placeholder="请输入手机号">
                </div>
                <div class="form-group">
                    <label class="form-label">学习计划</label>
                    <select class="form-input">
                        <option>请选择学习计划</option>
                        <option>CET-4 核心词汇</option>
                        <option>CET-6 高频词汇</option>
                        <option>考研英语词汇</option>
                    </select>
                </div>
                <div class="form-group">
                    <label class="form-label">初始密码</label>
                    <input type="password" class="form-input" placeholder="请输入初始密码">
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" onclick="closeModal('addUserModal')">取消</button>
                <button class="btn btn-primary" onclick="closeModal('addUserModal'); showToast('用户添加成功', 'success')">确认添加</button>
            </div>
        </div>
    </div>

    <div id="addWordModal" class="modal-overlay">
        <div class="modal">
            <div class="modal-header">
                <div class="modal-title">添加单词</div>
                <button class="modal-close" onclick="closeModal('addWordModal')">×</button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label class="form-label">单词</label>
                    <input type="text" class="form-input" placeholder="请输入单词">
                </div>
                <div class="form-group">
                    <label class="form-label">音标</label>
                    <input type="text" class="form-input" placeholder="请输入音标，如 /test/">
                </div>
                <div class="form-group">
                    <label class="form-label">释义</label>
                    <textarea class="form-input" placeholder="请输入单词释义">