用户原话(九条):
①「观影详情页面左上角的观影记录,应该和观影的列表页面里面保持一致」
②「观影详情页面的编辑,还有返回观影的按钮,应该和观影列表页面里面的记一场电影保持一致」
③「删除按钮就用红色背景颜色」
④「观影详情里面的编辑按钮应该也是弹出的,和新增是一样的,编辑完以后,页面动态更新」
⑤「影院管理部分,注意控制列的宽度…最右侧的操作、编辑和删除两个按钮,已经被挤成两行了,
尝试让编辑和删除排在一行,宽度给它留够」
⑥「编辑使用蓝色的背景,删除使用红色的背景」
⑦「高级搜索里面的日期范围,也使用我们最新的控件」
⑧「观影统计里面,如果这个人在名册里面,但是他一部电影的记录也没有,就不要在下面的这个
按观影人统计里面出现了,太长了」
⑨「观影统计里面,月份分布和星期分布,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>` 同类**)—— 已把注释里的
标签字面量全部改写。⇒ 通识:模板注释里不要出现字面标签名。
121 lines
5.4 KiB
PHP
121 lines
5.4 KiB
PHP
<?php
|
||
/**
|
||
* 高级搜索(v11,从 MovieLog search.php 迁入)。
|
||
*
|
||
* 与观影列表页顶部那个「一个关键词搜所有字段」的搜索栏不同:这里是**组合条件**——
|
||
* 片名 / 影院 / 观影人 / 日期范围 可以任意叠加,且观影人、影院是从下拉里点名选。
|
||
* 一个条件都不给时不查询,页面提示「先设置条件」(否则条件全空 = 全表,看着像卡了)。
|
||
*/
|
||
?>
|
||
<div class="page-head">
|
||
<h1>高级搜索</h1>
|
||
<span class="sub">组合多个条件精确查找</span>
|
||
<div class="actions">
|
||
<a class="btn btn-ghost" href="<?= e(url('movies')) ?>">返回观影</a>
|
||
<?php $setCurrent = 'search'; $setCanWrite = \App\Auth::canWrite(); require __DIR__ . '/_settings_menu.php'; ?>
|
||
</div>
|
||
</div>
|
||
|
||
<form method="get" action="index.php" class="card card-pad adv-form">
|
||
<input type="hidden" name="r" value="movies/search">
|
||
<div class="form-grid">
|
||
<div class="field">
|
||
<label for="title">片名</label>
|
||
<input class="input" id="title" name="title" value="<?= e($p['title']) ?>" placeholder="输入片名的一部分即可">
|
||
</div>
|
||
<div class="field">
|
||
<label for="cinema_id">影院</label>
|
||
<select class="select" id="cinema_id" name="cinema_id">
|
||
<option value="0">全部影院</option>
|
||
<?php foreach ($cinemas as $c): ?>
|
||
<option value="<?= (int)$c['id'] ?>" <?= (int)$p['cinema_id'] === (int)$c['id'] ? 'selected' : '' ?>>
|
||
<?= e(trim(((string)($c['place'] ?? '') !== '' ? $c['place'] . ' · ' : '') . $c['name'])) ?>
|
||
</option>
|
||
<?php endforeach; ?>
|
||
</select>
|
||
</div>
|
||
<div class="field">
|
||
<label>观影人</label>
|
||
<?php /* 筛选用的单选:要留一个「不选」= 全部,所以开 $ppAllowEmpty */ ?>
|
||
<?php
|
||
$ppName = 'person_id';
|
||
$ppPeople = $persons;
|
||
$ppSelected = [(int)$p['person_id']];
|
||
$ppMode = 'single';
|
||
$ppAllowEmpty = true;
|
||
$ppOpenBtn = '选择观影人';
|
||
$ppTitle = '按观影人筛选';
|
||
$ppEmptyText = '全部观影人';
|
||
require __DIR__ . '/../_person_picker.php';
|
||
?>
|
||
</div>
|
||
<?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" 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']) ?>" aria-label="结束日期">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="btn-row">
|
||
<button type="submit" class="btn">搜索</button>
|
||
<a class="btn btn-ghost" href="<?= e(url('movies/search')) ?>">清空条件</a>
|
||
</div>
|
||
</form>
|
||
|
||
<?php if (!$hasCond): ?>
|
||
<div class="card card-pad empty">
|
||
<b>先设置一个条件</b>
|
||
填上片名、挑一家影院、指定某个人,或者框一段日期,再点「搜索」。
|
||
</div>
|
||
<?php else: ?>
|
||
<div class="results-head">
|
||
<h3>搜索结果</h3>
|
||
<span class="sub">共 <?= count($rows) ?> 部</span>
|
||
</div>
|
||
<?php if (!$rows): ?>
|
||
<div class="card card-pad empty">
|
||
<b>没有找到符合条件的电影</b>
|
||
放宽一点条件再试。
|
||
</div>
|
||
<?php else: ?>
|
||
<div class="waterfall">
|
||
<?php foreach ($rows as $mv): ?>
|
||
<a class="movie-card" href="<?= e(url('movies/show', ['id' => (int)$mv['id']])) ?>">
|
||
<span class="card-image">
|
||
<?php if (!empty($mv['poster_key'])): ?>
|
||
<img src="<?= e(media_url($mv['poster_key'])) ?>" alt="<?= e($mv['title']) ?>" loading="lazy">
|
||
<?php else: ?>
|
||
<span class="placeholder-poster">
|
||
<span class="ph-icon" aria-hidden="true">影</span>
|
||
<span class="placeholder-title"><?= e($mv['title']) ?></span>
|
||
</span>
|
||
<?php endif; ?>
|
||
</span>
|
||
<span class="card-body">
|
||
<span class="card-title"><?= e($mv['title']) ?></span>
|
||
<span class="card-meta">
|
||
<span>📅 <?= e(\App\Movie::formatWatch($mv['starts_at'], $mv['ends_at'] ?? null)) ?></span>
|
||
<?php if (!empty($mv['cinema_name'])): ?>
|
||
<span style="color: <?= e((string)($mv['cinema_color'] ?: '#888888')) ?>">🏛️ <?= e($mv['cinema_name']) ?></span>
|
||
<?php endif; ?>
|
||
</span>
|
||
<?php if (!empty($mv['attendees'])): ?>
|
||
<span class="card-viewers">
|
||
<?php foreach ($mv['attendees'] as $a): ?><?= person_chip($a) ?><?php endforeach; ?>
|
||
</span>
|
||
<?php endif; ?>
|
||
</span>
|
||
</a>
|
||
<?php endforeach; ?>
|
||
</div>
|
||
<?php endif; ?>
|
||
<?php endif; ?>
|