feat: 完善 Mermaid 配置与预览缩放

apps/web/src/App.tsx

@@ -11,9 +11,11 @@ import {
 } from "react";
 import {
   getPaperDimensionsMm,
+  millimetersToCssPixels,
   type ExportConfig
 } from "@md-to-pdf/core";
 import { ExportSettingsDrawer } from "./ExportSettingsDrawer";
+import { PreviewZoomControl } from "./PreviewZoomControl";
 import {
   loadExportConfig,
   resetExportConfig,
@@ -37,6 +39,10 @@ import {
   type PdfExportRequest
 } from "./pdf-export";
 import { getSyncedScrollTop } from "./scroll-sync";
+import {
+  loadPreviewZoom,
+  savePreviewZoom
+} from "./preview-zoom";
 
 const PrecisePdfPreview = lazy(async () => {
   const module = await import("./PrecisePdfPreview");
@@ -122,6 +128,7 @@ export function App() {
   const [exportingPdf, setExportingPdf] = useState(false);
   const [previewMode, setPreviewMode] =
     useState<PreviewMode>("quick");
+  const [previewZoom, setPreviewZoom] = useState(loadPreviewZoom);
   const [pdfCache, setPdfCache] = useState<CachedPdfExport>();
   const [previewFrameReady, setPreviewFrameReady] = useState(false);
   const [previewPagination, setPreviewPagination] = useState({
@@ -151,9 +158,20 @@ export function App() {
     exportConfig.paper.format,
     exportConfig.paper.orientation
   );
+  const previewScale = previewZoom / 100;
+  const naturalPaperWidth =
+    millimetersToCssPixels(paperDimensions.width) +
+    PREVIEW_SCROLLBAR_WIDTH_PX;
+  const scaledPaperWidth = naturalPaperWidth * previewScale;
   const paperStyle = {
-    width: `calc(${paperDimensions.width}mm + ${PREVIEW_SCROLLBAR_WIDTH_PX}px)`,
-    minWidth: `calc(${paperDimensions.width}mm + ${PREVIEW_SCROLLBAR_WIDTH_PX}px)`
+    width: `${scaledPaperWidth}px`,
+    minWidth: `${scaledPaperWidth}px`
+  } satisfies CSSProperties;
+  const previewFrameStyle = {
+    width: `${100 / previewScale}%`,
+    height: `${100 / previewScale}%`,
+    transform: `scale(${previewScale})`,
+    transformOrigin: "top left"
   } satisfies CSSProperties;
   const previewPayload = useMemo<PagedPreviewPayload | undefined>(
     () =>
@@ -236,6 +254,15 @@ export function App() {
     }
   }, [exportConfig]);
 
+  useEffect(() => {
+    savePreviewZoom(previewZoom);
+    const frame = window.requestAnimationFrame(() => {
+      synchronizeScroll("editor");
+      updatePreviewCurrentPage();
+    });
+    return () => window.cancelAnimationFrame(frame);
+  }, [previewZoom]);
+
   useEffect(() => {
     if (pdfCache && pdfCache.key !== pdfCacheKey) {
       setPdfCache(undefined);
@@ -715,6 +742,12 @@ export function App() {
               </label>
             </span>
           </div>
+          <div className="preview-toolbar">
+            <PreviewZoomControl
+              value={previewZoom}
+              onChange={setPreviewZoom}
+            />
+          </div>
           <div
             ref={previewScrollRef}
             className="preview-scroll"
@@ -726,6 +759,7 @@ export function App() {
                   <iframe
                     ref={previewFrameRef}
                     className="preview-frame"
+                    style={previewFrameStyle}
                     title="文档内容预览"
                     sandbox="allow-same-origin allow-scripts"
                     src="/preview-frame.html"
@@ -750,6 +784,7 @@ export function App() {
               >
                 <PrecisePdfPreview
                   blob={cachedPdf.blob}
+                  zoomPercent={previewZoom}
                   onPageCount={handlePrecisePageCount}
                 />
               </Suspense>