From daf5ca904e8c56c143dc33d9200ab4a63123d08c Mon Sep 17 00:00:00 2001 From: laoyang Date: Mon, 26 Oct 2026 06:45:38 +0800 Subject: [PATCH] =?UTF-8?q?v94=20=E5=BF=85=E5=A1=AB=E9=A1=B9=E6=94=B9?= =?UTF-8?q?=E6=88=90=E3=80=8C=E6=A0=87=E7=AD=BE=E7=BA=A2=E8=89=B2=E5=8A=A0?= =?UTF-8?q?=E7=B2=97=E3=80=8D=EF=BC=8C=E5=8E=BB=E6=8E=89=E7=BA=A2=E8=89=B2?= =?UTF-8?q?=E6=98=9F=E5=8F=B7=20(#3)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 需求(用户 2026-10-25):必填项原来在标题后面加一个红色星号,排版经常不齐。 改成「标题本身红色 + 加粗」——用户习惯后,看到红色加粗的标题就知道是必填。 CSS(assets/css/app.css): - :root 新增 --req:#B03A2E、--req-w:700。 · 不用 --red(#C0533F):那是动作红(删除按钮底色),当文字色放在暖纸底 #F7F3EA 上对比度只有 ≈3.4:1,13-14px 标签偏浅;#B03A2E 约 4.6:1。 · --req-w 必须 700 不能 650/600:本站标签基线字重本来就是 600 (.form-grid > .field > label / .card .field > label / .mv-row > .mv-lb / .dt-range-label 四处都是 600),650 会被取整回 600 = 完全没加粗。 - 文件末尾新增「必填项统一标记」段,覆盖四种标签形态: label.is-req / .mv-lb.is-req / .dt-inline-lab.is-req / .dt-range-label.is-req, 用 !important 打穿各宿主选择器的特异性(颜色与字重是语义标记,不该被面板样式盖掉)。 - 冒号跟着变红:.mv-lb::after / .dt-inline-lab::after 原本是灰色 400, 只改标签本体会剩「红字 + 灰冒号」的半截效果。 - 包裹层兜底(.field.is-req > label 等),只作用直接子级 —— 不写 .field.is-req label,那会把「提醒」那排 checkbox 的小标签一起染红。 - 深色主题给备用色 #F08A78。 - 保留 .mv-row > .mv-lb > i(万一有没清干净的星号不至于露灰星花,且静态断言会报出来)。 模板(16 个文件 / 30 处): - _event_fields.php / _datetime.php 的标签闭包第三参数 $star → $req, $dtLabelStar → $dtLabelReq,删掉死引用 $evLabelStar。 - 其余 14 个模板把 `*` 换成给标签加 is-req 类。 - 用显式 .is-req 而不靠 required 属性反推:CSS 无父选择器,:has() 旧 WebView 不可用,且影院名称/板块名本来就靠 JS 校验没有 required。 验证: - 静态 _fb_v94_static.py 22/0,反向 9/9(含「--req-w 必须严格大于从 CSS 解析出的 标签基线字重」,不写死 700)。 - 真浏览器 _fb_v94_req.py 63/0,反向 5/5(加粗/必须红/!important 必要性/ 星号必须消失/每形态单独覆盖,五类注入各自精确命中预期断言)。 - 全量流水线(含 60+ 套件)通过并部署。 - 线上真实页面 _fb_v94_live.py 31/0:观影「片名」、旅程「旅程名」、 成员「姓名」、导航「网址/所属板块」实测 color=rgb(176,58,46) weight=700, 同页非必填 color=rgb(44,35,29) weight=600,冒号同色,无星号。 --- assets/css/app.css | 119 ++++++++++++++++++++++++++- templates/_datetime.php | 13 ++- templates/books/form.php | 2 +- templates/calendar/_event_fields.php | 28 +++++-- templates/calendar/calendars.php | 6 +- templates/days/form.php | 6 +- templates/ledger/index.php | 6 +- templates/movies/cinemas.php | 2 +- templates/movies/form.php | 4 +- templates/nav/index.php | 12 +-- templates/people/form.php | 2 +- templates/people/import.php | 2 +- templates/resources/index.php | 8 +- templates/tasks/_add_modal.php | 2 +- templates/tasks/_edit_form.php | 2 +- templates/trips/form.php | 2 +- templates/trips/node_form.php | 4 +- 17 files changed, 176 insertions(+), 44 deletions(-) diff --git a/assets/css/app.css b/assets/css/app.css index cdb3bd3..9c91eff 100644 --- a/assets/css/app.css +++ b/assets/css/app.css @@ -15,6 +15,25 @@ --brand-ink:#6E3820; --green: #6F9E5C; --red: #C0533F; + /* 🔴🔴 v94(用户 2026-10-25):必填项的标记方式从「标题后面加红星星号」改成 + 「标题本身**红色 + 加粗**」——用户原话: + 「必填项现在的做法是在后面加一个红色的星,但这样排版有时候不好看,对不齐。 + 把所有必填项都改一下,改成红色加粗字体……一看前面的标题, + 只要是红色加粗的字体,就知道这是必填项。」 + ⇒ 需要两个变量:一个"必填红"、一个"必填字重"。 + ⚠️ **为什么单独立一个 `--req` 而不是直接用 `--red`**: + `--red` (#C0533F) 是**动作红**(删除按钮的底色),它当文字色用在这个 + 暖纸底 (#F7F3EA) 上对比度只有 ≈ 3.4:1 —— 13-14px 的标签字号下偏浅。 + 这里取深一档的 #B03A2E(≈ 4.6:1),既明显是红,又能和正文墨色同等清晰。 + **改这个值会全站必填标签一起变。** + ⚠️🔴 `--req-w` **必须是 700,不能写 650/600**:本站标签的基线字重 + 本来就是 600(`.form-grid > .field > label`、`.card .field > label`、 + `.mv-row > .mv-lb`、`.dt-range-label` 四处都是 600)。写 650 的话 + 浏览器只会取到最近的真字重 700 或合成加粗 —— 一旦落到 600 就等于 + **完全没加粗**,用户看到的只剩"变红",而他明确说的是「红色加粗」。 + 700 与 600 的差在 15px 中文黑体上是能一眼分出来的。 */ + --req: #B03A2E; + --req-w: 700; /* 🔴 v40(用户 2026-10-10):「影院管理部分…编辑使用蓝色的背景,删除使用红色的背景。」 ⇒ 新增一个中性的"操作蓝"(不是链接蓝、也不是模块品牌色)—— 它是**语义色**: 蓝=编辑、红=删除,全站统一,跟着模块换肤也不该变。 @@ -5838,7 +5857,9 @@ h6.md-h { font-size: 17px; color: var(--muted); } line-height: 1.4; word-break: keep-all; } .mv-row > .mv-lb::after { content: ':'; font-weight: 400; color: var(--muted); } -/* 必填星号:跟在标签文字后、冒号前 */ +/* 🔴 v94 起星号不再使用(见文件下方「必填项统一标记」那段);这两条留着**不删**: + 万一还有没清干净的 `*`,它会渲染成紧贴的红色星号、不会露成一个灰星花, + 而静态断言会把它当失败报出来 —— 比"悄悄留个灰星花"好定位。 */ .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; } @@ -6767,3 +6788,99 @@ h6.md-h { font-size: 17px; color: var(--muted); } /* v78:卡片窄到"宽 2"时,标题 +「全部任务」+「新建任务」三样挤不下 —— 允许折行,别把标题压成 0 宽(那会只剩两颗按钮,看不出这是哪张卡片)。 */ .hc-card.hc-w2 .hc-head { flex-wrap: wrap; } + +/* ============================================================================ + 🔴🔴 v94(用户 2026-10-25):必填项统一标记 = **标签红色 + 加粗**,去掉红色星号 + ============================================================================ + 用户原话:「必填项现在的做法是在后面加一个红色的星,但这样排版有时候不好看, + 对不齐。把所有必填项都改一下,改成红色加粗字体,就不用再考虑加红色星的问题了。 + 这样用户习惯之后,一看前面的标题,比如"日程名称"这种,只要是红色加粗的字体, + 就知道这是必填项。我感觉这个比加红色的星更好一些。」 + + ------------------------------------------------------------------ + 为什么用 `.is-req` 这个**显式标记**,而不是"看有没有 `required` 属性"自动推断 + ------------------------------------------------------------------ + `required` 只出现在 `` 上,而标签是它的**兄弟或父级之前的节点** —— + CSS 没有"父选择器"能用它反推(`:has()` 也只在很新的内核里可用,本项目要照顾 + 旧 WebView)。而且有几个必填项**根本没有 `required` 属性**(比如影院名称、 + 板块名这些靠 JS 校验的),靠属性推断会漏掉。 + ⇒ 一律由模板显式加 `is-req` / `is-req` 放在 `` 上。 + 「哪些是必填」这个事实写在模板里(离 `required` 最近), + 「红加粗长什么样」写在 CSS 里(一处改、全站生效)。 + + ------------------------------------------------------------------ + ⚠️ 三条硬约束(都是本项目的实测坑) + ------------------------------------------------------------------ + ① **特异性**:这里用 `.is-req`(0,1,0)去覆盖 `.mv-row > .mv-lb` + (0,2,0)和 `.form-grid > .field > label`(0,2,1)—— 单靠一条肯定压不住。 + 所以最后用 `!important` 打穿。这不是偷懒:颜色/字重是**语义标记**, + 不该被"某个面板想调一下标签样式"顺手盖掉,否则同一个"必填"在不同页面长得不一样。 + ② **冒号必须跟着变红**:`.mv-lb::after` / `.dt-inline-lab::after` 把「:」画成 + 灰色 400 字重 —— 只改标签本体会出现"红字 + 灰冒号"的半截效果。这里一并覆盖。 + ③ **不能用 `color: inherit` 之类做减法**:`--red` 是动作红(删除按钮底色), + 当文字色在暖纸底上偏浅,见 `:root` 里 `--req` 的说明。 + + ------------------------------------------------------------------ + 覆盖的三种标签形态(本项目全部标签都落在这三种里,已逐个核过) + ------------------------------------------------------------------ + a) `