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

@@ -67,24 +67,53 @@ $shortKind    = \App\Birthday::KINDS;
   <p class="motto-line">“<?= e((string)$p['slogan']) ?>”</p>
 <?php endif; ?>
 
-<div class="detail">
-  <aside class="detail-photo">
+<?php /* 用户 2026-10-04 第 11 批 #3 原话：「名册详情页面，需要修改。现在左侧是一个头像，
+     下面都是空白的，太浪费空间了。应该这样，左上角是头像，头像右侧开始排放姓名什么的基本信息，
+     然后就是其他信息开始往下顺序排放。」
+
+     ⚠️ 旧布局是 `.detail { grid-template-columns: 260px 1fr }` 两栏：
+        左栏（头像卡）只有 ~330px 高，右栏好几张卡片 → **头像下面空出一大片**。
+     现在改成：
+       · 顶部一张「名片卡」：头像（左上）+ 右侧姓名/称呼/性别/账号身份等基本信息；
+       · 名片卡**下方**，其余各块全宽依次往下排。
+     这样无论信息多少都不会留白。 */ ?>
+<div class="pcard">
+  <div class="pcard-avatar">
     <img src="<?= e(avatar_url($p['avatar'])) ?>" alt="">
-    <div class="name"><?= e($pShown) ?></div>
-    <?php if ($isMyNick): ?><div class="sub">本名 <?= e((string)$p['name']) ?></div><?php endif; ?>
-    <div class="sub">
-      <?php if ($role === 'admin' && $p['account_status'] === 'active'): ?>
-        家庭管理员
-      <?php elseif ($role === 'guest'): ?>
-        访客（只读）
-      <?php elseif (!empty($p['account_id'])): ?>
-        已开通登录<?= $p['account_status'] === 'disabled' ? '（已停用）' : '' ?>
-      <?php else: ?>
-        还没有开通登录
+  </div>
+  <div class="pcard-main">
+    <div class="pcard-name">
+      <?= e($pShown) ?>
+      <?php if ($isMyNick): ?><span class="pcard-real">本名 <?= e((string)$p['name']) ?></span><?php endif; ?>
+      <?php if (!empty($p['is_placeholder'])): ?><span class="badge">虚拟人物</span><?php endif; ?>
+    </div>
+    <div class="pcard-meta">
+      <?php if (!$isSelf && (string)$labelToMe !== ''): ?>
+        <span class="rel-label"><?= e($labelToMe) ?></span>
+      <?php endif; ?>
+      <span class="pcard-chip">
+        <?php if ($role === 'admin' && $p['account_status'] === 'active'): ?>
+          <b>家庭管理员</b>
+        <?php elseif ($role === 'guest'): ?>
+          访客（只读）
+        <?php elseif (!empty($p['account_id'])): ?>
+          已开通登录<?= $p['account_status'] === 'disabled' ? '（已停用）' : '' ?>
+        <?php else: ?>
+          还没有开通登录
+        <?php endif; ?>
+      </span>
+      <span class="pcard-chip"><?= e(\App\Person::genderWord((string)($p['gender'] ?? '')) ?: '性别未填') ?></span>
+      <?php if (!empty($p['birth_rank'])): ?>
+        <span class="pcard-chip">第 <?= (int)$p['birth_rank'] ?> 个孩子</span>
+      <?php endif; ?>
+      <?php if ($age !== null): ?>
+        <span class="pcard-chip"><?= (int)$age ?> 岁</span>
       <?php endif; ?>
     </div>
-  </aside>
+  </div>
+</div>
 
+<div class="detail-stack">
   <div>
     <div class="card card-pad">
       <dl class="kv">
@@ -593,7 +622,7 @@ $shortKind    = \App\Birthday::KINDS;
       </div>
     <?php endif; ?>
   </div>
