家谱：修「鼠标移上去卡片会跳」+ 卡片拆成「头像进资料 / 姓名换中心」两处点击区

用户 2026-10-03 反馈两条。

一、「鼠标放在某个人的头像上，那个框会移动一下位置」——**根因是库的 CSS**：
    库的 family-chart.css:517 有一条
      `.f3 div.card:hover > div { transform: translate(0, -2px); }`
    而我们的 .kin-card 正是 `div.card` 的**直接子 div**。卡片当时用
    `transform: translate(-50%,-50%)` 居中 —— 于是鼠标一进卡片，这条规则就把
    居中 transform **整份覆盖**成 translate(0,-2px)。
    实测（1600×1000 视口、库缩放 0.9）：
      卡片 translate(-59px,-66px)  →  translate(0,-2px)
      整张卡向右下跳 **53.1 × 57.6 屏幕像素**（正好半张卡），并带 0.2s 过渡，
      所以看起来就是"框移动了一下"。
    修法两条：
      ① 居中不再依赖 transform，改用 `inset: 0` + `margin: auto`
         （绝对定位 + inset 全 0 + margin auto = 在包含块里居中）；
      ② 把库那条 :hover 位移归零（`.kin-chart.f3 div.card:hover > div { transform: none }`）——
         2px 的"上浮"仍在，实测 dy=-1.8px。在 app.css 里覆盖（它加载在库 CSS 之后，
         同特异性后写的赢，不需要 !important），**不改 vendor 里那份文件**
         （升级库会整份覆盖、改动静默消失）。
    ⚠️ 660 别改回 translate(-50%,-50%) 居中 —— 那正是这次的 bug。

二、「以他为中心」按钮不要了，改成把卡片分成两处点击区：
     · 头像 .kin-ph  → 进这个人的资料页（people/show&id=）
     · 姓名 .kin-nm  → 以他为中心重画家谱（?r=kin&focus=）
    两个都是 <a>（而不是一个 a + 一个 button）：点名字换中心本质就是"换个 URL
    重新渲染"。换成 <a> 之后，原来那段"给按钮绑 click + keydown +
    mousedown/pointerdown/touchstart 三处阻止冒泡"的代码**整段删掉** ——
    那是"用按钮干链接的活"才需要的补丁；顺带键盘 / 中键新窗口打开都天然可用。
    两张悬停提示（"资料" / "以他为中心"）分挂到头像、姓名下面，只在指针悬停时显形。
    服务端那份"谁有姻亲在图外"的 branch 计算也一并删掉（渲染没了，留着是死代码）。

验证：
  · 家谱可视化检查 26 → **29** 条全过，其中新增两条正是本次的守卫：
    ⑬ 卡片不靠 transform 居中；⑭ 鼠标移到卡片上**不位移**（原来是 53×58px）。
  · 反向验证：把 CSS 改回旧写法 → ⑬⑭ 立刻变红且实测 dx=53.1 dy=57.6；
    还原后回到全绿（断言不是永远绿的）。
  · 点击区实测：点姓名 → /index.php?r=kin&focus=9；点头像 → /index.php?r=people/show&id=9。
  · e2e 773/0（四条家谱断言跟着新口径更新）· 第 5 轮专项 91/0 · 几何 428/0 ·
    移动端 684/0 · 交互 97/0 · 升级 126/0 · 部署反向验证 3/3。
  · 部署脚本新增三条静态断言（不许 transform 居中 / 必须有 inset:0 /
    必须把库的 :hover 位移归零），防止以后被改回去。
  · 线上 templates/kin/tree.php 与 assets/css/app.css 的 md5 与本地一致；
    kin-focus 已清零、r=kin&focus= 在位、CSS 里 'inset: 0' 8 处。

assets/css/app.css

@@ -633,15 +633,43 @@ textarea.input { min-height: 76px; resize: vertical; }
   border-radius: 10px;
   box-shadow: 0 1px 3px rgba(43,38,32,.10);
   color: var(--ink);
-  transform: translate(-50%, -50%);    /* 坐标给的是卡片中心 */
   transition: border-color .15s ease, box-shadow .15s ease;
   overflow: hidden;
   pointer-events: auto;                 /* 父 .card_cont 是 none，这里恢复 */
 }
