feat: 实现网页实时预览

2026-07-25 21:52:45 +08:00
parent 7224dfdf60
commit fa07472428
16 changed files with 2860 additions and 218 deletions
@@ -1,60 +1,441 @@
-import { defaultExportConfig, paperFormatLabels } from "@md-to-pdf/core";
+import {
+  type ChangeEvent,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import highlightCss from "highlight.js/styles/github.css?inline";
+import katexCss from "katex/dist/katex.min.css?inline";

-const capabilities = [
-  "Markdown 本地预览",
-  "Chromium PDF 下载",
-  "纸张与页边距",
-  "页眉、页脚与页码",
-  "可扩展 CSS 主题"
-];
+interface RenderedMarkdown {
+  articleHtml: string;
+  metadata: {
+    title: string;
+    author: string;
+    subject: string;
+    keywords: string[];
+    language: string;
+  };
+  features: string[];
+  warnings: string[];
+}
+
+interface ThemeSummary {
+  id: string;
+  name: string;
+  version: string;
+  description: string;
+  bundled: boolean;
+  source: "bundled" | "local";
+}
+
+const sampleMarkdown = `---
+title: Markdown PDF 示例
+author: 内网文档团队
+keywords:
+  - Markdown
+  - PDF
+---
+
+# Markdown PDF 示例
+
+这是一份使用 **Typora 风格主题** 渲染的预览文档。
+
+## 常用内容
+
+- [x] Markdown 实时预览
+- [x] 表格与任务列表
+- [x] 数学公式与 Mermaid
+- [ ] Chromium PDF 导出
+
+| 功能 | 当前状态 |
+| --- | --- |
+| HTML 预览 | 已实现 |
+| PDF 下载 | 下一阶段 |
+
+行内公式：$E = mc^2$
+
+\`\`\`mermaid
+flowchart LR
+  A["Markdown"] --> B["统一 HTML"]
+  B --> C["主题 CSS"]
+  C --> D["网页预览"]
+  C --> E["PDF 导出"]
+\`\`\`
+
+> 预览和 PDF 将共用同一份 HTML 与 CSS。
+`;
+
+const previewBaseCss = `
+:root {
+  color-scheme: light;
+  background: #fff;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  margin: 0;
+  min-width: 0;
+  background: #fff;
+}
+
+img,
+svg {
+  max-width: 100%;
+}
+
+.mermaid {
+  display: flex;
+  justify-content: center;
+  margin: 1.5em 0;
+  overflow: auto;
+}
+`;
+
+let mermaidPromise: Promise<(typeof import("mermaid"))["default"]> | undefined;
+let mermaidRenderSequence = 0;
+
+async function loadMermaid() {
+  if (!mermaidPromise) {
+    mermaidPromise = import("mermaid").then(({ default: mermaid }) => {
+      mermaid.initialize({
+        startOnLoad: false,
+        securityLevel: "strict",
+        theme: "neutral",
+        fontFamily: "Segoe UI, Microsoft YaHei, sans-serif"
+      });
+      return mermaid;
+    });
+  }
+
+  return mermaidPromise;
+}
+
+function escapeHtml(value: string) {
+  return value
+    .replaceAll("&", "&amp;")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;");
+}
+
+function escapeStyleContent(value: string) {
+  return value.replace(/<\/style/gi, "<\\/style");
+}
+
+function buildPreviewDocument(
+  result: RenderedMarkdown,
+  themeCss: string
+) {
+  return `<!doctype html>
+<html lang="${escapeHtml(result.metadata.language || "zh-CN")}">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      http-equiv="Content-Security-Policy"
+      content="default-src 'none'; style-src 'unsafe-inline'; font-src 'self' data:; img-src 'self' data:;"
+    />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>${escapeHtml(result.metadata.title || "Markdown 预览")}</title>
+    <style>${escapeStyleContent(previewBaseCss)}</style>
+    <style>${escapeStyleContent(highlightCss)}</style>
+    <style>${escapeStyleContent(katexCss)}</style>
+    <style>${escapeStyleContent(themeCss)}</style>
+  </head>
+  <body>
+    ${result.articleHtml}
+  </body>
+</html>`;
+}

 export function App() {
+  const [markdown, setMarkdown] = useState(sampleMarkdown);
+  const [fileName, setFileName] = useState("示例文档.md");
+  const [result, setResult] = useState<RenderedMarkdown | null>(null);
+  const [themes, setThemes] = useState<ThemeSummary[]>([]);
+  const [themeId, setThemeId] = useState("typora-like");
+  const [themeCss, setThemeCss] = useState("");
+  const [status, setStatus] = useState("正在准备预览…");
+  const [renderError, setRenderError] = useState("");
+  const [themeError, setThemeError] = useState("");
+  const [mermaidError, setMermaidError] = useState("");
+  const previewFrameRef = useRef<HTMLIFrameElement>(null);
+
+  const error = renderError || themeError || mermaidError;
+  const selectedTheme = themes.find((theme) => theme.id === themeId);
+  const previewDocument = useMemo(
+    () =>
+      result && themeCss ? buildPreviewDocument(result, themeCss) : undefined,
+    [result, themeCss]
+  );
+
+  useEffect(() => {
+    const controller = new AbortController();
+
+    void fetch("/api/themes", {
+      signal: controller.signal
+    })
+      .then(async (response) => {
+        if (!response.ok) {
+          throw new Error("无法加载主题清单");
+        }
+        return response.json() as Promise<{ themes: ThemeSummary[] }>;
+      })
+      .then(({ themes: availableThemes }) => {
+        setThemes(availableThemes);
+        const preferredTheme =
+          availableThemes.find((theme) => theme.id === "typora-github") ??
+          availableThemes.find((theme) => theme.id === "typora-like") ??
+          availableThemes[0];
+        if (preferredTheme) {
+          setThemeId(preferredTheme.id);
+        }
+      })
+      .catch((reason: unknown) => {
+        if (!controller.signal.aborted) {
+          setThemeError(
+            reason instanceof Error ? reason.message : "无法加载主题清单"
+          );
+        }
+      });
+
+    return () => controller.abort();
+  }, []);
+
+  useEffect(() => {
+    const controller = new AbortController();
+    setThemeCss("");
+    setThemeError("");
+
+    void fetch(`/api/themes/${encodeURIComponent(themeId)}/css`, {
+      signal: controller.signal
+    })
+      .then(async (response) => {
+        if (!response.ok) {
+          throw new Error("无法加载主题");
+        }
+        return response.text();
+      })
+      .then(setThemeCss)
+      .catch((reason: unknown) => {
+        if (!controller.signal.aborted) {
+          setThemeError(
+            reason instanceof Error ? reason.message : "无法加载主题"
+          );
+        }
+      });
+
+    return () => controller.abort();
+  }, [themeId]);
+
+  useEffect(() => {
+    const controller = new AbortController();
+    const timer = window.setTimeout(() => {
+      setStatus("正在渲染…");
+      setRenderError("");
+      setMermaidError("");
+
+      void fetch("/api/render", {
+        method: "POST",
+        headers: {
+          "content-type": "application/json"
+        },
+        body: JSON.stringify({
+          markdown,
+          language: "zh-CN"
+        }),
+        signal: controller.signal
+      })
+        .then(async (response) => {
+          const payload = await response.json();
+          if (!response.ok) {
+            throw new Error(payload.message ?? "渲染失败");
+          }
+          return payload as RenderedMarkdown;
+        })
+        .then((payload) => {
+          setResult(payload);
+          setStatus("预览已更新");
+        })
+        .catch((reason: unknown) => {
+          if (!controller.signal.aborted) {
+            setRenderError(
+              reason instanceof Error ? reason.message : "渲染失败"
+            );
+            setStatus("预览失败");
+          }
+        });
+    }, 250);
+
+    return () => {
+      window.clearTimeout(timer);
+      controller.abort();
+    };
+  }, [markdown]);
+
+  async function handlePreviewLoad() {
+    const frame = previewFrameRef.current;
+    const document = frame?.contentDocument;
+    if (!frame || !document || !result) {
+      return;
+    }
+
+    const resizeFrame = () => {
+      frame.style.height = `${Math.max(
+        document.documentElement.scrollHeight,
+        document.body.scrollHeight,
+        500
+      )}px`;
+    };
+
+    resizeFrame();
+    await document.fonts.ready;
+
+    if (result.features.includes("mermaid")) {
+      const nodes = Array.from(
+        document.querySelectorAll<HTMLElement>(
+          ".mermaid[data-mermaid-pending]"
+        )
+      );
+
+      if (nodes.length > 0) {
+        try {
+          const mermaid = await loadMermaid();
+          for (const node of nodes) {
+            const definition = node.textContent ?? "";
+            mermaidRenderSequence += 1;
+            const { svg, bindFunctions } = await mermaid.render(
+              `mermaid-preview-${mermaidRenderSequence}`,
+              definition
+            );
+            node.innerHTML = svg;
+            node.removeAttribute("data-mermaid-pending");
+            bindFunctions?.(node);
+          }
+        } catch (reason: unknown) {
+          setMermaidError(
+            reason instanceof Error
+              ? `Mermaid：${reason.message}`
+              : "Mermaid 渲染失败"
+          );
+        }
+      }
+    }
+
+    resizeFrame();
+  }
+
+  async function handleFileChange(event: ChangeEvent<HTMLInputElement>) {
+    const file = event.target.files?.[0];
+    if (!file) {
+      return;
+    }
+
+    try {
+      setMarkdown(await file.text());
+      setFileName(file.name);
+    } catch {
+      setRenderError("无法读取所选 Markdown 文件");
+    } finally {
+      event.target.value = "";
+    }
+  }
+
  return (
-    <main className="shell">
-      <section className="intro" aria-labelledby="page-title">
-        <p className="eyebrow">内网文档工具</p>
-        <h1 id="page-title">Markdown PDF 导出器</h1>
-        <p className="summary">
-          使用同一份 HTML 与主题 CSS 完成网页预览和 Chromium PDF 渲染。
-        </p>
-        <div className="status">
-          <span className="status-dot" aria-hidden="true" />
-          项目骨架已就绪
-        </div>
-      </section>
-
-      <section className="panel" aria-labelledby="config-title">
+    <main className="workspace">
+      <header className="topbar">
        <div>
-          <p className="panel-label">默认导出预设</p>
-          <h2 id="config-title">{defaultExportConfig.name}</h2>
+          <p className="eyebrow">内网文档工具</p>
+          <h1>Markdown PDF 导出器</h1>
        </div>
-        <dl className="facts">
-          <div>
-            <dt>纸张</dt>
-            <dd>{paperFormatLabels[defaultExportConfig.paper.format]}</dd>
-          </div>
-          <div>
-            <dt>方向</dt>
-            <dd>
-              {defaultExportConfig.paper.orientation === "portrait"
-                ? "纵向"
-                : "横向"}
-            </dd>
-          </div>
-          <div>
-            <dt>主题</dt>
-            <dd>{defaultExportConfig.themeId}</dd>
-          </div>
-        </dl>
-      </section>
+        <div className="topbar-actions">
+          <label className="file-button">
+            选择 Markdown
+            <input
+              type="file"
+              accept=".md,.markdown,text/markdown,text/plain"
+              onChange={handleFileChange}
+            />
+          </label>
+          <button type="button" disabled title="下一阶段实现">
+            导出 PDF
+          </button>
+        </div>
+      </header>

-      <section className="capabilities" aria-label="规划能力">
-        {capabilities.map((item, index) => (
-          <article key={item}>
-            <span>{String(index + 1).padStart(2, "0")}</span>
-            <p>{item}</p>
-          </article>
-        ))}
+      <section className="editor-layout">
+        <aside className="editor-panel" aria-label="Markdown 编辑区">
+          <div className="panel-heading">
+            <div>
+              <span className="panel-kicker">源文件</span>
+              <strong>{fileName}</strong>
+            </div>
+            <span className={`render-status${error ? " is-error" : ""}`}>
+              {error || status}
+            </span>
+          </div>
+          <textarea
+            aria-label="Markdown 内容"
+            value={markdown}
+            spellCheck={false}
+            onChange={(event) => setMarkdown(event.target.value)}
+          />
+        </aside>
+
+        <section className="preview-panel" aria-label="文档预览">
+          <div className="panel-heading">
+            <div>
+              <span className="panel-kicker">实时预览</span>
+              <strong>{result?.metadata.title || "未命名文档"}</strong>
+            </div>
+            <label className="theme-control">
+              <span className="sr-only">预览主题</span>
+              <select
+                aria-label="预览主题"
+                value={themeId}
+                onChange={(event) => setThemeId(event.target.value)}
+              >
+                {themes.length === 0 ? (
+                  <option value={themeId}>正在加载主题…</option>
+                ) : (
+                  themes.map((theme) => (
+                    <option key={theme.id} value={theme.id}>
+                      {theme.name}
+                    </option>
+                  ))
+                )}
+              </select>
+              {selectedTheme?.source === "local" ? (
+                <span className="local-theme-mark">本地</span>
+              ) : null}
+            </label>
+          </div>
+          <div className="preview-scroll">
+            <div
+              className={`paper${
+                selectedTheme?.source === "local" ? " is-local-theme" : ""
+              }`}
+            >
+              {previewDocument ? (
+                <iframe
+                  ref={previewFrameRef}
+                  className="preview-frame"
+                  title="文档内容预览"
+                  sandbox="allow-same-origin"
+                  srcDoc={previewDocument}
+                  onLoad={() => void handlePreviewLoad()}
+                />
+              ) : (
+                <div className="preview-loading">正在生成文档预览…</div>
+              )}
+            </div>
+          </div>
+        </section>
      </section>
    </main>
  );