From ae3060f5523d92a413749f7447c357008e573eed Mon Sep 17 00:00:00 2001
From: laoyang <i@yangyq.net>
Date: Tue, 6 Oct 2026 20:41:04 +0800
Subject: [PATCH] =?UTF-8?q?v24=20=E7=AC=AC=2023=20=E6=89=B9=EF=BC=9A?=
 =?UTF-8?q?=E8=B5=84=E6=BA=90=E9=A1=B5=E5=9B=9B=E8=89=B2=E6=8C=89=E9=92=AE?=
 =?UTF-8?q?+=E5=9B=9B=E4=B8=AA=E5=BC=B9=E6=A1=86=20/=20=E8=B4=A2=E5=8A=A1?=
 =?UTF-8?q?=E9=A1=B5=E7=B1=BB=E5=88=AB=E6=A0=87=E7=AD=BE=E8=81=94=E5=8A=A8?=
 =?UTF-8?q?=E4=B8=8A=E4=B8=8B=E4=B8=A4=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

用户 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 + 窄屏）
---
 app/Ledger.php                |  20 +-
 app/chart.php                 |  19 +-
 assets/css/app.css            | 147 ++++++++-
 index.php                     |  13 +-
 templates/ledger/index.php    | 198 ++++++++++--
 templates/resources/index.php | 553 ++++++++++++++++++++++++++++------
 6 files changed, 830 insertions(+), 120 deletions(-)

diff --git a/app/Ledger.php b/app/Ledger.php
index 2ce5b5b..ed76020 100644
--- a/app/Ledger.php
+++ b/app/Ledger.php
@@ -127,6 +127,7 @@ final class Ledger
         $asset = 0;
         $debt  = 0;
         $byKind = [];
+        $byKindN = [];
         foreach ($entries as $e) {
             $amt  = (int)($e['amount_cents'] ?? 0);
             $kind = (string)($e['kind'] ?? 'other');
@@ -135,13 +136,18 @@ final class Ledger
             } else {
                 $asset += $amt;              // 资产保持符号原样（透支=负资产是合理的）
             }
-            $byKind[$kind] = ($byKind[$kind] ?? 0) + $amt;
+            $byKind[$kind]  = ($byKind[$kind] ?? 0) + $amt;
+            $byKindN[$kind] = ($byKindN[$kind] ?? 0) + 1;
         }
         return [
             'asset'   => $asset,
             'debt'    => $debt,
             'net'     => $asset - $debt,
             'by_kind' => $byKind,
+            // v24 第 23 批 用户第 2 条：概览上的类别标签要变成**可点**的筛选入口，
+            // 点一下就得说出"这一类有多少笔"。条数在这里一并算掉 ——
+            // 模板里再遍历一遍 entries 去数，等于把同一件事写第二遍。
+            'by_kind_n' => $byKindN,
             'count'   => count($entries),
         ];
     }
@@ -459,11 +465,21 @@ final class Ledger
      * 取值规则（每个时点 t）：账目在 t 之后才创建 → **不计入**（那时它还不存在）；
      * 在 t 之前盘点过 → 取最后一次盘点的值；从未盘点过 → 取它现在的值（一直没变过）。
      *
+     * @param string $kind v24 第 23 批 用户第 2 条：**只看某一类别**时传它的 key
+     *                    （'' = 整本账）。只影响"哪些账目参与累加"，口径一字不改 ——
+     *                    所以"存款"那条线与"只记了存款这一笔的账本"完全等价。
      * @return array<int,array{date:string,net:int,asset:int,debt:int}> 空账本返回 []
      */
-    public static function timeline(int $ledgerId): array
+    public static function timeline(int $ledgerId, string $kind = ''): array
     {
         $entries = self::entries($ledgerId);
+        if ($kind !== '') {
+            // ⚠️ 必须在**取时点之前**过滤（而不是算完再筛）：
+            //    时点集合里有"每条账目的创建日"，包含被筛掉那些账目的创建日 →
+            //    图右端就会凭空多出几个"其实什么都没变"的时点。
+            $entries = array_values(array_filter(
+                $entries, static fn($e): bool => (string)$e['kind'] === $kind));
+        }
         if (!$entries) {
             return [];
         }
diff --git a/app/chart.php b/app/chart.php
index 03d097f..b53b42f 100644
--- a/app/chart.php
+++ b/app/chart.php
@@ -206,6 +206,14 @@ function chart_multi(array $charts, int $width = 900): string
         $series = (array)($ch['series'] ?? []);
         if (!$series) { continue; }
         $color = (string)($ch['color'] ?? '#B0342C');
+        // v24 第 23 批 用户第 2 条：给每条线标上**它属于哪个类别**。
+        // ⚠️ 标在服务端（而不是让前端去认图例文字）：图例上的名字是
+        //    `$en['title']`（用户自己输入的，可能重复、可能含空格），
+        //    拿它当筛选键迟早对不上；类别 key 是封闭枚举，稳定。
+        // ⚠️ 这是纯粹的**标注**，线上图画法一字未改 —— 同一份数据多次渲染要完全一致，
+        //    所以属性值只允许是 kind 本身，不能拼时间戳之类会让输出漂移的东西。
+        $ck = (string)(($ch['entry']['kind'] ?? ''));
+
         // 把每个日期上的值铺齐（沿用上一次），再转成坐标
         $pts = [];
         $last = null;
@@ -224,19 +232,26 @@ function chart_multi(array $charts, int $width = 900): string
             $pts[] = [round($x, 2), round($y, 2)];
         }
         if (!$pts) { continue; }
+        // v24 第 23 批 用户第 2 条：整条线包一个 <g>，把"这条线属于哪个类别"写在上面。
+        // 前端筛选时按 `[data-ck-line]` 显隐，**不动几何**（几何一变，图就看着"跳"了）。
+        // ⚠️ 只在有 kind 时才包 —— 拼出 `data-ck-line=""` 会让"选中空类别"的
+        //    选择器意外命中所有线（下一次改这段的人很容易踩）。
+        $open  = $ck !== '' ? '<g data-ck-line="' . e($ck) . '">' : '';
+        $close = $ck !== '' ? '</g>' : '';
 
         if (count($pts) === 1) {
-            $out .= '<circle cx="' . $pts[0][0] . '" cy="' . $pts[0][1] . '" r="3" fill="' . $color . '"/>';
+            $out .= $open . '<circle cx="' . $pts[0][0] . '" cy="' . $pts[0][1] . '" r="3" fill="' . $color . '"/>' . $close;
         } else {
             $poly = [];
             foreach ($pts as $p) { $poly[] = $p[0] . ',' . $p[1]; }
-            $out .= '<polyline points="' . implode(' ', $poly) . '" fill="none" stroke="' . $color . '"'
+            $out .= $open . '<polyline points="' . implode(' ', $poly) . '" fill="none" stroke="' . $color . '"'
                   . ' stroke-width="2" stroke-linejoin="round" stroke-linecap="round"/>';
             // 每段转折点一个小点：有几个盘要点一眼看得出
             foreach ($pts as $p) {
                 $out .= '<circle cx="' . $p[0] . '" cy="' . $p[1] . '" r="2.2" fill="#fff"'
                       . ' stroke="' . $color . '" stroke-width="1.5"/>';
             }
+            $out .= $close;
         }
     }
 
