Sakurasan
815eff9f9a
评论区（按已批准的设计文档，阶段一=前端；后端与多用户为阶段二/三）
- 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
22 lines
813 B
Vue
22 lines
813 B
Vue
<script setup>
|
||
import { computed } from 'vue'
|
||
import { sanitizeHtml } from '../../utils'
|
||
|
||
// 评论正文的唯一 v-html 出口。
|
||
// 后端已经用 goldmark 渲染并转义过一遍（不开启 Unsafe），这里再过一次
|
||
// DOMPurify —— 和文章正文同一条规矩：任何 v-html 都要走 sanitizeHtml。
|
||
//
|
||
// 刻意不给这个组件加 <style>：它被 classic 和 vivid 两边共用，
|
||
// 而 v-html 出来的内部元素选不到作用域样式（只给子组件根元素加 data-v）。
|
||
// 正文排版由两边各自的全局规则负责（vivid: comments.css，classic: styles.css）。
|
||
const props = defineProps({
|
||
html: { type: String, default: '' }
|
||
})
|
||
|
||
const safe = computed(() => sanitizeHtml(props.html || ''))
|
||
</script>
|
||
|
||
<template>
|
||
<div class="cm-md" v-html="safe" />
|
||
</template>
|