# 用户管理与班级管理实现计划

> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.

**Goal:** 扩展钢琴练习方案系统，增加用户管理、角色权限管理、班级管理功能

**Architecture:** 在现有 User 模型上增加 role 字段，新建 Class 表，Student 表增加 class_id 外键。前端动态渲染导航栏，后端通过装饰器实现权限控制。

**Tech Stack:** Flask + SQLAlchemy + SQLite + Bootstrap5

---

## 文件修改概览

| 操作 | 文件 | 说明 |
|------|------|------|
| 修改 | `app/models.py` | User 增加 role 字段，新建 Class 模型，Student 增加 class_id |
| 修改 | `app/routes/auth.py` | 增加权限装饰器，修改密码API |
| 新建 | `app/routes/classes.py` | 班级管理 API |
| 新建 | `app/routes/users.py` | 用户管理 API |
| 修改 | `app/templates/index.html` | 导航栏动态渲染，学员列表增加班级列 |
| 新建 | `app/templates/users.html` | 用户管理页面 |
| 新建 | `app/templates/classes.html` | 班级管理页面 |
| 修改 | `app/templates/login.html` | 登录后返回 role 信息 |

---

## Task 1: 数据库模型扩展

**Files:**
- Modify: `app/models.py:1-180`

- [ ] **Step 1: 修改 User 模型，添加 role 字段**

在 `app/models.py` 中找到 `class User` 定义，在 `created_at` 字段后添加 `role` 字段：

```python
class User(db.Model):
    """管理员用户表"""

    __tablename__ = "users"

    id = db.Column(db.Integer, primary_key=True)
    username = db.Column(db.String(50), unique=True, nullable=False)
    password_hash = db.Column(db.String(200), nullable=False)
    role = db.Column(db.String(20), default="user")  # admin / user
    created_at = db.Column(db.DateTime, default=datetime.now)
```

- [ ] **Step 2: 在 User.to_dict() 中添加 role 字段**

```python
def to_dict(self):
    return {
        "id": self.id,
        "username": self.username,
        "role": self.role,
        "created_at": self.created_at.strftime("%Y-%m-%d %H:%M")
        if self.created_at
        else None,
    }
```

- [ ] **Step 3: 新建 Class 模型**

在 `User` 类之后、`Student` 类之前添加：

```python
class Class(db.Model):
    """班级表"""

    __tablename__ = "classes"

    id = db.Column(db.Integer, primary_key=True)
    name = db.Column(db.String(100), nullable=False)
    description = db.Column(db.Text)
    created_at = db.Column(db.DateTime, default=datetime.now)

    def to_dict(self):
        return {
            "id": self.id,
            "name": self.name,
            "description": self.description,
            "student_count": self.students.count(),
            "created_at": self.created_at.strftime("%Y-%m-%d %H:%M")
            if self.created_at
            else None,
        }
```

- [ ] **Step 4: 修改 Student 模型，添加 class_id 字段**

在 `Student` 类中找到 `notes` 字段后添加：

```python
class_id = db.Column(db.Integer, db.ForeignKey("classes.id"))  # 班级
```

- [ ] **Step 5: 更新 Student.to_dict() 添加班级信息**

```python
def to_dict(self):
    return {
        "id": self.id,
        "name": self.name,
        "phone": self.phone,
        "wechat_nickname": self.wechat_nickname,
        "practice_time": self.practice_time,
        "notes": self.notes,
        "class_id": self.class_id,
        "class_name": self.class_obj.name if self.class_obj else None,
        "created_at": self.created_at.strftime("%Y-%m-%d %H:%M")
        if self.created_at
        else None,
        "problem_count": self.problems.count(),
        "plan_count": self.plans.count(),
    }
```

- [ ] **Step 6: 添加 ROLE_OPTIONS 常量**

在文件末尾添加：

```python
ROLE_OPTIONS = ["admin", "user"]
```

---

## Task 2: 权限装饰器

**Files:**
- Modify: `app/routes/auth.py:94-105`

- [ ] **Step 1: 修改登录状态检查，返回 role 信息**

修改 `check_login` 函数：

