laoyang ae3060f552 v24 第 23 批:资源页四色按钮+四个弹框 / 财务页类别标签联动上下两图
用户 2 条原话:
  ①「资源页面,还可以更简洁,资源打开后,没有正文就不显示(没有正文)这句话了,
     直接显示附件。附件列完后,列出来人员,所有者、共享给谁了。然后其他的都不要。
     把编辑、共享、附件、删除,四个按钮,放在每个资源的右上角,和标题一排,
     点击后分别是编辑信息、设置共享人员,包括删除共享人等,附件,点击后弹框,
     允许用户拖动上传。编辑黄色、共享绿色、附件蓝色、删除红色。
     按钮点击后的功能,都是弹框。」
  ②「财务,统计功能和金额变化图表那里,中间,有各类标签,存款保险等。现在点击后
     没有任何效果,这个需要做处理,点击任何一个标签,则统计这个标签下的所有财务条目的
     总数,并在上下两个图上,画出来。」

用户拍板的两个岔路(AskUserQuestion):
  · 筛选某个类别时,上面那三个总数(总资产/总负债/净资产)**保持整本账口径**,
    不跟着切 —— 避免屏幕上只剩一个类别、却被误读成「我家只有存款」。
    当前看的是哪一类,由概览卡里一条高亮条说明(含合计与笔数 + 清除筛选)。
  · 「附件」弹框**既能拖动上传、也列出已有附件并可删**(附件管理只留一个入口);
    展开区的附件墙因此变成**只读**。

════ 一、 资源页(templates/resources/index.php 重写)════

**展开区只留「看」**(用户:"然后其他的都不要"):
  · 正文 —— **没有就不占位**(不再写「(没有正文)」那句话);
  · 附件墙 —— 只读(可预览/下载,不再带删除按钮);
  · 人员行 —— 列在附件之后:**所有者 + 共享给谁**。
原来堆在展开区底部的四坨内联表单(补传附件 / 共享设置 / 编辑 / 删除)**全部撤掉**。
⇒ 全页 <form> 的数量**不再随条目数增长**。这不是洁癖:账目页与名册页都因为
  「每行内联一套表单」被密码管理器(Bitwarden)逐个扫描、把主线程占死过两次,
  是用户报过的真问题。资源页这次一次做对。

**标题行右上角四色按钮**(用户点名配色):
  编辑 `btn-warn`(黄)· 共享 `btn-ok`(绿)· 附件 `btn-info`(蓝,本轮新增该类)·
  删除 `btn-del`(红)。四个都在 `<span class="res-ops">` 里,`margin-left:auto` 吸附右端。

**四个动作全在弹框里**(全页只有一份 `#resPanels`):
  · 编辑 —— 标题 / 正文 / 归属人(用选人组件的对外接口灌数据,且**限定在弹框内**查找
    ——本页有多个同名字段,只按名字找会命中第一个,财务页在这上面栽过);
  · 共享 —— 选人 + 权限(只读/可读写)+ **已共享给谁、逐个「取消共享」**
    (用户原话:「设置共享人员,**包括删除共享人**等」);
  · 附件 —— 已有附件(名字 / 大小 / 下载 / 删除)+ **拖动上传区**
    (复用全站 `_stage_drop.php`:点击或拖动、拖进来立刻上传);
  · 删除 —— 说明「不能撤销,会连 N 个附件一起删」,红色确认按钮。

三条结构性约束(断了浏览器会重新解析 HTML,症状很隐蔽):
  ① `<summary>` 里只能放 **phrasing content** → 按钮组必须是 `<span>`,`<form>` 绝对不能进
     (这也是「四个动作必须进弹框」的一条额外理由:它们本来全是 form);
  ② 点按钮必须 `preventDefault()` —— `<summary>` 内任意点击都会 toggle `<details>`;
     `stopPropagation()` 挡不住它(那是**默认行为**,不是冒泡);
  ③ 弹框容器自己声明了 `display:flex`,就必须补 `[hidden]{display:none}` 规则,
     否则「关不掉」(项目在 `.pv` 与 `.pp-item` 上各栽过一次)。

════ 二、 财务页(templates/ledger/index.php + Ledger.php + chart.php)════

🔴 **「点击后没有任何效果」的根因(本轮定位)**:
  图表卡那条类别 chip 的 JS 在找 `[data-ck-card]` 这个属性来显隐「每账目一张小卡」,
  而 v24 第 11 批 #7 按用户要求把「每账目一张小卡」换成了**一张合并的多线图** ——
  属性随之消失,**而这段 JS 没人删**。于是点标签:`.is-on` 会亮、画面上什么都不变。
  典型的「看着有交互(按钮会变蓝)、实际没作用」:**JS 找的钩子已经不存在了**。
  另外,概览卡里那些标签(存款/基金/保险…)原来是**纯展示的 `<span>`**,压根不可点 ——
  用户说的"中间,有各类标签"多半也指它。本轮把两处**并成同一套筛选入口**。

