shanxia2.0/docs/superpowers/plans/2026-07-12-web-admin-change-password.md

web-admin 顶栏修改密码 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: 在顶栏头像下拉「退出登录」上方增加「修改密码」，用户自助改密后当前会话继续有效。

Architecture: 前端 ArtUserMenu 增加菜单项并打开 UserPasswordDialog；弹窗调用 fetchChangePassword；后端 public.py 新增 POST /web/auth/change-password，CRUD 层 change_password() 校验原密码并 bcrypt 更新。

Tech Stack: Vue 3 + Element Plus（web-admin）；FastAPI + SQLAlchemy + bcrypt（backend）

Spec: docs/superpowers/specs/2026-07-12-web-admin-change-password-design.md

---

Task 1: 后端 CRUD change_password

Files:

• Modify: backend/app/crud/user.py

• Step 1: 在 reset_password 上方新增 change_password(db, user_id, old_password, new_password)

• Step 2: 校验用户存在、原密码 bcrypt、新密码 ≥6 位、新≠旧

Task 2: 后端路由 POST /web/auth/change-password

Files:

• Modify: backend/app/api/public.py

• Step 1: 从 Bearer Token 解析当前用户

• Step 2: 读取 oldPassword/newPassword（兼容蛇形）

• Step 3: 调用 change_password，返回成功/400/401

Task 3: 前端 API

Files:

• Modify: web-admin/src/api/auth.ts

• Step 1: 新增 fetchChangePassword({ oldPassword, newPassword })

Task 4: 前端弹窗 UserPasswordDialog.vue

Files:

• Create: web-admin/src/components/core/layouts/art-header-bar/widget/UserPasswordDialog.vue

• Step 1: 三字段表单弹窗（原密码/新密码/确认）

• Step 2: Fresh Mint 弹窗规范 + Close/Check 底栏

Task 5: 顶栏菜单入口

Files:

• Modify: web-admin/src/components/core/layouts/art-header-bar/widget/ArtUserMenu.vue

• Modify: web-admin/src/locales/langs/zh.json

• Modify: web-admin/src/locales/langs/en.json

• Step 1: 退出登录上方增加「修改密码」菜单项

• Step 2: 引入 UserPasswordDialog，点击打开

Task 6: 验证

• Step 1: 后端语法检查 python -m py_compile
• Step 2: 前端 lint 检查改动文件