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:
@ -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
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user