3.2.48: 归档倒序/字号/底边对齐/共N篇 + 评论标题线等长 + 工具条分隔线统一 #18
工单 #18 八条诉求逐条落地： 1. 月份、日期、年份全部倒序（最近的在最上面） - PHP 侧 `krsort($years[$y]['months'])`（原来是 ksort） - JS 侧 `Object.keys(...).sort((a,b)=>b-a)` —— 对象键序对纯数字整数键 会强制升序，服务端顺序传不过来，必须前端自己再排一次 - 年份本来就是 krsort，日期本来就是倒序，本次只补月份 2. 年份字体再大一点 - 原来 CSS 写的 22px **从来没有生效过**：`.yang-archives .ar-year` 是 (0,2,0)，被 `.k-main .details .article .content h3` 的 (0,4,1) 压死， 线上实际是 18px - 改为带 `.k-main` 前缀（提到 (0,5,0)）+ 26px + 700 - `.ar-month-title` 同一个坑，一并修（写 14px/600，线上实际 16px/500） 3. 「共 N 篇」太高、比年份还高 → 下移与年份底边对齐 - `.ar-head` 的 `align-items: center` → `flex-end` - `.ar-year` 的 margin 显式清零（kratos 的 `h1..h6 { margin: 0 0 30px 0 }`） - 窄屏媒体查询同步改，否则手机上又回到居中 - 注意 `flex-end` 对的是 margin box，所以 margin 不清零等于没改 4. 每月后面的裸数字 → 「共 N 篇」 - PHP：`sprintf(esc_html__('共 %s 篇'), number_format_i18n(...))` - JS：同一个文案键 `i18n.monthCount`，服务端输出到 `yangArchivesData` - 新增 `monthCount` 键，**没有复用** `totalFmt`（两处语义不同， 以后要分别改文案时不至于互相牵连） 5. 上一年/下一年按钮看不清 → 与「写下你的评论」同款观感 - 平时：`1px solid #cfe6fb` 浅蓝框 + 透明底 + `--yq-primary-dark` 蓝字 - 悬停：主色实底 + 白字（`.ar-nav-year` / `.ar-nav-arrow` 也要跟白， 否则图标还是蓝的在蓝底上看不见） - 禁用态保持灰（`is-disabled` + opacity .42），不能跟可用态一个样 6. 评论「评论者」下面的灰线太短 → 延长到与评论分隔线等长、右侧到头 - 🔴 这里改过一次方案：一开始以为把 h3 `flex: 1 1 auto` 撑宽就行， 实测发现 `.comments-head` 是 flex 行，右边还有「写下你的评论」按钮 （flex: 0 0 auto），h3 撑满也只能长到按钮左边缘 —— 原理上到不了右端 （实测 h3 110.5px / li 561.98px，差的 451px 就是按钮 + gap） - 最终方案：**线从 h3 搬到 `.comments-head` 容器上**， h3 显式 `border-bottom: none` 干掉 kratos 的 #f0f0f0， 否则会出现一短一长两条线，比原来更难看 - 容器那条规则**还必须带 `.k-main` 前缀**（(0,5,0)），否则压不过 kratos 的 `.comments .title`。发布判据当场抓到这一条：注释里写了 「带 .k-main 前缀」，代码里漏了 —— 注释不能当证据 7. 工具条分隔细线不统一 → 5 个按钮 4 条线 - 原来 B/I 之间没有线，其余有 ⇒ 现在统一 - 写成「每条后面跟一条」会在末尾多出贴容器边缘的孤线，所以是 5 按钮 4 线 8. 清理无用 JS/CSS - 四轮查证结论：**没有可安全删除的**，代码一行未动 - 排查过程已作为评论发到工单 测试：归档单测 113/0（反向 13 真红）、归档 e2e 112/0（反向 24 真红）、 评论几何 157/0（反向含新增 5 条，覆盖"线搬回标题""两处都画"两种错误形态）。 线上真实页面几何探针发布前 17 通过/16 失败（每条都对应上面某一条诉求）， 发布后要求全绿。
This commit is contained in:
+81
-7
@@ -130,25 +130,99 @@
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.comments-head {
|
||||
/* 3.2.48：`padding-bottom` 从 15px 改成 0 —— 分隔线现在挂在 .title
|
||||
* 自己的 border-bottom 上（见下），标题已自带 12px 下内边距。
|
||||
* 若这里还留 15px，线与第一条评论之间会空出 27px，线看起来"飘在
|
||||
* 半空"。 */
|
||||
/* 标题：不加任何装饰。
|
||||
* 曾经在左侧加过一条主色竖条 —— 用户明确要求去掉：标题本身字重足够，
|
||||
* 竖条只是多余的视觉噪音，而且它逼着标题让出 12px 左内边距，
|
||||
* 让「评论」两个字和下方评论正文的左边缘对不齐。
|
||||
*
|
||||
* 🔴🔴 3.2.48：标题下面那条**灰线太短**的真正原因，以及为什么线要搬家。
|
||||
*
|
||||
* 用户看到的是：「评论者两个字下面，有一个灰色的线，太短了」。
|
||||
* （"评论者"其实是标题里的「评论（614）」，线上没有"评论者"三个字。）
|
||||
*
|
||||
* ── 这条线原来是哪来的 ──────────────────────────────────────
|
||||
* **不是本文件画的**，是 kratos.css:1534：
|
||||
* .k-main .details .comments .title {
|
||||
* padding: 16px 0;
|
||||
* border-bottom: 1px solid #f0f0f0; ← 就是它
|
||||
* font-size: 19px;
|
||||
* }
|
||||
* 特异性 (0,4,0)，压过本文件原来的 `.comments-head .title`（0,2,0）。
|
||||
* 所以早期在本文件里调它，怎么调都不生效。
|
||||
*
|
||||
* ── "短"有两层原因，只修一层不够 ────────────────────────────
|
||||
* 第一层：h3 作为 flex 项默认 `flex: 0 1 auto`，宽度收缩到**内容宽度**
|
||||
* （线上实测 110.5px），而下方评论分隔线是 li 的 border-bottom，
|
||||
* 撑满容器（实测 561.98px）。差 451px。
|
||||
* 第二层（更关键）：即使把 h3 撑到 `flex: 1 1 auto`，**它也只能长到
|
||||
* 「写下你的评论」按钮的左边缘**——那个按钮是同一行的第二个
|
||||
* flex 项（`flex: 0 0 auto`）。所以 h3 上的任何边框，
|
||||
* 原理上都不可能"右侧到头"。
|
||||
*
|
||||
* ⇒ 结论：**线必须画在整行上**，不能画在标题元素上。
|
||||
* `.comments-head` 是这一行的容器，它的宽度就是 561.98px，
|
||||
* 与评论列表的 li 完全一致 —— 这才是"和下面的分割线一样长"。
|
||||
* 标题和右侧按钮都浮在这条线之上，视觉上就是
|
||||
* 「评论（614） …… 写下你的评论」压在一条通栏细线上。
|
||||
*
|
||||
* 所以下面 .title 里**必须** `border-bottom: none`，
|
||||
* 并且把 kratos 那条 (0,4,0) 的 #f0f0f0 一起干掉 ——
|
||||
* 否则会出现**两条线**：h3 自己一条短的、容器一条长的。
|
||||
*
|
||||
* 判据（_live_geom18.js）：线的右端必须与
|
||||
* `.yang-comment-list > .yang-comment` 的 border-box 右边缘对齐。
|
||||
* ⚠️ 这条判据是"量出来的"，不是"看 CSS 有没有写" ——
|
||||
* 因为第一层原因就是"写了也不生效"，靠读代码根本发现不了。 */
|
||||
.comments-head,
|
||||
.k-main .details .comments .comments-head {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
padding-bottom: 15px;
|
||||
/* 12px 下内边距把文字与线隔开（原来靠 h3 的 padding-bottom，
|
||||
* 线搬到容器上后这个活也归容器）。 */
|
||||
padding-bottom: 12px;
|
||||
/* 🔴 线画在这里：整行宽度 = 评论列表宽度。
|
||||
* 加 `.k-main …` 前缀是为了在后续若有更高特异性规则时仍能守住，
|
||||
* 同时也把 kratos 给 .comments 加的 margin/padding 影响考虑进去
|
||||
* （实测容器与 li 同宽，见 _live_geom18.js 的实测值）。
|
||||
* ⚠️ 这个前缀曾经**只写在注释里、代码里没加** —— 注释与代码不一致，
|
||||
* 被发布脚本的第②条判据抓出来了。现在真加上了。 */
|
||||
border-bottom: 1px solid var(--yq-line, #eaedf2);
|
||||
}
|
||||
|
||||
/* 标题：不加任何装饰。
|
||||
* 曾经在左侧加过一条主色竖条 —— 用户明确要求去掉：标题本身字重足够，
|
||||
* 竖条只是多余的视觉噪音，而且它逼着标题让出 12px 左内边距，
|
||||
* 让「评论」两个字和下方评论正文的左边缘对不齐。 */
|
||||
.comments-head .title {
|
||||
/* 标题本体：**不再有自己的下边框**（线已搬到容器上）。
|
||||
*
|
||||
* 🔴 `border-bottom: none` 这一句是必须的，不是清理：
|
||||
* kratos.css 的 `.k-main .details .comments .title` 给了
|
||||
* `border-bottom: 1px solid #f0f0f0`（(0,4,0)），不显式干掉就会出现
|
||||
* 两条线 —— 短的在内、长的在外，比原来只有一条短的更难看。
|
||||
* 选择器带 .k-main + .comments-head，特异性 (0,5,0)，压得过 (0,4,0)。
|
||||
*
|
||||
* `flex: 1 1 auto; min-width: 0` 仍然保留：让标题吃掉剩余宽度，
|
||||
* 把「写下你的评论」稳定推到最右；同时 min-width:0 防止长标题
|
||||
* 把按钮挤出容器。但**它已经不负责任何线条的长度**了。 */
|
||||
.comments-head .title,
|
||||
.k-main .details .comments .comments-head .title {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
/* margin 必须显式清零：kratos.css 的 `h1..h6 { margin: 0 0 30px 0 }`
|
||||
* 会给它 30px 下外边距，线与列表之间会空出一大块，看起来"线飘在上面"。 */
|
||||
margin: 0;
|
||||
color: #1f2328;
|
||||
font-weight: 600;
|
||||
font-size: 19px;
|
||||
line-height: 1.4;
|
||||
letter-spacing: -0.005em;
|
||||
/* 干掉 kratos 那条 (0,4,0) 的 #f0f0f0 下边框 —— 见上面注释。
|
||||
* 横向 padding 也归零：一旦有左右内边距，标题文字的左右边缘
|
||||
* 就会与评论正文对不齐。 */
|
||||
padding: 0;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
/* 「写下你的评论」：原来用 3px 圆角 + #f4f8ff 底，白底上几乎看不出是按钮。
|
||||
|
||||
Reference in New Issue
Block a user