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/_person_picker.php

@@ -47,7 +47,9 @@ $ppInputType = $ppIsMulti ? 'checkbox' : 'radio';
 //    直接 !$ppSelected 会误判成"选了人"，于是「不选」那一项反而不勾。
 $ppHasSel = count(array_filter($ppSelected)) > 0;
 ?>
-<div class="pp" id="<?= e($ppId) ?>" data-pp="<?= e($ppId) ?>" data-pp-mode="<?= e($ppIsMulti ? 'multi' : 'single') ?>">
+<div class="pp" id="<?= e($ppId) ?>" data-pp="<?= e($ppId) ?>"
+     data-pp-name="<?= e($ppName) ?>"
+     data-pp-mode="<?= e($ppIsMulti ? 'multi' : 'single') ?>">
   <div class="pp-chips" id="<?= e($ppId) ?>-chips">
     <?php /* ⚠️ 循环变量一律用 $ppRow，绝不叫 $p：宿主模板里 $p 常常是别的东西
             （高级搜索页的 $p 是"查询条件数组"），被这个片段一覆盖，
@@ -79,27 +81,59 @@ $ppHasSel = count(array_filter($ppSelected)) > 0;
         <input class="input pp-search" id="<?= e($ppId) ?>-search" type="text"
                placeholder="输入名字或拼音首字母，如 yyq 找「杨永全」" autocomplete="off">
       </div>
-      <div class="pp-list" id="<?= e($ppId) ?>-list">
+      <?php
+      /* ⚠️ v24 第 11 批 #7 续：候选人清单**首屏不建 DOM**。
+              线上真实数据下，每页 1~3 个选人组件 × 1184 人 = 几千个 <label>+<input>，
+              账目页因此到 6.9 MB / 16788 个 input，密码管理器逐个扫描把页面拖死。
+              现在按 data-pp-people（JSON）在**打开弹框时**建清单；
+              无 JS 时由下面的 <noscript> 兜底（启用脚本时它只是纯文本，不产生节点）。 */
+      $ppJson = [];
+      foreach ($ppPeople as $ppRow) {
+          $ppJson[] = [
+              'id'     => (int)$ppRow['id'],
+              'name'   => (string)$ppRow['name'],
+              'shown'  => person_name($ppRow),
+              'avatar' => avatar_url($ppRow['avatar'] ?? null),
+          ];
+      }
+      unset($ppRow);
+      ?>
+      <div class="pp-list" id="<?= e($ppId) ?>-list"
+           data-pp-people="<?= e(json_encode($ppJson, JSON_UNESCAPED_UNICODE | JSON_HEX_APOS | JSON_HEX_QUOT)) ?>"
+           data-pp-name="<?= e($ppName) ?>"
+           data-pp-type="<?= e($ppInputType) ?>"
+           data-pp-selected="<?= e(implode(',', array_map('intval', $ppSelected))) ?>"
+           data-pp-allow-empty="<?= (!$ppIsMulti && $ppAllowEmpty) ? '1' : '0' ?>">
+        <?php /* 「不选」很轻（1 个 input）且是"默认不指定"语义的载体 → 留在服务端渲染。
+                 ⚠️ 它必须留在**普通容器**里（不是 noscript），否则 ppSetSelected 找不到它。 */ ?>
         <?php if (!$ppIsMulti && $ppAllowEmpty): ?>
           <label class="pp-item pp-item-none" data-name="不选" data-shown="不选">
             <input type="radio" name="<?= e($ppName) ?>" value="0" <?= $ppHasSel ? '' : 'checked' ?>>
             <span class="pp-name">不选</span>
           </label>
         <?php endif; ?>
-        <?php foreach ($ppPeople as $ppRow): ?>
-          <label class="pp-item"
-                 data-name="<?= e((string)$ppRow['name']) ?>"
-                 data-shown="<?= e(person_name($ppRow)) ?>">
-            <input type="<?= e($ppInputType) ?>" name="<?= e($ppName) ?>" value="<?= (int)$ppRow['id'] ?>"
-                   <?= in_array((int)$ppRow['id'], $ppSelected, true) ? 'checked' : '' ?>>
-            <img class="pp-av" src="<?= e(avatar_url($ppRow['avatar'] ?? null)) ?>" alt="" loading="lazy">
-            <span class="pp-name"><?= e(person_name($ppRow)) ?></span>
-            <span class="pp-initials" hidden></span>
-          </label>
-        <?php endforeach; ?>
-        <?php unset($ppRow); ?>
         <div class="pp-empty" hidden>没有匹配的人。</div>
       </div>
+
+      <?php /* 无 JS 兜底：启用脚本时这段只是**纯文本**（HTML5 规定），
+               不会变成 DOM 节点、也就不会造成上面的膨胀；
+               禁用脚本时才渲染出来，选人照样能用。 */ ?>
+      <noscript>
+        <div class="pp-list pp-list-noscript">
+          <?php foreach ($ppPeople as $ppRow): ?>
+            <label class="pp-item"
+                   data-name="<?= e((string)$ppRow['name']) ?>"
+                   data-shown="<?= e(person_name($ppRow)) ?>">
+              <input type="<?= e($ppInputType) ?>" name="<?= e($ppName) ?>" value="<?= (int)$ppRow['id'] ?>"
+                     <?= in_array((int)$ppRow['id'], $ppSelected, true) ? 'checked' : '' ?>>
+              <img class="pp-av" src="<?= e(avatar_url($ppRow['avatar'] ?? null)) ?>" alt="" loading="lazy">
+              <span class="pp-name"><?= e(person_name($ppRow)) ?></span>
+              <span class="pp-initials" hidden></span>
+            </label>
+          <?php endforeach; ?>
+          <?php unset($ppRow); ?>
+        </div>
+      </noscript>
     </div>
   </div>
   <noscript><style>.pp-open { display: none; } .pp-modal { position: static; display: block; background: none; padding: 0; } .pp-modal-box { box-shadow: none; border: 1px solid var(--line); max-height: none; }</style></noscript>