+/* ⚠️⚠️ 「鼠标放上去卡片会跳」的根因就在这里（用户 2026-10-03 反馈）。
+   库自带样式里有一条：`.f3 div.card:hover > div { transform: translate(0px,-2px); }`
+   —— 我们的 .kin-card 正好是 `div.card` 的**直接子 div**，于是鼠标一进卡片，
+   这条规则就把**我们用来居中的 `transform: translate(-50%,-50%)` 整个覆盖掉**。
+   实测（1600×1000 视口、库缩放 0.9）：卡片从 translate(-59px,-66px) 变成
+   translate(0,-2px)，整张卡**向右下跳 53.1 × 57.6 屏幕像素**（正好是半张卡）。
+   修法：不再用 transform 居中，改用 `inset: 0` + `margin: auto`
+   —— 绝对定位 + inset 全 0 + margin auto 就是"在包含块里居中"，
+   完全不依赖 transform，库那条规则再怎么覆盖也影响不到位置。
+   （也因此**不需要**去覆盖库的 :hover —— 少一处 !important，少一处将来的漂移。）
+   ⚠️ 别改回 `left/top: 50% + transform: translate(-50%,-50%)`：那正是这次的 bug。 */
+.kin-card {
+  inset: 0;
+  margin: auto;
+}
+/* ⚠️⚠️ 还要把库那条 `:hover` 位移**归零**（用户反馈的第二半）。
+   库的 family-chart.css:517 有：
+     `.f3 div.card:hover > div { transform: translate(0, -2px); }`
+   它不只覆盖居中（那已由上面的 inset+margin auto 解决），还会给卡片加一个
+   纯视觉的"上浮 2px"——实测 mouse 一进卡片，屏幕位置就 dy = **-1.8px**。
+   2px 的抖动正是用户说的「那个框会移动一下」。
+   我们的卡片是**自绘的宣纸卡**，不需要库那套"悬停上浮"装饰，所以直接归零。
+   ⚠️ 不能去改 vendor 里那份文件（升级库会整份覆盖，改动会静默消失），
+      所以在 app.css 里覆盖；app.css 在 family-chart.css **之后**加载（见 kin/tree.php），
+      同特异性下后写的赢，不需要 !important。 */
+.kin-chart.f3 div.card:hover > div { transform: none; }
+.kin-chart.f3 div.card > div { transition: none; }
 .kin-card:hover {
   box-shadow: var(--shadow-l); border-color: var(--brand-2);
 }
