v24 第 11 批：7 大条 20 子项（首页/名册/观影/裁剪/日程/财务）

用户 2026-10-04 第 11 批，7 大条：
- #1 首页：未来七天过滤掉「农历」（每日一条会淹掉真日程）；右侧日历本标签
  从灰字(.dash-tag)改成**实心色块**（底色=日历色、白字、text-shadow 兜底浅色）。
- #2 名册：分组改**居中模态框**（用户要"像选观影人一样"）。修掉"点第二次失效"
  ——根因是旧实现用**捕获阶段**监听 document click 做"点外面就关"，与触发按钮
  的 click 打架；模态把关闭收敛到遮罩/✕/取消。卡片「编辑」后加「删除」
  （→ people/destroy）；详情页底部删除改成 btn-danger + btn-block-lg 大红按钮 + 两步确认。
- #3 名册详情页重排：.detail(260px+1fr) → .pcard（头像左上 + 右侧姓名/标签）
  + .detail-stack 全宽往下。旧布局头像卡比右栏矮，头像下留一大片空白。
- #4 观影：影院下拉换**自定义组件**（原生 <option> 画不了色块）——按钮+列表、
  每行色点，值仍写隐藏 input[name=cinema_id]；「管理影院」→「新建影院」弹框
  （带 back=movies/new，存完回本页并 ?cinema=<id> 自动选中）。
  修「开始/结束时间标签跑到控件下面」：upgradeRange 原来 insertBefore(host, group.firstChild)
  把控件插到了 label 之上 —— 改成插在第一个原生控件之前。
- #5 裁剪改 **Cropper.js**（assets/vendor/cropper/，按需加载走 fb-cropper meta）：
  弹框 overflow:hidden + 固定画布（**无滚动条**）、**去掉缩放条**改滚轮 wheelZoomRatio、
  viewMode:1 + autoCropArea 保证框小于画布、8 个触点全露。
  结果仍写 *_crop = 归一化 x,y,w,h（提交契约不变）。
- #6 日程：内置节假日原来每天只标**一天**（国庆只出一条）→ FIXED 改成
  [名字, 放假天数] 按区间铺；月视图从周日改**周一**起（表头同步）；
  跳转日期从"长条+原生框"改成**单个 btn-icon**，点开弹 Semi 日期选择器。
- #7 财务：单条曲线无盘点时只回一个点（图看着像全 0）→ 改成"从创建日(0)画到今天"；
  图下条目从"每账目一张小图卡"改成**一张 chart_multi 多线图 + 颜色图例**
  （Ledger::LEGEND_COLORS 按 id 取模，保证颜色稳定）；账目页卡顿同源治理
  （行上只留按钮、表单全页一份 #ledPanels）；修改按钮改弹框并回填归属人。

## 顺带修的真 bug（本批最要紧的三条）
1. **观影表单提交静默失效**：「新建影院」弹框被误嵌在观影主表单 <form> 内。
   HTML 不允许 form 嵌套 → 浏览器拆开内层，弹框里 required 的"影院名称"变成
   主表单必填项、又因 hidden 无法聚焦 → 点「记下这场电影」什么都不发生
   （Chrome: invalid form control with name='name' is not focusable）。
   → 弹框移到主表单之后。部署脚本加防线：按顺序配平 form 开闭判断是否嵌套。
2. **裁剪取消没清空文件框**（换 Cropper 时丢）→ close(cancelled)，4 个取消入口
   传 true 清空；否则"点了取消"仍会把没裁的原图传上去。
3. **裁剪预览退化成原图**（同批丢）→ 用 canvas 按 Cropper 的原图像素矩形重画，
   toDataURL 写回预览，恢复"所见即所得"。

## 连带修复：选人组件懒渲染（线上实测的必要性）
线上真实数据下账目页 6939 KB / 16788 个 input、观影表单 1194 个 input ——
根因是 _person_picker.php 首屏就把**全部候选人**渲成 <label>+<input>。
改成：首屏只留「不选」+ data-pp-people(JSON)，**打开弹框时**才 buildList()；
无 JS 兜底走 <noscript>（HTML5 规定启用脚本时其内容按纯文本解析，不产生节点）。
新增 window.ppSetSelected / decorateItems（动态项要补算首字母）。
实测账目页 6939 KB → 544 KB。新增 _fb_picker_lazy_check.py（11/0 + 反向 2 红）。

