From 0eca1805b6e50b843ab5711c4279c909b1016077 Mon Sep 17 00:00:00 2001
From: yueli <yueli@example.com>
Date: Thu, 17 Sep 2026 09:53:31 +0800
Subject: [PATCH] =?UTF-8?q?style(borrow):=20=E5=BD=93=E5=89=8D=E6=8C=81?=
 =?UTF-8?q?=E6=9C=89=E4=BA=BA=E5=88=97=E6=94=B9=E4=B8=BA=E5=B8=B8=E4=BA=AE?=
 =?UTF-8?q?=E8=93=9D=E8=89=B2=EF=BC=8C=E8=BD=AC=E4=BA=A4=E6=97=B6=E5=8A=A0?=
 =?UTF-8?q?=E6=B5=85=E8=93=9D=E5=BA=95=E4=B8=8E=E7=BB=86=E8=BE=B9=E6=A1=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

背景
----
上一轮按「只有发生过转交才高亮」实现后，业务方反馈「当前持有人那里也应该
高亮才对」—— 该列回答的是「东西现在在谁手上」，比「当初谁借的」更需要一眼
看到，不该只在转交时才着色。本轮按新要求调整。

改动
----
· 基础态：当前持有人一律主题色加粗（不再区分是否转交）；
· 转交态：额外加浅蓝底 + 细边框（--el-color-primary-light-9 / light-5），
  强调「经手人已变更，归还时必须由他本人来还」。
  用浅蓝而非实心色块，保持上一轮确立的降噪基调，只做一层轻标记。

覆盖三处「当前持有人」：借还记录列表、还库页、转交弹窗（弹窗按单条明细比对，
故新增 isRowTransferred；组行仍用 currentHolderList）。

★ 数据侧的事实（供验收参考）：trans_borrow_transfer 目前 0 笔，34 条未还
  记录的「当前持有人 = 借用人」、53 条已还记录的持有人为空。
  也就是说转交态（浅蓝框）在产生第一笔真实转交前不会出现。
---
 .../src/views/transaction/records.vue         | 48 ++++++++++++++-----
 .../src/views/transaction/return.vue          | 22 +++++++--
 2 files changed, 55 insertions(+), 15 deletions(-)

diff --git a/inventory-web/src/views/transaction/records.vue b/inventory-web/src/views/transaction/records.vue
index df97ee8..05242e0 100644
--- a/inventory-web/src/views/transaction/records.vue
+++ b/inventory-web/src/views/transaction/records.vue
@@ -145,14 +145,14 @@
            也可能各不相同，故去重后逐个展示。
            表达上做了降噪：未转交=普通文本，转过交=主题色加粗。原先一律用橙色
            标签，一屏几十个色块会把真正需要关注的「已转交」淹没。 -->
-      <el-table-column label="当前持有人" width="130">
+      <el-table-column label="当前持有人" width="140">
         <template #default="{row}">
           <template v-if="currentHolderList(row).length">
             <span
                 v-for="h in currentHolderList(row)"
                 :key="h.name"
-                class="name-fixed"
-                :class="{ 'text-primary': h.transferred }"
+                class="holder-name"
+                :class="{ 'is-transferred': h.transferred }"
             >{{ formatName(h.name) }}</span>
           </template>
           <span v-else-if="row.status === 'returned' || row.status === 'scrapped'" class="text-info">已回库</span>
@@ -337,9 +337,13 @@
         </el-table-column>
         <el-table-column prop="material_name" label="物料名称" min-width="130" show-overflow-tooltip />
         <el-table-column prop="sku" label="SKU" width="110" show-overflow-tooltip />
-        <el-table-column label="当前持有人" width="100" align="center">
+        <el-table-column label="当前持有人" width="120" align="center">
           <template #default="{row}">
-            <span v-if="row.current_holder_name" class="name-fixed">{{ formatName(row.current_holder_name) }}</span>
+            <span
+                v-if="row.current_holder_name"
+                class="holder-name"
+                :class="{ 'is-transferred': isRowTransferred(row) }"
+            >{{ formatName(row.current_holder_name) }}</span>
             <span v-else class="text-info">—</span>
           </template>
         </el-table-column>
@@ -640,6 +644,14 @@ const currentHolderList = (row: any): Array<{ name: string; transferred: boolean
   return Array.from(seen, ([name, transferred]) => ({ name, transferred }))
 }
 
