Sakurasan
bc1b0ccce3
评论表情 - 发布 / 回复 / 编辑三处输入框挂上表情面板（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 与主题浮钮不重叠 / 顶栏隐藏与筛选条跟随同步
36 lines
1.8 KiB
TypeScript
36 lines
1.8 KiB
TypeScript
import { createApp } from 'vue'
|
|
import App from './App.vue'
|
|
import { router } from './router'
|
|
import { loadSite } from './site'
|
|
import { installCustomCss } from './customCss'
|
|
import { installCustomJs } from './customJs'
|
|
import './styles.css'
|
|
// vivid（余白）是第二套 UI，全部规则都以 html[data-ui="vivid"] 前缀收敛；
|
|
// 必须排在 styles.css 之后，才能在同特指度时按源码顺序取胜。
|
|
// 顺序即层叠顺序：令牌 → 骨架 → 各视图 → 手机收口。不要把 tokens/mobile 挪位置。
|
|
import './ui/yohaku/tokens.css'
|
|
import './ui/yohaku/chrome.css'
|
|
import './ui/yohaku/home.css'
|
|
import './ui/yohaku/article.css'
|
|
import './ui/yohaku/pages.css'
|
|
// 评论区的 vivid 差异。插在 pages 之后、mobile 之前 —— 它要盖住 styles.css 里
|
|
// 同特指度的 .cm-* 基础版，又必须让 mobile.css 保持最后。它自己的窄屏规则写在文件内。
|
|
import './ui/yohaku/comments.css'
|
|
// mobile.css 必须排最后：它修正的是上面几个文件里同特指度的基准尺寸，
|
|
// 媒体查询不加特指度，「后导入者赢」是它唯一的凭仗。
|
|
import './ui/yohaku/mobile.css'
|
|
|
|
loadSite().then(async () => {
|
|
installCustomCss(router)
|
|
// 站主自定义 JS（统计脚本）：公开页注入一次，后台不注入
|
|
installCustomJs(router)
|
|
// 评论区的 dev mock：只有 dev 且带 ?mock 时才会被下载。
|
|
// import.meta.env.DEV 在 build 时被替换成 false，整个分支连同这个动态 chunk
|
|
// 一起被 rollup 丢掉（产物里 grep __COMMENT_MOCK__ 应为空）。
|
|
// 必须等它装完再挂载 —— 否则组件首屏那几次请求会先打到真接口上。
|
|
if (import.meta.env.DEV && new URLSearchParams(location.search).has('mock')) {
|
|
await import('./mocks/comments').then((m) => m.install())
|
|
}
|
|
createApp(App).use(router).mount('#app')
|
|
})
|