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
|
5dfa1550fb
|
后台:站点设置新增社交链接与自定义 JS 字段
social_links 以 JSON 数组存进 settings KV([{label,url}]),解码容错:
空串 / 坏 JSON / 缺 label 或 url 的条目一律丢弃,前台拿到空数组时区块
自动隐藏。custom_js 原样存取——它是站主自己的代码(统计脚本等),
做转义只会把脚本洗坏。后台表单与前台展示在下一笔前端提交里。
|
2026-09-27 03:34:43 +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
|
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 |
|
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
|
c431248796
|
后台:vivid 选项文案与色块对齐余白主题
界面选择里 vivid 的说明改为「现代:…」,色块文字改「现代」,
配色从紫色对齐到余白的纸色底 + 春蓝强调色(与前台 --accent 同源)。
|
2026-09-23 16:20:57 +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 |
|
Sakurasan
|
3238175ef0
|
作品展示页:前端展示 + 后台增删改查
- 新增 projects 表与迁移(唯一 slug 索引)
- 后端:公开 GET /api/projects,后台 GET/POST/PUT/DELETE /api/admin/projects
- 前端:/projects 双虚线边框卡片页(参考 diygod.cc/projects),后台管理页
- 左栏/手机顶栏/后台侧栏均加「作品」入口
- 补充项目 CRUD 单元测试与后台鉴权拦截测试
|
2026-09-22 01:47:59 +08:00 |
|
Sakurasan
|
2b53eb976b
|
流体交互层:按压反馈 + 真半透明材质 + 主题交叉过渡 + 弹层材质化
按 apple-design(Designing Fluid Interfaces)审查落地:
- 全站补 :active 按压缩放反馈(按钮/tab/链接/命令面板/前后栏导航),交互元素加 touch-action
- TopBar、首页标题栏、浮动主题钮改 color-mix 半透明 + blur 真材质,配 reduced-transparency 回退
- 主题切换 250ms 交叉过渡(theme-anim 瞬时类),消除亮度突变
- CommandPalette/ShortcutsPanel 过 <Transition name="pop">:scrim 淡入 + 面板自顶部锚点 scale 进入,退出原路返回
- 首页标题栏收缩由二值跳变改为滚动进度 --sq 连续插值(16–56px)
- reduced-motion 例外:弹层保留短交叉淡入,禁位移与主题过渡
- 触控目标增大(主题钮 40/44px、tab、后台导航项),文章大标题负字距 + 收紧行高
|
2026-09-22 00:45:51 +08:00 |
|
Sakurasan
|
dd2994189a
|
安全加固 + 结构清理:修注入/串写/竞态,DOMPurify 上线,后端补事务与 handler 测试
后端:
- ORDER BY 白名单(sanitizeOrder)堵住 ?order= SQL 注入,补回归测试
- 登录限速(每 IP 10 次失败/10 分钟 429)、TLS/反代下 Secure cookie、NewAPI 构造器
- Delete/setTags/MergeTags/DeleteTag 包事务;Archive 去 500 篇上限
- 列表接口裁剪:不传 content_md,长文 content_html 截 600,新增 content_len;health 探 DB
前端:
- EditorView 路由复用串写修复(RouterView :key + sync watch 回写原文章)
- v-html 出口统一过 DOMPurify(sanitizeHtml),stripTags 改 DOMParser
- 列表竞态防护(Home/Tag/Posts 请求序号)、TagView 分页修复
- 侧栏接口 30s 缓存去重;one:unauthorized 监听器泄漏修复
- 删 styles.css 498 行重复块;移除 tailwind/marked/vue-tsc 死依赖;CommandPalette a11y 语义
|
2026-09-21 23:59:09 +08:00 |
|
Sakurasan
|
c762f06cd7
|
首页:右侧栏收窄 + 标题栏滚动收缩贴顶
- --col-right 306→264,右侧卡片更紧凑
- HomeView 加滚动监听,滚动后 .sticky-head 进入 is-compact:大标题平滑折叠,仅 tabs 贴顶
- ≤780px 时 sticky-head top:54px 避让吸顶 TopBar
|
2026-09-21 22:53:18 +08:00 |
|
Sakurasan
|
3918df5bfd
|
编辑器 Markdown 工具栏 + 后台主题切换移入侧栏 footer
- EditorView:新增工具栏(粗体/斜体/删除线/行内码/代码块/链接/图片等选区插入),移除封面 URL 输入框
- AdminLayout:删除无样式的 .theme-zone,ThemeSwitcher 并入 footer 行(左账号信息、右主题按钮)
|
2026-09-21 22:42:47 +08:00 |
|
cjun
|
a721e26e45
|
后台管理重塑 + 主题 / 皮肤双轴 + a11y 与编辑器增强
Backend
- Post 加 cover_url,Tag 加 color;老库 ALTER 兼容
- admin API: GET /api/admin/dashboard,POST /bulk,POST /tags/:id/merge,
PUT /tags/:id 接 {name,color},Settings 加 light_skin_id(兼容老 theme_id)
- 白名单兜底(非法 light_skin_id 落 paper)
- 新增合并 / Dashboard / Theme 测试覆盖
Frontend
- AdminLayout 改为侧边栏布局;新增 Dashboard 总览页
- PostsView 卡片化预览 + 筛选 chip + 批量操作 + 排序
- EditorView 增强:封面图 / WYSIWYG↔MD 双模式 / 实时大纲 / 字数统计 /
自动保存条 / ⌘S / unsaved 守卫(beforeunload + beforeRouteLeave)
- TagsView 加色板 + 合并到目标
- SettingsView 主题外观改为「亮色皮肤」三选一 + 「暗色皮肤」固定墨色说明
- 新增 CommandPalette(⌘K)+ ShortcutsPanel(?)
- api.js 接新接口;router.js 拆 /admin → /admin/posts
主题 / 皮肤双轴
- site.js: themeMode(light/dark/auto)+ light_skin_id;data-theme 前台,
data-admin-theme 后台(仅跟随 mode 切明暗)
- styles.css: :root[data-theme] 四套皮肤 + :root[data-admin-theme=dark] 后台墨感
- 修 sticky head / ThemeSwitcher / 表单 / 批量条 等 token 引用
- 后台用独立 --admin-* 系列,与前台主题解耦
- 左栏底部放 inline 形态 ThemeSwitcher(图标按钮 36×36),mobile 保留浮窗
a11y
- 全局 :focus-visible 描边(前后台跟随 token)
- prefers-reduced-motion 全局降级
- color-scheme 随主题切
- meta theme-color 双套(light/dark)
- 命令面板 / 快捷键面板:role=dialog aria-modal aria-label + 搜索框 aria-label
- icon-only 按钮加 aria-label(tag × / 清除选择 / 移除封面等)
- 输入框 aria-label + spellcheck=false
- PostsView 筛选同步 URL(可分享、可刷新保留)
- img width/height + loading=lazy
- utils.js 用 Intl.DateTimeFormat(zh-CN / sv-SE)
|
2026-09-21 22:14:58 +08:00 |
|
Sakurasan
|
4d8f2de3a4
|
MVP: 按 07 风格重写前端 + Go 后端落地(长文/短文、编辑器、后台管理)
|
2026-09-20 20:56:03 +08:00 |
|
Sakurasan
|
edee708802
|
baseline: 保留 07 风格重写前的 Vue 前端原件
|
2026-09-20 20:48:00 +08:00 |
|