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

v37 第 37 批：日期控件换成「年/月/日 + 时/分」五个原生下拉 + 五处界面重做

Browse Source 
用户原话（6 条，一次给全）：
  ①「观影详情页面。观影图片下面有一个块…要加照片请点上方「编辑」…这个块不要，
     直接把这个块删除。」
  ②「编辑页面的时间…选日期的这个控件非常非常不好用。就是如果我把年和月那个地方
     拉下来，我选完年和月之后，它并不会回到让我选日的那个界面，它还是不动的…
     要么换一个控件，要么在那个地方加一个确定按钮…现在开始和结束时间分在了两行…
     能放得下的话就应该放一排…不要让它默认显示在两行上…"散场时间可不填。"这句话去掉。」
  ③「首页上今天的日程…分了几列，列之间的空隙非常非常的大…日程里面的那两个色块
     就是紧挨着的。所以…应该让它们紧挨着。」
  ④「现在怎么部署的时间这么长？…你修改了哪些页面，你就只测试哪些页面就可以了。」
  ⑤「日程模块的新建日程…"加上"和"取消"两个按钮在右上角，离得特别远，根本看不到…
     每个输入框前面的标题都太小了…都应该加粗、变大。」
  ⑥「1.新建任务的截止时间，也和观影一致。2.新建任务时竟然没有添加附件…
     3.新建任务也弹出一个框，新建完之后刷新看板页面。4.观影新增也弹框输入所有信息。」

② 日期控件：**真根因是"这个控件给不了"**
  `<input type="date">` 的日历弹层由**浏览器自己画**，我们碰不到 DOM、也控制不了流程；
  Chrome 在"点顶部 `2026年 10月` 切到年月视图"之后，要靠用户**再点一次日期或按 Esc**
  才回得到日期视图，各家还不一致 ⇒ 用户遇到的"选完年月就卡住、选不了日"。
  修：`_datetime.php` 重写成 **年 / 月 / 日 三个原生 <select> + 时 / 分**，
  选完即生效、无需"确定"；秒默认去掉（用户"只记录到时和分"）。
  ⚠️ 提交契约**一字未改**：`*_date` 仍是真字段（改 `type=hidden`）+ `*_hour/_minute`。
  ⚠️ `required` 落在隐藏控件上会让 Chrome 报 "not focusable"（点保存什么都不发生）
     ⇒ 改用 `data-dt-required` 声明、JS 自查（12 个调用点全部受影响）。
  起止两端：`.dt-range.dt-cols` + `flex-wrap` → **宽屏一行、窄屏自动换行**
  （不用 JS 量宽度：字体/动画/缩放时量不准，flex-wrap 是浏览器布局的一部分）。
  🔴 顺带挖出真 bug：旅程「修正」表单的 `.dt-range` 只有 **22px 宽**
     —— 它长在 `.node-ops`（一排小按钮的容器）里，展开的内容只有"修正"两个字那么宽。
     修：`.rev-panel{position:absolute}` 纯 CSS 浮出来（不动 DOM，避免牵动节点列表排版）。

③ 首页冲突色块"空隙特别大"：与日历页逐字对比出来的
  日历页 `left: calc(2px + L%)` / `width: calc(W% - 4px)` → 只留 4px、紧挨；
  首页却写死 `calc(46px + L%)` / `calc(W% - 50px)` —— 每块左右各扣 23/25px，
  两列时那 46px **没法均分**、全挤进了中间的缝（实测 ≈50px）。
  修：`left: calc(46px + L% + 2px)` / `width: calc(W% - 4px)` → 缝恒为 4px。

⑤ 日程弹框"按钮看不到"：**两个**根因叠加
  ① `calendar/index.php` 里**多写了一个 `</div>`** —— `.cal-modal-panel` 被提前闭合，
     底栏 `<div class="cal-modal-foot">` 成了 `.cal-modal` 的直接子元素、被挤到面板外；
  ② `.cal-modal-panel` 是 flex 列，但**它下面的 `<form>` 不是** →
     `.cal-modal-body{flex:1 1 auto}` 的上下文只到 form 为止，body 压不下去也不滚。
  另有 `.cal-modal-panel` 的 max-height 没算上 `.cal-modal` 自己的 padding（差 4px）。
  三处都修；标签只对**弹框里**的 `.field > label` 加粗放大（14px/600/深色）。

