Files
FamilyBook/assets/css
laoyang 6930191ac6 家谱:修「鼠标移上去卡片会跳」+ 卡片拆成「头像进资料 / 姓名换中心」两处点击区
用户 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 处。
2026-10-03 15:57:56 +08:00
..