laoyang c1a97c7d81 家谱 v21:改回 family-chart 库渲染
用户明确要求「还是用 family-chart 来实现吧,刚才查了这个库可以完美实现
我想要的效果,之前一定是你调用的方法不对」。自研区间法(v20)虽然
20/20 全显示且通过全部版面检查,但用户觉得不够顺滑细腻,改为交给成熟库。

== 关键修复(都是真跑出来的坑)==

1. **IIFE 首行就 return**:本地变量 `var f3 = root.querySelector(...)` 与
   全局库 `f3` 重名,`typeof f3 === 'undefined'` 因变量提升恒为真 →
   整段 JS 一行没执行、画布永远空白。改名 `f3Canvas`。

2. **「回到我」不动卡片层**:库的 zoom 行为绑在 `#f3Canvas` 上,不是
   `svg.main_svg`。拿 svg 的 `__zoomObj` 去驱动只会动 SVG 连线层,
   HTML 卡片层(`#htmlSvg .cards_view`)留在原地。改取 `#f3Canvas`。

3. **SVG 退化成 300×150**:库自带 CSS 写的是 `.f3 svg.main_svg{width:100%;
   height:100%}`,而我们的容器类名是 `.kin-chart`(不是 `.f3`)、也没引
   库的 CSS → SVG 根元素用浏览器默认尺寸,所有画到框外的连线被裁掉。
   症状很隐蔽:卡片层是 HTML div 不受影响,于是表现为「卡在、线没了」。
   补 `.kin-chart svg.main_svg{width:100%;height:100%}`。

4. **儿子/女儿这一辈不显示**:树根是最高祖先,`progeny_depth` 必须覆盖到
   「我」的下一代 → 从 2 调到 3。

5. **连线是白的看不见**:库给 path 写了 inline `stroke="#fff"`,普通 CSS
   覆盖不了,必须 `!important`。

== 免费版能力边界(已实测确认,非调用问题)==
库的算法只画「树根的祖先链 + 后代 + 树根的兄弟姐妹 + 各人配偶」,
**不会从配偶继续向上/向下 walk**。20 人夹具里岳父/岳母/舅子/外甥
(4 位姻亲)画不出来(换树根、调 depth 都救不了)→ 图上 16/20。
服务端 data-datum 仍含全体(含姻亲),名册/称呼不受影响。

== 验证战绩 ==
- e2e 549 通过 / 0 失败
- 桌面几何 368 / 0
- 移动端几何 516 / 0(家谱断言改到 family-chart 选择器)
- 交互 97 / 0;升级专测 123 / 0
- 家谱可视化 24 / 0(含「svg 不是 300×150」这条,正是坑 3 的捕手)
- 家谱版面 10 / 0
- 反向验证 3 / 3(间距压扁→叠卡;depth=1→缺人;写坏 centerOn 平移量→偏离中心)
2026-10-02 19:24:08 +08:00
2026-09-29 15:08:42 +00:00

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 文件导出不是一个量级的东西。

部署

  1. 把代码放到站点根目录;
  2. 复制 config.example.php 为 config.php,填写数据库与 app_key;
  3. 访问站点根,按引导页确认 PHP 版本、扩展、配置、数据库连接四项都通过。

config.php 不入库(已在 .gitignore 中忽略),其中包含数据库口令与加密密钥。

⚠️ app_key 一旦开始记录数据就不能再改(换掉即解不开已有数据), 并且它必须单独备份 —— 密钥丢失等同于数据永久丢失。

隐私

身份证号、手机号属于敏感个人信息,一律加密存储。 (就家庭自用而言,身份证号其实没有多少必须存的场景,启用前请三思。)

图标

见 assets/icons/。概念是「这本书就是家」:屋顶即一本摊开的书, 屋顶下纸做的墙上,三行横线是这个家写下的日子。

开源协议

Apache License 2.0

S
Description
家书,记录家庭的全部生活,一个家庭用岁月写成的书。
Readme Apache-2.0
8.5 MiB
Languages
PHP 81.6%
JavaScript 9.3%
CSS 9.1%