验证：e2e 786/0、交互 90/0、半集成 27/0、batch_e 91/0、batch10 46/0、batch9 38/0、
crop 17/0（+反向）、picker_unify 28/0、picker_lazy 11/0（+反向）、formbloat 9/0、
upgrade 126/0、mobile 688/0、drag 5/0、geom 5/5。
线上自检 19/19；线上真实账号验收 7/0（含"主表单无隐藏必填""线上 Cropper 接管+取消清空"）。

templates/people/index.php

@@ -184,6 +184,18 @@ $renderGrid = function (array $list) use ($meId, $canMove, $groups): void {
             <a class="btn btn-ghost btn-sm person-edit" data-no-drag
                href="<?= e(url('people/edit', ['id' => $pid])) ?>"
                title="编辑 <?= e($pshow) ?> 的资料">编辑</a>
+            <?php /* 用户 2026-10-04 第 11 批 #2 原话：「在编辑后面，放一个按钮，删除，
+                     用来删除一个人。」
+                     ⚠️ 它与「⋯→从我的名册移走」不是一件事，别混：
+                       · 「从我的名册移走」= 只是不在**我的**名册里显示，人还在家里；
+                       · 「删除」= 真的把这个人删掉（账号与亲属关系一起走，不可恢复）。
+                     所以它必须是显式的红色按钮 + 二次确认，不能收进 ⋯ 里。
+                     没有删除权限（非管理员）时不画，并给出原因提示。 */ ?>
+            <?php if (\App\Auth::isAdmin()): ?>
+              <button type="button" class="btn btn-danger btn-sm person-del"
+                      data-pd-open="<?= $pid ?>" data-pd-name="<?= e($pshow) ?>"
+                      title="删除 <?= e($pshow) ?>">删除</button>
+            <?php endif; ?>
             <?php if ($canMove): ?>
               <button type="button" class="btn btn-ghost btn-sm person-more-btn"
                       data-pm-open="<?= $pid ?>"
@@ -317,26 +329,65 @@ $renderBlock = function (int $gid, string $name, array $list) use ($renderGrid):
      ⚠️ 表单里留了原生「保存」按钮：即使 JS 出错，用户手动点它也能提交，
         不会掉进"按钮点了没反应"的黑洞。 */ ?>
   <?php if ($canMove): ?>
-    <div class="roster-menus" id="rosterMenus" hidden>
-      <div class="rm-panel" id="rmGroup" hidden>
+    <?php /* 用户 2026-10-04 第 11 批 #2 原话：「名册的分组功能，点击一次之后，再次点击就失效了，
+             应该**弹出一个框，就像选择观影人一样**，选择分组。」
+             所以分组从"贴在按钮下方的浮层"改成**居中弹框 + 遮罩**（与选人弹窗同一形态）。
+             ⚠️ "第二次点击失效"的根因：旧实现把浮层贴在按钮下方，并在**捕获阶段**监听
+                文档点击来"点外面就关"——于是点第二次时，mousedown 先被关闭逻辑吃掉、
+                随后的 click 又把面板打开，视觉上就是"闪一下没反应/要用第三次才行"。
+                改成居中的模态框后，外部点击只关模态本身，触发按钮的语义不再冲突。 */ ?>
+    <div class="rm-modal" id="rosterMenus" hidden>
+      <div class="rm-mask" data-rm-close></div>
+      <div class="rm-panel" id="rmGroup" role="dialog" aria-modal="true" aria-label="选择分组" hidden>
+        <div class="rm-head"><b>把「<span class="pg-who"></span>」分到</b>
+          <button type="button" class="rm-x" data-rm-close aria-label="关闭">✕</button></div>
         <form method="post" action="<?= e(url('people/group')) ?>" class="pg-menu">
           <?= csrf_field() ?>
           <input type="hidden" name="person_id" value="">
-          <p class="pg-title">把「<b class="pg-who"></b>」分到</p>
-          <label class="pg-item">
-            <input type="radio" name="group_id" value="">
-            <span>未分类</span>
-          </label>
-          <?php foreach ($groups as $g): ?>
+          <div class="rm-body">
             <label class="pg-item">
-              <input type="radio" name="group_id" value="<?= (int)$g['id'] ?>">
-              <span><?= e((string)$g['name']) ?></span>
+              <input type="radio" name="group_id" value="">
+              <span>未分类</span>
             </label>
-          <?php endforeach; ?>
-          <button class="btn btn-sm pg-save" type="submit">保存</button>
+            <?php foreach ($groups as $g): ?>
+              <label class="pg-item">
+                <input type="radio" name="group_id" value="<?= (int)$g['id'] ?>">
+                <span><?= e((string)$g['name']) ?></span>
+              </label>
+            <?php endforeach; ?>
+          </div>
+          <div class="rm-foot">
+            <button class="btn" type="submit">保存</button>
+            <button class="btn btn-ghost" type="button" data-rm-close>取消</button>
+          </div>
         </form>
       </div>
-      <div class="rm-panel" id="rmMore" hidden>
+
+      <div class="rm-panel" id="rmDel" role="dialog" aria-modal="true" aria-label="删除成员" hidden>
+        <div class="rm-head"><b>删除「<span class="pd-who"></span>」</b>
+          <button type="button" class="rm-x" data-rm-close aria-label="关闭">✕</button></div>
+        <?php /* ⚠️ 路由是 people/destroy（与详情页底部那个删除同一个）——
+                 不要写成 people/delete，那会 404 且看起来像"点了没反应"。 */ ?>
+        <form method="post" action="<?= e(url('people/destroy')) ?>" class="pd-form">
+          <?= csrf_field() ?>
+          <input type="hidden" name="id" value="">
+          <div class="rm-body">
+            <p class="rm-warn">
+              会把他从名册中删除，<b>并且</b>删掉他的登录账号与全部亲属关系连线。
+              <b>不可恢复。</b>
+            </p>
+            <p class="small muted" style="margin:8px 0 0">
+              只是"不想在名册里看到他"？那用卡片上的「⋯ → 从我的名册移走」，人还留在家里。
+            </p>
+          </div>
+          <div class="rm-foot">
+            <button class="btn btn-danger" type="submit">确认删除</button>
+            <button class="btn btn-ghost" type="button" data-rm-close>取消</button>
+          </div>
+        </form>
+      </div>
+
+      <div class="rm-panel" id="rmMore" role="dialog" aria-modal="true" aria-label="更多操作" hidden>
         <p class="small muted person-move is-kin" hidden style="margin:0 0 6px">
           因家谱关系自动加入；解除关系后自动移出。
         </p>
@@ -371,91 +422,96 @@ $renderBlock = function (int $gid, string $name, array $list) use ($renderGrid):
   syncClear();
 })();
 
