评论:去气泡改纸面排版 + 回复 @提及 + 双主题手机 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 通过
This commit is contained in:
1 parent
f29d8e053a
commit
75737034d9
8 files changed
+238
-141
No files matched your search
@@ -90,9 +90,15 @@ export function baseItems() {
|
||||
'<p>三栏那个侧边目录会跟着滚动高亮,这个细节做得好。<code>IntersectionObserver</code> 还是算 scroll 位置?</p>' +
|
||||
'<p>另外时间线里「更早 / 上一篇」这组标签,是文章自己的字段还是按位置算的?</p>'
|
||||
})
|
||||
const r1 = reply(c1, { author: ME, ago: 5 * HOUR, html: '<p>算 scroll 位置,没用 observer —— 目录只有几条,没必要。</p>' })
|
||||
const r2 = reply(c1, { author: OWNER, ago: 4 * HOUR + 20 * MIN, html: '<p>后面会换成 observer,等条目多了再说。</p>' })
|
||||
// 回复「回复」:parent 指向另一条回复、root 仍指主楼,前端靠 @提及 认亲
|
||||
const r2b = reply(r2, { author: USERS.mason, ago: 4 * HOUR, html: '<p>行,那我等 observer。顺手问下高亮会做吗?</p>' })
|
||||
r2b.root_id = c1.id
|
||||
c1.replies = [
|
||||
reply(c1, { author: ME, ago: 5 * HOUR, html: '<p>算 scroll 位置,没用 observer —— 目录只有几条,没必要。</p>' }),
|
||||
reply(c1, { author: OWNER, ago: 4 * HOUR + 20 * MIN, html: '<p>后面会换成 observer,等条目多了再说。</p>' }),
|
||||
r1,
|
||||
r2,
|
||||
r2b,
|
||||
reply(c1, { author: USERS.yuki, ago: 3 * HOUR, html: '<p>标签是按位置算的:找到当前篇,前后各两篇贴上「上一篇 / 下一篇 / 更早 / 更新」。</p>' }),
|
||||
reply(c1, { author: USERS.mason, ago: 2 * HOUR, html: '<p>学到了。</p>' }),
|
||||
reply(c1, { author: USERS.noli, ago: 80 * MIN, html: '<p>同问 observer,楼上已经答了,收了。</p>' })
|
||||
|
||||
Reference in new issue
Block a user