feat: 添加配置面板组件
- 新增 ConfigPanel 组件,支持模型选择、参数调整 - 添加配置 API (getConfig/updateConfig) - 在 App.tsx 中集成配置按钮和面板
This commit is contained in:
+47
-17
@@ -6,12 +6,14 @@ import { useState, useEffect } from 'react';
|
||||
import { Sidebar } from './components/Sidebar';
|
||||
import { ChatPage } from './pages/Chat';
|
||||
import { FileBrowser } from './components/FileBrowser';
|
||||
import { ConfigPanel } from './components/ConfigPanel';
|
||||
import { listSessions, createSession, type Session } from './api/client';
|
||||
|
||||
export function App() {
|
||||
const [currentSessionId, setCurrentSessionId] = useState<string | null>(null);
|
||||
const [isInitializing, setIsInitializing] = useState(true);
|
||||
const [showFileBrowser, setShowFileBrowser] = useState(false);
|
||||
const [showConfig, setShowConfig] = useState(false);
|
||||
|
||||
// 初始化:加载或创建会话
|
||||
useEffect(() => {
|
||||
@@ -64,23 +66,48 @@ export function App() {
|
||||
onCreateSession={handleCreateSession}
|
||||
/>
|
||||
|
||||
{/* 文件浏览器切换按钮 */}
|
||||
<button
|
||||
onClick={() => setShowFileBrowser(!showFileBrowser)}
|
||||
className={`absolute top-3 right-4 z-10 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'}
|
||||
>
|
||||
<svg className="w-5 h-5" 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 className="absolute top-3 right-4 z-10 flex gap-2">
|
||||
{/* 配置按钮 */}
|
||||
<button
|
||||
onClick={() => setShowConfig(true)}
|
||||
className="p-2 rounded-lg bg-gray-700 text-gray-300 hover:bg-gray-600 transition-colors"
|
||||
title="Settings"
|
||||
>
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
|
||||
/>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
{/* 文件浏览器切换按钮 */}
|
||||
<button
|
||||
onClick={() => setShowFileBrowser(!showFileBrowser)}
|
||||
className={`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'}
|
||||
>
|
||||
<svg className="w-5 h-5" 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 className="flex-1 flex">
|
||||
{/* 聊天区域 */}
|
||||
@@ -105,6 +132,9 @@ export function App() {
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 配置面板 */}
|
||||
{showConfig && <ConfigPanel onClose={() => setShowConfig(false)} />}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user