kurihada/ai-terminal-assistant
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 实现移动端响应式适配：抽屉式侧边栏、触摸优化、Safe Area 支持
- 添加 PWA 支持：vite-plugin-pwa、manifest、Service Worker 缓存
- 优化移动端输入体验：防缩放、最小触摸目标、键盘适配
This commit is contained in:
kurihada
2025-12-12 13:56:52 +08:00
parent 6ef9d95172
commit 20765efe62
11 changed files with 3141 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/web/index.html
+16 -2
View File
@@ -2,8 +2,22 @@
<html lang="en" class="dark"> <html lang="en" class="dark">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/icon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover, maximum-scale=1.0, user-scalable=no" />
<!-- PWA Meta Tags -->
<meta name="theme-color" content="#111827" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="apple-mobile-web-app-title" content="AI Assistant" />
<meta name="description" content="AI Terminal Assistant - Your intelligent coding companion" />
<!-- Apple Touch Icons (use SVG as fallback) -->
<link rel="apple-touch-icon" href="/icon.svg" />
<!-- PWA Manifest -->
<link rel="manifest" href="/manifest.json" />
<title>AI Assistant</title> <title>AI Assistant</title>
</head> </head>
<body class="bg-gray-900 text-gray-100"> <body class="bg-gray-900 text-gray-100">
packages/web/package.json
+5 -4
View File
@@ -10,12 +10,12 @@
"typecheck": "tsc --noEmit" "typecheck": "tsc --noEmit"
}, },
"dependencies": { "dependencies": {
"clsx": "^2.1.0",
"lucide-react": "^0.344.0",
"react": "^18.3.1", "react": "^18.3.1",
"react-dom": "^18.3.1", "react-dom": "^18.3.1",
"react-router-dom": "^6.22.0", "react-router-dom": "^6.22.0",
"zustand": "^4.5.0", "zustand": "^4.5.0"
"lucide-react": "^0.344.0",
"clsx": "^2.1.0"
}, },
"devDependencies": { "devDependencies": {
"@types/react": "^18.3.0", "@types/react": "^18.3.0",
@@ -25,6 +25,7 @@
"postcss": "^8.4.35", "postcss": "^8.4.35",
"tailwindcss": "^3.4.1", "tailwindcss": "^3.4.1",
"typescript": "^5.3.3", "typescript": "^5.3.3",
"vite": "^5.1.0" "vite": "^5.1.0",
"vite-plugin-pwa": "^1.2.0"
} }
} }
packages/web/public/icon.svg
+22
View File
@@ -0,0 +1,22 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<defs>
<linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#0ea5e9;stop-opacity:1" />
<stop offset="100%" style="stop-color:#0369a1;stop-opacity:1" />
</linearGradient>
</defs>
<!-- Background -->
<rect width="512" height="512" rx="96" fill="#111827"/>
<!-- Terminal icon -->
<g fill="none" stroke="url(#grad)" stroke-width="28" stroke-linecap="round" stroke-linejoin="round">
<!-- Terminal window -->
<rect x="96" y="128" width="320" height="256" rx="24" fill="none"/>
<!-- Command prompt > -->
<polyline points="144,224 192,272 144,320"/>
<!-- Cursor line -->
<line x1="224" y1="320" x2="320" y2="320"/>
</g>
<!-- AI sparkle -->
<circle cx="384" cy="160" r="8" fill="#0ea5e9"/>
<circle cx="400" cy="176" r="4" fill="#38bdf8"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 910 B

