适配移动端界面

javascript/markmap_editor.js

@@ -1099,7 +1099,48 @@ function initModeToggle() {
     applyMode();
 }
 
+// ── 移动端菜单 ──
+// 点击 ⋮ 按钮展开/收起工具栏下拉浮层
+// 选择操作后自动收起（主题按钮除外，它有自己的子菜单）
+
+function initMobileMenu() {
+    const menuBtn = document.getElementById('mobile-menu-btn');
+    const toolbar = document.querySelector('.toolbar');
+    if (!menuBtn || !toolbar) return;
+
+    function closeMenu() {
+        toolbar.classList.remove('show');
+        menuBtn.classList.remove('menu-active');
+    }
+
+    // 点击 ⋮ 按钮切换工具栏显隐
+    menuBtn.addEventListener('click', () => {
+        const willShow = !toolbar.classList.contains('show');
+        toolbar.classList.toggle('show', willShow);
+        menuBtn.classList.toggle('menu-active', willShow);
+    });
+
+    // 点击工具栏内按钮后自动收起（主题按钮除外，它有自己的子菜单）
+    toolbar.querySelectorAll('button').forEach(btn => {
+        if (btn.id === 'theme-btn') return;
+        btn.addEventListener('click', closeMenu);
+    });
+
+    // 点击外部关闭菜单
+    document.addEventListener('click', (e) => {
+        if (!e.target.closest('#mobile-menu-btn') && !e.target.closest('.toolbar')) {
+            closeMenu();
+        }
+    });
+}
+
 // ── 可拖动分割线 ──
+// 桌面端：左右拖动调整编辑区宽度
+// 移动端：上下拖动调整编辑区高度，支持触屏
+
+function isMobileLayout() {
+    return window.matchMedia('(max-width: 768px)').matches;
+}
 
 function initSplitter() {
     const splitter = document.getElementById('splitter');
@@ -1109,35 +1150,68 @@ function initSplitter() {
 
     let isDragging = false;
 
-    splitter.addEventListener('mousedown', (e) => {
+    function onStart(e) {
         isDragging = true;
         splitter.classList.add('dragging');
-        document.body.style.cursor = 'col-resize';
+        document.body.style.cursor = isMobileLayout() ? 'row-resize' : 'col-resize';
         document.body.style.userSelect = 'none';
         e.preventDefault();
-    });
+    }
 
-    document.addEventListener('mousemove', (e) => {
+    function onMove(e) {
         if (!isDragging) return;
 
         const rect = main.getBoundingClientRect();
-        const x = e.clientX - rect.left;
-        const percentage = (x / rect.width) * 100;
 
-        // 限制在 10% ~ 90% 之间
-        const clamped = Math.max(10, Math.min(90, percentage));
-        editorContainer.style.width = `${clamped}%`;
-    });
+        if (isMobileLayout()) {
+            // 移动端：纵向拖动，调整编辑区高度
+            const clientY = e.touches ? e.touches[0].clientY : e.clientY;
+            const y = clientY - rect.top;
+            const percentage = (y / rect.height) * 100;
+            const clamped = Math.max(15, Math.min(85, percentage));
+            editorContainer.style.height = `${clamped}%`;
+            editorContainer.style.width = '100%';
+        } else {
+            // 桌面端：横向拖动，调整编辑区宽度
+            const clientX = e.touches ? e.touches[0].clientX : e.clientX;
+            const x = clientX - rect.left;
+            const percentage = (x / rect.width) * 100;
+            const clamped = Math.max(10, Math.min(90, percentage));
+            editorContainer.style.width = `${clamped}%`;
+            editorContainer.style.height = '';
+        }
+    }
 
-    document.addEventListener('mouseup', () => {
+    function onEnd() {
         if (isDragging) {
             isDragging = false;
             splitter.classList.remove('dragging');
             document.body.style.cursor = '';
             document.body.style.userSelect = '';
-            // 重新适配思维导图到新容器尺寸
             if (mm) mm.fit();
         }
+    }
+
+    // 鼠标事件
+    splitter.addEventListener('mousedown', onStart);
+    document.addEventListener('mousemove', onMove);
+    document.addEventListener('mouseup', onEnd);
+
+    // 触屏事件
+    splitter.addEventListener('touchstart', onStart, { passive: false });
+    document.addEventListener('touchmove', onMove, { passive: false });
+    document.addEventListener('touchend', onEnd);
+
+    // 窗口尺寸变化时重置布局模式
+    window.addEventListener('resize', () => {
+        if (!isMobileLayout()) {
+            // 切回桌面端时清除移动端设置的 height
+            editorContainer.style.height = '';
+        } else {
+            // 切到移动端时清除桌面端设置的 width
+            editorContainer.style.width = '100%';
+        }
+        if (mm) mm.fit();
     });
 }
 
@@ -1266,6 +1340,7 @@ async function init() {
     // 初始化主题选择器、模式切换和分割线
     initThemeSelector();
     initModeToggle();
+    initMobileMenu();
     initSplitter();
 
     // 插入图片按钮