v40 第 40 批：观影九条 + 修掉一个「编辑一次就把观影时间弄成 NULL」的数据丢失 bug

用户原话（九条）：
  ①「观影详情页面左上角的观影记录，应该和观影的列表页面里面保持一致」
  ②「观影详情页面的编辑，还有返回观影的按钮，应该和观影列表页面里面的记一场电影保持一致」
  ③「删除按钮就用红色背景颜色」
  ④「观影详情里面的编辑按钮应该也是弹出的，和新增是一样的，编辑完以后，页面动态更新」
  ⑤「影院管理部分，注意控制列的宽度…最右侧的操作、编辑和删除两个按钮，已经被挤成两行了，
     尝试让编辑和删除排在一行，宽度给它留够」
  ⑥「编辑使用蓝色的背景，删除使用红色的背景」
  ⑦「高级搜索里面的日期范围，也使用我们最新的控件」
  ⑧「观影统计里面，如果这个人在名册里面，但是他一部电影的记录也没有，就不要在下面的这个
     按观影人统计里面出现了，太长了」
  ⑨「观影统计里面，月份分布和星期分布，12 个月用 12 种不同的颜色，星期 7 天用 7 种不同的颜色」

🔴🔴 **本轮最重：修掉一个数据丢失级的真 bug**（v37 引入、**影响所有 `.dt-range` 页面**）
  · 现象：任何带已存时间的编辑表单，只要 JS 跑起来，日期在用户**什么都没动**时
    就被抹掉 ⇒ 提交后库里 `starts_at` 变 **NULL**。
  · 根因：`assets/js/app.js` 的 `bindParts()` 首屏写成 `rebuildDays(false)` ——
    那个参数是"保留已选日吗"，传 false 会**清空"日"下拉**；紧接着的 `sync()`
    看到 y/mo 有值而 d 空 ⇒ 算出 '' ⇒ **把隐藏的 `*_date` 写成空串**。
  · 修：改成 `rebuildDays(true)`。
  · ⚠️ 为什么一直没被发现：e2e 是**服务端**驱动的（直接 POST 字段、不经过 JS）；
    真机探针只验"控件可见可点"与"改值能写回"，**没验"什么都不动时值还在不在"**。
    ⇒ 补了回归断言 + 反向验证（把 true 改回 false 必须红）。
  · ⚠️ 影响面大于观影：**日程 / 任务 / 旅程**的起止同样走 `.dt-range`，
    修在共用件等于顺手修了四个模块。

① 详情页头部与列表页统一：`<span class="sub">观影记录</span>` → **`<h1>观影记录</h1>` + sub=片名**。
②③ 详情页「编辑」「返回观影」用**裸 `.btn`**（= 列表页「记一场电影」的模块品牌实心）；
   「删除」用 `.btn-del`（**红色实心**，原来是淡红描边的 `.btn-danger`）。
   ⚠️ 用户那句"编辑用蓝色"是**影院管理**的（见 ⑥），详情页要的是"与列表页一致" ——
      第一版理解错、把详情页编辑也刷成蓝色，**反向验证当场抓住**。
④ 详情页「编辑」改**弹框** + AJAX + 保存后**动态更新**：
   · 内嵌**同一份** `form.php`；新增 `$mvModalForce`（`$isEdit` 也强制弹框壳）
     与可显式传的 `$mvOpen`；新增 `View::renderPartial()` 供校验失败时把弹框整块重画回 JSON。
   · 保存成功：`fetch` 跟 302 → **只换正文容器**（保留滚动位置），并重跑页内内联 JS。
   · 🔴 实测踩到并解决的四件事：
     1. 模板里裸类名 `Person::roster()` 会**致命**（全局命名空间）⇒ 页面从此中断输出、
        且不报给用户 ⇒ 弹框整块消失。必须 `\App\Person::`。
     2. `<button form="mvForm">`（表单外的提交按钮）：点它真的提交，但挂在 `document` 上的
        `submit` 监听**收不到事件**（实测 `XRW=(无)`、`resource_type=document`）⇒ 整页跳走、
        红字看不到 ⇒ 主路改成 **click 委托**（preventDefault），`submit` 只兜回车。
     3. `innerHTML` 换正文容器后要重跑内联 JS，但**绝不能重跑带 `src` 的外部脚本**
        （app.js 等，会二次绑定）；本段脚本自己要有**幂等闸门**。
     4. flash 是**一次性**的（`take_flash()` 读完即清）⇒ 成功后**不要**再取一次页面，
        直接用第一次的 `r.text()`（否则"保存成功却没有任何提示"）。