packages/web/public/manifest.json
+19
View File
@@ -0,0 +1,19 @@
{
"name": "AI Terminal Assistant",
"short_name": "AI Assistant",
"description": "Your intelligent coding companion",
"theme_color": "#111827",
"background_color": "#111827",
"display": "standalone",
"orientation": "portrait-primary",
"scope": "/",
"start_url": "/",
"icons": [
{
"src": "/icon.svg",
"sizes": "any",
"type": "image/svg+xml",
"purpose": "any maskable"
}
]
}
packages/web/src/App.tsx
+53 -9
View File
@@ -1,5 +1,7 @@
/** /**
* App Component * App Component
*
* 响应式布局：支持桌面端和移动端
*/ */
import { useState, useEffect } from 'react'; import { useState, useEffect } from 'react';
@@ -66,12 +68,12 @@ export function App() {
onCreateSession={handleCreateSession} 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 <button
onClick={() => setShowConfig(true)} 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" title="Settings"
> >
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -90,10 +92,10 @@ export function App() {
</svg> </svg>
</button> </button>
{/* 文件浏览器切换按钮 */} {/* 文件浏览器切换按钮 - 移动端隐藏 */}
<button <button
onClick={() => setShowFileBrowser(!showFileBrowser)} 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' showFileBrowser ? 'bg-blue-600 text-white' : 'bg-gray-700 text-gray-300 hover:bg-gray-600'
}`} }`}
title={showFileBrowser ? 'Hide Files' : 'Show Files'} title={showFileBrowser ? 'Hide Files' : 'Show Files'}
@@ -109,9 +111,10 @@ export function App() {
</button> </button>
</div> </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 ? ( {currentSessionId ? (
<ChatPage key={currentSessionId} sessionId={currentSessionId} /> <ChatPage key={currentSessionId} sessionId={currentSessionId} />
) : ( ) : (
@@ -121,20 +124,61 @@ export function App() {
)} )}
</div> </div>
{/* 文件浏览器 */} {/* 文件浏览器 - 桌面端侧边栏，移动端全屏覆盖 */}
{showFileBrowser && ( {showFileBrowser && (
<div className="w-1/2 border-l border-gray-700"> <>
{/* 移动端: 全屏覆盖 */}
<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 <FileBrowser
onFileSelect={(path, _content) => { onFileSelect={(path, _content) => {
console.log('Selected file:', path); console.log('Selected file:', path);
}} }}
/> />
</div> </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> </div>
{/* 配置面板 */} {/* 配置面板 */}
{showConfig && <ConfigPanel onClose={() => setShowConfig(false)} />} {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> </div>
); );
} }
packages/web/src/components/ChatInput.tsx
+19 -7
View File
@@ -1,5 +1,7 @@
/** /**
* Chat Input Component * Chat Input Component
*
* 响应式输入框：适配移动端键盘和触摸操作
*/ */
import { useState, useRef, useEffect } from 'react'; import { useState, useRef, useEffect } from 'react';
@@ -22,7 +24,9 @@ export function ChatInput({ onSend, onCancel, isLoading, disabled }: ChatInputPr
const textarea = textareaRef.current; const textarea = textareaRef.current;
if (textarea) { if (textarea) {
textarea.style.height = 'auto'; 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]); }, [input]);
@@ -40,6 +44,7 @@ export function ChatInput({ onSend, onCancel, isLoading, disabled }: ChatInputPr
}; };
const handleKeyDown = (e: React.KeyboardEvent) => { const handleKeyDown = (e: React.KeyboardEvent) => {
// 移动端 Enter 直接发送，桌面端 Shift+Enter 换行
if (e.key === 'Enter' && !e.shiftKey) { if (e.key === 'Enter' && !e.shiftKey) {
e.preventDefault(); e.preventDefault();
handleSubmit(); handleSubmit();
@@ -47,7 +52,7 @@ export function ChatInput({ onSend, onCancel, isLoading, disabled }: ChatInputPr
}; };
return ( 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="max-w-4xl mx-auto flex gap-2">
<div className="flex-1 relative"> <div className="flex-1 relative">
<textarea <textarea
@@ -55,11 +60,13 @@ export function ChatInput({ onSend, onCancel, isLoading, disabled }: ChatInputPr
value={input} value={input}
onChange={(e) => setInput(e.target.value)} onChange={(e) => setInput(e.target.value)}
onKeyDown={handleKeyDown} onKeyDown={handleKeyDown}
placeholder="Type a message... (Shift+Enter for new line)" placeholder="Type a message..."
disabled={disabled} disabled={disabled}
rows={1} rows={1}
className={clsx( 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', 'text-gray-100 placeholder-gray-500',
'focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent', 'focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent',
'disabled:opacity-50 disabled:cursor-not-allowed' 'disabled:opacity-50 disabled:cursor-not-allowed'
@@ -70,16 +77,21 @@ export function ChatInput({ onSend, onCancel, isLoading, disabled }: ChatInputPr
onClick={isLoading ? onCancel : handleSubmit} onClick={isLoading ? onCancel : handleSubmit}
disabled={!isLoading && (!input.trim() || disabled)} disabled={!isLoading && (!input.trim() || disabled)}
className={clsx( 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 isLoading
? 'bg-red-600 hover:bg-red-700 text-white' ? 'bg-red-600 hover:bg-red-700 active:bg-red-800 text-white'
: 'bg-primary-600 hover:bg-primary-700 text-white', : 'bg-primary-600 hover:bg-primary-700 active:bg-primary-800 text-white',
'disabled:opacity-50 disabled:cursor-not-allowed' 'disabled:opacity-50 disabled:cursor-not-allowed'
)} )}
> >
{isLoading ? <Square size={20} /> : <Send size={20} />} {isLoading ? <Square size={20} /> : <Send size={20} />}
</button> </button>
</div> </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> </div>
); );
} }
packages/web/src/components/ConfigPanel.tsx
+28 -25
View File
@@ -1,7 +1,7 @@
/** /**
* ConfigPanel Component * ConfigPanel Component
* *
* 配置面板组件 * 配置面板：移动端全屏显示，桌面端居中弹窗
*/ */
import { useState, useEffect } from 'react'; import { useState, useEffect } from 'react';
@@ -96,14 +96,17 @@ export function ConfigPanel({ onClose }: ConfigPanelProps) {
} }
return ( return (
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50"> <div className="fixed inset-0 bg-black/50 flex items-end md: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="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 */} {/* Header */}
<div className="flex items-center justify-between px-6 py-4 border-b border-gray-700"> <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">
<h2 className="text-lg font-semibold">Configuration</h2> {/* 移动端拖动指示器 */}
<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 <button
onClick={onClose} 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"> <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" /> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
@@ -112,7 +115,7 @@ export function ConfigPanel({ onClose }: ConfigPanelProps) {
</div> </div>
{/* Content */} {/* Content */}
<div className="p-6 space-y-6"> <div className="p-4 md:p-6 space-y-6">
{/* Error message */} {/* Error message */}
{error && ( {error && (
<div className="p-3 bg-red-900/50 border border-red-700 rounded-lg text-red-300 text-sm"> <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 <select
value={formData.model} value={formData.model}
onChange={(e) => setFormData({ ...formData, model: e.target.value })} 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) => ( {AVAILABLE_MODELS.map((model) => (
<option key={model.id} value={model.id}> <option key={model.id} value={model.id}>
@@ -151,7 +154,7 @@ export function ConfigPanel({ onClose }: ConfigPanelProps) {
{/* Max Tokens */} {/* Max Tokens */}
<div> <div>
<label className="block text-sm font-medium text-gray-300 mb-2"> <label className="block text-sm font-medium text-gray-300 mb-2">
Max Tokens: {formData.maxTokens} Max Tokens: {formData.maxTokens.toLocaleString()}
</label> </label>
<input <input
type="range" type="range"
@@ -160,7 +163,7 @@ export function ConfigPanel({ onClose }: ConfigPanelProps) {
step="1024" step="1024"
value={formData.maxTokens} value={formData.maxTokens}
onChange={(e) => setFormData({ ...formData, maxTokens: parseInt(e.target.value) })} 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"> <div className="flex justify-between text-xs text-gray-500 mt-1">
<span>1K</span> <span>1K</span>
@@ -185,12 +188,12 @@ export function ConfigPanel({ onClose }: ConfigPanelProps) {
step="0.05" step="0.05"
value={formData.temperature} value={formData.temperature}
onChange={(e) => setFormData({ ...formData, temperature: parseFloat(e.target.value) })} 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"> <div className="flex justify-between text-xs text-gray-500 mt-1">
<span>Precise (0)</span> <span>Precise</span>
<span>Balanced (0.5)</span> <span>Balanced</span>
<span>Creative (1)</span> <span>Creative</span>
</div> </div>
<p className="mt-1 text-xs text-gray-500"> <p className="mt-1 text-xs text-gray-500">
Controls randomness in responses Controls randomness in responses
@@ -206,7 +209,7 @@ export function ConfigPanel({ onClose }: ConfigPanelProps) {
type="text" type="text"
value={formData.workdir} value={formData.workdir}
onChange={(e) => setFormData({ ...formData, workdir: e.target.value })} 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" placeholder="/path/to/project"
/> />
<p className="mt-1 text-xs text-gray-500"> <p className="mt-1 text-xs text-gray-500">
@@ -218,16 +221,16 @@ export function ConfigPanel({ onClose }: ConfigPanelProps) {
{config && ( {config && (
<div className="pt-4 border-t border-gray-700"> <div className="pt-4 border-t border-gray-700">
<h3 className="text-sm font-medium text-gray-400 mb-3">Server Information</h3> <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 className="grid grid-cols-1 md:grid-cols-2 gap-3 text-sm">
<div> <div className="flex justify-between md:block">
<span className="text-gray-500">Allowed Paths:</span> <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'} {config.allowedPaths.length || 'All'}
</span> </span>
</div> </div>
<div> <div className="flex justify-between md:block">
<span className="text-gray-500">Denied Paths:</span> <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'} {config.deniedPaths.length || 'None'}
</span> </span>
</div> </div>
@@ -236,24 +239,24 @@ export function ConfigPanel({ onClose }: ConfigPanelProps) {
)} )}
</div> </div>
{/* Footer */} {/* Footer - 移动端固定在底部 */}
<div className="flex items-center justify-end gap-3 px-6 py-4 border-t border-gray-700 bg-gray-800/50"> <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 <button
onClick={handleReset} 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 Reset
</button> </button>
<button <button
onClick={onClose} 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 Cancel
</button> </button>
<button <button
onClick={handleSave} onClick={handleSave}
disabled={saving} 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'} {saving ? 'Saving...' : 'Save Changes'}
</button> </button>
packages/web/src/components/Sidebar.tsx
+58 -4
View File
@@ -1,9 +1,11 @@
/** /**
* Sidebar Component * Sidebar Component
*
* 响应式侧边栏：桌面端固定显示，移动端抽屉式菜单
*/ */
import { useState, useEffect } from 'react'; 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 clsx from 'clsx';
import { listSessions, createSession, deleteSession, type Session } from '../api/client'; import { listSessions, createSession, deleteSession, type Session } from '../api/client';
@@ -16,6 +18,7 @@ interface SidebarProps {
export function Sidebar({ currentSessionId, onSelectSession, onCreateSession }: SidebarProps) { export function Sidebar({ currentSessionId, onSelectSession, onCreateSession }: SidebarProps) {
const [sessions, setSessions] = useState<Session[]>([]); const [sessions, setSessions] = useState<Session[]>([]);
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
const [isOpen, setIsOpen] = useState(false);
const loadSessions = async () => { const loadSessions = async () => {
setIsLoading(true); setIsLoading(true);
@@ -34,6 +37,7 @@ export function Sidebar({ currentSessionId, onSelectSession, onCreateSession }:
const { data } = await createSession(); const { data } = await createSession();
setSessions((prev) => [data, ...prev]); setSessions((prev) => [data, ...prev]);
onCreateSession(data); onCreateSession(data);
setIsOpen(false); // 创建后关闭侧边栏
} catch (error) { } catch (error) {
console.error('Failed to create session:', error); console.error('Failed to create session:', error);
} }
@@ -55,14 +59,61 @@ export function Sidebar({ currentSessionId, onSelectSession, onCreateSession }:
} }
}; };
const handleSelectSession = (id: string) => {
onSelectSession(id);
setIsOpen(false); // 选择后关闭侧边栏
};
useEffect(() => { useEffect(() => {
loadSessions(); loadSessions();
}, []); }, []);
// 点击遮罩层关闭
const handleOverlayClick = () => {
setIsOpen(false);
};
return ( return (
<div className="w-64 bg-gray-800 border-r border-gray-700 flex flex-col"> <>
{/* 移动端菜单按钮 */}
<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>
{/* 遮罩层 - 仅移动端 */}
{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'
)}
>
{/* Header */} {/* Header */}
<div className="p-4 border-b border-gray-700"> <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 <button
onClick={handleCreate} 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" 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"
@@ -87,10 +138,11 @@ export function Sidebar({ currentSessionId, onSelectSession, onCreateSession }:
{sessions.map((session) => ( {sessions.map((session) => (
<div <div
key={session.id} key={session.id}
onClick={() => onSelectSession(session.id)} onClick={() => handleSelectSession(session.id)}
className={clsx( className={clsx(
'flex items-center gap-2 p-3 rounded-lg cursor-pointer group', 'flex items-center gap-2 p-3 rounded-lg cursor-pointer group',
'hover:bg-gray-700 transition-colors', 'hover:bg-gray-700 transition-colors',
'active:bg-gray-600', // 触摸反馈
currentSessionId === session.id && 'bg-gray-700' currentSessionId === session.id && 'bg-gray-700'
)} )}
> >
@@ -105,7 +157,8 @@ export function Sidebar({ currentSessionId, onSelectSession, onCreateSession }:
</div> </div>
<button <button
onClick={(e) => handleDelete(session.id, e)} onClick={(e) => handleDelete(session.id, e)}
className="opacity-0 group-hover:opacity-100 p-1 hover:bg-gray-600 rounded transition-all" 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" /> <Trash2 size={14} className="text-gray-400" />
</button> </button>
@@ -120,5 +173,6 @@ export function Sidebar({ currentSessionId, onSelectSession, onCreateSession }:
AI Assistant v1.0 AI Assistant v1.0
</div> </div>
</div> </div>
</>
); );
} }
packages/web/src/styles/index.css
+21
View File
@@ -2,6 +2,27 @@
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;
/* iOS Safe Area Support */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
.safe-area-pb {
padding-bottom: calc(env(safe-area-inset-bottom) + 0.5rem);
}
}
/* Prevent pull-to-refresh on mobile */
html {
overscroll-behavior: none;
}
/* Touch action optimization */
.touch-pan-x {
touch-action: pan-x;
}
.touch-pan-y {
touch-action: pan-y;
}
/* Custom scrollbar */ /* Custom scrollbar */
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 8px; width: 8px;
packages/web/vite.config.ts
+47 -1
View File
@@ -1,9 +1,54 @@
import { defineConfig } from 'vite'; import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react'; import react from '@vitejs/plugin-react';
import { VitePWA } from 'vite-plugin-pwa';
import path from 'path'; import path from 'path';
export default defineConfig({ export default defineConfig({
plugins: [react()], plugins: [
react(),
VitePWA({
registerType: 'autoUpdate',
includeAssets: ['icon.svg'],
manifest: {
name: 'AI Terminal Assistant',
short_name: 'AI Assistant',
description: 'Your intelligent coding companion',
theme_color: '#111827',
background_color: '#111827',
display: 'standalone',
orientation: 'portrait-primary',
scope: '/',
start_url: '/',
icons: [
{
src: '/icon.svg',
sizes: 'any',
type: 'image/svg+xml',
purpose: 'any maskable',
},
],
},
workbox: {
globPatterns: ['**/*.{js,css,html,ico,png,svg,woff2}'],
runtimeCaching: [
{
urlPattern: /\/api\//i,
handler: 'NetworkFirst',
options: {
cacheName: 'api-cache',
expiration: {
maxEntries: 50,
maxAgeSeconds: 60 * 60, // 1 hour
},
},
},
],
},
devOptions: {
enabled: false, // 开发模式下禁用 PWA
},
}),
],
resolve: { resolve: {
alias: { alias: {
'@': path.resolve(__dirname, './src'), '@': path.resolve(__dirname, './src'),
@@ -15,6 +60,7 @@ export default defineConfig({
'/api': { '/api': {
target: 'http://localhost:3000', target: 'http://localhost:3000',
changeOrigin: true, changeOrigin: true,
ws: true,
}, },
'/health': { '/health': {
target: 'http://localhost:3000', target: 'http://localhost:3000',
pnpm-lock.yaml
Generated
+2794 -4
View File
File diff suppressed because it is too large Load Diff