b45cf671d1c1340547da094f9d28269260a5c6be
2
Commits
| Author | SHA1 | Message | Date | |
|---|---|---|---|---|
 laoyang
|
f8b1b96fd7 |
v39 第 39 批：观影弹框（antd 中文化 + 影院搜索 + 简介备注各占一行 + 海报照片对齐）
用户原话（四条）：
①「观影模块的时间控件，比如说时间呀，还有下面的确定按钮啊。现在显示的都是英文，
应该给它设置成中文。」
②「影院那个地方应该有一个搜索的功能，下拉的地方上面有一个搜索筛选的功能。」
③「简介和备注不要放在一行，也就是说一个字段它就占一行。所以简介后面是一行，
备注后面是一行。」
④「海报和观影照片为什么和上面的标题不一样呢？海报的字体和简介是一样的，也带一个冒号。
然后把后面点击或拖动进行上传往后放，和简介后面的输入框保持一样大小。观影照片也是
类似的，观影照片也是加粗。和简介的字体保持一致，不带冒号，后面放上点击或拖动进行上传。」
① antd 中文化 —— 三个条件缺一不可（缺任一条按钮就还是英文）
· 🔴 **英文的真根因**：`antd.min.js` 这个产物**不含 locale 包**
（实测 `window.antd.locales` 是 undefined）⇒ 只能用它内置的英文默认值。
**换文件**才解决，不是加参数 ⇒ 改用 `antd-with-locales.min.js`
（多带各语言包，全局多挂 `antd.locales`，`antd.locales.zh_CN` 即简体中文包）。
· 🔴 dayjs 的中文 locale 是**单独一个文件**（核心包只有 en）⇒ 引 `dayjs-zh-cn.js`
并调 `dayjs.locale('zh-cn')`（星期/月份由 dayjs 出）。
· 🔴 必须用 `<ConfigProvider locale={zh_CN}>` 包住控件 —— antd 读的是**上下文里的**
locale，不包的话**日历文字会变中文、按钮却仍是英文**（最容易误判成"已经中文化了"）。
· 独立探针 `_tooling/_antd_probe/{zh.html,zh_probe.py}` 9/0 把这三条钉死。
· 删除不再引用的 `assets/vendor/antd/antd.min.js`（1.5MB 冗余，留着会让
"两个 antd 哪个是真的"变成下一个坑）；部署断言改为钉四资源 + ConfigProvider + zh-cn。
② 影院下拉加搜索筛选
· 搜索框放在弹出列表**内部**（`.cs-search` 吸顶），打开下拉**即聚焦**；回车选第一项。
· 🔴 `.cs-item[hidden] { display: none; }` **必须显式写** —— `.cs-item` 自己声明了
`display:flex`，会盖过浏览器默认的 `[hidden]{display:none}` ⇒ 过滤"看着完全没生效"
（项目第 11 批选人组件踩过同一个坑）。
· 三个事件都 stopPropagation，否则冒到 document 的"点外面关"⇒ 一点搜索框下拉就没了。
· 「不记录影院」恒保留（清空选择的出口）；收起时清空搜索词（否则下次带着旧过滤）。
③ 简介 / 备注各占一行
· 撤销 v38 的 `.mv-pair` 并排（半宽的多行文本框每行都换行，更难读）；
CSS 与模板里的并排容器**全部清干净**。
④ 海报 / 观影照片与简介对齐 —— 它们本来就不需要特殊规则
· 用户看到的"更窄/不一样"有两个原因：① 海报那块被误包进 `.mv-grid.mv-pair`
且**里面只有一个孩子** ⇒ grid 两列让它只占**半宽**；② 标签被一条
"宽度自适应、左对齐"的规则覆盖掉了固定 62px 右对齐 + 冒号。
· ⇒ 两块都改成普通 `.mv-row.mv-row-media`，标签用 `.mv-lb`（**继承**简介那套），
内容包 `.mv-media-body`（占满剩余）；观影照片标签加 `.no-colon`。
实测：所有控件左缘 **424**、宽度 **624**，与简介**完全一致**。
· 🔴🔴 **通识**：v38 的 `.mv-media`（手填 margin-left:72px）是**被一个取错元素的
探针误导出来的** —— 它按文档序取"第一个非标签子元素"，而 `_stage_drop.php` 吐的
`.sr-only` 文件框是 `position:absolute`（**脱离文档流、不参与 flex**），却被算成
"控件"，于是得出"1px 隐框把上传框推走 130px"的**假结论**。
⇒ "对齐"类断言必须取直接子元素、且只取真正参与布局的那个；量到反常数字先怀疑探针。
验证（全部真机 + 反向验证）：
· _fb_b39_movie.py **39/0**（中文化三条 + 搜索框打开即聚焦/输入即过滤/无匹配空态/
点搜索框不关下拉/回车选中/重开已清词 + 简介备注各占一行且占整行宽 +
海报照片标签字重字号同简介/海报带冒号/照片不带/上传框左缘与宽度同简介）；
· _fb_b39_narrow.py **21/0**（宽 1440 / 平板 768 / 窄屏 390：不横向溢出、
标签与控件仍同行、影院下拉不出视口、搜索框可用）；
· _fb_b39_falsify.py **14/0**（四处各自证伪成功：拿掉 ConfigProvider→按钮变英文、
藏起搜索框→②红、塞回两列并排→③红、标签退回普通 span→④红；复原回全绿）；
· v38 两套按 v39 更新后 **36/0**（新增"已无 mv-pair / 主列 6 行"）；
v38 的旧窄屏套件（断言"简介备注并排"）已作废删除，由 v39 窄屏完全覆盖；
· 全路由 e2e **1503/0**、日期控件真机 **53/0** + 反向 **7/0**、v37 两套、
观影照片两套、b30 三件套、各批真机与 DAV 三套、部署静态断言空跑 —— 全绿；
· 线上四个 antd 资源 HTTP **200 可达**；app.js / app.css / form.php / layout.php
的 SHA256 与本地**逐字节一致**。
⚠️ 顺带修的探针/夹具问题（都不是页面 bug）：
· 夹具库重铺后 `cinemas` 是**空的** ⇒ v39 探针**自带播种**（造两家影院），
不再依赖别的套件先跑过（与 v38 的"名册只有 1 人"同类：页面没问题，是夹具没数据）；
· 部署断言第一版按裸词 grep `mv-pair`，把注释里那句"已撤销 .mv-pair"当成回归
⇒ 改为只认 `class="...mv-pair..."` 这种**真的类名用法**；
· v39 探针第一版判"简介/备注各占一行"看的是"是不是同一个 DOM 节点"——
那个在**并排**时也是 false（并排仍是两个 .mv-row），连并排都抓不住
（反向验证当场抓到 13/1）⇒ 改为按**垂直位置**判（top 相差 ≥20px）。
|
||
|
laoyang
|
8661ab6475 |
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 人时会误报"无法验证多选"，已把实际候选数打出来。
|