v38 第 38 批：观影试点 Ant Design 日期控件 + 弹框内联排版（对齐）+ 去提示 + 默认带自己

用户原话（四条）：
  ①「我终于找到了一个我比较认可的日期选择插件
     https://ant-design.antgroup.com/components/date-picker-cn 现在观影这个模块进行
     测试吧，测试那个有开始、结束时间的。等这个模块测试完没问题了，再更新到其他的模块。」
  ②「记录一场电影，这个弹框因为标题和下面的输入框都是两行的，所以导致弹框非常长。
     能不能排排版，让前面的标题后面加个冒号，后面的输入框直接跟在它后面，这样就变成一行。
     包括开始、结束时间、影院、同行的人、简介等等，能把它排成一行的都排成一行，
     但是一定要注意对齐的问题，如果不对齐的话可能不好看。」
  ③「里面的一些提示，比如片名可以从豆瓣自动补充，还有刚新建的影院会自动选中，
     观影照片可以放这里且可多选，这些都把它去掉吧，节省一下上下的空间。」
  ④「另外一个同行的人，这里每个人添加的时候，应该默认带上自己，也就是自己不用选择
     就应该已经选上了。」

① Ant Design RangePicker —— **只在观影试点**（用户明确"试完再推广"）
  · 资源 `assets/vendor/antd/{antd.min.js, dayjs.min.js, reset.css}`（unpkg 下载、随包上线）；
    layout.php 加 `fb-antd` 清单；`_datetime.php` 加 `$dtPlugin = 'antd'` 开关 +
    `data-dt-antd="1"` 标记；app.js 加 `bootAntd()` / `mountAntd()`（按需加载）。
  · 🔴 UMD 的硬依赖：antd 从**全局**取 React / ReactDOM / dayjs。缺 React 的报错是
    `Cannot read properties of undefined (reading 'createContext')` —— 表现是"控件完全
    不出现"，不是样式问题。项目本来就有一套 React 18.3.1（Semi 用的），直接复用同一份。
  · 🔴 实测出的关键行为（独立探针 `_antd_probe`，15/0）：面板里有 **42 个日期格 +
    2 个内联时间列（84 项）+ 「确定」按钮** —— 正是之前 Semi 缺的那两样；
    且 **`onChange` 只在两端都齐了才触发**，单端改动走 `onCalendarChange` ⇒
    回写必须两个都挂，否则"只填了开始时间就提交"会丢值。
  · ⚠️ 原生那对下拉**全部保留**（值载体 + 拉不动时的兜底），挂上 antd 后用 clip 视觉收起
    （不用 display:none —— 保持可聚焦）。
  · 部署断言钉住试点边界：日程/任务**不该**出现 `$dtPlugin = 'antd'`。

② 弹框排版：标签内联 + 控件左缘对齐
  · `.mv-row` = 标签(固定 62px、右对齐、**冒号由 CSS ::after 给**)：控件(占满剩余)。
  · 并排对：简介+备注、海报+观影照片 → `.mv-pair`（grid 1fr 1fr 保证两列等宽）；窄屏回单列。
  · 🔴 真机量出**两个真对齐缺陷**（不是猜的）：
    1) 时间行的控件左缘比别的行**偏 8px** —— `.dt-cols` 是 `gap: 10px 18px`（列距 18），
       而普通 `.mv-row` 只有 `gap:10px` ⇒ 改 `.mv-row.dt-range.dt-cols { column-gap: 10px }`；
    2) 海报/观影照片两行歪了 **130px** —— `_stage_drop.php` 在最前面插的 `.sr-only`
       `<input>`（绝对定位 1px）**占掉了一整份 flex:1 1 auto**，把上传框推出去
       ⇒ 这两块改纵向 `.mv-media`（标签一行、内容从 72px 起，与主列对齐）。
    ⇒ 现在**所有字段控件左缘都是 444**；A/B 实测**弹框 1036px → 817px（矮 219px）**。

③ 删掉三句冗余提示（豆瓣补充 / 新建影院自动选中 / 观影照片），简介 rows 6→3。

④ 同行的人默认带上自己：新增时预置 `[我]`；编辑以库值为准；`old()` 存在时尊重用户上次勾选。

🔴 顺带修的真 bug：**antd 面板与弹框抢 Esc** —— 两个处理器都挂 document 上，
  按一次 Esc 把日期面板和整个弹框一起关掉。已改成"antd 面板开着时弹框不吃 Esc"。

