```

feat(app): 实现移动端侧边栏及增强页面导航功能

新增移动端适配的抽屉式侧边栏，支持键盘事件关闭与页面滚动锁定。
引入活动标签页标题显示、增强搜索高亮与键盘导航功能。
优化页面大纲组件，支持自动检测当前可视区域标题并高亮。
添加 OG 图片与 Canonical 链接，提升 SEO 与社交分享体验。
注册新页面组件：端到端走读、Innies 改造总览，并更新导航结构。
```

Author: tt-a1i

index.html

@@ -17,16 +17,23 @@
     <meta property="og:url" content="https://tt-a1i.github.io/coding-cli-guide/" />
     <meta property="og:site_name" content="Innies CLI Guide" />
     <meta property="og:locale" content="zh_CN" />
+    <meta property="og:image" content="https://tt-a1i.github.io/coding-cli-guide/og.png" />
+    <meta property="og:image:width" content="1200" />
+    <meta property="og:image:height" content="630" />
 
     <!-- Twitter Card -->
     <meta name="twitter:card" content="summary_large_image" />
     <meta name="twitter:title" content="Innies CLI 架构学习指南" />
     <meta name="twitter:description" content="深入理解 Innies CLI 的内部架构与 AI 工具交互模式" />
+    <meta name="twitter:image" content="https://tt-a1i.github.io/coding-cli-guide/og.png" />
 
     <!-- Favicon -->
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <link rel="apple-touch-icon" href="/favicon.svg" />
 
+    <!-- Canonical -->
+    <link rel="canonical" href="https://tt-a1i.github.io/coding-cli-guide/" />
+
     <!-- Theme Color -->
     <meta name="theme-color" content="#0f172a" />
 

public/og.png

@@ -9,6 +9,8 @@ import { StartHere } from './pages/StartHere';
 import { Overview } from './pages/Overview';
 
 // 懒加载的页面
+const EndToEndWalkthrough = lazy(() => import('./pages/EndToEndWalkthrough').then(m => ({ default: m.EndToEndWalkthrough })));
+const UpstreamDiffOverview = lazy(() => import('./pages/UpstreamDiffOverview').then(m => ({ default: m.UpstreamDiffOverview })));
 const StartupFlow = lazy(() => import('./pages/StartupFlow').then(m => ({ default: m.StartupFlow })));
 const StartupChain = lazy(() => import('./pages/StartupChain').then(m => ({ default: m.StartupChain })));
 const ConfigSystem = lazy(() => import('./pages/ConfigSystem').then(m => ({ default: m.ConfigSystem })));
@@ -64,6 +66,7 @@ function PageLoading() {
 }
 
 function App() {
+  const [isMobileSidebarOpen, setIsMobileSidebarOpen] = useState(false);
   const validTabIds = useMemo(() => new Set(flatNavItems.map((i) => i.id)), []);
 
   const getTabFromUrl = useCallback(() => {
@@ -92,6 +95,29 @@ function App() {
     [validTabIds]
   );
 
+  const activeTabLabel = useMemo(() => {
+    const item = flatNavItems.find((i) => i.id === activeTab);
+    return item?.label ?? 'Innies CLI';
+  }, [activeTab]);
+
+  useEffect(() => {
+    if (!isMobileSidebarOpen) return;
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') setIsMobileSidebarOpen(false);
+    };
+    window.addEventListener('keydown', onKeyDown);
+    return () => window.removeEventListener('keydown', onKeyDown);
+  }, [isMobileSidebarOpen]);
+
+  useEffect(() => {
+    if (!isMobileSidebarOpen) return;
+    const prevOverflow = document.body.style.overflow;
+    document.body.style.overflow = 'hidden';
+    return () => {
+      document.body.style.overflow = prevOverflow;
+    };
+  }, [isMobileSidebarOpen]);
+
   useEffect(() => {
     const onPopState = () => {
       setActiveTab(getTabFromUrl());
@@ -112,6 +138,10 @@ function App() {
     switch (activeTab) {
       case 'start-here':
         return <StartHere onNavigate={(tab) => navigateToTab(tab)} />;
+      case 'e2e':
+        return <EndToEndWalkthrough />;
+      case 'upstream-diff':
+        return <UpstreamDiffOverview />;
       case 'overview':
         return <Overview />;
       case 'startup':
@@ -203,12 +233,60 @@ function App() {
 
   return (
     <div className="flex min-h-screen bg-gray-950">
-      {/* Sidebar */}
-      <Sidebar activeTab={activeTab} onTabChange={(tab) => navigateToTab(tab)} />
+      {/* Desktop Sidebar */}
+      <div className="hidden md:block">
+        <Sidebar activeTab={activeTab} onTabChange={(tab) => navigateToTab(tab)} />
+      </div>
+
+      {/* Mobile Sidebar Drawer */}
+      {isMobileSidebarOpen && (
+        <div className="md:hidden fixed inset-0 z-50">
+          <button
+            aria-label="Close sidebar overlay"
+            onClick={() => setIsMobileSidebarOpen(false)}
+            className="absolute inset-0 bg-black/60"
+          />
+          <div className="absolute inset-y-0 left-0 w-72 max-w-[85vw] shadow-2xl">
+            <Sidebar
+              activeTab={activeTab}
+              onTabChange={(tab) => {
+                navigateToTab(tab);
+                setIsMobileSidebarOpen(false);
+              }}
+            />
+          </div>
+        </div>
+      )}
 
       {/* Main Content */}
       <main className="flex-1 overflow-y-auto">
-        <div className="max-w-5xl mx-auto p-8">
+        {/* Mobile Top Bar */}
+        <div className="md:hidden sticky top-0 z-20 bg-gray-950/80 backdrop-blur border-b border-gray-800">
+          <div className="px-4 py-3 flex items-center gap-3">
+            <button
+              onClick={() => setIsMobileSidebarOpen(true)}
+              className="px-3 py-2 rounded-lg bg-gray-900/30 border border-gray-800 text-gray-200 hover:bg-gray-800/40"
+              aria-label="Open sidebar"
+            >
+              ☰
+            </button>
+            <div className="flex-1 min-w-0">
+              <div className="text-sm text-gray-200 truncate">{activeTabLabel}</div>
+              <div className="text-xs text-gray-500 truncate">
+                搜索页面：Ctrl/⌘ + K
+              </div>
+            </div>
+            <button
+              onClick={() => navigateToTab('start-here')}
+              className="px-3 py-2 rounded-lg bg-gray-900/30 border border-gray-800 text-gray-200 hover:bg-gray-800/40"
+              aria-label="Go to start"
+            >
+              ⌂
+            </button>
+          </div>
+        </div>
+
+        <div className="max-w-5xl mx-auto p-4 md:p-8">
           <div className="animate-fadeIn">
             <PageLayout activeTab={activeTab} onNavigate={navigateToTab}>
               <Suspense fallback={<PageLoading />}>