-/* 头像外框：**长方形**，宽度贴合头像显示宽度 */
+/* 头像外框：**长方形**，宽度贴合头像显示宽度。
+   用户 2026-10-03 第 7 条：**头像本身是链接**（点它进这个人的资料页）。
+   ⚠️ 它是 <a> 不是 <span> —— 见模板里的说明（"点哪儿去哪儿"用链接最自然）。 */
 .kin-card .kin-ph {
   width: 96px; height: 72px; border-radius: 6px; overflow: hidden;
   background: #F1E7D6; flex: 0 0 auto;
@@ -650,18 +678,9 @@ textarea.input { min-height: 76px; resize: vertical; }
 .kin-card .kin-ph img {
   width: 100%; height: 100%; object-fit: contain; display: block;
 }
-/* 右下角「以 TA 为中心」：每个人都有一个。
-   ⚠️ 单独一个 <button>（不在 <a> 里面）—— 这是"误触"的根治办法：
-      整卡若是链接，手指偏一点就先触发它跳去成员页了。 */
-.kin-card .kin-focus {
-  position: absolute; right: 3px; bottom: 3px;
-  font-size: 10px; line-height: 1; padding: 3px 6px; border-radius: 999px;
-  border: 0; background: var(--brand); color: #fff; cursor: pointer;
-  box-shadow: 0 1px 3px rgba(43, 38, 32, .25);
-  font-family: inherit;
-}
-.kin-card .kin-focus:hover { background: var(--brand-ink); }
-/* 姓名是唯一的链接入口（进成员资料页） */
+.kin-card .kin-ph:hover { box-shadow: 0 0 0 2px var(--brand-2); }
+/* 姓名：用户 2026-10-03 第 7 条改为**以他为中心看家谱**的入口（原来是进资料页）。
+   底下一行小字说明这一处能干什么 —— 不然"点名字会换一张图"没人猜得到。 */
 .kin-card .kin-nm {
   display: block;
   font-size: 12.5px; font-weight: 600; line-height: 1.25; max-width: 100%;
@@ -669,6 +688,14 @@ textarea.input { min-height: 76px; resize: vertical; }
   margin-top: 5px; color: var(--ink); text-decoration: none;
 }
 .kin-card .kin-nm:hover { color: var(--brand); text-decoration: underline; }
+/* 两张"功能提示"用极小的字，且**只在指针悬停时**出现 ——
+   不悬停时不占视觉重量（卡片本来就小，常驻两行提示会把它塞满）。 */
+.kin-card .kin-hint {
+  font-size: 9.5px; line-height: 1.2; color: var(--faint);
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+  max-width: 100%; opacity: 0; transition: opacity .15s ease;
+}
+.kin-card:hover .kin-hint { opacity: 1; }
 /* 称呼在姓名下面一行，用品牌色的浅字（参考实现是「(称呼)」） */
 .kin-card .kin-lb {
   font-size: 10.5px; color: var(--brand); line-height: 1.2; max-width: 100%;

templates/kin/tree.php

@@ -127,15 +127,11 @@ if (!isset($people[$focusId]) || !is_array($people[$focusId])) {
         ];
     }
 
-    // v24 第 12 条：本图上「有姻亲但没画出来」的人 —— 卡片上给个入口
-    $branchOuts = \App\Kinship::branchOuts($graph, $people, $onTree);
-    foreach ($datum as &$dn) {
-        $did = (int)$dn['id'];
-        if (isset($branchOuts[$did])) {
-            $dn['data']['branch'] = $branchOuts[$did]['name'];
-        }
-    }
-    unset($dn);
+    // ⚠️ v24 第 12 条曾在每人数据上挂一个 `branch`（"他的姻亲没画在本图上"的人名），
+    //    用来给卡片加一个"⇄ 姻亲"入口。用户 2026-10-03 第 7 条把那个按钮撤了
+    //    （改成"点姓名 = 以他为中心"），所以这份计算**连同渲染一起删掉了** ——
+    //    留着只会是"服务端算了一个没人用的字段"，日后读代码的人还得反查它干嘛的。
+    //    （如果哪天又要"姻亲入口"，从 git 历史里捞这一段即可。）
 
     $canChart = count($datum) > 1;
 }
