perf(流程图): 流程图改用 pele 渲染，懒加载从 200 kB 降到 44 kB（gzip）

mermaid 换成 obsidianmd/pele：同一套 Mermaid 语法、同步渲染、没有依赖。库里 2170 张图（题目参考图 36、学生提交 2134）两边逐张对过，能画的和报错的完全一致。配色按 pele 的 DOM 重写选择器，颜色不变；版本锁死在 1.6.0。顺带按 modernPolyfills: true 重新探测了 polyfill 清单（50 项），并改正注释里「DEBUG 会打印全集」的说法 —— 写死清单时它只回显清单。 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-19 20:50:17 +08:00
1 parent a1d14a06bc
commit 38360e8668
@@ -1,24 +1,10 @@
-import { getRandomId } from "utils/functions"
-
-const mermaidThemeVariables = {
-  primaryColor: "#e0f2fe",
-  primaryTextColor: "#0f172a",
-  primaryBorderColor: "#0284c7",
-  lineColor: "#64748b",
-  arrowheadColor: "#64748b",
-  secondaryColor: "#f5f3ff",
-  tertiaryColor: "#ecfdf5",
-  background: "#ffffff",
-  mainBkg: "#f8fafc",
-  secondBkg: "#eef2ff",
-  tertiaryBkg: "#f0fdfa",
-  nodeBorder: "#2563eb",
-  clusterBkg: "#f8fafc",
-  clusterBorder: "#cbd5e1",
-  edgeLabelBackground: "#ffffff",
-  fontFamily:
-    'Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
-}
+/**
+ * Mermaid 文本画成 SVG。渲染器是 pele（obsidianmd/pele），不是 mermaid 本身：
+ * 同一套语法，同步渲染、没有依赖，流程图部分 gzip 后 44 kB（mermaid 要 200 kB 以上）。
+ * 换之前拿库里全部 2170 张图对过：两边能画的、报错的完全一致。
+ *
+ * pele 的版本号锁死（不带 ^）：项目 2026-10 才开，小版本也在改排版。
+ */

 const semanticNodeClasses = [
  "startNode",
@@ -33,189 +19,70 @@ const semanticNodeClasses = [

 const displayStyleId = "oj-mermaid-display-style"

+/** 框的颜色：[class, 底色, 边框]。pele 把 `class n0 startNode` 原样挂在节点的 <g> 上 */
+const nodeColors: [string, string, string][] = [
+  ["startNode", "#eef8f2", "#18a058"],
+  ["startEnd", "#eef8f2", "#18a058"],
+  ["endNode", "#eef8f2", "#18a058"],
+  ["input", "#eef4fd", "#2f6bc4"],
+  ["output", "#eef4fd", "#2f6bc4"],
+  ["process", "#ffffff", "#7d828a"],
+  ["decision", "#fdf5e6", "#d08a1c"],
+  ["loop", "#fdf5e6", "#d08a1c"],
+  ["oj-node-palette-0", "#dbeafe", "#2563eb"],
+  ["oj-node-palette-1", "#ccfbf1", "#0d9488"],
+  ["oj-node-palette-2", "#ede9fe", "#7c3aed"],
+  ["oj-node-palette-3", "#ffe4e6", "#e11d48"],
+  ["oj-node-palette-4", "#fef3c7", "#d97706"],
+  ["oj-node-palette-5", "#dcfce7", "#16a34a"],
+]
+
+// !important 是为了压过老提交里 classDef 写进 style 属性的颜色，全站的图一个样
 const mermaidDisplayStyle = `
 .oj-mermaid-flowchart {
-  max-width: 100%;
-  height: auto;
+  --pele-bg: #ffffff;
+  --pele-fg: #0f172a;
+  --pele-line: #64748b;
+  --pele-surface: #f8fafc;
+  --pele-border: #2563eb;
+  --pele-muted: #334155;
 }

-.oj-mermaid-flowchart g.node rect,
-.oj-mermaid-flowchart g.node polygon,
-.oj-mermaid-flowchart g.node ellipse,
-.oj-mermaid-flowchart g.node circle,
-.oj-mermaid-flowchart g.node path {
+.oj-mermaid-flowchart .pele-node > :not(text) {
  stroke-width: 2px !important;
  filter: drop-shadow(0 6px 12px rgba(15, 23, 42, 0.12));
 }
+${nodeColors
+  .map(
+    ([cls, fill, stroke]) => `
+.oj-mermaid-flowchart .pele-node.${cls} > :not(text) {
+  fill: ${fill} !important;
+  stroke: ${stroke} !important;
+}`,
+  )
+  .join("")}

-.oj-mermaid-flowchart g.node.startNode rect,
-.oj-mermaid-flowchart g.node.startNode polygon,
-.oj-mermaid-flowchart g.node.startNode ellipse,
-.oj-mermaid-flowchart g.node.startNode circle,
-.oj-mermaid-flowchart g.node.startNode path,
-.oj-mermaid-flowchart g.node.startEnd rect,
-.oj-mermaid-flowchart g.node.startEnd polygon,
-.oj-mermaid-flowchart g.node.startEnd ellipse,
-.oj-mermaid-flowchart g.node.startEnd circle,
-.oj-mermaid-flowchart g.node.startEnd path {
-  fill: #eef8f2 !important;
-  stroke: #18a058 !important;
-}
-
-.oj-mermaid-flowchart g.node.endNode rect,
-.oj-mermaid-flowchart g.node.endNode polygon,
-.oj-mermaid-flowchart g.node.endNode ellipse,
-.oj-mermaid-flowchart g.node.endNode circle,
-.oj-mermaid-flowchart g.node.endNode path {
-  fill: #eef8f2 !important;
-  stroke: #18a058 !important;
-}
-
-.oj-mermaid-flowchart g.node.input rect,
-.oj-mermaid-flowchart g.node.input polygon,
-.oj-mermaid-flowchart g.node.input ellipse,
-.oj-mermaid-flowchart g.node.input circle,
-.oj-mermaid-flowchart g.node.input path {
-  fill: #eef4fd !important;
-  stroke: #2f6bc4 !important;
-}
-
-.oj-mermaid-flowchart g.node.output rect,
-.oj-mermaid-flowchart g.node.output polygon,
-.oj-mermaid-flowchart g.node.output ellipse,
-.oj-mermaid-flowchart g.node.output circle,
-.oj-mermaid-flowchart g.node.output path {
-  fill: #eef4fd !important;
-  stroke: #2f6bc4 !important;
-}
-
-.oj-mermaid-flowchart g.node.process rect,
-.oj-mermaid-flowchart g.node.process polygon,
-.oj-mermaid-flowchart g.node.process ellipse,
-.oj-mermaid-flowchart g.node.process circle,
-.oj-mermaid-flowchart g.node.process path {
-  fill: #ffffff !important;
-  stroke: #7d828a !important;
-}
-
-.oj-mermaid-flowchart g.node.decision rect,
-.oj-mermaid-flowchart g.node.decision polygon,
-.oj-mermaid-flowchart g.node.decision ellipse,
-.oj-mermaid-flowchart g.node.decision circle,
-.oj-mermaid-flowchart g.node.decision path {
-  fill: #fdf5e6 !important;
-  stroke: #d08a1c !important;
-}
-
-.oj-mermaid-flowchart g.node.loop rect,
-.oj-mermaid-flowchart g.node.loop polygon,
-.oj-mermaid-flowchart g.node.loop ellipse,
-.oj-mermaid-flowchart g.node.loop circle,
-.oj-mermaid-flowchart g.node.loop path {
-  fill: #fdf5e6 !important;
-  stroke: #d08a1c !important;
-}
-
-.oj-mermaid-flowchart g.node.oj-node-palette-0 rect,
-.oj-mermaid-flowchart g.node.oj-node-palette-0 polygon,
-.oj-mermaid-flowchart g.node.oj-node-palette-0 ellipse,
-.oj-mermaid-flowchart g.node.oj-node-palette-0 circle,
-.oj-mermaid-flowchart g.node.oj-node-palette-0 path {
-  fill: #dbeafe !important;
-  stroke: #2563eb !important;
-}
-
-.oj-mermaid-flowchart g.node.oj-node-palette-1 rect,
-.oj-mermaid-flowchart g.node.oj-node-palette-1 polygon,
-.oj-mermaid-flowchart g.node.oj-node-palette-1 ellipse,
-.oj-mermaid-flowchart g.node.oj-node-palette-1 circle,
-.oj-mermaid-flowchart g.node.oj-node-palette-1 path {
-  fill: #ccfbf1 !important;
-  stroke: #0d9488 !important;
-}
-
-.oj-mermaid-flowchart g.node.oj-node-palette-2 rect,
-.oj-mermaid-flowchart g.node.oj-node-palette-2 polygon,
-.oj-mermaid-flowchart g.node.oj-node-palette-2 ellipse,
-.oj-mermaid-flowchart g.node.oj-node-palette-2 circle,
-.oj-mermaid-flowchart g.node.oj-node-palette-2 path {
-  fill: #ede9fe !important;
-  stroke: #7c3aed !important;
-}
-
-.oj-mermaid-flowchart g.node.oj-node-palette-3 rect,
-.oj-mermaid-flowchart g.node.oj-node-palette-3 polygon,
-.oj-mermaid-flowchart g.node.oj-node-palette-3 ellipse,
-.oj-mermaid-flowchart g.node.oj-node-palette-3 circle,
-.oj-mermaid-flowchart g.node.oj-node-palette-3 path {
-  fill: #ffe4e6 !important;
-  stroke: #e11d48 !important;
-}
-
-.oj-mermaid-flowchart g.node.oj-node-palette-4 rect,
-.oj-mermaid-flowchart g.node.oj-node-palette-4 polygon,
-.oj-mermaid-flowchart g.node.oj-node-palette-4 ellipse,
-.oj-mermaid-flowchart g.node.oj-node-palette-4 circle,
-.oj-mermaid-flowchart g.node.oj-node-palette-4 path {
-  fill: #fef3c7 !important;
-  stroke: #d97706 !important;
-}
-
-.oj-mermaid-flowchart g.node.oj-node-palette-5 rect,
-.oj-mermaid-flowchart g.node.oj-node-palette-5 polygon,
-.oj-mermaid-flowchart g.node.oj-node-palette-5 ellipse,
-.oj-mermaid-flowchart g.node.oj-node-palette-5 circle,
-.oj-mermaid-flowchart g.node.oj-node-palette-5 path {
-  fill: #dcfce7 !important;
-  stroke: #16a34a !important;
-}
-
-.oj-mermaid-flowchart g.node .label,
-.oj-mermaid-flowchart g.node .nodeLabel,
-.oj-mermaid-flowchart g.node .nodeLabel p,
-.oj-mermaid-flowchart g.node .label span {
-  color: #0f172a !important;
+.oj-mermaid-flowchart .pele-node text {
  fill: #0f172a !important;
-  font-weight: 650 !important;
 }

-.oj-mermaid-flowchart .edgePaths path.path,
-.oj-mermaid-flowchart .flowchart-link {
-  stroke: #64748b !important;
-  stroke-width: 2.4px !important;
+.oj-mermaid-flowchart .pele-edge > path:not(.pele-marker) {
+  stroke-width: 2.4px;
 }

-.oj-mermaid-flowchart marker path,
-.oj-mermaid-flowchart .marker {
-  fill: #64748b !important;
-  stroke: #64748b !important;
+.oj-mermaid-flowchart .pele-edge-label rect {
+  fill: rgba(255, 255, 255, 0.94);
+  stroke: #cbd5e1;
 }

-.oj-mermaid-flowchart .edgeLabel rect,
-.oj-mermaid-flowchart .edgeLabel .labelBkg {
-  fill: rgba(255, 255, 255, 0.94) !important;
-  stroke: #cbd5e1 !important;
-}
-
-.oj-mermaid-flowchart .edgeLabel,
-.oj-mermaid-flowchart .edgeLabel span,
-.oj-mermaid-flowchart .edgeLabel p {
-  color: #334155 !important;
-  font-weight: 600 !important;
+.oj-mermaid-flowchart .pele-edge-label text {
+  fill: #334155;
+  font-weight: 600;
 }
 `

 const svgNamespace = "http://www.w3.org/2000/svg"

-function getNodeLabel(node: SVGGElement): string {
-  const el =
-    node.querySelector(".nodeLabel p") ||
-    node.querySelector(".nodeLabel") ||
-    node.querySelector(".label span") ||
-    node.querySelector(".label")
-  return el?.textContent?.trim() ?? ""
-}
-
 function applyFlowchartDisplayStyle(container: HTMLElement) {
  container.classList.add("oj-mermaid-surface")

@@ -224,7 +91,7 @@ function applyFlowchartDisplayStyle(container: HTMLElement) {

  svg.classList.add("oj-mermaid-flowchart")

-  const nodes = Array.from(svg.querySelectorAll<SVGGElement>("g.node"))
+  const nodes = Array.from(svg.querySelectorAll<SVGGElement>("g.pele-node"))

  // Assign palette indices by label so same label → same color, different labels → different colors
  const labelPaletteMap = new Map<string, number>()
@@ -235,7 +102,7 @@ function applyFlowchartDisplayStyle(container: HTMLElement) {
      node.classList.contains(className),
    )
    if (!hasSemanticClass) {
-      const label = getNodeLabel(node)
+      const label = node.querySelector(".pele-label")?.textContent?.trim() ?? ""
      if (!labelPaletteMap.has(label)) {
        labelPaletteMap.set(label, paletteCounter % 6)
        paletteCounter++
@@ -251,36 +118,6 @@ function applyFlowchartDisplayStyle(container: HTMLElement) {
  svg.insertBefore(style, svg.firstChild)
 }

-let mermaidPromise: Promise<any> | null = null
-
-function loadMermaid(): Promise<any> {
-  // 缓存 Promise 而不是实例：同一屏里两个组件一起挂载时，缓存实例会让两边都
-  // 落进 if (!mermaidInstance)，import 两次、initialize 两次
-  if (!mermaidPromise) {
-    mermaidPromise = (async () => {
-      const instance = (await import("mermaid")).default
-      instance.initialize({
-        startOnLoad: false,
-        securityLevel: "strict",
-        theme: "base",
-        // 解析失败时 mermaid 默认会先把一张「错误图」画进挂在 document.body 上的
-        // 临时容器，再抛异常，而清理临时容器的那行在 throw 之后，永远执行不到；
-        // 每次 render 用的又是新的随机 id，旧的也清不掉。于是每失败一次就往
-        // body 里留一个 div#dmermaid-xxx —— 出题页每敲一个字符渲染一次，一段
-        // 代码写下来能堆几十个。打开这个开关后 mermaid 会先清理再抛。
-        suppressErrorRendering: true,
-        themeVariables: mermaidThemeVariables,
-      })
-      return instance
-    })().catch((error) => {
-      // 失败的 Promise 不能留在缓存里，否则后面每次渲染都直接复用这个失败结果
-      mermaidPromise = null
-      throw error
-    })
-  }
-  return mermaidPromise
-}
-
 export function useMermaid() {
  const renderError = ref<string | null>(null)
  const renderSuccess = ref(false)
@@ -296,9 +133,15 @@ export function useMermaid() {

    const gen = ++renderGeneration
    try {
-      const m = await loadMermaid()
-      const id = `mermaid-${getRandomId()}`
-      const { svg } = await m.render(id, mermaidCode)
+      // pele/lazy 按图的类型现拉对应的模块，题目里绝大多数是流程图，只拉那一块
+      const { renderAsync } = await import("pele/lazy")
+      const { svg } = await renderAsync(mermaidCode, {
+        // 量字宽用页面真实的字体，否则框会比字窄或宽
+        fontFamily: getComputedStyle(container).fontFamily,
+        // 题目是老师写的、提交是学生写的，图里的链接和外链图片一律不画
+        links: false,
+        images: false,
+      })
      if (gen !== renderGeneration) return
      container.innerHTML = svg
      applyFlowchartDisplayStyle(container)