mirrors2/ONE
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
85 Commits 1 Branch 0 Tags
1b5022aefb8c40134b5549cbca4dce1384c3e020
Commit Graph
37 Commits
Author SHA1 Message Date
Sakurasan 1b5022aefb 去掉首字下沉：classic 与 vivid 的正文首字放大样式及短文补偿规则一并移除 2026-10-01 23:18:25 +08:00
Sakurasan e5dee4daf1 vivid 手机端顶栏下滑自动隐藏：滚过 80px 向下滑收起、向上滑或回页首即回现，2px 抖动过滤，抽屉打开期间强制可见 2026-10-01 17:32:54 +08:00
Sakurasan 00e85bf667 vivid 时间线加操作行（回复/赞/查看），长文文字边距对齐短文 8px 
- 卡片/纸条本体保持整块链接，操作行是链接外的兄弟节点（<a> 里不嵌交互元素）
- 回复 → 文章页 #comments 锚点；查看 → 文章页；赞是本机赞
  （无登录体系，状态存 localStorage，后续要做全局计数再加表和端点）
- Phosphor 图标：对话气泡 / 心形 / 眼睛，按下有缩放反馈，liked 态 accent 高亮
- .card .body 横向边距 26px→8px，与纸条文字同一条竖线
 2026-10-01 17:28:24 +08:00
Sakurasan 17b1143183 vivid 短文纸条上下内边距归零 2026-10-01 17:15:17 +08:00
Sakurasan d3ec39f27b vivid 短文文字缩进 12px→8px 2026-10-01 17:12:51 +08:00
Sakurasan 8315af0f0c vivid 短文：文字类内容缩进 12px（字不贴边线），图片网格全宽贴边并跟随纸条圆角裁切，外链卡片内缩 12px 2026-10-01 17:10:47 +08:00
Sakurasan 251de21d5b a.note 内边距删掉：短文正文与 12px 页边线齐平，淡底块紧贴内容 2026-10-01 17:05:57 +08:00
Sakurasan c81d56e4fb vivid 短文清掉多余边距：纸条内边距对齐 12px、meta 上方 16px→10px，手机端时间线条目间隔 18px→14px 2026-10-01 17:01:56 +08:00
Sakurasan a780da5c3a vivid 短文标记去线改淡底块：背景不占布局宽度，正文与卡片左缘对齐，区分信号 = accent 淡底 + SHORT 徽标 2026-10-01 16:59:09 +08:00
Sakurasan 2fea889515 vivid 手机端全站统一离边框 12px：hero/wrap/page-head/foot/showcase 对齐正文列与评论区（原 20/28px 混用），顶栏品牌左缘同步对齐，页脚底部留白收到 56px 2026-10-01 16:51:10 +08:00
Sakurasan 5cd0e63ae6 vivid 短文纸条贴边：左线 3px→2px，去掉 12px 左外边距、内边距 18/24→14/16，左侧总占位从近 60px 收到 38px 2026-10-01 16:45:33 +08:00
Sakurasan 75548bf07f 抽屉菜单打磨：面板收窄到 min(66vw,250px)，字重 800→500 配 Phosphor 图标，当前项改淡色胶囊高亮（引入 @phosphor-icons/vue 按需引入） 2026-10-01 16:36:39 +08:00
Sakurasan b407547db9 抽屉菜单去掉英文脚注：为多语言留路，栏目只保留本地化名称 2026-10-01 16:14:15 +08:00
Sakurasan f618bc48f5 vivid 手机端导航改抽屉：顶部玻璃条（品牌+汉堡）+ 右侧滑入面板，大字栏目带 mono 英文脚注与当前项短杠，Esc/scrim/路由变更自动收起 2026-10-01 15:55:45 +08:00
Sakurasan d3fe454cbe vivid 手机端标签栏挪回顶部：与桌面顶栏同构（全宽毛玻璃 + 发丝线），body 顶部让位 63px，QuickShort FAB 回落底部 2026-10-01 15:44:49 +08:00
Sakurasan 8fb15861fe vivid 手机端导航重做：底部玻璃标签栏一次直达，替掉 dock + 汉堡 + 上拉菜单 
- 五栏目平铺常驻拇指区，当前项分段高亮（与首页工具条分段控件同语言），
  44px 触达高度 + :active 缩放反馈，safe-area 适配保留
