refactor: 收敛渲染链路共享抽象

apps/web/src/App.tsx

@@ -10,6 +10,7 @@ import {
   useState
 } from "react";
 import {
+  createPagedDocumentPayload,
   getPaperDimensionsMm,
   millimetersToCssPixels,
   type ExportConfig
@@ -43,6 +44,11 @@ import {
   loadPreviewZoom,
   savePreviewZoom
 } from "./preview-zoom";
+import { useMarkdownRender } from "./use-markdown-render";
+import {
+  type ThemeSummary,
+  useThemeResources
+} from "./use-theme-resources";
 
 const PrecisePdfPreview = lazy(async () => {
   const module = await import("./PrecisePdfPreview");
@@ -51,28 +57,6 @@ const PrecisePdfPreview = lazy(async () => {
 
 type PreviewMode = "quick" | "precise";
 
-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: 内网文档团队
@@ -113,15 +97,11 @@ flowchart LR
 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 [exportConfig, setExportConfig] =
     useState<ExportConfig>(loadExportConfig);
-  const [themeCss, setThemeCss] = useState("");
   const [settingsOpen, setSettingsOpen] = useState(false);
   const [status, setStatus] = useState("正在准备预览…");
-  const [renderError, setRenderError] = useState("");
-  const [themeError, setThemeError] = useState("");
+  const [appError, setAppError] = useState("");
   const [mermaidError, setMermaidError] = useState("");
   const [paginationError, setPaginationError] = useState("");
   const [pdfError, setPdfError] = useState("");
@@ -146,9 +126,47 @@ export function App() {
     "editor" | "preview" | undefined
   >(undefined);
 
+  const handleThemesLoaded = useCallback(
+    (availableThemes: ThemeSummary[]) => {
+      setExportConfig((currentConfig) => {
+        if (
+          availableThemes.some(
+            (theme) => theme.id === currentConfig.themeId
+          )
+        ) {
+          return currentConfig;
+        }
+        const preferredTheme =
+          availableThemes.find((theme) => theme.id === "typora-github") ??
+          availableThemes.find((theme) => theme.id === "typora-like") ??
+          availableThemes[0];
+        return preferredTheme
+          ? { ...currentConfig, themeId: preferredTheme.id }
+          : currentConfig;
+      });
+    },
+    []
+  );
+  const handleRenderStart = useCallback(() => {
+    setMermaidError("");
+  }, []);
+  const { error: renderError, result } = useMarkdownRender(
+    markdown,
+    "zh-CN",
+    {
+      onRenderStart: handleRenderStart,
+      onStatusChange: setStatus
+    }
+  );
+  const {
+    error: themeError,
+    themeCss,
+    themes
+  } = useThemeResources(exportConfig.themeId, handleThemesLoaded);
   const error =
     renderError ||
     themeError ||
+    appError ||
     mermaidError ||
     paginationError ||
     pdfError;
@@ -176,14 +194,12 @@ export function App() {
   const previewPayload = useMemo<PagedPreviewPayload | undefined>(
     () =>
       result && themeCss
-        ? {
-            articleHtml: result.articleHtml,
+        ? createPagedDocumentPayload({
+            document: result,
             fileName,
-            metadata: result.metadata,
-            features: result.features,
             themeCss,
             exportConfig
-          }
+          })
         : undefined,
     [exportConfig, fileName, result, themeCss]
   );
@@ -204,53 +220,12 @@ export function App() {
   previewModeRef.current = previewMode;
   pdfRequestKeyRef.current = pdfCacheKey;
 
-  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);
-        setExportConfig((currentConfig) => {
-          if (
-            availableThemes.some(
-              (theme) => theme.id === currentConfig.themeId
-            )
-          ) {
-            return currentConfig;
-          }
-          const preferredTheme =
-            availableThemes.find((theme) => theme.id === "typora-github") ??
-            availableThemes.find((theme) => theme.id === "typora-like") ??
-            availableThemes[0];
-          return preferredTheme
-            ? { ...currentConfig, themeId: preferredTheme.id }
-            : currentConfig;
-        });
-      })
-      .catch((reason: unknown) => {
-        if (!controller.signal.aborted) {
-          setThemeError(
-            reason instanceof Error ? reason.message : "无法加载主题清单"
-          );
-        }
-      });
-
-    return () => controller.abort();
-  }, []);
-
   useEffect(() => {
     try {
       saveExportConfig(exportConfig);
+      setAppError("");
     } catch {
-      setRenderError("无法保存导出设置，当前设置仅在本次页面中有效");
+      setAppError("无法保存导出设置，当前设置仅在本次页面中有效");
     }
   }, [exportConfig]);
 
@@ -271,77 +246,9 @@ export function App() {
   }, [pdfCache, pdfCacheKey]);
 
   useEffect(() => {
-    const controller = new AbortController();
     setPreviewFrameReady(false);
-    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]);
-
   useEffect(() => {
     function handlePreviewFrameMessage(event: MessageEvent<unknown>) {
       const frame = previewFrameRef.current;
@@ -552,10 +459,11 @@ export function App() {
     }
 
     try {
+      setAppError("");
       setMarkdown(await file.text());
       setFileName(file.name);
     } catch {
-      setRenderError("无法读取所选 Markdown 文件");
+      setAppError("无法读取所选 Markdown 文件");
     } finally {
       event.target.value = "";
     }