+// 单条明细是否已转交 —— 供转交弹窗的行内展示使用。
+// （组行有 children，请用上面的 currentHolderList）
+const isRowTransferred = (row: any): boolean => {
+  const holder = String(row.current_holder_name || '').split('/')[0].trim()
+  const borrower = String(row.borrower_name || '').split('/')[0].trim()
+  return !!holder && holder !== borrower
+}
+
 // ==========================================================================
 // ★ 整单汇总：主行字段原样取「首条明细」，多明细单会失真，此处按整单重算
 //
@@ -938,10 +950,9 @@ onBeforeUnmount(() => {
    中文姓名以「字」为单位占宽，1 个全角字 ≈ 1em，故统一占 3em：
    「石利」与「郭俊玥」占同样的横向空间，一列名字纵向对齐、不再参差。
 
-   ★ 为什么用 CSS 而不是往数据里插空格（如「石　利」）：
-     插字符会污染真实数据 —— 复制出去、导出、检索、姓名比对全都带着那个空格，
-     而转交/归还的责任链恰恰依赖姓名比对（见 currentHolderList 的归一化逻辑）。
-     同一个视觉目标，用样式实现不伤数据。
+   两字姓名由 formatName() 在**渲染副本**上补全角空格撑成三字宽（见
+   src/utils/format.ts），这里是兜底：单字姓名等异常长度也不会撑破列对齐。
+   row.borrower_name 等底层数据始终是原值。
    ========================================================================== */
 .name-fixed {
   display: inline-block;
@@ -951,11 +962,26 @@ onBeforeUnmount(() => {
   margin-right: 6px;
 }
 
-/* 发生过转交的持有人：主题色加粗，替代原先的橙色色块标签 */
-.text-primary {
+/* ==========================================================================
+   ★ 当前持有人
+   业务方要求该列**始终高亮** —— 「东西现在在谁手上」比「当初谁借的」更需要
+   一眼看到，故基础态即主题色加粗，不再区分是否转交。
+   发生过转交时额外加浅蓝底 + 细边框，强调「经手人已变更」。
+   （浅蓝而非实心色块：保持降噪基调，只做一层轻标记）
+   ========================================================================== */
+.holder-name {
+  display: inline-block;
+  min-width: 3em;
+  margin-right: 6px;
   color: var(--el-color-primary);
   font-weight: 600;
 }
+.holder-name.is-transferred {
+  background: var(--el-color-primary-light-9);
+  border: 1px solid var(--el-color-primary-light-5);
+  border-radius: 4px;
+  padding: 1px 6px;
+}
 
 /* 中性/次要信息：灰字，不抢视觉重心 */
 .text-info {
diff --git a/inventory-web/src/views/transaction/return.vue b/inventory-web/src/views/transaction/return.vue
index eee2f5e..3d58d7f 100644
--- a/inventory-web/src/views/transaction/return.vue
+++ b/inventory-web/src/views/transaction/return.vue
@@ -57,8 +57,8 @@
               <template #default="{row}">
                 <span
                     v-if="row.current_holder_name"
-                    class="name-fixed"
-                    :class="{ 'text-primary': isTransferred(row) }"
+                    class="holder-name"
+                    :class="{ 'is-transferred': isTransferred(row) }"
                 >{{ formatName(row.current_holder_name) }}</span>
                 <span v-else class="text-info">—</span>
               </template>
@@ -663,11 +663,25 @@ onUnmounted(() => {
   min-width: 3em;
 }
 
-/* 发生过转交的当前持有人：主题色加粗，替代原先的橙色标签 */
-.text-primary {
+/* ==========================================================================
+   ★ 当前持有人
+   该列**始终高亮** ——「东西现在在谁手上」比「当初谁借的」更需要一眼看到，
+   故基础态即主题色加粗。发生过转交时额外加浅蓝底 + 细边框，
+   强调「经手人已变更，归还时必须由他本人来还」。
+   ========================================================================== */
+.holder-name {
+  display: inline-block;
+  min-width: 3em;
+  margin-right: 6px;
   color: var(--el-color-primary);
   font-weight: 600;
 }
+.holder-name.is-transferred {
+  background: var(--el-color-primary-light-9);
+  border: 1px solid var(--el-color-primary-light-5);
+  border-radius: 4px;
+  padding: 1px 6px;
+}
 
 /* 中性/次要信息：灰字，不抢视觉重心 */
 .text-info {