yggdrasil

xfy/yggdrasil

Fork 0

Commit Graph

Author	SHA1	Message	Date
xfy	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
xfy	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
xfy	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

Author

SHA1

Message

Date

xfy

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

xfy

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

xfy

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

3 Commits