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

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

packages/web/src/components/ChatInput.tsx

@@ -1,5 +1,7 @@
 /**
  * Chat Input Component
+ *
+ * 响应式输入框：适配移动端键盘和触摸操作
  */
 
 import { useState, useRef, useEffect } from 'react';
@@ -22,7 +24,9 @@ export function ChatInput({ onSend, onCancel, isLoading, disabled }: ChatInputPr
     const textarea = textareaRef.current;
     if (textarea) {
       textarea.style.height = 'auto';
-      textarea.style.height = `${Math.min(textarea.scrollHeight, 200)}px`;
+      // 移动端最大高度稍小
+      const maxHeight = window.innerWidth < 768 ? 120 : 200;
+      textarea.style.height = `${Math.min(textarea.scrollHeight, maxHeight)}px`;
     }
   }, [input]);
 
@@ -40,6 +44,7 @@ export function ChatInput({ onSend, onCancel, isLoading, disabled }: ChatInputPr
   };
 
   const handleKeyDown = (e: React.KeyboardEvent) => {
+    // 移动端 Enter 直接发送，桌面端 Shift+Enter 换行
     if (e.key === 'Enter' && !e.shiftKey) {
       e.preventDefault();
       handleSubmit();
@@ -47,7 +52,7 @@ export function ChatInput({ onSend, onCancel, isLoading, disabled }: ChatInputPr
   };
 
   return (
-    <div className="border-t border-gray-700 p-4 bg-gray-900">
+    <div className="border-t border-gray-700 p-3 md:p-4 bg-gray-900 safe-area-pb">
       <div className="max-w-4xl mx-auto flex gap-2">
         <div className="flex-1 relative">
           <textarea
@@ -55,11 +60,13 @@ export function ChatInput({ onSend, onCancel, isLoading, disabled }: ChatInputPr
             value={input}
             onChange={(e) => setInput(e.target.value)}
             onKeyDown={handleKeyDown}
-            placeholder="Type a message... (Shift+Enter for new line)"
+            placeholder="Type a message..."
             disabled={disabled}
             rows={1}
             className={clsx(
-              'w-full resize-none rounded-lg border border-gray-600 bg-gray-800 px-4 py-3',
+              'w-full resize-none rounded-lg border border-gray-600 bg-gray-800',
+              'px-3 py-2.5 md:px-4 md:py-3',
+              'text-base md:text-sm', // 移动端使用 16px 防止缩放
               'text-gray-100 placeholder-gray-500',
               'focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent',
               'disabled:opacity-50 disabled:cursor-not-allowed'
@@ -70,16 +77,21 @@ export function ChatInput({ onSend, onCancel, isLoading, disabled }: ChatInputPr
           onClick={isLoading ? onCancel : handleSubmit}
           disabled={!isLoading && (!input.trim() || disabled)}
           className={clsx(
-            'px-4 py-3 rounded-lg flex items-center justify-center transition-colors',
+            'px-3 py-2.5 md:px-4 md:py-3 rounded-lg flex items-center justify-center transition-colors',
+            'min-w-[44px] min-h-[44px]', // 最小触摸目标 44x44
             isLoading
-              ? 'bg-red-600 hover:bg-red-700 text-white'
-              : 'bg-primary-600 hover:bg-primary-700 text-white',
+              ? 'bg-red-600 hover:bg-red-700 active:bg-red-800 text-white'
+              : 'bg-primary-600 hover:bg-primary-700 active:bg-primary-800 text-white',
             'disabled:opacity-50 disabled:cursor-not-allowed'
           )}
         >
           {isLoading ? <Square size={20} /> : <Send size={20} />}
         </button>
       </div>
+      {/* 移动端提示文字 */}
+      <p className="hidden md:block text-xs text-gray-500 text-center mt-2">
+        Press Enter to send, Shift+Enter for new line
+      </p>
     </div>
   );
 }

packages/web/src/components/ConfigPanel.tsx

@@ -1,7 +1,7 @@
 /**
  * ConfigPanel Component
  *
- * 配置面板组件
+ * 配置面板：移动端全屏显示，桌面端居中弹窗
  */
 
 import { useState, useEffect } from 'react';
@@ -96,14 +96,17 @@ export function ConfigPanel({ onClose }: ConfigPanelProps) {
   }
 
   return (
-    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
-      <div className="bg-gray-800 rounded-lg w-full max-w-lg mx-4 max-h-[90vh] overflow-auto">
+    <div className="fixed inset-0 bg-black/50 flex items-end md:items-center justify-center z-50">
+      {/* 移动端：从底部滑出的全屏面板；桌面端：居中弹窗 */}
+      <div className="bg-gray-800 w-full md:w-full md:max-w-lg md:mx-4 max-h-full md:max-h-[90vh] overflow-auto rounded-t-2xl md:rounded-lg">
         {/* Header */}
-        <div className="flex items-center justify-between px-6 py-4 border-b border-gray-700">
-          <h2 className="text-lg font-semibold">Configuration</h2>
+        <div className="sticky top-0 flex items-center justify-between px-4 md:px-6 py-4 border-b border-gray-700 bg-gray-800 z-10">
+          {/* 移动端拖动指示器 */}
+          <div className="absolute top-2 left-1/2 -translate-x-1/2 w-10 h-1 bg-gray-600 rounded-full md:hidden" />
+          <h2 className="text-lg font-semibold mt-2 md:mt-0">Configuration</h2>
           <button
             onClick={onClose}
-            className="p-1 hover:bg-gray-700 rounded transition-colors"
+            className="p-2 hover:bg-gray-700 active:bg-gray-600 rounded-lg transition-colors min-w-[44px] min-h-[44px] flex items-center justify-center"
           >
             <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" />
@@ -112,7 +115,7 @@ export function ConfigPanel({ onClose }: ConfigPanelProps) {
         </div>
 
         {/* Content */}
-        <div className="p-6 space-y-6">
+        <div className="p-4 md:p-6 space-y-6">
           {/* Error message */}
           {error && (
             <div className="p-3 bg-red-900/50 border border-red-700 rounded-lg text-red-300 text-sm">
@@ -135,7 +138,7 @@ export function ConfigPanel({ onClose }: ConfigPanelProps) {
             <select
               value={formData.model}
               onChange={(e) => setFormData({ ...formData, model: e.target.value })}
-              className="w-full px-3 py-2 bg-gray-900 border border-gray-700 rounded-lg text-white focus:outline-none focus:border-blue-500"
+              className="w-full px-3 py-3 md:py-2 bg-gray-900 border border-gray-700 rounded-lg text-white text-base md:text-sm focus:outline-none focus:border-blue-500"
             >
               {AVAILABLE_MODELS.map((model) => (
                 <option key={model.id} value={model.id}>
@@ -151,7 +154,7 @@ export function ConfigPanel({ onClose }: ConfigPanelProps) {
           {/* Max Tokens */}
           <div>
             <label className="block text-sm font-medium text-gray-300 mb-2">
-              Max Tokens: {formData.maxTokens}
+              Max Tokens: {formData.maxTokens.toLocaleString()}
             </label>
             <input
               type="range"
@@ -160,7 +163,7 @@ export function ConfigPanel({ onClose }: ConfigPanelProps) {
               step="1024"
               value={formData.maxTokens}
               onChange={(e) => setFormData({ ...formData, maxTokens: parseInt(e.target.value) })}
-              className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer"
+              className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer touch-pan-x"
             />
             <div className="flex justify-between text-xs text-gray-500 mt-1">
               <span>1K</span>
@@ -185,12 +188,12 @@ export function ConfigPanel({ onClose }: ConfigPanelProps) {
               step="0.05"
               value={formData.temperature}
               onChange={(e) => setFormData({ ...formData, temperature: parseFloat(e.target.value) })}
-              className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer"
+              className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer touch-pan-x"
             />
             <div className="flex justify-between text-xs text-gray-500 mt-1">
-              <span>Precise (0)</span>
-              <span>Balanced (0.5)</span>
-              <span>Creative (1)</span>
+              <span>Precise</span>
+              <span>Balanced</span>
+              <span>Creative</span>
             </div>
             <p className="mt-1 text-xs text-gray-500">
               Controls randomness in responses
@@ -206,7 +209,7 @@ export function ConfigPanel({ onClose }: ConfigPanelProps) {
               type="text"
               value={formData.workdir}
               onChange={(e) => setFormData({ ...formData, workdir: e.target.value })}
-              className="w-full px-3 py-2 bg-gray-900 border border-gray-700 rounded-lg text-white focus:outline-none focus:border-blue-500 font-mono text-sm"
+              className="w-full px-3 py-3 md:py-2 bg-gray-900 border border-gray-700 rounded-lg text-white text-base md:text-sm focus:outline-none focus:border-blue-500 font-mono"
               placeholder="/path/to/project"
             />
             <p className="mt-1 text-xs text-gray-500">
@@ -218,16 +221,16 @@ export function ConfigPanel({ onClose }: ConfigPanelProps) {
           {config && (
             <div className="pt-4 border-t border-gray-700">
               <h3 className="text-sm font-medium text-gray-400 mb-3">Server Information</h3>
-              <div className="grid grid-cols-2 gap-4 text-sm">
-                <div>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-3 text-sm">
+                <div className="flex justify-between md:block">
                   <span className="text-gray-500">Allowed Paths:</span>
-                  <span className="ml-2 text-gray-300">
+                  <span className="md:ml-2 text-gray-300">
                     {config.allowedPaths.length || 'All'}
                   </span>
                 </div>
-                <div>
+                <div className="flex justify-between md:block">
                   <span className="text-gray-500">Denied Paths:</span>
-                  <span className="ml-2 text-gray-300">
+                  <span className="md:ml-2 text-gray-300">
                     {config.deniedPaths.length || 'None'}
                   </span>
                 </div>
@@ -236,24 +239,24 @@ export function ConfigPanel({ onClose }: ConfigPanelProps) {
           )}
         </div>
 
-        {/* Footer */}
-        <div className="flex items-center justify-end gap-3 px-6 py-4 border-t border-gray-700 bg-gray-800/50">
+        {/* Footer - 移动端固定在底部 */}
+        <div className="sticky bottom-0 flex flex-col-reverse md:flex-row items-stretch md:items-center justify-end gap-2 md:gap-3 p-4 md:px-6 md:py-4 border-t border-gray-700 bg-gray-800 safe-area-pb">
           <button
             onClick={handleReset}
-            className="px-4 py-2 text-sm text-gray-300 hover:text-white transition-colors"
+            className="px-4 py-3 md:py-2 text-sm text-gray-300 hover:text-white active:bg-gray-700 rounded-lg transition-colors"
           >
             Reset
           </button>
           <button
             onClick={onClose}
-            className="px-4 py-2 text-sm bg-gray-700 hover:bg-gray-600 rounded-lg transition-colors"
+            className="px-4 py-3 md:py-2 text-sm bg-gray-700 hover:bg-gray-600 active:bg-gray-500 rounded-lg transition-colors"
           >
             Cancel
           </button>
           <button
             onClick={handleSave}
             disabled={saving}
-            className="px-4 py-2 text-sm bg-blue-600 hover:bg-blue-500 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+            className="px-4 py-3 md:py-2 text-sm bg-blue-600 hover:bg-blue-500 active:bg-blue-700 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed font-medium"
           >
             {saving ? 'Saving...' : 'Save Changes'}
           </button>

packages/web/src/components/Sidebar.tsx

@@ -1,9 +1,11 @@
 /**
  * Sidebar Component
+ *
+ * 响应式侧边栏：桌面端固定显示，移动端抽屉式菜单
  */
 
 import { useState, useEffect } from 'react';
-import { Plus, MessageSquare, Trash2, RefreshCw } from 'lucide-react';
+import { Plus, MessageSquare, Trash2, RefreshCw, Menu, X } from 'lucide-react';
 import clsx from 'clsx';
 import { listSessions, createSession, deleteSession, type Session } from '../api/client';
 
@@ -16,6 +18,7 @@ interface SidebarProps {
 export function Sidebar({ currentSessionId, onSelectSession, onCreateSession }: SidebarProps) {
   const [sessions, setSessions] = useState<Session[]>([]);
   const [isLoading, setIsLoading] = useState(false);
+  const [isOpen, setIsOpen] = useState(false);
 
   const loadSessions = async () => {
     setIsLoading(true);
@@ -34,6 +37,7 @@ export function Sidebar({ currentSessionId, onSelectSession, onCreateSession }:
       const { data } = await createSession();
       setSessions((prev) => [data, ...prev]);
       onCreateSession(data);
+      setIsOpen(false); // 创建后关闭侧边栏
     } catch (error) {
       console.error('Failed to create session:', error);
     }
@@ -55,70 +59,120 @@ export function Sidebar({ currentSessionId, onSelectSession, onCreateSession }:
     }
   };
 
+  const handleSelectSession = (id: string) => {
+    onSelectSession(id);
+    setIsOpen(false); // 选择后关闭侧边栏
+  };
+
   useEffect(() => {
     loadSessions();
   }, []);
 
+  // 点击遮罩层关闭
+  const handleOverlayClick = () => {
+    setIsOpen(false);
+  };
+
   return (
-    <div className="w-64 bg-gray-800 border-r border-gray-700 flex flex-col">
-      {/* Header */}
-      <div className="p-4 border-b border-gray-700">
-        <button
-          onClick={handleCreate}
-          className="w-full flex items-center justify-center gap-2 px-4 py-2 bg-primary-600 hover:bg-primary-700 rounded-lg transition-colors"
-        >
-          <Plus size={18} />
-          <span>New Chat</span>
-        </button>
-      </div>
+    <>
+      {/* 移动端菜单按钮 */}
+      <button
+        onClick={() => setIsOpen(true)}
+        className="fixed top-3 left-3 z-40 p-2 rounded-lg bg-gray-800 text-gray-300 hover:bg-gray-700 transition-colors md:hidden"
+        aria-label="Open menu"
+      >
+        <Menu size={20} />
+      </button>
 
-      {/* Session List */}
-      <div className="flex-1 overflow-y-auto">
-        {isLoading ? (
-          <div className="p-4 text-center text-gray-500">
-            <RefreshCw className="animate-spin inline-block" size={20} />
-          </div>
-        ) : sessions.length === 0 ? (
-          <div className="p-4 text-center text-gray-500">
-            No conversations yet
-          </div>
-        ) : (
-          <div className="p-2 space-y-1">
-            {sessions.map((session) => (
-              <div
-                key={session.id}
-                onClick={() => onSelectSession(session.id)}
-                className={clsx(
-                  'flex items-center gap-2 p-3 rounded-lg cursor-pointer group',
-                  'hover:bg-gray-700 transition-colors',
-                  currentSessionId === session.id && 'bg-gray-700'
-                )}
-              >
-                <MessageSquare size={18} className="text-gray-400 flex-shrink-0" />
-                <div className="flex-1 min-w-0">
-                  <div className="text-sm truncate">
-                    {session.name || `Chat ${session.id.slice(0, 8)}`}
-                  </div>
-                  <div className="text-xs text-gray-500">
-                    {session.messageCount} messages
-                  </div>
-                </div>
-                <button
-                  onClick={(e) => handleDelete(session.id, e)}
-                  className="opacity-0 group-hover:opacity-100 p-1 hover:bg-gray-600 rounded transition-all"
-                >
-                  <Trash2 size={14} className="text-gray-400" />
-                </button>
-              </div>
-            ))}
-          </div>
+      {/* 遮罩层 - 仅移动端 */}
+      {isOpen && (
+        <div
+          className="fixed inset-0 bg-black/50 z-40 md:hidden"
+          onClick={handleOverlayClick}
+        />
+      )}
+
+      {/* 侧边栏 */}
+      <div
+        className={clsx(
+          'fixed md:static inset-y-0 left-0 z-50',
+          'w-64 bg-gray-800 border-r border-gray-700 flex flex-col',
+          'transform transition-transform duration-300 ease-in-out',
+          'md:transform-none',
+          isOpen ? 'translate-x-0' : '-translate-x-full md:translate-x-0'
         )}
-      </div>
+      >
+        {/* Header */}
+        <div className="p-4 border-b border-gray-700">
+          <div className="flex items-center justify-between mb-3 md:hidden">
+            <span className="text-lg font-semibold">Sessions</span>
+            <button
+              onClick={() => setIsOpen(false)}
+              className="p-1 hover:bg-gray-700 rounded transition-colors"
+              aria-label="Close menu"
+            >
+              <X size={20} />
+            </button>
+          </div>
+          <button
+            onClick={handleCreate}
+            className="w-full flex items-center justify-center gap-2 px-4 py-2 bg-primary-600 hover:bg-primary-700 rounded-lg transition-colors"
+          >
+            <Plus size={18} />
+            <span>New Chat</span>
+          </button>
+        </div>
 
-      {/* Footer */}
-      <div className="p-4 border-t border-gray-700 text-center text-xs text-gray-500">
-        AI Assistant v1.0
+        {/* Session List */}
+        <div className="flex-1 overflow-y-auto">
+          {isLoading ? (
+            <div className="p-4 text-center text-gray-500">
+              <RefreshCw className="animate-spin inline-block" size={20} />
+            </div>
+          ) : sessions.length === 0 ? (
+            <div className="p-4 text-center text-gray-500">
+              No conversations yet
+            </div>
+          ) : (
+            <div className="p-2 space-y-1">
+              {sessions.map((session) => (
+                <div
+                  key={session.id}
+                  onClick={() => handleSelectSession(session.id)}
+                  className={clsx(
+                    'flex items-center gap-2 p-3 rounded-lg cursor-pointer group',
+                    'hover:bg-gray-700 transition-colors',
+                    'active:bg-gray-600', // 触摸反馈
+                    currentSessionId === session.id && 'bg-gray-700'
+                  )}
+                >
+                  <MessageSquare size={18} className="text-gray-400 flex-shrink-0" />
+                  <div className="flex-1 min-w-0">
+                    <div className="text-sm truncate">
+                      {session.name || `Chat ${session.id.slice(0, 8)}`}
+                    </div>
+                    <div className="text-xs text-gray-500">
+                      {session.messageCount} messages
+                    </div>
+                  </div>
+                  <button
+                    onClick={(e) => handleDelete(session.id, e)}
+                    className="opacity-0 group-hover:opacity-100 p-1 hover:bg-gray-600 rounded transition-all md:opacity-0"
+                    aria-label="Delete session"
+                  >
+                    <Trash2 size={14} className="text-gray-400" />
+                  </button>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+
+        {/* Footer */}
+        <div className="p-4 border-t border-gray-700 text-center text-xs text-gray-500">
+          AI Assistant v1.0
+        </div>
       </div>
-    </div>
+    </>
   );
 }