diff --git a/assets/css/app.css b/assets/css/app.css
index 02ab372..b71e85f 100644
--- a/assets/css/app.css
+++ b/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; }
diff --git a/index.php b/index.php
index f762c1d..c339525 100644
--- a/index.php
+++ b/index.php
@@ -3555,6 +3555,16 @@ switch ($r) {
             $cur = $books[0];
         }
         $entries = Ledger::entries((int)$cur['id']);
+        // v24 第 23 批 用户第 2 条：上面那张「总金额图」点类别标签后要换成**该类别的曲线**。
+        // 图是**服务端画 SVG**（零依赖，见 app/chart.php 的头），所以每一类都得
+        // 预先算好时间线 —— 点标签只是显隐切换，不用再打一次服务器（点了就变，无延迟）。
+        // ⚠️ 只在真出现该类别时才算：类别最多 10 个，但"只为用到的算"能省下
+        //    每个类别一次全表遍历（账目多时这个差别是能感觉到的）。
+        $sumNow  = Ledger::summary($entries);
+        $kindLines = [];
+        foreach (array_keys((array)$sumNow['by_kind']) as $k) {
+            $kindLines[(string)$k] = Ledger::timeline((int)$cur['id'], (string)$k);
+        }
         View::render('ledger/index', [
             'title'   => '财务',
             'books'   => $books,
@@ -3564,11 +3574,12 @@ switch ($r) {
             //    功能"看起来在"，只是每次都要手动点一次选人框。
             'me'      => $me,
             'entries' => $entries,
-            'summary' => Ledger::summary($entries),
+            'summary' => $sumNow,
             'shares'  => Ledger::shares((int)$cur['id']),
             // 用户 2026-10-03 第 8 条：上面画"金额随时间怎么变"，所以要历史。
             'charts'  => Ledger::charts((int)$cur['id']),
             'timeline'=> Ledger::timeline((int)$cur['id']),
+            'kindLines' => $kindLines,
             'people'  => Person::roster($familyId, $me, 'member', ''),
         ], 'ledger');
         break;
diff --git a/templates/ledger/index.php b/templates/ledger/index.php
index c0fcddf..3b416e6 100644
--- a/templates/ledger/index.php
+++ b/templates/ledger/index.php
@@ -32,6 +32,9 @@ $curId    = (int)$cur['id'];
 $money    = static fn($c): string => \App\Ledger::money($c);
 $charts   = $charts ?? [];
 $timeline = $timeline ?? [];
+// v24 第 23 批 用户第 2 条：每个类别自己的时间线（点标签时上面那张图换成它）。
+// ⚠️ 由 index.php 算好传进来（那一处注释说明了"为什么预先算、而不是点了再请求"）。
+$kindLines = $kindLines ?? [];
 // 用户第 8 条：「挂在谁名下，应该默认是自己」。这里的 $me 由 index.php 传进来（当前登录者）。
 // ⚠️ 别用 `$me ?? 0` 再判 0 —— 那样一旦没传进来就会静默变成"不选"，看着像默认值丢了。
 $ledMe    = (int)($me ?? 0);
@@ -88,14 +91,47 @@ $ledMe    = (int)($me ?? 0);
     </div>
   </div>
   <?php if ($summary['by_kind']): ?>
-    <div class="led-kinds">
+    <?php /* v24 第 23 批 用户第 2 条（本次改动的重点）
+       用户原话：「财务，统计功能和金额变化图表那里，中间，有各类标签，存款保险等。
+                 现在点击后没有任何效果，这个需要做处理，点击任何一个标签，
+                 则统计这个标签下的所有财务条目的总数，并在上下两个图上，画出来。」
+
+       ⚠️ 这里原来是一排**纯展示的 <span>**（根本不可点）—— 用户说的"点击后没有任何
+          效果"有一部分就是指它（另一部分是图表卡里那条 chip，它的 JS 早已失效，
+          见下面 ck-filter 的注释）。现在两处**并成一套筛选入口**：
+          点这里的任意标签 = 选中该类别，上下两张图 + 下面账目表一起联动。
+
+       ⚠️ 「这个标签下的所有财务条目的**总数**」= 该类别金额合计（by_kind）。
+          它现在直接写在标签上（原来只是一句话的描述，不显示数），选中后再在下面
+          高亮条里复述一遍 合计 + 笔数。
+
+       ⚠️ 三个总数字（总资产/总负债/净资产）**不随筛选变** —— 用户已确认：
+          选中「存款」后，净值仍代表整本账，避免屏幕上只剩一个类别、
+          却被误读成"我家只有存款"。选中的类别是谁，由下面那条高亮条说明。 */ ?>
+    <div class="ck-filter led-kinds" data-ck-filter>
+      <button type="button" class="ck-chip is-on" data-ck-kind=""
+              data-ck-sum="<?= e($money($summary['net'])) ?>"
+              data-ck-n="<?= (int)$summary['count'] ?>"
+              data-ck-word="整本账">全部（<?= (int)$summary['count'] ?>）</button>
       <?php foreach ($summary['by_kind'] as $k => $c): ?>
-        <span class="led-kind-chip<?= \App\Ledger::isDebt((string)$k) ? ' is-debt' : '' ?>">
+        <button type="button"
+                class="ck-chip led-kind-chip<?= \App\Ledger::isDebt((string)$k) ? ' is-debt' : '' ?>"
+                data-ck-kind="<?= e((string)$k) ?>"
+                data-ck-sum="<?= e($money((int)$c)) ?>"
+                data-ck-n="<?= (int)($summary['by_kind_n'][$k] ?? 0) ?>"
+                data-ck-word="<?= e(\App\Ledger::kindWord((string)$k)) ?>">
           <?= \App\Ledger::kindIcon((string)$k) ?> <?= e(\App\Ledger::kindWord((string)$k)) ?>
-          <b><?= e($money($c)) ?></b>
-        </span>
+          <b><?= e($money((int)$c)) ?></b>
+        </button>
       <?php endforeach; ?>
     </div>
+    <?php /* 选中某个类别后的高亮条：说清"现在看的是哪一类、合计多少、几笔"，
+           并给一个明确的出口（清除筛选）。没有它的话，图上少了几条线
+           就成了"数据丢了"而不是"我在筛选"。 */ ?>
+    <div class="led-focus" data-ck-focus hidden>
+      <span class="led-focus-txt"></span>
+      <button type="button" class="btn btn-ghost btn-sm" data-ck-clear>清除筛选</button>
+    </div>
   <?php endif; ?>
 </div>
 
@@ -166,12 +202,31 @@ $ledMe    = (int)($me ?? 0);
     </h2>
 
     <?php if ($timeline): ?>
+      <?php /* 总金额图（"全部"）与逐类别图（"存款"…）都**预渲染好**，靠 hidden 切换。
+         为什么不"点了再向服务器要一张"：图是**服务端画的 SVG**（见 app/chart.php），
+         要重画就得整页刷新 —— 那就不是"点标签"，是"点链接"了。
+         预渲染的代价只是每个**用到的**类别多一次查询，而这个页面本来就要
+         把整本账每条账目都读出来（charts() 已在做），量级一样。 */ ?>
       <div class="ck-card ck-total">
         <div class="ck-head">
-          <b>总金额 · 净资产</b>
-          <span class="small muted"><?= count($timeline) ?> 个时间点</span>
+          <b data-ck-total-title>总金额 · 净资产</b>
+          <span class="small muted" data-ck-total-n><?= count($timeline) ?> 个时间点</span>
         </div>
-        <?= chart_line($timeline, '净资产', 'asset', 900) ?>
+        <?php /* ⚠️ 每张图外面包一层带 data-ck-tkind 的容器（'' = 整本账）。
+                 筛选时只显示匹配的那一张。
+                 ⚠️ 不能在 chart_line 内部加属性 —— 那个函数被全站复用，
+                    "为了筛选顺手改公共渲染函数"是往所有调用点塞风险。 */ ?>
+        <div data-ck-tkind="">
+          <?= chart_line($timeline, '净资产', 'asset', 900) ?>
+        </div>
+        <?php foreach ($kindLines as $k => $line): ?>
+          <?php if (!$line) { continue; } ?>
+          <?php /* 负债类别用绿线（`debt`），资产用红线 —— 与全站"涨红跌绿"口径一致 */ ?>
+          <div data-ck-tkind="<?= e((string)$k) ?>" hidden>
+            <?= chart_line($line, \App\Ledger::kindWord((string)$k),
+                           \App\Ledger::isDebt((string)$k) ? 'debt' : 'asset', 900) ?>
+          </div>
+        <?php endforeach; ?>
       </div>
     <?php endif; ?>
 
@@ -184,11 +239,22 @@ $ledMe    = (int)($me ?? 0);
           $kindsPresent[$k] = ($kindsPresent[$k] ?? 0) + 1;
       }
       ?>
