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 + 窄屏）

assets/css/app.css

@@ -2564,12 +2564,18 @@ body[class] .semi-datepicker-day-inhover { background-color: color-mix(in srgb,
 .res-title { font-size: 15px; font-weight: 600; }
 .res-n { font-size: 12px; color: var(--faint); }
 .res-body { padding: 0 14px 14px; display: flex; flex-direction: column; gap: 10px; }
-.res-size { font-size: 11px; color: var(--faint); }
 .res-inline { display: inline; margin: 0; }
 .res-shares { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
 .res-label { font-size: 12px; color: var(--muted); }
-.res-ops { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
-.res-share-add > summary { cursor: pointer; }
+/* 🔴 v24 第 23 批：这条规则**必须改而不是在后面再覆盖一条**。
+   旧值是 `flex-direction: column` —— 那是给「展开区里四个内联表单竖着排」用的布局，
+   而第 23 批把四个动作搬进了弹框，`.res-ops` 变成了**标题行右端那一排按钮**。
+   本轮实测：只在文件末尾追加 `display/gap/margin-left`，**没写 `flex-direction`**，
+   于是四个按钮仍然**竖着排**，把标题行从 40px 撑到 **175px 高**
+   （真机几何实测 ops.top=382.9 / title.top=445.6 —— 差 63px，一眼就看出不在同一排）。
+   ⚠️ 这也是"两处定义同一个东西"的经典代价：覆盖式修法天生容易漏子属性，
+     而下一次改的人只会看到其中一处。**改类名语义时，旧规则要删/改，不要叠。** */
+.res-ops { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
 /* ---- 资源列表：搜索在上（用户 2026-10-03 第 6 条）、排序与截断提示（第 10 条）---- */
 .res-search-card { display: flex; flex-direction: column; gap: 10px; }
 .res-search { margin-bottom: 0; }
@@ -3918,3 +3924,138 @@ button.btn, a.btn, summary.btn, .seg-btn, .icon-btn, .rv-act-btn, .cs-btn, .bf-b
   #carddav .btn-row { flex-wrap: wrap; }
   #carddav .node-badge { white-space: normal; }
 }
+
+/* ============================================================
+   v24 第 23 批 用户第 1 条：资源页列表瘦身 + 右上角四色按钮 + 四个弹框
+   ============================================================ */
+
+/* ---- ① 标题行：按钮组吸附到最右侧（与标题同一排）----
+   见上面 `.res-ops` 原位那条注释：**旧规则已经就地改掉了**，不是在这里再覆盖一遍。
+   （这正是本轮踩的坑：先前只在这里追加，`flex-direction: column` 漏改，按钮竖排。）
+   ⚠️ 按钮组必须是 <span>（phrasing content）：<summary> 里放 <div> 是非法 HTML。
+      这里给 `display:inline-flex` 才能有 flex 布局（span 默认 inline）。 */
+.res-caret { color: var(--faint); font-size: 12px; flex: 0 0 auto; }
+/* 展开时把箭头翻过来（纯装饰，不影响语义） */
+.res-item[open] .res-caret { transform: rotate(180deg); }
+.res-caret { transition: transform .15s ease; }
+
+/* ---- ② 四个按钮的颜色（用户点名：编辑黄、共享绿、附件蓝、删除红）----
+   `.btn` 自带边框与底色，这里只覆盖这三样；文字色统一用白（黄底白字对比度偏低，
+   所以黄色的字色用深棕而不是纯白 —— 与 `.btn-warn` 的既有做法一致）。 */
+.btn-info { background: #2C6FB5; color: #fff; border-color: transparent; }   /* 附件：蓝 */
+.res-op { font-size: 12.5px; }
+
+/* ---- ③ 展开区：人员行（附件列完之后才显示）----
+   用户原话：「附件列完后，列出来人员，所有者、共享给谁了。然后其他的都不要。」 */
+.res-people {
+  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
+  padding-top: 10px; border-top: 1px solid var(--line-2);
+}
+
+/* ---- ④ 弹框外壳 ----
+   ⚠️ `[hidden]` 必须**自己声明**：下面这两个类都写了 `display:flex`，
+      而 `[hidden]` 的浏览器默认 `display:none` 优先级更低 → 会被盖过 → 关不掉。
+      项目在 `.pv` 与 `.pp-item` 上各栽过一次，所以这两行是硬要求（有 e2e 断言盯着）。 */
+.res-modal {
+  position: fixed; inset: 0; z-index: 78;
+  display: flex; align-items: center; justify-content: center;
+}
+.res-modal[hidden] { display: none; }
+.res-mask { position: absolute; inset: 0; background: rgba(47, 36, 30, .34); }
+.res-panel-lg, .res-panel-sm {
+  position: relative; z-index: 1;
+  background: var(--surface); border: 1px solid var(--line);
+  border-radius: 14px; box-shadow: var(--shadow-l);
+  width: min(460px, 92vw); max-height: min(88vh, 700px);
+  display: flex; flex-direction: column;
+}
+.res-panel-sm { width: min(400px, 92vw); }
+.res-panel-lg[hidden], .res-panel-sm[hidden] { display: none; }
+.res-ph {
+  display: flex; align-items: center; gap: 10px;
+  padding: 12px 14px 10px; border-bottom: 1px solid var(--line-2);
+}
+.res-ph b { font-size: 14.5px; }
+.res-x {
+  margin-left: auto; border: 0; background: transparent; cursor: pointer;
+  font-size: 15px; color: var(--muted); padding: 4px 6px; border-radius: 6px;
+}
+.res-x:hover { background: var(--line-2); color: var(--ink); }
+.res-pb { padding: 12px 14px; overflow-y: auto; }
+.res-pb .field { margin-bottom: 12px; }
+.res-pb .field > label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 5px; }
+.res-pf {
+  display: flex; gap: 8px; justify-content: flex-end;
+  padding: 10px 14px; border-top: 1px solid var(--line-2);
+}
+.res-pb .pp { max-width: none; }
+.res-sub { font-size: 13px; color: var(--muted); margin: 14px 0 8px; font-weight: 600; }
+.res-share-now { border-top: 1px solid var(--line-2); margin-top: 10px; }
+
+/* ---- ⑤ "已共享给" / "已有附件" 两行（脚本按 data 属性现渲染）----
+   ⚠️ 用 <span> + inline-flex 而不是 <div>/<table>：
+      这些行要能塞进任意容器，且不需要表格语义（就是"一行一行的清单"）。 */
+.rd-share-row, .rd-att-row {
+  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
+  padding: 6px 0; border-bottom: 1px solid var(--line-2);
+}
+.rd-share-row:last-child, .rd-att-row:last-child { border-bottom: 0; }
+.rd-share-name, .rd-att-name { flex: 1 1 auto; min-width: 0; word-break: break-all; font-size: 13.5px; }
+/* 附件行里的缩略图：与展开区的附件墙同一个观感（小一号，弹框里放得下） */
+.rd-att-thumb {
+  width: 34px; height: 34px; flex: 0 0 auto;
+  object-fit: cover; border-radius: 6px; border: 1px solid var(--line);
+}
+.rd-att-ico {
+  width: 34px; height: 34px; flex: 0 0 auto;
+  display: inline-flex; align-items: center; justify-content: center;
+  border-radius: 6px; background: #5F6672; color: #fff;
+  font-size: 10px; text-align: center; line-height: 1.1;
+  padding: 2px; overflow: hidden; word-break: break-all;
+}
+
+/* ---- ⑥ 窄屏 ----
+   四个按钮 + 标题 + 归属人 chip + 权限徽标挤在一行，360px 上必然溢出。
+   让按钮组整体落到第二行（`.res-head` 本来就能 wrap），并收紧内边距。
+   ⚠️ 这里**不**动全站 `.node-badge` 的 nowrap —— 上一批（CardDAV 卡）已经证明
+      改全站会把所有徽标都变得可折行。 */
+@media (max-width: 560px) {
+  .res-head { padding: 10px 12px; row-gap: 6px; }
+  .res-ops { margin-left: 0; width: 100%; justify-content: flex-start; }
+  .res-caret { display: none; }
+  .res-op { flex: 0 1 auto; }
+}
+
+/* ============================================================
+   v24 第 23 批 用户第 2 条：财务页类别标签可点 + 上下两图联动
+   ============================================================ */
+
+/* ---- ① 概览卡里的标签条 ----
+   原来是一排纯展示的 <span>（不可点），现在与图表卡那条 chip **并成一套筛选入口**。
+   ⚠️ 元素从 <span> 换成了 <button>：它现在真的有行为了 ——
+      用 span 加 JS 点击，键盘用户和屏幕阅读器都认不出"这是个能按的东西"。
+      代价是浏览器会给 <button> 默认样式（灰底、系统字体、内边距），
+      `.ck-chip` 里已经把这些全部覆盖掉了（它本来就是给 button 写的）。
+   ⚠️ 两条既有规则都在抢 margin：`.led-kinds`（margin-top:6px）在前、
+      `.ck-filter`（margin:0 0 12px）在后 → 后者赢，6px 那个上边距会被吃掉。
+      所以这一条写在**文件末尾**，用双类选择器把意图压回来。 */
+.led-kinds.ck-filter { margin: 8px 0 0; }
+/* 标签上的金额（原来就有，改成 button 后需要重新确认字重/数字对齐） */
+.led-kind-chip b { font-weight: 600; }
+
+/* ---- ② 选中类别后的高亮条 ----
+   回答用户那句"统计这个标签下的所有财务条目的总数"：
+   看的是哪一类、合计多少、几笔 —— 并且给一个明确的出口（清除筛选）。
+   ⚠️ 没有它的话，"图上少了几条线"会被读成"数据丢了"，而不是"我在筛选"。 */
+.led-focus {
+  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
+  margin-top: 10px; padding: 8px 12px;
+  background: #FDF6EE; border: 1px solid #EBD9C4; border-radius: 8px;
+  font-size: 13px; color: #7A4A20;
+}
+.led-focus[hidden] { display: none; }   /* 见 .res-modal 的同一提醒：自己声明了 display 就必须补这条 */
+.led-focus-txt { flex: 1 1 auto; min-width: 0; }
+
+/* ---- ③ 图下面的说明：整本账 / 只看某一类，两句话互斥显示 ---- */
+.ck-note { margin: 8px 2px 0; }
+.ck-note > span[hidden] { display: none; }