fix: 优化唯一标识详情布局
This commit is contained in:
47
docs/操作日志_唯一标识布局优化_20260811.md
Normal file
47
docs/操作日志_唯一标识布局优化_20260811.md
Normal file
@@ -0,0 +1,47 @@
|
|||||||
|
# 唯一标识布局优化操作日志
|
||||||
|
|
||||||
|
操作时间: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 溢出。
|
||||||
@@ -1,3 +1,4 @@
|
|||||||
|
<!-- 功能描述:紧凑展示资源唯一标识,并支持点击复制完整值。版本:v1.1.0。 -->
|
||||||
<template>
|
<template>
|
||||||
<a-tooltip :content="`${value}\n点击复制完整唯一标识`">
|
<a-tooltip :content="`${value}\n点击复制完整唯一标识`">
|
||||||
<button class="identity-text" type="button" :aria-label="`复制完整唯一标识 ${value}`" @click="copyIdentity">
|
<button class="identity-text" type="button" :aria-label="`复制完整唯一标识 ${value}`" @click="copyIdentity">
|
||||||
@@ -25,9 +26,15 @@ async function copyIdentity() {
|
|||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.identity-text {
|
.identity-text {
|
||||||
|
/* 网格子项保持内容宽度,避免按钮拉伸后文字居中形成多余空白。 */
|
||||||
|
justify-self: start;
|
||||||
|
width: fit-content;
|
||||||
|
max-width: 100%;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
color: rgb(var(--primary-6));
|
color: rgb(var(--primary-6));
|
||||||
font: inherit;
|
font: inherit;
|
||||||
|
text-align: left;
|
||||||
|
white-space: nowrap;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
border: 0;
|
border: 0;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|||||||
Reference in New Issue
Block a user