-</div>
+</div><?php /* /detail-stack —— 名片卡下方的全宽堆叠到此结束 */ ?>
 
 <?php /* ==================== 危险操作：删除（用户 2026-10-03 第 2 条）====================
      「删除」从右上角搬到了页面**最下方**、「开通登录账号」下面。
@@ -602,26 +631,62 @@ $shortKind    = \App\Birthday::KINDS;
        原来那句"从名册里移除"听着像"只是从我的名册里移走"，
        实际会删账号与亲属关系，说法与后果不符。 */ ?>
 <?php if ($admin): ?>
+  <?php /* 用户 2026-10-04 第 11 批 #2 原话：「个人详情页，最下面的删除，竟然是个链接，
+           应该是个按钮，跟开通账号一样，是个大按钮，只不过背景用红色。」
+           → 从 <details> + 文字链接 + 小按钮，改成**与「开通登录账号」同规格的大按钮**，
+             只把底色换成红色。确认仍保留（破坏性操作），但改成弹框式的二次确认，
+             不再用浏览器原生 confirm（那玩意儿在不同浏览器里长相差异大）。 */ ?>
   <div class="danger-zone">
-    <details class="del-wrap">
-      <summary class="link-quiet">删除这个人…</summary>
-      <div class="del-confirm">
-        <p class="small muted" style="margin:0 0 8px;flex:1 1 100%">
-          会把他从名册中删除，**并且**删掉他的登录账号与全部亲属关系连线（不可恢复）。
-          如果你只是想让他从<b>你的</b>名册里消失，用名册列表上的「⋯ → 从我的名册移走」。
-        </p>
-        <form method="post" action="<?= e(url('people/destroy')) ?>"
-              onsubmit="return confirm('确定要删除 <?= e($p['name']) ?> 吗？账号与亲属关系会一起删掉，无法恢复。')">
-          <?= csrf_field() ?>
-          <input type="hidden" name="id" value="<?= $pid ?>">
-          <button class="btn btn-danger btn-sm" type="submit">确认删除</button>
-        </form>
+    <div class="del-big">
+      <p class="del-big-tip">
+        删除会把他从名册中移除，<b>并且</b>删掉登录账号与全部亲属关系连线，<b>不可恢复</b>。<br>
+        如果你只是想让他从<b>你的</b>名册里消失，用名册列表上的「⋯ → 从我的名册移走」。
+      </p>
+      <button type="button" class="btn btn-danger btn-block-lg" id="delBigBtn">
+        删除 <?= e((string)$p['name']) ?>
+      </button>
+      <form method="post" action="<?= e(url('people/destroy')) ?>" id="delBigForm" hidden>
+        <?= csrf_field() ?>
+        <input type="hidden" name="id" value="<?= $pid ?>">
+      </form>
+      <div class="del-big-confirm" id="delBigConfirm" hidden>
+        <span>确定删除？此操作无法撤销。</span>
+        <button class="btn btn-danger" type="button" id="delBigYes">确认删除</button>
+        <button class="btn btn-ghost" type="button" id="delBigNo">取消</button>
       </div>
-    </details>
+    </div>
   </div>
 <?php endif; ?>
 
 <script>
+/* 大删除按钮的两步确认（用户第 11 批 #2）：第一次点露出"确认删除/取消"，
+   第二次点才真的提交。比原生 confirm 可控，也与页面其它确认长得一致。 */
+(function () {
+  var btn = document.getElementById('delBigBtn');
+  var box = document.getElementById('delBigConfirm');
+  var form = document.getElementById('delBigForm');
+  if (!btn || !box || !form) { return; }
+  btn.addEventListener('click', function () {
+    box.hidden = false;
+    btn.hidden = true;
+  });
+  var no = document.getElementById('delBigNo');
+  if (no) {
+    no.addEventListener('click', function () {
+      box.hidden = true;
+      btn.hidden = false;
+    });
+  }
+  var yes = document.getElementById('delBigYes');
+  if (yes) {
+    yes.addEventListener('click', function () {
+      yes.disabled = true;
+      yes.textContent = '正在删除…';
+      form.submit();
+    });
+  }
+})();
+
 // 关系表单的「是哪一位」下拉有**两种含义**：
 //   kind=parent → 对方是父亲/母亲（填的是对方）
 //   kind=child  → 我是孩子的父亲/母亲（填的是自己）