Commit Graph
5 Commits
Author SHA1 Message Date
Sakurasan 0929f880e3 评论区:禁言卡判断挪到匿名判断之后——匿名访客读 user.banned 抛错导致整个评论区消失 2026-09-28 00:27:41 +08:00
Sakurasan cfd6948987 评论阶段二:GitHub OAuth 登录 + 评论表/用户表 + 先审后显开关 + 禁言 + 后台评论管理页
- auth 包:读者会话(one_reader,与后台令牌互斥)+ GitHub OAuth 客户端;Verify 校验 HMAC 与 reader: 前缀
- 公开 API:auth 五端点、评论列表(顶层可见+自己待审、回复内嵌)、发表(登录/禁言/开关/500 字校验)、10 分钟编辑窗、软删墓碑
- 管理端:评论列表(待审/已通过/全部)、通过、软删、读者列表、禁言切换
- 前台:登录卡/禁言卡;后台:评论管理页 + 设置页审核开关
2026-09-27 23:41:40 +08:00
Sakurasan bc1b0ccce3 交互:表情面板 + 短文快发盒 + 双 UI 手机导航重做 + 社交链接与统计脚本接入
评论表情
- 发布 / 回复 / 编辑三处输入框挂上表情面板(EmojiPicker + emoji.js):
  「表情 / 颜文字」两个 tab,光标处插入(insertAtCursor,未聚焦追加到
  末尾),面板自己管点外 / Esc 收起
- 操作钮 ✎ ✕ ↩ 圆图标改文字钮(回复 / 编辑 / 删除),删除悬停给红,
  补 focus-visible;编辑态去掉「正在改定此评:」交给 placeholder

双 UI 手机导航(参考 innei.in 的底部胶囊 + 上拉菜单)
- 余白:顶栏手机端整条退场,底部悬浮 dock(品牌 + NavBurger 汉堡),
  点开上拉毛玻璃菜单:mono 序号 01-05 + 中文大字 + 英文小字,当前项
  强调色 + 左缘短杠,逐项错峰 45ms 入场;dock 在菜单之下原位变 ✕
- classic:顶栏 brand 居中(三列网格)+ NavBurger + 下拉纸片;下滑隐藏
  上滑唤回——上滑要累计 40px 才算数(页面高度稳定时浏览器会回弹几十
  像素,那种「假上滑」不拉回顶栏);首页 .sticky-head 用 var(--topbar-h)
  跟随顶栏一起滑
- NavBurger 两套 UI 共用;经典手机 FAB 避开右下角主题浮钮

sticky 失效修复
- body overflow-x:hidden 把 body 变成滚动容器,页内所有 position:sticky
  全部失明(首页筛选条吸顶从来没生效过)→ 改 overflow-x:clip,
  只裁剪不建滚动容器
- 余白手机端 .article-layout 裸 1fr 的自动最小尺寸是 min-content,
  长 token 把整列顶到 592px 横向溢出 → minmax(0,1fr) + overflow-wrap

短文快发盒(QuickShort,Twitter 式)
- 时间线顶部内联发布盒:头像 + 输入框 + 发布(Ctrl/⌘+Enter),手机收进
  右下角 FAB + 上拉 sheet;只有管理员会话在场才渲染(/api/admin/me
  探测),发布走真实 createPost(kind:short)——标题 / slug / 阅读时长
  后端自动生成。读者社交登录是阶段二产物,后端就绪前访客无法登录,
  所以天然只有站主可见;要放开给读者发,换探测和发布接口即可
- 经典 FAB 避开右下角主题浮钮(bottom 72),余白贴安全区(bottom 20)

社交链接 + 统计脚本接入
- Settings 的 social_links 前台两处渲染:经典左栏「常读标签」区域改为
  「社交账号」图标行(url 域名推导图标:GitHub / Telegram / X / 邮箱
  信封,认不出显示名称文字),右栏卡片下方 Twitter 式页脚小字区三排
  (导航行 / 社交图标行 / 项目源码 + 版权行)——项目源码是固定入口
  (本站 git remote),与版权同为固定元素,后台配置挤不掉
- Settings 加 custom_js:后台贴完整 <script> 片段(GA / Plausible /
  Umami),DOMParser 解析后逐个重建 script 节点插进 head(innerHTML
  塞的 script 不会执行);公开页每页注入一次,/admin 不注入;
  站主自己的代码不做清洗(洗 JS 只会把统计脚本洗坏)
- 订阅卡删掉:RSS 入口在页脚小字里,一张卡只为一个链接不值得

杂项
- vite dev 加 --host:手机连局域网直接评审
- 评论 mock 的状态浮层窄屏上移,给底部 dock 让位
- 经典页脚在 12px 页边距下的排版对齐

验证
- 后端 go test 全绿;前端构建通过
- 浏览器逐状态过目:双 UI × 亮暗 × 桌面/手机;表情插入 / 短文发布真实
  入库(测试内容已删)/ dock 与 sheet 开合 / FAB 与主题浮钮不重叠 /
  顶栏隐藏与筛选条跟随同步
2026-09-27 03:35:28 +08:00
Sakurasan f29d8e053a 评论:区块挂在 site.comments_enabled 上,后端就绪前线上不渲染
阶段一刚推上去就暴露一个问题:线上 8080 是真实环境,评论区组件照常渲染,
而 /api/comments 还不存在 —— 真实访客看到「请求失败(404)」和
「站点还没配置登录方式」。

修法:CommentSection 用 v-if="!!Number(site.comments_enabled)" 兜住。
settings 是 KV 字符串,'1'/1/true 都算开;后端阶段二把这个字段加进
model.Settings 后 /api/site 自然下发,区块自动出现,前端不用再动。
mock 里手动 site.comments_enabled = true,评审不受影响。

实测:mock 模式照常显示(共 8 条评论);线上 8080 的 .cm-sec 不再渲染、
无 404 错误。
2026-09-26 18:38:52 +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