- 去掉菜单里的 01-05 编号、逐行分隔线与站点描述，导航只做导航
- 明暗切换：手机端挪到页脚 foot-nav 末尾的 ◐（≤720px 显示），
  桌面仍走顶栏主题键；QuickShort 的 FAB 底部给标签栏让位
 2026-10-01 15:22:00 +08:00
Sakurasan 92654dec9f 带图短文桌面端左右分栏：文字 2/5、图 3/5，图不再全宽铺开吃高度；窄屏维持堆叠 2026-09-30 22:55:42 +08:00
Sakurasan a4e182aeb4 短文配图网格改 2:1 定高：宽列下 1:1 格子顶掉一整屏，行 minmax(0,1fr) 防图片自然高撑爆 2026-09-30 22:37:39 +08:00
Sakurasan cc01650d0d vivid 品牌位做减法：头像外圈光环与绿色在线点都去掉 2026-09-30 22:37:39 +08:00
Sakurasan 942bad6158 yohaku 手机端打磨：dock 去圆标只留站名，压掉 iOS 顶部弹性露底（100dvh） 2026-09-30 21:06:43 +08:00
Sakurasan f1e639e0ba 账户中心：站主资料可编辑 + 身份绑定 + passkey 登录 
后台新增 /admin/account 一页，四块：公开资料、密码、第三方账号、Passkey。

-  schema：users 加 role（默认 reader），新表 user_identities、passkeys。
  user_identities 上双 UNIQUE —— (provider, extern_uid) 防一个外部账号顶两个身份，
  (user_id, provider) 防一站主绑两个同平台号，绑错也劫持不了。
  extern_uid 存平台稳定 ID，不存用户名（用户名可改）。
- 头像存 files 里的 key 而非 URL，换存储/CDN 不失效；单 key SetSetting 写入，
  避开 UpdateSettings 的整表替换会把它抹掉。站主名/简介从设置页挪到账户页，
  一个字段只留一个编辑入口。
- OAuth 绑定要求先有后台会话（绑定动作本身是提权路径）；已绑的站主身份登录后
  直接发 one_session，读者身份仍发 one_reader。
- passkey 走 go-webauthn v0.15.0（最后一条吃 go 1.24 的版本线），可发现凭据登录。
  必须显式设 ONE_WEBAUTHN_ORIGINS 才启用，不配就安静关掉。
  签名计数只记克隆警告、不硬拦 —— 云同步 passkey 的计数本就不单调。
- 密码故意留在 ONE_ADMIN_PASSWORD，不做哈希入库：这是「解绑一切、删光 passkey
  也还能进门」的保底，比 env 明文更值得守。memos 那个 SSO 建号随机密码无重置
  入口的坑，从设计上绕开。

已知限制：会话仍是有状态无关的 HMAC cookie，删 passkey / 解绑不会让已发出的
7 天后台会话失效 —— 要修得加一张吊销表。
 2026-09-30 01:08:55 +08:00
Sakurasan 7e302c51a6 新站标「一横」：墨圆 + 一道白横，接进两套 UI 与图标 
立意：既是字母 O 也是汉字「一」，对应站名 ONE / 一个博客。

- favicon.svg 重画：横杠用 fill-rule=evenodd 挖成真洞而不是叠一块纸色矩形，
  所以纸感 / 墨色暗端 / 后台卡片任何底色都直接透过去，不必为皮肤各出一版；
  SVG 内带 prefers-color-scheme，标签页深浅自动翻色
- 补 favicon-16/32.png（不认 SVG 的老浏览器）与 apple-touch-icon.png 180
  （iOS 不支持 SVG 且会把透明压成黑底，故铺纸色实底）。PNG 由临时 Go 程序
  按 8x8 子采样光栅化生成，生成器未入库，产物是资产