@@ -223,24 +219,34 @@ $datumJson = json_encode(
         var p = (d.data && d.data.data) || {};
         var id = (d.data && d.data.id) || '';
         var cls = 'kin-card' + (p.me ? ' is-me' : '') + (p.ph ? ' is-ph' : '');
-        /* 用户 2026-10-03 第 1 条：
+        /* 用户 2026-10-03（第 6 条）：
              ① 卡片**不再整张是链接** —— 原来整卡是 <a>，右下角那个小按钮也在
                 <a> 里，手指/鼠标稍偏一点就先触发外层链接跳去成员页（用户反馈
-                "容易误触"的根因）。现在卡片是 <div>，只有「姓名」那一块是链接，
-                右下角按钮是独立的 <button>，两者物理上分开，不会互相抢点击。
+                "容易误触"的根因）。现在卡片是 <div>，点哪儿都不会误跳。
              ② 头像外框改**长方形**、宽度贴合头像本身（CSS 里 .kin-ph 定宽，
                 img 用 object-fit: contain 不裁切），信息在头像**下方**。
-             ③ 右下角按钮：每个人都有一个 → 以他为中心重画一张家谱
-                （原来只有"姻亲不在图上"的人才有，现在人人都有）。 */
+           用户 2026-10-03（第 7 条）：**撤掉右下角的「以 TA 为中心」按钮**，
+             改成把卡片分成**两个点击区**：
+                · 头像 → 进这个人的资料页；
+                · 姓名 → 以他为中心重画一张家谱。
+             ⚠️ 两个都是 <a>（不是一个 a + 一个 button）：
+                "点名字换中心"本质就是**换个 URL 重新渲染**，用链接最自然 ——
+                能中键新窗口打开、能右键复制地址、没有 JS 也能用。
+                原来那个 <button> 要手动绑 click + 键盘事件 + 三处 stopPropagation，
+                全是"用按钮做链接"的代价；换成 <a> 之后这些代码整段删掉。 */
         return '<div class="' + cls + '" data-kin-id="' + esc(id) + '">'
-          + '<span class="kin-ph"><img src="' + esc(p.avatar) + '" alt=""></span>'
-          + '<a class="kin-nm" href="/index.php?r=people/show&id='
-          + encodeURIComponent(id) + '" title="打开 ' + esc(p.name) + ' 的资料">'
+          + '<a class="kin-ph" href="/index.php?r=people/show&id='
+          + encodeURIComponent(id) + '" title="看 ' + esc(p.name) + ' 的资料">'
+          + '<img src="' + esc(p.avatar) + '" alt=""></a>'
+          + '<a class="kin-nm" href="/index.php?r=kin&focus='
+          + encodeURIComponent(id) + '" title="以 ' + esc(p.name) + ' 为中心看家谱">'
           + esc(p.name) + '</a>'
           + '<span class="kin-lb">' + esc(p.label) + '</span>'
           + (p.ph ? '<span class="kin-mark">待确认</span>' : '')
-          + '<button type="button" class="kin-focus" data-focus-id="' + esc(id) + '"'
-          + ' title="以 ' + esc(p.name) + ' 为中心看家谱">以 TA 为中心</button>'
+          // 两张提示分挂到头像/姓名下面，**悬停时才显形**（见 CSS 的 .kin-hint）：
+          // 这样"点哪儿去哪儿"一眼可辨，不悬停时又不占地方。
+          + '<span class="kin-hint kin-hint-ph">资料</span>'
+          + '<span class="kin-hint kin-hint-nm">以他为中心</span>'
           + '</div>';
       });
 
@@ -296,27 +302,13 @@ $datumJson = json_encode(
     }
 
     /* 用户 2026-10-03 第 2 条：工具条三个按钮（看全部/回到我/回到我的家谱）已撤。
-       镜头由库自动 fit；下面只保留卡片右下角那个「以他为中心」的入口。 */
-
-    /* 用户第 1 条：每张卡片右下角一个「以他为中心」的按钮 —— 点了就以他重画一张家谱。
-       ⚠️ 这个元素在卡片的 <a> 里，必须 preventDefault + stopPropagation，
-          否则会先触发外面那个链接跳去成员页（用户反馈"容易误触"就是这个）。
-       另外用 mousedown/pointerdown/click 三处都拦，触摸设备上才稳。 */
-    Array.prototype.forEach.call(root.querySelectorAll('.kin-focus'), function (btn) {
-      function go(e) {
-        e.preventDefault();
-        e.stopPropagation();
-        var bid = btn.getAttribute('data-focus-id') || '';
-        if (bid) { window.location.href = '/index.php?r=kin&focus=' + encodeURIComponent(bid); }
-      }
-      btn.addEventListener('click', go);
-      btn.addEventListener('keydown', function (e) {
-        if (e.key === 'Enter' || e.key === ' ') { go(e); }
-      });
-      ['mousedown', 'pointerdown', 'touchstart'].forEach(function (ev) {
-        btn.addEventListener(ev, function (e) { e.stopPropagation(); }, { passive: true });
-      });
-    });
+       镜头由库自动 fit。
+       用户 2026-10-03 第 7 条：「以 TA 为中心」的按钮也撤了 —— 现在**点姓名**就是
+       以他为中心（那个 <a> 直接指向 ?r=kin&focus=<id>，是普通的页面跳转）。
+       ⚠️ 原来这里有一大段"给那个小按钮绑 click + keydown + mousedown/pointerdown/
+          touchstart 三处阻止冒泡"的代码，那是**用按钮干链接的活**才需要的补丁
+          （防止先触发外层链接）。换成 <a> 之后整段删掉：
+          少一段代码、少一类 bug，键盘与中键打开也天然可用。 */
 
   })();
   </script>