xuyueandClaude Opus 5.5
47d4679984
- 根目录加入 docker-compose、Caddyfile、文档等原本不在仓库里的文件 - 前后端两份 GitHub Actions 合并成根目录的一个 deploy workflow： 构建前端上传到 build/，再在服务器上 git pull 并重建容器 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
539 lines
14 KiB
Markdown
539 lines
14 KiB
Markdown
# 登录框重构：班级+姓名选择登录 Implementation Plan
|
||
|
||
> **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:** 重构登录框，学生通过选班级→选姓名→输密码登录，管理员通过 Tab 切换使用用户名+密码登录。
|
||
|
||
**Architecture:** 后端在 User 模型上新增 `classname` 字段，并提供两个无鉴权端点返回班级列表和按班级的学生列表。前端 Login.vue 重构为两个 Tab，学生 Tab 使用级联下拉（班级→姓名），管理员 Tab 保留原有表单。
|
||
|
||
**Tech Stack:** Django + django-ninja (backend), Vue 3 + TypeScript + Naive UI (frontend), Axios (HTTP client)
|
||
|
||
---
|
||
|
||
## File Map
|
||
|
||
**Modified:**
|
||
- `api/account/models.py` — User 模型加 `classname` 字段
|
||
- `api/account/api.py` — `batch_create` 保存 classname，新增两个 GET 端点
|
||
- `api/account/schemas.py` — 新增 `ClassNameEntry` schema
|
||
- `client/src/api.ts` — Account 对象加两个新方法
|
||
- `client/src/components/Login.vue` — 完整重构为 Tab 布局
|
||
|
||
**Created:**
|
||
- `api/account/migrations/0003_user_classname.py` — 迁移文件（由 `makemigrations` 自动生成）
|
||
|
||
---
|
||
|
||
## Task 1: 后端 — 给 User 模型加 classname 字段并迁移
|
||
|
||
**Files:**
|
||
- Modify: `api/account/models.py`
|
||
|
||
- [ ] **Step 1: 在 User 模型里加 classname 字段**
|
||
|
||
在 `api/account/models.py` 的 `User` 类中，在 `raw_password` 字段之后添加：
|
||
|
||
```python
|
||
classname = models.CharField(
|
||
max_length=50,
|
||
blank=True,
|
||
default="",
|
||
verbose_name="班级",
|
||
)
|
||
```
|
||
|
||
- [ ] **Step 2: 生成迁移文件**
|
||
|
||
```bash
|
||
cd api && uv run manage.py makemigrations account
|
||
```
|
||
|
||
期望输出：`Migrations for 'account': account/migrations/0003_user_classname.py`
|
||
|
||
- [ ] **Step 3: 执行迁移**
|
||
|
||
```bash
|
||
uv run manage.py migrate
|
||
```
|
||
|
||
期望输出：`Applying account.0003_user_classname... OK`
|
||
|
||
- [ ] **Step 4: 验证字段已加入**
|
||
|
||
```bash
|
||
uv run manage.py shell -c "from account.models import User; print(User._meta.get_field('classname'))"
|
||
```
|
||
|
||
期望输出：`<django.db.models.fields.CharField: classname>`
|
||
|
||
- [ ] **Step 5: Commit**
|
||
|
||
```bash
|
||
cd api && git add account/models.py account/migrations/0003_user_classname.py
|
||
git commit -m "feat: add classname field to User model"
|
||
```
|
||
|
||
---
|
||
|
||
## Task 2: 后端 — batch_create 保存 classname
|
||
|
||
**Files:**
|
||
- Modify: `api/account/api.py:97-101`
|
||
|
||
- [ ] **Step 1: 修改 batch_create 中构造 User 的代码**
|
||
|
||
找到 `api/account/api.py` 中的 `batch_create` 函数，将：
|
||
|
||
```python
|
||
user = User(username=username)
|
||
user.set_password(password)
|
||
```
|
||
|
||
改为：
|
||
|
||
```python
|
||
user = User(username=username, classname=payload.classname)
|
||
user.set_password(password)
|
||
```
|
||
|
||
（必须在 `set_password` 之前设置 `classname`，因为 `set_password` 内部会触发 `save()`）
|
||
|
||
- [ ] **Step 2: 手动测试批量创建保存了 classname**
|
||
|
||
```bash
|
||
cd api && uv run manage.py shell -c "
|
||
from account.models import User
|
||
# 测试用：直接创建一个带 classname 的 user
|
||
u = User(username='webtest班级测试', classname='test班')
|
||
u.set_password('123456')
|
||
print('classname:', u.classname)
|
||
u.delete()
|
||
"
|
||
```
|
||
|
||
期望输出：`classname: test班`
|
||
|
||
- [ ] **Step 3: Commit**
|
||
|
||
```bash
|
||
git add api/account/api.py
|
||
git commit -m "feat: save classname in batch_create endpoint"
|
||
```
|
||
|
||
---
|
||
|
||
## Task 3: 后端 — 新增 /classes 和 /names 端点
|
||
|
||
**Files:**
|
||
- Modify: `api/account/api.py`
|
||
- Modify: `api/account/schemas.py`
|
||
|
||
- [ ] **Step 1: 在 schemas.py 新增返回 schema**
|
||
|
||
在 `api/account/schemas.py` 末尾添加：
|
||
|
||
```python
|
||
class ClassStudentEntry(Schema):
|
||
name: str
|
||
username: str
|
||
```
|
||
|
||
- [ ] **Step 2: 在 api.py 新增两个端点**
|
||
|
||
在 `api/account/api.py` 中，在 `router = Router()` 后的 import 区域加入 `ClassStudentEntry`：
|
||
|
||
```python
|
||
from .schemas import (
|
||
BatchUsersIn,
|
||
ClassStudentEntry,
|
||
LeaderboardEntry,
|
||
UserListSchema,
|
||
UserRegistrationSchema,
|
||
UserLoginSchema,
|
||
)
|
||
```
|
||
|
||
然后在文件末尾（`leaderboard` 函数之后）添加：
|
||
|
||
```python
|
||
@router.get("/classes", response=List[str])
|
||
def list_classes(request):
|
||
"""返回所有不重复的非空班级名列表，按字典序升序"""
|
||
return list(
|
||
User.objects.filter(classname__gt="")
|
||
.values_list("classname", flat=True)
|
||
.distinct()
|
||
.order_by("classname")
|
||
)
|
||
|
||
|
||
@router.get("/names", response=List[ClassStudentEntry])
|
||
def list_names_by_class(request, classname: str):
|
||
"""返回指定班级的学生姓名和用户名列表"""
|
||
prefix = "web" + classname
|
||
users = User.objects.filter(
|
||
classname=classname,
|
||
username__startswith=prefix,
|
||
).order_by("username")
|
||
return [
|
||
ClassStudentEntry(name=u.username[len(prefix):], username=u.username)
|
||
for u in users
|
||
]
|
||
```
|
||
|
||
- [ ] **Step 3: 启动开发服务器测试端点**
|
||
|
||
```bash
|
||
cd api && uv run manage.py runserver
|
||
```
|
||
|
||
在另一个终端测试：
|
||
|
||
```bash
|
||
curl http://localhost:8000/api/account/classes
|
||
# 期望：[] （无 classname 数据时）
|
||
|
||
curl "http://localhost:8000/api/account/names?classname=301"
|
||
# 期望：[]
|
||
```
|
||
|
||
- [ ] **Step 4: Commit**
|
||
|
||
```bash
|
||
git add api/account/api.py api/account/schemas.py
|
||
git commit -m "feat: add /classes and /names endpoints for student login"
|
||
```
|
||
|
||
---
|
||
|
||
## Task 4: 前端 — api.ts 新增两个方法
|
||
|
||
**Files:**
|
||
- Modify: `client/src/api.ts`
|
||
|
||
- [ ] **Step 1: 在 Account 对象末尾加两个方法**
|
||
|
||
在 `client/src/api.ts` 的 `Account` 对象中，`leaderboard` 方法之后添加：
|
||
|
||
```typescript
|
||
async listClasses(): Promise<string[]> {
|
||
const res = await http.get("/account/classes")
|
||
return res.data
|
||
},
|
||
|
||
async listNamesByClass(
|
||
classname: string,
|
||
): Promise<{ name: string; username: string }[]> {
|
||
const res = await http.get("/account/names", { params: { classname } })
|
||
return res.data
|
||
},
|
||
```
|
||
|
||
- [ ] **Step 2: Commit**
|
||
|
||
```bash
|
||
cd client && git add src/api.ts
|
||
git commit -m "feat: add listClasses and listNamesByClass to Account API client"
|
||
```
|
||
|
||
---
|
||
|
||
## Task 5: 前端 — 重构 Login.vue
|
||
|
||
**Files:**
|
||
- Modify: `client/src/components/Login.vue`
|
||
|
||
- [ ] **Step 1: 用以下完整内容替换 Login.vue**
|
||
|
||
```vue
|
||
<template>
|
||
<n-modal
|
||
preset="card"
|
||
title="登录"
|
||
style="width: 420px"
|
||
v-model:show="loginModal"
|
||
>
|
||
<n-tabs v-model:value="activeTab" @update:value="onTabChange">
|
||
<n-tab-pane name="student" tab="学生登录">
|
||
<n-form>
|
||
<n-form-item label="班级">
|
||
<n-select
|
||
v-model:value="selectedClass"
|
||
:options="classOptions"
|
||
placeholder="选择班级"
|
||
:loading="classesLoading"
|
||
@update:value="onClassChange"
|
||
/>
|
||
</n-form-item>
|
||
<n-form-item label="姓名">
|
||
<n-select
|
||
v-model:value="selectedUsername"
|
||
:options="nameOptions"
|
||
placeholder="选择姓名"
|
||
:loading="namesLoading"
|
||
:disabled="!selectedClass || namesLoading"
|
||
/>
|
||
</n-form-item>
|
||
<n-form-item label="密码">
|
||
<n-input
|
||
type="password"
|
||
v-model:value="studentPassword"
|
||
name="password"
|
||
/>
|
||
</n-form-item>
|
||
<n-alert
|
||
type="error"
|
||
v-if="classesError"
|
||
class="message"
|
||
title="加载班级列表失败，请刷新重试"
|
||
/>
|
||
<n-alert
|
||
type="error"
|
||
v-if="namesError"
|
||
class="message"
|
||
title="加载姓名列表失败，请重新选择班级"
|
||
/>
|
||
<n-alert
|
||
type="error"
|
||
v-if="showStudentError"
|
||
class="message"
|
||
title="登录失败，请检查密码"
|
||
/>
|
||
<n-button
|
||
block
|
||
type="primary"
|
||
:loading="studentLoading"
|
||
:disabled="!selectedClass || !selectedUsername || !studentPassword"
|
||
@click="submitStudent"
|
||
>
|
||
登录
|
||
</n-button>
|
||
</n-form>
|
||
</n-tab-pane>
|
||
|
||
<n-tab-pane name="admin" tab="管理员登录">
|
||
<n-form>
|
||
<n-form-item label="用户名">
|
||
<n-input v-model:value="adminName" name="username" />
|
||
</n-form-item>
|
||
<n-form-item label="密码">
|
||
<n-input
|
||
type="password"
|
||
v-model:value="adminPassword"
|
||
name="password"
|
||
/>
|
||
</n-form-item>
|
||
<n-alert
|
||
type="error"
|
||
v-if="showAdminError"
|
||
class="message"
|
||
title="登录失败，请检查用户名和密码"
|
||
/>
|
||
<n-button
|
||
block
|
||
type="primary"
|
||
:loading="adminLoading"
|
||
:disabled="!adminName || !adminPassword"
|
||
@click="submitAdmin"
|
||
>
|
||
登录
|
||
</n-button>
|
||
</n-form>
|
||
</n-tab-pane>
|
||
</n-tabs>
|
||
</n-modal>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { ref, computed, onMounted } from "vue"
|
||
import { Account } from "../api"
|
||
import { loginModal } from "../store/modal"
|
||
import { user } from "../store/user"
|
||
|
||
// Tab state
|
||
const activeTab = ref("student")
|
||
|
||
// Student tab state
|
||
const selectedClass = ref<string | null>(null)
|
||
const selectedUsername = ref<string | null>(null)
|
||
const studentPassword = ref("")
|
||
const studentLoading = ref(false)
|
||
const showStudentError = ref(false)
|
||
|
||
// Classes data
|
||
const classes = ref<string[]>([])
|
||
const classesLoading = ref(false)
|
||
const classesError = ref(false)
|
||
const classOptions = computed(() =>
|
||
classes.value.map((c) => ({ label: c, value: c })),
|
||
)
|
||
|
||
// Names data
|
||
const names = ref<{ name: string; username: string }[]>([])
|
||
const namesLoading = ref(false)
|
||
const namesError = ref(false)
|
||
const nameOptions = computed(() =>
|
||
names.value.map((n) => ({ label: n.name, value: n.username })),
|
||
)
|
||
|
||
// Admin tab state
|
||
const adminName = ref("")
|
||
const adminPassword = ref("")
|
||
const adminLoading = ref(false)
|
||
const showAdminError = ref(false)
|
||
|
||
// Load classes on mount (cached — not reloaded on tab switch)
|
||
onMounted(async () => {
|
||
classesLoading.value = true
|
||
classesError.value = false
|
||
try {
|
||
classes.value = await Account.listClasses()
|
||
} catch {
|
||
classesError.value = true
|
||
} finally {
|
||
classesLoading.value = false
|
||
}
|
||
})
|
||
|
||
function onTabChange() {
|
||
// Reset student tab state
|
||
selectedClass.value = null
|
||
selectedUsername.value = null
|
||
studentPassword.value = ""
|
||
showStudentError.value = false
|
||
namesError.value = false
|
||
names.value = []
|
||
// Reset admin tab state
|
||
adminName.value = ""
|
||
adminPassword.value = ""
|
||
showAdminError.value = false
|
||
}
|
||
|
||
async function onClassChange(classname: string) {
|
||
selectedUsername.value = null
|
||
names.value = []
|
||
namesError.value = false
|
||
namesLoading.value = true
|
||
try {
|
||
names.value = await Account.listNamesByClass(classname)
|
||
} catch {
|
||
namesError.value = true
|
||
} finally {
|
||
namesLoading.value = false
|
||
}
|
||
}
|
||
|
||
async function submitStudent() {
|
||
if (!selectedUsername.value || !studentPassword.value) return
|
||
studentLoading.value = true
|
||
showStudentError.value = false
|
||
try {
|
||
const data = await Account.login(selectedUsername.value, studentPassword.value)
|
||
user.username = data.username
|
||
user.role = data.role
|
||
user.loaded = true
|
||
loginModal.value = false
|
||
} catch {
|
||
showStudentError.value = true
|
||
} finally {
|
||
studentLoading.value = false
|
||
}
|
||
}
|
||
|
||
async function submitAdmin() {
|
||
if (!adminName.value || !adminPassword.value) return
|
||
adminLoading.value = true
|
||
showAdminError.value = false
|
||
try {
|
||
const data = await Account.login(adminName.value, adminPassword.value)
|
||
user.username = data.username
|
||
user.role = data.role
|
||
user.loaded = true
|
||
loginModal.value = false
|
||
} catch {
|
||
showAdminError.value = true
|
||
} finally {
|
||
adminLoading.value = false
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.message {
|
||
margin-bottom: 12px;
|
||
}
|
||
</style>
|
||
```
|
||
|
||
- [ ] **Step 2: 启动前端开发服务器验证**
|
||
|
||
```bash
|
||
cd client && npm run start
|
||
```
|
||
|
||
打开浏览器，点击登录按钮，检查：
|
||
- [ ] 显示两个 Tab：学生登录 / 管理员登录
|
||
- [ ] 学生登录 Tab：班级下拉加载数据（若无数据则为空列表）
|
||
- [ ] 选择班级后，姓名下拉变为可用并加载数据
|
||
- [ ] 三个字段未全填时，登录按钮 disabled
|
||
- [ ] 管理员登录 Tab：用户名+密码表单，两个字段未填时按钮 disabled
|
||
- [ ] 切换 Tab 时，两个 Tab 的所有字段清空
|
||
|
||
- [ ] **Step 3: Commit**
|
||
|
||
```bash
|
||
git add client/src/components/Login.vue
|
||
git commit -m "feat: refactor Login.vue with class/name dropdown for students and admin tab"
|
||
```
|
||
|
||
---
|
||
|
||
## Task 6: 端到端验证
|
||
|
||
- [ ] **Step 1: 通过 Django admin 或 batch_create 创建测试用户**
|
||
|
||
```bash
|
||
cd api && uv run manage.py shell -c "
|
||
from account.models import User
|
||
u = User(username='web测试班张三', classname='测试班')
|
||
u.set_password('123456')
|
||
print('created:', u.username, u.classname)
|
||
"
|
||
```
|
||
|
||
- [ ] **Step 2: 验证 /classes 返回新班级**
|
||
|
||
```bash
|
||
curl http://localhost:8000/api/account/classes
|
||
# 期望：["测试班"]
|
||
```
|
||
|
||
- [ ] **Step 3: 验证 /names 返回学生**
|
||
|
||
```bash
|
||
curl "http://localhost:8000/api/account/names?classname=测试班"
|
||
# 期望：[{"name": "张三", "username": "web测试班张三"}]
|
||
```
|
||
|
||
- [ ] **Step 4: 在浏览器中完整登录流程测试**
|
||
|
||
1. 打开登录框，选学生登录 Tab
|
||
2. 班级下拉选"测试班"
|
||
3. 姓名下拉选"张三"
|
||
4. 输入密码 `123456`
|
||
5. 点击登录，验证成功跳转
|
||
|
||
- [ ] **Step 5: 测试管理员 Tab 登录**
|
||
|
||
用现有管理员账号在管理员 Tab 登录，验证正常。
|
||
|
||
- [ ] **Step 6: 清理测试数据**
|
||
|
||
```bash
|
||
cd api && uv run manage.py shell -c "
|
||
from account.models import User
|
||
User.objects.filter(username='web测试班张三').delete()
|
||
print('cleaned')
|
||
"
|
||
```
|