-<?php /* ==================== 共享浮层的交互（v24 第 10 批 #6）====================
-   一行只留一个按钮，真正的表单在 #rosterMenus 里（全页一份）。
-   这里负责：点按钮 → 把该行的数据填进共享表单 → 浮层贴着那个按钮弹出来。 */ ?>
+<?php /* ==================== 卡片动作弹框的交互（v24 第 11 批 #2 重写）====================
+   一行只留按钮，真正的表单在 #rosterMenus 里（全页一份，见前面的说明）。
+   这一版把"贴按钮的浮层"换成**居中模态框**（与选人弹窗同形态）—— 用户明确要求
+   「应该弹出一个框，就像选择观影人一样」。
+
+   ⚠️ 为什么旧版"点第二次会失效"：
+      旧实现在**捕获阶段**监听 document 的 click，只要目标不在浮层里就 closeAll()。
+      点第二次时事件顺序是 mousedown → （捕获阶段 closeAll）→ click（又打开）→ …
+      于是按钮像是"时灵时不灵"。模态框把"关闭"收敛到遮罩/关闭键/取消键上，
+      按钮自己只负责"打开"，语义不再打架。
+   ⚠️ 外部点击用**冒泡**阶段监听，且只认遮罩本身（data-rm-close），
+      不用"点哪儿都关"那种一刀切 —— 那正是上一版出问题的写法。 */ ?>
 (function () {
   var wrap = document.getElementById('rosterMenus');
   if (!wrap) { return; }
   var gPanel = document.getElementById('rmGroup');
+  var dPanel = document.getElementById('rmDel');
   var mPanel = document.getElementById('rmMore');
-  var openFor = null;      // 当前为哪张卡开着
 
   function closeAll() {
     wrap.hidden = true;
-    if (gPanel) { gPanel.hidden = true; }
-    if (mPanel) { mPanel.hidden = true; }
-    openFor = null;
+    [gPanel, dPanel, mPanel].forEach(function (p) { if (p) { p.hidden = true; } });
   }
 
-  /* 浮层贴到触发按钮下方；贴太靠右就向左收，贴太靠下就翻到上方 */
-  function place(panel, btn) {
-    var b = btn.getBoundingClientRect();
-    var w = panel.offsetWidth, h = panel.offsetHeight;
-    var vw = document.documentElement.clientWidth, vh = document.documentElement.clientHeight;
-    var left = Math.min(Math.max(8, b.right - w), vw - w - 8);
-    var top  = b.bottom + 6;
-    if (top + h > vh - 8) { top = Math.max(8, b.top - h - 6); }
-    panel.style.left = Math.round(left) + 'px';
-    panel.style.top  = Math.round(top) + 'px';
+  function open(panel) {
+    [gPanel, dPanel, mPanel].forEach(function (p) { if (p && p !== panel) { p.hidden = true; } });
+    panel.hidden = false;
+    wrap.hidden = false;
+    // 焦点进面板：点开就能用键盘选（Esc 也能关，见下）
+    var first = panel.querySelector('input:not([type=hidden]), button');
+    if (first) { first.focus(); }
   }
 
+  // ---- 打开：分组 ----
   document.addEventListener('click', function (e) {
     var t = e.target;
     if (!t || !t.closest) { return; }
 
-    // ---- 分组 ----
     var gb = t.closest('[data-pg-open]');
     if (gb) {
       e.preventDefault();
-      var pid = gb.getAttribute('data-pg-open');
-      var cur = parseInt(gb.getAttribute('data-pg-cur') || '0', 10) || 0;
       var form = gPanel.querySelector('form');
-      form.querySelector('input[name="person_id"]').value = pid;
+      form.querySelector('input[name="person_id"]').value = gb.getAttribute('data-pg-open');
       gPanel.querySelector('.pg-who').textContent = gb.getAttribute('data-pg-name') || '';
-      // 预选当前分组
+      // 预选当前分组（点开就知道他现在在哪一栏）
+      var cur = parseInt(gb.getAttribute('data-pg-cur') || '0', 10) || 0;
       Array.prototype.forEach.call(form.querySelectorAll('input[name="group_id"]'), function (r) {
         r.checked = (parseInt(r.value || '0', 10) || 0) === cur;
       });
-      mPanel.hidden = true;
-      gPanel.hidden = false;
-      wrap.hidden = false;
-      place(gPanel, gb);
-      openFor = pid;
+      open(gPanel);
       return;
     }
 
-    // ---- ⋯ ----
+    // ---- 打开：删除 ----
+    var db = t.closest('[data-pd-open]');
+    if (db) {
+      e.preventDefault();
+      dPanel.querySelector('form input[name="id"]').value = db.getAttribute('data-pd-open');
+      dPanel.querySelector('.pd-who').textContent = db.getAttribute('data-pd-name') || '';
+      open(dPanel);
+      return;
+    }
+
+    // ---- 打开：⋯ ----
     var mb = t.closest('[data-pm-open]');
     if (mb) {
       e.preventDefault();
-      var pid2 = mb.getAttribute('data-pm-open');
       var kin = mb.getAttribute('data-pm-hint') === '1';
       mPanel.querySelector('.is-kin').hidden = !kin;
       mPanel.querySelector('form.is-self').hidden = kin;
       if (!kin) {
-        mPanel.querySelector('form.is-self input[name="person_id"]').value = pid2;
+        mPanel.querySelector('form.is-self input[name="person_id"]').value =
+          mb.getAttribute('data-pm-open');
       }
-      gPanel.hidden = true;
-      mPanel.hidden = false;
-      wrap.hidden = false;
-      place(mPanel, mb);
-      openFor = pid2;
+      open(mPanel);
       return;
     }
 
-    // 点浮层内部 → 不动
-    if (wrap.contains(t)) { return; }
-    closeAll();
-  }, true);
+    // ---- 关闭：只有遮罩 / ✕ / 取消 会关（不做"点哪儿都关"）----
+    if (t.closest('[data-rm-close]')) {
+      e.preventDefault();
+      closeAll();
+    }
+  });
 
   document.addEventListener('keydown', function (e) {
     if (e.key === 'Escape') { closeAll(); }
   });
-  window.addEventListener('resize', closeAll);
-  window.addEventListener('scroll', function () { if (openFor) { closeAll(); } }, true);
 
-  /* 选中即提交（与原来一样是"锦上添花"：面板里那个「保存」按钮一直都在） */
+  /* 选中即提交（面板里那个「保存」按钮一直都在，这条只是顺手） */
   document.addEventListener('change', function (e) {
     var inp = e.target;
     if (!inp || inp.type !== 'radio' || inp.name !== 'group_id') { return; }