验证（全部真机 + 反向验证）：
  · _fb_b38_movie_form.py **33/0**（antd 挂上/面板有时间列与确定/值写回隐藏 *_date/
    标签同行与左缘对齐/三句提示消失/默认带自己/试点边界）；
  · _fb_b38_narrow.py **6/0**（宽屏并排、窄屏回单列、无横向溢出）；
  · _fb_b38_falsify.py **8/0**（排版退回上下两行、antd 只挂 onChange、不预置自己 → 各自必须红）；
  · e2e **1503/0**、日期控件真机 **53/0** + 反向 **7/0**、v37 两套 **27/0 + 5/0**、
    观影照片 **16/0** + **8/0**、b30 三件套、b18 选人 **10/0**、几何交互 **109/0**、
    DAV 三套、部署静态断言空跑 —— 全绿；
  · 线上 app.js / app.css / antd.min.js 的 SHA256 与本地一致。

⚠️ 顺带修了探针/夹具的三处**测试侧**问题（都不是页面 bug）：
  · e2e 里 6 条 jsdom 用例（测选人弹框"暂存区机制"）前提是"一个都没选"，
    默认带自己后全假红 ⇒ 在**测试自己的 HTML 副本**上清掉 `data-pp-selected`；
  · `_fb_b18_picker` 真机探针同理，改成**点 chip 上的 ×**（组件把已选存在闭包里，
    改属性没用 —— 试过两种写法都是白试）；
  · `_fb_b34_dtrange` 的"标签文案"断言写死了「开始 / 结束」，
    而 v38 把观影的标签简化成了「时间」⇒ 改成"有非空标签即可"；
    另补一条 antd 分支（挂 antd 后原生被裁成 1px，`1px > 0` 会让旧判据**假通过**）。
  · 顺带：夹具名册只有 1 人时会误报"无法验证多选"，已把实际候选数打出来。

assets/js/app.js

