docnest 0.1.14 → 0.1.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "docnest",
-  "version": "0.1.14",
+  "version": "0.1.15",
   "description": "可复用的本地 Markdown 文档中心",
   "repository": {
     "type": "git",

package/server/static/css/styles.css

@@ -179,13 +179,26 @@ body {
 }
 
 .doc-pdf-export-root {
+  /* PDF pages use a light paper palette, independently of the live reading mode. */
+  --linear-bg: #ffffff;
+  --linear-bg-subtle: #fafafa;
+  --linear-border: #e5e5e5;
+  --linear-text: #111111;
+  --linear-text-muted: #6b6b6b;
+  --linear-accent: #5e6ad2;
+  --linear-accent-hover: #4c57b8;
+  --doc-surface-raised: #ffffff;
+  --doc-rule-strong: #bfc0c5;
+  --doc-accent-soft: rgba(94, 106, 210, 0.12);
+  --doc-code-bg: #f6f7f8;
+  --doc-code-text: #24262b;
   position: absolute;
   left: 0;
   top: 0;
   width: 960px;
   padding: 24px 32px;
-  background: #ffffff;
-  color: #111111;
+  background: var(--doc-surface-raised);
+  color: var(--linear-text);
   z-index: -1;
   pointer-events: none;
   overflow: visible;

package/server/static/css/themes.css

@@ -379,7 +379,8 @@ body[data-doc-theme][data-theme="dark"] .pdf-export-modal__btn {
 }
 
 /* Theme 01: Slate Modern — the package's original visual language. */
-body[data-doc-theme="slate-modern"] {
+body[data-doc-theme="slate-modern"],
+.doc-pdf-export-root[data-doc-theme="slate-modern"] {
   --doc-font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
     "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
   --doc-font-reading: var(--doc-font-ui);
@@ -387,7 +388,8 @@ body[data-doc-theme="slate-modern"] {
 }
 
 /* Theme 02: Editorial Atlas */
-body[data-doc-theme="editorial-atlas"] {
+body[data-doc-theme="editorial-atlas"],
+.doc-pdf-export-root[data-doc-theme="editorial-atlas"] {
   --linear-bg: #f3f0e7;
   --linear-bg-subtle: #ebe6da;
   --linear-sidebar: #eee9dd;
@@ -490,7 +492,8 @@ body[data-doc-theme="editorial-atlas"] .doc-toc {
 }
 
 /* Theme 03: Precision Index */
-body[data-doc-theme="precision-index"] {
+body[data-doc-theme="precision-index"],
+.doc-pdf-export-root[data-doc-theme="precision-index"] {
   --linear-bg: #eef2f3;
   --linear-bg-subtle: #e4eaec;
   --linear-sidebar: #e9eef0;
@@ -640,7 +643,8 @@ body[data-doc-theme="precision-index"] .doc-toc-title {
 }
 
 /* Theme 04: Archive Room */
-body[data-doc-theme="archive-room"] {
+body[data-doc-theme="archive-room"],
+.doc-pdf-export-root[data-doc-theme="archive-room"] {
   --linear-bg: #f3efe4;
   --linear-bg-subtle: #e9e2d3;
   --linear-sidebar: #ebe5d8;
@@ -775,7 +779,8 @@ body[data-doc-theme="archive-room"] .doc-toc {
 }
 
 /* Theme 05: Swiss Manual */
-body[data-doc-theme="swiss-manual"] {
+body[data-doc-theme="swiss-manual"],
+.doc-pdf-export-root[data-doc-theme="swiss-manual"] {
   --linear-bg: #f4f3ef;
   --linear-bg-subtle: #e9e7e0;
   --linear-sidebar: #eeece6;

package/server/static/js/core/doc-pdf-export.js

@@ -93,9 +93,40 @@
   function createExportRoot(article) {
     var root = document.createElement('div');
     root.className = EXPORT_CLASS;
+    root.setAttribute('data-doc-theme', document.body.getAttribute('data-doc-theme') || 'slate-modern');
+    root.setAttribute('data-theme', 'light');
 
     var clone = article.cloneNode(true);
     removeTransientNodes(clone);
+    // html2canvas may paint closed <details> descendants without reserving their
+    // height. Export static, expanded sections while leaving the live page alone.
+    Array.prototype.slice.call(clone.querySelectorAll('details')).reverse().forEach(function(details) {
+      var section = document.createElement('section');
+      Array.prototype.slice.call(details.attributes).forEach(function(attribute) {
+        if (attribute.name !== 'open') section.setAttribute(attribute.name, attribute.value);
+      });
+      section.style.display = 'block';
+      section.style.height = 'auto';
+      section.style.maxHeight = 'none';
+      section.style.overflow = 'visible';
+      section.style.margin = '1em 0';
+      while (details.firstChild) {
+        var child = details.firstChild;
+        if (child.tagName === 'SUMMARY') {
+          var heading = document.createElement('div');
+          heading.className = 'doc-pdf-section-title';
+          heading.style.fontWeight = '700';
+          heading.style.marginBottom = '12px';
+          while (child.firstChild) heading.appendChild(child.firstChild);
+          section.appendChild(heading);
+          details.removeChild(child);
+        } else {
+          section.appendChild(child);
+        }
+      }
+      details.parentNode.replaceChild(section, details);
+    });
+    clone.querySelectorAll('img').forEach(function(img) { img.loading = 'eager'; });
     root.appendChild(clone);
     document.body.appendChild(root);
 
@@ -137,18 +168,60 @@
     return breakpoints;
   }
 
+  function collectProtectedRegions(root, canvasScale) {
+    var rootRect = root.getBoundingClientRect();
+    var regions = [];
+    root.querySelectorAll('img, svg, canvas, figure, .mermaid').forEach(function(node) {
+      var rect = node.getBoundingClientRect();
+      if (rect.width <= 0 || rect.height <= 0) return;
+      regions.push({
+        top: Math.max(0, Math.floor((rect.top - rootRect.top) * canvasScale)),
+        bottom: Math.max(0, Math.ceil((rect.bottom - rootRect.top) * canvasScale)),
+      });
+    });
+    regions.sort(function(a, b) { return a.top - b.top || b.bottom - a.bottom; });
+    var merged = [];
+    regions.forEach(function(region) {
+      var last = merged[merged.length - 1];
+      if (last && region.top < last.bottom) {
+        last.bottom = Math.max(last.bottom, region.bottom);
+      } else {
+        merged.push(region);
+      }
+    });
+    return merged;
+  }
+
   function cleanupExportRoot(root) {
     if (root && root.parentNode) {
       root.parentNode.removeChild(root);
     }
   }
 
-  function waitForExportReady() {
+  function waitForExportReady(root) {
     var fontReady = document.fonts && document.fonts.ready
       ? document.fonts.ready.catch(function() {})
       : Promise.resolve();
 
-    return fontReady.then(function() {
+    var imagesReady = Promise.all(Array.prototype.map.call(root.querySelectorAll('img'), function(img) {
+      if (img.complete) {
+        return img.naturalWidth > 0 ? Promise.resolve() : Promise.reject(new Error('文档图片加载失败'));
+      }
+      return new Promise(function(resolve, reject) {
+        var timer = setTimeout(function() { finish(new Error('等待文档图片超时')); }, 15000);
+        function finish(error) {
+          clearTimeout(timer);
+          img.removeEventListener('load', loaded);
+          img.removeEventListener('error', failed);
+          if (error) reject(error); else resolve();
+        }
+        function loaded() { finish(); }
+        function failed() { finish(new Error('文档图片加载失败')); }
+        img.addEventListener('load', loaded, { once: true });
+        img.addEventListener('error', failed, { once: true });
+      });
+    }));
+    return Promise.all([fontReady, imagesReady]).then(function() {
       return new Promise(function(resolve) {
         requestAnimationFrame(function() {
           requestAnimationFrame(resolve);
@@ -169,8 +242,9 @@
       logging: false,
       width: width,
       height: height,
-      windowWidth: width,
-      windowHeight: height,
+      // Keep vw/vh styles and media queries identical to the measured DOM.
+      windowWidth: window.innerWidth,
+      windowHeight: window.innerHeight,
       scrollX: 0,
       scrollY: 0,
     });
@@ -313,7 +387,7 @@
     return Math.max(minBreakY - startY, searchStartY + bestRow - startY);
   }
 
-  function addCanvasToPdf(pdf, canvas, margin, blockBreakpoints, watermark) {
+  function addCanvasToPdf(pdf, canvas, margin, blockBreakpoints, watermark, protectedRegions) {
     var pageWidth = pdf.internal.pageSize.getWidth();
     var pageHeight = pdf.internal.pageSize.getHeight();
     var usableWidth = pageWidth - margin * 2;
@@ -338,6 +412,16 @@
           sliceHeight = findBestPageBreak(canvas, sourceCtx, offsetY, pageCanvasHeight);
         }
       }
+      sliceHeight = Math.min(sliceHeight, remainingHeight, pageCanvasHeight);
+      var sliceEnd = offsetY + sliceHeight;
+      (protectedRegions || []).forEach(function(region) {
+        if (region.top < sliceEnd && region.bottom > sliceEnd) {
+          // Move a fitting image to the next page even if this leaves whitespace.
+          // A taller-than-page image receives one whole, scaled PDF page.
+          sliceEnd = region.top > offsetY ? region.top : Math.min(region.bottom, canvas.height);
+        }
+      });
+      sliceHeight = Math.max(1, sliceEnd - offsetY);
       var pageCanvas = document.createElement('canvas');
       pageCanvas.width = canvas.width;
       pageCanvas.height = sliceHeight;
@@ -362,7 +446,7 @@
           context,
           pageCanvas.width,
           pageCanvas.height,
-          pageCanvasHeight,
+          Math.max(pageCanvasHeight, sliceHeight),
           watermark.text,
         );
       }
@@ -371,13 +455,14 @@
         pdf.addPage();
       }
 
-      var imageHeight = (sliceHeight * usableWidth) / canvas.width;
+      var imageWidth = Math.min(usableWidth, (usableHeight * canvas.width) / sliceHeight);
+      var imageHeight = (sliceHeight * imageWidth) / canvas.width;
       pdf.addImage(
         pageCanvas.toDataURL('image/png'),
         'PNG',
+        margin + (usableWidth - imageWidth) / 2,
         margin,
-        margin,
-        usableWidth,
+        imageWidth,
         imageHeight,
         undefined,
         'FAST'
@@ -586,13 +671,15 @@
           format: 'a4',
           compress: true,
         });
-        return waitForExportReady()
+        return waitForExportReady(exportRoot)
           .then(function() {
             return renderCanvas(exportRoot);
           })
           .then(function(canvas) {
-            var blockBreakpoints = collectBlockBreakpoints(exportRoot, canvas.height / Math.max(exportRoot.scrollHeight, 1));
-            addCanvasToPdf(pdf, canvas, margin, blockBreakpoints, watermark);
+            var canvasScale = canvas.height / Math.max(exportRoot.scrollHeight, 1);
+            var blockBreakpoints = collectBlockBreakpoints(exportRoot, canvasScale);
+            var protectedRegions = collectProtectedRegions(exportRoot, canvasScale);
+            addCanvasToPdf(pdf, canvas, margin, blockBreakpoints, watermark, protectedRegions);
             pdf.save(getExportFileName() + '.pdf');
           })
           .finally(function() {