From dff9f90bf299f4d842ea2f7b40bb098f79178961 Mon Sep 17 00:00:00 2001
From: MikiVL <mikivl@MikiVLdeMacBook-Air.local>
Date: Tue, 5 May 2026 03:08:41 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E7=A7=BB=E5=8A=A8=E7=AB=AF=E4=BE=A7?=
 =?UTF-8?q?=E8=BE=B9=E6=A0=8F=E5=93=8D=E5=BA=94=E5=BC=8F=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/App.tsx   | 33 +++++++++++++++++++++++++++++----
 src/index.css | 45 +++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 74 insertions(+), 4 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index f0e98a6..7044905 100644
--- a/src/App.tsx
+++ b/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>
   )
diff --git a/src/index.css b/src/index.css
index 36ead80..890e427 100644
--- a/src/index.css
+++ b/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,