docnest 0.1.13 → 0.1.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "docnest",
-  "version": "0.1.13",
+  "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;
@@ -522,6 +535,7 @@ body[data-theme="dark"] .dir-toggle.active {
 /* 主内容区 - 白底、留白 */
 .main-content {
   flex: 1;
+  min-width: 0;
   overflow-y: auto;
   overflow-x: hidden;
   padding: 2rem 2.5rem;
@@ -535,6 +549,7 @@ body[data-theme="dark"] .dir-toggle.active {
   align-items: flex-start;
   gap: 24px;
   width: min(1400px, 100%);
+  min-width: 0;
   margin: 0 auto;
 }
 
@@ -1032,7 +1047,8 @@ body[data-theme="dark"] .dir-toggle.active {
 /* Markdown 内容 - 限宽、舒适行距；普通显示器上更宽，超宽屏用 92% 避免单行过长 */
 .markdown-body {
   flex: 1;
-  width: min(1024px, 100%);
+  min-width: 0;
+  width: min(var(--doc-reading-width, 1024px), 100%);
   max-width: 100%;
   margin: 0;
   box-sizing: border-box;
@@ -1050,7 +1066,7 @@ body[data-theme="dark"] .dir-toggle.active {
   }
 
   .doc-layout {
-    width: min(1024px, 100%);
+    width: min(var(--doc-reading-width, 1024px), 100%);
   }
 }
 
@@ -1254,6 +1270,9 @@ body[data-theme="dark"] .not-found-path {
   text-align: center;
   background: var(--linear-bg-subtle);
   padding: 16px;
+  min-width: 0;
+  max-width: 100%;
+  box-sizing: border-box;
   border-radius: var(--linear-radius);
   border: 1px solid var(--linear-border);
   overflow-x: auto;
@@ -1301,9 +1320,12 @@ body[data-theme="dark"] .markdown-body .mermaid::after {
 
 /* 确保 Mermaid SVG 正确显示 */
 .markdown-body .mermaid svg {
-  max-width: 100%;
-  height: auto;
+  width: 100% !important;
+  max-width: 100% !important;
+  min-width: 0 !important;
+  height: auto !important;
   display: block;
+  margin: 0 auto;
 }
 
 /* Mermaid 下载按钮 */
@@ -2079,7 +2101,7 @@ body[data-theme="dark"] .tree-nav::-webkit-scrollbar-thumb:hover {
   .markdown-body .mermaid svg {
     max-width: 100% !important;
     max-height: 75vh !important; /* 高流程图缩放到单页内 */
-    width: auto !important;
+    width: 100% !important;
     height: auto !important;
     display: block !important;
     margin: 0 auto !important;

package/server/static/css/themes.css

@@ -2,8 +2,9 @@
  * DocNest theme profiles
  *
  * One semantic DOM, five visual systems. The original DocNest rules remain
- * the Slate Modern baseline; this file owns theme tokens and deliberate layout
- * variations without forking templates or client behavior.
+ * the Slate Modern baseline for page geometry (main-content padding,
+ * doc-layout max-width/gap, markdown reading width). This file owns theme
+ * tokens and visual character without forking templates or client behavior.
  */
 
 :root {
@@ -19,6 +20,7 @@
   --doc-code-bg: #f6f7f8;
   --doc-code-text: #24262b;
   --doc-header-height: auto;
+  /* Shared with Slate Modern; theme profiles must not override page geometry. */
   --doc-reading-width: 1024px;
 }
 
@@ -377,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);
@@ -385,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;
@@ -405,7 +409,6 @@ body[data-doc-theme="editorial-atlas"] {
     "Microsoft YaHei", sans-serif;
   --doc-font-reading: "Songti SC", SimSun, "Noto Serif CJK SC", serif;
   --doc-font-display: "Songti SC", SimSun, "Noto Serif CJK SC", serif;
-  --doc-reading-width: 860px;
 }
 
 body[data-doc-theme="editorial-atlas"][data-theme="dark"] {
@@ -452,18 +455,7 @@ body[data-doc-theme="editorial-atlas"] .sidebar {
   border-right-color: var(--doc-rule-strong);
 }
 
-body[data-doc-theme="editorial-atlas"] .main-content {
-  padding: clamp(2rem, 4vw, 4.75rem) clamp(1.5rem, 5vw, 5.5rem);
-  background: var(--linear-bg);
-}
-
-body[data-doc-theme="editorial-atlas"] .doc-layout {
-  width: min(1240px, 100%);
-  gap: 42px;
-}
-
 body[data-doc-theme="editorial-atlas"] .markdown-body {
-  width: min(var(--doc-reading-width), 100%);
   background: transparent;
   font-size: 1rem;
   line-height: 1.9;
@@ -500,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;
@@ -520,7 +513,6 @@ body[data-doc-theme="precision-index"] {
     "Microsoft YaHei", sans-serif;
   --doc-font-reading: var(--doc-font-ui);
   --doc-font-display: var(--doc-font-ui);
-  --doc-reading-width: 980px;
 }
 
 body[data-doc-theme="precision-index"][data-theme="dark"] {
@@ -597,28 +589,17 @@ body[data-doc-theme="precision-index"] .file-link.active {
   background: var(--doc-surface-raised);
 }
 
-body[data-doc-theme="precision-index"] .main-content {
-  padding: 0;
-  background: var(--linear-bg);
-}
-
 body[data-doc-theme="precision-index"] .breadcrumbs {
-  margin: 0;
-  padding: 0.75rem 1.5rem;
   border-bottom: 1px solid var(--doc-rule-strong);
   background: var(--linear-bg-subtle);
   font-size: 0.6875rem;
 }
 
 body[data-doc-theme="precision-index"] .doc-layout {
-  width: 100%;
-  gap: 0;
   background: var(--doc-surface-raised);
 }
 
 body[data-doc-theme="precision-index"] .markdown-body {
-  width: min(var(--doc-reading-width), 100%);
-  padding: clamp(2.5rem, 5vw, 5rem);
   border-right: 1px solid var(--doc-rule-strong);
   font-size: 0.9rem;
   line-height: 1.75;
@@ -651,11 +632,6 @@ body[data-doc-theme="precision-index"] .markdown-body h2 {
 }
 
 body[data-doc-theme="precision-index"] .doc-toc {
-  top: 0;
-  width: 216px;
-  flex-basis: 216px;
-  max-height: calc(100vh - 54px);
-  padding: 1.25rem;
   border: 0;
   border-radius: 0;
   background: var(--linear-bg-subtle);
@@ -666,14 +642,9 @@ body[data-doc-theme="precision-index"] .doc-toc-title {
   text-transform: uppercase;
 }
 
-body[data-doc-theme="precision-index"] .dir-listing-page,
-body[data-doc-theme="precision-index"] .welcome {
-  margin: 0;
-  padding: clamp(2rem, 5vw, 5rem);
-}
-
 /* 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;
@@ -693,7 +664,6 @@ body[data-doc-theme="archive-room"] {
     "Microsoft YaHei", sans-serif;
   --doc-font-reading: "Songti SC", SimSun, "Noto Serif CJK SC", serif;
   --doc-font-display: "Songti SC", SimSun, "Noto Serif CJK SC", serif;
-  --doc-reading-width: 900px;
 }
 
 body[data-doc-theme="archive-room"][data-theme="dark"] {
@@ -761,7 +731,6 @@ body[data-doc-theme="archive-room"][data-theme="dark"] .file-link.active {
 }
 
 body[data-doc-theme="archive-room"] .main-content {
-  padding: clamp(2rem, 4vw, 4.5rem);
   background-color: var(--linear-bg);
   background-image:
     linear-gradient(rgba(93, 96, 85, 0.045) 1px, transparent 1px),
@@ -769,14 +738,8 @@ body[data-doc-theme="archive-room"] .main-content {
   background-size: 24px 24px;
 }
 
-body[data-doc-theme="archive-room"] .doc-layout {
-  width: min(1280px, 100%);
-  gap: 34px;
-}
-
 body[data-doc-theme="archive-room"] .markdown-body {
-  width: min(var(--doc-reading-width), 100%);
-  padding: clamp(1.5rem, 3vw, 3rem);
+  padding: 1.5rem 1.5rem 3rem;
   border: 1px solid var(--doc-rule-strong);
   background: var(--doc-surface-raised);
   box-shadow: 7px 7px 0 var(--linear-border);
@@ -816,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;
@@ -836,7 +800,6 @@ body[data-doc-theme="swiss-manual"] {
     "Microsoft YaHei", sans-serif;
   --doc-font-reading: var(--doc-font-ui);
   --doc-font-display: var(--doc-font-ui);
-  --doc-reading-width: 960px;
 }
 
 body[data-doc-theme="swiss-manual"][data-theme="dark"] {
@@ -939,27 +902,13 @@ body[data-doc-theme="swiss-manual"] .file-link.active {
   font-weight: 800;
 }
 
-body[data-doc-theme="swiss-manual"] .main-content {
-  padding: 0;
-  background: var(--doc-surface-raised);
-}
-
 body[data-doc-theme="swiss-manual"] .breadcrumbs {
-  margin: 0;
-  padding: 0.85rem 1.5rem;
   border-bottom: 1px solid var(--doc-rule-strong);
   background: var(--linear-bg-subtle);
   font-size: 0.65rem;
 }
 
-body[data-doc-theme="swiss-manual"] .doc-layout {
-  width: 100%;
-  gap: 0;
-}
-
 body[data-doc-theme="swiss-manual"] .markdown-body {
-  width: min(var(--doc-reading-width), 100%);
-  padding: clamp(2.5rem, 6vw, 6rem);
   border-right: 1px solid var(--doc-rule-strong);
   font-size: 0.95rem;
   line-height: 1.72;
@@ -1000,22 +949,11 @@ body[data-doc-theme="swiss-manual"] .markdown-body blockquote {
 }
 
 body[data-doc-theme="swiss-manual"] .doc-toc {
-  top: 0;
-  width: 220px;
-  flex-basis: 220px;
-  max-height: calc(100vh - 72px);
-  padding: 1.25rem;
   border: 0;
   border-radius: 0;
   background: var(--linear-bg-subtle);
 }
 
-body[data-doc-theme="swiss-manual"] .dir-listing-page,
-body[data-doc-theme="swiss-manual"] .welcome {
-  margin: 0;
-  padding: clamp(2rem, 6vw, 6rem);
-}
-
 /* Shared component refinements for the four independent profiles. */
 body:not([data-doc-theme="slate-modern"]) .markdown-body code:not(pre code) {
   border: 1px solid var(--linear-border);
@@ -1206,26 +1144,11 @@ body[data-doc-theme="swiss-manual"].not-found-page .deep-space-404__code {
     overflow-y: auto;
   }
 
-  body[data-doc-theme="editorial-atlas"] .main-content,
-  body[data-doc-theme="archive-room"] .main-content {
-    padding: 1.25rem;
-  }
-
   body[data-doc-theme="archive-room"] .markdown-body {
     padding: 1.25rem;
     box-shadow: 4px 4px 0 var(--linear-border);
   }
 
-  body[data-doc-theme="precision-index"] .main-content,
-  body[data-doc-theme="swiss-manual"] .main-content {
-    padding: 0;
-  }
-
-  body[data-doc-theme="precision-index"] .markdown-body,
-  body[data-doc-theme="swiss-manual"] .markdown-body {
-    padding: 1.25rem;
-  }
-
   body[data-doc-theme="precision-index"] .markdown-body h1,
   body[data-doc-theme="swiss-manual"] .markdown-body h1 {
     font-size: clamp(2rem, 12vw, 3.25rem);

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() {

package/server/static/js/diagram/diagram-viewer.js

@@ -8,6 +8,41 @@ function isDocNestRestrictedMode() {
   return !!(window.DOCNEST_CONFIG && window.DOCNEST_CONFIG.restrictedMode === true);
 }
 
+function parseSvgAbsoluteDimension(value) {
+  if (typeof value !== 'string' || !/^\s*\d*\.?\d+(?:e[+-]?\d+)?(?:px)?\s*$/i.test(value)) {
+    return null;
+  }
+
+  const dimension = Number.parseFloat(value);
+  return Number.isFinite(dimension) && dimension > 0 ? dimension : null;
+}
+
+function getDiagramIntrinsicDimensions(svgElement) {
+  const viewBox = svgElement.getAttribute('viewBox');
+  if (viewBox) {
+    const parts = viewBox.trim().split(/[\s,]+/).map(Number);
+    const viewBoxWidth = parts[2];
+    const viewBoxHeight = parts[3];
+    if (
+      parts.length === 4 &&
+      parts.every(Number.isFinite) &&
+      viewBoxWidth > 0 &&
+      viewBoxHeight > 0
+    ) {
+      // viewBox 是图表的实际坐标范围，优先于 Mermaid 的 width="100%"。
+      return { width: viewBoxWidth, height: viewBoxHeight };
+    }
+  }
+
+  const width = parseSvgAbsoluteDimension(svgElement.getAttribute('width'));
+  const height = parseSvgAbsoluteDimension(svgElement.getAttribute('height'));
+  if (width && height) return { width, height };
+  if (width) return { width, height: width * 0.75 };
+  if (height) return { width: height * (4 / 3), height };
+
+  return { width: 800, height: 600 };
+}
+
 function setupDiagramViewer() {
   if (isDocNestRestrictedMode()) return;
   const diagrams = document.querySelectorAll('.markdown-body .mermaid');
@@ -49,39 +84,16 @@ function openDiagramViewer(svgElement) {
   
   if (!viewer || !container) return;
   
-  // 获取原始 SVG 的尺寸
-  let originalWidth = parseFloat(svgElement.getAttribute('width'));
-  let originalHeight = parseFloat(svgElement.getAttribute('height'));
-  
-  // 如果没有 width/height，尝试从 viewBox 获取
-  if (!originalWidth || !originalHeight || isNaN(originalWidth) || isNaN(originalHeight)) {
-    const viewBox = svgElement.getAttribute('viewBox');
-    if (viewBox) {
-      const parts = viewBox.split(/\s+/);
-      if (parts.length >= 4) {
-        originalWidth = parseFloat(parts[2]) || 800;
-        originalHeight = parseFloat(parts[3]) || 600;
-      }
-    }
-  }
-  
-  // 如果还是没有，使用默认值
-  if (!originalWidth || !originalHeight || isNaN(originalWidth) || isNaN(originalHeight)) {
-    originalWidth = 800;
-    originalHeight = 600;
-  }
+  // viewBox 才是图表的实际尺寸；不能把 Mermaid 的 width="100%" 解析成 100。
+  const { width: originalWidth, height: originalHeight } = getDiagramIntrinsicDimensions(svgElement);
   
   // 设置 SVG 样式，确保充分利用空间
   svgElement.setAttribute('class', 'diagram-viewer-svg');
   // 清除之前的样式，但保留必要的属性
   svgElement.removeAttribute('style');
-  // 确保 SVG 有正确的属性
-  if (!svgElement.getAttribute('width')) {
-    svgElement.setAttribute('width', originalWidth);
-  }
-  if (!svgElement.getAttribute('height')) {
-    svgElement.setAttribute('height', originalHeight);
-  }
+  // 查看器需要固定的像素基准；内嵌图仍然保持响应式，不会被这个克隆影响。
+  svgElement.setAttribute('width', originalWidth);
+  svgElement.setAttribute('height', originalHeight);
   
   // 包装元素本身还包含边界 padding，因此适配比例必须把容器 padding 和图表边界一并算入。
   const padding = 40;
@@ -205,9 +217,8 @@ function resetDiagramZoom() {
   const wrapper = container.querySelector('.diagram-viewer-svg-wrapper');
   if (!wrapper) return;
   
-  // 获取原始尺寸
-  const originalWidth = parseFloat(currentSvg.style.width) || parseFloat(currentSvg.getAttribute('width')) || 800;
-  const originalHeight = parseFloat(currentSvg.style.height) || parseFloat(currentSvg.getAttribute('height')) || 600;
+  // 始终从统一的尺寸解析逻辑获取原始尺寸，避免缩放/重置再次误读百分比宽度。
+  const { width: originalWidth, height: originalHeight } = getDiagramIntrinsicDimensions(currentSvg);
   
   const padding = 40; // 边界 padding 大小（像素）
   currentZoom = defaultZoom;

package/server/static/js/diagram/diagram-zoom.js

@@ -8,9 +8,8 @@ function zoomDiagram(direction) {
   const wrapper = container.querySelector('.diagram-viewer-svg-wrapper');
   if (!wrapper) return;
   
-  // 获取原始尺寸
-  const originalWidth = parseFloat(currentSvg.style.width) || parseFloat(currentSvg.getAttribute('width')) || 800;
-  const originalHeight = parseFloat(currentSvg.style.height) || parseFloat(currentSvg.getAttribute('height')) || 600;
+  // 与查看器使用同一套尺寸解析逻辑，不能把 width="100%" 解析成 100。
+  const { width: originalWidth, height: originalHeight } = getDiagramIntrinsicDimensions(currentSvg);
   
   // 边界 padding 大小（与 diagram-viewer.js 中保持一致）
   const padding = 40;