- LogoMark.vue 内联 SVG 组件：颜色跟 currentColor，尺寸由外层给
- 接入 6 处：classic 桌面左栏品牌位（原来是个排版字符 ○）、移动顶栏 brand、
  时间线头像位、详情页头像位、快发盒头像位；vivid 顶栏与底部 dock 品牌标记
  （右下角绿色在线点保留，它是「有人在写」的信号，不属于被替换的部分）
- 顺带清理：三处只为算首字母的死代码（initial 与只服务于它的 userName）、
  vivid 里一条被同特指度靠后规则完全覆盖的 .av 死规则；标记 wrapper 统一加
  flex:none，否则站名一长会被压成椭圆
 2026-09-29 21:04:55 +08:00
Sakurasan e6e4bdc71c 修两套 UI 的横向溢出 + vivid 页脚把源码入口从社交排里分出来 
溢出（两处，同一类成因）：
- vivid 时间线：短文正文用的是 .note .body 而不是 .prose，所以 c6eb0bb 给
  .prose 加的 overflow-wrap:anywhere 没覆盖到它，正文里的裸链接把列撑到 552px
  （视口 516）。补上 anywhere 而非 break-word——要参与 min-content 计算才压得住
- classic 时间线：.shell 的页边距在 640px 断点从 20px 收到 12px，而 .row-feed 的
  负出血要到 520px 才跟着收到 -12px，521~640 这段出血比父容器内边距多 4px，
  整页横向溢出。把出血断点对齐到 640px（桌面视觉不动）
- LinkCard 的 .lc-site 同样补 anywhere：主机名是最典型的不可断行长 token

vivid 页脚：源码仓库入口原先被 concat 进社交数组，和站主的 GitHub/X 排成同一行，
看起来像「又一个社交账号」。改成社交排只放账号（同 classic RightRail 的过滤），
源码图标与版权单独成 .foot-meta 压在页脚最底；样式写在 .foot a 之后，靠同特指度
的后者压掉页脚链接默认的强调色
 2026-09-29 12:01:11 +08:00
Sakurasan c2d5e9db89 主题功能同步：vivid 页脚补社交按钮排（含源码入口，居中）；classic 文章页补右栏目录（滚动高亮）与顶部阅读进度条——快发盒经核实两套 UI 均已存在，无需补 2026-09-29 01:23:29 +08:00
Sakurasan 23771f0661 文章排版四件套（参考 xLog）：盘古之白 + 表格圆角斑马纹 + 代码块封顶与复制按钮 + 标题悬停锚点 
- PanguHTML：CJK 与拉丁/数字间补空格，标签原样保留、code/pre 内文本不动；详情/时间线短文/RSS 描述三个出口生效（带单测）
- 表格改圆角容器 + tbody 斑马纹 + 纵向大留白（classic/vivid 双主题）
- pre max-height 30.5em 封顶内部滚动；enhanceProse 注入悬停复制按钮（App 全局委托），按下有 2px 物理感
- 带 id 的 h2-h4 悬停浮现 # 锚点，点击跳转
- 中文字体栈此前已配（PingFang SC 等），无需改动
 2026-09-29 00:53:50 +08:00
Sakurasan b93fe9847c 长文图片缩放：编辑器拖拽把手的比例在文章页生效（alt 数字还原为宽度并居中）+ 把手默认半透明提高可发现性 2026-09-28 23:05:08 +08:00
Sakurasan 661d157b6c 短文支持链接预览卡片：新增 linkmeta 抓取 + 字符集解码 
- internal/linkmeta：取正文第一个 http(s) 链接，解析 og: → twitter: → <title>/
  description 逐级兜底，解 HTML 实体、相对图片补成绝对地址。按对外抓取设防：
  只放行 http(s)、读满 512KB 即停、最多 3 次跳转、整体限时；SSRF 防护做在拨号
  那一刻——解析出 IP 后筛掉回环/私网/链路本地/组播/CGNAT 再直连该 IP，堵住
  DNS 重绑定窗口
