 Sakurasan
|
75737034d9
|
评论：去气泡改纸面排版 + 回复 @提及 + 双主题手机 12px 贴边
视觉：评论区从「带边框的聊天气泡盒」改成与去卡片后文章页一致的纸面排版
- .cm-bubble 类名保留（DOM 不动）盒子拆掉：正文直接落在纸面上，层级靠
头像 / 名字行 / 留白撑起，条与条之间不画线不画盒；删除态靠变灰变斜认
- 输入区去卡片盒，只留 textarea 底下一条「书写线」，聚焦变强调色
（vivid 再加同色光晕，与 .search 聚焦同一语言）；名字 / 计数 / 发送
排在线下方，像在纸上落款
- 操作钮 ✎ ✕ ↩ 圆图标 → 一行文字钮（回复/编辑/删除）：桌面 hover 浮现、
位置预留不跳版；触屏常显并加大可点面积；删除悬停给红；补 focus-visible 环
（文字钮无边框，键盘可达性自己画）
- 回复串：空白缩进改左侧发丝线（与左栏时间线同一语言）；26px 小头像不再
戴登录方式小标（戴不下）；登录引导卡去框，一行引导 + 一排登录圆钮
- 暗色代码块修复（.cm-md pre 与 .prose pre 同一 bug）：背景
color-mix(92% ink, accent) 在暗色下混出浅底浅字，暗端覆盖为
color-mix(86% paper, accent) + 细边框
@提及
- 回复另一条回复时正文前带强调色 @对方名字，扁平列表里才看得出在跟谁
说话；回主楼不标。名字由 parent_id 在已加载回复列表里解析，父回复
未加载就不标 —— 后端阶段二契约不变，纯前端即可工作
- 浮动贴正文首行行首（与首字下沉同一技巧），字号行高与 .cm-md 成对同步
（基础 / 手机断点 / vivid 三处，改字号要一起改）；正文以代码块、列表
开头时退成独立一行，避免被块级背景盖住
- 编辑态去掉「正在改定此评：」，交给 placeholder；mock 加 reply-to-reply
用例（Mason 回 ONE）
手机 12px 贴边（两套主题正文与评论共用同一条左缘）
- vivid：.article-layout 手机断点 1fr → minmax(0,1fr)。裸 1fr 的自动最小
尺寸是 min-content，正文里不可断行的长 token 把整列顶到 592px、整页
横向溢出（实测 375 视口 bodyScrollWidth 612）；页边距 20 → 12；
.prose 加 overflow-wrap:break-word
- classic：.shell 手机 20 → 12（首页信息流同步收边），PostView .wrap
≤640 侧边距归零 —— 那 4px 正是正文比评论多出的一截
- 评论手机断点（styles.css 基础段，两套 UI 共用）：头像 36→28、回复
缩进收紧、排序 / 登录 / 操作钮 44px 触控目标、输入 16px 防 iOS
聚焦缩放；.cm-md 加 overflow-wrap:break-word（用户内容长链接必须断行）
杂项
- vite dev 加 --host：手机连局域网可直接评审
- 实测（浏览器逐状态截图过目）：vivid/classic × 亮/暗 × 桌面/390，
默认 / 未登录 / 空 / 审核中 / 已删除 / 多级回复 / 回复框 / 编辑框
共 13 张；375 视口 bodyScrollWidth = 375 无溢出；pnpm build 通过
|
2026-09-26 22:34:36 +08:00 |
|
|
Sakurasan
|
815eff9f9a
|
评论阶段一（前端）：评论区 + 登录引导卡 + dev mock，经典头像留白修复
评论区（按已批准的设计文档，阶段一=前端；后端与多用户为阶段二/三）
- classic / vivid 共用同一份 DOM：CommentSection + CommentItem（回复一层、
自引用渲染，回复/编辑框模板只写一份）+ CommentMarkdown（唯一 v-html 出口，
必过 sanitizeHtml）。比计划里的两套组件少一半文件，也避免两边结构漂移
- 数据层：api.js 追加 readerApi（me/providers/logout/comments/thread/create/
edit/remove）；src/reader.js 读者身份 reactive 单例（仿 site.js，
挂 one:unauthorized 清 user）；composables/useComments 按文章实例化
（刻意不做单例，换文章必须重置），乐观插入按当前排序落位
- 交互：排序（默认/最新/最早）、发表、回复（一层 + 加载更多回复）、
10 分钟内编辑、软删、分页（显示更多 N 条）、骨架屏、空态、错误态、审核中徽章
- 登录引导卡：三种 provider（GitHub/Google/Telegram）；redirect 类整页跳转，
widget 类（Telegram）点击时内联官方脚本（无跳转、无回调，官方按钮落位）
- 样式：styles.css 追加 .cm-* 基础段（经典 token，vivid 靠别名继承同一份规则）；
ui/yohaku/comments.css 只写 vivid 差异（全前缀、特指度盖过基础版），
自己的窄屏/触屏规则写在文件内，不塞 mobile.css
- main.ts：comments.css 插在 pages 之后 mobile 之前（层叠契约不变）；
dev mock 用 ?mock 门控动态 import，await 装完再挂载，否则首屏请求会打到真接口
修三处真问题
- vivid 的 a{color:inherit} 重置（特指度 0,1,2）把作者链接名拉回 body 色，
暗色下暗底暗字 —— 用 a.cm-name-a 压回
- classic 文章页整页掉进 236px 左列：PostView import 了 LeftNav/RightRail
却没渲染，补上（与 HomeView 三栏一致），文章页回到 640px
- classic 信息流头像贴死列边框：.row-feed 的负 margin 正好抵光左右内边距，
改 padding 14/16 -> 14/30（30 = 16 出血 + 14 留白，hover 底色与分隔线仍铺满整列）
mock 假数据
- 8 位作者（三种登录方式、不同色相头像、两个走首字母兜底）、
默认一屏 8 条各测一个排版点（代码块/引用/列表/已删除/审核中/已编辑/站长徽章/
加载更多回复），长列表态 26 条测分页；右下角浮层切 9 个状态（?mock&state=），
?ui=classic 可强制 classic 壳（平时渲染不出来，没法做探针）
验证（headless Chromium + CDP 真实时间截图；virtual-time 对含动态 import 的页面
截图时机不稳，会截出全白，已换 CDP 方案）
- 头部计数 13px/tabular-nums、.seg 3 选 1；头像 50% 圆、36/24px；
气泡圆角 3,20,20,20（缺角）；回复缩进 36px 且无二层嵌套；360 宽无横向溢出
- 暗色：气泡/输入框/名字全部适配（量的时候被 a 的 150ms 颜色 transition 骗过，
t0 与 t400 两次测量值不同才看清，稳态正确）
- 产物：CSS 顺序 styles→pages→comments→mobile；49 条评论规则全带
html[data-ui=vivid] 前缀；grep __COMMENT_MOCK__ 为空、无 mock chunk —— 生产零 mock
|
2026-09-26 18:36:12 +08:00 |
|