+      <?php /* 🔴 v24 第 23 批 用户第 2 条：**这条 chip 原来点了真的没反应**。
+          根因（务必看懂再改）：它的 JS 在找 `[data-ck-card]` 这个属性来显隐"每账目一张小卡"，
+          但 v24 第 11 批 #7 已经把"每账目一张小卡"换成了**一张合并的多线图**
+          （用户当时要求"图下面不用显示详情，只显示哪个颜色代表哪个账目"）——
+          属性随之消失，而这段 JS 没人删。于是点标签：`.is-on` 会亮、**画面上什么都不变**。
+          这就是"看着有交互（按钮会变蓝）、实际没作用"的典型：**JS 找的钩子已经不存在了**。
+          → 现在改成：显隐多线图里**对应类别的 <g>**（chart_multi 已经给每条线标了
+             `data-ck-line`）+ 图例项 + 总金额图切到该类曲线。三处一起动。 */ ?>
       <div class="ck-filter" data-ck-filter>
-        <button type="button" class="ck-chip is-on" data-ck-kind="">全部（<?= count($charts) ?>）</button>
+        <button type="button" class="ck-chip is-on" data-ck-kind=""
+                data-ck-n="<?= count($charts) ?>" data-ck-word="整本账">全部（<?= count($charts) ?>）</button>
         <?php foreach ($kindsPresent as $k => $n): ?>
           <button type="button" class="ck-chip<?= \App\Ledger::isDebt((string)$k) ? ' is-debt' : '' ?>"
-                  data-ck-kind="<?= e((string)$k) ?>">
+                  data-ck-kind="<?= e((string)$k) ?>"
+                  data-ck-n="<?= (int)$n ?>"
+                  data-ck-word="<?= e(\App\Ledger::kindWord((string)$k)) ?>">
             <?= \App\Ledger::kindIcon((string)$k) ?> <?= e(\App\Ledger::kindWord((string)$k)) ?>（<?= (int)$n ?>）
           </button>
         <?php endforeach; ?>
@@ -212,8 +278,9 @@ $ledMe    = (int)($me ?? 0);
           </span>
         <?php endforeach; ?>
       </div>
-      <p class="small muted" style="margin:8px 2px 0">
-        没盘点过的账目按「从 0 到现在」画 —— 想让它出现真实波动，在下面账目表里点「盘点」。
+      <p class="small muted ck-note">
+        <span data-ck-note-all>没盘点过的账目按「从 0 到现在」画 —— 想让它出现真实波动，在下面账目表里点「盘点」。</span>
+        <span data-ck-note-one hidden></span>
       </p>
     <?php endif; ?>
   </div>
@@ -233,7 +300,10 @@ $ledMe    = (int)($me ?? 0);
         <tbody>
           <?php foreach ($entries as $en): ?>
             <?php $ek = (string)$en['kind']; $debt = \App\Ledger::isDebt($ek); $eid = (int)$en['id']; ?>
-            <tr>
+            <?php /* v24 第 23 批 用户第 2 条：行上带类别标记 —— 点类别标签时按它显隐。
+                     用户要的是"点击标签 → 统计该类条目并上下两图画出来"，
+                     表也跟着收窄到这一类，否则图上只剩存款、表里却还堆着房贷，自相矛盾。 */ ?>
+            <tr data-ck-row="<?= e($ek) ?>">
               <td class="nowrap">
                 <span class="led-kind-chip<?= $debt ? ' is-debt' : '' ?>">
                   <?= \App\Ledger::kindIcon($ek) ?> <?= e(\App\Ledger::kindWord($ek)) ?>
@@ -484,19 +554,101 @@ $ledMe    = (int)($me ?? 0);
     });
   }
 
