|
|
fac247f60a
|
feat(mermaid): 流程图配色对齐 Catppuccin + 容器美化
mermaid.initialize 之前用内置 'default'/'dark' 主题，配色与站点 Catppuccin
调色板完全脱节，图是"外来"的样子；且零 mermaid 专用 CSS，SVG 直接套在通用
pre 容器里，宽图横向滚动、无居中无留白。
改动：
- mermaid.ts：theme 切到 'base'（base 不硬编码颜色，themeVariables 能完全
控制调色板；'default' 主题硬编码 mainBkg=#ECECFF 会阻断覆盖）。新增 Latte/
Mocha 两套 themeVariables，节点用 surface 色阶、边框/连线用 subtext 色阶、
文字用 primary text，hex 取自 themes/*.tmTheme。flowchart 配 basis 平滑曲线
+ diagramPadding 16 + useMaxWidth:true（配合 CSS 消除横向滚动）。
- input.css：新增 .md-content pre[data-mermaid-rendered] 规则，flex 居中 + svg
max-width:100% 缩放适配；.mermaid-error 加 accent 色左边条提示。
- mermaid.test.ts：theme 断言同步到 'base'+darkMode；新增 themeVariables
注入测试（钉住 Latte/Mocha 关键 hex）。
范围：纯前端 TS + CSS，零 Rust 改动。
|
2026-07-17 10:13:20 +08:00 |
|
|
|
0395c55213
|
fix(mermaid): 修复 tsc 类型错误
- mermaid.ts: initMermaid 早退路径(root 未命中)返回 Promise.resolve() 而非
undefined,匹配 Promise<void> 签名。
- theme-transition.test.ts: resolveAsync 改用 mutable 容器 { fn: null } 包裹,
绕过 TS 跨闭包控制流收窄(原 let + 闭包赋值,在 ?.() 处被判定为 null → never)。
上提交漏跑 tsc --noEmit(vitest 用 esbuild 不做类型检查),本次补验 tsc + vite build。
|
2026-07-16 17:06:06 +08:00 |
|
|
|
bdfc7a19e9
|
feat(mermaid): 流程图主题切换跟随 VT 圆形扩散动画
此前 mermaid.render() 异步,而 VT 回调同步,Dioxus effect 重跑发生在 VT 回调
之后的微任务,导致动画期间流程图不变、动画结束后才瞬切。
利用 startViewTransition 回调可返回 Promise 的特性(浏览器等其 resolve 才拍
NEW 快照、播动画),让 VT 回调等 mermaid 重渲染完成,新主题流程图进入快照,
圆形扩散覆盖整页含 mermaid 区域。
改动:
- theme-transition.ts: 新增 onThemeChange registry(回调可返回 Promise)。
notifyThemeChange 遍历 registry 收集 Promise 返回聚合结果;THEME_CHANGE_EVENT
事件保留(给 codemirror/xterm 同步换肤,向后兼容)。
startThemeTransition 的 VT 回调改为 async,await notifyThemeChange 聚合 Promise,
确保异步换肤组件(mermaid)完成后再拍 NEW 快照。
applyResolvedTheme(跟随系统瞬切)不等 registry,保持瞬切语义。
- mermaid.ts: 顶层注册 onThemeChange 订阅,listener 调 rerenderExistingBlocks 并
返回其 Promise,供 VT 回调等待。initMermaid/rerenderExistingBlocks 返回 Promise。
- post_content.rs: VT 期间(is-theme-transitioning)跳过 __initMermaid 调用,避免
Dioxus effect 抢先重渲染穿透伪元素快照(照搬 code_runner/runner.rs 守卫);
动画结束后 effect 重跑做幂等兜底。
- theme-transition.test.ts: VT callback 签名 void→Promise<void>,新增 registry
等待测试 + 降级路径不等 registry 测试。
|
2026-07-16 16:58:27 +08:00 |
|
|
|
6eb7a743e5
|
fix(mermaid): 主题切换时重渲染已渲染的流程图
mermaid 把颜色烤进 SVG 内联样式，无法靠 CSS 原地切主题。此前 initMermaid
的幂等守卫一刀切跳过所有已渲染块，导致切主题后流程图停留在首次渲染的主题。
改动：
- initMermaid 改为双路径分发：未渲染块(<code>还在)走 IntersectionObserver
懒加载；已渲染块(pre 内容已是 SVG)按 dataset.mermaidSource 缓存源码重渲染，
同主题幂等跳过，主题变化才重渲染。
- 渲染逻辑抽到 renderBlock：用全局自增 renderCounter 生成唯一 id，避开 mermaid
残留的 d-前缀布局节点冲突(#357)与同页 marker id 冲突(#5741)；替换前清空
pre.innerHTML 确保亮/暗两版 SVG 不并存。
- source 存进 dataset.mermaidSource 供重渲染回取（此时 <code> 已被 SVG 替换）。
触发机制不变：post_content.rs 的 use_effect 读 use_resolved_theme() 建订阅，
主题切换时重跑重调 __initMermaid 传入新 theme；mermaid.ts 据此决定是否重渲染。
|
2026-07-16 16:42:04 +08:00 |
|
|
|
445b92f407
|
fix(mermaid): 改用 script 标签加载 IIFE bundle,修正全局变量取值
根因:mermaid bundle 是 IIFE 格式(与项目其他前端库一致),挂全局变量
而非 ES module export。但 mermaid.ts 错用了 import() 取 .default——
IIFE 无 export,mod.default 是 undefined,导致 mermaid.initialize 调用
TypeError,流程图永远不渲染(数学公式不受影响,因为是服务端渲染)。
修复:
- mermaid.ts: loadMermaidBundle 改用动态注入 <script src=/mermaid/mermaid.js>
标签,加载后从 window.MermaidRenderer 取(与 codemirror/lightbox 的
Reflect::get(window,...) 模式一致)
- mermaid-renderer/index.ts: 显式 globalThis.MermaidRenderer = mermaid,
避免 vite IIFE 把 export default 编译成 .default 多一层
- markdown.rs: mermaid 代码块跳过 syntect 高亮(无语法定义且会包 <span>
污染 textContent),直接输出转义纯源码
前端 28 测试 + Rust 557 测试 + 双 target 编译通过。
|
2026-07-16 15:36:07 +08:00 |
|
|
|
70edc5e46c
|
feat(frontend): mermaid 流程图懒加载渲染
mermaid 无官方 SSR 支持,采用客户端 IntersectionObserver 懒加载:服务端
markdown.rs 只产出普通 <pre><code class="language-mermaid"> 代码块,
前端在块进视口时动态 import 独立 bundle(~1MB)渲染成 SVG。
新增 libs/mermaid-renderer/:mermaid 11.16 IIFE bundle,输出 public/mermaid/
yggdrasil-core/mermaid.ts:扫描 language-mermaid 块,视口可见时动态 import
/mermaid/mermaid.js(单例缓存),mermaid.initialize 适配 light/dark 主题,
securityLevel=strict;渲染失败加 .mermaid-error class 保留源码;幂等守卫
post-content.ts:initCopyButtons 跳过 language-mermaid 块(图无需 copy)
post_content.rs:use_effect 调 __initMermaid('.post-content', theme),
读 use_resolved_theme() 传主题并建立订阅
新增 6 个 mermaid 单测(扫描/主题/幂等/非mermaid/未命中/错误回退)。
550 Rust + 28 前端测试全过,双 target 编译通过。
|
2026-07-16 14:22:43 +08:00 |
|