- 字符集转换：按「HTTP 头 charset → <meta charset> → UTF-8」解码，gb2312 归一
  成 gbk（超集，按声明解会漏字）；认不出的字符名退回原始字节不报错。为此引入
  golang.org/x/text（官方包，约 +1MB 二进制）。tidy 顺带把 aws-sdk 三个包从
  indirect 修正为直接依赖——storage/r2.go 本来就直接用它们
- posts 加 link_card 列（JSON，沿用 images 的编解码）；admin 保存短文时重算：
  同链接沿用旧卡片不重复打远端，删链接或抓取失败则清空，长文不参与
- 前端 LinkCard 组件接两套 UI 的时间线与详情页，配色写成 vivid 变量优先、
  classic 变量兜底，一份样式两边通用；外链图挂了自动隐藏不留空框
- 卡片用 div[role=link] 而非 <a>（vivid 整条短文包在 RouterLink 里，嵌套 <a>
  非法），点击必须 preventDefault——只 stop 挡不住祖先 <a> 的默认激活行为
 2026-09-28 17:13:20 +08:00
Sakurasan 6108aca34c 缩略图懒生成 + 评论登录限流：时间线不再拉原图 
- 新增 /uploads/thumb/{key}?w=：首访从存储端读一次原图，标准库盒均值缩放后
  落盘 data/.thumbnail_cache（按内容哈希命名，天然失效）；失败写 .failed 冷却
  一小时，非图片/超大一律 302 回原图，前端无感。原图路由改用 ServeContent，
  补上视频拖动进度条所需的 Range 支持
- 前端 thumbURL/thumbifyHtml 接入两套 UI 的时间线配图、长文封面与短文正文，
  并补 loading=lazy；详情页与灯箱仍用原图。/api/site 改为
  {settings, uploads_public_base}，让前端识别哪些直链属于自家存储
- 后台登录的滑动窗口限速器抽成 internal/ratelimit 共享包（调用面不变），
  新增：读者登录失败按 IP 20 次/10 分钟、评论写入按读者 5 条/分钟
  （站主豁免，且只计成功写入）
 2026-09-28 13:34:19 +08:00
Sakurasan 740d47bbf6 短文配图：快发盒上传 + Twitter 式网格 + 全站 lightbox 预览；整卡点击进详情、时间线短文豁免首字 2026-09-27 23:41:34 +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 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
Sakurasan 8fd8674910 余白：文章详情按 innei.in 重排题头与正文 + 顶栏宽度统一 + 纸面留白收紧 
参考 innei.in 的文章页（它本身也用 yohaku 命名，把它的 CSS 拆出来对了值）

题头居中
- 元信息行 justify-content:center + tabular-nums（日期/字数等宽，换行不左右跳），
  标题 text-align:center + text-wrap:balance（防居中标题折出「最后一行只落一两个字」）；
  正文仍回到左对齐，和参考一致
- 这几条都改成 > 直接子元素：原来的 .paper h1 会连正文里的 h1 一起命中
  （有的文章正文就是从 `# 标题` 开始的），把正文标题也居中了——手机截图上一眼看到

正文
- 段距 0 0 1.35em -> 上下各 1.5em（参考 .v10dui0 .rich-paragraph），首末元素吃掉外边距
- 补设计稿漏掉的 h1 / h3 / ol / img / figcaption（h1 之前是浏览器默认 2em+.67em 外边距、
  h3 是 1.17em，在 16.5px/1.95 的正文里很突兀；插图之前顶满整列且和文字紧贴）
- 链接改用 text-decoration（1px、underline-offset 2px、hover 加粗 2px）替掉 border-bottom
- 分隔线收成 60px 居中细线；.prose 加 text-autospace:normal（中英混排自动字距）

