适配移动端界面

content.md

@@ -1,59 +1,59 @@
 ---
-title: Markmap Features
+title: Markmap 功能示例
 markmap:
   colorFreezeLevel: 2
   direction: balanced
   theme: soft
 ---
 
-## Themes <!-- markmap: icon: star -->
+## 主题 <!-- markmap: icon: star -->
 
-- classic <!-- markmap: icon: done -->
-- soft <!-- markmap: icon: done -->
-- dark <!-- markmap: icon: done -->
-- forest <!-- markmap: icon: done -->
-- monochrome <!-- markmap: icon: done -->
-- minimal <!-- markmap: icon: done -->
+- 经典 <!-- markmap: icon: done -->
+- 柔和 <!-- markmap: icon: done -->
+- 深色 <!-- markmap: icon: done -->
+- 森林 <!-- markmap: icon: done -->
+- 单色 <!-- markmap: icon: done -->
+- 极简 <!-- markmap: icon: done -->
 
-## Directions <!-- markmap: icon: info -->
+## 方向 <!-- markmap: icon: info -->
 
-- right
-- left
-- down
-- balanced
+- 向右
+- 向左
+- 向下
+- 平衡布局
 
-## Link Styles <!-- markmap: icon: info -->
+## 连线样式 <!-- markmap: icon: info -->
 
-- `classic` - stroke lines
-- `0.3` - slight taper
-- `0.5` - moderate taper
-- `0.85` - brush style <!-- markmap: icon: star -->
-- `1` - full taper
+- `classic` - 直线描边
+- `0.3` - 轻微锥形
+- `0.5` - 中等锥形
+- `0.85` - 画笔风格 <!-- markmap: icon: star -->
+- `1` - 完全锥形
 
-## Node Styling <!-- markmap: boundary: Visual System | #e8f5e9 -->
+## 节点样式 <!-- markmap: boundary: 视觉系统 | #e8f5e9 -->
 
-### Backgrounds <!-- markmap: icon: done -->
+### 背景 <!-- markmap: icon: done -->
 
-- Capsule root node
-- Rounded rect L1/L2
-- Underline L3+
-- Auto border colors
+- 根节点胶囊形
+- 一级/二级圆角矩形
+- 三级及以下下划线
+- 自动边框配色
 
-### Typography <!-- markmap: icon: done -->
+### 字体 <!-- markmap: icon: done -->
 
-- Font size by depth
-- Font weight by depth
-- Auto text color (dark/light)
+- 按层级缩放字号
+- 按层级调整字重
+- 自动文本配色（深/浅色）
 
-### Effects <!-- markmap: icon: wip -->
+### 特效 <!-- markmap: icon: wip -->
 
-- Drop shadow (L1)
-- Hover dimming
-- Canvas background color
+- 阴影效果（一级节点）
+- 悬停变暗
+- 画布背景色
 
-## Directives <!-- markmap: boundary: | #fff3e0 -->
+## 指令 <!-- markmap: boundary: | #fff3e0 -->
 
-### Icons <!-- markmap: icon: star -->
+### 图标 <!-- markmap: icon: star -->
 
 - `done` <!-- markmap: icon: done -->
 - `wip` <!-- markmap: icon: wip -->
@@ -64,21 +64,21 @@ markmap:
 - `flag` <!-- markmap: icon: flag -->
 - `question` <!-- markmap: icon: question -->
 
-### Relations <!-- markmap: icon: info, rel: Boundaries | related -->
+### 关系连线 <!-- markmap: icon: info, rel: Boundaries | related -->
 
-- `rel: target | label`
-- Auto arc direction
-- Collision avoidance
+- `rel: 目标 | 标签`
+- 自动弧线方向
+- 避免碰撞
 
-### Boundaries <!-- markmap: icon: info -->
+### 边界分组 <!-- markmap: icon: info -->
 
-- `boundary: name` - with title
-- `boundary: name | #color` - custom color
-- `boundary: | #color` - color only, no title
-- `boundary` - default style
+- `boundary: 名称` - 带标题
+- `boundary: 名称 | #颜色` - 自定义颜色
+- `boundary: | #颜色` - 仅颜色，无标题
+- `boundary` - 默认样式
 
