diff --git a/packages/core/src/components/XMarkdownCore/components/Mermaid/style.scss b/packages/core/src/components/XMarkdownCore/components/Mermaid/style.scss index 8b939216..bdfd57fe 100644 --- a/packages/core/src/components/XMarkdownCore/components/Mermaid/style.scss +++ b/packages/core/src/components/XMarkdownCore/components/Mermaid/style.scss @@ -10,6 +10,12 @@ display: flex; flex-direction: column; + // 移动端优化 + @media (max-width: 768px) { + overflow: auto; // 允许在移动端滚动 + -webkit-overflow-scrolling: touch; // iOS平滑滚动 + } + // 工具栏容器样式 .toolbar-container { position: relative; @@ -87,6 +93,13 @@ justify-content: flex-start; overflow: hidden; // 防止未缩放的大图表溢出 + // 移动端优化 + @media (max-width: 768px) { + overflow: auto; // 移动端允许滚动 + -webkit-overflow-scrolling: touch; // iOS平滑滚动 + touch-action: pan-x pan-y; // 允许平移手势 + } + &:active { cursor: grabbing; } @@ -96,6 +109,11 @@ position: relative; max-width: 100%; max-height: 100%; + + // 移动端优化 + @media (max-width: 768px) { + touch-action: manipulation; // 优化触摸交互 + } } // 渲染状态时的加载效果 diff --git a/packages/core/src/components/XMarkdownCore/hooks/useMermaidZoom.ts b/packages/core/src/components/XMarkdownCore/hooks/useMermaidZoom.ts index 606ed7f9..2b110503 100644 --- a/packages/core/src/components/XMarkdownCore/hooks/useMermaidZoom.ts +++ b/packages/core/src/components/XMarkdownCore/hooks/useMermaidZoom.ts @@ -34,10 +34,18 @@ export function useMermaidZoom( isDragging.value = false; }; + // 检查是否为移动设备 + const isMobileDevice = () => { + return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test( + navigator.userAgent + ); + }; + // 添加拖拽事件 const addDragEvents = (content: HTMLElement) => { let startX = 0; let startY = 0; + const isMobile = isMobileDevice(); const onStart = (clientX: number, clientY: number) => { isDragging.value = true; @@ -61,8 +69,7 @@ export function useMermaidZoom( // 鼠标事件 const onMouseDown = (e: MouseEvent) => { - if (e.button !== 0) - return; // ⭐️ 只响应鼠标左键 + if (e.button !== 0) return; // ⭐️ 只响应鼠标左键 e.preventDefault(); onStart(e.clientX, e.clientY); }; @@ -74,8 +81,13 @@ export function useMermaidZoom( onStart(e.touches[0].clientX, e.touches[0].clientY); } }; + const onTouchMove = (e: TouchEvent) => { if (e.touches.length === 1) { + // 在移动设备上,单指触摸时允许滚动 + if (isMobile && !isDragging.value) { + return; // 不阻止默认行为,允许滚动 + } e.preventDefault(); onMove(e.touches[0].clientX, e.touches[0].clientY); } @@ -126,20 +138,17 @@ export function useMermaidZoom( }; const fullscreen = () => { - if (!container.value) - return; + if (!container.value) return; if (document.fullscreenElement) { document.exitFullscreen(); - } - else { + } else { container.value.requestFullscreen?.(); } }; const initialize = () => { - if (!container.value) - return; + if (!container.value) return; resetState();