适配移动端界面

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;
+  }
+}