laoyang/FamilyBook
1
0
Fork 0
Code Issues 29 Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
用户 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 处。
This commit is contained in:
laoyang
2026-10-03 15:57:56 +08:00
parent e0562b8627
commit 6930191ac6
2 changed files with 73 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/kin/tree.php
+32 -40
View File
@@ -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>