style(borrow): 持有人高亮统一为条件蓝色,姓名按两字补全角空格等宽

一、当前持有人高亮策略统一
----
还库页(return.vue)该列原为橙色标签(type="warning"),与列表页在上一轮
已完成的条件高亮不一致。现统一为:
  · 当前持有人 ≠ 借用人(确曾转交)→ 主题色 var(--el-color-primary) 加粗
  · 两者同一人(常态)→ 普通深色文本,不做任何高亮

比对前把两侧都归一化到「斜杠前段」:历史数据可能混入「姓名/拼音」的完整
username 写法,不归一化会把同一人误判成转交,让整列无故飘蓝。

(records.vue 该列在 ba5394f 已是此策略,本轮仅同步调用 formatName。)

二、姓名两字补全角空格,实现等宽对齐
----
新增 formatName()(放在 src/utils/format.ts,而非各组件内复制 —— 列表页与
还库页都要用,规则改动只需改一处):

  '高雪'     -> '高 雪'    U+3000 全角空格,占一个汉字宽
  '郭俊玥'   -> '郭俊玥'
  '欧阳娜娜' -> '欧阳娜娜'
  'AB'       -> 'AB'        纯拉丁不补,否则渲染出 'A B' 怪相
  null/'测试01'/混合字符 -> 原样

★ 纯展示层:只在模板 {{ formatName(row.borrower_name) }} 中调用,
  row.borrower_name 等底层对象**一个字节都没动**。
  姓名是转交/归还责任链的匹配键(records.vue 的 currentHolderList、
  return.vue 的 isTransferred),往数据里插不可见字符会让比对、检索、
  导出、复制全部带上它 —— 这正是上一轮拒绝「插空格」的原因,本轮改用
  渲染期格式化,视觉要求与数据纯洁性同时满足。

★ 为什么用 U+3000 而非普通空格:普通空格宽度随字体浮动(约半个汉字),
  补进去反而难对齐;U+3000 稳定占一个汉字宽,与「1 汉字 ≈ 1em」一致。

三、配套
----
· 归还人 / 当前持有人 / 借用人三列(含转交弹窗的持有人列)统一走 formatName;
· .name-fixed 增加 margin-right,避免同一格内多个姓名(同一单持有人/归还人
  不同)紧贴成「高 雪张 三」。
This commit is contained in:
yueli
2026-09-17 09:45:34 +08:00
parent ba5394f70c
commit b1f39acb97
3 changed files with 91 additions and 9 deletions

View File

@ -34,3 +34,37 @@ export function normalizeQty(value: any, fallback = 0): number {
const n = Number(value)
return Number.isFinite(n) ? Number(n.toFixed(4)) : fallback
}
// 中日韩统一表意文字。用于判断一个字符是否占一个「汉字宽」。
const CJK_CHAR = /[㐀-䶿一-鿿豈-﫿]/
/**
* 姓名等宽显示格式化 —— 两个字的中文姓名在中间补一个全角空格,
* 视觉上撑成三个字宽,与三字姓名纵向对齐。
*
* '高雪' -> '高 雪' (中间是 U+3000占一个汉字宽
* '郭俊玥' -> '郭俊玥'
* '欧阳娜娜' -> '欧阳娜娜' 4 字不动)
*
* ★ 纯展示层函数:只在模板渲染时调用,**绝不写回数据**。
* 姓名是转交/归还责任链的匹配键(见 records.vue 的 currentHolderList
* 与 return.vue 的 isTransferred往数据里插不可见字符会让比对、检索、
* 导出、复制全部带上它。本函数返回的是「显示用副本」,
* row.borrower_name 始终是原值。
*
* ★ 为什么用 U+3000 而不是普通空格:
* 普通空格宽度随字体变化(通常约半个汉字),补进去反而更难对齐;
* U+3000 是东亚字体的全角空格,稳定占一个汉字宽 —— 与「1 个汉字 ≈ 1em」
* 的等宽前提一致。
*
* ★ 为什么限定两个字符都是汉字:
* 这条规则的目的是「与三字中文姓名对齐」。若姓名为两个拉丁字符(如 'AB'
* 补一个全角空格并不会让它获得汉字宽度,只会渲染出 'A B' 这样的怪相。
* 故非汉字组合一律原样返回。
*/
export function formatName(name: any): string {
if (name === null || name === undefined) return ''
const s = String(name)
if (s.length !== 2) return s
return CJK_CHAR.test(s[0]) && CJK_CHAR.test(s[1]) ? `${s[0]} ${s[1]}` : s
}