```python
@main_bp.route("/api/check-login", methods=["GET"])
def check_login():
    """检查登录状态"""
    if session.get("user_id"):
        user = User.query.get(session.get("user_id"))
        return jsonify({
            "logged_in": True, 
            "username": session.get("username"),
            "role": user.role if user else "user"
        })
    return jsonify({"logged_in": False})
```

- [ ] **Step 2: 添加 admin_required 装饰器**

在文件末尾添加：

```python
def admin_required(f):
    """管理员权限装饰器"""
    from functools import wraps

    @wraps(f)
    def decorated(*args, **kwargs):
        if not session.get("user_id"):
            return jsonify({"error": "请先登录"}), 401
        user = User.query.get(session.get("user_id"))
        if not user or user.role != "admin":
            return jsonify({"error": "权限不足"}), 403
        return f(*args, **kwargs)

    return decorated


def login_required_json(f):
    """登录验证装饰器（返回JSON）"""
    from functools import wraps

    @wraps(f)
    def decorated(*args, **kwargs):
        if not session.get("user_id"):
            return jsonify({"error": "请先登录"}), 401
        return f(*args, **kwargs)

    return decorated
```

- [ ] **Step 3: 添加获取当前用户角色的函数**

在文件末尾添加：

```python
def get_current_user():
    """获取当前登录用户"""
    user_id = session.get("user_id")
    if user_id:
        return User.query.get(user_id)
    return None


def is_admin():
    """判断当前用户是否是管理员"""
    user = get_current_user()
    return user and user.role == "admin"
```

---

## Task 3: 用户管理 API

**Files:**
- Create: `app/routes/users.py`
- Modify: `app/routes/__init__.py`

- [ ] **Step 1: 创建 users.py**

新建文件 `app/routes/users.py`：

```python
# 用户管理路由

from flask import request, jsonify, render_template, session
from app.routes import main_bp
from app.models import db, User, login_required_json, admin_required


@main_bp.route("/users")
@admin_required
def users_page():
    """用户管理页面"""
    return render_template("users.html")


@main_bp.route("/api/users", methods=["GET"])
@admin_required
def api_users_list():
    """用户列表"""
    users = User.query.order_by(User.created_at.desc()).all()
    return jsonify([u.to_dict() for u in users])


@main_bp.route("/api/users", methods=["POST"])
@admin_required
def api_users_create():
    """新增用户"""
    data = request.get_json()
    username = data.get("username", "").strip()
    password = data.get("password", "")
    role = data.get("role", "user")

    if not username or not password:
        return jsonify({"error": "请输入用户名和密码"}), 400

    if User.query.filter_by(username=username).first():
        return jsonify({"error": "用户名已存在"}), 400

    if role not in ["admin", "user"]:
        return jsonify({"error": "无效的角色"}), 400

    try:
        user = User(username=username, role=role)
        user.set_password(password)
        db.session.add(user)
        db.session.commit()
        return jsonify(user.to_dict())
    except ValueError as e:
        return jsonify({"error": str(e)}), 400
    except Exception as e:
        db.session.rollback()
        return jsonify({"error": "创建失败: " + str(e)}), 500


@main_bp.route("/api/users/<int:user_id>", methods=["PUT"])
@admin_required
def api_users_update(user_id):
    """编辑用户（仅管理员可改角色）"""
    user = User.query.get_or_404(user_id)
    data = request.get_json()

    if "role" in data:
        if data["role"] in ["admin", "user"]:
            user.role = data["role"]

    try:
        db.session.commit()
        return jsonify(user.to_dict())
    except Exception as e:
        db.session.rollback()
        return jsonify({"error": "更新失败: " + str(e)}), 500


@main_bp.route("/api/users/<int:user_id>", methods=["DELETE"])
@admin_required
def api_users_delete(user_id):
    """删除用户"""
    if user_id == session.get("user_id"):
        return jsonify({"error": "不能删除自己"}), 400

    user = User.query.get_or_404(user_id)
    try:
        db.session.delete(user)
        db.session.commit()
        return jsonify({"message": "删除成功"})
    except Exception as e:
        db.session.rollback()
        return jsonify({"error": "删除失败: " + str(e)}), 500


@main_bp.route("/api/users/<int:user_id>/reset-password", methods=["POST"])
@admin_required
def api_users_reset_password(user_id):
    """重置用户密码（管理员无需知道原密码）"""
    user = User.query.get_or_404(user_id)
    data = request.get_json()
    new_password = data.get("new_password", "")

    if not new_password:
        return jsonify({"error": "请输入新密码"}), 400

    try:
        user.set_password(new_password)
        db.session.commit()
        return jsonify({"message": "密码重置成功"})
    except ValueError as e:
        return jsonify({"error": str(e)}), 400
    except Exception as e:
        db.session.rollback()
        return jsonify({"error": "重置失败: " + str(e)}), 500


@main_bp.route("/api/users/change-password", methods=["POST"])
@login_required_json
def api_users_change_password():
    """修改当前用户密码"""
    user = User.query.get(session.get("user_id"))
    data = request.get_json()
    old_password = data.get("old_password", "")
    new_password = data.get("new_password", "")
    confirm_password = data.get("confirm_password", "")

    if not old_password or not new_password:
        return jsonify({"error": "请填写完整"}), 400

    if not user.check_password(old_password):
        return jsonify({"error": "原密码错误"}), 400

    if new_password != confirm_password:
        return jsonify({"error": "两次密码输入不一致"}), 400

    try:
        user.set_password(new_password)
        db.session.commit()
        return jsonify({"message": "密码修改成功"})
    except ValueError as e:
        return jsonify({"error": str(e)}), 400
    except Exception as e:
        db.session.rollback()
        return jsonify({"error": "修改失败: " + str(e)}), 500
```

