laoyang/FamilyBook
1
0
Fork 0
Code Issues 29 Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
用户原话（九条）：
  ①「观影详情页面左上角的观影记录，应该和观影的列表页面里面保持一致」
  ②「观影详情页面的编辑，还有返回观影的按钮，应该和观影列表页面里面的记一场电影保持一致」
  ③「删除按钮就用红色背景颜色」
  ④「观影详情里面的编辑按钮应该也是弹出的，和新增是一样的，编辑完以后，页面动态更新」
  ⑤「影院管理部分，注意控制列的宽度…最右侧的操作、编辑和删除两个按钮，已经被挤成两行了，
     尝试让编辑和删除排在一行，宽度给它留够」
  ⑥「编辑使用蓝色的背景，删除使用红色的背景」
  ⑦「高级搜索里面的日期范围，也使用我们最新的控件」
  ⑧「观影统计里面，如果这个人在名册里面，但是他一部电影的记录也没有，就不要在下面的这个
     按观影人统计里面出现了，太长了」
  ⑨「观影统计里面，月份分布和星期分布，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>` 同类**）—— 已把注释里的
  标签字面量全部改写。⇒ 通识：模板注释里不要出现字面标签名。
This commit is contained in:
laoyang
2026-10-10 22:13:20 +08:00
parent f8b1b96fd7
commit f9e30bd7d8
11 changed files with 620 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/movies/cinemas.php
+22 -7
View File
@@ -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>
templates/movies/form.php
+23 -9
View File
@@ -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（仅弹框形态） */ ?>
templates/movies/report.php
+12 -2
View File
@@ -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; ?>
templates/movies/search.php
+11 -4
View File
@@ -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>
templates/movies/show.php
+215 -4
View File
@@ -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; ?>
templates/movies/stats.php
+7 -2
View File
@@ -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; ?>