50 lines
2.4 KiB
Markdown
50 lines
2.4 KiB
Markdown
# 账户资料页视觉优化操作日志
|
||
|
||
操作时间：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 行的限制。
|
||
|
||
## 风险评估
|
||
|
||
- 仅修改共享资料页模板和局部样式，工作人员与用户账户同步生效。
|
||
- 没有修改数据、接口、上传逻辑、数据库和其他后台页面。
|
||
- 关联字段只读名称依赖已加载的关系选项；加载失败时回退显示原唯一标识。
|