把 classic 的 .prose 挡回去
- styles.css 那段 .prose 不带 data-ui 前缀，vivid 也照样命中；我们的规则特指度更高，
  但只覆盖自己声明过的属性，没声明的就漏过来。量出来并逐条认领：
  a 的 border-bottom（和新下划线叠成双线）、hr 的 height+background（细线被垫成 2px）、
  h3::after（每条 h3 下方多一条 28×2 强调色横杠）、ul/ol 的 1.1em 下边距、
  blockquote 末段 p、pre 的 1px 边框、h4（用 classic 的 16.5px 不成层级）
- 首字下沉也在这批里：设计稿没有，是 classic 漏过来的固定 52px，参考站余白模式也有，
  于是认领成自己的 2.4em（跟着正文字号缩放），短文按 classic 的分法关掉

顶栏宽度
- 撤掉上一版按 /post/* 放宽到 1340 的 .top-in.wide：从首页点进文章时导航会跳一下。
  顶栏全站固定 1100，品牌与主题键在首页和文章页落在同一 x（实测 199 / 1207）

纸面与栅格收紧
- .paper padding 44/48/52 -> 30/24/40；--v-measure 680 -> 728；中列仍 776 = 728 + 24×2
  （这三个数是一组，只改内边距会让正文在列里偏左：实测离左栏 83px、离右栏 131px）
- .article-layout max-width 1340 -> 1272、padding 36/28/60 -> 24/24/44、gap 32 -> 24。
  上限必须正好等于「三栏 + 两个 gap + 左右内边距」，声明的 gap 才是渲染出来的 gap：
  180+776+220+24×2 = 1224 内容宽，+48 = 1272。否则 space-between 把富余塞回列间隙，
  数字改小也不动（实测只改 pad/gap 数字，正文到侧栏反而 78 -> 86）
- 手机 .article-layout padding 24/20/48 -> 20/20/40

实测（用列的实际位置反推，不信任声明值；正文宽度用 offsetWidth，.paper 有入场动画的 scale）
- 1456：正文到侧栏 78 -> 48，正文 728 不变，布局 1340 -> 1272
- 1280：正文 697 -> 721；1200：617 -> 641；三档实际列间隙都等于声明的 24
- 公网 138.2.17.73:8080 产物 md5 与磁盘一致；npm run build 无警告
 2026-09-24 01:03:59 +08:00
Sakurasan 565b5be3d7 余白：桌面端文章去卡片 + 阅读页宽屏三栏外扩 
去卡片（桌面 + 手机统一）
- .paper 去掉底色 / 1px 边框 / 20px 圆角 / box-shadow，正文直接落在页面上；
  右上角那团强调色渐晕（::before）是卡片的角饰，一并删掉，position/overflow 随之不再需要
- 48px 横向内边距保留：它不是装饰，是「中列 776 - 96 = 680 = --measure」这半个算式，
  删了正文要么超出行宽、要么在列里右空 96px；手机上归零（那 48px 在 390 屏上是浪费）

宽屏三栏外扩（≥1200px）
- 1100 的画布上限在 1456 的屏上两侧各空 171px，同时中列只有 650px、正文 554px
  ——根本没到 --measure 的 680。所以「文章太窄」和「留白太大」是同一个原因
- 上限提到 1340，列改 180 / minmax(0,776) / 220 + space-between：
  中列 776 = 680(正文) + 48×2(.paper 内边距)，正文吃满 --measure 且列内不剩空；
  space-between 让时间线左缘 / 目录右缘正好落在 28px 内边距上
- 顶栏在阅读页同步放宽（YohakuTop 按 /post/* 加 .top-in.wide），否则品牌和主题键
  会比左右栏缩进一百多像素。首页仍 1100 —— 信息流卡片跟着放到 1340 只会把封面拉成条

实测（offsetWidth，.paper 有入场动画的 scale，getBoundingClientRect 会带上它）
- 1456：画布 1100 -> 1340，两侧空白 171 -> 51，中列 650 -> 776，正文 554 -> 678
- 1920：两侧空白 403 -> 283；1200 及以下不变；首页 top-in 仍 1100、卡片 1044
- 平铺后桌面 .paper：bg 透明 / border 0 / radius 0 / shadow none / ::before none，
  正文 680；手机正文 335（与上一版一致）

修一处自己引入的编译错误：顶栏那个 class 起初命名 wide，与组件里已有的
wide（721px matchMedia）撞名 —— Identifier 'wide' has already been declared，
:3000 直接 500、页面全白。已改名 mqWide。

公网 138.2.17.73:8080 产物 md5 与磁盘一致；npm run build 无警告。
 2026-09-24 00:30:15 +08:00
Sakurasan 5f82b6012f 余白：手机端文章去卡片 + 信息流元信息下移 + 标签统一为纯文本 #标签 
信息流（首页）
- 元信息（类型 / 日期 / 时长 / 字数）从标题上方挪到摘要之后，和标签同一块：
  卡片开头只留标题摘要，读完再看「什么时候、多长」
- 标签去掉 chip 样式，改为纯文本 #标签（# 走 ::before，链接的可读名仍是标签本身）；
  原来那排药丸看着能点，其实是卡片链接里的 span，点哪儿都进文章
- .card .tags / .note .tags 间距 6px -> 14px，配合纯文本

文章详情页
- 手机上不再套卡片：.article-layout 28px + .paper 22px + 卡片边框三层一共
  吃掉约 84px，390 屏上正文只剩 275px；平铺后 330px。同时关掉卡片右上角
  那团强调色渐晕（::before，卡片没了就只剩一块脏）。桌面 / 平板仍是卡片
- 底部标签跟信息流统一成纯文本 #标签，并去掉「标签」二字的小标
  （有 # 就是标签，再来两个字是重复）
- 详情页的标签是链接，补 padding:6px 0 —— 12.5px 裸文字按下去只有 ~18px 高，
  手机上不好点；不画背景不画边框，观感不变

标签样式只有 home.css 一处 .tg，信息流与详情页共用。

验证：headless Chromium 从站上量取计算样式 + 截图（390 / 1280）
- 详情页手机：paper bg=透明 border=0 radius=0 shadow=none padding=0，::before=none，
  正文 330px；桌面：bg=#fffefb border=1px radius=20px padding=48px，::before=block
- .end 子元素只剩 [A.tg, A.tg]；.tg 12.5px / padding 0 / ::before "#"；gap 14px
- 公网 138.2.17.73:8080 产物 md5 与磁盘一致；npm run build 无警告
 2026-09-24 00:09:29 +08:00
Sakurasan a1d515e435 余白 UI：手机端适配（☰ 全屏菜单 + 筛选条收口）+ 若干层叠与卡片修正 
手机端（≤720 / ≤640）
- 窄屏导航不再平铺：设计稿在窄屏把导航整个 display:none，手机上会没有任何
  入口，之前的做法是在品牌行下再摊一条横向滚动行，5 个中文项挤成一条读起来
  很碎。改为顶栏只留「头像 + ☰」，点 ☰ 开全屏菜单：竖排大字 + 英文小标、
  当前项高亮、底部放主题切换；顶行复用同款标头（关掉时视觉不跳），
  Esc / 点击空白 / 路由变化 / 窗口拉宽回桌面 都会关闭，
  打开时锁背景滚动并把焦点交给对话框（preventScroll）
- 顶栏主题切换 ◐ 在窄屏收进 ☰：两边各一个就是重复。桌面没有 ☰，
  且那枚 ◐ 是设计稿顶栏自带的（index.html:782），所以只在窄屏藏
- 筛选条：≤640 收起标签 chips（会折三四行）与搜索框，只留类型分段；
  标签仍有 /tags 整页入口
- viewport 补 viewport-fit=cover / interactive-widget；触屏补
  -webkit-tap-highlight-color、touch-action:manipulation、44px 可点目标、
  16px 输入框（防 iOS 聚焦缩放）

层叠（这次量出来的真问题）
- 新增 mobile.css 并在 main.ts 里最后 import：.hero/.wrap/.paper/.about-card/
  .toolbar 的窄屏覆盖原本写在 chrome.css（第 2 个 import），同特指度被
  home/article/pages.css 全程压掉 —— 媒体查询不加特指度，「后导入者赢」，
  所以手机上左右留白一直是 28px 而不是设计意图的 18px，圆角/内边距也没换过。
  现统一到 20px，实测 hero / wrap / showcase 左边缘对齐；
  同时删掉 home.css 里那条 ≤860 的 showcase 18px（与同宽度下 hero 的 28px 错开）
- .icon-btn 的 44px 触屏尺寸从 tokens.css 挪回 chrome.css 自己那边：
  原位置被后导入的同特指度 36px 反压，触屏上实际是 36×44 的椭圆
- .toolbar 防线补 border:0：只中和 top 会漏出左右两道边框
- 后台 3 处 100vh 补 100dvh 兜底；9 处 transition:all 展开为显式属性列表；
  19 处 :hover 收进 @media (hover:hover) and (pointer:fine)（触屏不再粘住 hover）

组件修正
- 首页作品卡片改用与 /projects 同一套结构：文字包进 .body（.proj 自身
  padding:0，原来 h3/p 直接贴左边框）、有封面才渲染 .cov（原来无封面时留
  150px 空色块）、无封面时用 .st-plain 显示状态
- .proj-grid 轨道下限改 min(300px,100%)：320px 视口下裸 300px 会顶破容器，
  被 body 的 overflow-x:hidden 裁掉右边
- 「全部作品 / 查看所有作品」改 RouterLink（原为 <a href>，会整页重载）

清理
- 删除 panels.css：.panels/.panel/.cloud/.plist/.about-box 在 vivid 里已无任何
  使用者（后台走 data-ui=classic，命中不到），连带 tokens.css 里的死规则与
  main.ts 的 import
- 修正注释里残留的 panels 描述

验证：headless Chromium 同源 iframe 探针 + 截图，390 / 320 / 1200 三档；
/admin 确认 classic 未被带坏；npm run build 无警告。
 2026-09-23 23:20:51 +08:00
Sakurasan fbda293072 余白 UI：按设计稿模块化还原 + 站主自定义 CSS + 详情 neighbors + 静态缓存头 
前端（新增 ui/yohaku/，各视图按 ui_id=vivid 分支渲染；classic 与后台不受影响）
- 令牌层：设计稿数值原样落地，28 个 --v-* 为站主接口（自定义 CSS 可覆盖，
  放 @layer 让出优先级）；另加防线，中和 styles.css 裸选择器
  （h1 衬线 / body 行高 / 后台 .stat/.toolbar/.chip 卡片）漏进余白元素
- 顶栏（滚动收缩态）/ 阅读进度（顶部 2px + READ n%）/ 页脚
- 首页：hero（统计条）/ 筛选（类型分段 + 标签 chips + 搜索）/
  长文卡片与短文纸条 / 分页 / 作品展示区（3 件 + 查看所有，参照 diygod.cc）；
  面板栅格改 1.6fr 1fr 1fr 且高度自适应内容（标签云明显大一圈）
- 文章页：三栏「纸」—— 左时间线（前后各两篇）/ 中纸张 / 右目录与阅读进度；
  短文详情不显示标题（h1 视觉隐藏保留无障碍）
- 全部规则收敛在 html[data-ui='vivid'] 前缀下；无 !important

后端
- GET /api/posts/:slug 增 neighbors（前后各两篇，详情页侧栏时间线用）
- SPA 缓存头：index.html no-cache，assets/ 带 hash 长期 immutable
  （此前无缓存头，浏览器会一直拿旧构建）

其他
- 站主自定义 CSS 管线（customCss.js + ui/sections.js，按分区注入，仅 vivid）
- 删除旧 vivid 覆盖层实现（VividNav/Hero/Footer/Timeline/Toc、ui/vivid.css）
- 设计稿原型附于仓库根 index.html；作品表清掉外链 diygod.cc 的示例封面，
  改用本地占位图（public/covers/）
 2026-09-23 15:37:42 +08:00