xfy
f984c0c3e7
主题切换的圆形展开 VT 动画对可运行代码块不生效:代码块直接瞬切,而非被 圆形展开揭示。上一个提交(theme-change 事件同步 setTheme)只解决了快照时序 问题,但真实环境仍不生效。 根因(真实页面逐帧截图 + 像素采样确认):article.post-single 的 animate-page-enter 入场动画用 transform: translateY/scale,因 animation-fill-mode: both 在动画结束后 保留计算值。transform: none 被浏览器序列化为 matrix(1,0,0,1,0,0),仍是「非 none」 的 transform,创建堆叠上下文(stack context)。::view-transition-old/new(root) 顶层 伪元素无法正确覆盖堆叠上下文内部的 CodeMirror/xterm——圆形展开扫过代码块区域时, 伪元素被穿透,代码块的实时 DOM 变化(use_effect 驱动的 setTheme)直接可见,表现为 「直接瞬切,不受 VT 动画控制」。 修复:在 is-theme-transitioning 期间用 !important 清除 .animate-page-enter 的 transform。is-theme-transitioning 在 startViewTransition 之前添加,OLD/NEW 快照 均含此 class,故两快照 transform 都被清为 none,一致,不影响动画效果。 验证: - scripts/vt-real-page-sampler.mjs + vt-xterm-real-sampler.mjs:Playwright 驱动 真实 dx serve 页面,逐帧截图 + 像素采样 - 修复前:代码块在圆形边界外已变 dark(直接瞬切);修复后:代码块随圆形展开 同步变色(lag 与几何距离一致,非瞬切) - 像素追踪:editor 在 t=266ms 变色(圆形到达),bg 在 t=362ms 变色(圆形到达更远点), 时序与圆形几何一致,证明两者都通过 VT 动画变色
Yggdrasil
基于 Dioxus 0.7 的全栈博客系统，Rust 单一代码库同时编译为 WASM 前端和原生服务端。
技术栈
- 框架: Dioxus 0.7 (fullstack)
- 数据库: PostgreSQL + tokio-postgres
- 样式: Tailwind CSS v4
- 密码: Argon2
- 会话: UUID token + cookie
功能
- 邮箱注册 / 登录（单管理员模式，首次注册后关闭）
- 会话管理与自动过期清理
- 暗色 / 亮色主题切换
- 后台文章撰写（Tiptap Markdown 编辑器）
- 文章归档与标签浏览
开发
依赖 Rust 1.95+、wasm32 目标、dx CLI、tailwindcss CLI v4 和 PostgreSQL。
# 配置数据库
DATABASE_URL=postgres://postgres:postgres@localhost:5432/yggdrasil
# 运行迁移（自动创建数据库并按顺序执行 migrations/ 下所有 SQL）
./migrate.sh
# 启动开发服务器
make dev
构建
make build
生产部署
生产环境必须前置反向代理（nginx/Caddy）做 TLS 终结，并设置 APP_BASE_URL、
COOKIE_SECURE=true、TRUSTED_PROXY_COUNT=1。详见 部署指南。