-### Folding <!-- markmap: icon: done -->
+### 折叠 <!-- markmap: icon: done -->
 
-- `fold` - fold node <!-- markmap: fold -->
-- `foldAll` - fold recursively
-- Balanced: left/right independent
+- `fold` - 折叠节点 <!-- markmap: fold -->
+- `foldAll` - 递归折叠
+- 平衡模式：左右独立折叠

css/styles.css

@@ -58,6 +58,7 @@ header {
   flex-shrink: 0;
   box-shadow: 0 1px 8px rgba(0, 0, 0, 0.06);
   z-index: 100;
+  position: relative;
   -webkit-backdrop-filter: blur(20px) saturate(180%);
   backdrop-filter: blur(20px) saturate(180%);
   border-bottom: 1px solid var(--header-border);
@@ -96,6 +97,17 @@ header .toolbar {
   gap: 10px;
 }
 
+.header-right {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+/* 移动端菜单按钮：仅移动端显示 */
+#mobile-menu-btn {
+  display: none;
+}
+
 .icon-btn {
   background-color: var(--btn-bg);
   color: var(--text-secondary);
@@ -123,7 +135,8 @@ header .toolbar {
   fill: currentColor;
 }
 
-header .toolbar button {
+header .toolbar button,
+#mode-toggle {
   background-color: var(--btn-bg);
   color: var(--text-secondary);
   border: 1px solid var(--header-border);
@@ -138,7 +151,8 @@ header .toolbar button {
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
 }
 
-header .toolbar button:hover {
+header .toolbar button:hover,
+#mode-toggle:hover {
   background-color: var(--accent-soft);
   border-color: var(--accent-color);
   color: var(--accent-color);
@@ -146,7 +160,8 @@ header .toolbar button:hover {
   box-shadow: 0 2px 8px rgba(74, 158, 255, 0.15);
 }
 
-header .toolbar button:active {
+header .toolbar button:active,
+#mode-toggle:active {
   background-color: var(--accent-medium);
   transform: translateY(0);
 }
@@ -367,6 +382,7 @@ main {
   position: relative;
   z-index: 10;
   transition: background 0.2s;
+  touch-action: none;
 }
 
 #splitter::after {
@@ -714,3 +730,181 @@ body.fullscreen .markmap-toolbar {
   bottom: 24px;
   right: 24px;
 }
+
+/* ── 移动端响应式布局 ── */
+/* 窄屏设备：编辑区在上，渲染区在下，纵向排列 */
+
+@media (max-width: 768px) {
+  /* Header：紧凑高度 */
+  header {
+    height: 48px;
+    padding: 0 10px;
+  }
+
+  header h1 {
+    font-size: 15px;
+  }
+
+  .header-left {
+    gap: 6px;
+  }
+
+  /* 日间/夜间按钮：常驻显示，缩小尺寸 */
+  #mode-toggle {
+    padding: 5px 10px;
+    font-size: 12px;
+  }
+
+  /* 工具栏：改为下拉浮层（用 header 前缀提升特异性，覆盖桌面端 header .toolbar） */
+  header .toolbar {
+    display: none;
+    position: absolute;
+    top: 48px;
+    right: 8px;
+    flex-direction: column;
+    background: var(--header-bg);
+    border: 1px solid var(--header-border);
+    border-radius: 10px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
+    -webkit-backdrop-filter: blur(20px) saturate(180%);
+    backdrop-filter: blur(20px) saturate(180%);
+    padding: 6px;
+    gap: 2px;
+    z-index: 200;
+    min-width: 140px;
+  }
+
+  header .toolbar.show {
+    display: flex;
+  }
+
+  header .toolbar button {
+    width: 100%;
+    text-align: left;
+    padding: 10px 14px;
+    font-size: 13px;
+    border: none;
+    background: transparent;
+    border-radius: 8px;
+    justify-content: flex-start;
+  }
+
+  header .toolbar button:hover {
+    transform: none;
+    box-shadow: none;
+  }
+
+  /* 主题选择器：下拉内联展开 */
+  .theme-selector .theme-dropdown {
+    position: static;
+    box-shadow: none;
+    border: none;
+    background: transparent;
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+    padding: 0 0 0 12px;
+    min-width: 0;
+  }
+
+  .theme-selector .theme-dropdown.show {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .theme-dropdown button {
+    padding: 8px 12px;
+    font-size: 12px;
+  }
+
+  /* 显示移动端菜单按钮 */
+  #mobile-menu-btn {
+    display: flex;
+    padding: 6px;
+  }
+
+  /* 菜单打开时按钮激活态 */
+  #mobile-menu-btn.menu-active {
+    background-color: var(--accent-soft);
+    border-color: var(--accent-color);
+    color: var(--accent-color);
+  }
+
+  .icon-btn {
+    padding: 6px;
+  }
+
+  /* 移动端禁用 :hover 粘连，改用 JS 控制 active 状态 */
+  .icon-btn:hover,
+  header .toolbar button:hover,
+  #mode-toggle:hover {
+    background-color: var(--btn-bg);
+    border-color: var(--header-border);
+    color: var(--text-secondary);
+    transform: none;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
+  }
+
+  /* main 改为纵向排列 */
+  main {
+    flex-direction: column;
+  }
+
+  /* 编辑区：上方，固定比例高度 */
+  #editor-container {
+    width: 100% !important;
+    height: 40%;
+    flex-shrink: 0;
+  }
+
+  /* iOS 防止聚焦缩放：font-size 需 >= 16px */
+  #editor {
+    font-size: 16px;
+    padding: 12px 14px;
+  }
+
+  /* 分割线：改为水平方向 */
+  #splitter {
+    width: 100%;
+    height: 5px;
+    cursor: row-resize;
+  }
+
+  #splitter::after {
+    width: 32px;
+    height: 3px;
+  }
+
+  /* 渲染区：下方，自动填充剩余空间 */
+  #markmap-container {
+    flex: 1;
+    min-height: 0;
+  }
+
+  /* 侧边栏：改为浮层覆盖 */
+  #sidebar {
+    position: fixed;
+    top: 48px;
+    left: 0;
+    bottom: 0;
+    width: 240px;
+    z-index: 500;
+    box-shadow: 4px 0 16px rgba(0, 0, 0, 0.15);
+  }
+
+  #sidebar.collapsed {
+    width: 0;
+    border-right: none;
+    box-shadow: none;
+  }
+
+  /* 底部浮动工具栏调整 */
+  .markmap-toolbar {
+    bottom: 12px;
+    right: 12px;
+  }
+
+  /* footer 隐藏，节省空间 */
+  footer {
+    display: none;
+  }
+}