⑥ 任务新建：内联卡片 → 弹框；**新增附件**（`attach[]`，服务端零改动能收）；
  `back=tasks` → 新建完回**看板**刷新。观影新增：列表页内嵌同一份 form.php 弹框。

① 详情页删掉那句提示块。④ 流水线改**增量**：`run_suite_if <标签>` + 从 git 改动
  推模块；**一碰共用件就退回全量**（app.js/app.css/layout/index.php/_datetime.php…），
  认不出来也全量（保守：少跑一段发坏东西的代价远大于多跑十分钟）。

🔴🔴 本轮最值得记的教训：**DOM 嵌套错误比语法错误难查得多**
  在 movies/form.php 与 calendar/index.php 各写坏一次嵌套（多/少 `</div>`、多 `</form>`），
  两处**都通过 php -l、页面也打得开**，症状却是"按钮跑到面板外"与
  "编辑保存静默失效"（保存键落到 form 外面）。⇒ 模板里 `<?php if ?>` 与 `</div>`
  必须**按分支配对**，改完用真机渲染 dump 一次 div 深度；光靠 php -l 发现不了。

验证（全部真机 + 反向验证）：
  · _fb_b34_dtrange.py **61/0**（四个页面：年/月/日/时/分 都可见可点 +
    选完三个下拉**立刻**写回 *_date + 改月重建"日"列 + 起止默认同一行 + 无 JS 报错）；
  · _fb_b34_dtrange_falsify **7/0**（三处注入各自必须变红）；
  · _fb_b37_ui.py **27/0**（详情页无提示块 / 首页冲突缝 ≤8px / 弹框按钮在面板内且在
    视口内 / 标签加粗 / 任务弹框+附件+回看板 / 观影列表页弹框）；
  · _fb_b37_falsify **5/0**；
  · _fb_b35_movie_media.py **16/0**、_fb_geom_interact **109/0**、e2e **1503/0**、
    b30_ui2 16/0（含首页冲突分列）、_b30_import 26/0、b18/b21/b23/…全绿、
    DAV 三套全绿、部署静态断言空跑通过；
  · 线上 app.js / app.css / movies/form.php / calendar/index.php 的 SHA256 与本地一致。
  · 顺带修掉 _b30_import 的一个**时序竞争**：它用外部上游（联想词服务）的二次探测
    当对照，浏览器取词在前、探测在后，上游抖一下会误报成"回归"（已改成两次确认）。