@@ -1285,6 +1285,21 @@
 (function () {
   var boxes = Array.prototype.slice.call(document.querySelectorAll('.dt-input[data-dt]'));
   var hasMonth = !!document.querySelector('input[type="month"]');
+
+  /* 🔴🔴 v38（用户 2026-10-10）：**Ant Design 的 RangePicker**。
+     用户原话：「我终于找到了一个我比较认可的日期选择插件
+       https://ant-design.antgroup.com/components/date-picker-cn 现在观影这个模块
+       进行测试吧，测试那个有开始、结束时间的。等这个模块测试完没问题了，
+       再更新到其他的模块。」
+     ⇒ 页面出现 `[data-dt-antd]`（= 观影的起止那对）时才拉 antd 那三个文件，
+       **独立于** Semi 那套（Semi 只管"工作经历的年月"）。
+     ⚠️ 两套必须能**共存**：它们都吃同一个全局 React/ReactDOM（同版本，不会冲突），
+        但 antd/semi 各自的资源只在需要时才下。
+     ⚠️ 顺序：**先**把原生下拉绑好（bindParts）、**再**升级成 antd ——
+        这样即使 antd 拉不动，用户手上的控件也是完整可用的。 */
+  var antdHosts = document.querySelectorAll('[data-dt-antd]');
+  bootAntd(antdHosts);
+
   /* ⚠️ 只要还有 month 控件就得拉 Semi；纯 .dt-input 页面（绝大多数）不用拉。 */
   if (!hasMonth) {
     // 没有 month 控件：**只做绑定**，不下载任何外部资源。
@@ -1518,6 +1533,119 @@
     group.classList.add('dt-cols');
   }
 
+  /* ============================================================================
+     v38：Ant Design RangePicker 适配层（**只在观影模块试点**）
+     ============================================================================
+     与自建下拉的分工：
+       · 自建下拉 = **唯一的值载体与兜底**。三个日期下拉照旧绑在隐藏的 `*_date` 上；
+       · antd 控件 = **额外**挂上去的一层 UI，选完把值写回那两个端点（走 writeDT）。
+     这样"antd 拉不动"时用户仍然能用自建下拉，不会出现"控件消失"。
+
+     🔴 实测出来的三条关键行为（见 _tooling/_antd_probe，15/0）：
+       ① UMD 需要全局 `React` / `ReactDOM` / `dayjs`，缺一个就挂不出来；
+       ② 面板里的**时间列是内联可见的、还有「确定」按钮** —— 正是用户要的形态；
+       ③ `onChange` 只在**两端都齐了**才触发，单端改动走 `onCalendarChange`。
+          ⇒ 回写必须同时挂 `onCalendarChange`（实时）**和** `onChange`（确认），
+             否则"只填了开始时间就提交"会丢值。
+     ⚠️ 这个适配层**不认识的页面不受影响**：没有 `[data-dt-antd]` 就直接返回。
+     ============================================================================ */
+  function bootAntd(hosts) {
+    if (!hosts.length) { return; }
+    var meta = document.querySelector('meta[name="fb-antd"]');
+    if (!meta) { return; }
+    var conf;
+    try { conf = JSON.parse(meta.getAttribute('content')); } catch (e) { return; }
+    if (!conf || !conf.css || !conf.antd || !conf.dayjs) { return; }
+
+    var loading = null;
+    function ensure() {
+      if (window.antd && window.dayjs && window.React && window.ReactDOM) {
+        return Promise.resolve();
+      }
+      if (loading) { return loading; }
+      loadCss(conf.css);
+      // ⚠️ 顺序不能换：dayjs 是 antd 的依赖，antd 又从全局取 React/ReactDOM。
+      //    React/ReactDOM 若已被 Semi 那套加载过，loadJs 会再下一次 —— 但它们是
+      //    幂等赋值（同一个 UMD），不会出事；先查一下能省掉那次下载。
+      var chain = Promise.resolve();
+      if (!window.React) { chain = chain.then(function () { return loadJs(conf.react || ''); }); }
+      if (!window.ReactDOM) { chain = chain.then(function () { return loadJs(conf.dom || ''); }); }
+      loading = chain
+        .then(function () { return window.dayjs ? null : loadJs(conf.dayjs); })
+        .then(function () { return window.antd ? null : loadJs(conf.antd); });
+      return loading;
+    }
+
+    var done = 0;
+    ensure().then(function () {
+      Array.prototype.forEach.call(hosts, function (box) {
+        if (mountAntd(box)) { done++; }
+      });
+      if (window.console && done) { console.info('AntD RangePicker 已挂上 ' + done + ' 处'); }
+    }).catch(function (err) {
+      // 拉不动就留在自建下拉上 —— 渐进增强的兜底，不弹任何打扰
+      if (window.console) { console.warn('AntD DatePicker 未启用：', err && err.message); }
+    });
+  }
+
+  /** 把**一对**端点升级成 antd RangePicker；成功返回 true。 */
+  function mountAntd(box) {
+    var group = box.closest ? box.closest('.dt-range') : null;
+    if (!group || group.getAttribute('data-antd-done')) { return false; }
+    var pair = Array.prototype.slice.call(group.querySelectorAll('.dt-input[data-dt]'));
+    if (pair.length !== 2) { return false; }
+    var a = group.querySelector('[data-dt-antd]');
+    if (!a) { return false; }
+    var b = null;
+    pair.forEach(function (p) { if (p !== a) { b = p; } });
+    if (!b) { return false; }
+
+    var host = document.createElement('span');
+    host.className = 'dt-antd';
+    a.parentNode.insertBefore(host, a);
+
+    function cur(el) {
+      var m = (readDT(el).trim() || '').match(/^(\d{4})-(\d{2})-(\d{2}) (\d{2}):(\d{2})/);
+      return m ? m[1] + '-' + m[2] + '-' + m[3] + ' ' + m[4] + ':' + m[5] : '';
+    }
+    var v0 = cur(a), v1 = cur(b);
+    function toDayjs(str) { return str ? window.dayjs(str, 'YYYY-MM-DD HH:mm') : null; }
+
+    var last = ['', ''];
+    /* 回写：把 antd 给的两串写回两个端点（走既有的 writeDT → 隐藏四字段）。
+       ⚠️ 两端都要写 —— 只写变化的那一端，另一端会被 writeDT('') 清空。 */
+    function writeBack(strs) {
+      var s0 = (strs && strs[0]) || '', s1 = (strs && strs[1]) || '';
+      if (s0 === last[0] && s1 === last[1]) { return; }
+      last = [s0, s1];
+      writeDT(a, s0);
+      writeDT(b, s1);
+      a.classList.toggle('has-value', !!s0);
+      b.classList.toggle('has-value', !!s1);
+    }
+
+    try {
+      ReactDOM.createRoot(host).render(React.createElement(antd.DatePicker.RangePicker, {
+        showTime: { format: 'HH:mm' },
+        format: 'YYYY-MM-DD HH:mm',
+        allowClear: true,
+        placeholder: ['开始时间', '结束时间'],
+        defaultValue: (v0 || v1) ? [toDayjs(v0 || v1), toDayjs(v1 || v0)] : undefined,
+        // ⚠️ onCalendarChange 是**单端也算**的那个（实测：只点开始它就响）；
+        //    onChange 只在两端齐了才响。两个都挂才不会丢值。
+        onCalendarChange: function (vals, strs) { writeBack(strs); },
+        onChange: function (vals, strs) { writeBack(strs); }
+      }));
+    } catch (e) {
+      if (window.console) { console.warn('antd RangePicker 挂载失败，留在自建下拉：', e && e.message); }
+      host.parentNode.removeChild(host);
+      return false;
+    }
+    group.classList.add('is-antd');
+    group.setAttribute('data-antd-done', '1');
+    return true;
+  }
+
   function upgrade(box) {
     if (box.getAttribute('data-semi-done')) { return; }
     // 范围对的成员由 upgradeRange 统一处理