index.html

@@ -16,6 +16,8 @@
                 </button>
                 <h1>Markmap 编辑器</h1>
             </div>
+            <div class="header-right">
+                <button id="mode-toggle" title="切换日间/夜间模式">日间</button>
                 <div class="toolbar">
                     <button id="new-map" title="新建思维导图 (清空当前内容)">新建</button>
                     <button id="load-map" title="从文件加载 Markdown">加载</button>
@@ -34,7 +36,10 @@
                             <button data-theme="colorful">彩色</button>
                         </div>
                     </div>
-                <button id="mode-toggle" title="切换日间/夜间模式">日间</button>
+                </div>
+                <button id="mobile-menu-btn" class="icon-btn" title="更多操作">
+                    <svg viewBox="0 0 24 24" width="20" height="20"><path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" fill="currentColor"/></svg>
+                </button>
             </div>
         </header>
         <main>
@@ -54,7 +59,7 @@
             </div>
         </main>
         <footer>
-            <span>Markmap - Markdown 转思维导图 | 按 Ctrl+S 保存 | 双击节点折叠/展开</span>
+            <span><a href="https://gitea.dreamlife.top/DreamLife" target="_blank" style="color: rgba(0, 0, 0, 0.4); text-decoration: none;">&copy; 2026 DreamLife 版权所有</a> | Markmap - Markdown 转思维导图 </span>
         </footer>
     </div>
 

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% 之间
+        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();
 
     // 插入图片按钮