feat(web): 添加响应式布局和 PWA 支持

- 实现移动端响应式适配：抽屉式侧边栏、触摸优化、Safe Area 支持
- 添加 PWA 支持：vite-plugin-pwa、manifest、Service Worker 缓存
- 优化移动端输入体验：防缩放、最小触摸目标、键盘适配

packages/web/src/App.tsx

@@ -1,5 +1,7 @@
 /**
  * App Component
+ *
+ * 响应式布局：支持桌面端和移动端
  */
 
 import { useState, useEffect } from 'react';
@@ -66,12 +68,12 @@ export function App() {
         onCreateSession={handleCreateSession}
       />
 
-      {/* 工具栏按钮 */}
-      <div className="absolute top-3 right-4 z-10 flex gap-2">
+      {/* 工具栏按钮 - 移动端右移避开菜单按钮 */}
+      <div className="absolute top-3 right-3 md:right-4 z-30 flex gap-2">
         {/* 配置按钮 */}
         <button
           onClick={() => setShowConfig(true)}
-          className="p-2 rounded-lg bg-gray-700 text-gray-300 hover:bg-gray-600 transition-colors"
+          className="p-2 rounded-lg bg-gray-700 text-gray-300 hover:bg-gray-600 active:bg-gray-500 transition-colors"
           title="Settings"
         >
           <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -90,10 +92,10 @@ export function App() {
           </svg>
         </button>
 
-        {/* 文件浏览器切换按钮 */}
+        {/* 文件浏览器切换按钮 - 移动端隐藏 */}
         <button
           onClick={() => setShowFileBrowser(!showFileBrowser)}
-          className={`p-2 rounded-lg transition-colors ${
+          className={`hidden md:block p-2 rounded-lg transition-colors ${
             showFileBrowser ? 'bg-blue-600 text-white' : 'bg-gray-700 text-gray-300 hover:bg-gray-600'
           }`}
           title={showFileBrowser ? 'Hide Files' : 'Show Files'}
@@ -109,9 +111,10 @@ export function App() {
         </button>
       </div>
 
-      <div className="flex-1 flex">
+      {/* 主内容区域 */}
+      <div className="flex-1 flex min-w-0">
         {/* 聊天区域 */}
-        <div className={`flex-1 ${showFileBrowser ? 'w-1/2' : 'w-full'}`}>
+        <div className={`flex-1 min-w-0 ${showFileBrowser ? 'hidden md:block md:w-1/2' : 'w-full'}`}>
           {currentSessionId ? (
             <ChatPage key={currentSessionId} sessionId={currentSessionId} />
           ) : (
@@ -121,20 +124,61 @@ export function App() {
           )}
         </div>
 
-        {/* 文件浏览器 */}
+        {/* 文件浏览器 - 桌面端侧边栏，移动端全屏覆盖 */}
         {showFileBrowser && (
-          <div className="w-1/2 border-l border-gray-700">
-            <FileBrowser
-              onFileSelect={(path, _content) => {
-                console.log('Selected file:', path);
-              }}
-            />
-          </div>
+          <>
+            {/* 移动端: 全屏覆盖 */}
+            <div className="fixed inset-0 z-50 bg-gray-900 md:hidden">
+              <div className="flex items-center justify-between p-3 border-b border-gray-700">
+                <span className="text-lg font-semibold">Files</span>
+                <button
+                  onClick={() => setShowFileBrowser(false)}
+                  className="p-2 rounded-lg bg-gray-700 text-gray-300 hover:bg-gray-600"
+                >
+                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                  </svg>
+                </button>
+              </div>
+              <div className="h-[calc(100%-56px)]">
+                <FileBrowser
+                  onFileSelect={(path, _content) => {
+                    console.log('Selected file:', path);
+                  }}
+                />
+              </div>
+            </div>
+
+            {/* 桌面端: 侧边栏 */}
+            <div className="hidden md:block w-1/2 border-l border-gray-700">
+              <FileBrowser
+                onFileSelect={(path, _content) => {
+                  console.log('Selected file:', path);
+                }}
+              />
+            </div>
+          </>
         )}
       </div>
 
       {/* 配置面板 */}
       {showConfig && <ConfigPanel onClose={() => setShowConfig(false)} />}
+
+      {/* 移动端底部文件按钮 */}
+      <button
+        onClick={() => setShowFileBrowser(true)}
+        className="fixed bottom-20 right-4 z-30 p-3 rounded-full bg-gray-700 text-gray-300 hover:bg-gray-600 active:bg-gray-500 shadow-lg md:hidden"
+        title="Browse Files"
+      >
+        <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"
+          />
+        </svg>
+      </button>
     </div>
   );
 }