From f9e30bd7d8f9480393666957a9d12a4e0dbfd90d Mon Sep 17 00:00:00 2001
From: laoyang <i@yangyq.net>
Date: Sat, 10 Oct 2026 22:13:20 +0800
Subject: [PATCH] =?UTF-8?q?v40=20=E7=AC=AC=2040=20=E6=89=B9=EF=BC=9A?=
 =?UTF-8?q?=E8=A7=82=E5=BD=B1=E4=B9=9D=E6=9D=A1=20+=20=E4=BF=AE=E6=8E=89?=
 =?UTF-8?q?=E4=B8=80=E4=B8=AA=E3=80=8C=E7=BC=96=E8=BE=91=E4=B8=80=E6=AC=A1?=
 =?UTF-8?q?=E5=B0=B1=E6=8A=8A=E8=A7=82=E5=BD=B1=E6=97=B6=E9=97=B4=E5=BC=84?=
 =?UTF-8?q?=E6=88=90=20NULL=E3=80=8D=E7=9A=84=E6=95=B0=E6=8D=AE=E4=B8=A2?=
 =?UTF-8?q?=E5=A4=B1=20bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

用户原话（九条）：
  ①「观影详情页面左上角的观影记录，应该和观影的列表页面里面保持一致」
  ②「观影详情页面的编辑，还有返回观影的按钮，应该和观影列表页面里面的记一场电影保持一致」
  ③「删除按钮就用红色背景颜色」
  ④「观影详情里面的编辑按钮应该也是弹出的，和新增是一样的，编辑完以后，页面动态更新」
  ⑤「影院管理部分，注意控制列的宽度…最右侧的操作、编辑和删除两个按钮，已经被挤成两行了，
     尝试让编辑和删除排在一行，宽度给它留够」
  ⑥「编辑使用蓝色的背景，删除使用红色的背景」
  ⑦「高级搜索里面的日期范围，也使用我们最新的控件」
  ⑧「观影统计里面，如果这个人在名册里面，但是他一部电影的记录也没有，就不要在下面的这个
     按观影人统计里面出现了，太长了」
  ⑨「观影统计里面，月份分布和星期分布，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>` 同类**）—— 已把注释里的
  标签字面量全部改写。⇒ 通识：模板注释里不要出现字面标签名。
---
 app/MovieStats.php           |  52 ++++++++-
 app/View.php                 |  25 ++++
 assets/css/app.css           | 103 ++++++++++++++++
 assets/js/app.js             | 125 +++++++++++++++++++-
 index.php                    |  31 +++++
 templates/movies/cinemas.php |  29 +++--
 templates/movies/form.php    |  32 +++--
 templates/movies/report.php  |  14 ++-
 templates/movies/search.php  |  15 ++-
 templates/movies/show.php    | 219 ++++++++++++++++++++++++++++++++++-
 templates/movies/stats.php   |   9 +-
 11 files changed, 620 insertions(+), 34 deletions(-)

diff --git a/app/MovieStats.php b/app/MovieStats.php
index 346874b..461dd45 100644
--- a/app/MovieStats.php
+++ b/app/MovieStats.php
@@ -72,7 +72,56 @@ final class MovieStats
         return $st->fetchAll();
     }
 
-    /** 按观影人：参与了多少场（带头像，供统计页画条；名称按「我叫他什么」显示） */
+    /**
+     * 月份 / 星期的**图表配色**（v40）。
+     *
+     * 🔴 用户 2026-10-10：「观影统计里面，月份分布和星期分布，12 个月用 12 种不同的颜色，
+     *    星期 7 天用 7 天用 7 种不同的颜色。」
+     *
+     * ⚠️ 放在这里（而不是模板里各写一份）的理由：月份分布与星期分布分别出现在
+     *    `report.php`（年度报告）与 `stats.php`（月度趋势）两处，颜色必须是**同一套**，
+     *    否则同一个月在两个页面是两种颜色 —— 那种不一致用户一眼就会看出来。
+     * ⚠️ 色板是**环绕色相**取的 12 档（红→橙→黄→绿→青→蓝→靛→紫→品红），
+     *    相邻两档明度接近、色相拉开，在宣纸底上都能看清；
+     *    没有用"彩虹高饱和"是因为那和大面积暖棕的品牌底色打架。
+     */
+    public const MONTH_COLORS = [
+        1  => '#C0533F', '#D2703C', '#DFA13A', '#C7B23E',
+        '#8CB04A', '#5FA05C', '#3F9E85', '#3E8FA6',
+        '#4478B5', '#5B63B0', '#8455AC', '#B0548F',
+    ];
+
+    /** 星期配色：日 → 六（7 档，与月份色板取同一条色相环上均匀间隔的 7 个点） */
+    public const WEEKDAY_COLORS = [
+        '日' => '#C0533F', '一' => '#D98A3C', '二' => '#C7B23E',
+        '三' => '#5FA05C', '四' => '#3E8FA6', '五' => '#4478B5',
+        '六' => '#8455AC',
+    ];
+
+    /** 取某个月（1-12）的颜色；越界回退到品牌色，绝不返回空串（那会画成黑块）。 */
+    public static function monthColor(int $m): string
+    {
+        return self::MONTH_COLORS[$m] ?? '#A84A28';
+    }
+
+    /** 取某个星期（'日'..'六'）的颜色 */
+    public static function weekdayColor(string $w): string
+    {
+        return self::WEEKDAY_COLORS[$w] ?? '#A84A28';
+    }
+
+    /** 按观影人：参与了多少场（带头像，供统计页画条；名称按「我叫他什么」显示）
+     *
+     *  🔴 v40（用户 2026-10-10）：「观影统计里面，如果这个人在名册里面，但是他一部电影的
+     *     记录也没有，就不要在下面的这个按观影人统计里面出现了，太长了。」
+     *     ⇒ **只列出真的参与过至少一场的人**（`HAVING cnt > 0`）。
+     *
+     *  ⚠️ 为什么原来是 LEFT JOIN 全列：那是"按人统计"字面意义上的做法，也方便看出
+     *     "谁一场都没看过"。但用户的实际痛点是**列表太长**（名册上千人时，
+     *     这个区块会被几百行"0 场"淹没，真正有数据的人反而找不到）。
+     *     ⇒ 按用户要求过滤；"0 场"这件事本来也不是这个页面要回答的问题。
+     *  ⚠️ `HAVING` 而不是 `WHERE cnt > 0`：`cnt` 是聚合结果，`WHERE` 阶段还不存在。
+     *     写成 `WHERE` 会被 MySQL 报 `Unknown column 'cnt'`。 */
     public static function byPerson(int $familyId, int $viewerId = 0): array
     {
         $st = Database::get()->prepare(
@@ -83,6 +132,7 @@ final class MovieStats
                LEFT JOIN nicknames n ON n.target_id = p.id AND n.viewer_id = ?
               WHERE p.family_id = ? AND p.kind = 'member'
               GROUP BY p.id, p.name, p.avatar, n.nickname
+             HAVING cnt > 0
               ORDER BY cnt DESC, p.id"
         );
         $st->execute([$familyId, $viewerId, $familyId]);
diff --git a/app/View.php b/app/View.php
index 090c373..afa6620 100644
--- a/app/View.php
+++ b/app/View.php
@@ -28,6 +28,31 @@ final class View
         require dirname(__DIR__) . '/templates/layout.php';
     }
 
+    /**
+     * 只渲染**模板本身**，返回字符串（不套 layout）。
+     *
+     * 🔴 v40（用户 2026-10-10）：「观影详情里面的编辑按钮应该也是弹出的，和新增是一样的，
+     *    编辑完以后，页面动态更新。」
+     *    ⇒ AJAX 保存**校验失败**时，必须把这同一个表单**原样重画**回去
+     *      （字段报错、`old()` 回填、附件/海报面板全靠模板自己产出）。
+     *      如果不重画而只回一个错误文案，用户就会看到"值全丢了、红字也没有"——
+     *      与整页路径（`View::render`）行为不一致，那种"两条路各说各话"的 bug 最难查。
+     *
+     * ⚠️ 与 `render()` 的唯一区别：不 require layout.php。
+     *    layout 会输出 `<html>`/顶栏，塞进一段 innerHTML 里会直接坏掉结构。
+     */
+    public static function renderPartial(string $tpl, array $data = []): string
+    {
+        $file = dirname(__DIR__) . '/templates/' . $tpl . '.php';
+        if (!is_file($file)) {
+            throw new \RuntimeException('模板不存在：' . $tpl);
+        }
+        extract($data, EXTR_SKIP);
+        ob_start();
+        require $file;
+        return (string)ob_get_clean();
+    }
+
     /**
      * 独立的整页（登录、安装、错误），不套顶栏 —— 但**仍然要是一份完整 HTML**。
      *
diff --git a/assets/css/app.css b/assets/css/app.css
index 486f600..f96ddcb 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -15,6 +15,11 @@
   --brand-ink:#6E3820;
   --green:    #6F9E5C;
   --red:      #C0533F;
+  /* 🔴 v40（用户 2026-10-10）：「影院管理部分…编辑使用蓝色的背景，删除使用红色的背景。」
+     ⇒ 新增一个中性的"操作蓝"（不是链接蓝、也不是模块品牌色）—— 它是**语义色**：
+       蓝=编辑、红=删除，全站统一，跟着模块换肤也不该变。
+     ⚠️ 暖纸底上要够暗才压得住白字：这里取 #2F6FB0（对比度 ≈ 4.9:1）。 */
+  --blue:     #2F6FB0;
   --line:     rgba(44, 35, 29, .10);
   --line-2:   rgba(44, 35, 29, .06);
   --radius:   16px;
@@ -1422,6 +1427,26 @@ body[class] .semi-datepicker-day-inhover { background-color: color-mix(in srgb,
 .page-head .actions > a.btn-danger:not(.btn-icon):hover,
 .page-head .actions > form > .btn-danger:not(.btn-icon):hover,
 .page-head .actions > form > button.btn-danger:not(.btn-icon):hover { background: rgba(192, 83, 63, .09); }
+
+/* 层 4：**实心**底色按钮（v40 用户要求）。
+   原话（2026-10-10）：「删除按钮就用红色背景颜色…影院管理部分…编辑使用蓝色的背景，
+   删除使用红色的背景。」
+   ⇒ 这两个要的是**实心色块**（一眼分得清），而不是层 3 那种淡色描边。
+   ⚠️ 为什么不直接改 `.btn-danger`：全站十来处「删除」都在用它，改成实心会到处变样；
+      而且**页头动作区的层 1**（`.actions > form > button.btn`，特异性 0,4,1）
+      会盖过基类 `.btn-del`（0,1,0）—— 必须在同一层里再写一条才生效（与层 3 同一个坑）。 */
+.page-head .actions > .btn-del:not(.btn-icon),
+.page-head .actions > a.btn-del:not(.btn-icon),
+.page-head .actions > form > .btn-del:not(.btn-icon),
+.page-head .actions > form > button.btn-del:not(.btn-icon) {
+  background: var(--red); color: #fff; border-color: transparent;
+}
+.page-head .actions > .btn-edit:not(.btn-icon),
+.page-head .actions > a.btn-edit:not(.btn-icon),
+.page-head .actions > form > .btn-edit:not(.btn-icon),
+.page-head .actions > form > button.btn-edit:not(.btn-icon) {
+  background: var(--blue); color: #fff; border-color: transparent;
+}
 /* 「设置」图标按钮：**唯一无色的**（白底描边、方形），与上面所有彩色按钮区分。
    padding 归零、做成正方形，但高度必须仍是 --act-h（= 文字按钮的 43.8px）——
    写死过 40px，比旁边按钮矮 3.8px，是用户反复反馈的那个问题。 */
@@ -5323,3 +5348,81 @@ h5.md-h, h6.md-h { font-size: 14px; }
       （它们本来就只有一块，当时的"并排网格"里只有一个孩子，
        grid 让它只占半宽 —— 那正是"海报的上传框比简介窄"的原因）。
    ⚠️ 不留悬念：全站搜 `.mv-pair` 应该**零命中**（模板与 CSS 都清干净）。 */
+
+/* ============================================================================
+   🔴 v40（用户 2026-10-10）观影模块四处界面反馈
+   ============================================================================ */
+
+/* ---- ① 影院管理表格：操作列不再被挤成两行 ----
+   用户原话：「影院管理部分，注意控制列的宽度，因为最右侧的操作、编辑和删除两个按钮，
+   已经被挤成两行了，尝试让编辑和删除排在一行，宽度给它留够。」
+   🔴 真因：`.table` 是 `width:100%` + 自动布局，浏览器按内容分配列宽 ——
+      长地址那一列会把「操作」列压到只剩几十像素，两个按钮只好换行。
+   ⇒ 两件事一起做才稳：
+      ① 表格改 `table-layout: fixed`（列宽由我们给，不再被内容牵着走）；
+      ② 「操作」列给一个**够放两个按钮的最小宽度**（编辑 48 + 间距 8 + 删除 48
+         + 单元格左右 padding 16 ≈ 128，留到 132 更从容）。
+   ⚠️ 为什么不只是 `white-space:nowrap`：那会把列撑成"刚好够"，
+      但**表格还是按内容分配**，窗口一窄就又轮到别的列挤压它；
+      固定布局才是真的把这件事钉死。 */
+.cn-table { table-layout: fixed; }
+.cn-table .cn-col-name  { width: 30%; }
+.cn-table .cn-col-place { width: 15%; }
+.cn-table .cn-col-addr  { width: 32%; }
+.cn-table .cn-col-count { width: 10%; }
+.cn-table .cn-col-ops   { width: 132px; }
+.cn-table td.cn-addr { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.cn-ops {
+  display: flex; align-items: center; gap: 8px;
+  /* 🔴 不换行是本条的正题 */
+  flex-wrap: nowrap; white-space: nowrap;
+}
+.cn-ops > form { display: inline-flex; margin: 0; flex: 0 0 auto; }
+.cn-ops > .btn { flex: 0 0 auto; }
+/* 窄屏：地址列让位（它最长、也最不影响判断），操作列宽度保持不变 */
+@media (max-width: 720px) {
+  .cn-table .cn-col-name  { width: 34%; }
+  .cn-table .cn-col-place { width: 18%; }
+  .cn-table .cn-col-addr  { width: 22%; }
+  .cn-table .cn-col-count { width: 12%; }
+}
+
+/* ---- ② 实心语义按钮：编辑=蓝、删除=红 ----
+   ⚠️ 单独定义（不去改 `.btn-danger` 的既有语义）：`.btn-danger` 是**淡红描边**的
+      "危险动作"，全站十来处「删除」都在用它；用户这次要的是**实心色块**，
+      改 `.btn-danger` 会让所有页面一起变样。
+   三处都要写：裸类 / `a.` / `button.` —— 与页头动作区那套同一个理由
+   （`.btn`、`a.btn`、`button.btn` 特异性不同，漏一种就有一种是错的）。 */
+.btn-edit, a.btn-edit, button.btn-edit {
+  background: var(--blue); color: #fff; border-color: transparent;
+}
+.btn-del, a.btn-del, button.btn-del {
+  background: var(--red); color: #fff; border-color: transparent;
+}
+/* ⚠️ hover 统一交给文件靠后的「全站悬停统一」段（有底色的一律同色系加深）——
+   但那段是按 `.btn-ok/.btn-del/...` 的类名白名单写的，`.btn-edit` 是新的，
+   要在这里补一条，否则它会退回 `.btn` 的默认（品牌色底），看着像变了个按钮。 */
+.btn-edit:hover { filter: brightness(.92); }
+
+/* ---- ③ 观影详情页 = 列表页的头部口径 ----
+   用户原话：「观影详情页面左上角的观影记录，应该和观影的列表页面里面保持一致。」
+   列表页是 `<h1>观影记录</h1>` + sub；详情页原来只有一个 `<span class="sub">`，
+   没有 h1 ⇒ 左上角看起来"不像是同一件事"。模板已补上 h1，
+   这里只处理**窄屏**：h1 与 sub 在页头会挤，sub 允许收缩并省略。 */
+.page-head > .sub { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+/* ---- ④ 高级搜索的日期范围：换成 AntD RangePicker（纯日期）----
+   🔴 v40（用户 2026-10-10）：「高级搜索里面的日期范围，也使用我们最新的控件。」
+   挂上之后把**原生那两个日期框收起来**（它们仍是 GET 字段，只是不显示）。
+   ⚠️ 与原观影那对 `.dt-range.is-antd > .dt-input` 用同一套"clip 收起"手法：
+      不用 `display:none`（保持可聚焦，避免将来加 required 时不可聚焦的坑）。 */
+.date-antd-field .date-range.is-antd > .input,
+.date-antd-field .date-range.is-antd > .to {
+  position: absolute; width: 1px; height: 1px;
+  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
+  border: 0; padding: 0; margin: -1px;
+}
+.date-antd-field .date-range.is-antd { display: block; }
+/* 纯日期版控件与观影那边同款外观（同高、同圆角、同描边）—— 复用 .dt-antd 的规则，
+   这里只补"它是块级、占满字段宽度"这一点（.dt-antd 原为 flex 子项）。 */
+.dt-antd-dateonly { display: block; width: 100%; }
diff --git a/assets/js/app.js b/assets/js/app.js
index 67109dd..c05ed72 100644
--- a/assets/js/app.js
+++ b/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;
diff --git a/index.php b/index.php
index a68aca0..f154c0c 100644
--- a/index.php
+++ b/index.php
@@ -2857,6 +2857,37 @@ switch ($r) {
 
         if ($errors) {
             set_old($_POST);
+            /* 🔴🔴 v40（用户 2026-10-10）：「观影详情里面的编辑按钮应该也是弹出的，
+               和新增是一样的，编辑完以后，页面动态更新。」
+               ⇒ 详情页的编辑现在走**弹框 + AJAX**。校验失败时**两条路必须给同一件事**：
+                 · AJAX（弹框里提交）→ 回 JSON，带上**重画后的整个弹窗体**，
+                   前端直接塞回弹框容器 ⇒ 用户看到红字与填过的值（与整页路径一模一样）；
+                 · 普通 POST（无 JS 兜底）→ 照旧整页重画。
+               ⚠️ 判断放在**这里**而不是函数入口：只有"真的校验失败"才需要重画，
+                  成功路径不管谁来的都是 302（AJAX 那边靠 `fetch` 跟到最终页再替换）。
+               ⚠️ 弹窗体用 `$modalOnly = false` 渲染（要那个 cal-modal **壳**），
+                  因为详情页就是靠这一整块壳来弹的（列表页内嵌走的是另一条
+                  `$mvModalOnly = true`，别混）。 */
+            $isAjax = (($_SERVER['HTTP_X_REQUESTED_WITH'] ?? '') === 'XMLHttpRequest');
+            if ($isAjax) {
+                header('Content-Type: application/json; charset=utf-8');
+                echo json_encode([
+                    'ok'    => false,
+                    'errors' => $errors,
+                    // ⚠️ 关键：用 `$mvModalForce = true` 让模板**一定**输出弹框壳
+                    //    并处于打开态（编辑态的 `$mvOpen` 本来是 false，见 form.php）。
+                    'modal' => View::renderPartial('movies/form', [
+                        'm'          => $m,
+                        'people'     => Person::roster($familyId, $me, 'member', ''),
+                        'cinemas'    => Cinema::all($familyId),
+                        'errors'     => $errors,
+                        'mvModalOnly' => true,       // 不输出 page-head（塞回弹框里）
+                        'mvModalForce' => true,      // 强制成"弹框壳"
+                        'mvOpen'      => true,       // 且保持打开（用户正在看它）
+                    ]),
+                ], JSON_UNESCAPED_UNICODE | JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT);
+                exit;
+            }
             View::render('movies/form', [
                 'title'   => $isEdit ? '编辑观影记录' : '记一场电影',
                 'm'       => $m,
diff --git a/templates/movies/cinemas.php b/templates/movies/cinemas.php
index 5303767..1a76256 100644
--- a/templates/movies/cinemas.php
+++ b/templates/movies/cinemas.php
@@ -79,9 +79,24 @@ $canWrite = \App\Auth::canWrite();
     <p class="empty-hint">还没有影院，先在上面添加一家。</p>
   <?php else: ?>
     <div class="table-wrap">
-      <table class="table">
+      <?php /* 🔴 v40（用户 2026-10-10）：「影院管理部分，注意控制列的宽度，因为最右侧的
+           操作、编辑和删除两个按钮，已经被挤成两行了，尝试让编辑和删除排在一行，
+           宽度给它留够。编辑使用蓝色的背景，删除使用红色的背景。」
+           ⇒ ① 表格加 `.cn-table`：给「操作」列一个**最小宽度 + 不换行**
+                （`.cn-ops` 上 `flex-wrap: nowrap` + `white-space: nowrap`）——
+                两个按钮被挤成两行正是因为该列没有下限、被长地址挤压；
+             ② 编辑 → `.btn-edit`（实心蓝）、删除 → `.btn-del`（实心红）。
+           ⚠️ 用 `.btn-edit` / `.btn-del` 而不是复用 `.btn-danger`：后者是**淡红描边**的
+              "危险动作"语义，全站十来处删除都在用；用户这次明确要的是**实心色块**。 */ ?>
+      <table class="table table-fixed cn-table">
         <thead>
-          <tr><th>名称</th><th>所在地方</th><th>详细地址</th><th>观影</th><?php if ($canWrite): ?><th>操作</th><?php endif; ?></tr>
+          <tr>
+            <th class="cn-col-name">名称</th>
+            <th class="cn-col-place">所在地方</th>
+            <th class="cn-col-addr">详细地址</th>
+            <th class="cn-col-count">观影</th>
+            <?php if ($canWrite): ?><th class="cn-col-ops">操作</th><?php endif; ?>
+          </tr>
         </thead>
         <tbody>
           <?php foreach ($cinemas as $c): ?>
@@ -91,17 +106,17 @@ $canWrite = \App\Auth::canWrite();
                 <b><?= e($c['name']) ?></b>
               </td>
               <td><?= e((string)($c['place'] ?? '')) !== '' ? e($c['place']) : '—' ?></td>
-              <td><?= !empty($c['address']) ? e($c['address']) : '—' ?></td>
+              <td class="cn-addr"><?= !empty($c['address']) ? e($c['address']) : '—' ?></td>
               <td><?= (int)$c['movie_count'] ?> 场</td>
               <?php if ($canWrite): ?>
-                <td>
-                  <div class="actions">
-                    <a class="btn btn-ghost btn-sm" href="<?= e(url('movies/cinemas', ['edit' => (int)$c['id']])) ?>">编辑</a>
+                <td class="cn-col-ops">
+                  <div class="actions cn-ops">
+                    <a class="btn btn-edit btn-sm" href="<?= e(url('movies/cinemas', ['edit' => (int)$c['id']])) ?>">编辑</a>
                     <form method="post" action="<?= e(url('movies/cinemas_del')) ?>"
                           onsubmit="return confirm('确定删除「<?= e($c['name']) ?>」吗？关联观影记录的影院信息将置空。')">
                       <?= csrf_field() ?>
                       <input type="hidden" name="id" value="<?= (int)$c['id'] ?>">
-                      <button type="submit" class="btn btn-danger btn-sm">删除</button>
+                      <button type="submit" class="btn btn-del btn-sm">删除</button>
                     </form>
                   </div>
                 </td>
diff --git a/templates/movies/form.php b/templates/movies/form.php
index ae948ad..fd48c91 100644
--- a/templates/movies/form.php
+++ b/templates/movies/form.php
@@ -75,18 +75,32 @@ $mvModalOnly = !empty($mvModalOnly); ?>
        ⚠️ 表单本身**一个字没动**（字段名 / 服务端契约 / CSRF / enctype 全照旧），
           只是把它的容器从"页面上的卡片"换成"浮层里的面板"。 */ ?>
 <?php
-/* ⚠️ 弹框的初始显隐规则：
-     · 被列表页内嵌（$mvModalOnly）→ **关闭**（用户点"记一场电影"才开）；
-     · 整页直接访问 `movies/new`（含**校验失败重画**）→ **打开** ——
-       否则用户提交失败后跳到这一页，只会看到空白页面（所有提示都在弹框里）。 */
-$mvModal = !$isEdit;
-$mvOpen  = $mvModal && !$mvModalOnly;
+/* ⚠️ 弹框的形态 / 初始显隐 —— 三个开关**分开管**（v40 起）：
+     · `$mvModalOnly`  不输出 page-head + 设置菜单（本模板被**别的页面内嵌**时用：
+                       观影列表页的"记一场电影"、观影详情页的"编辑"）；
+     · `$mvModalForce` **强制**成弹框壳（`$isEdit` 时默认是"整页卡片"，
+                       详情页的编辑要弹框，就靠这个翻转）；
+     · `$mvOpen`       初始是否打开。默认：弹框形态且非内嵌 → 打开。
+
+   各调用方实际传的：
+     · 观影列表页内嵌      → Only=true                （关闭，点按钮才开）
+     · `movies/new` 整页   → 都不传                    （打开：校验失败重画要看得见）
+     · 观影详情页内嵌      → Only=true + Force=true    （关闭，点"编辑"才开）
+     · AJAX 校验失败重画   → Only=true + Force=true + Open=true（重画回弹框里，保持打开） */
+$mvModalOnly  = !empty($mvModalOnly);
+$mvModalForce = !empty($mvModalForce);
+$mvModal = $mvModalForce || !$isEdit;
+$mvOpen  = isset($mvOpen) ? !empty($mvOpen) : ($mvModal && !$mvModalOnly);
 ?>
-<div class="<?= $mvModal ? 'cal-modal' : 'mv-form-wrap' ?>"<?= $mvModal ? ' id="mvAddCard" role="dialog" aria-modal="true" aria-label="记一场电影"' . ($mvOpen ? '' : ' hidden') : '' ?>>
+<div class="<?= $mvModal ? 'cal-modal' : 'mv-form-wrap' ?>"<?= $mvModal ? ' id="mvAddCard" role="dialog" aria-modal="true" aria-label="' . ($isEdit ? '编辑观影记录' : '记一场电影') . '"' . ($mvOpen ? '' : ' hidden') : '' ?>>
   <?php if ($mvModal): ?>
+    <?php /* 🔴 v40：弹框的标题 / 主按钮文案**随用途变** —— 详情页点「编辑」时进来的是
+           同一份模板，标题得写「编辑观影记录」、按钮写「保存」，不能还叫"记下这场电影"。
+           ⚠️ 元素 id **保持不变**（`mvAddCard` / `mvAddSubmit`…）：同一页上只会有一个
+              这类弹框，改 id 只会让既有的探针与 CSS 一起失效，收益为零。 */ ?>
     <div class="cal-modal-panel mv-panel">
       <div class="cal-modal-head">
-        <b>记一场电影</b>
+        <b><?= $isEdit ? '编辑观影记录' : '记一场电影' ?></b>
         <button type="button" class="cal-modal-x" id="mvAddX" aria-label="关闭">✕</button>
       </div>
   <?php endif; ?>
@@ -374,7 +388,7 @@ $mDelForms  = [];   // 收集起来，在表单**外面**统一渲染
       </div><?php /* /.cal-modal-body（仅弹框形态） */ ?>
       <div class="cal-modal-foot">
         <span class="cal-modal-tip" id="mvAddTip"></span>
-        <button class="btn btn-sm" type="submit" form="mvForm" id="mvAddSubmit">记下这场电影</button>
+        <button class="btn btn-sm" type="submit" form="mvForm" id="mvAddSubmit"><?= $isEdit ? '保存' : '记下这场电影' ?></button>
         <button class="btn btn-ghost btn-sm" type="button" id="mvAddCancel">取消</button>
       </div>
     </div><?php /* /.cal-modal-panel（仅弹框形态） */ ?>
diff --git a/templates/movies/report.php b/templates/movies/report.php
index ce72561..3cd41d3 100644
--- a/templates/movies/report.php
+++ b/templates/movies/report.php
@@ -71,12 +71,20 @@ $fmtDate   = static function (?string $d): string {
     </div>
   </div>
 
+  <?php /* 🔴 v40（用户 2026-10-10）：「观影统计里面，月份分布和星期分布，12 个月用
+           12 种不同的颜色，星期 7 天用 7 天用 7 种不同的颜色。」
+           ⇒ 颜色取自 `\App\MovieStats::MONTH_COLORS` / `WEEKDAY_COLORS`
+             （**唯一一处**定义，统计页的月度趋势也用它 —— 同一个月在两个页面必须同色）。
+           ⚠️ 原来的 `.vbar` 是 `background: linear-gradient(...)`，写在 CSS 里；
+              现在每条要各自的颜色 ⇒ 走**内联 style** 覆盖。
+              内联能赢过类里的声明（同元素上内联 > 外部表），所以不用 !important。 */ ?>
   <div class="card card-pad">
     <h3 class="section-title">月份分布 <span class="hint">每个月看几场</span></h3>
     <div class="vgrid">
       <?php foreach ($stats['month_distribution'] as $m => $cnt): ?>
         <div class="vcol" title="<?= (int)$m ?> 月：<?= (int)$cnt ?> 场">
-          <span class="vbar" style="height: <?= e((string)round((int)$cnt / $monthMax * 100, 2)) ?>%"></span>
+          <span class="vbar" style="height: <?= e((string)round((int)$cnt / $monthMax * 100, 2)) ?>%;
+                background: <?= e(\App\MovieStats::monthColor((int)$m)) ?>"></span>
           <span class="vlab"><?= (int)$m ?>月</span>
           <span class="vnum"><?= (int)$cnt ?></span>
         </div>
@@ -90,7 +98,9 @@ $fmtDate   = static function (?string $d): string {
       <?php foreach ($wd as $w): $c = (int)$stats['weekday_distribution'][$w]; ?>
         <div class="bar-item">
           <span class="bar-label">周<?= e($w) ?></span>
-          <span class="bar-track"><span class="bar-fill bar-fill-alt" style="width: <?= e((string)round($c / $weekdayMax * 100, 2)) ?>%"></span></span>
+          <span class="bar-track"><span class="bar-fill"
+                style="width: <?= e((string)round($c / $weekdayMax * 100, 2)) ?>%;
+                       background: <?= e(\App\MovieStats::weekdayColor($w)) ?>"></span></span>
           <span class="bar-count"><?= $c ?></span>
         </div>
       <?php endforeach; ?>
diff --git a/templates/movies/search.php b/templates/movies/search.php
index 5c0e763..a556550 100644
--- a/templates/movies/search.php
+++ b/templates/movies/search.php
@@ -49,12 +49,19 @@
       require __DIR__ . '/../_person_picker.php';
       ?>
     </div>
-    <div class="field">
+    <?php /* 🔴 v40（用户 2026-10-10）：「高级搜索里面的日期范围，也使用我们最新的控件。」
+           ⇒ 换成 Ant Design 的 RangePicker（**不带时间列** —— 这里筛的是"哪一天看的"）。
+           ⚠️ 两个原生 `input[type=date]` **照旧渲染**（GET 参数 `date_from` / `date_to`
+              就是它们交的），由 app.js 的 `mountAntdDateRange()` 视觉收起并挂上控件：
+              antd 拉不动时用户看到的就是原来那两个日期框，不会变成空白。
+           ⚠️ `data-antd-daterange` 是这条路的专用标记（观影表单那对"时刻"用的是
+              `[data-dt-antd]`，两套值载体不同，见 app.js 的说明）。 */ ?>
+    <div class="field date-antd-field">
       <label>日期范围</label>
-      <div class="date-range">
-        <input class="input" type="date" name="date_from" value="<?= e($p['date_from']) ?>">
+      <div class="date-range" data-antd-daterange>
+        <input class="input" type="date" name="date_from" value="<?= e($p['date_from']) ?>" aria-label="开始日期">
         <span class="to">至</span>
-        <input class="input" type="date" name="date_to" value="<?= e($p['date_to']) ?>">
+        <input class="input" type="date" name="date_to" value="<?= e($p['date_to']) ?>" aria-label="结束日期">
       </div>
     </div>
   </div>
diff --git a/templates/movies/show.php b/templates/movies/show.php
index 096f34a..74ea9b5 100644
--- a/templates/movies/show.php
+++ b/templates/movies/show.php
@@ -140,19 +140,34 @@ $commentBox = static function (int $reviewId, int $parentId, string $summary) us
 };
 ?>
 <div class="page-head">
-  <span class="sub">观影记录</span>
+  <?php /* 🔴 v40（用户 2026-10-10）：「观影详情页面左上角的观影记录，应该和观影的
+       列表页面里面保持一致，观影详情页面的编辑，还有返回观影的按钮，应该和观影列表
+       页面里面的记一场电影保持一致，删除按钮就用红色背景颜色。」
+       ⇒ ① 标题从 `<span class="sub">观影记录</span>`（没有 h1）改成与列表页**同款**
+             `<h1>观影记录</h1>`，片名降级到 sub —— 两页左上角看起来就是一件事；
+          ② 「编辑」「返回观影」用**裸 `.btn`**（= 列表页「记一场电影」那个品牌实心款）；
+          ③ 「删除」用 `.btn-del`（**实心红底**，不是原来那支淡红描边）。 */ ?>
+  <h1>观影记录</h1>
+  <span class="sub"><?= e($m['title']) ?></span>
   <div class="actions">
     <?php if ($canWrite): ?>
-      <a class="btn btn-ghost" href="<?= e(url('movies/edit', ['id' => (int)$m['id']])) ?>">编辑</a>
+      <?php /* v40：「编辑」不再是跳页，而是**就地弹框**（与列表页「记一场电影」同一份
+             form.php 模板）。仍然保留 data-href —— JS 没跑时它是可直接访问的链接。
+             ⚠️ 按钮类名是**裸 `.btn`**，不是 `.btn-edit`：用户这一条要的是
+                「和观影列表页面里面的记一场电影**保持一致**」（= 该模块品牌色实心），
+                "编辑用蓝色"那句是针对**影院管理**说的（那边另用 `.btn-edit`）。
+                实测列表页那个按钮是 `rgb(120,77,138)`（观影主题紫），这里是同一个值。 */ ?>
+      <button class="btn" type="button" id="mvEditBtn" aria-haspopup="dialog" aria-expanded="false"
+              data-href="<?= e(url('movies/edit', ['id' => (int)$m['id']])) ?>">编辑</button>
       <form method="post" action="<?= e(url('movies/destroy')) ?>"
             onsubmit="return confirm('删除这条观影记录？海报、票根、照片也会一并删除，不可恢复。')">
         <?= csrf_field() ?>
         <input type="hidden" name="id" value="<?= (int)$m['id'] ?>">
-        <button type="submit" class="btn btn-danger">删除</button>
+        <button type="submit" class="btn btn-del">删除</button>
       </form>
     <?php endif; ?>
     <?php /* 设置入口放在 actions 最后 → 永远在最右侧（用户 2026-10-01 要求） */ ?>
-    <a class="btn btn-ghost" href="<?= e(url('movies')) ?>">返回观影</a>
+    <a class="btn" href="<?= e(url('movies')) ?>">返回观影</a>
     <?php $setCurrent = 'show'; $setCanWrite = $canWrite; require __DIR__ . '/_settings_menu.php'; ?>
   </div>
 </div>
@@ -557,3 +572,199 @@ $commentBox = static function (int $reviewId, int $parentId, string $summary) us
 })();
 </script>
 <?php endif; ?>
+
+<?php /* 🔴🔴 v40（用户 2026-10-10）：「观影详情里面的编辑按钮应该也是弹出的，和新增是一样的，
+     编辑完以后，页面动态更新。」
+     ⇒ 详情页内嵌**同一份** `form.php`（编辑态），点「编辑」就地弹出，
+       提交走 AJAX：服务端 302 到详情页 → 前端 fetch 跟到最终页 → 换掉正文容器。
+     ⚠️ 三个开关（含义见 form.php 文件头）：
+        · `$mvModalOnly = true`  → 不输出 page-head / 设置菜单（详情页自己有一个）；
+        · `$mvModalForce = true` → `$isEdit` 也要弹框壳（默认编辑是整页卡片）；
+        · `$mvOpen = false`      → **初始关闭**（用户点「编辑」才开）。
+     ⚠️ 只在**能写**的账号上输出：只读账号点开也提交不了（服务端 requireWrite）。
+     ⚠️ 弹框里那对起止是 antd RangePicker，且是**动态插入**的 ⇒ 打开时必须调
+        `window.fbBootAntd()` 让它挂上（见 app.js 的那个接口说明）。 */ ?>
+<?php if ($canWrite): ?>
+  <?php /* ⚠️ 类名必须**全限定**（`\App\...`）：模板在**全局命名空间**里执行，
+           写 `Person::` 会直接 `Class "Person" not found` —— 那是致命错误，
+           页面从这里**中断输出**（后面整块弹框都不见了，而且不报给用户）。
+           实测就是这么做出来的：探针量到 `#mvAddCard` 不存在。 */ ?>
+  <?php
+  $mvModalOnly   = true;
+  $mvModalForce  = true;
+  $mvOpen        = false;
+  $errors        = [];
+  $people        = \App\Person::roster((int)\App\Auth::familyId(), (int)\App\Auth::personId(), 'member', '');
+  $cinemas       = \App\Cinema::all((int)\App\Auth::familyId());
+  require __DIR__ . '/form.php';
+  unset($mvModalOnly, $mvModalForce, $mvOpen, $errors, $people, $cinemas);
+  ?>
+  <script>
+  /* ---- 详情页「编辑」：弹框 + AJAX 保存 + 保存后动态更新 ----
+     用户原话（2026-10-10）：「观影详情里面的编辑按钮应该也是弹出的，和新增是一样的，
+     编辑完以后，页面动态更新。」
+
+     🔴 关键设计：**事件委托**（监听全部挂在 `document` 上，用选择器判断来源）。
+        为什么不用"取到元素再 addEventListener"：校验失败时服务端会把这整块弹框
+        重画回来（见下面第 2 步），旧元素连它身上的监听一起被丢掉 ——
+        重绑逻辑写一遍容易、写对很难（漏一个入口就是"第二次点编辑没反应"）。
+        委托之后**一次绑定、永久有效**，替换多少次都不用管。
+
+     提交流程：
+       1. `fetch(form.action, {X-Requested-With})` 提交整个 FormData；
+       2. **校验失败** → 服务端回 200 + JSON `{ok:false, modal:'<重画后的弹框>'}`
+          ⇒ 把弹框整块换掉（红字、回填值、附件面板全由模板自己产出，与整页路径**同源**）；
+       3. **成功** → 服务端 302 到 `movies/show`；`fetch` 默认跟重定向，
+          `r.url` 就是详情页 ⇒ 再取一次 HTML、只换正文容器（保留滚动位置、不闪白）。
+     ⚠️ 不用 `redirect:'manual'`：那样拿到的是 opaque 响应（既读不到 Location、
+        也读不到内容），只能猜 URL；跟过去更直接。
+     ⚠️ 换完正文容器要**重跑新页面里的内联 JS**：`innerHTML` 换掉后，
+        灯箱 / 评分 / 评论那些页内脚本绑的事件全丢了。重跑它们最省事也最可靠
+        （那几段本来就有幂等判断，再跑一次不会重复绑定）。 */
+  (function () {
+    if (!window.fetch || !window.FormData) { return; }   // 老浏览器：保持原生整页提交
+    /* 🔴🔴 幂等闸门（必须）：保存成功后我们会把正文容器整块换掉，并**重跑**
+       新页面里那几段内联 JS（否则灯箱 / 评分的事件全丢）。
+       而这段脚本自己也在正文容器里 ⇒ **它会被再跑一遍**。
+       没有这道闸门就会挂上**第二套 document 监听**：
+         · 一次提交被处理两次 → 两个 `fetch` 并发；
+         · 第二个回来时第一个已经把旧弹框换掉了 ⇒ `old.parentNode` 是 null
+           ⇒ 抛错 ⇒ 落进 `.catch` ⇒ 退回 `form.submit()`（整页跳）。
+         实测症状：**校验失败时反而整页跳走、红字完全看不到**（v40 探针连红 3 条）。
+       ⇒ 用 window 上的标记挡住第二次绑定 —— 事件委托本来就是"一次绑定、永久有效"，
+          重跑只需要换掉 DOM，不需要重绑。 */
+    if (window.__fbMovieEditBound) { return; }
+    window.__fbMovieEditBound = true;
+
+    function modal() { return document.getElementById('mvAddCard'); }
+    function setOpen(on) {
+      var m = modal();
+      if (!m) { return; }
+      m.hidden = !on;
+      var b = document.getElementById('mvEditBtn');
+      if (b) { b.setAttribute('aria-expanded', on ? 'true' : 'false'); }
+      if (on) {
+        /* 🔴 弹框是**动态插入**的：日期控件要在这一刻才升级。
+           两步都要 —— 先绑自建下拉（兜底），再挂 antd（正主）。 */
+        if (window.fbUpgradeRange) { window.fbUpgradeRange(); }
+        if (window.fbBootAntd) { window.fbBootAntd(); }
+        var t = document.getElementById('title');
+        if (t) { t.focus(); }
+      }
+    }
+    function antdPanelOpen() {
+      var d = document.querySelector('.ant-picker-dropdown');
+      return !!(d && !d.classList.contains('ant-picker-dropdown-hidden'));
+    }
+    function busy(on) {
+      var s = document.getElementById('mvAddSubmit');
+      if (s) { s.disabled = !!on; s.textContent = on ? '保存中…' : '保存'; }
+    }
+
+    /* ---- 打开 / 关闭（委托） ---- */
+    document.addEventListener('click', function (e) {
+      var t = e.target;
+      if (!t || !t.closest) { return; }
+      if (t.closest('#mvEditBtn')) { e.preventDefault(); setOpen(true); return; }
+      if (t.closest('#mvAddX') || t.closest('#mvAddCancel')) { setOpen(false); return; }
+      var m = modal();
+      if (m && t === m) { setOpen(false); }   // 点遮罩关；点面板内部不关
+    });
+    document.addEventListener('keydown', function (e) {
+      if (e.key !== 'Escape') { return; }
+      var m = modal();
+      if (!m || m.hidden) { return; }
+      if (antdPanelOpen()) { return; }   // 让 antd 先收它自己的面板（v38 的坑）
+      setOpen(false);
+    });
+
+    /* ---- 保存：click 与 submit 两条路都汇到这里 ---- */
+    function save() {
+      var form = document.getElementById('mvForm');
+      if (!form) { return; }
+      busy(true);
+      fetch(form.action, {
+        method: 'POST',
+        body: new FormData(form),
+        headers: { 'X-Requested-With': 'XMLHttpRequest' },
+        credentials: 'same-origin',
+      }).then(function (r) {
+        var ct = (r.headers.get('content-type') || '');
+        if (ct.indexOf('application/json') >= 0) {
+          /* ② 校验失败：整块换成服务端重画的那一份 */
+          return r.json().then(function (j) {
+            var old = modal();
+            if (!old || !j || !j.modal) { return; }
+            var tmp = document.createElement('div');
+            tmp.innerHTML = j.modal;
+            var fresh = tmp.querySelector('#mvAddCard');
+            if (!fresh) { return; }
+            old.parentNode.replaceChild(fresh, old);
+            setOpen(true);      // 换完仍开着（用户正在看它）
+          });
+        }
+        /* ③ 成功：服务端 302 到详情页，`fetch` 已**跟过去** ⇒ `r` 本身就是最终页的响应，
+           直接用它的 body，**不要再 fetch 一次**。
+           🔴🔴 v40 实测教训：多请求那一次会把 **flash 提示吃掉** ——
+              `flash()` 是一次性的（`take_flash()` 读完即清），
+              第二次 GET 时 session 里已经空了
+              ⇒ 用户看到"保存成功了却没有任何提示"（探针红在这条）。
+           ⚠️ 同时也省掉一次整页渲染（详情页不便宜）。 */
+        return r.text()
+          .then(function (html) {
+            var doc = new DOMParser().parseFromString(html, 'text/html');
+            var freshMain = doc.querySelector('main');
+            var curMain = document.querySelector('main');
+            if (!freshMain || !curMain) { window.location.reload(); return; }
+            curMain.innerHTML = freshMain.innerHTML;
+            if (doc.title) { document.title = doc.title; }
+            /* 🔴 只重跑**页内内联**脚本（灯箱、评分、评价表单那几段）——
+               ⚠️ **绝不重跑带 `src` 的外部脚本**（app.js / person_picker.js…）：
+                  那些是库，重复执行会二次绑定全局监听、重建控件，行为不可预测。
+                  判据就用 `old2.src`：有 src 的一律跳过（**不写 `src=""` 的空脚本**，
+                  回退到 `textContent` 那条分支，两者互斥）。 */
+            Array.prototype.forEach.call(doc.querySelectorAll('script'), function (old2) {
+              if (old2.type && old2.type !== 'text/javascript') { return; }
+              if (old2.src) { return; }      // 外部库：跳过（见上）
+              if (!old2.textContent || !old2.textContent.trim()) { return; }
+              var s = document.createElement('script');
+              s.textContent = old2.textContent;
+              document.body.appendChild(s);
+            });
+            /* ⚠️ flash 提示（"已保存。"）**不用手动补** —— 它是正文容器的第一个
+               子元素（见 layout.php），上面整块 innerHTML 替换时已经带过来了。
+               补一次反而会变成两条。 */
+          });
+      }).catch(function () {
+        /* 网络/解析异常：退回原生提交，让服务端把结果整页给出（不静默吞） */
+        busy(false);
+        form.submit();
+      }).then(function () { busy(false); });
+    }
+
+    /* 🔴🔴 为什么两条路都要挂（v40 实测教训）：
+       `#mvAddSubmit` 是 `<button form="mvForm" type="submit">`（在表单**外面**，
+       靠 `form=` 关联）。这种"外部提交按钮"在浏览器里的行为比预想的绕：
+       实测点它时**真的提交了**（请求头上 `X-Requested-With` 是空的、
+       `resource_type=document`），但挂在 `document` 上的 `submit` 监听
+       **没有收到事件** —— 结果是原生整页跳走，校验失败的红字根本看不到。
+       ⇒ 既然"点击"一定发生，就以 **click** 为主路（`preventDefault` 掉原生提交），
+         `submit` 只留着兜**回车提交**（在表单里按 Enter）。
+         两条路都进 `save()`，且 click 已经 `preventDefault` 时不会再触发 submit ⇒ 不会双发。 */
+    document.addEventListener('click', function (ev) {
+      var t = ev.target;
+      if (!t || !t.closest || !t.closest('#mvAddSubmit')) { return; }
+      if (!window.fetch || !window.FormData) { return; }   // 老浏览器：交回原生提交
+      ev.preventDefault();
+      save();
+    });
+    document.addEventListener('submit', function (ev) {
+      var form = ev.target;
+      if (!form || form.id !== 'mvForm') { return; }
+      if (!window.fetch || !window.FormData) { return; }
+      ev.preventDefault();
+      save();
+    });
+  })();
+  </script>
+<?php endif; ?>
diff --git a/templates/movies/stats.php b/templates/movies/stats.php
index 6fba8f0..16cc7c9 100644
--- a/templates/movies/stats.php
+++ b/templates/movies/stats.php
@@ -105,12 +105,17 @@ $wd = static function (?string $d): string {
 
 <div class="chart-card">
   <h3>月度趋势 <span class="hint">最近 12 个月</span></h3>
+  <?php /* 🔴 v40：与年度报告的「月份分布」**用同一套月配**（`MovieStats::MONTH_COLORS`）——
+         同一个月在两个页面必须是同一种颜色，否则用户会以为那是两件不同的事。
+         `$r['ym']` 形如 '2026-10'，取月份部分查色。 */ ?>
   <?php if ($byMonth): ?>
     <div class="bar-chart">
-      <?php foreach ($byMonth as $r): ?>
+      <?php foreach ($byMonth as $r): $ymM = (int)substr((string)$r['ym'], 5, 2); ?>
         <div class="bar-item">
           <span class="bar-label"><?= e((string)$r['ym']) ?></span>
-          <span class="bar-track"><span class="bar-fill bar-fill-green" style="width: <?= e((string)$fmtPct((int)$r['cnt'], $maxMonth)) ?>%"></span></span>
+          <span class="bar-track"><span class="bar-fill"
+                style="width: <?= e((string)$fmtPct((int)$r['cnt'], $maxMonth)) ?>%;
+                       background: <?= e(\App\MovieStats::monthColor($ymM)) ?>"></span></span>
           <span class="bar-count"><?= (int)$r['cnt'] ?></span>
         </div>
       <?php endforeach; ?>