一处 `applyKind()` 同时做四件事(缺一件用户就会觉得"没生效"):
  ① 两处标签条的高亮**同步**(它们是同一个筛选器的两个入口,只给一处绑事件必然状态不一致);
  ② 上面那张「总金额」图切到**该类别的曲线**(按类别**预渲染**好,靠 hidden 切换
     —— 图是服务端画的 SVG,点了再请求就等于整页刷新,那就不是"点标签"是"点链接"了);
  ③ 下面那张多线图只留该类的线(`chart_multi` 已给每条线标了 `data-ck-line`)
     + 图例同步;
  ④ 下面账目表只列该类条目(`data-ck-row`)。
另外加一条概览高亮:「正在看『存款』:合计 ¥X · N 笔」+「清除筛选」。

服务端口径:
  · `Ledger::timeline($ledgerId, $kind = '')` —— **在取时点之前**按类别过滤。
    ⚠️ 反面做法(先算整本再筛)会把「被筛掉那些账目的创建日」留在时点集合里,
       图右端就凭空多出几个"其实什么都没变"的时点;
  · `Ledger::summary()` 顺手给出 `by_kind_n`(每类**笔数**)——
    用户要的「统计这个标签下的所有财务条目的总数」;
  · `chart_multi` 给每条线包一个 `<g data-ck-line="kind">` —— **纯标注、不改几何**。
    同一份数据多次渲染必须逐字节一致,所以属性值只能是 kind 本身,不许拼时间戳之类的。
  · 三个总数字**不随筛选变**(用户已确认)。

════ 三、 本轮修掉的三个真问题(都不在"功能"层面)════

① 🔴 **覆盖式改 CSS 漏了子属性 → 四个按钮竖排、标题行被撑到 175px 高**
   `.res-ops` 有一条**旧规则** `flex-direction: column`(那是给"展开区四个内联表单竖排"
   写的)。我改完模板后只在文件末尾**追加**了 `display / gap / margin-left`,
   **没写 `flex-direction`** → 四个按钮仍然竖着排。
   真机几何实测:`ops.top=382.9` vs `title.top=445.6`(差 63px)、标题行高 175px。
   ⇒ **改一个类的语义时,旧规则要就地改/删,不要在后面叠一条覆盖** ——
     叠加的写法天生容易漏子属性,而且**下一次改的人只会看到其中一处**。
     这次把那条规则就地改掉,并删掉确已废弃的 `.res-size` / `.res-share-add`。

② 🔴 **静态断言被注释里的字面串撑着 → 恒绿(比恒红危险)**
   部署断言原本是 `grep -qF 'class="res-ops"' 模板`。反证时我把**真代码**改坏,
   断言**照样通过** —— 因为模板注释里(解释"为什么按钮组用 span"时)引用了同一个字面串。
   **恒红会被发现,恒绿会一路伪装成"有覆盖"。**
   ⇒ 判据锚定到代码行(`grep -qE '^[[:space:]]+<span class="res-ops">'`),
     并且注释里不再写完整字面串。

③ **`str.replace(old, new, 0)` 是「替换零次」** —— 写反证脚本时我给某例传 `0`
   想表示"替换全部出现",实际什么都没改 → 报"断言没牙齿",白查一轮。全部替换是 `-1`。

════ 四、 验证 ════
- e2e **1171/0**(本批新增 55 条)· 真机浏览器探针 **45/0**(新增)
- 部署静态断言空跑 **309/0** · 桌面几何 428/0 · 移动端几何(360/375/390/414)684/0
- 老库结构升级 149/0
- **反向验证 18 例**(`_fb_b23_falsify.py`):按钮组拿掉 / 附件按钮摘掉蓝类名 /
  弹框容器拿掉 / 写回「(没有正文)」/ 两处上传区 id 撞名 / 取消共享表单删掉 /
  按钮组改用 div / 去掉 preventDefault / 删掉 [hidden] 规则 /
  写回 flex-direction:column / 「清除筛选」不响应 / 线条不标类别 /
  上图不预渲染 / 账目行不标类别 / timeline 去掉类别筛 / summary 不给笔数 /
  部署断言两条 —— 逐条改回旧行为,点名断言都变红,还原后复绿。

真机探针验的是**行为与几何**(curl 级断言看不见的东西):
  四按钮横排且贴标题行右端 · 点按钮**不会顺带展开**这一条 ·
  弹框 ✕/Esc/遮罩 三种方式都关得掉 · 点标签后**上面那张图真的换了**、
  下面多线图只剩该类 · 账目表跟着收窄 · 高亮条出现且「清除筛选」能回到全部 ·
  375px 窄屏两页都不横向溢出。

════ 五、 新增/改动文件 ════
  重写 `templates/resources/index.php`
  `templates/ledger/index.php`(筛选条合并 + 预渲染各类曲线 + applyKind)
  `app/Ledger.php`(timeline 加类别参数 + summary 补 by_kind_n)
  `app/chart.php`(chart_multi 给线条标 data-ck-line)
  `index.php`(ledger 路由多传 $kindLines)
  `assets/css/app.css`(.res-ops 就地改 + 四色按钮 + 弹框外壳 + .led-focus + 窄屏)
2026-10-06 20:41:04 +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%