- [ ] **Step 2: 注册蓝图**

修改 `app/routes/__init__.py`，确保 users 蓝图已注册：

```python
from flask import Blueprint

main_bp = Blueprint("main", __name__)

# 导入所有路由
from app.routes import students, problems, plans, settings, auth, classes, users
```

---

## Task 4: 班级管理 API

**Files:**
- Create: `app/routes/classes.py`

- [ ] **Step 1: 创建 classes.py**

新建文件 `app/routes/classes.py`：

```python
# 班级管理路由

from flask import request, jsonify, render_template, session
from app.routes import main_bp
from app.models import db, Class, Student, User, login_required_json, admin_required


@main_bp.route("/classes")
@login_required_json
def classes_page():
    """班级管理页面"""
    return render_template("classes.html")


@main_bp.route("/api/classes", methods=["GET"])
@login_required_json
def api_classes_list():
    """班级列表"""
    classes = Class.query.order_by(Class.created_at.desc()).all()
    return jsonify([c.to_dict() for c in classes])


@main_bp.route("/api/classes", methods=["POST"])
@admin_required
def api_classes_create():
    """新增班级"""
    data = request.get_json()
    name = data.get("name", "").strip()
    description = data.get("description", "")

    if not name:
        return jsonify({"error": "请输入班级名称"}), 400

    if Class.query.filter_by(name=name).first():
        return jsonify({"error": "班级名称已存在"}), 400

    try:
        cls = Class(name=name, description=description)
        db.session.add(cls)
        db.session.commit()
        return jsonify(cls.to_dict())
    except Exception as e:
        db.session.rollback()
        return jsonify({"error": "创建失败: " + str(e)}), 500


@main_bp.route("/api/classes/<int:class_id>", methods=["PUT"])
@admin_required
def api_classes_update(class_id):
    """编辑班级"""
    cls = Class.query.get_or_404(class_id)
    data = request.get_json()

    if "name" in data and data["name"]:
        # 检查名称是否与其他班级冲突
        existing = Class.query.filter_by(name=data["name"]).first()
        if existing and existing.id != class_id:
            return jsonify({"error": "班级名称已存在"}), 400
        cls.name = data["name"]

    if "description" in data:
        cls.description = data["description"]

    try:
        db.session.commit()
        return jsonify(cls.to_dict())
    except Exception as e:
        db.session.rollback()
        return jsonify({"error": "更新失败: " + str(e)}), 500


@main_bp.route("/api/classes/<int:class_id>", methods=["DELETE"])
@admin_required
def api_classes_delete(class_id):
    """删除班级（不删除学员，仅解除关联）"""
    cls = Class.query.get_or_404(class_id)
    try:
        # 解除学员与班级的关联
        Student.query.filter_by(class_id=class_id).update({"class_id": None})
        db.session.delete(cls)
        db.session.commit()
        return jsonify({"message": "删除成功"})
    except Exception as e:
        db.session.rollback()
        return jsonify({"error": "删除失败: " + str(e)}), 500


@main_bp.route("/api/classes/<int:class_id>/students", methods=["GET"])
@login_required_json
def api_classes_students(class_id):
    """班级学员列表"""
    cls = Class.query.get_or_404(class_id)
    students = cls.students.all()
    return jsonify([{
        "id": s.id,
        "name": s.name,
        "phone": s.phone,
        "practice_time": s.practice_time
    } for s in students])


@main_bp.route("/api/classes/<int:class_id>/assign", methods=["POST"])
@login_required_json
def api_classes_assign(class_id):
    """分配学员到班级"""
    cls = Class.query.get_or_404(class_id)
    data = request.get_json()
    student_ids = data.get("student_ids", [])

    try:
        # 先清除这些学员的班级关联
        Student.query.filter(Student.id.in_(student_ids)).update({"class_id": None})
        # 再设置新的班级关联
        Student.query.filter(Student.id.in_(student_ids)).update({"class_id": class_id})
        db.session.commit()
        return jsonify({"message": "分配成功"})
    except Exception as e:
        db.session.rollback()
        return jsonify({"error": "分配失败: " + str(e)}), 500
```

