diff --git a/css/style.css b/css/style.css index 9a4ea5e..7b6911b 100644 --- a/css/style.css +++ b/css/style.css @@ -291,6 +291,17 @@ iconify-icon { transform-origin: center top; } +.svg-content-wrapper--mermaid { + flex: 1; + margin: 1rem; + text-align: center; + width: 100%; + height: 100%; + object-fit: contain; + max-width: 100% !important; +} + + /* 小手摇摆动画 */ @keyframes wave { 0%, 100% {transform: translateX(0px) rotate(90deg);} @@ -436,3 +447,12 @@ iconify-icon { #send-button.terminate-mode { border-color: #dc2626; } + + + +.flowchart { + width: 100%; + height: 100%; + object-fit: contain; + max-width: 100% !important; +} diff --git a/js/core/app-shell.js b/js/core/app-shell.js index 8607584..8367d53 100644 --- a/js/core/app-shell.js +++ b/js/core/app-shell.js @@ -1191,7 +1191,8 @@ ); this.destroyMermaidPanZoom(); this.renderSvgMarkup(svgContent, this.activeModuleId, { - applyTransform: false + applyTransform: false, + wrapperClasses: ['svg-content-wrapper--mermaid'] }); const svgElement = this.el.viewer.querySelector('svg'); if (svgElement) { @@ -1356,10 +1357,21 @@ renderSvgMarkup(svgMarkup, moduleId = this.activeModuleId, options = {}) { if (!this.el.viewer || !svgMarkup) return; - const { opacity = 1, applyTransform = true } = options; + const { + opacity = 1, + applyTransform = true, + wrapperClasses = [] + } = options; this.el.viewer.innerHTML = ''; const wrapper = document.createElement('div'); wrapper.className = 'svg-content-wrapper'; + if (Array.isArray(wrapperClasses)) { + wrapperClasses.filter(Boolean).forEach((className) => + wrapper.classList.add(className) + ); + } else if (typeof wrapperClasses === 'string' && wrapperClasses.trim()) { + wrapper.classList.add(wrapperClasses.trim()); + } wrapper.innerHTML = svgMarkup; wrapper.style.opacity = opacity; this.el.viewer.appendChild(wrapper);