优化了移动端的多个UI

src/app/globals.css

@@ -179,10 +179,10 @@
     padding-bottom: 120px;
   }
 
-  /* 移动端侧边栏文档树：增大字号和触摸目标 */
+  /* 移动端侧边栏文档树：适中字号与触摸目标 */
   .sidebar-tree-item {
     font-size: 0.9375rem !important;
-    min-height: 2.5rem !important;
+    min-height: 2.3rem !important;
     line-height: 1.2;
   }
 
@@ -292,7 +292,7 @@
 /* Table Styles - Ensure content is compact */
 .ProseMirror table p {
   margin: 0;
-  line-height: var(--table-line-height, 1.2);
+  line-height: var(--table-line-height, 1.5);
 }
 
 /* 利用 TipTap 表格扩展的 .tableWrapper 包裹层实现横向滚动 */
@@ -315,7 +315,7 @@
   border-color: hsl(var(--border));
   box-sizing: border-box;
   min-width: 1em;
-  padding: 2px 4px;
+  padding: 6px 8px;
   position: relative;
   vertical-align: top;
 }
@@ -393,13 +393,3 @@ ul[data-type="taskList"],
   white-space: nowrap;
   line-height: 1.2;
 }
-
-@media (min-width: 768px) {
-  .sidebar-title {
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
-    white-space: normal;
-    max-height: calc(1.25em * 2);
-  }
-}

src/app/page.tsx

@@ -6,8 +6,7 @@ import { useEditorStore } from "@/lib/store";
 import { Hash, X, Plus, ChevronLeft, ChevronRight, ChevronDown, Sparkles, Lock, Unlock, FolderOpen, History, RotateCcw } from "lucide-react";
 import { useSettingsStore } from "@/lib/settings-store";
 import { exportPageAsMarkdown } from "@/lib/export";
-import { useMemo, useState } from "react";
-import { useEffect } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { cn, getTagColor } from "@/lib/utils";
 import { useSearchStore } from "@/lib/search-store";
 import { type Editor as TiptapEditor } from "@tiptap/react";
@@ -39,6 +38,9 @@ export default function Home() {
   const [isIconPickerOpen, setIsIconPickerOpen] = useState(false);
   const [isHistoryOpen, setIsHistoryOpen] = useState(false);
   const [selectedHistoryIndex, setSelectedHistoryIndex] = useState(0);
+  const [isMobileSidebarOpen, setIsMobileSidebarOpen] = useState(() => !activePageId);
+  const edgeSwipeStartRef = useRef<{ x: number; y: number } | null>(null);
+  const drawerSwipeStartRef = useRef<{ x: number; y: number } | null>(null);
 
   const breadcrumbs = useMemo(() => {
     if (!activePage) return [];
@@ -123,25 +125,85 @@ export default function Home() {
     };
   }, [flushPendingSyncs]);
 
+  const handleEdgeSwipeStart = (e: React.TouchEvent<HTMLDivElement>) => {
+    if (isMobileSidebarOpen) return;
+    const touch = e.touches[0];
+    if (!touch || touch.clientX > 24) return;
+    edgeSwipeStartRef.current = { x: touch.clientX, y: touch.clientY };
+  };
+
+  const handleEdgeSwipeEnd = (e: React.TouchEvent<HTMLDivElement>) => {
+    const start = edgeSwipeStartRef.current;
+    edgeSwipeStartRef.current = null;
+    if (!start || isMobileSidebarOpen) return;
+    const touch = e.changedTouches[0];
+    if (!touch) return;
+
+    const deltaX = touch.clientX - start.x;
+    const deltaY = Math.abs(touch.clientY - start.y);
+    if (deltaX > 56 && deltaY < 42) {
+      setIsMobileSidebarOpen(true);
+    }
+  };
+
+  const handleDrawerSwipeStart = (e: React.TouchEvent<HTMLDivElement>) => {
+    const touch = e.touches[0];
+    if (!touch) return;
+    drawerSwipeStartRef.current = { x: touch.clientX, y: touch.clientY };
+  };
+
+  const handleDrawerSwipeEnd = (e: React.TouchEvent<HTMLDivElement>) => {
+    const start = drawerSwipeStartRef.current;
+    drawerSwipeStartRef.current = null;
+    if (!start) return;
+    const touch = e.changedTouches[0];
+    if (!touch) return;
+
+    const deltaX = touch.clientX - start.x;
+    const deltaY = Math.abs(touch.clientY - start.y);
+    if (deltaX < -56 && deltaY < 42) {
+      setIsMobileSidebarOpen(false);
+    }
+  };
+
   return (
     <ImportProvider>
-      <div className="relative flex h-[100dvh] w-full overflow-hidden bg-background">
+      <div
+        className="relative flex h-[100dvh] w-full overflow-hidden bg-background"
+        onTouchStart={handleEdgeSwipeStart}
+        onTouchEnd={handleEdgeSwipeEnd}
+      >
         <SearchCommand />
 
-        <div className={cn(activePageId ? "hidden" : "block h-full flex-1 md:hidden")}>
-          <SidebarContent />
+        <div
+          className={cn(
+            "fixed inset-0 z-40 md:hidden transition-opacity duration-200",
+            isMobileSidebarOpen ? "pointer-events-auto opacity-100" : "pointer-events-none opacity-0"
+          )}
+          aria-hidden={!isMobileSidebarOpen}
+        >
+          <div
+            className={cn(
+              "absolute inset-0 w-full border-r border-border bg-secondary/95 backdrop-blur-sm transition-transform duration-200 ease-out",
+              isMobileSidebarOpen ? "translate-x-0" : "-translate-x-full"
+            )}
+            onTouchStart={handleDrawerSwipeStart}
+            onTouchEnd={handleDrawerSwipeEnd}
+          >
+            <SidebarContent onCloseMobile={() => setIsMobileSidebarOpen(false)} />
+          </div>
         </div>
 
         <ResizableSidebar />
 
-        <main className={cn("relative z-0 flex h-full flex-1 flex-col overflow-hidden", !activePageId && "hidden md:flex")}>
+        <main className={cn("relative z-0 flex h-full flex-1 flex-col overflow-hidden", isMobileSidebarOpen && "hidden md:flex")}>
           {activePage ? (
             <div className="flex-1 overflow-y-auto scroll-smooth">
               <div className="mx-auto min-h-screen max-w-7xl px-3 py-4 md:px-16 md:py-6">
                 <div className="ui-enter group relative mb-6 pt-10 md:mb-8 md:pt-0">
                   <button
                     className="absolute left-0 top-0 flex h-9 items-center gap-1 py-2 text-sm text-muted-foreground transition-colors hover:text-foreground md:hidden"
-                    onClick={() => useEditorStore.getState().setActivePageId(null)}
+                    onClick={() => setIsMobileSidebarOpen(true)}
                   >
                     <ChevronLeft size={18} />
                     返回列表