This commit is contained in:
laoyang
2026-10-10 00:26:42 +08:00
parent 2fda455a59
commit d83c94e127
14 changed files with 693 additions and 328 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/app.css
+195 -135
View File
@@ -584,126 +584,126 @@ textarea.input { min-height: 76px; resize: vertical; }
.search { display: flex; gap: 8px; margin-bottom: 16px; }
.search .input { max-width: 260px; }
/* ---------------- 日期 + 时:分:秒 组合控件（templates/_datetime.php） ----------------
原生 datetime-local 的显示格式由浏览器 UI 语言/系统时间格式决定，
中文环境渲染成「下午 03:30」且没有秒，所以自己拼一个。
日期部分仍是原生 date 控件 → app.js 的 showPicker 让它整框可点。 */
/* ============================================================================
日期 + 时:分 组合控件（templates/_datetime.php）—— v37 重做
----------------------------------------------------------------------------
形态（用户 2026-10-09 第 4 次反馈点名要的）：
日期 = 年 / 月 / 日 三个原生下拉；时间 = 时 : 分 两个原生下拉。
起止两端默认同一行，放不下时自动换到下一行（flex-wrap，见 .dt-cols）。
为什么把浏览器自带的 <input type=date> 换掉：
它的日历弹层是浏览器自己画的，我们碰不到 DOM、也控制不了流程；
Chrome 在"点顶部 2026年 10月 切到年月视图"之后要靠用户再点一次日期或
按 Esc 才回得到日期视图，各家还不一致 → 用户遇到的就是"选完年月就卡住、
选不了日"。三个原生下拉选完即生效，不需要任何确定按钮。
这一整段不再有"未升级就藏原生控件"的逻辑（v24~v36 有过）。
服务端给的就是最终形态，JS 只负责绑事件 —— 所以"JS 没跑 / 加载失败"时
控件依然完整可用，不是"骨架占位"。
============================================================================ */
.dt-input { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* v24 第 9 批 #9：Semi DatePicker 升级态 —— .dt-native 是 display:contents（不干扰
flex 布局），升级成功后由 app.js 内联 display:none 藏掉；.dt-semi 顶上同一格。 */
.dt-input .dt-native { display: contents; }
/* ---- v24 第 12 批 #2：消除「先闪原生框、再变 Semi」----
html.js 由 <head> 里的内联脚本立刻加上（见 layout.php 的 no-js/js 二态）。
有 JS 时：原生控件**从一开始就不显示**，等 Semi 就绪（app.js 加 .is-semi）再露出。
没 JS 时（html 仍是 no-js）：什么都不藏，原生控件照旧可用 —— 渐进增强的兜底不变。
⚠️ 用 visibility:hidden 而不是 display:none —— 保留元素占位高度，
否则升级完成的那一瞬表单会"跳"一下（高度从 0 变 40px）。 */
html.js .dt-input:not(.is-semi) .dt-native { visibility: hidden; }
/* 🔴🔴 v36：`.is-native` 态下，原生控件**必须可见**。
用 `!important` 是**故意**的：v35 那次就是被
`html.js .dt-input:not(.is-semi) .dt-native{visibility:hidden}`
（特异性 0,3,0，比我那条覆盖规则更强/更早）又藏回了 hidden ——
用户看到"一片空白、点不到"，而探针因为用错判据（offsetParent）还"全绿"两轮。
⇒ 这条用 `!important` 一次性钉死，别再让任何历史规则把它藏起来。 */
html.js .dt-input.is-native .dt-native { visibility: visible !important; }
html.js .dt-input.is-native::after { display: none !important; }
html.js .dt-range.is-native-range .dt-input { visibility: visible !important; }
html.js .dt-range.is-native-range > .dt-range-label { visibility: visible !important; }
html.js .dt-range.is-native-range::before { display: none !important; }
html.js .dt-range.is-native-range > .dt-input,
html.js .dt-range.is-native-range > .field { display: flex !important; }
/* ⚠️ v24 第 21 批 第 7 条：两端现在各自被 `.field` 包着，所以选择器要跟着下沉一层。
写成 `> .dt-input` 的话这条**永远不会命中** → 未升级时原生控件照旧可见，
与下面那块"占位骨架"叠在一起，会看到两套控件重影。 */
html.js .dt-range:not(.is-semi-range) .dt-input { visibility: hidden; }
html.js .dt-range:not(.is-semi-range) > .dt-range-label { visibility: hidden; }
/* Semi 未就绪前，先给一个同高的"占位骨架"，让表单高度在升级前后保持一致 */
html.js .dt-input:not(.is-semi)::after {
content: ''; display: block; flex: 1 1 150px; height: 40px;
border: 1px solid var(--line); border-radius: var(--radius-s);
background: var(--surface); opacity: .55;
}
html.js .dt-range:not(.is-semi-range)::before {
content: ''; display: block; width: 100%; max-width: 460px; height: 40px;
border: 1px solid var(--line); border-radius: var(--radius-s);
background: var(--surface); opacity: .55;
}
html.js .dt-range.is-semi-range::before { display: none; }
.dt-input .dt-semi { display: none; flex: 1 1 220px; min-width: 0; }
.dt-input.is-semi .dt-semi { display: block; }
.dt-input.is-semi::after { display: none; }
/* 工作经历的月份选择器（type="month" 升级）：占满原 .job-cell 格子 */
/* ---- 日期：年 / 月 / 日 三个下拉 ---- */
.dt-date-sel { display: flex; align-items: center; gap: 4px; min-width: 0; }
.dt-input .dt-year,
.dt-input .dt-month,
.dt-input .dt-day {
padding: 9px 6px; border: 1px solid var(--line); border-radius: var(--radius-s);
background: var(--surface); color: var(--ink); font: inherit; font-size: 13.5px;
font-variant-numeric: tabular-nums; cursor: pointer; min-width: 0;
}
/* 年最宽（4 位数 + 箭头），月/日短一些 —— 省下来的宽度留给时:分 */
.dt-input .dt-year { flex: 0 1 86px; }
.dt-input .dt-month { flex: 0 1 66px; }
.dt-input .dt-day { flex: 0 1 64px; }
/* 隐藏的 `*_date` 真正的字段（提交契约）—— 它必须留在 DOM 里 */
.dt-input input.dt-date[type="hidden"] { display: none; }
/* 旧「原生 date 框」形态（$dtDateType='native' 时才出现）保留样式 */
.dt-input .dt-date:not([type="hidden"]) {
flex: 1 1 150px; min-width: 0; cursor: pointer;
padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--radius-s);
background: var(--surface); color: var(--ink); font: inherit;
accent-color: var(--brand);
}
.dt-input .dt-date:not([type="hidden"])::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .65; }
/* ---- 时间：时 : 分 ---- */
.dt-time { display: flex; align-items: center; gap: 3px; flex: 0 0 auto; }
.dt-input .dt-hour,
.dt-input .dt-minute,
.dt-input .dt-second {
padding: 9px 6px; border: 1px solid var(--line); border-radius: var(--radius-s);
background: var(--surface); color: var(--ink); font: inherit; font-size: 13.5px;
font-variant-numeric: tabular-nums; cursor: pointer;
}
.dt-input .dt-colon { color: var(--muted); font-weight: 600; }
/* 必填但没填时描红（由 app.js 的 guardRequired 打类） */
.dt-input.dt-missing .dt-year,
.dt-input.dt-missing .dt-month,
.dt-input.dt-missing .dt-day,
.dt-input.dt-missing .dt-date { border-color: #C0392B !important; }
/* ============================================================================
起止范围（.dt-range）：两端一行优先，放不下才换行
============================================================================
用户原话（2026-10-09 第 4 次反馈）：
现在开始和结束时间分在了两行，导致日期这个特别特别的长，后面的时和分又
非常非常的短，非常不协调。所以这两个日期如果能放一排，如果能放得下的话，
就应该放一排。因为日期和时间，分和时和分的这个长度基本上是固定的，
所以你可以判断一下它到底能不能一行，能不能放得下。如果能放下的话就放在一行。
如果在手机上，比如说它这个页面非常窄，它就可以把它挤到下一行。
但是现在不要让它默认显示在两行上，应该默认显示在一行上才对。
⇒ 做法：flex 容器 + flex-wrap。每端有一个最小的可用宽度（.dt-part 的
min-width），浏览器在每次布局时自己判断放不放得下；放得下 → 一行；
放不下 → 第二端自然掉到下一行。
⚠️ 不用 JS 量宽度：字体没加载完 / 容器动画中都会量错，窗口缩放还要重算；
flex-wrap 是浏览器布局的一部分，永远是对的。
⚠️ .dt-range 的标签只在组上留一个（见 _event_fields.php 的说明）：
两端是同一个范围的两个端点，各挂一个标签会变成"看着像两个字段"的错觉。 */
.dt-range { display: flex; flex-direction: column; gap: 8px; }
.dt-range-label { font-size: 14px; color: var(--ink); font-weight: 600; }
/* 升级（= app.js 挂上 .dt-cols）之后：两端并排、必要才换行 */
.dt-range.dt-cols {
flex-direction: row; flex-wrap: wrap; align-items: center;
gap: 10px 18px;
}
/* 两端的"最小可用宽度"：日期(年+月+日) + 时:分 摆得下。
值取 250px —— 实测"年(86)+月(66)+日(64)+时:分(约 96)+间距"约 330px 才舒服，
但最小可用是 250px（会各自压缩一点），这样在常见的 560px+ 容器里
两端（250×2 + 18 间距 = 518）肯定放得下 → 默认就是一行。 */
.dt-range.dt-cols > .dt-input,
.dt-range.dt-cols > .field { flex: 1 1 250px; min-width: 250px; display: flex; }
.dt-range.dt-cols > .field { flex-direction: column; gap: 6px; }
/* 标签占满整行（不然它会跟第一端挤在一起） */
.dt-range.dt-cols > .dt-range-label { flex: 1 1 100%; }
/* 极窄屏：两端各自铺满一行（用户说的"手机上就挤到下一行"） */
@media (max-width: 560px) {
.dt-range.dt-cols > .dt-input,
.dt-range.dt-cols > .field { flex: 1 1 100%; min-width: 0; }
}
/* ============================================================================
Semi 仅剩的用途：工作经历的「年月选择」（<input type="month"> 的升级）
----------------------------------------------------------------------------
⚠️ 日期/时间控件（.dt-input）v37 起已完全不用 Semi —— 上面那套自建下拉
就是因为它给的弹层交互不可控（选完年月卡住）。这里保留的是另一处。
============================================================================ */
.dt-semi.dt-semi-month { display: none; }
.dt-semi.dt-semi-month.is-live { display: block; width: 100%; }
/* ---- v24 第 10 批 #7：起止范围用一个控件（Semi dateTimeRange）----
一对 .dt-input 被包在 .dt-range 里；升级后两端各自 display:none，
由**一个** .dt-semi-range 顶上来。未升级（JS 没跑/加载失败）时，
里面两个原生控件照旧各占一行 —— 也就是"功能没变，只是不好看"。 */
.dt-range { display: flex; flex-direction: column; gap: 8px; }
/* 范围控件自己的标签（只有一个，见 _event_fields.php 的说明） */
.dt-range-label { font-size: 13px; color: var(--muted); font-weight: 500; }
.dt-range.is-semi-range { display: block; }
.dt-range.is-semi-range > .dt-input { display: none; } /* 两端都让位给范围控件 */
/* 两端被 .field 包着时的同一条规则（见上面第 21 批的说明） */
.dt-range.is-semi-range > .field { display: none; }
.dt-semi-range { display: none; width: 100%; max-width: 460px; }
.dt-range.is-semi-range .dt-semi-range { display: block; }
/* Semi 范围输入框：与站内 .input 同高同圆角；宽度撑开一点（要放两个时间） */
body[class] .dt-semi-range .semi-input-wrapper {
height: 40px; border: 1px solid var(--line); border-radius: var(--radius-s);
background: var(--surface);
}
body[class] .dt-semi-range .semi-input-wrapper:hover { border-color: var(--brand-2); }
body[class] .dt-semi-range .semi-input { font: inherit; font-size: 13.5px; color: var(--ink); }
/* ---- v24 第 12 批 #2：范围控件的「灰底 + 不垂直居中」（实测定位）----
用真浏览器量出来两个毛病：
① 灰底：Semi 的 **外层** `.semi-datepicker-input` 自带 `rgba(46,50,56,.05)`
灰底、高只有 32px；而内层 `.semi-input-wrapper` 是白底、40px ——
两层套着，灰的那层露在外面（用户看到的"灰色背景色"）。
② 不居中：外层 32px < 内层 40px，输入框上下都被挤出去
（实测 gapTop=1 / gapBottom=17 → 文字贴顶）。
修法：把**外层容器**改成透明 + 不限高 + 垂直居中，让内层 40px 的白底框
自己撑起来（与站内 .input 完全一致）。 */
body[class] .dt-semi-range .semi-datepicker-input {
background: transparent !important;
height: auto !important;
min-height: 0 !important;
align-items: center;
padding: 0;
border: 0;
}
body[class] .dt-semi-range .semi-datepicker-range-input-wrapper {
align-items: center;
background: transparent;
}
/* 两端的白底框就是"可见的输入框"：撑满高度、文字垂直居中 */
body[class] .dt-semi-range .semi-input-wrapper {
display: flex; align-items: center;
}
body[class] .dt-semi-range .semi-input-wrapper .semi-input {
height: 100%; line-height: 40px; padding: 0 8px;
background: transparent;
}
@media (max-width: 640px) {
.dt-semi-range { max-width: none; }
}
.dt-input.dt-missing .semi-input-wrapper { border-color: #C0392B !important; box-shadow: 0 0 0 1px #C0392B inset; }
/* Semi 主题对齐宣纸色。semi.min.css 是懒加载的、必然排在 app.css 之后，
所以这里赢在**优先级**：body[class] 特异性(0,1,1) > semi 的 body(0,0,1)。 */
body[class] {
--semi-color-primary: var(--brand, #A84A28);
--semi-color-primary-hover: var(--brand-2, #C05F38);
--semi-color-primary-active: var(--brand-ink, #8D3C20);
--semi-color-focus-border: var(--brand, #A84A28);
}
/* 输入框本体：跟站内 .input / .dt-date 同一轮廓（描边、圆角、纸面底色、同高） */
body[class] .dt-semi .semi-input-wrapper {
width: 100%; height: 40px;
border: 1px solid var(--line); border-radius: var(--radius-s);
background: var(--surface); color: var(--ink);
/* v24 第 12 批 #2：单点控件也做同样处理 —— 外层半透明灰底去掉、文字垂直居中
（用户说"这种情况同样出现在其他的日期选择功能中"）。 */
display: flex; align-items: center;
}
body[class] .dt-semi .semi-input-wrapper:hover { border-color: var(--brand-2); background: var(--surface); }
@@ -711,43 +711,16 @@ body[class] .dt-semi .semi-input { font: inherit; color: var(--ink); }
body[class] .dt-semi .semi-input::placeholder { color: var(--muted); }
body[class] .dt-semi .semi-datepicker-input,
body[class] .dt-semi .semi-datepicker {
background: transparent !important;
height: auto !important;
min-height: 0 !important;
border: 0;
padding: 0;
background: transparent !important; height: auto !important;
min-height: 0 !important; border: 0; padding: 0;
}
body[class] .dt-semi .semi-input-wrapper .semi-input {
height: 100%; line-height: 40px; padding: 0 11px; background: transparent;
}
/* 日历面板：白纸底色统一成卡片的纸色，选中/悬停色走上面的 brand 变量 */
body[class] .semi-popover .semi-datepicker { background: var(--surface, #fff); }
body[class] .semi-datepicker-day-selected { background-color: var(--brand, #A84A28); }
body[class] .semi-datepicker-day-hoverday,
body[class] .semi-datepicker-day-inhover { background-color: color-mix(in srgb, var(--brand, #A84A28) 12%, transparent); }
.dt-input .dt-date {
flex: 1 1 150px; min-width: 0;
padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--radius-s);
background: var(--surface); color: var(--ink); font: inherit;
accent-color: var(--brand);
}
.dt-input .dt-date { cursor: pointer; } /* 整框可点，光标也要说明这一点 */
.dt-input .dt-date::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .65; }
.dt-time { display: flex; align-items: center; gap: 3px; }
.dt-input .dt-hour,
.dt-input .dt-minute,
.dt-input .dt-second {
padding: 9px 6px; border: 1px solid var(--line); border-radius: var(--radius-s);
background: var(--surface); color: var(--ink); font: inherit;
font-variant-numeric: tabular-nums; cursor: pointer;
}
.dt-input .dt-colon { color: var(--muted); font-weight: 600; }
/* 🔴 v36：时间不再有"合成的时间框"（v35 试过 `<input type="time">`，已弃用）。
`.dt-merged` / `.dt-time-input` 的规则一并删掉 —— 免得将来有人误以为
还有"被收起来的下拉"。用户要的形态就是**日期 + 时/分下拉**直接显示。 */
.dt-input.is-native-range { gap: 8px; }
.dt-range.is-native-range { display: flex; flex-direction: column; gap: 10px; }
/* 「以哪个生日为准」的两块：被选中的那块描一圈，一眼看出填的是哪边 */
.bd-source { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
@@ -3206,6 +3179,29 @@ body[class] .semi-datepicker-day-inhover { background-color: color-mix(in srgb,
border: 1px solid var(--line); border-radius: 10px;
}
.rev-tip { margin: 0 0 10px; font-size: 12.5px; line-height: 1.7; color: var(--muted); }
/* 🔴🔴 v37：修正面板必须**浮**在按钮列之外，否则它只有 ~22px 宽、完全没法填。
真机实测（1400px 视口、品心 1080px）：
.dt-range 宽 **22px**、`.nf-grid` 宽 **22px** —— 整张修正表单被压成一条线。
根因：`.node-ops` 是"一排小按钮"的容器
`flex: 0 0 auto; justify-content: flex-end;`（见上面），
而「修正」是 `<details class="rev-open">`：**展开的内容也长在这个按钮列里**
⇒ 列宽只有"修正"两个字那么宽（22px），里面的表单跟着一起被压扁。
⚠️ 这不只是"不好看"：日期控件在 22px 里根本点不到（用户报的就是这个）。
修法：面板 `position: absolute` 脱离按钮列的宽度约束，浮到卡片上。
· 宽度取 `min(720px, container 宽)` —— 720 刚好摆得下"两端各 304"（608+间距）。
· `right: 0` 让它从按钮列右缘向左展开，不会超出卡片右边。
· `z-index: 30` 盖在后面的行上面（它是临时展开的面板，本来就该在最上层）。
⚠️ 不动 templates/trips/show.php 的 DOM：
`.node-list`/`.node-row` 的 flex 结构一动就会牵动"节点列表"的排版
（那是清单页最核心的视觉），而这里只需要把它**浮出来**，纯 CSS 就够。 */
.rev-open { position: relative; }
.rev-panel {
position: absolute; right: 0; top: calc(100% + 6px); z-index: 30;
width: min(720px, calc(100vw - 48px));
max-height: min(76vh, 720px); overflow-y: auto;
box-shadow: var(--shadow-l, 0 12px 32px rgba(0, 0, 0, .16));
}
.rev-form .btn-row { margin-top: 10px; }
/* 修正历史对比表 */
@@ -3964,11 +3960,15 @@ button.btn, a.btn, summary.btn, .seg-btn, .icon-btn, .rv-act-btn, .cs-btn, .bf-b
background: rgba(44, 35, 29, .55); overscroll-behavior: contain;
}
.cal-modal[hidden] { display: none; }
/* 🔴 v37：`max-height` 必须把 `.cal-modal`（本面板的父层）自己的 `padding: 24px`
算进去 —— 只减 48 会让面板底部**刚好探出视口 4px**，
于是 `.cal-modal-foot` 里那两个按钮有半截在屏幕外（用户"看不到按钮"的另一半原因）。
⇒ 减 **64px** = 上下各 24px 的遮罩内边距 + 16px 余量。 */
.cal-modal-panel {
width: min(680px, 100%); margin: auto;
background: var(--surface); border-radius: 14px;
box-shadow: var(--shadow-l); display: flex; flex-direction: column;
max-height: calc(100vh - 48px);
max-height: calc(100vh - 64px);
}
.cal-modal-head {
display: flex; align-items: center; gap: 10px;
@@ -5084,3 +5084,63 @@ h5.md-h, h6.md-h { font-size: 14px; }
.ntf-main { flex-wrap: wrap; gap: 2px 10px; }
.ntf-title { flex: 1 1 100%; }
}
/* ============================================================================
v37(2026-10-09) —— 弹框：按钮位置 / 标签加粗 / 观影弹框宽度
----------------------------------------------------------------------------
用户原话（4 条，都指向"弹框"）：
⑤「日程模块的新建日程里，弹出一个对话框。但是"加上"和"取消"两个按钮在
右上角，离得特别远，根本看不到。应该把它们放在下方，或者放在"新建日程"
标题的右侧，不要放那么远。
另外，每个输入框前面的标题都太小了…比如"放在哪本""标题""地点""提醒"这些，
都应该加粗、变大，这样跟里面的内容产生一些差异，看起来更醒目一些。」
⑥「新建任务也和新建日程一样，新建时弹出一个框…」
============================================================================ */
/* 🔴🔴 日程弹框"按钮跑到右上角、还根本看不到"的真根因（实测定位，不是猜）：
`.cal-modal-panel` 是 flex 列（head / form / foot 三段），但**它下面的 <form>
不是** —— form 是块级元素，`cal-modal-body{flex:1 1 auto}` 的 flex 上下文
只到 form 为止。于是 form 的高度 = head + 内容**全部**高度，而面板 `max-height`
又把外层卡住 ⇒ foot 被挤出面板可视区，出现在**面板底部之外**，
而面板本身不滚（滚的是 body）→ 用户看到的就是"按钮飘在很远的地方 / 看不见"。
⇒ 让 form 也参与那个 flex 列、body 才能真正被压缩到可滚动。 */
.cal-modal-panel > form {
display: flex; flex-direction: column;
flex: 1 1 auto; min-height: 0;
overflow: hidden; /* 圆角裁切：body 滚动时不要顶出面板 */
}
/* ⚠️ v37 起"加上"主键改用 `form="calAddForm"` 关联 ——
它不再长在 form 内部，`:not()` 那条老规则会失效，这里按 id 补回。 */
.cal-modal-foot .btn[type="submit"],
.cal-modal-foot #calAddSubmit { margin-left: auto; }
/* ---- 弹框里的字段标签：加粗、变大、深色 ----
用户原话：「每个输入框前面的标题都太小了…都应该加粗、变大，这样跟里面的内容
产生一些差异，看起来更醒目一些。」
⚠️ 只改**弹框里**的（.cal-modal / .pp-modal 等浮层面板内）：
页面内的普通表单标签维持原样，避免"改一处动了全站"。
⚠️ 用 `.cal-modal .field > label` 而不是 `.cal-modal label`：
后者会连"提醒"那排 checkbox 的每个小标签一起加粗，看起来一片糊。 */
.cal-modal .field > label,
.cal-modal .field > .dt-range-label,
.cn-panel .field > label,
.pp-modal .field > label {
font-size: 14px; font-weight: 600; color: var(--ink);
}
/* ---- 观影"记一场电影"弹框 ----
⚠️ 字段比日程多得多（海报 + 观影照片 + 简介 + 同行人…），620px 太窄了，
用 760px 让两列字段摆得开；高度放到 88vh，长表单才有足够的可视区。 */
.cal-modal-panel.mv-panel { width: min(760px, 100%); max-height: calc(100vh - 64px); }
.mv-form-inner { padding: 16px; } /* 弹框里的内边距（编辑态用的是 .card-pad） */
/* 弹框形态下，页面上那条"记下这场电影 / 取消"一整行是多余的（foot 里已有），
但它在**编辑态**必须留着 —— JS 没跑时它是唯一的提交入口。 */
.mv-foot-inner { display: none; }
@media (max-width: 640px) {
.cal-modal-panel.mv-panel { width: 100%; }
}
/* ---- 窄屏：弹框字段全部单列（form-grid 是两列，手机上会把标签挤成两个字） ---- */
@media (max-width: 560px) {
.cal-modal .form-grid { grid-template-columns: 1fr; }
}