-  /* ---- 图表按类别筛选（"所有账目"在几百条时会变成一坨）---- */
-  var bar = document.querySelector('[data-ck-filter]');
-  if (bar) {
-    bar.addEventListener('click', function (e) {
-      var chip = e.target.closest('.ck-chip');
-      if (!chip) { return; }
-      var kind = chip.getAttribute('data-ck-kind') || '';
-      Array.prototype.forEach.call(bar.querySelectorAll('.ck-chip'), function (c) {
-        c.classList.toggle('is-on', c === chip);
+  /* ---- 类别标签 → 上下两张图 + 账目表一起联动（v24 第 23 批 用户第 2 条）
+     ------------------------------------------------------------
+     用户原话：「财务，统计功能和金额变化图表那里，中间，有各类标签，存款保险等。
+               现在点击后没有任何效果，这个需要做处理，点击任何一个标签，
+               则统计这个标签下的所有财务条目的总数，并在上下两个图上，画出来。」
+
+     一处逻辑，四件事同时做（缺一件用户就会觉得"没生效"）：
+       ① 标签高亮（`.is-on`）；
+       ② 「总金额」图切到该类别的曲线（`[data-ck-tkind]`，都预渲染好了）；
+       ③ 多线图里只留该类别的线（`[data-ck-line]`）＋ 图例只留对应项；
+       ④ 账目表只列该类条目（`[data-ck-row]`）。
+     另外在概览卡里给一条高亮：看的是哪一类、合计多少、几笔，并给「清除筛选」。
+
+     ⚠️ 两处 `.ck-filter`（概览卡的标签 + 图表卡的 chip）共用本函数 ——
+        它们是**同一个筛选器**的两个入口。如果只给其中一处绑事件，
+        点另一处就会"两处状态不一致"（一处亮着、图上却是另一个类别的结果）。
+        所以：任何一处的点击都会把两处的高亮 + 全部图表 + 表格一起重画。
+     ⚠️ 图例项**不**用 hidden 藏：`.ck-lg-item[hidden]{display:none}` 的规则本来就有，
+        但"藏起来"会让图例的长度跳变。折中：藏（保持整齐一致），
+        并在下面的说明行里写清"只在看这一类"。
+     ⚠️ 「全部」按钮的 data-ck-sum 用的是**净资产**（net），不是资产合计 ——
+        标签上那句话读起来是"整本账 = 多少钱"，净资产才是那个数。 */
+  var bars = document.querySelectorAll('[data-ck-filter]');
+  if (bars.length) {
+    var focusBar = document.querySelector('[data-ck-focus]');
+    var focusTxt = focusBar ? focusBar.querySelector('.led-focus-txt') : null;
+    var noteAll  = document.querySelector('[data-ck-note-all]');
+    var noteOne  = document.querySelector('[data-ck-note-one]');
+
+    function applyKind(kind, sum, n, word) {
+      // ① 两处标签的高亮保持同步（同一个筛选器）
+      Array.prototype.forEach.call(bars, function (bar) {
+        Array.prototype.forEach.call(bar.querySelectorAll('.ck-chip'), function (c) {
+          c.classList.toggle('is-on', (c.getAttribute('data-ck-kind') || '') === kind);
+        });
       });
-      Array.prototype.forEach.call(document.querySelectorAll('[data-ck-card]'), function (c) {
-        c.hidden = kind !== '' && c.getAttribute('data-ck-card') !== kind;
+
+      // ② 总金额图：只显示匹配的那一张
+      Array.prototype.forEach.call(document.querySelectorAll('[data-ck-tkind]'), function (w) {
+        w.hidden = (w.getAttribute('data-ck-tkind') || '') !== kind;
       });
+      // 图上的标题跟着换（不然选着"存款"，标题还写"净资产"，自相矛盾）
+      var ttl = document.querySelector('[data-ck-total-title]');
+      if (ttl) {
+        ttl.textContent = kind === '' ? '总金额 · 净资产' : (word + ' · 金额变化');
+      }
+
+      // ③ 多线图：按类别显隐线条（几何不动，只切可见性）
+      Array.prototype.forEach.call(document.querySelectorAll('[data-ck-line]'), function (g) {
+        g.hidden = kind !== '' && (g.getAttribute('data-ck-line') || '') !== kind;
+      });
+      Array.prototype.forEach.call(document.querySelectorAll('.ck-lg-item'), function (li) {
+        li.hidden = kind !== '' && (li.getAttribute('data-ck-kind') || '') !== kind;
+      });
+
+      // ④ 账目表
+      Array.prototype.forEach.call(document.querySelectorAll('[data-ck-row]'), function (tr) {
+        tr.hidden = kind !== '' && (tr.getAttribute('data-ck-row') || '') !== kind;
+      });
+
+      // ⑤ 概览卡里的高亮条
+      if (focusBar && focusTxt) {
+        focusBar.hidden = (kind === '');
+        if (kind !== '') {
+          focusTxt.textContent = '正在看「' + word + '」：合计 ' + sum + ' · ' + n + ' 笔';
+        }
+      }
+      if (noteAll && noteOne) {
+        noteAll.hidden = (kind !== '');
+        noteOne.hidden = (kind === '');
+        if (kind !== '') {
+          noteOne.textContent = '只画了「' + word + '」这一类（' + n + ' 条线），'
+            + '合计 ' + sum + '；点「清除筛选」看整本账。';
+        }
+      }
+    }
+
+    document.addEventListener('click', function (e) {
+      var t = e.target;
+      if (!t || !t.closest) { return; }
+      var chip = t.closest('.ck-filter .ck-chip');
+      if (chip) {
+        e.preventDefault();
+        applyKind(chip.getAttribute('data-ck-kind') || '',
+                  chip.getAttribute('data-ck-sum') || '',
+                  chip.getAttribute('data-ck-n') || '',
+                  chip.getAttribute('data-ck-word') || '');
+        return;
+      }
+      // 清除筛选 = 回到"全部"那一档（不自己拼状态，直接找那颗按钮点它一次）
+      if (t.closest('[data-ck-clear]')) {
+        e.preventDefault();
+        var all = document.querySelector('[data-ck-filter] .ck-chip[data-ck-kind=""]');
+        if (all) { all.click(); }
+      }
     });
   }
 })();
diff --git a/templates/resources/index.php b/templates/resources/index.php
index 776570c..713ff2c 100644
--- a/templates/resources/index.php
+++ b/templates/resources/index.php
@@ -1,20 +1,46 @@
 <?php
 /**
- * 资源（v12）：挂在某人名下的附属信息（证件、照片、账号…）。
+ * 资源（v12；v24 第 23 批 用户第 1 条重构）。
  *
- * 两条交互上的讲究：
- *   ① **默认折叠**：一屏几十条正文会很长，列表只露标题行（原生 <details>，
- *      没 JS 也能开合），点开才看正文与附件。
- *   ② **归属于谁**：每条都挂在一个具体的人名下（不是"家庭共享"），
- *      所以列表上一定看得到"这是谁的"，新建时必须选归属人。
+ * 用户原话：
+ *   「资源页面，还可以更简洁，资源打开后，没有正文就不显示（没有正文）这句话了，
+ *     直接显示附件。附件列完后，列出来人员，所有者、共享给谁了。然后其他的都不要。
+ *     把编辑、共享、附件、删除，四个按钮，放在每个资源的右上角，和标题一排，
+ *     点击后分别是编辑信息、设置共享人员，包括删除共享人等，附件，点击后弹框，
+ *     允许用户拖动上传。编辑黄色、共享绿色、附件蓝色、删除红色。
+ *     按钮点击后的功能，都是弹框。」
+ *
+ * → 这一版做了三件事：
+ *   ① **展开区只留"看"**：正文（没有就**不占位**，不再写「（没有正文）」）、
+ *      附件墙（只读，可预览/下载）、人员行（所有者 + 共享给谁）。
+ *      原来堆在展开区底部的补传附件 / 共享设置 / 编辑 / 删除 四坨内联表单**全部撤掉** ——
+ *      那些是"改"的动作，都搬到弹框里去。
+ *   ② **标题行右上角四色按钮**：编辑(黄) 共享(绿) 附件(蓝) 删除(红)，与标题同一排。
+ *   ③ **四个动作全在弹框里**，容器 `#resPanels` 全页只有一份 ——
+ *      与名册的 `#rosterMenus`、财务的 `#ledPanels` 是同一套做法：
+ *      行上只留按钮，真正的 `<form>` 只渲染一份。
+ *      ⚠️ 这正是项目一直在治的那类问题：每行内联一套表单，条目一多就是几千个 `<form>`，
+ *         密码管理器逐个扫描会把主线程占死（用户报过两次，见 ledger/people 的注释）。
+ *
+ * ⚠️ 按钮放在 `<summary>` 里为什么不会误开合：
+ *    `<summary>` 内任意位置点击都会 toggle `<details>`（浏览器默认行为），
+ *    所以四个按钮的 click 处理里**必须** `preventDefault()`（见文件末尾脚本的说明）。
+ *    真机探针专门断言了「点按钮 → 弹框打开、且这一条**没有**被展开」。
+ *
+ * ⚠️ 结构性约束：`<summary>` 里只能放 **phrasing content** ——
+ *    所以按钮组写成 span（class 为 res-ops）而不是 div；
+ *    `<form>` 更是绝对不能放进去（那是 flow content）。
+ *    这也是"四个动作必须进弹框"的一条额外理由：删除/补传/共享/编辑在原实现里
+ *    全都是 `<form>`，留在标题行会直接产出非法 HTML。
  *
  * @param array  $rows     我能看到的资源（带 perm / owner_nick）
- * @param array  $people   名册（新建时选归属人、共享给别人）
+ * @param array  $people   名册（新建/编辑时选归属人、共享给别人）
  * @param array  $attachs  resource_id => 附件列表
  * @param array  $shares   resource_id => 共享列表
  */
 $isEditing = !empty($editing);
 $canWrite  = \App\Auth::canWrite();
+$myPerson  = (int)\App\Auth::personId();
 ?>
 <div class="page-head">
   <h1>资源</h1>
@@ -99,8 +125,11 @@ $canWrite  = \App\Auth::canWrite();
                     placeholder="编号、有效期、放在哪里…"><?= e($editing['content'] ?? '') ?></textarea>
         </div>
         <div class="field full">
-          <label for="rs-file">附件（可多选）</label>
-          <?php $sdName = 'attach[]'; $sdSlot = 'photo';
+          <label for="sd-attach">附件（可多选）</label>
+          <?php /* ⚠️ 新建时资源还不存在，附件只能在这里一起提交（建完再挂）。
+                 列表里那条的附件管理则走右上角蓝色的「附件」弹框。
+                 两处的文件框 id 必须**不同**（同 id 会撞），所以这里显式给一个。 */
+                $sdName = 'attach[]'; $sdSlot = 'photo'; $sdId = 'sd-attach';
                 require __DIR__ . '/../_stage_drop.php'; ?>
         </div>
       </div>
@@ -140,103 +169,104 @@ $canWrite  = \App\Auth::canWrite();
   <?php else: ?>
     <div class="res-list">
       <?php foreach ($rows as $r): ?>
-        <?php $rid = (int)$r['id']; $as = $attachs[$rid] ?? []; $sh = $shares[$rid] ?? []; ?>
+        <?php
+        $rid     = (int)$r['id'];
+        $as      = $attachs[$rid] ?? [];
+        $sh      = $shares[$rid] ?? [];
+        $canEdit = $canWrite && \App\Resource::canWrite($r, $myPerson);
+        $ownerArr = [
+            'id' => (int)$r['owner_id'], 'name' => (string)$r['owner_name'],
+            'my_nickname' => (string)($r['owner_nick'] ?? ''),
+            'avatar' => $r['avatar'] ?? null, 'avatar_color' => $r['avatar_color'] ?? null,
+        ];
+        ?>
         <details class="res-item">
           <summary class="res-head">
             <span class="res-title"><?= e((string)$r['title']) ?></span>
             <?php /* 归属人标签：查询里"人"的字段没加前缀（owner_name / avatar / avatar_color），
                      只有昵称带 owner_ 前缀 —— 在这里拼成 person_chip 认的形状。 */ ?>
-            <?= person_chip([
-                'id' => (int)$r['owner_id'], 'name' => (string)$r['owner_name'],
-                'my_nickname' => (string)($r['owner_nick'] ?? ''),
-                'avatar' => $r['avatar'] ?? null, 'avatar_color' => $r['avatar_color'] ?? null,
-            ]) ?>
+            <?= person_chip($ownerArr) ?>
             <span class="node-badge"><?= e(\App\Resource::permWord((string)$r['perm'])) ?></span>
             <?php if ($as): ?><span class="res-n"><?= count($as) ?> 个附件</span><?php endif; ?>
+
+            <?php /* ---- 右上角四色按钮（与标题同一排）----
+                     ⚠️ 必须用 <span> 包（phrasing content）；`<div>`/`<form>` 放 <summary> 里是非法 HTML。
+                     ⚠️ 每个按钮都带 `data-res-open`，脚本里对它 `preventDefault()`
+                        以阻止 <summary> 顺带把这一条展开。 */ ?>
+            <?php if ($canEdit): ?>
+              <span class="res-ops">
+                <button type="button" class="btn btn-warn btn-sm res-op"
+                        data-res-open="edit" data-res-id="<?= $rid ?>"
+                        data-res-title="<?= e((string)$r['title']) ?>"
+                        data-res-content="<?= e((string)($r['content'] ?? '')) ?>"
+                        data-res-owner="<?= (int)$r['owner_id'] ?>">编辑</button>
+                <button type="button" class="btn btn-ok btn-sm res-op"
+                        data-res-open="share" data-res-id="<?= $rid ?>"
+                        data-res-title="<?= e((string)$r['title']) ?>"
+                        data-res-shares="<?= e((string)json_encode(array_map(
+                            static fn($s): array => [
+                                'id'   => (int)$s['person_id'],
+                                'name' => (string)$s['name'],
+                                'perm' => (string)($s['perm'] ?? 'read'),
+                            ], $sh), JSON_UNESCAPED_UNICODE)) ?>">共享</button>
+                <button type="button" class="btn btn-info btn-sm res-op"
+                        data-res-open="att" data-res-id="<?= $rid ?>"
+                        data-res-title="<?= e((string)$r['title']) ?>"
+                        data-res-atts="<?= e((string)json_encode(array_map(
+                            static function ($a): array {
+                                $k = \App\Attachment::kind($a);
+                                return [
+                                    'id'   => (int)$a['id'],
+                                    'name' => (string)($a['name'] ?? ''),
+                                    'kw'   => \App\Attachment::kindWord($k),
+                                    'kind' => $k,
+                                    'url'  => media_url((string)$a['key']),
+                                    'dl'   => media_url((string)$a['key'], ['dl' => 1]),
+                                    'sz'   => \App\Attachment::sizeWord($a['size'] ?? 0),
+                                ];
+                            }, $as), JSON_UNESCAPED_UNICODE)) ?>">附件</button>
+                <button type="button" class="btn btn-del btn-sm res-op"
+                        data-res-open="del" data-res-id="<?= $rid ?>"
+                        data-res-title="<?= e((string)$r['title']) ?>"
+                        data-res-n="<?= count($as) ?>">删除</button>
+              </span>
+            <?php endif; ?>
+            <span class="res-caret" aria-hidden="true">▾</span>
           </summary>