⑤⑥ 影院管理：`.cn-table { table-layout: fixed }` + 操作列 **132px** +
   `.cn-ops { flex-wrap: nowrap }` ⇒ 编辑/删除**并排一行**；
   新增语义色 `--blue: #2F6FB0`，编辑=蓝实心、删除=红实心
   （⚠️ 必须在**页头动作区那一层**也写一条：`.btn` 的特异性会盖过基类）。
⑦ 高级搜索的日期范围换 AntD：新增 `[data-antd-daterange]`（**纯日期**版，
   不传 showTime），与观影"时刻"那对共用同一套按需加载 + 中文 locale 逻辑。
⑧ `MovieStats::byPerson` 加 `HAVING cnt > 0`（⚠️ 不能写 `WHERE cnt > 0`：
   聚合结果在 WHERE 阶段还不存在）。
⑨ 新增 `MovieStats::MONTH_COLORS`（12 色）/ `WEEKDAY_COLORS`（7 色）+
   `monthColor()` / `weekdayColor()`；**统计页"月度趋势"与年度报告"月份分布"同月同色**
   （用户没要求，但不一致一眼就看得出）。

验证（全部真机 + 反向验证）：
  · _fb_b40_movie.py **41/0**（九条逐条 + 两条 🔴🔴 日期不丢）；
  · _fb_b40_falsify.py **10/0**（日期抹掉 / 编辑按钮配色 / AJAX 主路 三处各自证伪 + 复原回全绿）；
  · 全路由 e2e **1502/0**（顺带修掉一条**依赖夹具数据**的脆弱断言：
    "统计页必须有 bar-chart" → 无数据时改判"要么有图表、要么有空态"）；
  · 页头按钮探针 **60/0** + 反向 **3/3 全部抓到**（删除按钮换成 `.btn-del` 后，
    判据与注入目标都已同步更新）；v37/v38/v39 各套全绿；
  日期控件真机 53/0 + 反向 7/0；观影照片 16/0 + 8/0；DAV 三套；部署静态断言空跑 —— 全绿。
  · 线上 11 个关键文件 SHA256 与本地**逐字节一致**。

⚠️ 顺带：`show.php` 的 JS 注释里写了字面 `<script>` / `<main>`，绊倒了我自己"按标签
  提取内联 JS 做语法检查"的脚本（**与 v37 那次 `<form>` 同类**）—— 已把注释里的
  标签字面量全部改写。⇒ 通识：模板注释里不要出现字面标签名。

assets/js/app.js

@@ -1298,7 +1298,14 @@
      ⚠️ 顺序：**先**把原生下拉绑好（bindParts）、**再**升级成 antd ——
         这样即使 antd 拉不动，用户手上的控件也是完整可用的。 */
   var antdHosts = document.querySelectorAll('[data-dt-antd]');
