编辑页面

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, "PingFang SC", "Microsoft YaHei", sans-serif;
            background: #f0f2f5;
            min-height: 100vh;
        }
        .layout { display: flex; min-height: 100vh; }
        .sidebar {
            width: 220px;
            background: #001529;
            color: #fff;
            position: fixed;
            height: 100vh;
            overflow-y: auto;
        }
        .sidebar .logo {
            height: 60px;
            display: flex;
            align-items: center;
            padding: 0 20px;
            font-size: 16px;
            font-weight: 600;
            border-bottom: 1px solid rgba(255,255,255,0.1);
        }
        .sidebar .logo span { margin-left: 10px; }
        .sidebar .nav { padding: 10px 0; }
        .sidebar .nav-item {
            padding: 12px 20px;
            cursor: pointer;
            display: flex;
            align-items: center;
            transition: all 0.3s;
        }
        .sidebar .nav-item:hover { background: rgba(255,255,255,0.08); }
        .sidebar .nav-item.active { background: #1890ff; }
        .sidebar .nav-item .icon { font-size: 18px; margin-right: 10px; }
        .sidebar .nav-item .text { font-size: 14px; }
        .main { flex: 1; margin-left: 220px; }
        .header {
            height: 60px;
            background: #fff;
            border-bottom: 1px solid #e8e8e8;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 24px;
            position: sticky;
            top: 0;
            z-index: 100;
        }
        .header .title { font-size: 16px; font-weight: 500; color: #333; }
        .header .user { display: flex; align-items: center; gap: 12px; }
        .header .avatar {
            width: 36px; height: 36px; border-radius: 50%;
            background: #1890ff; color: #fff;
            display: flex; align-items: center; justify-content: center;
        }
        .content { padding: 24px; }
        .card {
            background: #fff;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 1px 4px rgba(0,0,0,0.08);
        }
        .card-title {
            font-size: 16px; font-weight: 500; color: #333;
            margin-bottom: 16px;
            padding-bottom: 12px;
            border-bottom: 1px solid #e8e8e8;
        }
        .stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
        .stat-card {
            background: #fff; border-radius: 8px; padding: 20px;
            box-shadow: 0 1px 4px rgba(0,0,0,0.08);
            cursor: pointer;
            transition: all 0.3s;
        }
        .stat-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.12); transform: translateY(-2px); }
        .stat-card .stat-icon {
            width: 48px; height: 48px; border-radius: 8px;
            display: flex; align-items: center; justify-content: center;
            font-size: 24px; margin-bottom: 12px;
        }
        .stat-card .stat-icon.blue { background: #e6f7ff; color: #1890ff; }
        .stat-card .stat-icon.green { background: #f6ffed; color: #52c41a; }
        .stat-card .stat-icon.orange { background: #fff7e6; color: #fa8c16; }
        .stat-card .stat-icon.red { background: #fff1f0; color: #ff4d4f; }
        .stat-card .stat-value { font-size: 28px; font-weight: 600; color: #333; }
        .stat-card .stat-label { font-size: 14px; color: #999; margin-top: 4px; }
        .stat-card .stat-change { font-size: 12px; margin-top: 8px; }
        .stat-card .stat-change.up { color: #52c41a; }
        .stat-card .stat-change.down { color: #ff4d4f; }
        .table { width: 100%; border-collapse: collapse; }
        .table th, .table td {
            padding: 12px 16px;
            text-align: left;
            border-bottom: 1px solid #e8e8e8;
        }
        .table th { background: #fafafa; font-weight: 500; color: #333; }
        .table tr:hover { background: #fafafa; cursor: pointer; }
        .badge {
            display: inline-block; padding: 2px 8px; border-radius: 4px;
            font-size: 12px;
        }
        .badge-success { background: #f6ffed; color: #52c41a; }
        .badge-warning { background: #fff7e6; color: #fa8c16; }
        .badge-danger { background: #fff1f0; color: #ff4d4f; }
        .badge-info { background: #e6f7ff; color: #1890ff; }
        .btn {
            padding: 6px 16px; border-radius: 4px; border: none;
            font-size: 14px; cursor: pointer; transition: all 0.3s;
        }
        .btn-primary { background: #1890ff; color: #fff; }
        .btn-primary:hover { background: #40a9ff; }
        .btn-default { background: #fff; color: #333; border: 1px solid #d9d9d9; }
        .btn-default:hover { border-color: #1890ff; color: #1890ff; }
        .btn-danger { background: #ff4d4f; color: #fff; }
        .btn-danger:hover { background: #ff7875; }
        .btn-success { background: #52c41a; color: #fff; }
        .btn-success:hover { background: #73d13d; }
        .btn-sm { padding: 4px 12px; font-size: 12px; }
        .form-group { margin-bottom: 16px; }
        .form-label { display: block; font-size: 14px; color: #333; margin-bottom: 8px; }
        .form-input {
            width: 100%; padding: 8px 12px; border: 1px solid #d9d9d9;
            border-radius: 4px; font-size: 14px;
        }
        .form-input:focus { outline: none; border-color: #1890ff; }
        .form-row { display: flex; gap: 16px; }
        .form-row .form-group { flex: 1; }
        .search-bar { display: flex; gap: 12px; margin-bottom: 20px; align-items: center; flex-wrap: wrap; }
        .search-bar .form-input { width: 300px; }
        .pagination { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
        .pagination .page-item {
            padding: 6px 12px; border: 1px solid #d9d9d9; border-radius: 4px;
            cursor: pointer; font-size: 14px;
        }
        .pagination .page-item.active { background: #1890ff; color: #fff; border-color: #1890ff; }
        .pagination .page-item:hover { border-color: #1890ff; color: #1890ff; }
        .modal-overlay {
            position: fixed; top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0,0,0,0.5); display: none;
            align-items: center; justify-content: center; z-index: 1000;
        }
        .modal-overlay.show { display: flex; }
        .modal {
            background: #fff; border-radius: 8px; width: 600px;
            max-height: 80vh; overflow-y: auto;
        }
        .modal-header {
            padding: 16px 20px; border-bottom: 1px solid #e8e8e8;
            display: flex; justify-content: space-between; align-items: center;
        }
        .modal-header .close { font-size: 20px; cursor: pointer; color: #999; transition: color 0.3s; }
        .modal-header .close:hover { color: #333; }
        .modal-body { padding: 20px; }
        .modal-footer { padding: 16px 20px; border-top: 1px solid #e8e8e8; text-align: right; gap: 8px; display: flex; justify-content: flex-end; }
        .tag { display: inline-block; padding: 4px 12px; border-radius: 12px; font-size: 12px; }
        .tag-easy { background: #e8f5e9; color: #4caf50; }
        .tag-medium { background: #fff3e0; color: #ff9800; }
        .tag-hard { background: #ffebee; color: #f44336; }
        .chart-placeholder {
            height: 300px; background: #fafafa; border-radius: 8px;
            display: flex; align-items: center; justify-content: center;
            color: #999; font-size: 14px;
        }
        .queue-list { display: flex; flex-direction: column; gap: 12px; }
        .queue-item {
            display: flex; align-items: center; padding: 16px;
            background: #fafafa; border-radius: 8px;
            transition: all 0.3s;
            cursor: pointer;
        }
        .queue-item:hover { background: #f0f0f0; transform: translateX(4px); }
        .queue-item .num {
            width: 60px; font-size: 20px; font-weight: 600; color: #1890ff;
        }
        .queue-item .info { flex: 1; }
        .queue-item .poem { font-size: 14px; color: #333; margin-bottom: 4px; }
        .queue-item .time { font-size: 12px; color: #999; }
        .queue-item .status { font-size: 12px; padding: 4px 12px; border-radius: 12px; }
        .queue-item .status.waiting { background: #e6f7ff; color: #1890ff; }
        .queue-item .status.calling { background: #fff7e6; color: #fa8c16; }
        .queue-item .status.done { background: #f6ffed; color: #52c41a; }
        .queue-item .status.cancelled { background: #f5f5f5; color: #999; }
        .empty-state {
            text-align: center; padding: 60px 20px; color: #999;
        }
        .empty-state .icon { font-size: 48px; margin-bottom: 16px; }
        .page { display: none; }
        .page.active { display: block; }
        .hidden { display: none; }

        /* Toast 通知样式 */
        .toast {
            position: fixed;
            top: 80px;
            right: 24px;
            padding: 12px 20px;
            border-radius: 8px;
            font-size: 14px;
            z-index: 2000;
            animation: slideIn 0.3s ease;
            display: flex;
            align-items: center;
            gap: 8px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        }
        .toast.success { background: #f6ffed; color: #52c41a; border: 1px solid #b7eb8f; }
        .toast.error { background: #fff1f0; color: #ff4d4f; border: 1px solid #ffccc7; }
        .toast.warning { background: #fff7e6; color: #fa8c16; border: 1px solid #ffe58f; }
        .toast.info { background: #e6f7ff; color: #1890ff; border: 1px solid #91d5ff; }
        .toast .icon { font-size: 18px; }
        @keyframes slideIn {
            from { transform: translateX(100%); opacity: 0; }
            to { transform: translateX(0); opacity: 1; }
        }
        @keyframes slideOut {
            from { transform: translateX(0); opacity: 1; }
            to { transform: translateX(100%); opacity: 0; }
        }

        /* 详情弹窗样式 */
        .detail-item {
            display: flex;
            padding: 12px 0;
            border-bottom: 1px solid #f0f0f0;
        }
        .detail-item:last-child { border-bottom: none; }
        .detail-item .label {
            width: 100px;
            color: #999;
            font-size: 14px;
        }
        .detail-item .value {
            flex: 1;
            color: #333;
            font-size: 14px;
        }
        .qr-box {
            text-align: center;
            padding: 20px;
            background: #fafafa;
            border-radius: 8px;
        }
        .qr-box .qr-code {
            width: 150px;
            height: 150px;
            background: #fff;
            border: 1px solid #e8e8e8;
            margin: 0 auto 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 48px;
            color: #ccc;
        }
        .qr-box .ticket-num {
            font-size: 16px;
            font-weight: 600;
            color: #333;
        }

        /* 确认对话框样式 */
        .confirm-text {
            text-align: center;
            padding: 20px 0;
            font-size: 16px;
            color: #333;
        }
        .confirm-text .highlight {
            color: #ff4d4f;
            font-weight: 600;
        }

        /* 叫号成功弹窗样式 */
        .call-success-content {
            text-align: center;
            padding: 20px 0;
        }
        .call-success-content .number {
            font-size: 48px;
            font-weight: 600;
            color: #1890ff;
            margin-bottom: 12px;
        }
        .call-success-content .poem {
            font-size: 16px;
            color: #333;
            margin-bottom: 8px;
        }
        .call-success-content .user {
            font-size: 14px;
            color: #999;
            margin-bottom: 20px;
        }
        .call-success-content .time {
            font-size: 24px;
            color: #52c41a;
            font-weight: 600;
        }

        /* 完成确认弹窗样式 */
        .complete-info {
            text-align: center;
            padding: 20px 0;
        }
        .complete-info .number {
            font-size: 32px;
            font-weight: 600;
            color: #1890ff;
            margin-bottom: 16px;
        }
        .complete-info .result {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-bottom: 20px;
        }
        .complete-info .result-btn {
            padding: 12px 24px;
            border-radius: 8px;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.3s;
        }
        .complete-info .result-btn.pass {
            background: #f6ffed;
            border: 2px solid #52c41a;
            color: #52c41a;
        }
        .complete-info .result-btn.pass:hover, .complete-info .result-btn.pass.selected {
            background: #52c41a;
            color: #fff;
        }
        .complete-info .result-btn.fail {
            background: #fff1f0;
            border: 2px solid #ff4d4f;
            color: #ff4d4f;
        }
        .complete-info .result-btn.fail:hover, .complete-info .result-btn.fail.selected {
            background: #ff4d4f;
            color: #fff;
        }

        /* 导出选项弹窗样式 */
        .export-options {
            padding: 10px 0;
        }
        .export-option {
            display: flex;
            align-items: center;
            padding: 16px;
            border: 1px solid #e8e8e8;
            border-radius: 8px;
            margin-bottom: 12px;
            cursor: pointer;
            transition: all 0.3s;
        }
        .export-option:hover { border-color: #1890ff; background: #fafafa; }
        .export-option .icon { font-size: 24px; margin-right: 12px; color: #1890ff; }
        .export-option .info .title { font-size: 14px; color: #333; font-weight: 500; }
        .export-option .info .desc { font-size: 12px; color: #999; margin-top: 4px; }
    </style>
</head>
<body>
    <div class="layout">
        <div class="sidebar">
            <div class="logo">
                <span>*</span>
                <span>后台管理</span>
            </div>
            <div class="nav">
                <div class="nav-item active" onclick="switchPage('dashboard')">
                    <span class="icon">=</span>
                    <span class="text">工作台</span>
                </div>
                <div class="nav-item" onclick="switchPage('poems')">
                    <span class="icon">*</span>
                    <span class="text">诗词管理</span>
                </div>
                <div class="nav-item" onclick="switchPage('queue')">
                    <span class="icon">=</span>
                    <span class="text">排队管理</span>
                </div>
                <div class="nav-item" onclick="switchPage('tickets')">
                    <span class="icon">+</span>
                    <span class="text">门票管理</span>
                </div>
                <div class="nav-item" onclick="switchPage('users')">
                    <span class="icon">o</span>
                    <span class="text">用户管理</span>
                </div>
                <div class="nav-item" onclick="switchPage('stats')">
                    <span class="icon">O</span>
                    <span class="text">数据统计</span>
                </div>
            </div>
        </div>

        <div class="main">
            <div class="header">
                <div class="title" id="pageTitle">工作台</div>
                <div class="user">
                    <div class="avatar">管</div>
                    <span>管理员</span>
                </div>
            </div>

            <div class="content">
                <!-- 工作台 -->
                <div id="dashboardPage" class="page active">
                    <div class="stat-grid">
                        <div class="stat-card" onclick="switchPage('queue')">
                            <div class="stat-icon blue">.</div>
                            <div class="stat-value" id="statTodayPickup">0</div>
                            <div class="stat-label">今日取号数</div>
                            <div class="stat-change up">较昨日 +12%</div>
                        </div>
                        <div class="stat-card" onclick="switchPage('poems')">
                            <div class="stat-icon green">*</div>
                            <div class="stat-value" id="statTodayPass">0</div>
                            <div class="stat-label">今日通过数</div>
                            <div class="stat-change up">较昨日 +8%</div>
                        </div>
                        <div class="stat-card" onclick="switchPage('queue')">
                            <div class="stat-icon orange">=</div>
                            <div class="stat-value" id="statCurrentQueue">0</div>
                            <div class="stat-label">当前排队</div>
                            <div class="stat-change down">较昨日 -5%</div>
                        </div>
                        <div class="stat-card" onclick="switchPage('tickets')">
                            <div class="stat-icon red">O</div>
                            <div class="stat-value" id="statTotalTickets">0</div>
                            <div class="stat-label">已发放门票</div>
                            <div class="stat-change up">较昨日 +15%</div>
                        </div>
                    </div>

                    <div class="card">
                        <div class="card-title">实时排队情况</div>
                        <div class="queue-list" id="dashboardQueueList">
                            <!-- 动态渲染 -->
                        </div>
                    </div>
                </div>

                <!-- 诗词管理 -->
                <div id="poemsPage" class="page">
                    <div class="search-bar">
                        <input type="text" class="form-input" id="poemSearchInput" placeholder="搜索诗词名称">
                        <select class="form-input" style="width:150px" id="poemDifficultyFilter">
                            <option value="">全部难度</option>
                            <option value="简单">简单</option>
                            <option value="中等">中等</option>
                            <option value="困难">困难</option>
                        </select>
                        <button class="btn btn-primary" onclick="openAddPoemModal()">添加诗词</button>
                    </div>

                    <div class="card">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>诗词名称</th>
                                    <th>难度</th>
                                    <th>内容摘要</th>
                                    <th>取号次数</th>
                                    <th>通过次数</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody id="poemsTableBody">
                                <!-- 动态渲染 -->
                            </tbody>
                        </table>
                    </div>
                </div>

                <!-- 排队管理 -->
                <div id="queuePage" class="page">
                    <div class="search-bar">
                        <select class="form-input" style="width:150px" id="queueStatusFilter">
                            <option value="">全部状态</option>
                            <option value="排队中">排队中</option>
                            <option value="叫号中">叫号中</option>
                            <option value="已完成">已完成</option>
                            <option value="已取消">已取消</option>
                        </select>
                        <input type="text" class="form-input" placeholder="搜索取号编号" style="width:200px" id="queueSearchInput">
                        <button class="btn btn-primary" onclick="callNextInQueue()">叫号下一位</button>
                    </div>

                    <div class="stat-grid" style="grid-template-columns: repeat(4, 1fr); margin-bottom: 20px;">
                        <div class="stat-card" onclick="filterQueueByStatus('排队中')" style="text-align:center">
                            <div class="stat-value" style="color:#1890ff" id="queueStatWaiting">0</div>
                            <div class="stat-label">排队中</div>
                        </div>
                        <div class="stat-card" onclick="filterQueueByStatus('叫号中')" style="text-align:center">
                            <div class="stat-value" style="color:#fa8c16" id="queueStatCalling">0</div>
                            <div class="stat-label">叫号中</div>
                        </div>
                        <div class="stat-card" onclick="filterQueueByStatus('已完成')" style="text-align:center">
                            <div class="stat-value" style="color:#52c41a" id="queueStatDone">0</div>
                            <div class="stat-label">今日完成</div>
                        </div>
                        <div class="stat-card" onclick="filterQueueByStatus('已取消')" style="text-align:center">
                            <div class="stat-value" style="color:#ff4d4f" id="queueStatCancelled">0</div>
                            <div class="stat-label">已取消</div>
                        </div>
                    </div>

                    <div class="card">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>取号编号</th>
                                    <th>用户</th>
                                    <th>背诵诗词</th>
                                    <th>取号时间</th>
                                    <th>状态</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody id="queueTableBody">
                                <!-- 动态渲染 -->
                            </tbody>
                        </table>
                    </div>
                </div>

                <!-- 门票管理 -->
                <div id="ticketsPage" class="page">
                    <div class="search-bar">
                        <select class="form-input" style="width:150px" id="ticketStatusFilter">
                            <option value="">全部状态</option>
                            <option value="有效">有效</option>
                            <option value="已使用">已使用</option>
                            <option value="已过期">已过期</option>
                        </select>
                        <input type="text" class="form-input" placeholder="搜索门票编号" style="width:200px" id="ticketSearchInput">
                        <button class="btn btn-default" onclick="showModal('exportModal')">导出数据</button>
                    </div>

                    <div class="stat-grid" style="grid-template-columns: repeat(3, 1fr); margin-bottom: 20px;">
                        <div class="stat-card" onclick="filterTicketsByStatus('有效')" style="text-align:center">
                            <div class="stat-value" style="color:#1890ff" id="ticketStatValid">0</div>
                            <div class="stat-label">有效门票</div>
                        </div>
                        <div class="stat-card" onclick="filterTicketsByStatus('已使用')" style="text-align:center">
                            <div class="stat-value" style="color:#52c41a" id="ticketStatUsed">0</div>
                            <div class="stat-label">已使用</div>
                        </div>
                        <div class="stat-card" onclick="filterTicketsByStatus('已过期')" style="text-align:center">
                            <div class="stat-value" style="color:#999" id="ticketStatExpired">0</div>
                            <div class="stat-label">已过期</div>
                        </div>
                    </div>

                    <div class="card">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>门票编号</th>
                                    <th>用户</th>
                                    <th>诗词</th>
                                    <th>获取时间</th>
                                    <th>有效期至</th>
                                    <th>状态</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody id="ticketsTableBody">
                                <!-- 动态渲染 -->
                            </tbody>
                        </table>
                        <div class="pagination">
                            <div class="page-item"><</div>
                            <div class="page-item active">1</div>
                            <div class="page-item">2</div>
                            <div class="page-item">></div>
                        </div>
                    </div>
                </div>

                <!-- 用户管理 -->
                <div id="usersPage" class="page">
                    <div class="search-bar">
                        <input type="text" class="form-input" placeholder="搜索用户手机号" id="userSearchInput">
                        <button class="btn btn-primary" onclick="showModal('addUserModal')">添加用户</button>
                    </div>

                    <div class="card">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>用户ID</th>
                                    <th>手机号</th>
                                    <th>取号次数</th>
                                    <th>通过次数</th>
                                    <th>获取门票</th>
                                    <th>注册时间</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody id="usersTableBody">
                                <!-- 动态渲染 -->
                            </tbody>
                        </table>
                        <div class="pagination">
                            <div class="page-item"><</div>
                            <div class="page-item active">1</div>
                            <div class="page-item">2</div>
                            <div class="page-item">></div>
                        </div>
                    </div>
                </div>

                <!-- 数据统计 -->
                <div id="statsPage" class="page">
                    <div class="search-bar">
                        <input type="date" class="form-input" style="width:180px" value="2024-03-01" id="statsStartDate">
                        <span style="line-height:36px">至</span>
                        <input type="date" class="form-input" style="width:180px" value="2024-03-15" id="statsEndDate">
                        <button class="btn btn-primary" onclick="queryStats()">查询</button>
                        <button class="btn btn-default" onclick="showModal('exportModal')">导出报表</button>
                    </div>

                    <div class="stat-grid" style="grid-template-columns: repeat(4, 1fr); margin-bottom: 20px;">
                        <div class="stat-card" style="text-align:center">
                            <div class="stat-icon blue">.</div>
                            <div class="stat-value">1,256</div>
                            <div class="stat-label">总取号数</div>
                        </div>
                        <div class="stat-card" style="text-align:center">
                            <div class="stat-icon green">*</div>
                            <div class="stat-value">892</div>
                            <div class="stat-label">总通过数</div>
                        </div>
                        <div class="stat-card" style="text-align:center">
                            <div class="stat-icon orange">=</div>
                            <div class="stat-value">71%</div>
                            <div class="stat-label">通过率</div>
                        </div>
                        <div class="stat-card" style="text-align:center">
                            <div class="stat-icon red">O</div>
                            <div class="stat-value">456</div>
                            <div class="stat-label">已发放门票</div>
                        </div>
                    </div>

                    <div class="card">
                        <div class="card-title">每日取号趋势</div>
                        <div class="chart-placeholder">
                            [图表展示区域 - 每日取号数量折线图]
                        </div>
                    </div>

                    <div class="card">
                        <div class="card-title">诗词热度排行</div>
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>排名</th>
                                    <th>诗词名称</th>
                                    <th>难度</th>
                                    <th>取号次数</th>
                                    <th>通过次数</th>
                                    <th>通过率</th>
                                </tr>
                            </thead>
                            <tbody id="statsPoemsRanking">
                                <!-- 动态渲染 -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 添加/编辑诗词弹窗 -->
    <div class="modal-overlay" id="poemModal">
        <div class="modal">
            <div class="modal-header">
                <span id="poemModalTitle">添加诗词</span>
                <span class="close" onclick="closeModal('poemModal')">×</span>
            </div>
            <div class="modal-body">
                <input type="hidden" id="poemEditId">
                <div class="form-group">
                    <label class="form-label">诗词名称</label>
                    <input type="text" class="form-input" id="poemNameInput" placeholder="请输入诗词名称">
                </div>
                <div class="form-row">
                    <div class="form-group">
                        <label class="form-label">难度等级</label>
                        <select class="form-input" id="poemDifficultyInput">
                            <option value="简单">简单</option>
                            <option value="中等">中等</option>
                            <option value="困难">困难</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="form-label">诗词内容</label>
                    <textarea class="form-input" id="poemContentInput" rows="4" placeholder="请输入诗词完整内容">