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>` 同类**）—— 已把注释里的
标签字面量全部改写。⇒ 通识：模板注释里不要出现字面标签名。
This commit is contained in:
@@ -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%; }
|
||||
|
||||
Reference in New Issue
Block a user