-  bootAntd(antdHosts);
+  /* 🔴 v40（用户 2026-10-10）：「高级搜索里面的日期范围，也使用我们最新的控件。」
+     ⇒ 高级搜索的日期范围是**纯日期**（GET 参数 `date_from` / `date_to`，
+       没有"时:分"），与观影表单那对"时刻"不是一个东西 ⇒ 单独一条标记
+       `[data-antd-daterange]`，挂的是**不带 showTime** 的 RangePicker。
+     ⚠️ 两条路共用下面同一套"按需加载 + 中文 locale"的 ensure()，
+        只是挂载函数不同 —— 别复制一份加载逻辑出来（那必然有一天两边不同步）。 */
+  var antdDateRanges = document.querySelectorAll('[data-antd-daterange]');
+  if (antdHosts.length || antdDateRanges.length) { bootAntd(antdHosts, antdDateRanges); }
 
   /* ⚠️ 只要还有 month 控件就得拉 Semi；纯 .dt-input 页面（绝大多数）不用拉。 */
   if (!hasMonth) {
@@ -1506,7 +1513,29 @@
     y.addEventListener('change', function () { rebuildDays(true); sync(); });
     mo.addEventListener('change', function () { rebuildDays(true); sync(); });
     d.addEventListener('change', sync);
-    rebuildDays(false);   // 首屏：把"日"列按当前年月铺对
+    /* 🔴🔴 v40 修一个**数据丢失级**的真 bug（v37 引入，影响**所有** `.dt-range` 页面）：
+       这里原来是 `rebuildDays(false)` —— `keep=false` 会**把"日"下拉清空**
+       （它是"重建这一列"的写法，本意用于"换了年月要重新铺天数"）。
+       紧接着的 `sync()` 看到 `y/mo` 有值、`d` 是空的 ⇒ 算出 `v=''`
+       ⇒ **把隐藏的 `*_date` 写成了空串**。
+
+       后果：任何带着已存时间的编辑表单，只要 JS 跑起来（正常情况都会），
+       日期就在用户**还没动任何东西**时被抹掉了 —— 用户提交后库里 `starts_at`
+       变成 NULL。实测（`_dbg_submit.py`）：打开编辑弹框后
+       `starts_at_date` 读出来是 `''`（而年/月下拉与 antd 显示都还是正确的
+       `2026 / 2026-10-05`），点保存 → 库里的 `starts_at` 从
+       `2026-10-05 19:30:00` 变成 **NULL**。
+
+       ⚠️ 为什么以前没被发现：e2e 是**服务端**驱动的（直接 POST 字段），
+          不经过 JS；而真机探针当时只验"控件可见可点"与"改值能写回"，
+          **没验"什么都不动时值还在不在"**。
+          ⇒ 补一条回归断言（见 `_fb_b40_movie.py`：打开编辑弹框时
+            `starts_at_date` 必须非空、提交后库里时间不丢）。
+
+       ⇒ 首屏应当 `rebuildDays(true)`：把**服务端已经选好**的那一天保留下来。
+          （`true` 的语义是"能保留就保留"：那天在新月份里不存在时仍然清空 ——
+           31 号 → 2 月那种，见上面 `d.value` 那行的判断。） */
+    rebuildDays(true);    // ⚠️ 不是 false！见上面那段说明（传 false 会把日期抹掉）
     sync();
 
     // 供 fbSetDT / writeDT 程序化改值之后让三个下拉跟上
@@ -1560,8 +1589,10 @@
 
      ⚠️ 这个适配层**不认识的页面不受影响**：没有 `[data-dt-antd]` 就直接返回。
      ============================================================================ */
-  function bootAntd(hosts) {
-    if (!hosts.length) { return; }
+  function bootAntd(hosts, dateRanges) {
+    hosts = hosts || [];
+    dateRanges = dateRanges || [];
+    if (!hosts.length && !dateRanges.length) { return; }
     var meta = document.querySelector('meta[name="fb-antd"]');
     if (!meta) { return; }
     var conf;
@@ -1600,13 +1631,82 @@
       Array.prototype.forEach.call(hosts, function (box) {
         if (mountAntd(box)) { done++; }
       });
-      if (window.console && done) { console.info('AntD RangePicker 已挂上 ' + done + ' 处'); }
+      Array.prototype.forEach.call(dateRanges, function (el) {
+        if (mountAntdDateRange(el)) { done++; }
+      });
+      if (window.console && done) { console.info('AntD 日期控件已挂上 ' + done + ' 处'); }
     }).catch(function (err) {
       // 拉不动就留在自建下拉上 —— 渐进增强的兜底，不弹任何打扰
       if (window.console) { console.warn('AntD DatePicker 未启用：', err && err.message); }
     });
   }
 