- [ ] **Step 2: 导出 Class 模型**

在 `app/models.py` 文件末尾确保导出 Class：

```python
__all__ = ["db", "User", "Student", "StudentProblem", "PracticePlan", "Class"]
```

---

## Task 5: 修改现有路由添加权限控制

**Files:**
- Modify: `app/routes/students.py`
- Modify: `app/routes/problems.py`
- Modify: `app/routes/plans.py`
- Modify: `app/routes/settings.py`

- [ ] **Step 1: 修改 students.py 添加登录验证**

在 `app/routes/students.py` 顶部导入装饰器，并在每个 API 添加装饰器：

```python
from app.models import db, Student, StudentProblem, login_required_json
```

为以下路由添加 `@login_required_json`：
- `api_students_list`
- `api_students_create`
- `api_students_detail`
- `api_students_update`
- `api_students_delete`

- [ ] **Step 2: 修改 problems.py 添加登录验证**

```python
from app.models import db, StudentProblem, login_required_json
```

为以下路由添加 `@login_required_json`：
- `api_problems_list`
- `api_problems_add`
- `api_problems_delete`

- [ ] **Step 3: 修改 plans.py 添加登录验证**

```python
from app.models import db, PracticePlan, login_required_json
```

为以下路由添加 `@login_required_json`：
- `api_generate_plan`
- `api_plans_detail`
- `api_plans_delete`

- [ ] **Step 4: 修改 settings.py 添加管理员权限**

```python
from app.models import db, admin_required
```

将以下路由的装饰器从 `@login_required` 改为 `@admin_required`：
- `settings_page`
- `api_problems_list`（创建/编辑/删除需要管理员）
- `api_problems_create`
- `api_problems_update`
- `api_problems_delete`
- `api_config_get`
- `api_config_set`
- `api_config_test`

---

## Task 6: 前端 - 用户管理页面

**Files:**
- Create: `app/templates/users.html`

- [ ] **Step 1: 创建用户管理页面**

新建 `app/templates/users.html`：

