评论阶段一（前端）：评论区 + 登录引导卡 + 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

frontend/src/api.js

@@ -85,6 +85,31 @@ export const adminApi = {
   saveSettings: (body) => request('/api/admin/settings', { method: 'PUT', body })
 }
 
+// 读者（评论区）身份。会话是服务端 httpOnly cookie（one_reader），
+// 前端只拿 /api/auth/me 的结果做展示，不存 token。
+// 注意 me 在匿名时返回 200 {user:null} 而不是 401 —— request() 对每个 401
+// 都会派发 one:unauthorized，匿名访客每次开页都会刷一遍事件。
+export const readerApi = {
+  me: () => request('/api/auth/me'),
+  providers: () => request('/api/auth/providers'),
+  logout: () => request('/api/auth/logout', { method: 'POST' }),
+  // Telegram 是 Login Widget：官方脚本回调里直接带着签名字段，没有 code 可换
+  telegram: (payload) => request('/api/auth/telegram', { method: 'POST', body: payload }),
+
+  comments: (postId, { sort = 'default', page = 1, size = 10 } = {}) =>
+    request('/api/comments?' + new URLSearchParams({ post_id: postId, sort, page, size })),
+  thread: (rootId, cursor = '', size = 10) =>
+    request(`/api/comments/${rootId}/thread?` + new URLSearchParams({ cursor, size })),
+  create: (postId, bodyMd, parentId = 0) =>
+    request('/api/comments', {
+      method: 'POST',
+      body: { post_id: postId, parent_id: parentId, body_md: bodyMd }
+    }),
+  edit: (id, bodyMd) =>
+    request(`/api/comments/${id}`, { method: 'PUT', body: { body_md: bodyMd } }),
+  remove: (id) => request(`/api/comments/${id}`, { method: 'DELETE' })
+}
+
 // 后台登录态：cookie 由服务端下发（httpOnly），这里只存一份展示用的用户名
 const USER_KEY = 'one.admin.user'