+  /**
+   * 把一对**纯日期**输入（`<input type=date name=date_from/date_to>`）升级成
+   * Ant Design 的 RangePicker（**不带时间列**）。
+   *
+   * 🔴 v40（用户 2026-10-10）：「高级搜索里面的日期范围，也使用我们最新的控件。」
+   * ⚠️ 与 `mountAntd()`（观影那对"时刻"）的分工：
+   *    · 那个操作的是 `.dt-input[data-dt]`（隐藏 `*_date` + `*_hour/_minute` 契约）；
+   *    · 这个直接操作两个 `input[type=date]`（GET 表单参数），**写成 `YYYY-MM-DD`**。
+   *    两边的"值载体"完全不同 ⇒ 共享加载/中文逻辑，但**回写各自实现**。
+   * ⚠️ 原生输入**不删**：用 `class="dt-antd-hidden"` 视觉收起（仍是表单字段、仍可聚焦）。
+   *    这样 antd 拉不动时，用户看到的就是原来那两个原生日期框 —— 不倒退。
+   */
+  function mountAntdDateRange(el) {
+    if (!el || el.getAttribute('data-antd-done')) { return false; }
+    var fm = el.querySelector('input[name$="date_from"], input[name="date_from"]');
+    var to = el.querySelector('input[name$="date_to"], input[name="date_to"]');
+    // 兼容调用方自定义字段名：按 DOM 顺序取前两个 date 输入
+    if (!fm || !to) {
+      var all = el.querySelectorAll('input[type="date"]');
+      if (all.length < 2) { return false; }
+      fm = all[0]; to = all[1];
+    }
+
+    var host = document.createElement('span');
+    host.className = 'dt-antd dt-antd-dateonly';
+    el.insertBefore(host, el.firstChild);
+
+    function toDayjs(str) {
+      var m = (str || '').trim().match(/^(\d{4})-(\d{2})-(\d{2})$/);
+      return m ? window.dayjs(m[1] + '-' + m[2] + '-' + m[3], 'YYYY-MM-DD') : null;
+    }
+    var last = ['', ''];
+    function writeBack(strs) {
+      var s0 = (strs && strs[0]) || '', s1 = (strs && strs[1]) || '';
+      if (s0 === last[0] && s1 === last[1]) { return; }
+      last = [s0, s1];
+      // 直接写原生字段（GET 提交的就是它们）
+      fm.value = s0; to.value = s1;
+      fm.dispatchEvent(new Event('change', { bubbles: true }));
+      to.dispatchEvent(new Event('change', { bubbles: true }));
+    }
+
+    var v0 = (fm.value || '').trim(), v1 = (to.value || '').trim();
+    try {
+      var picker = React.createElement(antd.DatePicker.RangePicker, {
+        format: 'YYYY-MM-DD',
+        allowClear: true,
+        placeholder: ['开始日期', '结束日期'],
+        defaultValue: (v0 || v1) ? [toDayjs(v0 || v1), toDayjs(v1 || v0)] : undefined,
+        // 与观影那对同一条实测结论：单端改动走 onCalendarChange，两端齐了才 on
+        onCalendarChange: function (vals, strs) { writeBack(strs); },
+        onChange: function (vals, strs) { writeBack(strs); }
+      });
+      var loc = (window.antd.locales && window.antd.locales.zh_CN) || undefined;
+      if (loc) { picker = React.createElement(antd.ConfigProvider, { locale: loc }, picker); }
+      ReactDOM.createRoot(host).render(picker);
+    } catch (e) {
+      if (window.console) { console.warn('antd 日期范围挂载失败，留在原生输入：', e && e.message); }
+      host.parentNode.removeChild(host);
+      return false;
+    }
+    el.classList.add('is-antd');
+    el.setAttribute('data-antd-done', '1');
+    return true;
+  }
+
   /** 把 dayjs 切到简体中文（星期/月份/相对时间都由它出）。
    *  ⚠️ 拿不到就静默跳过 —— 那只会让星期显示成英文，不该拦住整个控件。 */
   function applyDayjsZh() {
@@ -1871,6 +1971,21 @@
     return true;
   };
 
+  /**
+   * 对外接口：**重新扫描并挂 antd RangePicker**（v40 新增）。
+   *
+   * 为什么要它：观影详情页的「编辑」现在弹出一个**动态插入**的弹框（AJAX 校验失败
+   * 时还会整块重画），里面那对起止控件是**后来才出现在 DOM 里**的 ——
+   * 而 `bootAntd()` 只在页面初始化时扫一次 `[data-dt-antd]`，扫不到它们
+   * ⇒ 用户看到一个空白的日期行（原生下拉被 CSS 收起、antd 又没挂上）。
+   * ⚠️ `mountAntd` 有 `data-antd-done` 幂等标记，重复调用不会挂两遍。
+   */
+  window.fbBootAntd = function () {
+    bootAntd(document.querySelectorAll('[data-dt-antd]'),
+             document.querySelectorAll('[data-antd-daterange]'));
+    return true;
+  };
+
   window.fbSetDT = function (name, str) {
     if (!name) { return false; }
     var box = null;