```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>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css" rel="stylesheet">
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container-fluid">
            <a class="navbar-brand" href="/">钢琴练习方案系统</a>
            <div class="navbar-nav ms-auto">
                <span class="nav-item nav-link text-light" id="currentUser"></span>
                <a class="nav-link" href="#" id="logoutBtn">退出</a>
            </div>
        </div>
    </nav>

    <div class="container mt-4">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h2>用户管理</h2>
            <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#userModal">
                <i class="bi bi-plus-circle"></i> 新增用户
            </button>
        </div>

        <div class="card">
            <div class="card-body">
                <table class="table table-hover" id="usersTable">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>用户名</th>
                            <th>角色</th>
                            <th>创建时间</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- 新增/编辑用户弹窗 -->
    <div class="modal fade" id="userModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="userModalTitle">新增用户</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form id="userForm">
                        <input type="hidden" id="userId">
                        <div class="mb-3">
                            <label class="form-label">用户名</label>
                            <input type="text" class="form-control" id="username" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label" id="passwordLabel">初始密码</label>
                            <input type="password" class="form-control" id="password">
                            <div class="form-text">8位以上，包含大小写字母、数字和特殊字符</div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">角色</label>
                            <select class="form-select" id="role">
                                <option value="user">普通用户</option>
                                <option value="admin">管理员</option>
                            </select>
                        </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="saveUserBtn">保存</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 重置密码弹窗 -->
    <div class="modal fade" id="resetPwdModal" 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">
                    <form id="resetPwdForm">
                        <input type="hidden" id="resetUserId">
                        <div class="mb-3">
                            <label class="form-label">新密码</label>
                            <input type="password" class="form-control" id="newPassword" required>
                            <div class="form-text">8位以上，包含大小写字母、数字和特殊字符</div>
                        </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-warning" id="confirmResetBtn">重置密码</button>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        const ROLE_LABELS = { 'admin': '管理员', 'user': '普通用户' };
        
        // 检查登录状态
        fetch('/api/check-login').then(r => r.json()).then(data => {
            if (!data.logged_in || data.role !== 'admin') {
                window.location.href = '/login';
                return;
            }
            document.getElementById('currentUser').textContent = data.username + ' (' + ROLE_LABELS[data.role] + ')';
            loadUsers();
        });

        // 加载用户列表
        function loadUsers() {
            fetch('/api/users').then(r => r.json()).then(users => {
                const tbody = document.querySelector('#usersTable tbody');
                tbody.innerHTML = users.map(u => `
                    <tr>
                        <td>${u.id}</td>
                        <td>${u.username}</td>
                        <td><span class="badge ${u.role === 'admin' ? 'bg-danger' : 'bg-secondary'}">${ROLE_LABELS[u.role]}</span></td>
                        <td>${u.created_at}</td>
                        <td>
                            <button class="btn btn-sm btn-warning me-1" onclick="openResetPwd(${u.id})">重置密码</button>
                            <button class="btn btn-sm btn-danger" onclick="deleteUser(${u.id})">删除</button>
                        </td>
                    </tr>
                `).join('');
            });
        }

        // 保存用户
        document.getElementById('saveUserBtn').onclick = () => {
            const id = document.getElementById('userId').value;
            const username = document.getElementById('username').value.trim();
            const password = document.getElementById('password').value;
            const role = document.getElementById('role').value;

            if (!username || !password) {
                alert('请填写完整');
                return;
            }

            const method = id ? 'PUT' : 'POST';
            fetch('/api/users' + (id ? '/' + id : ''), {
                method,
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ username, password, role })
            }).then(r => r.json()).then(data => {
                if (data.error) {
                    alert(data.error);
                } else {
                    bootstrap.Modal.getInstance(document.getElementById('userModal')).hide();
                    loadUsers();
                }
            });
        };

        // 重置密码
        function openResetPwd(id) {
            document.getElementById('resetUserId').value = id;
            document.getElementById('newPassword').value = '';
            new bootstrap.Modal(document.getElementById('resetPwdModal')).show();
        }

        document.getElementById('confirmResetBtn').onclick = () => {
            const id = document.getElementById('resetUserId').value;
            const newPassword = document.getElementById('newPassword').value;
            if (!newPassword) {
                alert('请输入新密码');
                return;
            }
            fetch('/api/users/' + id + '/reset-password', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ new_password: newPassword })
            }).then(r => r.json()).then(data => {
                if (data.error) {
                    alert(data.error);
                } else {
                    alert('密码重置成功');
                    bootstrap.Modal.getInstance(document.getElementById('resetPwdModal')).hide();
                }
            });
        };

        // 删除用户
        function deleteUser(id) {
            if (!confirm('确定要删除该用户吗？')) return;
            fetch('/api/users/' + id, { method: 'DELETE' }).then(r => r.json()).then(data => {
                if (data.error) {
                    alert(data.error);
                } else {
                    loadUsers();
                }
            });
        }

        // 退出登录
        document.getElementById('logoutBtn').onclick = () => {
            fetch('/api/logout', { method: 'POST' }).then(() => window.location.href = '/login');
        };
    </script>
</body>
</html>
```

