audio/dashboard
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

更新 wiki

Browse Source
This commit is contained in:
eafonyang
2026-07-17 17:17:22 +08:00
parent 1da6d72544
commit d292c23dc0
159 changed files with 2918 additions and 2735 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.qoder/repowiki/zh/content/前端组件/业务组件/密码修改对话框.md
+57 -48
View File
@@ -2,10 +2,10 @@
<cite>
**本文档引用的文件**
- [ChangePasswordDialog.vue](file://frontend/src/components/ChangePasswordDialog.vue)
- [auth.js](file://frontend/src/api/auth.js)
- [request.js](file://frontend/src/utils/request.js)
- [auth.js](file://frontend/src/utils/auth.js)
- [change-password-dialog.vue](file://frontend/src/components/common/change-password-dialog.vue)
- [auth.js](file://frontend/src/service/api/auth.ts)
- [index.ts](file://frontend/src/service/request/index.ts)
- [auth.ts](file://frontend/src/hooks/business/auth.ts)
- [auth.js](file://backend/src/routes/auth.js)
- [password.js](file://backend/src/utils/password.js)
- [jwt.js](file://backend/src/utils/jwt.js)
@@ -14,6 +14,14 @@
- [response.js](file://backend/src/utils/response.js)
</cite>
## 更新摘要
**所做更改**
- 更新了组件路径引用，从 `ChangePasswordDialog.vue` 迁移到 `src/components/common/change-password-dialog.vue`
- 更新了API模块路径，从 `frontend/src/api/auth.js` 迁移到 `frontend/src/service/api/auth.ts`
- 更新了请求拦截器路径，从 `frontend/src/utils/request.js` 迁移到 `frontend/src/service/request/index.ts`
- 更新了认证钩子路径，从 `frontend/src/utils/auth.js` 迁移到 `frontend/src/hooks/business/auth.ts`
- 调整了项目结构图以反映新的组件组织方式
## 目录
1. [简介](#简介)
2. [项目结构](#项目结构)
@@ -27,7 +35,7 @@
## 简介
本文件详细说明了密码修改对话框的安全交互机制，包括密码强度验证规则、表单验证流程、API调用流程以及安全最佳实践。该系统采用前后端分离架构，前端使用Vue.js和Element Plus构建用户界面，后端使用Node.js和Express提供RESTful API服务。
本文件详细说明了密码修改对话框的安全交互机制，包括密码强度验证规则、表单验证流程、API调用流程以及安全最佳实践。该系统采用前后端分离架构，前端使用Vue.js和Naive UI构建用户界面，后端使用Node.js和Express提供RESTful API服务。
## 项目结构
@@ -36,10 +44,10 @@
```mermaid
graph TB
subgraph "前端层"
CPD[ChangePasswordDialog.vue<br/>密码修改对话框]
API[auth.js<br/>认证API封装]
REQ[request.js<br/>HTTP请求拦截器]
AUTH[auth.js<br/>认证工具函数]
CPD[change-password-dialog.vue<br/>密码修改对话框]
API[auth.ts<br/>认证API封装]
REQ[index.ts<br/>HTTP请求拦截器]
AUTH[auth.ts<br/>认证业务钩子]
end
subgraph "后端层"
ROUTE[auth.js<br/>认证路由]
@@ -61,10 +69,10 @@ AUTH --> REQ
```
**图表来源**
- [ChangePasswordDialog.vue:1-128](file://frontend/src/components/ChangePasswordDialog.vue#L1-L128)
- [auth.js:1-24](file://frontend/src/api/auth.js#L1-L24)
- [request.js:1-72](file://frontend/src/utils/request.js#L1-L72)
- [auth.js:1-99](file://frontend/src/utils/auth.js#L1-L99)
- [change-password-dialog.vue:1-128](file://frontend/src/components/common/change-password-dialog.vue#L1-L128)
- [auth.ts:1-24](file://frontend/src/service/api/auth.ts#L1-L24)
- [index.ts:1-72](file://frontend/src/service/request/index.ts#L1-L72)
- [auth.ts:1-99](file://frontend/src/hooks/business/auth.ts#L1-L99)
- [auth.js:1-112](file://backend/src/routes/auth.js#L1-L112)
- [password.js:1-37](file://backend/src/utils/password.js#L1-L37)
- [jwt.js:1-28](file://backend/src/utils/jwt.js#L1-L28)
@@ -73,23 +81,24 @@ AUTH --> REQ
- [response.js:1-25](file://backend/src/utils/response.js#L1-L25)
**章节来源**
- [ChangePasswordDialog.vue:1-128](file://frontend/src/components/ChangePasswordDialog.vue#L1-L128)
- [auth.js:1-24](file://frontend/src/api/auth.js#L1-L24)
- [request.js:1-72](file://frontend/src/utils/request.js#L1-L72)
- [change-password-dialog.vue:1-128](file://frontend/src/components/common/change-password-dialog.vue#L1-L128)
- [auth.ts:1-24](file://frontend/src/service/api/auth.ts#L1-L24)
- [index.ts:1-72](file://frontend/src/service/request/index.ts#L1-L72)
## 核心组件
### 密码修改对话框组件
密码修改对话框是一个基于Vue.js的可复用组件，提供完整的密码修改功能：
密码修改对话框是一个基于Vue.js的可复用组件，位于新的组件组织结构中，提供完整的密码修改功能：
- **组件位置**：`frontend/src/components/common/change-password-dialog.vue`
- **表单字段**：
- 原密码（必需，至少6位）
- 新密码（必需，至少6位）
- 确认密码（必需，必须与新密码一致）
- **验证规则**：
- 实时验证：使用Element Plus的表单验证
- 实时验证：使用Naive UI的表单验证
- 自定义验证：确认密码必须与新密码完全匹配
- 错误提示：清晰的错误消息反馈
@@ -100,9 +109,9 @@ AUTH --> REQ
- 表单重置功能
**章节来源**
- [ChangePasswordDialog.vue:14-40](file://frontend/src/components/ChangePasswordDialog.vue#L14-L40)
- [ChangePasswordDialog.vue:78-99](file://frontend/src/components/ChangePasswordDialog.vue#L78-L99)
- [ChangePasswordDialog.vue:108-126](file://frontend/src/components/ChangePasswordDialog.vue#L108-L126)
- [change-password-dialog.vue:14-40](file://frontend/src/components/common/change-password-dialog.vue#L14-L40)
- [change-password-dialog.vue:78-99](file://frontend/src/components/common/change-password-dialog.vue#L78-L99)
- [change-password-dialog.vue:108-126](file://frontend/src/components/common/change-password-dialog.vue#L108-L126)
### API封装层
@@ -113,8 +122,8 @@ AUTH --> REQ
- **错误处理**：统一的错误响应处理
**章节来源**
- [auth.js:14-23](file://frontend/src/api/auth.js#L14-L23)
- [request.js:12-25](file://frontend/src/utils/request.js#L12-L25)
- [auth.ts:14-23](file://frontend/src/service/api/auth.ts#L14-L23)
- [index.ts:12-25](file://frontend/src/service/request/index.ts#L12-L25)
## 架构概览
@@ -149,8 +158,8 @@ D-->>U : 关闭对话框
```
**图表来源**
- [ChangePasswordDialog.vue:108-126](file://frontend/src/components/ChangePasswordDialog.vue#L108-L126)
- [auth.js:14-23](file://frontend/src/api/auth.js#L14-L23)
- [change-password-dialog.vue:108-126](file://frontend/src/components/common/change-password-dialog.vue#L108-L126)
- [auth.ts:14-23](file://frontend/src/service/api/auth.ts#L14-L23)
- [auth.js:79-109](file://backend/src/routes/auth.js#L79-L109)
- [auth.js:3-26](file://backend/src/middleware/auth.js#L3-L26)
- [password.js:16-34](file://backend/src/utils/password.js#L16-L34)
@@ -176,8 +185,8 @@ Submit --> End
```
**图表来源**
- [ChangePasswordDialog.vue:90-99](file://frontend/src/components/ChangePasswordDialog.vue#L90-L99)
- [ChangePasswordDialog.vue:78-88](file://frontend/src/components/ChangePasswordDialog.vue#L78-L88)
- [change-password-dialog.vue:90-99](file://frontend/src/components/common/change-password-dialog.vue#L90-L99)
- [change-password-dialog.vue:78-88](file://frontend/src/components/common/change-password-dialog.vue#L78-L88)
#### 后端验证规则
@@ -214,19 +223,19 @@ stateDiagram-v2
```
**图表来源**
- [ChangePasswordDialog.vue:78-99](file://frontend/src/components/ChangePasswordDialog.vue#L78-L99)
- [ChangePasswordDialog.vue:108-126](file://frontend/src/components/ChangePasswordDialog.vue#L108-L126)
- [change-password-dialog.vue:78-99](file://frontend/src/components/common/change-password-dialog.vue#L78-L99)
- [change-password-dialog.vue:108-126](file://frontend/src/components/common/change-password-dialog.vue#L108-L126)
#### 错误提示和状态管理
- **加载状态**：提交过程中显示加载指示器
- **成功提示**：使用Element Plus的消息提示
- **成功提示**：使用Naive UI的消息提示
- **错误处理**：捕获并显示具体的错误信息
- **表单重置**：操作完成后重置表单状态
**章节来源**
- [ChangePasswordDialog.vue:70-76](file://frontend/src/components/ChangePasswordDialog.vue#L70-L76)
- [ChangePasswordDialog.vue:118-121](file://frontend/src/components/ChangePasswordDialog.vue#L118-L121)
- [change-password-dialog.vue:70-76](file://frontend/src/components/common/change-password-dialog.vue#L70-L76)
- [change-password-dialog.vue:118-121](file://frontend/src/components/common/change-password-dialog.vue#L118-L121)
### API调用流程
@@ -264,9 +273,9 @@ AuthRoute --> PasswordUtils : 使用
```
**图表来源**
- [ChangePasswordDialog.vue:51-127](file://frontend/src/components/ChangePasswordDialog.vue#L51-L127)
- [auth.js:14-23](file://frontend/src/api/auth.js#L14-L23)
- [request.js:12-69](file://frontend/src/utils/request.js#L12-L69)
- [change-password-dialog.vue:51-127](file://frontend/src/components/common/change-password-dialog.vue#L51-L127)
- [auth.ts:14-23](file://frontend/src/service/api/auth.ts#L14-L23)
- [index.ts:12-69](file://frontend/src/service/request/index.ts#L12-L69)
- [auth.js:79-109](file://backend/src/routes/auth.js#L79-L109)
- [password.js:10-34](file://backend/src/utils/password.js#L10-L34)
@@ -281,7 +290,7 @@ AuthRoute --> PasswordUtils : 使用
- **响应格式**：统一的ApiResponse格式
**章节来源**
- [auth.js:14-23](file://frontend/src/api/auth.js#L14-L23)
- [auth.ts:14-23](file://frontend/src/service/api/auth.ts#L14-L23)
- [auth.js:79-109](file://backend/src/routes/auth.js#L79-L109)
- [response.js:1-13](file://backend/src/utils/response.js#L1-L13)
@@ -314,7 +323,7 @@ AuthRoute --> PasswordUtils : 使用
- [password.js:10-34](file://backend/src/utils/password.js#L10-L34)
- [jwt.js:7-25](file://backend/src/utils/jwt.js#L7-L25)
- [auth.js:3-26](file://backend/src/middleware/auth.js#L3-L26)
- [request.js:46-58](file://frontend/src/utils/request.js#L46-L58)
- [index.ts:46-58](file://frontend/src/service/request/index.ts#L46-L58)
### 用户体验优化
@@ -337,7 +346,7 @@ AuthRoute --> PasswordUtils : 使用
- **焦点管理**：自动聚焦到第一个输入框
**章节来源**
- [ChangePasswordDialog.vue:18-38](file://frontend/src/components/ChangePasswordDialog.vue#L18-L38)
- [change-password-dialog.vue:18-38](file://frontend/src/components/common/change-password-dialog.vue#L18-L38)
## 依赖关系分析
@@ -345,10 +354,10 @@ AuthRoute --> PasswordUtils : 使用
```mermaid
graph TD
CPD[ChangePasswordDialog.vue] --> API[auth.js]
API --> REQ[request.js]
REQ --> AUTH[auth.js]
CPD --> EL[Element Plus]
CPD[change-password-dialog.vue] --> API[auth.ts]
API --> REQ[index.ts]
REQ --> AUTH[auth.ts]
CPD --> NAIVE[Naive UI]
API --> AXIOS[Axios]
REQ --> JWT[JWT]
AUTH --> LS[localStorage]
@@ -362,14 +371,14 @@ end
```
**图表来源**
- [ChangePasswordDialog.vue:54](file://frontend/src/components/ChangePasswordDialog.vue#L54)
- [auth.js:1](file://frontend/src/api/auth.js#L1)
- [request.js:1](file://frontend/src/utils/request.js#L1)
- [auth.js:1](file://frontend/src/utils/auth.js#L1)
- [change-password-dialog.vue:54](file://frontend/src/components/common/change-password-dialog.vue#L54)
- [auth.ts:1](file://frontend/src/service/api/auth.ts#L1)
- [index.ts:1](file://frontend/src/service/request/index.ts#L1)
- [auth.ts:1](file://frontend/src/hooks/business/auth.ts#L1)
### 外部依赖
- **Element Plus**：UI组件库，提供对话框和表单组件
- **Naive UI**：UI组件库，提供对话框和表单组件
- **Axios**：HTTP客户端，处理API请求
- **Crypto**：Node.js内置加密模块，提供PBKDF2算法
- **Jsonwebtoken**：JWT令牌处理库
@@ -438,7 +447,7 @@ end
- 配置正确的CORS设置
**章节来源**
- [request.js:46-68](file://frontend/src/utils/request.js#L46-L68)
- [index.ts:46-68](file://frontend/src/service/request/index.ts#L46-L68)
- [auth.js:83-108](file://backend/src/routes/auth.js#L83-L108)
## 结论