fix: 移动端侧边栏响应式布局

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/App.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from 'react'
+import { useEffect, useState } from 'react'
 import { Sidebar } from './components/sidebar/Sidebar'
 import { Editor } from './components/editor/Editor'
 import { AiPanel } from './components/ai/AiPanel'
@@ -7,6 +7,7 @@ import { seedIfEmpty, deduplicateDB } from './db'
 
 export default function App() {
   const { loadAll, theme, focusMode, aiPanelOpen, toggleFocusMode, toggleAiPanel, createNote, activeFolderId } = useAppStore()
+  const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false)
 
   useEffect(() => {
     document.documentElement.setAttribute('data-theme', theme)
@@ -31,10 +32,34 @@ export default function App() {
 
   return (
     <div className="flex h-screen w-full overflow-hidden" style={{ background: 'var(--bg)' }}>
-      <div className={`sidebar-panel${focusMode ? ' hidden' : ''}`} style={{ width: 260 }}>
+      <>
-        <Sidebar />
+        {mobileSidebarOpen && (
+          <div
+            className="fixed inset-0 z-30"
+            style={{ background: 'rgba(0,0,0,0.4)' }}
+            onClick={() => setMobileSidebarOpen(false)}
+          />
+        )}
+        <div
+          className={`sidebar-panel${focusMode ? ' hidden' : ''}`}
+          style={{ width: 260 }}
+          data-mobile-open={mobileSidebarOpen}
+        >
+          <Sidebar />
+        </div>
+        {!focusMode && (
+          <button
+            className="mobile-menu-btn"
+            onClick={() => setMobileSidebarOpen(v => !v)}
+            aria-label="打开菜单"
+          >
+            ☰
+          </button>
+        )}
+      </>
+      <div className="flex-1 min-w-0 h-full flex flex-col editor-main">
+        <Editor />
       </div>
-      <Editor />
       {aiPanelOpen && <AiPanel />}
     </div>
   )

src/index.css

@@ -286,6 +286,51 @@
   animation: ai-blink 0.8s ease infinite;
 }
 
+/* 移动端响应式 */
+.mobile-menu-btn {
+  display: none;
+}
+
+@media (max-width: 640px) {
+  .mobile-menu-btn {
+    display: flex;
+    position: fixed;
+    top: 12px;
+    left: 12px;
+    z-index: 40;
+    width: 36px;
+    height: 36px;
+    align-items: center;
+    justify-content: center;
+    border-radius: 8px;
+    font-size: 18px;
+    background: var(--bg-subtle);
+    border: 1px solid var(--border);
+    color: var(--text);
+    cursor: pointer;
+  }
+
+  .sidebar-panel {
+    position: fixed !important;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    z-index: 35;
+    transform: translateX(-100%);
+    transition: transform 0.22s ease;
+    box-shadow: 4px 0 24px rgba(0,0,0,0.3);
+  }
+
+  .sidebar-panel[data-mobile-open="true"] {
+    transform: translateX(0);
+  }
+
+  .editor-main {
+    margin-left: 0 !important;
+    padding-left: 48px;
+  }
+}
+
 /* ── Print / PDF export ── */
 @media print {
   aside, [data-ai-panel], .floating-toolbar, .editor-toolbar,