---

## Task 7: 前端 - 班级管理页面

**Files:**
- Create: `app/templates/classes.html`

- [ ] **Step 1: 创建班级管理页面**

新建 `app/templates/classes.html`：

```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>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css" rel="stylesheet">
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container-fluid">
            <a class="navbar-brand" href="/">钢琴练习方案系统</a>
            <div class="navbar-nav ms-auto">
                <span class="nav-item nav-link text-light" id="currentUser"></span>
                <a class="nav-link" href="#" id="logoutBtn">退出</a>
            </div>
        </div>
    </nav>

    <div class="container mt-4">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h2>班级管理</h2>
            <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>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </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>
                    </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 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>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        let currentUserRole = 'user';
        let currentClassId = null;
        let allStudents = [];

        // 检查登录状态
        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': '普通用户' };
            document.getElementById('currentUser').textContent = data.username + ' (' + ROLE_LABELS[data.role] + ')';
            if (data.role === 'admin') {
                document.getElementById('addClassBtn').style.display = 'inline-block';
            }
            loadClasses();
        });

        // 加载班级列表
        function loadClasses() {
            fetch('/api/classes').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><a href="#" onclick="viewClassStudents(${c.id})">${c.student_count}</a></td>
                        <td>${c.created_at}</td>
                        <td>
                            ${isAdmin ? `<button class="btn btn-sm btn-primary me-1" onclick="editClass(${c.id}, '${c.name}', '${c.description || ''}')">编辑</button>
                            <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;

            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 })
            }).then(r => r.json()).then(data => {
                if (data.error) {
                    alert(data.error);
                } else {
                    bootstrap.Modal.getInstance(document.getElementById('classModal')).hide();
                    loadClasses();
                }
            });
        };

        // 编辑班级
        function editClass(id, name, desc) {
            document.getElementById('classId').value = id;
            document.getElementById('className').value = name;
            document.getElementById('classDesc').value = desc;
            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) {
                    alert(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) {
                    alert(data.error);
                } else {
                    bootstrap.Modal.getInstance(document.getElementById('assignModal')).hide();
                    loadClasses();
                    viewClassStudents(currentClassId);
                }
            });
        };

        // 新增班级按钮
        document.getElementById('addClassBtn').onclick = () => {
            document.getElementById('classId').value = '';
            document.getElementById('className').value = '';
            document.getElementById('classDesc').value = '';
            document.getElementById('classModalTitle').textContent = '新增班级';
            new bootstrap.Modal(document.getElementById('classModal')).show();
        };

        // 退出登录
        document.getElementById('logoutBtn').onclick = () => {
            fetch('/api/logout', { method: 'POST' }).then(() => window.location.href = '/login');
        };
    </script>
</body>
</html>
```

---

## Task 8: 前端 - 导航栏动态渲染

**Files:**
- Modify: `app/templates/index.html`

- [ ] **Step 1: 修改导航栏，动态显示菜单**

找到 `<nav class="navbar">` 部分，修改为：

```html
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container-fluid">
        <a class="navbar-brand" href="/">钢琴练习方案系统</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav me-auto">
                <li class="nav-item">
                    <a class="nav-link" href="/">学员管理</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/settings">问题配置</a>
                </li>
                <li class="nav-item" id="classesNav" style="display:none;">
                    <a class="nav-link" href="/classes">班级管理</a>
                </li>
                <li class="nav-item" id="usersNav" style="display:none;">
                    <a class="nav-link" href="/users">用户管理</a>
                </li>
            </ul>
            <ul class="navbar-nav">
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-bs-toggle="dropdown">
                        <span id="currentUserName"></span>
                    </a>
                    <ul class="dropdown-menu dropdown-menu-end">
                        <li><a class="dropdown-item" href="#" data-bs-toggle="modal" data-bs-target="#changePwdModal">修改密码</a></li>
                        <li><hr class="dropdown-divider"></li>
                        <li><a class="dropdown-item" href="#" id="logoutBtn">退出</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>