+
           <div class="res-body">
+            <?php /* ① 正文：**没有就不占位**（用户第 1 条：不再写「（没有正文）」）。 */ ?>
             <?php if (!empty($r['content'])): ?>
               <p class="info-text"><?= nl2br(e((string)$r['content'])) ?></p>
-            <?php else: ?>
-              <p class="empty-hint">（没有正文）</p>
             <?php endif; ?>
 
+            <?php /* ② 附件墙：这里是"看"，删除入口在蓝色「附件」弹框里（见下）。
+                     ⚠️ `$attCanEdit = false`：把删除按钮从展开区撤掉。
+                        理由：① 用户要的四个动作都在右上角按钮里；
+                              ② 内联的删除表单是"每行一个 <form>"膨胀的最后一处。 */ ?>
             <?php
             $attRows    = $as;
-            $attCanEdit = $canWrite && \App\Resource::canWrite($r, (int)\App\Auth::personId());
+            $attCanEdit = false;
             $attDelUrl  = 'resources/attach_del';
             $attDelField = 'id';
             $attExtra   = [];
             require __DIR__ . '/../_attachments.php';
             ?>
 
-            <?php if ($sh): ?>
-              <div class="res-shares">
+            <?php /* ③ 人员行：附件列完之后列出来 —— 所有者、共享给谁（用户原话）。 */ ?>
+            <div class="res-people">
+              <span class="res-label">所有者</span>
+              <?= person_chip($ownerArr) ?>
+              <?php if ($sh): ?>
                 <span class="res-label">共享给</span>
                 <?php foreach ($sh as $s): ?>
                   <?= person_chip($s) ?>
                   <span class="node-badge"><?= ($s['perm'] ?? '') === 'write' ? '可读写' : '只读' ?></span>
                 <?php endforeach; ?>
