# 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`

- [x] **Step 1:** 在 `reset_password` 上方新增 `change_password(db, user_id, old_password, new_password)`
- [x] **Step 2:** 校验用户存在、原密码 bcrypt、新密码 ≥6 位、新≠旧

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

**Files:**
- Modify: `backend/app/api/public.py`

- [x] **Step 1:** 从 Bearer Token 解析当前用户
- [x] **Step 2:** 读取 `oldPassword`/`newPassword`（兼容蛇形）
- [x] **Step 3:** 调用 `change_password`，返回成功/400/401

### Task 3: 前端 API

**Files:**
- Modify: `web-admin/src/api/auth.ts`

- [x] **Step 1:** 新增 `fetchChangePassword({ oldPassword, newPassword })`

### Task 4: 前端弹窗 `UserPasswordDialog.vue`

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

- [x] **Step 1:** 三字段表单弹窗（原密码/新密码/确认）
- [x] **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`

- [x] **Step 1:** 退出登录上方增加「修改密码」菜单项
- [x] **Step 2:** 引入 `UserPasswordDialog`，点击打开

### Task 6: 验证

- [x] **Step 1:** 后端语法检查 `python -m py_compile`
- [x] **Step 2:** 前端 lint 检查改动文件