platforms/docs/操作日志_账户资料页视觉优化_20260810.md

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

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

风险评估

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