@superlc/md-vue 0.1.1 → 0.2.1

package/dist/index.js

@@ -1,63 +1,63 @@
-import { defineComponent as A, ref as h, h as f, watch as w, computed as B, onUnmounted as U } from "vue";
-import { parseToHast as P, createStreamingParser as F, OutputRateController as O } from "@superlc/md-core";
-let T = !1, x = null;
-async function D() {
-  if (!T)
-    return x || (x = (async () => {
-      await import("katex/dist/katex.min.css"), T = !0;
-    })(), x);
+import { defineComponent as C, ref as y, h as t, computed as N, onMounted as $, onUnmounted as E, watch as T } from "vue";
+import { detectColorScheme as te, observeColorScheme as ae, downloadAsPng as ne, MermaidRenderer as le, parseToHast as j, createStreamingParser as P, OutputRateController as U } from "@superlc/md-core";
+let R = !1, F = null;
+async function oe() {
+  if (!R)
+    return F || (F = (async () => {
+      await import("katex/dist/katex.min.css"), R = !0;
+    })(), F);
 }
-function ne() {
-  return T;
+function Ne() {
+  return R;
 }
-function R() {
-  return D();
+function Y() {
+  return oe();
 }
-async function G(e) {
+async function re(e) {
   try {
     return await navigator.clipboard.writeText(e), !0;
   } catch {
-    return J(e);
+    return se(e);
   }
 }
-function J(e) {
-  const t = document.createElement("textarea");
-  t.value = e, t.style.position = "fixed", t.style.left = "-9999px", document.body.appendChild(t), t.select();
+function se(e) {
+  const n = document.createElement("textarea");
+  n.value = e, n.style.position = "fixed", n.style.left = "-9999px", document.body.appendChild(n), n.select();
   try {
     return document.execCommand("copy"), !0;
   } catch {
     return !1;
   } finally {
-    document.body.removeChild(t);
+    document.body.removeChild(n);
   }
 }
-const Q = () => f(
+const ue = () => t(
   "svg",
   {
     viewBox: "0 0 24 24",
     fill: "currentColor"
   },
   [
-    f("path", {
+    t("path", {
       d: "M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"
     })
   ]
-), X = () => f(
+), ce = () => t(
   "svg",
   {
     viewBox: "0 0 24 24",
     fill: "currentColor"
   },
   [
-    f("path", {
+    t("path", {
       d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
     })
   ]
 );
-function I(e) {
-  return typeof e == "string" ? e : Array.isArray(e) ? e.map((t) => typeof t == "string" ? t : t && typeof t == "object" && "children" in t ? I(t.children) : "").join("") : "";
+function X(e) {
+  return typeof e == "string" ? e : Array.isArray(e) ? e.map((n) => typeof n == "string" ? n : n && typeof n == "object" && "children" in n ? X(n.children) : "").join("") : "";
 }
-const L = A({
+const q = C({
   name: "CodeBlock",
   props: {
     showCopyButton: {
@@ -66,34 +66,708 @@ const L = A({
     }
   },
   emits: ["copy"],
-  setup(e, { slots: t, emit: l }) {
-    const a = h(!1), u = async () => {
-      var o;
-      const r = (o = t.default) == null ? void 0 : o.call(t), n = r ? I(r) : "";
-      await G(n) && (a.value = !0, l("copy", n), setTimeout(() => {
-        a.value = !1;
+  setup(e, { slots: n, emit: l }) {
+    const r = y(!1), o = async () => {
+      var u;
+      const a = (u = n.default) == null ? void 0 : u.call(n), s = a ? X(a) : "";
+      await re(s) && (r.value = !0, l("copy", s), setTimeout(() => {
+        r.value = !1;
       }, 2e3));
     };
     return () => {
-      var n;
-      const r = (n = t.default) == null ? void 0 : n.call(t);
-      return f("div", { class: "md-code-block-wrapper" }, [
-        f("pre", {}, r),
-        e.showCopyButton && f(
+      var s;
+      const a = (s = n.default) == null ? void 0 : s.call(n);
+      return t("div", { class: "md-code-block-wrapper" }, [
+        t("pre", {}, a),
+        e.showCopyButton && t(
           "button",
           {
             type: "button",
-            class: `md-copy-button${a.value ? " md-copy-button--copied" : ""}`,
-            onClick: u,
-            title: a.value ? "已复制" : "复制代码",
-            "aria-label": a.value ? "已复制" : "复制代码"
+            class: `md-copy-button${r.value ? " md-copy-button--copied" : ""}`,
+            onClick: o,
+            title: r.value ? "已复制" : "复制代码",
+            "aria-label": r.value ? "已复制" : "复制代码"
           },
-          [a.value ? f(X) : f(Q)]
+          [r.value ? t(ce) : t(ue)]
         )
       ]);
     };
   }
-}), z = A({
+}), ie = {
+  min: 0.25,
+  max: 4,
+  step: 0.25,
+  default: 1
+};
+function W(e = {}) {
+  const {
+    config: n,
+    enableDrag: l = !1,
+    enableWheelZoom: r = !1
+  } = e, o = { ...ie, ...n }, a = y({
+    scale: o.default,
+    translateX: 0,
+    translateY: 0
+  }), s = y(!1), i = y({ x: 0, y: 0 }), u = y({ x: 0, y: 0 }), c = (m) => Math.max(o.min, Math.min(o.max, m)), f = N(() => a.value.scale < o.max), g = N(() => a.value.scale > o.min), v = () => {
+    a.value = {
+      ...a.value,
+      scale: c(a.value.scale + o.step)
+    };
+  }, d = () => {
+    a.value = {
+      ...a.value,
+      scale: c(a.value.scale - o.step)
+    };
+  }, p = () => {
+    a.value = {
+      scale: o.default,
+      translateX: 0,
+      translateY: 0
+    };
+  }, M = (m) => {
+    a.value = {
+      ...a.value,
+      scale: c(m)
+    };
+  }, h = (m, b) => {
+    const k = m.width / b.width, z = m.height / b.height, V = Math.min(k, z) * 0.95;
+    a.value = {
+      scale: c(V),
+      translateX: 0,
+      translateY: 0
+    };
+  }, x = (m) => {
+    l && (m.preventDefault(), s.value = !0, i.value = { x: m.clientX, y: m.clientY }, u.value = { x: a.value.translateX, y: a.value.translateY });
+  }, w = (m) => {
+    if (!s.value) return;
+    const b = m.clientX - i.value.x, k = m.clientY - i.value.y;
+    a.value = {
+      ...a.value,
+      translateX: u.value.x + b,
+      translateY: u.value.y + k
+    };
+  }, B = () => {
+    s.value = !1;
+  }, I = (m) => {
+    if (!r) return;
+    m.preventDefault();
+    const b = m.deltaY > 0 ? -o.step : o.step;
+    a.value = {
+      ...a.value,
+      scale: c(a.value.scale + b)
+    };
+  }, L = () => {
+    p();
+  }, S = N(() => ({
+    transform: `translate(${a.value.translateX}px, ${a.value.translateY}px) scale(${a.value.scale})`,
+    transformOrigin: "center center",
+    transition: s.value ? "none" : "transform 0.2s ease-out",
+    cursor: l ? s.value ? "grabbing" : "grab" : "default"
+  }));
+  return $(() => {
+    l && (document.addEventListener("mousemove", w), document.addEventListener("mouseup", B));
+  }), E(() => {
+    l && (document.removeEventListener("mousemove", w), document.removeEventListener("mouseup", B));
+  }), {
+    state: a,
+    zoomIn: v,
+    zoomOut: d,
+    reset: p,
+    fitToContainer: h,
+    setScale: M,
+    canZoomIn: f,
+    canZoomOut: g,
+    contentStyle: S,
+    onMouseDown: x,
+    onWheel: I,
+    onDoubleClick: L
+  };
+}
+const de = C({
+  name: "ImageIcon",
+  setup() {
+    return () => t(
+      "svg",
+      { viewBox: "0 0 24 24", fill: "currentColor" },
+      t("path", {
+        d: "M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"
+      })
+    );
+  }
+}), me = C({
+  name: "CodeIcon",
+  setup() {
+    return () => t(
+      "svg",
+      { viewBox: "0 0 24 24", fill: "currentColor" },
+      t("path", {
+        d: "M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z"
+      })
+    );
+  }
+}), _ = C({
+  name: "ZoomInIcon",
+  setup() {
+    return () => t(
+      "svg",
+      { viewBox: "0 0 24 24", fill: "currentColor" },
+      t("path", {
+        d: "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14zm.5-7H9v2H7v1h2v2h1v-2h2V9h-2V7z"
+      })
+    );
+  }
+}), K = C({
+  name: "ZoomOutIcon",
+  setup() {
+    return () => t(
+      "svg",
+      { viewBox: "0 0 24 24", fill: "currentColor" },
+      t("path", {
+        d: "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14zM7 9h5v1H7V9z"
+      })
+    );
+  }
+}), G = C({
+  name: "ResetIcon",
+  setup() {
+    return () => t(
+      "svg",
+      { viewBox: "0 0 24 24", fill: "currentColor" },
+      t("path", {
+        d: "M12 5V1L7 6l5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z"
+      })
+    );
+  }
+}), ve = C({
+  name: "FullscreenIcon",
+  setup() {
+    return () => t(
+      "svg",
+      { viewBox: "0 0 24 24", fill: "currentColor" },
+      t("path", {
+        d: "M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"
+      })
+    );
+  }
+}), fe = C({
+  name: "FullscreenExitIcon",
+  setup() {
+    return () => t(
+      "svg",
+      { viewBox: "0 0 24 24", fill: "currentColor" },
+      t("path", {
+        d: "M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z"
+      })
+    );
+  }
+}), J = C({
+  name: "DownloadIcon",
+  setup() {
+    return () => t(
+      "svg",
+      { viewBox: "0 0 24 24", fill: "currentColor" },
+      t("path", {
+        d: "M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"
+      })
+    );
+  }
+}), pe = C({
+  name: "CloseIcon",
+  setup() {
+    return () => t(
+      "svg",
+      { viewBox: "0 0 24 24", fill: "currentColor" },
+      t("path", {
+        d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+      })
+    );
+  }
+}), he = C({
+  name: "CopyIcon",
+  setup() {
+    return () => t(
+      "svg",
+      { viewBox: "0 0 24 24", fill: "currentColor" },
+      t("path", {
+        d: "M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"
+      })
+    );
+  }
+}), ye = C({
+  name: "CheckIcon",
+  setup() {
+    return () => t(
+      "svg",
+      { viewBox: "0 0 24 24", fill: "currentColor" },
+      t("path", {
+        d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
+      })
+    );
+  }
+});
+C({
+  name: "FitIcon",
+  setup() {
+    return () => t(
+      "svg",
+      { viewBox: "0 0 24 24", fill: "currentColor" },
+      t("path", {
+        d: "M3 5v4h2V5h4V3H5c-1.1 0-2 .9-2 2zm2 10H3v4c0 1.1.9 2 2 2h4v-2H5v-4zm14 4h-4v2h4c1.1 0 2-.9 2-2v-4h-2v4zm0-16h-4v2h4v4h2V5c0-1.1-.9-2-2-2z"
+      })
+    );
+  }
+});
+const ge = C({
+  name: "MermaidFullscreenViewer",
+  props: {
+    svg: {
+      type: String,
+      required: !0
+    },
+    open: {
+      type: Boolean,
+      required: !0
+    }
+  },
+  emits: ["close", "download"],
+  setup(e, { emit: n }) {
+    const l = y(null), r = y(null), o = y(null), a = y(!1), {
+      state: s,
+      zoomIn: i,
+      zoomOut: u,
+      reset: c,
+      fitToContainer: f,
+      canZoomIn: g,
+      canZoomOut: v,
+      contentStyle: d,
+      onMouseDown: p,
+      onWheel: M,
+      onDoubleClick: h
+    } = W({
+      enableDrag: !0,
+      enableWheelZoom: !0
+    }), x = async () => {
+      if (l.value)
+        try {
+          await l.value.requestFullscreen(), a.value = !0;
+        } catch {
+          a.value = !0;
+        }
+    }, w = () => {
+      document.fullscreenElement && document.exitFullscreen().catch(() => {
+      }), a.value = !1, n("close");
+    };
+    T(
+      () => e.open,
+      (S) => {
+        S ? x() : a.value && w();
+      }
+    );
+    const B = () => {
+      !document.fullscreenElement && a.value && (a.value = !1, n("close"));
+    }, I = (S) => {
+      if (a.value)
+        switch (S.key) {
+          case "+":
+          case "=":
+            i();
+            break;
+          case "-":
+            u();
+            break;
+          case "0":
+            c();
+            break;
+        }
+    };
+    $(() => {
+      document.addEventListener("fullscreenchange", B), document.addEventListener("keydown", I);
+    }), E(() => {
+      document.removeEventListener("fullscreenchange", B), document.removeEventListener("keydown", I);
+    });
+    const L = () => {
+      if (!r.value || !o.value) return;
+      const S = r.value.getBoundingClientRect(), m = o.value.querySelector("svg");
+      if (m) {
+        const b = m.getBoundingClientRect();
+        f(S, b);
+      }
+    };
+    return () => t(
+      "div",
+      {
+        ref: l,
+        class: [
+          "md-mermaid-fullscreen-wrapper",
+          a.value && "md-mermaid-fullscreen-wrapper--active"
+        ],
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": "Mermaid 图表全屏预览",
+        "aria-hidden": !a.value
+      },
+      a.value ? [
+        // 工具栏
+        t("div", { class: "md-mermaid-fullscreen-toolbar" }, [
+          t("div", { class: "md-mermaid-toolbar-group" }, [
+            t(
+              "button",
+              {
+                type: "button",
+                class: "md-mermaid-toolbar-btn",
+                onClick: u,
+                disabled: !v.value,
+                title: "缩小 (-)",
+                "aria-label": "缩小"
+              },
+              t(K)
+            ),
+            t(
+              "span",
+              { class: "md-mermaid-zoom-label" },
+              `${Math.round(s.value.scale * 100)}%`
+            ),
+            t(
+              "button",
+              {
+                type: "button",
+                class: "md-mermaid-toolbar-btn",
+                onClick: i,
+                disabled: !g.value,
+                title: "放大 (+)",
+                "aria-label": "放大"
+              },
+              t(_)
+            ),
+            t(
+              "button",
+              {
+                type: "button",
+                class: "md-mermaid-toolbar-btn",
+                onClick: c,
+                title: "重置 (0)",
+                "aria-label": "重置"
+              },
+              t(G)
+            ),
+            t(
+              "button",
+              {
+                type: "button",
+                class: "md-mermaid-toolbar-btn",
+                onClick: L,
+                title: "适应窗口",
+                "aria-label": "适应窗口"
+              },
+              t(fe)
+            )
+          ]),
+          t("div", { class: "md-mermaid-toolbar-group" }, [
+            t(
+              "button",
+              {
+                type: "button",
+                class: "md-mermaid-toolbar-btn",
+                onClick: () => n("download"),
+                title: "下载 PNG",
+                "aria-label": "下载"
+              },
+              t(J)
+            ),
+            t(
+              "button",
+              {
+                type: "button",
+                class: "md-mermaid-toolbar-btn",
+                onClick: w,
+                title: "退出全屏 (Esc)",
+                "aria-label": "退出全屏"
+              },
+              t(pe)
+            )
+          ])
+        ]),
+        // 内容区域
+        t(
+          "div",
+          {
+            ref: r,
+            class: "md-mermaid-fullscreen-content",
+            onWheel: M
+          },
+          t("div", {
+            ref: o,
+            class: "md-mermaid-fullscreen-svg",
+            style: d.value,
+            onMousedown: p,
+            onDblclick: h,
+            innerHTML: e.svg
+          })
+        )
+      ] : void 0
+    );
+  }
+}), be = 150;
+let A = null;
+function Ce(e = "auto") {
+  return A ? A.setTheme(e ?? "auto") : A = new le({ theme: e }), A;
+}
+async function we(e) {
+  try {
+    return await navigator.clipboard.writeText(e), !0;
+  } catch {
+    const n = document.createElement("textarea");
+    n.value = e, n.style.position = "fixed", n.style.left = "-9999px", document.body.appendChild(n), n.select();
+    try {
+      return document.execCommand("copy"), !0;
+    } catch {
+      return !1;
+    } finally {
+      document.body.removeChild(n);
+    }
+  }
+}
+const ke = C({
+  name: "MermaidBlock",
+  props: {
+    code: {
+      type: String,
+      required: !0
+    },
+    theme: {
+      type: String,
+      default: "auto"
+    },
+    showToolbar: {
+      type: Boolean,
+      default: !0
+    },
+    streamStatus: {
+      type: String,
+      default: "done"
+    }
+  },
+  emits: ["copy"],
+  setup(e, { emit: n }) {
+    const l = y("preview"), r = y(null), o = y(!0), a = y(!1), s = y(!1), i = y(te());
+    let u = null, c = null;
+    const {
+      state: f,
+      zoomIn: g,
+      zoomOut: v,
+      reset: d,
+      canZoomIn: p,
+      canZoomOut: M,
+      contentStyle: h
+    } = W(), x = N(
+      () => {
+        var m;
+        return ((m = r.value) == null ? void 0 : m.success) && r.value.svg;
+      }
+    );
+    let w = null;
+    $(() => {
+      e.theme === "auto" && (w = ae((m) => {
+        i.value = m;
+      }));
+    }), E(() => {
+      w == null || w(), c && (clearTimeout(c), c = null);
+    });
+    let B = e.code, I = e.streamStatus;
+    T(
+      () => [e.code, e.theme, i.value, e.streamStatus],
+      async () => {
+        B = e.code, I = e.streamStatus;
+        const m = async () => {
+          I === "loading" && u || (o.value = !0);
+          const k = await Ce(e.theme).render(B);
+          k.success && k.svg ? (u = k.svg, r.value = k, o.value = !1, l.value = "preview") : I === "loading" ? u && (r.value = {
+            success: !0,
+            svg: u
+          }, o.value = !1) : (r.value = k, o.value = !1, l.value = "code");
+        };
+        e.streamStatus === "loading" ? c || (c = setTimeout(() => {
+          c = null, m();
+        }, be)) : (c && (clearTimeout(c), c = null), m());
+      },
+      { immediate: !0 }
+    );
+    const L = async () => {
+      await we(e.code) && (s.value = !0, n("copy", e.code), setTimeout(() => s.value = !1, 2e3));
+    }, S = async () => {
+      var m, b;
+      if ((m = r.value) != null && m.svg)
+        try {
+          const k = ((b = window.matchMedia) == null ? void 0 : b.call(window, "(prefers-color-scheme: dark)").matches) ?? !1;
+          await ne(r.value.svg, {
+            backgroundColor: k ? "#1a1a2e" : "#ffffff",
+            padding: 20,
+            scale: 2
+          });
+        } catch (k) {
+          console.error("Download failed:", k);
+        }
+    };
+    return () => {
+      const m = e.showToolbar ? t("div", { class: "md-mermaid-toolbar" }, [
+        // 模式切换
+        t("div", { class: "md-mermaid-toolbar-group md-mermaid-mode-switch" }, [
+          t(
+            "button",
+            {
+              type: "button",
+              class: `md-mermaid-toolbar-btn${l.value === "preview" ? " md-mermaid-toolbar-btn--active" : ""}`,
+              onClick: () => l.value = "preview",
+              disabled: !x.value,
+              title: "图片模式",
+              "aria-label": "图片模式"
+            },
+            t(de)
+          ),
+          t(
+            "button",
+            {
+              type: "button",
+              class: `md-mermaid-toolbar-btn${l.value === "code" ? " md-mermaid-toolbar-btn--active" : ""}`,
+              onClick: () => l.value = "code",
+              title: "代码模式",
+              "aria-label": "代码模式"
+            },
+            t(me)
+          )
+        ]),
+        // 缩放控制 - 仅图片模式显示
+        l.value === "preview" && x.value ? t("div", { class: "md-mermaid-toolbar-group" }, [
+          t(
+            "button",
+            {
+              type: "button",
+              class: "md-mermaid-toolbar-btn",
+              onClick: v,
+              disabled: !M.value,
+              title: "缩小",
+              "aria-label": "缩小"
+            },
+            t(K)
+          ),
+          t(
+            "span",
+            { class: "md-mermaid-zoom-label" },
+            `${Math.round(f.value.scale * 100)}%`
+          ),
+          t(
+            "button",
+            {
+              type: "button",
+              class: "md-mermaid-toolbar-btn",
+              onClick: g,
+              disabled: !p.value,
+              title: "放大",
+              "aria-label": "放大"
+            },
+            t(_)
+          ),
+          t(
+            "button",
+            {
+              type: "button",
+              class: "md-mermaid-toolbar-btn",
+              onClick: d,
+              title: "重置",
+              "aria-label": "重置缩放"
+            },
+            t(G)
+          )
+        ]) : null,
+        // 操作按钮
+        t("div", { class: "md-mermaid-toolbar-group" }, [
+          l.value === "preview" && x.value ? [
+            t(
+              "button",
+              {
+                type: "button",
+                class: "md-mermaid-toolbar-btn",
+                onClick: () => a.value = !0,
+                title: "全屏",
+                "aria-label": "全屏查看"
+              },
+              t(ve)
+            ),
+            t(
+              "button",
+              {
+                type: "button",
+                class: "md-mermaid-toolbar-btn",
+                onClick: S,
+                title: "下载 PNG",
+                "aria-label": "下载"
+              },
+              t(J)
+            )
+          ] : null,
+          l.value === "code" ? t(
+            "button",
+            {
+              type: "button",
+              class: `md-mermaid-toolbar-btn${s.value ? " md-mermaid-toolbar-btn--success" : ""}`,
+              onClick: L,
+              title: s.value ? "已复制" : "复制代码",
+              "aria-label": s.value ? "已复制" : "复制代码"
+            },
+            s.value ? t(ye) : t(he)
+          ) : null
+        ])
+      ]) : null;
+      let b;
+      return o.value ? b = t("div", { class: "md-mermaid-skeleton" }, [
+        t("div", { class: "md-mermaid-skeleton-box" })
+      ]) : l.value === "preview" && x.value ? b = t("div", { class: "md-mermaid-preview", style: { overflow: "hidden" } }, [
+        t("div", {
+          class: "md-mermaid-svg-container",
+          style: h.value,
+          innerHTML: r.value.svg
+        })
+      ]) : b = t("div", { class: "md-mermaid-code" }, [
+        t("pre", [t("code", { class: "language-mermaid" }, e.code)]),
+        // 错误提示 - 仅在非流式或流式完成时显示
+        r.value && !r.value.success && e.streamStatus === "done" ? t("div", { class: "md-mermaid-error" }, [
+          t("span", "渲染失败: "),
+          t("span", r.value.error)
+        ]) : null
+      ]), t("div", { class: "md-mermaid-block" }, [
+        m,
+        t("div", { class: "md-mermaid-content" }, [b]),
+        // 全屏查看器
+        x.value ? t(ge, {
+          svg: r.value.svg,
+          open: a.value,
+          onClose: () => a.value = !1,
+          onDownload: S
+        }) : null
+      ]);
+    };
+  }
+});
+function xe(e) {
+  var r;
+  if (e.tagName !== "pre") return !1;
+  const n = e.children.find(
+    (o) => o.type === "element" && o.tagName === "code"
+  );
+  if (!n) return !1;
+  const l = (r = n.properties) == null ? void 0 : r.className;
+  return Array.isArray(l) ? l.some((o) => typeof o == "string" && o.includes("language-mermaid")) : typeof l == "string" && l.includes("language-mermaid");
+}
+function Me(e) {
+  const n = e.children.find(
+    (l) => l.type === "element" && l.tagName === "code"
+  );
+  return n ? n.children.map((l) => l.type === "text" ? l.value : "").join("") : "";
+}
+function Se(e) {
+  return e ? e === !0 ? { enabled: !0 } : e.enabled !== !1 ? e : null : null;
+}
+const Q = C({
   name: "Markdown",
   props: {
     content: {
@@ -131,177 +805,190 @@ const L = A({
     copyButton: {
       type: Boolean,
       default: !0
+    },
+    mermaid: {
+      type: [Boolean, Object],
+      default: !1
     }
   },
   emits: ["codeCopy"],
-  setup(e, { emit: t }) {
-    w(
+  setup(e, { emit: n }) {
+    T(
       () => e.math,
-      (u) => {
-        u && R();
+      (o) => {
+        o && Y();
       },
       { immediate: !0 }
     );
-    function l(u, r = {}) {
-      if (u.type === "text")
-        return u.value;
-      if (u.type === "comment")
+    function l(o, a = {}, s = null) {
+      if (o.type === "text")
+        return o.value;
+      if (o.type === "comment")
         return null;
-      if (u.type === "root") {
-        const n = u.children.map((s) => l(s, r)).filter((s) => s !== null);
-        return f("div", { class: e.class }, n);
+      if (o.type === "root") {
+        const i = o.children.map((u) => l(u, a, s)).filter((u) => u !== null);
+        return t("div", { class: e.class }, i);
       }
-      if (u.type === "element") {
-        const { tagName: n, properties: s, children: o } = u, m = r[n] || n, d = {};
-        if (s)
-          for (const [i, c] of Object.entries(s))
-            i === "className" ? d.class = Array.isArray(c) ? c.join(" ") : c : d[i] = c;
-        const v = o.map((i) => l(i, r)).filter((i) => i !== null);
-        return typeof m == "string" ? f(m, d, v) : f(m, d, () => v);
+      if (o.type === "element") {
+        const { tagName: i, properties: u, children: c } = o;
+        if (s && xe(o)) {
+          const d = Me(o);
+          return t(ke, {
+            code: d,
+            theme: s.theme,
+            onCopy: (p) => n("codeCopy", p)
+          });
+        }
+        const f = a[i] || i, g = {};
+        if (u)
+          for (const [d, p] of Object.entries(u))
+            d === "className" ? g.class = Array.isArray(p) ? p.join(" ") : p : g[d] = p;
+        const v = c.map((d) => l(d, a, s)).filter((d) => d !== null);
+        return typeof f == "string" ? t(f, g, v) : t(f, g, () => v);
       }
       return null;
     }
-    const a = B(() => {
+    const r = N(() => {
       if (!e.content) return null;
-      const u = P(e.content, {
+      const o = j(e.content, {
         gfm: e.gfm,
         highlight: e.highlight,
         math: e.math,
         remarkPlugins: e.remarkPlugins,
         rehypePlugins: e.rehypePlugins
-      }), r = {
+      }), a = Se(e.mermaid), s = {
         ...e.copyButton ? {
-          pre: A({
-            setup(n, { slots: s }) {
-              return () => f(
-                L,
+          pre: C({
+            setup(i, { slots: u }) {
+              return () => t(
+                q,
                 {
                   showCopyButton: e.copyButton,
-                  onCopy: (o) => t("codeCopy", o)
+                  onCopy: (c) => n("codeCopy", c)
                 },
-                s.default
+                u.default
               );
             }
           })
         } : {},
         ...e.components
       };
-      return l(u, r);
+      return l(o, s, a);
     });
-    return () => a.value ? a.value : null;
+    return () => r.value ? r.value : null;
   }
 });
-function j(e, t) {
+function D(e, n) {
   if (e.type === "text")
     return e.value;
   if (e.type === "root") {
-    const l = e.children.map((a) => j(a, t)).filter((a) => a !== null);
-    return f("div", {}, l);
+    const l = e.children.map((r) => D(r, n)).filter((r) => r !== null);
+    return t("div", {}, l);
   }
   if (e.type === "element") {
-    const l = e, a = l.tagName, u = t == null ? void 0 : t[a], r = { ...l.properties };
-    r.className && (r.class = Array.isArray(r.className) ? r.className.join(" ") : r.className, delete r.className);
-    const n = l.children.map((s) => j(s, t)).filter((s) => s !== null);
-    return u ? f(u, r, () => n) : f(a, r, n);
+    const l = e, r = l.tagName, o = n == null ? void 0 : n[r], a = { ...l.properties };
+    a.className && (a.class = Array.isArray(a.className) ? a.className.join(" ") : a.className, delete a.className);
+    const s = l.children.map((i) => D(i, n)).filter((i) => i !== null);
+    return o ? t(o, a, () => s) : t(r, a, s);
   }
   return null;
 }
-function ae(e = {}) {
+function Ve(e = {}) {
   const {
-    components: t,
+    components: n,
     minUpdateInterval: l = 16,
-    immediate: a = !1,
-    outputRate: u = "medium",
-    ...r
-  } = e, n = F(r), s = new O(u), o = h(0), m = h(!1), d = h(0), v = h("idle");
-  let i = 0, c = null;
-  const y = () => {
-    const g = performance.now(), N = g - i;
-    a || N >= l ? (i = g, o.value++) : c === null && (c = requestAnimationFrame(() => {
-      c = null, i = performance.now(), o.value++;
+    immediate: r = !1,
+    outputRate: o = "medium",
+    ...a
+  } = e, s = P(a), i = new U(o), u = y(0), c = y(!1), f = y(0), g = y("idle");
+  let v = 0, d = null;
+  const p = () => {
+    const z = performance.now(), V = z - v;
+    r || V >= l ? (v = z, u.value++) : d === null && (d = requestAnimationFrame(() => {
+      d = null, v = performance.now(), u.value++;
     }));
-  }, k = (g) => {
-    n.append(g), y();
-  }, p = (g) => {
-    n.reset(), m.value = !1, d.value = 0, v.value = "running", s.start(
-      g,
-      (N) => {
-        N && n.append(N), d.value = s.progress, y();
+  }, M = (z) => {
+    s.append(z), p();
+  }, h = (z) => {
+    s.reset(), c.value = !1, f.value = 0, g.value = "running", i.start(
+      z,
+      (V) => {
+        V && s.append(V), f.value = i.progress, p();
       },
       () => {
-        n.finish(), m.value = !0, d.value = 1, v.value = "complete", y();
+        s.finish(), c.value = !0, f.value = 1, g.value = "complete", p();
       }
     );
-  }, S = () => {
-    s.pause(), v.value = s.status;
-  }, b = () => {
-    s.resume(), v.value = s.status;
-  }, H = () => {
-    s.skipToEnd(), v.value = s.status, d.value = 1;
-  }, q = () => {
-    s.stop(), n.finish(), m.value = !0, v.value = "complete", c !== null && (cancelAnimationFrame(c), c = null), o.value++;
-  }, K = () => {
-    s.stop(), n.reset(), m.value = !1, d.value = 0, v.value = "idle", c !== null && (cancelAnimationFrame(c), c = null), o.value++;
+  }, x = () => {
+    i.pause(), g.value = i.status;
+  }, w = () => {
+    i.resume(), g.value = i.status;
+  }, B = () => {
+    i.skipToEnd(), g.value = i.status, f.value = 1;
+  }, I = () => {
+    i.stop(), s.finish(), c.value = !0, g.value = "complete", d !== null && (cancelAnimationFrame(d), d = null), u.value++;
+  }, L = () => {
+    i.stop(), s.reset(), c.value = !1, f.value = 0, g.value = "idle", d !== null && (cancelAnimationFrame(d), d = null), u.value++;
   };
-  U(() => {
-    s.stop(), c !== null && cancelAnimationFrame(c);
+  E(() => {
+    i.stop(), d !== null && cancelAnimationFrame(d);
   });
-  const $ = B(() => (o.value, n.getState().blocks)), W = B(() => (o.value, n.getStats())), _ = B(() => (o.value, n.getContent()));
+  const S = N(() => (u.value, s.getState().blocks)), m = N(() => (u.value, s.getStats())), b = N(() => (u.value, s.getContent()));
   return {
-    vnode: B(() => {
-      o.value;
-      const g = n.getState();
-      if (g.blocks.length === 0)
+    vnode: N(() => {
+      u.value;
+      const z = s.getState();
+      if (z.blocks.length === 0)
         return null;
-      const N = g.blocks.map((C) => C.hast ? f(
+      const V = z.blocks.map((H) => H.hast ? t(
         "div",
         {
-          key: C.key,
-          "data-block-key": C.key,
-          "data-pending": !C.stable || void 0
+          key: H.key,
+          "data-block-key": H.key,
+          "data-pending": !H.stable || void 0
         },
-        [j(C.hast, t)]
-      ) : null).filter((C) => C !== null);
-      return f("div", { "data-streaming": !m.value }, N);
+        [D(H.hast, n)]
+      ) : null).filter((H) => H !== null);
+      return t("div", { "data-streaming": !c.value }, V);
     }),
-    append: k,
-    start: p,
-    pause: S,
-    resume: b,
-    skipToEnd: H,
-    reset: K,
-    finish: q,
-    blocks: $,
-    stats: W,
-    isComplete: m,
-    content: _,
-    progress: d,
-    outputStatus: v
+    append: M,
+    start: h,
+    pause: x,
+    resume: w,
+    skipToEnd: B,
+    reset: L,
+    finish: I,
+    blocks: S,
+    stats: m,
+    isComplete: c,
+    content: b,
+    progress: f,
+    outputStatus: g
   };
 }
-function V(e, t, l, a, u) {
+function O(e, n, l, r, o) {
   if (e.type === "text")
     return e.value;
   if (e.type === "root") {
-    const r = e.children.map((n) => V(n, t, l, a, u)).filter((n) => n !== null);
-    return f("div", {}, r);
+    const a = e.children.map((s) => O(s, n, l, r, o)).filter((s) => s !== null);
+    return t("div", {}, a);
   }
   if (e.type === "element") {
-    const r = e, n = r.tagName, s = t == null ? void 0 : t[n], o = { ...r.properties };
-    o.className && (o.class = Array.isArray(o.className) ? o.className.join(" ") : o.className, delete o.className);
-    const m = r.children.map((d) => V(d, t, l, a, u)).filter((d) => d !== null);
-    return n === "pre" && l && !s ? f(
-      L,
+    const a = e, s = a.tagName, i = n == null ? void 0 : n[s], u = { ...a.properties };
+    u.className && (u.class = Array.isArray(u.className) ? u.className.join(" ") : u.className, delete u.className);
+    const c = a.children.map((f) => O(f, n, l, r, o)).filter((f) => f !== null);
+    return s === "pre" && l && !i ? t(
+      q,
       {
-        showCopyButton: u && l,
-        onCopy: a
+        showCopyButton: o && l,
+        onCopy: r
       },
-      () => m
-    ) : s ? f(s, o, () => m) : f(n, o, m);
+      () => c
+    ) : i ? t(i, u, () => c) : t(s, u, c);
   }
   return null;
 }
-const E = A({
+const ee = C({
   name: "StreamingMarkdown",
   props: {
     content: {
@@ -354,139 +1041,142 @@ const E = A({
     }
   },
   emits: ["complete", "blockStable", "progress", "codeCopy"],
-  setup(e, { emit: t }) {
-    w(
+  setup(e, { emit: n }) {
+    T(
       () => e.math,
-      (i) => {
-        i && R();
+      (v) => {
+        v && Y();
       },
       { immediate: !0 }
     );
-    const l = F({
+    const l = P({
       gfm: e.gfm,
       highlight: e.highlight,
       math: e.math
-    }), a = new O(e.outputRate), u = h(0), r = h(""), n = h(void 0), s = h([]), o = h(!1);
-    let m = 0, d = null;
-    const v = () => {
-      const i = performance.now();
-      i - m >= e.minUpdateInterval ? (m = i, u.value++) : d === null && (d = requestAnimationFrame(() => {
-        d = null, m = performance.now(), u.value++;
+    }), r = new U(e.outputRate), o = y(0), a = y(""), s = y(void 0), i = y([]), u = y(!1);
+    let c = 0, f = null;
+    const g = () => {
+      const v = performance.now();
+      v - c >= e.minUpdateInterval ? (c = v, o.value++) : f === null && (f = requestAnimationFrame(() => {
+        f = null, c = performance.now(), o.value++;
       }));
     };
-    return w(
+    return T(
       () => e.source,
-      (i) => {
-        i !== void 0 && i !== n.value && (n.value = i, e.autoStart && i && (l.reset(), r.value = "", o.value = !1, a.start(
-          i,
-          (c) => {
-            c && (l.append(c), r.value += c), t("progress", a.progress), v();
+      (v) => {
+        v !== void 0 && v !== s.value && (s.value = v, e.autoStart && v && (l.reset(), a.value = "", u.value = !1, r.start(
+          v,
+          (d) => {
+            d && (l.append(d), a.value += d), n("progress", r.progress), g();
           },
           () => {
-            l.finish(), o.value = !0, t("complete"), v();
+            l.finish(), u.value = !0, n("complete"), g();
           }
         )));
       },
       { immediate: !0 }
-    ), w(
+    ), T(
       () => e.content,
-      (i) => {
+      (v) => {
         if (e.source !== void 0)
           return;
-        const c = r.value, y = i || "";
-        if (y !== c) {
-          if (y.startsWith(c)) {
-            const p = y.slice(c.length);
-            p && l.append(p);
+        const d = a.value, p = v || "";
+        if (p !== d) {
+          if (p.startsWith(d)) {
+            const h = p.slice(d.length);
+            h && l.append(h);
           } else
-            l.reset(), y && l.append(y);
-          r.value = y, v();
-          const k = l.getState().blocks;
-          k.forEach((p, S) => {
-            const b = s.value[S];
-            p.stable && (!b || !b.stable) && t("blockStable", p);
-          }), s.value = k;
+            l.reset(), p && l.append(p);
+          a.value = p, g();
+          const M = l.getState().blocks;
+          M.forEach((h, x) => {
+            const w = i.value[x];
+            h.stable && (!w || !w.stable) && n("blockStable", h);
+          }), i.value = M;
         }
       },
       { immediate: !0 }
-    ), w(
+    ), T(
       () => e.isComplete,
-      (i) => {
-        e.source === void 0 && i && (l.finish(), d !== null && (cancelAnimationFrame(d), d = null), u.value++, t("complete"));
+      (v) => {
+        e.source === void 0 && v && (l.finish(), f !== null && (cancelAnimationFrame(f), f = null), o.value++, n("complete"));
       }
-    ), w(
+    ), T(
       () => e.outputRate,
-      (i) => {
-        a.setRate(i);
+      (v) => {
+        r.setRate(v);
       }
-    ), U(() => {
-      a.stop(), d !== null && cancelAnimationFrame(d);
+    ), E(() => {
+      r.stop(), f !== null && cancelAnimationFrame(f);
     }), () => {
-      u.value;
-      const i = l.getState(), c = e.source !== void 0 ? o.value : e.isComplete, y = (p) => t("codeCopy", p), k = i.blocks.map((p) => p.hast ? f(
+      o.value;
+      const v = l.getState(), d = e.source !== void 0 ? u.value : e.isComplete, p = (h) => n("codeCopy", h), M = v.blocks.map((h) => h.hast ? t(
         "div",
         {
-          key: p.key,
-          "data-block-key": p.key,
-          "data-pending": !p.stable || void 0
+          key: h.key,
+          "data-block-key": h.key,
+          "data-pending": !h.stable || void 0
         },
-        [V(p.hast, e.components, e.copyButton, y, p.stable)]
-      ) : null).filter((p) => p !== null);
-      return f(
+        [O(h.hast, e.components, e.copyButton, p, h.stable)]
+      ) : null).filter((h) => h !== null);
+      return t(
         "div",
         {
           class: e.class,
-          "data-streaming": !c
+          "data-streaming": !d
         },
-        k
+        M
       );
     };
   }
 });
-function M(e, t = {}) {
+function Z(e, n = {}) {
   if (e.type === "text")
     return e.value;
   if (e.type === "comment")
     return null;
   if (e.type === "root") {
-    const l = e.children.map((a) => M(a, t)).filter((a) => a !== null);
-    return f("div", {}, l);
+    const l = e.children.map((r) => Z(r, n)).filter((r) => r !== null);
+    return t("div", {}, l);
   }
   if (e.type === "element") {
-    const { tagName: l, properties: a, children: u } = e, r = t[l] || l, n = {};
-    if (a)
-      for (const [o, m] of Object.entries(a))
-        o === "className" ? n.class = Array.isArray(m) ? m.join(" ") : m : n[o] = m;
-    const s = u.map((o) => M(o, t)).filter((o) => o !== null);
-    return f(r, n, () => s);
+    const { tagName: l, properties: r, children: o } = e, a = n[l] || l, s = {};
+    if (r)
+      for (const [u, c] of Object.entries(r))
+        u === "className" ? s.class = Array.isArray(c) ? c.join(" ") : c : s[u] = c;
+    const i = o.map((u) => Z(u, n)).filter((u) => u !== null);
+    return t(a, s, () => i);
   }
   return null;
 }
-function re(e, t = {}) {
-  const { components: l = {}, ...a } = t;
-  return B(() => {
-    const u = e();
-    if (!u) return null;
-    const r = P(u, a);
-    return M(r, l);
+function Te(e, n = {}) {
+  const { components: l = {}, ...r } = n;
+  return N(() => {
+    const o = e();
+    if (!o) return null;
+    const a = j(o, r);
+    return Z(a, l);
   });
 }
-function Y(e) {
-  e.component("Markdown", z), e.component("StreamingMarkdown", E);
+function ze(e) {
+  e.component("Markdown", Q), e.component("StreamingMarkdown", ee);
 }
-const le = {
-  install: Y,
-  Markdown: z,
-  StreamingMarkdown: E
+const Le = {
+  install: ze,
+  Markdown: Q,
+  StreamingMarkdown: ee
 };
 export {
-  L as CodeBlock,
-  z as Markdown,
-  E as StreamingMarkdown,
-  le as default,
-  Y as install,
-  ne as isKatexCssLoaded,
-  R as preloadKatexCss,
-  re as useMarkdown,
-  ae as useStreamingMarkdown
+  q as CodeBlock,
+  Q as Markdown,
+  ke as MermaidBlock,
+  ge as MermaidFullscreenViewer,
+  ee as StreamingMarkdown,
+  Le as default,
+  ze as install,
+  Ne as isKatexCssLoaded,
+  Y as preloadKatexCss,
+  Te as useMarkdown,
+  Ve as useStreamingMarkdown,
+  W as useZoom
 };