From 6930191ac6e4f38ebef452d15fd2d77d9fbd23b1 Mon Sep 17 00:00:00 2001 From: laoyang Date: Sat, 3 Oct 2026 15:57:56 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AE=B6=E8=B0=B1=EF=BC=9A=E4=BF=AE=E3=80=8C?= =?UTF-8?q?=E9=BC=A0=E6=A0=87=E7=A7=BB=E4=B8=8A=E5=8E=BB=E5=8D=A1=E7=89=87?= =?UTF-8?q?=E4=BC=9A=E8=B7=B3=E3=80=8D+=20=E5=8D=A1=E7=89=87=E6=8B=86?= =?UTF-8?q?=E6=88=90=E3=80=8C=E5=A4=B4=E5=83=8F=E8=BF=9B=E8=B5=84=E6=96=99?= =?UTF-8?q?=20/=20=E5=A7=93=E5=90=8D=E6=8D=A2=E4=B8=AD=E5=BF=83=E3=80=8D?= =?UTF-8?q?=E4=B8=A4=E5=A4=84=E7=82=B9=E5=87=BB=E5=8C=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 用户 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 + 一个 button）：点名字换中心本质就是"换个 URL 重新渲染"。换成 之后，原来那段"给按钮绑 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 | 55 ++++++++++++++++++++++++-------- templates/kin/tree.php | 72 +++++++++++++++++++----------------------- 2 files changed, 73 insertions(+), 54 deletions(-) diff --git a/assets/css/app.css b/assets/css/app.css index 87681d4..4994451 100644 --- a/assets/css/app.css +++ b/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 条：**头像本身是链接**（点它进这个人的资料页）。 + ⚠️ 它是 不是 —— 见模板里的说明（"点哪儿去哪儿"用链接最自然）。 */ .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 为中心」：每个人都有一个。 - ⚠️ 单独一个 ' + // 两张提示分挂到头像/姓名下面，**悬停时才显形**（见 CSS 的 .kin-hint）： + // 这样"点哪儿去哪儿"一眼可辨，不悬停时又不占地方。 + + '资料' + + '以他为中心' + ''; }); @@ -296,27 +302,13 @@ $datumJson = json_encode( } /* 用户 2026-10-03 第 2 条：工具条三个按钮（看全部/回到我/回到我的家谱）已撤。 - 镜头由库自动 fit；下面只保留卡片右下角那个「以他为中心」的入口。 */ - - /* 用户第 1 条：每张卡片右下角一个「以他为中心」的按钮 —— 点了就以他重画一张家谱。 - ⚠️ 这个元素在卡片的 里，必须 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 为中心」的按钮也撤了 —— 现在**点姓名**就是 + 以他为中心（那个 直接指向 ?r=kin&focus=，是普通的页面跳转）。 + ⚠️ 原来这里有一大段"给那个小按钮绑 click + keydown + mousedown/pointerdown/ + touchstart 三处阻止冒泡"的代码，那是**用按钮干链接的活**才需要的补丁 + （防止先触发外层链接）。换成 之后整段删掉： + 少一段代码、少一类 bug，键盘与中键打开也天然可用。 */ })();