主题切换时,可运行代码块(CodeMirror + xterm)整体瞬切,不受 VT 圆形展开动画 控制——圆形还没展开到代码块,代码块就整体变色了。 根因(真实页面逐帧像素采样 + 事件追踪确认): ThemeToggle::onclick 先调 __startThemeTransition(同步截 OLD 快照,VT 回调异步), 再调 theme.set(next)。theme.set 触发 Dioxus use_effect → set_theme,这个调用 在 OLD 快照截取后、VT 回调执行前的时间窗内,直接改了实时 DOM 的编辑器背景。 VT 动画播的是伪元素快照(::view-transition-old/new),但实时 DOM 的改动会穿透 伪元素,表现为代码块在圆形展开到达前就整体瞬切。 上一个提交(theme-change 事件)已在 VT 回调内同步 setTheme(进入 NEW 快照), 但 use_effect 的冗余 set_theme 仍在动画期间改实时 DOM,抵消了快照内的正确状态。 修复:CodeMirror + xterm 的 use_effect 在 is-theme-transitioning 期间跳过 set_theme 调用。VT 事件已在快照前同步换肤;动画结束后 is-theme-transitioning 被移除,use_effect 会因 resolved 信号变化重跑,做幂等兜底同步(覆盖非 VT 场景: 系统偏好变化、初始挂载)。 验证(scripts/vt-editor-sweep.mjs,真实 Dioxus 点击路径): - 修复前:编辑器整体瞬切(t=111ms 全部变 dark,无渐变) - 修复后:编辑器从右向左被圆形逐步揭示(t=228ms 右侧先 dark,t=313ms 左侧 dark, 中间点显示圆形边缘抗锯齿色),与页面其他部分同步
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。详见 部署指南。
Description
Languages
Rust
77.4%
TypeScript
17.2%
CSS
3.3%
Dockerfile
0.9%
Makefile
0.6%
Other
0.6%