feat: 添加学员详情/方案编辑/方案列表新页面

- student.html: 学员详情页，支持编辑/添加/删除问题 - plan_edit.html: 方案编辑页 - plans.html: 方案列表页 - home.html: 首页
2026-04-23 06:38:44 +08:00
parent 18351212e8
commit baaa6ca2f8
5 changed files with 1137 additions and 0 deletions
@@ -0,0 +1,46 @@
+{% extends "base.html" %}
+
+{% block title %}首页 - 钢琴练习方案系统{% endblock %}
+
+{% block content %}
+<div class="row g-4 mb-4">
+    <div class="col-md-4">
+        <div class="card text-center h-100">
+            <div class="card-body">
+                <i class="bi bi-people text-primary fs-1"></i>
+                <h2 class="mt-2">{{ student_count }}</h2>
+                <p class="text-muted">学员</p>
+                <a href="/students" class="btn btn-outline-primary btn-sm">查看</a>
+            </div>
+        </div>
+    </div>
+    <div class="col-md-4">
+        <div class="card text-center h-100">
+            <div class="card-body">
+                <i class="bi bi-collection text-success fs-1"></i>
+                <h2 class="mt-2">{{ class_count }}</h2>
+                <p class="text-muted">班级</p>
+                <a href="/classes" class="btn btn-outline-success btn-sm">查看</a>
+            </div>
+        </div>
+    </div>
+    <div class="col-md-4">
+        <div class="card text-center h-100">
+            <div class="card-body">
+                <i class="bi bi-clipboard-check text-warning fs-1"></i>
+                <h2 class="mt-2">{{ plan_count }}</h2>
+                <p class="text-muted">方案</p>
+                <a href="/plans" class="btn btn-outline-warning btn-sm">查看</a>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class="card">
+    <div class="card-body text-center py-5">
+        <i class="bi bi-music-note-beamed text-muted" style="font-size: 48px;"></i>
+        <h4 class="mt-3 text-muted">欢迎使用钢琴练习方案管理系统</h4>
+        <p class="text-muted">从左侧菜单选择功能</p>
+    </div>
+</div>
+{% endblock %}
@@ -0,0 +1,117 @@
+{% extends "base.html" %}
+
+{% block title %}方案详情 - 钢琴练习方案系统{% endblock %}
+
+{% block content %}
+<div class="d-flex justify-content-between align-items-center mb-4">
+    <h4><i class="bi bi-file-text"></i> 方案详情</h4>
+    <div>
+        <button onclick="history.back()" class="btn btn-outline-secondary">
+            <i class="bi bi-arrow-left"></i> 返回
+        </button>
+    </div>
+</div>
+
+<div id="planContent" class="card">
+    <div class="card-body">
+        <div class="text-center text-muted py-5">
+            <i class="bi bi-hourglass fs-4"></i>
+            <p class="mt-2">加载中...</p>
+        </div>
+    </div>
+</div>
+{% endblock %}
+
+{% block extra_js %}
+<script>
+var currentPlanId = null;
+
+async function loadPlan() {
+    currentPlanId = window.location.pathname.split('/').pop();
+    try {
+        const resp = await fetch(`/api/plans/${currentPlanId}`);
+        const data = await resp.json();
+        window.currentStudentId = data.student_id;
+
+        let html = `
+            <div class="mb-3">
+                <strong>学员：</strong>${data.student_name} &nbsp;&nbsp;
+                <strong>练习时间：</strong>${data.content.practice_time} &nbsp;&nbsp;
+                <strong>生成时间：</strong>${data.created_at} &nbsp;&nbsp;
+                <strong>模板：</strong>${data.template_name || '无'}
+                <div class="mt-2">
+                    <a href="/?student_id=${data.student_id}&from=${encodeURIComponent(window.location.href)}" class="btn btn-sm btn-outline-primary">
+                        <i class="bi bi-person"></i> 查看学员
+                    </a>
+                    <a href="/plan/${currentPlanId}/edit" class="btn btn-sm btn-warning">
+                        <i class="bi bi-edit"></i> 编辑
+                    </a>
+                    <button onclick="downloadPDF()" class="btn btn-sm btn-primary">
+                        <i class="bi bi-download"></i> 下载PDF
+                    </button>
+                    <button onclick="downloadMD()" class="btn btn-sm btn-outline-primary">
+                        <i class="bi bi-file-markdown"></i> 下载MD
+                    </button>
+                </div>
+            </div>
+            <hr>
+            <h6>问题诊断</h6>
+            <div class="mb-3">
+        `;
+
+        data.content.problems.forEach(p => {
+            html += `<span class="problem-tag severity-${p.severity}">${p.name}（${p.severity}）</span> `;
+        });
+
+        html += `</div>`;
+
+        if (data.content.ai_report) {
+            const aiReportHtml = marked.parse(data.content.ai_report);
+            html += `
+                <h6>AI个性化练习报告</h6>
+                <div class="mb-3 p-3 bg-light rounded">${aiReportHtml}</div>
+            `;
+        } else if (data.content.ai_report_error) {
+            html += `
+                <h6>AI报告</h6>
+                <div class="mb-3 p-3 bg-warning rounded">AI生成失败: ${data.content.ai_report_error}</div>
+            `;
+        }
+
+        html += `
+            <h6>每日练习计划（共${data.content.total_daily_minutes}分钟）</h6>
+            <table class="table table-sm">
+                <thead><tr><th>环节</th><th>时长</th><th>内容</th><th>目的</th></tr></thead>
+                <tbody>
+        `;
+
+        data.content.daily_schedule.forEach(item => {
+            html += `<tr><td>${item.phase}</td><td>${item.duration}</td><td>${item.content}</td><td>${item.purpose}</td></tr>`;
+        });
+
+        html += '</tbody></table>';
+
+        document.getElementById('planContent').innerHTML = html;
+    } catch (e) {
+        document.getElementById('planContent').innerHTML = `
+            <div class="card-body text-center text-danger py-5">
+                <i class="bi bi-exclamation-triangle fs-4"></i>
+                <p class="mt-2">加载失败: ${e.message}</p>
+            </div>
+        `;
+    }
+}
+
+function downloadPDF() {
+    window.open(`/api/plans/${currentPlanId}/pdf`, '_blank');
+}
+
+function downloadMD() {
+    window.open(`/api/plans/${currentPlanId}/md`, '_blank');
+}
+
+window.currentStudentId = null;
+
+loadPlan();
+</script>
+{% endblock %}
@@ -0,0 +1,170 @@
+{% extends "base.html" %}
+
+{% block title %}编辑方案 - 钢琴练习方案系统{% endblock %}
+
+{% block content %}
+<div class="d-flex justify-content-between align-items-center mb-4">
+    <h4><i class="bi bi-edit"></i> 编辑方案</h4>
+    <div>
+        <a href="/plan/{{ plan_id }}" class="btn btn-outline-secondary">
+            <i class="bi bi-arrow-left"></i> 返回详情
+        </a>
+    </div>
+</div>
+
+<div class="card">
+    <div class="card-body">
+        <ul class="nav nav-tabs" id="editContentTabs" role="tablist">
+            <li class="nav-item" role="presentation">
+                <button class="nav-link active" id="aiReport-tab" data-bs-toggle="tab" data-bs-target="#aiReportPane" type="button">AI报告</button>
+            </li>
+            <li class="nav-item" role="presentation">
+                <button class="nav-link" id="dailySchedule-tab" data-bs-toggle="tab" data-bs-target="#dailySchedulePane" type="button">每日练习计划</button>
+            </li>
+        </ul>
+        <div class="tab-content mt-3" id="editContentTabContent">
+            <div class="tab-pane fade show active" id="aiReportPane" role="tabpanel">
+                <div class="alert alert-info">
+                    <i class="bi bi-info-circle"></i> 使用 Markdown 格式编辑AI报告，支持标题、列表、加粗等格式
+                </div>
+                <textarea id="editAiReport" style="display:none;"></textarea>
+                <div id="editAiReportEditor"></div>
+            </div>
+            <div class="tab-pane fade" id="dailySchedulePane" role="tabpanel">
+                <div class="alert alert-info mb-2">
+                    <i class="bi bi-info-circle"></i> 支持拖拽排序，双击单元格编辑、点击+添加行、点击×删除行
+                </div>
+                <div id="editDailyScheduleTable" style="height: 400px; max-height: 600px;"></div>
+                <button type="button" class="btn btn-outline-primary btn-sm mt-2" onclick="addScheduleRow()">
+                    <i class="bi bi-plus"></i> 添加一行
+                </button>
+            </div>
+        </div>
+    </div>
+    <div class="card-footer">
+        <button type="button" class="btn btn-secondary" onclick="history.back()">取消</button>
+        <button type="button" class="btn btn-primary" onclick="savePlanContent()">
+            <i class="bi bi-save"></i> 保存
+        </button>
+    </div>
+</div>
+{% endblock %}
+
+{% block extra_js %}
+<script>
+let planContentEditor = null;
+let scheduleTable = null;
+let editPlanOriginalState = { ai_report: '', scheduleData: [] };
+
+window.pageInit = function() {
+    loadPlanForEdit();
+};
+
+async function loadPlanForEdit() {
+    const planId = {{ plan_id }};
+    try {
+        const resp = await fetch(`/api/plans/${planId}`);
+        const data = await resp.json();
+        const content = typeof data.content === 'string' ? JSON.parse(data.content) : data.content;
+
+        document.getElementById('editAiReport').value = content.ai_report || '';
+
+        if (planContentEditor) {
+            planContentEditor.toTextArea();
+            planContentEditor = null;
+        }
+        planContentEditor = new EasyMDE({
+            element: document.getElementById('editAiReport'),
+            spellChecker: false,
+            status: false,
+            toolbar: ['bold', 'italic', 'heading', '|', 'code', 'quote', 'unordered-list', '|', 'side-by-side', 'fullscreen'],
+            initialValue: content.ai_report || ''
+        });
+
+        const scheduleData = (content.daily_schedule || []).map(item => ({
+            phase: item.phase || '',
+            duration: item.duration || '',
+            content: item.content || '',
+            purpose: item.purpose || ''
+        }));
+
+        editPlanOriginalState.ai_report = content.ai_report || '';
+        editPlanOriginalState.scheduleData = JSON.parse(JSON.stringify(scheduleData));
+
+        if (scheduleTable) {
+            scheduleTable.destroy();
+            scheduleTable = null;
+        }
+        scheduleTable = new Tabulator("#editDailyScheduleTable", {
+            height: "100%",
+            data: scheduleData,
+            layout: "fitColumns",
+            movableRows: true,
+            editable: true,
+            addRowPos: "bottom",
+            columns: [
+                { title: "环节", field: "phase", editor: "input", width: 120 },
+                { title: "时长", field: "duration", editor: "input", width: 100 },
+                { title: "内容", field: "content", editor: "input", minWidth: 200 },
+                { title: "目的", field: "purpose", editor: "input", minWidth: 150 },
+                {
+                    title: "操作",
+                    width: 80,
+                    formatter: function(cell) {
+                        return "<button type='button' class='btn btn-sm btn-outline-danger'><i class='bi bi-trash'></i></button>";
+                    },
+                    cellClick: function(e, cell) {
+                        cell.getRow().delete();
+                    }
+                }
+            ]
+        });
+
+    } catch (e) {
+        alert('加载方案失败: ' + e.message);
+    }
+}
+
+function addScheduleRow() {
+    if (scheduleTable) {
+        scheduleTable.addRow({ phase: '', duration: '', content: '', purpose: '' });
+    }
+}
+
+async function savePlanContent() {
+    const planId = {{ plan_id }};
+    const currentAiReport = planContentEditor ? planContentEditor.value() : document.getElementById('editAiReport').value;
+    const tableData = scheduleTable ? scheduleTable.getData() : [];
+
+    const hasChanges = currentAiReport !== editPlanOriginalState.ai_report ||
+        JSON.stringify(tableData) !== JSON.stringify(editPlanOriginalState.scheduleData);
+
+    if (!hasChanges) {
+        alert('没有修改，无需保存');
+        return;
+    }
+
+    if (!confirm('确定要保存修改吗？')) return;
+
+    try {
+        const resp = await fetch(`/api/plans/${planId}`, {
+            method: 'PUT',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                ai_report: currentAiReport,
+                daily_schedule: tableData
+            })
+        });
+
+        if (resp.ok) {
+            alert('保存成功');
+            window.location.href = `/plan/${planId}`;
+        } else {
+            alert('保存失败');
+        }
+    } catch (e) {
+        alert('保存失败: ' + e.message);
+    }
+}
+</script>
+{% endblock %}
@@ -0,0 +1,221 @@
+{% extends "base.html" %}
+
+{% block title %}方案管理 - 钢琴练习方案系统{% endblock %}
+
+{% block page_css %}
+<style>
+    .plan-table th { white-space: nowrap; }
+    .plan-problem-text { font-weight: 600; color: #2c3e50; }
+    .plan-meta-text { color: #95a5a6; font-size: 0.85rem; }
+</style>
+{% endblock %}
+
+{% block content %}
+<div class="d-flex justify-content-between align-items-center mb-4">
+    <h4><i class="bi bi-clipboard-check"></i> 方案管理</h4>
+</div>
+
+<!-- 筛选器 -->
+<div class="card mb-3">
+    <div class="card-body">
+        <div class="row g-3">
+            <div class="col-md-2">
+                <label class="form-label small">班级</label>
+                <select class="form-select" id="filterClass" onchange="loadPlans()">
+                    <option value="">全部班级</option>
+                </select>
+            </div>
+            <div class="col-md-2">
+                <label class="form-label small">问题</label>
+                <select class="form-select" id="filterProblem" onchange="loadPlans()">
+                    <option value="">全部问题</option>
+                </select>
+            </div>
+            <div class="col-md-2">
+                <label class="form-label small">模板</label>
+                <select class="form-select" id="filterTemplate" onchange="loadPlans()">
+                    <option value="">全部模板</option>
+                </select>
+            </div>
+            <div class="col-md-2">
+                <label class="form-label small">典型方案</label>
+                <select class="form-select" id="filterTypical" onchange="loadPlans()">
+                    <option value="">全部</option>
+                    <option value="true">仅典型</option>
+                </select>
+            </div>
+            <div class="col-md-3">
+                <label class="form-label small">学员姓名</label>
+                <input type="text" class="form-control" id="filterStudentName" placeholder="模糊搜索..." oninput="debounceLoad()">
+            </div>
+            <div class="col-md-1 d-flex align-items-end">
+                <button class="btn btn-outline-secondary w-100" onclick="clearFilters()">清空</button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- 方案列表 -->
+<div class="card">
+    <div class="card-body">
+        <div id="plansContainer">
+            <div class="text-center text-muted py-5">
+                <i class="bi bi-hourglass-split fs-1"></i>
+                <p class="mt-2">加载中...</p>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}
+
+{% block extra_js %}
+<script>
+// 防抖定时器
+let debounceTimer = null;
+
+function debounceLoad() {
+    clearTimeout(debounceTimer);
+    debounceTimer = setTimeout(loadPlans, 300);
+}
+
+// 页面初始化
+window.pageInit = function() {
+    loadFilters();
+    loadPlans();
+};
+
+// 加载筛选器选项
+async function loadFilters() {
+    // 加载班级
+    try {
+        const resp = await fetch('/api/classes');
+        const classes = await resp.json();
+        const classSelect = document.getElementById('filterClass');
+        classes.forEach(c => {
+            classSelect.innerHTML += `<option value="${c.id}">${c.name}</option>`;
+        });
+    } catch (e) {
+        console.error('加载班级失败', e);
+    }
+
+    // 加载问题
+    try {
+        const resp = await fetch('/api/problems');
+        const problems = await resp.json();
+        const problemSelect = document.getElementById('filterProblem');
+        problems.forEach(p => {
+            problemSelect.innerHTML += `<option value="${p.id}">${p.name}</option>`;
+        });
+    } catch (e) {
+        console.error('加载问题失败', e);
+    }
+
+    // 加载模板
+    try {
+        const resp = await fetch('/templates/templates');
+        const templates = await resp.json();
+        const templateSelect = document.getElementById('filterTemplate');
+        templates.filter(t => t.type === 'ai_prompt').forEach(t => {
+            templateSelect.innerHTML += `<option value="${t.id}">${t.name}</option>`;
+        });
+    } catch (e) {
+        console.error('加载模板失败', e);
+    }
+}
+
+// 加载方案列表
+async function loadPlans() {
+    const container = document.getElementById('plansContainer');
+    container.innerHTML = '<div class="text-center text-muted py-5"><i class="bi bi-hourglass fs-4"></i><p class="mt-2">加载中...</p></div>';
+
+    try {
+        const params = new URLSearchParams();
+
+        const classId = document.getElementById('filterClass').value;
+        if (classId) params.append('class_id', classId);
+
+        const templateId = document.getElementById('filterTemplate').value;
+        if (templateId) params.append('template_id', templateId);
+
+        const isTypical = document.getElementById('filterTypical').value;
+        if (isTypical === 'true') params.append('is_typical', 'true');
+
+        const studentName = document.getElementById('filterStudentName').value.trim();
+        if (studentName) params.append('student_name', studentName);
+
+        const problemId = document.getElementById('filterProblem').value;
+        if (problemId) {
+            params.append('problem_ids', parseInt(problemId));
+        }
+
+        const resp = await fetch(`/api/plans?${params}`);
+        const plans = await resp.json();
+
+        if (plans.length === 0) {
+            container.innerHTML = '<div class="text-center text-muted py-5"><i class="bi bi-inbox fs-4"></i><p class="mt-2">暂无方案</p></div>';
+            return;
+        }
+
+        let html = `
+            <table class="table table-hover table-sm">
+                <thead>
+                    <tr>
+                        <th>学员</th>
+                        <th>班级</th>
+                        <th>问题</th>
+                        <th>模板</th>
+                        <th>典型</th>
+                        <th>时间</th>
+                        <th>操作</th>
+                    </tr>
+                </thead>
+                <tbody>
+        `;
+
+        plans.forEach(p => {
+            const problems = (p.problem_names || []).slice(0, 3).join('、');
+            const moreProblems = (p.problem_names || []).length > 3 ? `等${p.problem_names.length}个` : '';
+            const template = p.template_name || '无模板';
+            const studentName = p.student_name || '未知';
+            const className = p.class_name || '-';
+            const isTypical = p.is_typical ? '✓' : '';
+
+            html += `
+                <tr>
+                    <td><strong>${studentName}</strong></td>
+                    <td>${className}</td>
+                    <td><span class="plan-problem-text">${problems}${moreProblems}</span></td>
+                    <td class="text-muted small">${template}</td>
+                    <td class="text-center">${isTypical ? '<span class="text-warning">★</span>' : ''}</td>
+                    <td class="text-muted small">${p.created_at || ''}</td>
+                    <td>
+                        <button class="btn btn-sm btn-outline-primary" onclick="viewPlan(${p.id})">查看</button>
+                    </td>
+                </tr>
+            `;
+        });
+
+        html += '</tbody></table>';
+        container.innerHTML = html;
+
+    } catch (e) {
+        container.innerHTML = `<div class="text-center text-danger py-5"><i class="bi bi-exclamation-circle fs-4"></i><p class="mt-2">加载失败: ${e.message}</p></div>`;
+    }
+}
+
+// 清空筛选器
+function clearFilters() {
+    document.getElementById('filterClass').value = '';
+    document.getElementById('filterProblem').value = '';
+    document.getElementById('filterTemplate').value = '';
+    document.getElementById('filterTypical').value = '';
+    document.getElementById('filterStudentName').value = '';
+    loadPlans();
+}
+
+// 查看方案 - 跳转到方案详情页
+function viewPlan(planId) {
+    window.location.href = `/plan/${planId}`;
+}
+</script>
+{% endblock %}
@@ -0,0 +1,583 @@
+{% extends "base.html" %}
+
+{% block title %}{{ student.name }} - 学员详情 - 钢琴练习方案系统{% endblock %}
+
+{% block content %}
+<div class="d-flex justify-content-between align-items-center mb-4">
+    <h4><i class="bi bi-person"></i> 学员详情</h4>
+    <div>
+        <a href="/students" class="btn btn-outline-secondary">
+            <i class="bi bi-arrow-left"></i> 返回列表
+        </a>
+    </div>
+</div>
+
+<div class="row">
+    <div class="col-md-4">
+        <div class="card mb-4">
+            <div class="card-body text-center">
+                <div class="avatar mb-3">
+                    <i class="bi bi-person-circle" style="font-size: 60px; color: #6c757d;"></i>
+                </div>
+                <h5 id="detailName">{{ student.name }}</h5>
+                <p class="text-muted" id="detailWechatNickname">{{ student.wechat_nickname or '未填写' }}</p>
+                <p class="text-muted" id="detailPhone">{{ student.phone or '未填写' }}</p>
+                <p class="small">
+                    <span class="badge bg-info" id="detailPracticeTime">{{ student.practice_time or '30分钟' }}</span>
+                </p>
+                <p class="small" id="detailClass">
+                    {% if student.class_obj %}
+                        <span class="badge bg-secondary">{{ student.class_obj.name }}</span>
+                    {% else %}
+                        <span class="text-muted">未分配班级</span>
+                    {% endif %}
+                </p>
+                <p class="small text-muted" id="detailNotes">{{ student.notes or '无备注' }}</p>
+                <button type="button" class="btn btn-sm btn-outline-primary" onclick="showEditStudentModal()">
+                    <i class="bi bi-pencil"></i> 编辑
+                </button>
+                <button type="button" class="btn btn-sm btn-outline-danger" onclick="deleteStudent()">
+                    <i class="bi bi-trash"></i> 删除
+                </button>
+            </div>
+        </div>
+    </div>
+
+    <div class="col-md-8">
+        <div class="card mb-4">
+            <div class="card-header d-flex justify-content-between align-items-center">
+                <h6 class="mb-0"><i class="bi bi-list-check"></i> 问题记录</h6>
+                <button class="btn btn-sm btn-primary" onclick="showAddProblemModal()">
+                    <i class="bi bi-plus"></i> 添加问题
+                </button>
+            </div>
+            <div class="card-body" id="problemList">
+                <p class="text-muted">加载中...</p>
+            </div>
+        </div>
+
+        <div class="card">
+            <div class="card-header d-flex justify-content-between align-items-center">
+                <h6 class="mb-0"><i class="bi bi-clipboard-check"></i> 练习方案</h6>
+                <button class="btn btn-sm btn-primary" onclick="generatePlan()">
+                    <i class="bi bi-plus"></i> 生成方案
+                </button>
+            </div>
+            <div class="card-body" id="planList">
+                <p class="text-muted">加载中...</p>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- 编辑学员 Modal -->
+<div class="modal fade" id="editStudentModal" tabindex="-1">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title">编辑学员</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+            </div>
+            <div class="modal-body">
+                <input type="hidden" id="editStudentId" value="{{ student.id }}">
+                <div class="mb-3">
+                    <label class="form-label">姓名 *</label>
+                    <input type="text" class="form-control" id="editStudentName" required>
+                </div>
+                <div class="mb-3">
+                    <label class="form-label">手机号</label>
+                    <input type="text" class="form-control" id="editStudentPhone">
+                </div>
+                <div class="mb-3">
+                    <label class="form-label">微信昵称</label>
+                    <input type="text" class="form-control" id="editStudentWechat">
+                </div>
+                <div class="mb-3">
+                    <label class="form-label">每日练习时间</label>
+                    <select class="form-select" id="editStudentPracticeTime">
+                        <option value="15分钟">15分钟</option>
+                        <option value="30分钟">30分钟</option>
+                        <option value="45分钟">45分钟</option>
+                        <option value="60分钟">60分钟</option>
+                        <option value="90分钟">90分钟</option>
+                        <option value="120分钟">120分钟</option>
+                        <option value="150分钟以上">150分钟以上</option>
+                    </select>
+                </div>
+                <div class="mb-3">
+                    <label class="form-label">备注</label>
+                    <textarea class="form-control" id="editStudentNotes" rows="2"></textarea>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
+                <button type="button" class="btn btn-primary" onclick="saveStudentEdit()">保存</button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- 添加问题 Modal -->
+<div class="modal fade" id="addProblemModal" tabindex="-1">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title">添加问题</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+            </div>
+            <div class="modal-body">
+                <div class="mb-3">
+                    <label class="form-label">问题 *</label>
+                    <select class="form-select" id="addProblemSelect" required>
+                        <option value="">选择问题...</option>
+                    </select>
+                </div>
+                <div class="mb-3">
+                    <label class="form-label">严重程度 *</label>
+                    <select class="form-select" id="addProblemSeverity" required>
+                        <option value="轻微">轻微</option>
+                        <option value="中等" selected>中等</option>
+                        <option value="严重">严重</option>
+                    </select>
+                </div>
+                <div class="mb-3">
+                    <label class="form-label">级别 *</label>
+                    <select class="form-select" id="addProblemLevel" required>
+                        <option value="启蒙">启蒙</option>
+                        <option value="入门" selected>入门</option>
+                        <option value="进阶">进阶</option>
+                        <option value="熟练">熟练</option>
+                        <option value="精通">精通</option>
+                    </select>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
+                <button type="button" class="btn btn-primary" onclick="saveAddProblem()">添加</button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- 编辑问题 Modal -->
+<div class="modal fade" id="editProblemModal" tabindex="-1">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title">编辑问题</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+            </div>
+            <div class="modal-body">
+                <input type="hidden" id="editProblemId">
+                <div class="mb-3">
+                    <label class="form-label">问题</label>
+                    <input type="text" class="form-control" id="editProblemName" readonly>
+                </div>
+                <div class="mb-3">
+                    <label class="form-label">严重程度 *</label>
+                    <select class="form-select" id="editProblemSeverity" required>
+                        <option value="轻微">轻微</option>
+                        <option value="中等">中等</option>
+                        <option value="严重">严重</option>
+                    </select>
+                </div>
+                <div class="mb-3">
+                    <label class="form-label">级别 *</label>
+                    <select class="form-select" id="editProblemLevel" required>
+                        <option value="启蒙">启蒙</option>
+                        <option value="入门">入门</option>
+                        <option value="进阶">进阶</option>
+                        <option value="熟练">熟练</option>
+                        <option value="精通">精通</option>
+                    </select>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
+                <button type="button" class="btn btn-primary" onclick="saveProblemEdit()">保存</button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- 生成方案 Modal -->
+<div class="modal fade" id="generatePlanModal" tabindex="-1" data-bs-backdrop="static">
+    <div class="modal-dialog modal-lg">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title">生成练习方案</h5>
+            </div>
+            <div class="modal-body">
+                <div class="mb-3">
+                    <label class="form-label">学员：{{ student.name }}</label>
+                </div>
+                <div class="mb-3">
+                    <div class="form-check">
+                        <input class="form-check-input" type="checkbox" id="useAiReport" checked>
+                        <label class="form-check-label" for="useAiReport">
+                            生成AI个性化报告（需要配置API）
+                        </label>
+                    </div>
+                </div>
+                <div class="mb-3">
+                    <div class="progress" style="height: 25px;">
+                        <div id="progressBar" class="progress-bar progress-bar-striped progress-bar-animated"
+                             role="progressbar" style="width: 0%">0%</div>
+                    </div>
+                </div>
+                <div class="mb-3">
+                    <strong id="progressText">准备中...</strong>
+                </div>
+                <div id="progressLog" class="bg-light p-3 rounded" style="height: 200px; overflow-y: auto; font-family: monospace;">
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
+                <button type="button" class="btn btn-primary" id="startGenerateBtn" onclick="startGeneratePlan()">开始生成</button>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}
+
+{% block extra_js %}
+<script>
+const currentStudentId = {{ student.id }};
+const studentName = "{{ student.name }}";
+let problemModal, editProblemModal, generateModal, editStudentModal;
+
+document.addEventListener('DOMContentLoaded', function() {
+    problemModal = new bootstrap.Modal(document.getElementById('addProblemModal'));
+    editProblemModal = new bootstrap.Modal(document.getElementById('editProblemModal'));
+    generateModal = new bootstrap.Modal(document.getElementById('generatePlanModal'));
+    editStudentModal = new bootstrap.Modal(document.getElementById('editStudentModal'));
+
+    // 填充编辑学员表单初始值
+    document.getElementById('editStudentName').value = document.getElementById('detailName').textContent;
+    document.getElementById('editStudentPhone').value = document.getElementById('detailPhone').textContent === '未填写' ? '' : document.getElementById('detailPhone').textContent;
+    document.getElementById('editStudentWechat').value = document.getElementById('detailWechatNickname').textContent === '未填写' ? '' : document.getElementById('detailWechatNickname').textContent;
+    document.getElementById('editStudentPracticeTime').value = document.getElementById('detailPracticeTime').textContent;
+    document.getElementById('editStudentNotes').value = document.getElementById('detailNotes').textContent === '无备注' ? '' : document.getElementById('detailNotes').textContent;
+
+    loadProblems();
+    loadPlans();
+    loadProblemOptions();
+});
+
+async function loadProblemOptions() {
+    try {
+        const resp = await fetch('/api/problems');
+        const problems = await resp.json();
+        const select = document.getElementById('addProblemSelect');
+        select.innerHTML = '<option value="">选择问题...</option>';
+        problems.forEach(p => {
+            select.innerHTML += `<option value="${p.id}">${p.no} - ${p.name}</option>`;
+        });
+    } catch (e) {
+        console.error('加载问题列表失败', e);
+    }
+}
+
+async function loadProblems() {
+    try {
+        const resp = await fetch(`/api/students/${currentStudentId}/problems`);
+        const problems = await resp.json();
+        renderProblemList(problems);
+    } catch (e) {
+        document.getElementById('problemList').innerHTML = '<p class="text-danger">加载失败</p>';
+    }
+}
+
+function renderProblemList(problems) {
+    const container = document.getElementById('problemList');
+    if (problems.length === 0) {
+        container.innerHTML = '<p class="text-muted">暂无问题记录</p>';
+        return;
+    }
+    container.innerHTML = problems.map(p => `
+        <div class="d-flex justify-content-between align-items-center mb-2 p-2 border rounded">
+            <div>
+                <strong>${p.problem_name}</strong>
+                <span class="badge bg-${p.severity === '严重' ? 'danger' : p.severity === '中等' ? 'warning' : 'info'} ms-2">${p.severity}</span>
+                <span class="badge bg-secondary ms-1">${p.level}</span>
+            </div>
+            <div>
+                <button class="btn btn-sm btn-outline-primary me-1" onclick="showEditProblemModal(${p.id}, '${p.problem_name}', '${p.severity}', '${p.level}')">
+                    <i class="bi bi-pencil"></i>
+                </button>
+                <button class="btn btn-sm btn-outline-danger" onclick="deleteProblem(${p.id})">
+                    <i class="bi bi-trash"></i>
+                </button>
+            </div>
+        </div>
+    `).join('');
+}
+
+async function loadPlans() {
+    try {
+        const resp = await fetch(`/api/students/${currentStudentId}/plans`);
+        const plans = await resp.json();
+        renderPlanList(plans);
+    } catch (e) {
+        document.getElementById('planList').innerHTML = '<p class="text-danger">加载失败</p>';
+    }
+}
+
+function renderPlanList(plans) {
+    const container = document.getElementById('planList');
+    if (plans.length === 0) {
+        container.innerHTML = '<p class="text-muted">暂无练习方案</p>';
+        return;
+    }
+    container.innerHTML = plans.map(p => `
+        <div class="d-flex align-items-center mb-2 p-2 border rounded">
+            <a href="/plan/${p.id}" class="btn btn-sm btn-outline-primary me-2">查看</a>
+            <span class="flex-grow-1">${p.created_at ? p.created_at.substring(0, 10) : '未知'}</span>
+            <button class="btn btn-sm btn-outline-danger" onclick="deletePlan(${p.id})">
+                <i class="bi bi-trash"></i>
+            </button>
+        </div>
+    `).join('');
+}
+
+function showEditStudentModal() {
+    editStudentModal.show();
+}
+
+async function saveStudentEdit() {
+    const data = {
+        name: document.getElementById('editStudentName').value,
+        phone: document.getElementById('editStudentPhone').value,
+        wechat_nickname: document.getElementById('editStudentWechat').value,
+        practice_time: document.getElementById('editStudentPracticeTime').value,
+        notes: document.getElementById('editStudentNotes').value,
+    };
+
+    try {
+        const resp = await fetch(`/api/students/${currentStudentId}`, {
+            method: 'PUT',
+            headers: {'Content-Type': 'application/json'},
+            body: JSON.stringify(data)
+        });
+        if (resp.ok) {
+            editStudentModal.hide();
+            location.reload();
+        } else {
+            alert('保存失败');
+        }
+    } catch (e) {
+        alert('保存失败: ' + e.message);
+    }
+}
+
+function deleteStudent() {
+    if (!confirm('确定删除该学员？所有问题和方案都将被删除！')) return;
+    fetch(`/api/students/${currentStudentId}`, {method: 'DELETE'})
+        .then(r => r.json())
+        .then(() => window.location.href = '/students');
+}
+
+function showAddProblemModal() {
+    document.getElementById('addProblemSelect').value = '';
+    document.getElementById('addProblemSeverity').value = '中等';
+    document.getElementById('addProblemLevel').value = '入门';
+    problemModal.show();
+}
+
+async function saveAddProblem() {
+    const problemId = document.getElementById('addProblemSelect').value;
+    const severity = document.getElementById('addProblemSeverity').value;
+    const level = document.getElementById('addProblemLevel').value;
+
+    if (!problemId) {
+        alert('请选择问题');
+        return;
+    }
+
+    try {
+        const resp = await fetch(`/api/students/${currentStudentId}/problems`, {
+            method: 'POST',
+            headers: {'Content-Type': 'application/json'},
+            body: JSON.stringify({
+                problems: [{problem_id: parseInt(problemId), severity, level}]
+            })
+        });
+        if (resp.ok) {
+            problemModal.hide();
+            loadProblems();
+        } else {
+            const err = await resp.json();
+            alert('添加失败: ' + (err.error || '未知错误'));
+        }
+    } catch (e) {
+        alert('添加失败: ' + e.message);
+    }
+}
+
+function showEditProblemModal(id, name, severity, level) {
+    document.getElementById('editProblemId').value = id;
+    document.getElementById('editProblemName').value = name;
+    document.getElementById('editProblemSeverity').value = severity;
+    document.getElementById('editProblemLevel').value = level;
+    editProblemModal.show();
+}
+
+async function saveProblemEdit() {
+    const id = document.getElementById('editProblemId').value;
+    const severity = document.getElementById('editProblemSeverity').value;
+    const level = document.getElementById('editProblemLevel').value;
+
+    // 获取当前问题列表找到对应的 problem_db_id
+    const resp = await fetch(`/api/students/${currentStudentId}/problems`);
+    const problems = await resp.json();
+    const problem = problems.find(p => p.id === parseInt(id));
+    if (!problem) {
+        alert('问题不存在');
+        return;
+    }
+
+    // 调用更新 API
+    try {
+        const updateResp = await fetch(`/api/students/${currentStudentId}/problems/${id}`, {
+            method: 'PUT',
+            headers: {'Content-Type': 'application/json'},
+            body: JSON.stringify({severity, level})
+        });
+        if (updateResp.ok) {
+            editProblemModal.hide();
+            loadProblems();
+        } else {
+            alert('更新失败');
+        }
+    } catch (e) {
+        alert('更新失败: ' + e.message);
+    }
+}
+
+async function deleteProblem(id) {
+    if (!confirm('确定删除该问题？')) return;
+    try {
+        const resp = await fetch(`/api/students/${currentStudentId}/problems/${id}`, {
+            method: 'DELETE'
+        });
+        if (resp.ok) {
+            loadProblems();
+        } else {
+            alert('删除失败');
+        }
+    } catch (e) {
+        alert('删除失败: ' + e.message);
+    }
+}
+
+function generatePlan() {
+    const progressBar = document.getElementById('progressBar');
+    const progressText = document.getElementById('progressText');
+    const progressLog = document.getElementById('progressLog');
+
+    progressBar.style.width = '0%';
+    progressBar.textContent = '0%';
+    progressText.textContent = '准备中...';
+    progressLog.innerHTML = '';
+    generateModal.show();
+}
+
+async function startGeneratePlan() {
+    const progressBar = document.getElementById('progressBar');
+    const progressText = document.getElementById('progressText');
+    const progressLog = document.getElementById('progressLog');
+    const useAi = document.getElementById('useAiReport').checked;
+
+    progressBar.style.width = '0%';
+    progressText.textContent = '准备中...';
+    progressLog.innerHTML = '';
+
+    function addLog(msg, isError = false) {
+        const time = new Date().toLocaleTimeString();
+        progressLog.innerHTML += `<div class="${isError ? 'text-danger' : 'text-muted'} small">${time} ${msg}</div>`;
+        progressLog.scrollTop = progressLog.scrollHeight;
+    }
+
+    try {
+        const response = await fetch('/api/generate-plan', {
+            method: 'POST',
+            headers: {'Content-Type': 'application/json'},
+            body: JSON.stringify({student_id: currentStudentId, use_ai: useAi})
+        });
+
+        const reader = response.body.getReader();
+        const decoder = new TextDecoder();
+
+        while (true) {
+            const {done, value} = await reader.read();
+            if (done) break;
+
+            const text = decoder.decode(value);
+            const lines = text.split('\n');
+
+            for (const line of lines) {
+                if (line.startsWith('data: ')) {
+                    try {
+                        const data = JSON.parse(line.slice(6));
+
+                        progressBar.style.width = data.progress + '%';
+                        progressBar.textContent = data.progress + '%';
+                        progressText.textContent = data.message;
+
+                        let logMsg = data.message;
+                        if (data.detail) {
+                            if (data.step === 'ai_prompt') {
+                                logMsg = '【AI提示词】\n' + data.detail;
+                                addLog(logMsg);
+                                continue;
+                            } else {
+                                logMsg += '\n  └ ' + data.detail.replace(/\n/g, '\n  └ ');
+                            }
+                        }
+                        addLog(logMsg);
+
+                        if (data.step === 'complete') {
+                            setTimeout(() => {
+                                generateModal.hide();
+                                alert('方案生成成功！');
+                                loadPlans();
+                            }, 500);
+                        }
+
+                        if (data.error) {
+                            addLog(data.error, true);
+                        }
+                    } catch (e) {}
+                }
+            }
+        }
+    } catch (err) {
+        addLog('请求失败：' + err.message, true);
+        progressText.textContent = '生成失败';
+    }
+}
+
+async function deletePlan(id) {
+    if (!confirm('确定删除该方案？')) return;
+    try {
+        const resp = await fetch(`/api/plans/${id}`, {method: 'DELETE'});
+        if (resp.ok) {
+            loadPlans();
+        } else {
+            alert('删除失败');
+        }
+    } catch (e) {
+        alert('删除失败: ' + e.message);
+    }
+}
+
+function showToast(message, type) {
+    const toast = document.createElement('div');
+    toast.className = 'toast-message alert alert-' + (type === 'success' ? 'success' : 'danger');
+    toast.style.cssText = 'position:fixed;top:20px;right:20px;z-index:9999;min-width:200px;';
+    toast.textContent = message;
+    document.body.appendChild(toast);
+    setTimeout(() => toast.remove(), 3000);
+}
+</script>
+{% endblock %}