Commit Graph
11 Commits
Author SHA1 Message Date
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
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