一、约定

标题	内容
路由地址	http://ip:port/personalInfo
路由页面	src\views\PersonalInfo\AccountInfo.vue
操作权限	无限制
API调用约定	当前组件进行API调用集中管理、内置组件仅做展现层控制。

二、属性（Attributes）

组件props传入参数

序号	参数名	类型	必填	说明	示例
1	formData	Object	是	用户信息数据	{id: 1, userName: "admin", nickName: "管理员", phone: "13800138000", headImage: "http://..."}
2	saveBtnShow	Boolean	是	保存按钮显示状态	false

内部data参数

序号	参数名	类型	说明	默认值	可选值
1	editStatus	number	编辑状态	0	0,1
2	nickName	computed	计算属性-用户昵称	--	--
3	uploadAvatarVisible	Boolean	头像上传弹窗显示状态	false	true,false
4	avatarParams	Object	头像上传参数	{}	--
5	headImageStatus	Boolean	头像加载状态	false	true,false
6	uploadHeaders	Object	上传请求头	{token: getToken()}	--

三、组件管理

（一）组件事件

组件自身提供的功能

核心功能点，执行的事件关系：

账号信息展示

用户名编辑

头像上传与裁剪

保存与取消编辑

（二）子组件

使用子组件提供功能

头像展示与编辑

表单信息展示

1. uploadAvatar组件（头像裁切上传）

提供头像上传与裁剪功能

父→子组件传参

visible: 弹窗显示状态

otherParams: 其他参数

img-url: 图片URL

子→父事件上报

上报通知	用途	执行内部事件
crop-success	裁剪成功通知	cropSuccess()

四、事件方法

核心事件，含数据处理、API调用、事件管理管理等

1. handleEditInfoBtn() 开始编辑

设置编辑状态为1

通知父组件显示保存按钮

2. cancel() 取消编辑

重置编辑状态为0

通知父组件隐藏保存按钮

3. save() 保存编辑

验证用户名和头像是否为空

调用updateUserName接口更新用户名

调用updateHeadImg接口更新头像

更新本地用户信息

通知父组件保存成功

使用事件总线通知头像更新

4. handleUserHead() 处理头像编辑

显示头像上传弹窗

5. cropSuccess() 头像裁剪成功处理

创建FormData对象

调用uploadFileWithFileName接口上传文件

更新本地头像URL

关闭头像上传弹窗

6. getAction() 获取上传接口地址

根据环境变量构建上传接口URL

7. uploadSuccess() 上传成功处理

更新头像URL

调用handleUpdateHeadImage更新头像

8. handleUpdateHeadImage() 更新头像

调用updateHeadImg接口更新头像

显示成功提示

9. checkUserName() 验证用户名格式

使用正则表达式验证用户名格式

五、生命周期钩子

1. onBeforeUnmount() 组件卸载前

重置编辑状态

通知父组件隐藏保存按钮

AccountInfo组件

一、约定#

二、属性（Attributes）#

三、组件管理#

（一）组件事件#

（二）子组件#

1. uploadAvatar组件（头像裁切上传）#

四、事件方法#

1. handleEditInfoBtn() 开始编辑#

2. cancel() 取消编辑#

3. save() 保存编辑#

4. handleUserHead() 处理头像编辑#

5. cropSuccess() 头像裁剪成功处理#

6. getAction() 获取上传接口地址#

7. uploadSuccess() 上传成功处理#

8. handleUpdateHeadImage() 更新头像#

9. checkUserName() 验证用户名格式#

五、生命周期钩子#

1. onBeforeUnmount() 组件卸载前#

一、约定

二、属性（Attributes）

三、组件管理

（一）组件事件

（二）子组件

1. uploadAvatar组件（头像裁切上传）

四、事件方法

1. handleEditInfoBtn() 开始编辑

2. cancel() 取消编辑

3. save() 保存编辑

4. handleUserHead() 处理头像编辑

5. cropSuccess() 头像裁剪成功处理

6. getAction() 获取上传接口地址

7. uploadSuccess() 上传成功处理

8. handleUpdateHeadImage() 更新头像

9. checkUserName() 验证用户名格式

五、生命周期钩子

1. onBeforeUnmount() 组件卸载前