laoyang
218cdf74fc
用户 2026-10-03 反馈三条。**第一条是我上一版引入的回归，先说清楚**。
一、「画线又有点错位了」—— 上一版把居中从 transform 换成 `inset:0 + margin:auto`，
这一步在**这个库里不成立**：
含块是库的 `div.card`，它在 Cartesian 模式下只有 **1.8px 宽**
（宽度由内部一个空 div 撑出来，卡片是溢出绘制的）。
`inset:0` + `margin:auto` 的"居中"依赖"容器比元素宽" —— 容器只有 1.8px 时
auto 外边距分不出任何空间，卡片直接被摆在容器左上角、整体**右移 53.1px**。
实测（1600×1000、库缩放 0.9）：**每一张**卡的中心都偏在节点中心右边 53.1px
（是固定的布局偏差，不是随机抖动）→ 连线仍然画在节点上，于是全部错位。
正解：`left/top: 50%` + **半个自身尺寸的负外边距**
（`margin-left: calc(var(--kin-w) / -2)`）—— 位置完全由布局决定，
**不经过 transform**，所以库那条 `:hover { transform: … }` 也顶不掉它。
⚠️ 负外边距用 calc 与尺寸共用变量，不写死 -59/-66（迟早脱节）。
⚠️ 这条路上已经栽过两次，两种错写法都别再回去：
· `transform: translate(-50%,-50%)` → hover 时被库覆盖，卡片跳半张（53×58px）；
· `inset:0 + margin:auto` → 容器 1.8px 宽，卡片整体右移 53px、连线错位。
二、「外面那个框又变宽了；宽度和头像图片一致，下面显示名字就行了」：
卡片 118 → **98px**（= 96 头像 + 左右各 1px 边框），横向 padding 归零，
头像改 `width: 100%` 占满卡片内宽 —— 于是**边框刚好贴着头像**，
框里不再有多余的横向空白；头像下面就是名字（+ 与我的称呼）。
⚠️ 98×116 与 JS 的 `setCardDim` 必须同源（库按它算间距与连线落点），
所以两边都改用常量：CSS 的 `--kin-w/--kin-h` ↔ JS 的 `KIN_W/KIN_H`。
三、「鼠标放在名字上后显示了一行字：资料、以他为中心 —— 没必要，不要显示」：
那两行是我上一版加的悬停提示（`.kin-hint`），**整个删掉**（模板 + CSS）。
验证：
· 家谱可视化检查 29 → **34** 条全过，新增五条正是这次的守卫：
⑮ 每张卡正对节点中心（改坏时实测 dx=53.1）· ⑯ 框宽 = 头像宽（≤2px）
· ⑯b 尺寸不是退化的 0（防止"一起变 0"也算过）· ⑰ 无 .kin-hint
· ⑱ 头像下面是名字。
· 反向验证：把居中改回 `inset:0 + margin:auto` → ⑮ 立刻红（dx=44.1），
还原后复绿（断言不是永远绿的）。
· 连线端点独立核对：12 个端点里 9 个落在卡片附近，另 3 个是
**夫妻之间那段连接线**（画在两卡之间，本来就该在两卡之间）。
· e2e 773/0 · 第 5 轮专项 91/0 · 几何 428/0 · 移动端 684/0 · 交互 97/0。
· 部署脚本更新/新增静态断言：允许 transform 之外的居中方式但**禁止那两种错写法**
（transform 居中 / inset:0）、必须有 `margin-left: calc(var(--kin-w) / -2)`、
JS 与 CSS 的宽度必须一致、`kin-hint` 不许回来。
· 线上两个文件 md5 与本地一致；kin-hint=0、--kin-w: 98px 在位。
FamilyBook
家书，记录家庭的全部生活，一本用岁月写成的家谱。
把一个家的「人」「日子」「去过的地方、看过的电影」收进同一本书里。
它是什么
一个自托管的家庭生活系统。它不是又一个待办清单，而是这个家的长期档案 —— 十年之后还能翻出孩子第一次观影的票根、那年暑假走过的路线。
围绕三个圈展开：
- 人：家庭成员、亲友通讯录，以及他们之间的共享关系
- 时间：日历、日程、提醒，以及任务的期限
- 事件：观影、旅行、其他活动 —— 一切都落在同一条时间轴上
它在做什么
| 阶段 | 主题 | 内容 |
|---|---|---|
| 0 | 地基 | 名册、账号、登录、权限模型、安装向导 |
| 1 | 通信 | 通讯录、共享给某个成员、CardDAV 服务端 |
| 2 | 时间 | 日历本、重复日程、提醒、CalDAV 服务端 |
| 3 | 归一 | 观影与旅行迁入统一事件模型 |
| 4 | 任务 | 任务管理，期限自动映射成日历事件 |
| 5 | 回看 | 统计、年度家书、时间轴 |
当前进度：阶段 0 起步，仓库里只有图标与脚手架。
技术选型
- PHP 7.4+（无框架、无 Composer，上传到站点目录即可运行）
- MySQL 5.7+ / 8.0（
utf8mb4） - 前端为原生 HTML / CSS / JavaScript，无构建步骤
⚠️ 注意 CalDAV / CardDAV 是双向协议，和单纯的 .ics 文件导出不是一个量级的东西。
部署
- 把代码放到站点根目录；
- 复制
config.example.php为config.php，填写数据库与app_key； - 访问站点根，按引导页确认 PHP 版本、扩展、配置、数据库连接四项都通过。
config.php 不入库（已在 .gitignore 中忽略），其中包含数据库口令与加密密钥。
⚠️ app_key 一旦开始记录数据就不能再改（换掉即解不开已有数据），
并且它必须单独备份 —— 密钥丢失等同于数据永久丢失。
隐私
身份证号、手机号属于敏感个人信息，一律加密存储。 （就家庭自用而言，身份证号其实没有多少必须存的场景，启用前请三思。）
图标
见 assets/icons/。概念是「这本书就是家」：屋顶即一本摊开的书，
屋顶下纸做的墙上，三行横线是这个家写下的日子。