feat: 新增账户资料页与头像上传
将工作人员和用户的详情、编辑改为独立账户资料页。 增加受控头像上传与读取、图片安全校验、接口测试,并优化只读及编辑布局。 同步更新平台需求、接口安全说明、项目文档和操作日志。
This commit is contained in:
49
docs/操作日志_账户资料页视觉优化_20260810.md
Normal file
49
docs/操作日志_账户资料页视觉优化_20260810.md
Normal file
@@ -0,0 +1,49 @@
|
||||
# 账户资料页视觉优化操作日志
|
||||
|
||||
操作时间:2026-08-10
|
||||
|
||||
操作类型:修改
|
||||
|
||||
影响模块:平台总后台工作人员与用户账户资料页
|
||||
|
||||
## 操作前状态
|
||||
|
||||
宽屏下顶部资料内容集中在卡片左侧,右侧留白较大;基本信息使用灰色禁用输入框表示查看态,容易与不可用状态混淆;表单内容偏左且必填星号与“名称”标签距离过大。
|
||||
|
||||
## 具体操作
|
||||
|
||||
1. 将顶部资料区改为最大宽度网格,头像和身份信息整体居中。
|
||||
2. 缩小头像、标题、行高、卡片内边距和卡片间距。
|
||||
3. 为只读状态新增 `displayProfileValue` 文本格式化逻辑,编辑状态继续使用原表单控件。
|
||||
4. 将基本信息内容区居中并统一标签、值、输入框和按钮基线。
|
||||
5. 在资料页局部覆盖 Arco 必填符号尺寸,修复星号错位。
|
||||
6. 保留现有头像内容、上传流程、接口、路由和响应式行为。
|
||||
|
||||
## 操作后状态
|
||||
|
||||
用户与工作人员资料页在宽屏下内容集中且层级明确;查看态展示纯文本,编辑态展示输入控件;必填星号紧贴字段标签,保存与取消按钮保持原操作位置。
|
||||
|
||||
## 代码变更
|
||||
|
||||
- `frontend/platform_admin/src/views/account/AccountProfilePage.vue`
|
||||
- 新增 `displayProfileValue`,区分查看与编辑渲染。
|
||||
- 头像显示尺寸由 132px 调整为 120px。
|
||||
- `frontend/platform_admin/src/views/account/AccountProfilePage.less`
|
||||
- 重构顶部网格、表单内容宽度、详情文本、编辑控件和必填符号样式。
|
||||
- `docs/项目文档_账户资料页_v1.1.md`
|
||||
- 记录 v1.1 页面结构、行为差异和维护边界。
|
||||
|
||||
## 验证结果
|
||||
|
||||
- `npm run build`:通过。
|
||||
- 浏览器真实用户资料验证:查看态、编辑态、必填符号、取消恢复均正常。
|
||||
- 必填符号计算宽度为 8px,伪元素内容为 `*`。
|
||||
- 页面控制台无错误;验证过程中未保存或修改测试账户数据。
|
||||
- `git diff --check`:通过。
|
||||
- 文件行数:`AccountProfilePage.vue` 455 行,`AccountProfilePage.less` 209 行,符合单文件尽量不超过 500 行的限制。
|
||||
|
||||
## 风险评估
|
||||
|
||||
- 仅修改共享资料页模板和局部样式,工作人员与用户账户同步生效。
|
||||
- 没有修改数据、接口、上传逻辑、数据库和其他后台页面。
|
||||
- 关联字段只读名称依赖已加载的关系选项;加载失败时回退显示原唯一标识。
|
||||
Reference in New Issue
Block a user