# 账户资料页视觉优化操作日志

操作时间：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 行的限制。

## 风险评估

- 仅修改共享资料页模板和局部样式，工作人员与用户账户同步生效。
- 没有修改数据、接口、上传逻辑、数据库和其他后台页面。
- 关联字段只读名称依赖已加载的关系选项；加载失败时回退显示原唯一标识。