feat: 初始提交 v1.2.0 - 钢琴练习方案生成系统

app/templates/classes.html

@@ -0,0 +1,332 @@
+{% extends "base.html" %}
+
+{% block title %}班级管理 - 钢琴练习方案系统{% endblock %}
+
+{% block sidebar_nav %}
+<a class="nav-link" href="/">
+    <i class="bi bi-people"></i> 学员管理
+</a>
+<a class="nav-link" href="/settings" id="settingsNav" style="display:none;">
+    <i class="bi bi-gear"></i> 问题配置
+</a>
+<a class="nav-link" href="/api-settings" id="apiSettingsNav" style="display:none;">
+    <i class="bi bi-key"></i> API设置
+</a>
+<a class="nav-link" href="/templates" id="templatesNav" style="display:none;">
+    <i class="bi bi-file-earmark-text"></i> 模板管理
+</a>
+<a class="nav-link active" href="/classes">
+    <i class="bi bi-collection"></i> 班级管理
+</a>
+<a class="nav-link" href="/users" id="usersNav" style="display:none;">
+    <i class="bi bi-person-badge"></i> 用户管理
+</a>
+<hr>
+<a class="nav-link" href="#" onclick="showChangePasswordModal()">
+    <i class="bi bi-key"></i> 修改密码
+</a>
+<a class="nav-link" href="#" onclick="logout()">
+    <i class="bi bi-box-arrow-right"></i> 退出登录
+</a>
+{% endblock %}
+
+{% block content %}
+<div class="d-flex justify-content-between align-items-center mb-4">
+    <div class="d-flex align-items-center gap-3">
+        <h4><i class="bi bi-collection"></i> 班级管理</h4>
+        <select class="form-select form-select-sm" style="width:auto;" id="activeFilter" onchange="loadClasses()">
+            <option value="">全部班级</option>
+            <option value="true" selected>进行中</option>
+            <option value="false">已结束</option>
+        </select>
+    </div>
+    <button class="btn btn-primary" id="addClassBtn" style="display:none;">
+        <i class="bi bi-plus-circle"></i> 新增班级
+    </button>
+</div>
+
+<div class="card">
+    <div class="card-body">
+        <table class="table table-hover" id="classesTable">
+            <thead>
+                <tr>
+                    <th>ID</th>
+                    <th>班级名称</th>
+                    <th>描述</th>
+                    <th>进行中</th>
+                    <th>学员数</th>
+                    <th>创建时间</th>
+                    <th>操作</th>
+                </tr>
+            </thead>
+            <tbody></tbody>
+        </table>
+    </div>
+</div>
+
+<!-- 新增/编辑班级弹窗 -->
+<div class="modal fade" id="classModal" tabindex="-1">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="classModalTitle">新增班级</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+            </div>
+            <div class="modal-body">
+                <form id="classForm">
+                    <input type="hidden" id="classId">
+                    <div class="mb-3">
+                        <label class="form-label">班级名称</label>
+                        <input type="text" class="form-control" id="className" required>
+                    </div>
+                    <div class="mb-3">
+                        <label class="form-label">描述</label>
+                        <textarea class="form-control" id="classDesc" rows="2"></textarea>
+                    </div>
+                    <div class="mb-3 form-check">
+                        <input type="checkbox" class="form-check-input" id="classActive" checked>
+                        <label class="form-check-label" for="classActive">进行中</label>
+                    </div>
+                </form>
+            </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="saveClassBtn">保存</button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- 班级学员弹窗 -->
+<div class="modal fade" id="classStudentsModal" tabindex="-1">
+    <div class="modal-dialog modal-lg">
+        <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">
+                    <button type="button" class="btn btn-sm btn-success" id="assignStudentsBtn">分配学员</button>
+                </div>
+                <table class="table" id="classStudentsTable">
+                    <thead>
+                        <tr>
+                            <th>姓名</th>
+                            <th>手机</th>
+                            <th>练习时间</th>
+                        </tr>
+                    </thead>
+                    <tbody></tbody>
+                </table>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- 分配学员弹窗 -->
+<div class="modal fade" id="assignModal" 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 id="studentCheckboxes"></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="confirmAssignBtn">确认分配</button>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}
+
+{% block extra_js %}
+<script>
+let currentUserRole = 'user';
+let currentClassId = null;
+let allStudents = [];
+
+// Toast 通知函数
+function showToast(message, isError = true) {
+    const toast = document.createElement('div');
+    toast.className = `toast-container position-fixed top-50 start-50 translate-middle`;
+    toast.style.zIndex = '9999';
+    toast.innerHTML = `
+        <div class="toast show" role="alert">
+            <div class="toast-header ${isError ? 'bg-danger' : 'bg-success'} text-white">
+                <strong class="me-auto">${isError ? '错误' : '成功'}</strong>
+                <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
+            </div>
+            <div class="toast-body">${message}</div>
+        </div>
+    `;
+    document.body.appendChild(toast);
+    setTimeout(() => toast.remove(), 3000);
+}
+
+// 检查登录状态
+fetch('/api/check-login').then(r => r.json()).then(data => {
+    if (!data.logged_in) {
+        window.location.href = '/login';
+        return;
+    }
+    currentUserRole = data.role;
+    const ROLE_LABELS = { 'admin': '管理员', 'user': '普通用户' };
+
+    const userDisplay = data.username + ' (' + (ROLE_LABELS[data.role] || data.role) + ')';
+    document.getElementById('currentUserDisplay').textContent = userDisplay;
+    const mobileDisplay = document.getElementById('mobileUserDisplay');
+    if (mobileDisplay) mobileDisplay.textContent = userDisplay;
+
+    if (data.role === 'admin') {
+        document.getElementById('usersNav').style.display = '';
+        document.getElementById('settingsNav').style.display = '';
+        document.getElementById('apiSettingsNav').style.display = '';
+        document.getElementById('templatesNav').style.display = '';
+        document.getElementById('addClassBtn').style.display = 'inline-block';
+    } else {
+        document.getElementById('settingsNav').style.display = '';
+        document.getElementById('apiSettingsNav').style.display = 'none';
+        document.getElementById('templatesNav').style.display = 'none';
+    }
+    loadClasses();
+});
+
+// 加载班级列表
+function loadClasses() {
+    const activeFilter = document.getElementById('activeFilter').value;
+    const url = activeFilter ? '/api/classes?active=' + activeFilter : '/api/classes';
+    fetch(url).then(r => r.json()).then(classes => {
+        const tbody = document.querySelector('#classesTable tbody');
+        const isAdmin = currentUserRole === 'admin';
+        tbody.innerHTML = classes.map(c => `
+            <tr>
+                <td>${c.id}</td>
+                <td>${c.name}</td>
+                <td>${c.description || '-'}</td>
+                <td>${c.active ? '<span class="badge bg-success">进行中</span>' : '<span class="badge bg-secondary">已结束</span>'}</td>
+                <td><a href="#" onclick="viewClassStudents(${c.id})">${c.student_count}</a></td>
+                <td>${c.created_at}</td>
+                <td>
+                    ${isAdmin ? `<button type="button" class="btn btn-sm btn-primary me-1" onclick="editClass(${c.id}, '${c.name}', '${c.description || ''}', ${c.active})">编辑</button>
+                    <button type="button" class="btn btn-sm btn-danger" onclick="deleteClass(${c.id})">删除</button>` : ''}
+                </td>
+            </tr>
+        `).join('');
+    });
+}
+
+// 保存班级
+document.getElementById('saveClassBtn').onclick = () => {
+    const id = document.getElementById('classId').value;
+    const name = document.getElementById('className').value.trim();
+    const description = document.getElementById('classDesc').value;
+    const active = document.getElementById('classActive').checked;
+
+    if (!name) {
+        alert('请输入班级名称');
+        return;
+    }
+
+    const method = id ? 'PUT' : 'POST';
+    fetch('/api/classes' + (id ? '/' + id : ''), {
+        method,
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ name, description, active })
+    }).then(r => r.json()).then(data => {
+        if (data.error) {
+            showToast(data.error);
+        } else {
+            const modal = bootstrap.Modal.getInstance(document.getElementById('classModal'));
+            if (modal) modal.hide();
+            document.querySelectorAll('.modal-backdrop').forEach(el => el.remove());
+            document.body.classList.remove('modal-open');
+            loadClasses();
+        }
+    });
+};
+
+// 编辑班级
+function editClass(id, name, desc, active) {
+    document.getElementById('classId').value = id;
+    document.getElementById('className').value = name;
+    document.getElementById('classDesc').value = desc;
+    document.getElementById('classActive').checked = active !== false;
+    document.getElementById('classModalTitle').textContent = '编辑班级';
+    new bootstrap.Modal(document.getElementById('classModal')).show();
+}
+
+// 删除班级
+function deleteClass(id) {
+    if (!confirm('确定要删除该班级吗？学员不会被删除。')) return;
+    fetch('/api/classes/' + id, { method: 'DELETE' }).then(r => r.json()).then(data => {
+        if (data.error) {
+            showToast(data.error);
+        } else {
+            loadClasses();
+        }
+    });
+}
+
+// 查看班级学员
+function viewClassStudents(classId) {
+    currentClassId = classId;
+    fetch('/api/classes/' + classId + '/students').then(r => r.json()).then(students => {
+        const tbody = document.querySelector('#classStudentsTable tbody');
+        tbody.innerHTML = students.length ? students.map(s => `
+            <tr><td>${s.name}</td><td>${s.phone || '-'}</td><td>${s.practice_time}</td></tr>
+        `).join('') : '<tr><td colspan="3" class="text-center">暂无学员</td></tr>';
+        new bootstrap.Modal(document.getElementById('classStudentsModal')).show();
+    });
+}
+
+// 分配学员
+document.getElementById('assignStudentsBtn').onclick = () => {
+    fetch('/api/students').then(r => r.json()).then(students => {
+        allStudents = students;
+        const container = document.getElementById('studentCheckboxes');
+        container.innerHTML = students.map(s => `
+            <div class="form-check">
+                <input class="form-check-input" type="checkbox" value="${s.id}" ${s.class_id == currentClassId ? 'checked' : ''}>
+                <label class="form-check-label">${s.name} (${s.practice_time})</label>
+            </div>
+        `).join('');
+        new bootstrap.Modal(document.getElementById('assignModal')).show();
+    });
+};
+
+document.getElementById('confirmAssignBtn').onclick = () => {
+    const checked = Array.from(document.querySelectorAll('#studentCheckboxes input:checked')).map(c => parseInt(c.value));
+    fetch('/api/classes/' + currentClassId + '/assign', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ student_ids: checked })
+    }).then(r => r.json()).then(data => {
+        if (data.error) {
+            showToast(data.error);
+        } else {
+            const modal = bootstrap.Modal.getInstance(document.getElementById('assignModal'));
+            if (modal) modal.hide();
+            document.querySelectorAll('.modal-backdrop').forEach(el => el.remove());
+            document.body.classList.remove('modal-open');
+            loadClasses();
+            viewClassStudents(currentClassId);
+        }
+    });
+};
+
+// 新增班级按钮
+document.getElementById('addClassBtn').onclick = () => {
+    document.getElementById('classId').value = '';
+    document.getElementById('className').value = '';
+    document.getElementById('classDesc').value = '';
+    document.getElementById('classActive').checked = true;
+    document.getElementById('classModalTitle').textContent = '新增班级';
+    new bootstrap.Modal(document.getElementById('classModal')).show();
+};
+</script>
+{% endblock %}