-              </div>
-            <?php endif; ?>
-
-            <?php if ($canWrite && \App\Resource::canWrite($r, (int)\App\Auth::personId())): ?>
-              <div class="res-ops">
-                <?php /* 补传附件 / 共享设置 / 编辑 / 删除 —— 每个都是独立的小表单，
-                         不套在别的表单里（<form> 嵌套会让浏览器把外层切开）。 */ ?>
-                <form class="inline-form" method="post" enctype="multipart/form-data"
-                      action="<?= e(url('resources/attach_add')) ?>">
-                  <?= csrf_field() ?>
-                  <input type="hidden" name="id" value="<?= $rid ?>">
-                  <?php $sdName = 'attach[]'; $sdSlot = 'photo';
-                        require __DIR__ . '/../_stage_drop.php'; ?>
-                  <div class="btn-row" style="margin-top:12px">
-                    <button class="btn btn-ghost btn-sm" type="submit">补传附件</button>
-                  </div>
-                </form>
-
-                <details class="res-share-add">
-                  <summary class="link-quiet">共享设置</summary>
-                  <form class="inline-form" method="post" action="<?= e(url('resources/share')) ?>">
-                    <?= csrf_field() ?>
-                    <input type="hidden" name="id" value="<?= $rid ?>">
-                    <?php
-                    $ppName     = 'person_id';
-                    $ppPeople   = array_values(array_filter($people,
-                        fn($p) => (int)$p['id'] !== (int)$r['owner_id']));
-                    $ppSelected = [];
-                    $ppMode     = 'single';
-                    $ppOpenBtn  = '选择要共享给谁';
-                    $ppTitle    = '共享给谁';
-                    $ppEmptyText = '未选择';
-                    require __DIR__ . '/../_person_picker.php';
-                    ?>
-                    <select class="select" name="perm">
-                      <option value="read">只读</option>
-                      <option value="write">可读写</option>
-                    </select>
-                    <button class="btn btn-sm" type="submit">共享</button>
-                  </form>
-                  <?php foreach ($sh as $s): ?>
-                    <form class="inline-form" method="post" action="<?= e(url('resources/unshare')) ?>">
-                      <?= csrf_field() ?>
-                      <input type="hidden" name="id" value="<?= $rid ?>">
-                      <input type="hidden" name="person_id" value="<?= (int)$s['person_id'] ?>">
-                      <span class="cal-share-name"><?= e(person_name($s)) ?></span>
-                      <button class="btn btn-ghost btn-sm" type="submit">取消共享</button>
-                    </form>
-                  <?php endforeach; ?>
-                </details>
-
-                <a class="btn btn-ghost btn-sm" href="<?= e(url('resources', ['edit' => $rid])) ?>">编辑</a>
-                <form method="post" action="<?= e(url('resources/destroy')) ?>"
-                      onsubmit="return confirm('删除「<?= e((string)$r['title']) ?>」？附件会一起删掉。')">
-                  <?= csrf_field() ?>
-                  <input type="hidden" name="id" value="<?= $rid ?>">
-                  <button class="btn btn-danger btn-sm" type="submit">删除</button>
-                </form>
-              </div>
-            <?php endif; ?>
+              <?php else: ?>
+                <span class="small muted">（还没有共享给谁）</span>
+              <?php endif; ?>
+            </div>
           </div>
         </details>
       <?php endforeach; ?>
@@ -254,17 +284,362 @@ $canWrite  = \App\Auth::canWrite();
   <?php endif; ?>
 </div>
 
+<?php /* ==================== 四个动作的弹框（全页各一份）====================
+   与名册的 #rosterMenus、财务的 #ledPanels 同一套：
+   行上只留按钮，真正的 <form> 集中在这里渲染**一份**。
+
+   ⚠️ `[hidden]` 必须自己声明：`.res-modal` 与 `.res-panel-lg` 都写了 `display:flex`，
+      浏览器默认的 `[hidden]{display:none}` 会被它们盖过 —— 于是"关不掉"。
+      （项目在 `.pv` / `.pp-item` 上各栽过一次，所以 CSS 里 `.res-modal[hidden]` 是硬要求。） */ ?>
 <?php if ($canWrite): ?>
