platforms/docs/操作日志_唯一标识布局优化_20260811.md

唯一标识布局优化操作日志

操作时间：2026-08-11 10:32:05 操作类型：修改 影响模块：平台总后台公共唯一标识组件

操作前状态

• 标准资源详情页使用网格布局展示标签和值。
• 唯一标识由可点击按钮承载；按钮作为网格子项时会被默认横向拉伸，按钮文字居中后与“唯一标识”标签之间形成明显的视觉空白。
• 普通文本字段不使用该按钮，因此没有同类间距问题。

具体操作

• 修改 frontend/platform_admin/src/components/IdentityText.vue：
  • 使用 justify-self: start 阻止按钮在网格中横向拉伸。
  • 使用内容宽度并限制最大宽度，保持不同容器中的兼容性。
  • 将按钮文字显式设为左对齐，并保持单行展示。
  • 保留末尾 12 位短标识、悬浮提示和点击复制完整唯一标识的原有行为。

操作后状态

• 详情页中的唯一标识紧邻标签显示，继续使用既有的 12px 标签值间距。
• 列表、详情、钱包摘要等公共调用场景继续共用同一组件。
• 详情三列结构、钱包信息、状态管理以及接口行为均未改变。

代码变更

• frontend/platform_admin/src/components/IdentityText.vue：修正唯一标识按钮的网格对齐和内容宽度。
• docs/操作日志_唯一标识布局优化_20260811.md：记录问题根因、行为变化、验证结果和风险。

验证结果

• npm.cmd run type:check：通过。
• npm.cmd run build：通过，Vite 生产构建完成。
• npm.cmd run resource-pages:check：通过，覆盖详情 46 类、新建 25 类、编辑 23 类。
• 浏览器回归：
  • 1600px 视口使用三列，唯一标识标签和值间距为 12px，无横向溢出。
  • 1100px 视口使用两列，间距为 12px，无横向溢出。
  • 700px 视口使用单列，间距为 12px，无横向溢出。
  • 气站列表中的唯一标识按钮保持内容宽度和左对齐，控制台无警告或错误。

风险评估

• 改动仅涉及公共唯一标识按钮的 CSS，不修改数据、接口、权限和复制逻辑，风险较低。
• justify-self 仅在网格子项场景生效；列表等普通流布局不会因此改变结构。
• white-space: nowrap 延续短标识的单行展示方式，组件仍只显示末尾 12 位，不会引入长 UUID 溢出。