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

apps/web/src/PrecisePdfPreview.tsx

@@ -32,6 +32,7 @@ interface PdfPageDescriptor {
 
 export interface PrecisePdfPreviewProps {
   blob: Blob;
+  zoomPercent: number;
   onPageCount?: (pageCount: number) => void;
 }
 
@@ -39,6 +40,7 @@ interface PrecisePdfPageProps {
   document: PDFDocumentProxy;
   descriptor: PdfPageDescriptor;
   renderQueue: PdfPageRenderQueue;
+  zoomPercent: number;
 }
 
 function useNearViewport(elementRef: React.RefObject<HTMLElement | null>) {
@@ -90,7 +92,8 @@ function useNearViewport(elementRef: React.RefObject<HTMLElement | null>) {
 function PrecisePdfPage({
   document,
   descriptor,
-  renderQueue
+  renderQueue,
+  zoomPercent
 }: PrecisePdfPageProps) {
   const containerRef = useRef<HTMLDivElement>(null);
   const canvasRef = useRef<HTMLCanvasElement>(null);
@@ -103,10 +106,12 @@ function PrecisePdfPage({
   const nearViewport = useNearViewport(containerRef);
   const dimensions = getPdfPageCssDimensions(
     descriptor.width,
-    descriptor.height
+    descriptor.height,
+    zoomPercent / 100
   );
   const pageStyle = {
     width: `${dimensions.width}px`,
+    maxWidth: `${zoomPercent}%`,
     aspectRatio: `${descriptor.width} / ${descriptor.height}`
   } satisfies CSSProperties;
 
@@ -293,6 +298,7 @@ function PrecisePdfPage({
 
 export function PrecisePdfPreview({
   blob,
+  zoomPercent,
   onPageCount
 }: PrecisePdfPreviewProps) {
   const [document, setDocument] = useState<PDFDocumentProxy>();
@@ -381,6 +387,7 @@ export function PrecisePdfPreview({
           document={document}
           descriptor={page}
           renderQueue={renderQueue}
+          zoomPercent={zoomPercent}
         />
       ))}
     </div>