```

- [ ] **Step 2: 添加修改密码弹窗**

在 `</nav>` 后添加：

```html
<!-- 修改密码弹窗 -->
<div class="modal fade" id="changePwdModal" 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">
                <form id="changePwdForm">
                    <div class="mb-3">
                        <label class="form-label">原密码</label>
                        <input type="password" class="form-control" id="oldPassword" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">新密码</label>
                        <input type="password" class="form-control" id="newPassword" required>
                        <div class="form-text">8位以上，包含大小写字母、数字和特殊字符</div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">确认新密码</label>
                        <input type="password" class="form-control" id="confirmPassword" required>
                    </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="changePwdBtn">确认修改</button>
            </div>
        </div>
    </div>
</div>
```

- [ ] **Step 3: 修改 JavaScript，动态控制菜单显示**

修改 `<script>` 部分：

```javascript
// 检查登录状态并初始化
fetch('/api/check-login').then(r => r.json()).then(data => {
    if (!data.logged_in) {
        window.location.href = '/login';
        return;
    }
    
    const ROLE_LABELS = { 'admin': '管理员', 'user': '普通用户' };
    document.getElementById('currentUserName').textContent = data.username + ' (' + ROLE_LABELS[data.role] + ')';
    
    // 根据角色显示菜单
    if (data.role === 'admin') {
        document.getElementById('usersNav').style.display = '';
    }
    document.getElementById('classesNav').style.display = '';
    
    // 加载数据
    loadStudents();
});
```

- [ ] **Step 4: 添加修改密码功能**

在 `<script>` 中添加：

```javascript
// 修改密码
document.getElementById('changePwdBtn').onclick = () => {
    const oldPassword = document.getElementById('oldPassword').value;
    const newPassword = document.getElementById('newPassword').value;
    const confirmPassword = document.getElementById('confirmPassword').value;

    if (!oldPassword || !newPassword || !confirmPassword) {
        alert('请填写完整');
        return;
    }

    fetch('/api/users/change-password', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ old_password: oldPassword, new_password: newPassword, confirm_password: confirmPassword })
    }).then(r => r.json()).then(data => {
        if (data.error) {
            alert(data.error);
        } else {
            alert('密码修改成功，请重新登录');
            fetch('/api/logout', { method: 'POST' }).then(() => window.location.href = '/login');
        }
    });
};

// 退出登录
document.getElementById('logoutBtn').onclick = (e) => {
    e.preventDefault();
    fetch('/api/logout', { method: 'POST' }).then(() => window.location.href = '/login');
};
```

- [ ] **Step 5: 学员列表增加班级列**

在学员表格的 `<thead>` 中添加：

```html
<th>班级</th>
```

在 `<tbody>` 渲染时添加：

```javascript
// 在 renderStudents 函数中
`<td>${s.class_name || '-'}</td>`
```

---

## Task 9: 测试与验证

**Files:**
- Test: 启动应用测试所有功能

- [ ] **Step 1: 测试登录和初始设置**

1. 启动应用 `python run.py`
2. 访问 `/setup` 创建管理员
3. 登录验证

- [ ] **Step 2: 测试用户管理**

1. 访问 `/users`（仅管理员可见）
2. 新增普通用户
3. 重置用户密码
4. 删除用户

- [ ] **Step 3: 测试班级管理**

1. 访问 `/classes`
2. 管理员：新增/编辑/删除班级
3. 分配学员到班级

- [ ] **Step 4: 测试权限控制**

1. 用普通用户登录
2. 验证无法访问 `/users`
3. 验证无法访问 `/settings`
4. 验证可以访问 `/classes` 但无法增删

- [ ] **Step 5: 测试修改密码**

1. 管理员修改自己密码
2. 普通用户修改自己密码