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

v38 第 38 批：观影试点 Ant Design 日期控件 + 弹框内联排版（对齐）+ 去提示 + 默认带自己

Browse Source 
用户原话（四条）：
  ①「我终于找到了一个我比较认可的日期选择插件
     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 人时会误报"无法验证多选"，已把实际候选数打出来。
This commit is contained in:
laoyang
2026-10-10 11:01:22 +08:00
parent d83c94e127
commit 8661ab6475
9 changed files with 1003 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/app.css
+146
View File
@@ -5144,3 +5144,149 @@ h5.md-h, h6.md-h { font-size: 14px; }
@media (max-width: 560px) {
.cal-modal .form-grid { grid-template-columns: 1fr; }
}
/* ============================================================================
v38(2026-10-10) 观影"记一场电影"弹框：标签内联排版 + Ant Design 日期控件
----------------------------------------------------------------------------
用户原话（两条，一起改的）：
「记录一场电影，这个弹框因为标题和下面的输入框都是两行的，所以导致弹框非常长。
能不能排排版，让前面的标题后面加个冒号，后面的输入框直接跟在它后面，
这样就变成一行。包括开始、结束时间、影院、同行的人、简介等等，能把它排成
一行的都排成一行，但是一定要注意对齐的问题，如果不对齐的话可能不好看。」
「我终于找到了一个我比较认可的日期选择插件
https://ant-design.antgroup.com/components/date-picker-cn 现在观影这个模块
进行测试吧…等这个模块测试完没问题了，再更新到其他的模块。」
============================================================================ */
/* ---- ① 「标签：控件」内联网格 ----
🔴 对齐靠的是**固定宽度的标签列**（62px + 右对齐），不是靠调间距 ——
标签长短差很多（片名/时间/影院/同行的人），但它们冒号后的控件左缘
必须落在同一条竖线上，看起来才整齐。
⚠️ 标签**自带冒号**（CSS 的 ::after 给）—— 让每个模板都手写"："迟早漏一个。
⚠️ `> .mv-lb` 而**不是** `.mv-row label`：后者会把同行人那排 checkbox 的
小标签一起卷进来（它们不是"字段标签"）。 */
.mv-grid { display: flex; flex-direction: column; gap: 12px; }
.mv-row { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.mv-row > .mv-lb {
flex: 0 0 62px; width: 62px; /* 固定宽 = 对齐的基准 */
text-align: right; padding-top: 9px; /* 与 40px 高输入框的文字基线对齐 */
font-size: 14px; font-weight: 600; color: var(--ink);
line-height: 1.4; word-break: keep-all;
}
.mv-row > .mv-lb::after { content: '：'; font-weight: 400; color: var(--muted); }
/* 必填星号：跟在标签文字后、冒号前 */
.mv-row > .mv-lb > i { font-style: normal; color: var(--red, #C0392B); margin-left: 1px; }
/* 控件区：占满剩余宽度（min-width:0 让它能被压缩，不会把标签挤出去） */
.mv-row > *:not(.mv-lb) { flex: 1 1 auto; min-width: 0; }
/* 片名那一行：输入框 + 「自动获取」按钮并排 */
.mv-row .db-title-row { display: flex; gap: 8px; align-items: center; }
.mv-row .db-title-row .input { flex: 1 1 auto; min-width: 0; }
.mv-row .db-title-row .btn { flex: 0 0 auto; }
/* 影院那一行：自定义下拉 + 「新建影院」并排 */
.mv-row .cinema-select-row { display: flex; gap: 8px; align-items: center; }
.mv-row .cinema-select-row .cs { flex: 1 1 auto; min-width: 0; }
/* 时间那一行是 `.mv-row.dt-range`：它既是"标签+控件"的行，又是**范围组**。
⚠️ 这两重身份会打架：`.dt-range.dt-cols` 是 `flex-direction: row`，
会把标签也当成"一个端点"排进去。⇒ 这里把它拉回"标签一行、两端在下"，
标签仍占固定 62px（与上面的字段对齐）。 */
.mv-row.dt-range.dt-cols { flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
.mv-row.dt-range.dt-cols > .dt-range-label { flex: 0 0 62px; width: 62px; }
/* 🔴 v38 对齐修正（真机量出来的 8px 偏差）：
`.dt-cols` 是 `gap: 10px 18px`（行距 10 / **列距 18**），而普通 `.mv-row`
只有 `gap: 10px`。于是"标签 → 控件"这段在时间行是 18px、在别的行是 10px
⇒ 控件左缘差了 8px（实测 452 vs 444），一眼就看得出没对齐。
⇒ 时间行的列距拉回 10px，与别的行一致。 */
.mv-row.dt-range.dt-cols { column-gap: 10px; }
/* 两端并排（沿用 v37 的 .dt-cols 规则），并**从标签右边开始** */
.mv-row.dt-range.dt-cols > .dt-input {
flex: 1 1 0; min-width: 220px; margin-top: 2px;
}
.mv-row.dt-range .err { flex: 1 1 100%; margin-left: 72px; }
/* 海报 / 观影照片：**标签一行、内容另起一行**（不用 .mv-row）。
🔴 为什么不能跟上面的字段一样"标签在左、控件在右"（真机量出来的）：
这两块的控件区里有好几个东西，而且 `_stage_drop.php` 会在最前面插一个
`.sr-only` 的 `<input>`（绝对定位、1px）。按 flex 排的话，那个 1px 的隐框
会占掉一整份 `flex:1 1 auto`，把真正的上传框**推到 130px 之外**
（实测：左缘 443 vs 隔壁 573 —— 一眼就是歪的）。
⇒ 纵向结构最省心：内容从**标签列右侧**（72px = 62 标签 + 10 间距）开始，
与上面各行的控件左缘**同一条竖线**。 */
.mv-grid-media { margin-top: 2px; gap: 14px; }
.mv-media { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.mv-media > .mv-lb { flex: 0 0 auto; width: auto; text-align: left; padding-top: 0; }
.mv-media-body { margin-left: 72px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.mv-media-body .photo-grid { margin-top: 0; }
/* ⚠️ `.sr-only` 是**绝对定位**的（见 .sr-only 的定义）；它不该影响任何布局。
这里再钉一次"不参与 flex 分配"，免得又被当成一个控件。 */
.mv-media-body > .sr-only,
.mv-row > .sr-only { position: absolute; flex: 0 0 0; }
/* ---- ② Ant Design RangePicker 的外观对齐 ----
目标是"看起来就是站内的一个输入框"，而不是"嵌进来一个外来控件"：
同高(40px)、同圆角、同描边、同纸色。 */
.dt-antd { flex: 1 1 auto; min-width: 0; }
.dt-antd .ant-picker {
width: 100%; height: 40px; padding: 0 11px;
border: 1px solid var(--line); border-radius: var(--radius-s);
background: var(--surface); box-shadow: none;
}
.dt-antd .ant-picker:hover { border-color: var(--brand-2); }
.dt-antd .ant-picker-focused { border-color: var(--brand); box-shadow: none; }
.dt-antd .ant-picker-input > input { font: inherit; font-size: 14px; color: var(--ink); }
/* 品牌色覆盖：让 antd 的选中/主色跟着模块色走（与 Semi 那次同一思路） */
.dt-antd .ant-picker-range-separator { color: var(--muted); }
.dt-antd .ant-picker-cell-in-view.ant-picker-cell-selected .ant-picker-cell-inner,
.dt-antd .ant-picker-cell-in-view.ant-picker-cell-range-start .ant-picker-cell-inner,
.dt-antd .ant-picker-cell-in-view.ant-picker-cell-range-end .ant-picker-cell-inner {
background: var(--brand) !important;
}
/* 中间的"区间底色"用模块色的浅版 */
.dt-antd .ant-picker-cell-in-view.ant-picker-cell-in-range::before,
.dt-antd .ant-picker-cell-in-view.ant-picker-cell-range-hover::before {
background: color-mix(in srgb, var(--brand) 12%, transparent) !important;
}
.dt-antd .ant-picker-time-panel-column > li.ant-picker-time-panel-cell-selected .ant-picker-time-panel-cell-inner {
background: color-mix(in srgb, var(--brand) 14%, transparent) !important;
}
.dt-antd .ant-btn-primary { background: var(--brand); border-color: var(--brand); }
.dt-antd .ant-btn-primary:hover { background: var(--brand-2) !important; border-color: var(--brand-2) !important; }
/* 面板：跟着纸色（antd 默认是纯白 + 冷灰边） */
.dt-antd .ant-picker-dropdown .ant-picker-panel-container {
border: 1px solid var(--line); box-shadow: var(--shadow-l, 0 10px 30px rgba(0,0,0,.14));
}
/* 面板整体跟着模块色（antd 的 CSS-in-JS 变量） */
.ant-picker-dropdown {
--ant-color-primary: var(--brand, #A84A28);
--ant-color-primary-hover: var(--brand-2, #C05F38);
}
/* ⚠️ 挂上 antd 之后：**原生那对下拉收起来**（它们仍然在 DOM 里当值载体）。
⚠️ 用 visibility+绝对定位而不是 display:none —— 见 v37 那次的教训：
display:none 的控件在表单校验时不可聚焦；这里虽然已摘掉 required，
但保持"可聚焦"更稳（免得将来再加必填时又踩同一个坑）。 */
.dt-range.is-antd > .dt-input {
position: absolute; width: 1px; height: 1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
border: 0; padding: 0; margin: -1px;
}
/* 窄屏：标签列收窄，别把输入框挤没了 */
@media (max-width: 560px) {
.mv-row > .mv-lb,
.mv-row.dt-range.dt-cols > .dt-range-label { flex: 0 0 52px; width: 52px; font-size: 13px; }
}
/* ---- v38 ②：能并排的都并排（用户：「能把它排成一行的都排成一行」）----
两处成对的字段：简介+备注、海报+观影照片。
⚠️ 用 **grid 两列**而不是 flex-basis：fr 单位保证两列**永远等宽**，
不会因为左边内容天然更宽（比如海报的图）就把右边挤窄 —— 那正是"不对齐"。
⚠️ 窄屏（≤560px）回到单列：手机上一行放两个多行文本框会窄到没法用。 */
.mv-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; }
.mv-pair > .mv-row, .mv-pair > .mv-media { min-width: 0; }
/* 并排里每块自己的标签列窄一点（总宽只有一半了） */
.mv-pair > .mv-row > .mv-lb { flex: 0 0 52px; width: 52px; }
/* 并排里的媒体块：内容不再缩进 72px（本来就只占半列，再缩就没宽度了） */
.mv-pair > .mv-media > .mv-media-body { margin-left: 0; }
@media (max-width: 560px) {
.mv-pair { grid-template-columns: 1fr; }
.mv-pair > .mv-row > .mv-lb { flex: 0 0 62px; width: 62px; }
}