+  <div class="res-modal" id="resPanels" hidden>
+    <div class="res-mask" data-res-close></div>
+
+    <?php /* ---------- ① 编辑信息（黄色按钮） ---------- */ ?>
+    <div class="res-panel-lg" id="resEditPanel" hidden role="dialog" aria-modal="true" aria-label="编辑资源">
+      <div class="res-ph"><b>编辑「<span class="rd-title"></span>」</b>
+        <button type="button" class="res-x" data-res-close aria-label="关闭">✕</button></div>
+      <form method="post" action="<?= e(url('resources/update')) ?>">
+        <?= csrf_field() ?>
+        <input type="hidden" name="id" value="">
+        <div class="res-pb">
+          <div class="field">
+            <label>归属于谁 *</label>
+            <?php
+            $ppName     = 'owner_id';
+            $ppPeople   = $people;
+            $ppSelected = [];
+            $ppMode     = 'single';
+            $ppOpenBtn  = '更换归属人';
+            $ppTitle    = '资源归属于谁';
+            $ppEmptyText = '未选择';
+            require __DIR__ . '/../_person_picker.php';
+            ?>
+          </div>
+          <div class="field">
+            <label>标题 *</label>
+            <input class="input" name="title" required>
+          </div>
+          <div class="field">
+            <label>正文</label>
+            <textarea class="input" name="content" rows="3"
+                      placeholder="编号、有效期、放在哪里…"></textarea>
+          </div>
+          <p class="tip" style="margin:0">
+            附件不在这里改 —— 用蓝色「附件」按钮（那边可以拖动上传、也能删）。
+          </p>
+        </div>
+        <div class="res-pf">
+          <button class="btn btn-warn" type="submit">保存</button>
+          <button class="btn btn-ghost" type="button" data-res-close>取消</button>
+        </div>
+      </form>
+    </div>
+
+    <?php /* ---------- ② 共享设置（绿色按钮）----------
+       用户原话：「设置共享人员，**包括删除共享人**等」→ 一个面板里两件事：
+         · 上面：给谁开共享（选人 + 权限 + 共享按钮）
+         · 下面：已经共享给谁 + 逐个「取消共享」
+       ⚠️ "已共享"那一段由脚本按按钮上的 `data-res-shares` 现渲染，
+          **不是**每条资源渲染一份表单 —— 那正是要避免的膨胀。
+          取消共享走下面这个唯一的 #resUnshareForm（脚本填 id/person_id 后提交）。 */ ?>
+    <div class="res-panel-lg" id="resSharePanel" hidden role="dialog" aria-modal="true" aria-label="共享设置">
+      <div class="res-ph"><b>共享「<span class="rd-title"></span>」</b>
+        <button type="button" class="res-x" data-res-close aria-label="关闭">✕</button></div>
+      <div class="res-pb">
+        <form method="post" action="<?= e(url('resources/share')) ?>">
+          <?= csrf_field() ?>
+          <input type="hidden" name="id" value="">
+          <div class="field">
+            <label>共享给谁</label>
+            <?php
+            $ppName     = 'person_id';
+            $ppPeople   = $people;
+            $ppSelected = [];
+            $ppMode     = 'single';
+            $ppOpenBtn  = '选择要共享给谁';
+            $ppTitle    = '共享给谁';
+            $ppEmptyText = '未选择';
+            require __DIR__ . '/../_person_picker.php';
+            ?>
+            <span class="tip">所有者本来就有全部权限，不用（也不能）共享给他。</span>
+          </div>
+          <div class="field">
+            <label>权限</label>
+            <select class="select" name="perm">
+              <option value="read">只读</option>
+              <option value="write">可读写</option>
+            </select>
+          </div>
+          <div class="btn-row" style="margin-top:0">
+            <button class="btn btn-ok" type="submit">共享</button>
+          </div>
+        </form>
+
+        <div class="res-share-now">
+          <h3 class="res-sub">已共享给</h3>
+          <div class="rd-share-list" id="resShareNow"></div>
+        </div>
+      </div>
+      <?php /* 取消共享：唯一的一份表单，脚本填两个隐藏字段后提交。 */ ?>
+      <form method="post" action="<?= e(url('resources/unshare')) ?>" id="resUnshareForm" hidden>
+        <?= csrf_field() ?>
+        <input type="hidden" name="id" value="">
+        <input type="hidden" name="person_id" value="">
+      </form>
+    </div>
+
+    <?php /* ---------- ③ 附件（蓝色按钮）----------
+       用户原话：「附件，点击后弹框，允许用户拖动上传」。
+       → 上：已有附件（可删）；下：拖动/点击上传区（复用全站那套 `_stage_drop.php`，
+         框 + 立刻上传 + 暂存令牌，与其它模块完全一致）。 */ ?>
+    <div class="res-panel-lg" id="resAttPanel" hidden role="dialog" aria-modal="true" aria-label="附件">
+      <div class="res-ph"><b>附件 ·「<span class="rd-title"></span>」</b>
+        <button type="button" class="res-x" data-res-close aria-label="关闭">✕</button></div>
+      <div class="res-pb">
+        <div class="rd-att-now">
+          <h3 class="res-sub">已有附件</h3>
+          <div class="rd-att-list" id="resAttNow"></div>
+        </div>
+        <form method="post" enctype="multipart/form-data"
+              action="<?= e(url('resources/attach_add')) ?>" id="resAttForm">
+          <?= csrf_field() ?>
+          <input type="hidden" name="id" value="">
+          <h3 class="res-sub">添加附件</h3>
+          <?php /* ⚠️ 自己的文件框 id（与"新建资源"里那个必须不同，同 id 会撞）。 */ ?>
+          <?php $sdName = 'attach[]'; $sdSlot = 'photo'; $sdId = 'sd-attach-panel';
+                require __DIR__ . '/../_stage_drop.php'; ?>
+          <div class="btn-row">
+            <button class="btn btn-info" type="submit">上传</button>
+          </div>
+          <p class="tip" style="margin:4px 0 0">
+            拖进来会**立刻上传**；点「上传」才真正挂到这条资源上。
+          </p>
+        </form>
+      </div>
+      <?php /* 删附件：唯一的一份表单，脚本填 id 后提交。 */ ?>
+      <form method="post" action="<?= e(url('resources/attach_del')) ?>" id="resAttDelForm" hidden>
+        <?= csrf_field() ?>
+        <input type="hidden" name="id" value="">
+      </form>
+    </div>
+
+    <?php /* ---------- ④ 删除（红色按钮）---------- */ ?>
+    <div class="res-panel-sm" id="resDelPanel" hidden role="dialog" aria-modal="true" aria-label="删除资源">
+      <div class="res-ph"><b>删除「<span class="rd-title"></span>」</b>
+        <button type="button" class="res-x" data-res-close aria-label="关闭">✕</button></div>
+      <form method="post" action="<?= e(url('resources/destroy')) ?>">
+        <?= csrf_field() ?>
+        <input type="hidden" name="id" value="">
+        <div class="res-pb">
+          <p class="del-big-tip" style="margin:0">
+            删除后<b>不能撤销</b>，这条资源连同它的
+            <b><span class="rd-attn">0</span> 个附件</b>会一起删掉。
+          </p>
+        </div>
+        <div class="res-pf">
+          <button class="btn btn-del" type="submit">确认删除</button>
+          <button class="btn btn-ghost" type="button" data-res-close>取消</button>
+        </div>
+      </form>
+    </div>
+  </div>
+<?php endif; ?>
+
 <script>
 (function () {
-  var btn = document.getElementById('resAddBtn');
-  var card = document.getElementById('resAddCard');
-  if (!btn || !card) return;
-  btn.addEventListener('click', function () {
-    card.hidden = !card.hidden;
-    btn.textContent = card.hidden ? '新建资源' : '收起';
-    if (!card.hidden) { card.scrollIntoView({ block: 'nearest' }); }
+  /* ---- 「新建资源」开合（与旧版一致）---- */
+  var addBtn  = document.getElementById('resAddBtn');
+  var addCard = document.getElementById('resAddCard');
+  if (addBtn && addCard) {
+    addBtn.addEventListener('click', function () {
+      addCard.hidden = !addCard.hidden;
+      addBtn.textContent = addCard.hidden ? '新建资源' : '收起';
+      if (!addCard.hidden) { addCard.scrollIntoView({ block: 'nearest' }); }
+    });
+  }
+
+  /* ============================================================
+     四个动作 → 一份共享弹框（v24 第 23 批 用户第 1 条）
+     ============================================================ */
+  var wrap = document.getElementById('resPanels');
+  if (!wrap) { return; }
+
+  var panels = {
+    edit:  document.getElementById('resEditPanel'),
+    share: document.getElementById('resSharePanel'),
+    att:   document.getElementById('resAttPanel'),
+    del:   document.getElementById('resDelPanel')
+  };
+
+  function closeAll() {
+    wrap.hidden = true;
+    Object.keys(panels).forEach(function (k) {
+      if (panels[k]) { panels[k].hidden = true; }
+    });
+  }
+
+  function show(which) {
+    Object.keys(panels).forEach(function (k) {
+      if (panels[k]) { panels[k].hidden = (k !== which); }
+    });
+    wrap.hidden = false;
+    var p = panels[which];
+    if (!p) { return; }
+    var first = p.querySelector('input:not([type=hidden]), textarea, select');
+    if (first) { first.focus(); }
+  }
+
+  /** 从 data 属性读 JSON（坏了就当空数组，别让一个坏属性把整个弹框搞死） */
+  function jsonOf(el, attr) {
+    try {
+      var v = JSON.parse(el.getAttribute(attr) || '[]');
+      return Array.isArray(v) ? v : [];
+    } catch (e) { return []; }
+  }
+
+  /** 建一个转义过的文本节点（**不拼 HTML 字符串** —— 名字来自用户输入） */
+  function el(tag, cls, text) {
+    var n = document.createElement(tag);
+    if (cls) { n.className = cls; }
+    if (text !== undefined) { n.textContent = text; }
+    return n;
+  }
+
+  var shareNow = document.getElementById('resShareNow');
+  var attNow   = document.getElementById('resAttNow');
+
+  document.addEventListener('click', function (e) {
+    var t = e.target;
+    if (!t || !t.closest) { return; }
+
+    /* ---- 展开卡上的四个按钮 ----
+       🔴 必须 preventDefault：`<summary>` 内任意点击都会 toggle `<details>`，
+          不挡的话"点编辑 → 弹框开了、同时这一条也被展开了"，看着像误触。
+          （stopPropagation 挡不住它 —— 那是**默认行为**，不是冒泡。） */
+    var op = t.closest('[data-res-open]');
+    if (op) {
+      e.preventDefault();
+      e.stopPropagation();
+
+      var which = op.getAttribute('data-res-open');
+      var id    = op.getAttribute('data-res-id');
+      var title = op.getAttribute('data-res-title') || '';
+      var panel = panels[which];
+      if (!panel) { return; }
+
+      // 每个面板都有的两样：标题回显 + 宿主 id
+      var tt = panel.querySelector('.rd-title');
+      if (tt) { tt.textContent = title; }
+      var idInp = panel.querySelector('input[name="id"]');
+      if (idInp) { idInp.value = id; }
+
+      if (which === 'edit') {
+        var tInp = panel.querySelector('input[name="title"]');
+        if (tInp) { tInp.value = title; }
+        var cInp = panel.querySelector('textarea[name="content"]');
+        if (cInp) { cInp.value = op.getAttribute('data-res-content') || ''; }
+        // 归属人：选人组件是单选的，用它的对外接口设置。
+        // ⚠️ 必须把 panel 作为 root 传进去 —— 本页有多个同类组件
+        //    （新建表单的 owner_id、本面板的 owner_id、共享面板的 person_id），
+        //    只按字段名找会命中**文档里第一个**（财务页在这上面栽过）。
+        var pid = op.getAttribute('data-res-owner') || '0';
+        if (window.ppSetSelected) { window.ppSetSelected('owner_id', pid, panel); }
+      }
+
+      if (which === 'share') {
+        // 渲染"已共享给谁"。每行一个「取消共享」按钮 →
+        // 点它时把 id/person_id 灌进唯一的 #resUnshareForm 再提交。
+        if (shareNow) {
+          shareNow.innerHTML = '';
+          var list = jsonOf(op, 'data-res-shares');
+          if (!list.length) {
+            shareNow.appendChild(el('span', 'small muted', '还没有共享给谁。'));
+          }
+          list.forEach(function (s) {
+            var row = el('span', 'rd-share-row');
+            row.appendChild(el('span', 'rd-share-name', s.name || ('#' + s.id)));
+            row.appendChild(el('span', 'node-badge', s.perm === 'write' ? '可读写' : '只读'));
+            var b = el('button', 'btn btn-ghost btn-sm', '取消共享');
+            b.type = 'button';
+            b.setAttribute('data-rd-unshare', String(s.id));
+            row.appendChild(b);
+            shareNow.appendChild(row);
+          });
+        }
+      }
+
+      if (which === 'att') {
+        // 渲染"已有附件"（名字 + 下载 + 删除）
+        if (attNow) {
+          attNow.innerHTML = '';
+          var atts = jsonOf(op, 'data-res-atts');
+          if (!atts.length) {
+            attNow.appendChild(el('span', 'small muted', '还没有附件。'));
+          }
+          atts.forEach(function (a) {
+            var row = el('span', 'rd-att-row');
+            // 图片给一个缩略图，别的给类别词方块 —— 与展开区的附件墙观感一致
+            if (a.kind === 'image') {
+              var im = el('img', 'rd-att-thumb');
+              im.src = a.url;
+              im.alt = '';
+              row.appendChild(im);
+            } else {
+              row.appendChild(el('span', 'rd-att-ico', a.kw || '文件'));
+            }
+            row.appendChild(el('span', 'rd-att-name', a.name || a.kw || '附件'));
+            row.appendChild(el('span', 'small muted', a.sz || ''));
+            var dl = el('a', 'link-quiet', '下载');
+            dl.href = a.dl;
+            row.appendChild(dl);
+            var db = el('button', 'btn btn-ghost btn-sm', '删除');
+            db.type = 'button';
+            db.setAttribute('data-rd-attdel', String(a.id));
+            row.appendChild(db);
+            attNow.appendChild(row);
+          });
+        }
+      }
+
+      if (which === 'del') {
+        var n = op.getAttribute('data-res-n') || '0';
+        var nn = panel.querySelector('.rd-attn');
+        if (nn) { nn.textContent = n; }
+      }
+
+      show(which);
+      return;
+    }
+
+    /* ---- 取消共享（共享面板里现渲染出来的行）---- */
+    var un = t.closest('[data-rd-unshare]');
+    if (un) {
+      e.preventDefault();
+      var uf = document.getElementById('resUnshareForm');
+      if (!uf) { return; }
+      uf.querySelector('input[name="person_id"]').value = un.getAttribute('data-rd-unshare');
+      uf.submit();
+      return;
+    }
+
+    /* ---- 删附件（附件面板里现渲染出来的行）---- */
+    var ad = t.closest('[data-rd-attdel]');
+    if (ad) {
+      e.preventDefault();
+      if (!window.confirm('删掉这个附件？')) { return; }
+      var df = document.getElementById('resAttDelForm');
+      if (!df) { return; }
+      df.querySelector('input[name="id"]').value = ad.getAttribute('data-rd-attdel');
+      df.submit();
+      return;
+    }
+
+    if (t.closest('[data-res-close]')) { e.preventDefault(); closeAll(); }
+  });
+
+  document.addEventListener('keydown', function (e) {
+    if (e.key === 'Escape' && !wrap.hidden) { closeAll(); }
   });
 })();
-</script>
-<?php endif; ?>
+</script>
\ No newline at end of file