feat(web): 移除 Settings 按钮,在 Header 直接显示工作目录

- 移除 ConfigPanel 及其入口按钮
- 在 Chat 页面 Header 左侧显示当前工作目录
- 初始化时并行获取会话列表和工作目录
This commit is contained in:
2025-12-15 23:17:27 +08:00
parent f3995d158c
commit 92619df026
2 changed files with 34 additions and 27 deletions
+16 -8
View File
@@ -8,7 +8,6 @@ import { useState, useEffect, useCallback } from 'react';
import { import {
Sidebar, Sidebar,
FileBrowser, FileBrowser,
ConfigPanel,
CommandPanel, CommandPanel,
MCPPanel, MCPPanel,
HooksPanel, HooksPanel,
@@ -19,6 +18,7 @@ import {
ThemeProvider, ThemeProvider,
listSessions, listSessions,
createSession, createSession,
getWorkingDirectory,
type Session, type Session,
} from '@ai-assistant/ui'; } from '@ai-assistant/ui';
import { ChatPage } from './pages/Chat'; import { ChatPage } from './pages/Chat';
@@ -27,7 +27,6 @@ export function App() {
const [currentSessionId, setCurrentSessionId] = useState<string | null>(null); const [currentSessionId, setCurrentSessionId] = useState<string | null>(null);
const [isInitializing, setIsInitializing] = useState(true); const [isInitializing, setIsInitializing] = useState(true);
const [showFileBrowser, setShowFileBrowser] = useState(false); const [showFileBrowser, setShowFileBrowser] = useState(false);
const [showConfig, setShowConfig] = useState(false);
const [showCommands, setShowCommands] = useState(false); const [showCommands, setShowCommands] = useState(false);
const [showMCP, setShowMCP] = useState(false); const [showMCP, setShowMCP] = useState(false);
const [showHooks, setShowHooks] = useState(false); const [showHooks, setShowHooks] = useState(false);
@@ -35,14 +34,26 @@ export function App() {
const [showCheckpoints, setShowCheckpoints] = useState(false); const [showCheckpoints, setShowCheckpoints] = useState(false);
const [showProviders, setShowProviders] = useState(false); const [showProviders, setShowProviders] = useState(false);
const [sessionTitleUpdate, setSessionTitleUpdate] = useState<{ sessionId: string; name: string } | null>(null); const [sessionTitleUpdate, setSessionTitleUpdate] = useState<{ sessionId: string; name: string } | null>(null);
const [workingDirectory, setWorkingDirectory] = useState<string>('');
// 初始化:加载会话(只在首次启动时自动创建) // 初始化:加载会话和工作目录
useEffect(() => { useEffect(() => {
const HAS_SESSIONS_KEY = 'ai-assistant-has-sessions'; const HAS_SESSIONS_KEY = 'ai-assistant-has-sessions';
async function init() { async function init() {
try { try {
const { data: sessions } = await listSessions(); // 并行获取会话和工作目录
const [sessionsResult, workdirResult] = await Promise.all([
listSessions(),
getWorkingDirectory().catch(() => null),
]);
const { data: sessions } = sessionsResult;
// 设置工作目录
if (workdirResult?.data?.workingDirectory) {
setWorkingDirectory(workdirResult.data.workingDirectory);
}
if (sessions.length > 0) { if (sessions.length > 0) {
// 有会话,选择最近的 // 有会话,选择最近的
@@ -130,13 +141,13 @@ export function App() {
responsive responsive
showFileBrowser={showFileBrowser} showFileBrowser={showFileBrowser}
onToggleFileBrowser={() => setShowFileBrowser(!showFileBrowser)} onToggleFileBrowser={() => setShowFileBrowser(!showFileBrowser)}
onOpenConfig={() => setShowConfig(true)}
onOpenCommands={() => setShowCommands(true)} onOpenCommands={() => setShowCommands(true)}
onOpenMCP={() => setShowMCP(true)} onOpenMCP={() => setShowMCP(true)}
onOpenHooks={() => setShowHooks(true)} onOpenHooks={() => setShowHooks(true)}
onOpenAgents={() => setShowAgents(true)} onOpenAgents={() => setShowAgents(true)}
onOpenCheckpoints={() => setShowCheckpoints(true)} onOpenCheckpoints={() => setShowCheckpoints(true)}
onOpenProviders={() => setShowProviders(true)} onOpenProviders={() => setShowProviders(true)}
workingDirectory={workingDirectory}
/> />
) : ( ) : (
<div className="flex-1 flex items-center justify-center h-full"> <div className="flex-1 flex items-center justify-center h-full">
@@ -182,9 +193,6 @@ export function App() {
)} )}
</div> </div>
{/* 配置面板 */}
{showConfig && <ConfigPanel onClose={() => setShowConfig(false)} responsive />}
{/* 命令面板 */} {/* 命令面板 */}
{showCommands && <CommandPanel onClose={() => setShowCommands(false)} responsive />} {showCommands && <CommandPanel onClose={() => setShowCommands(false)} responsive />}
+18 -19
View File
@@ -3,7 +3,7 @@
*/ */
import { useEffect, useRef } from 'react'; import { useEffect, useRef } from 'react';
import { WifiOff, MessageSquare, Settings, FolderOpen, Terminal, Plug, Zap, Bot, History, Server } from 'lucide-react'; import { WifiOff, MessageSquare, FolderOpen, Terminal, Plug, Zap, Bot, History, Server, Folder } from 'lucide-react';
import { motion, AnimatePresence } from 'framer-motion'; import { motion, AnimatePresence } from 'framer-motion';
import { toast } from 'sonner'; import { toast } from 'sonner';
import { import {
@@ -23,13 +23,14 @@ interface ChatPageProps {
// 工具栏按钮 // 工具栏按钮
showFileBrowser?: boolean; showFileBrowser?: boolean;
onToggleFileBrowser?: () => void; onToggleFileBrowser?: () => void;
onOpenConfig?: () => void;
onOpenCommands?: () => void; onOpenCommands?: () => void;
onOpenMCP?: () => void; onOpenMCP?: () => void;
onOpenHooks?: () => void; onOpenHooks?: () => void;
onOpenAgents?: () => void; onOpenAgents?: () => void;
onOpenCheckpoints?: () => void; onOpenCheckpoints?: () => void;
onOpenProviders?: () => void; onOpenProviders?: () => void;
// Working Directory
workingDirectory?: string;
} }
export function ChatPage({ export function ChatPage({
@@ -39,13 +40,13 @@ export function ChatPage({
responsive = false, responsive = false,
showFileBrowser, showFileBrowser,
onToggleFileBrowser, onToggleFileBrowser,
onOpenConfig,
onOpenCommands, onOpenCommands,
onOpenMCP, onOpenMCP,
onOpenHooks, onOpenHooks,
onOpenAgents, onOpenAgents,
onOpenCheckpoints, onOpenCheckpoints,
onOpenProviders, onOpenProviders,
workingDirectory,
}: ChatPageProps) { }: ChatPageProps) {
const { const {
messages, messages,
@@ -152,8 +153,19 @@ export function ChatPage({
<div className="flex-1 flex flex-col h-screen"> <div className="flex-1 flex flex-col h-screen">
{/* Header */} {/* Header */}
<div className="flex items-center justify-between px-4 md:px-6 py-3 border-b border-line bg-surface-subtle"> <div className="flex items-center justify-between px-4 md:px-6 py-3 border-b border-line bg-surface-subtle">
<h1 className="text-lg font-medium text-fg">Chat</h1> <div className="flex items-center gap-3 min-w-0">
<div className="flex items-center gap-3"> <h1 className="text-lg font-medium text-fg flex-shrink-0">Chat</h1>
{/* Working Directory */}
{workingDirectory && (
<div className="flex items-center gap-1.5 text-sm text-fg-muted min-w-0">
<Folder size={14} className="flex-shrink-0 text-fg-subtle" />
<span className="truncate font-mono text-xs" title={workingDirectory}>
{workingDirectory}
</span>
</div>
)}
</div>
<div className="flex items-center gap-3 flex-shrink-0">
{/* 上下文使用情况 - 紧凑模式 */} {/* 上下文使用情况 - 紧凑模式 */}
{sessionId && ( {sessionId && (
<ContextUsage <ContextUsage
@@ -168,7 +180,7 @@ export function ChatPage({
<ConnectionStatus /> <ConnectionStatus />
{/* 工具栏按钮 */} {/* 工具栏按钮 */}
{(onOpenConfig || onToggleFileBrowser || onOpenCommands || onOpenMCP || onOpenHooks || onOpenAgents || onOpenCheckpoints || onOpenProviders) && ( {(onToggleFileBrowser || onOpenCommands || onOpenMCP || onOpenHooks || onOpenAgents || onOpenCheckpoints || onOpenProviders) && (
<div className="flex items-center gap-1.5 border-l border-line-muted pl-3"> <div className="flex items-center gap-1.5 border-l border-line-muted pl-3">
{/* Checkpoints 按钮 */} {/* Checkpoints 按钮 */}
{onOpenCheckpoints && ( {onOpenCheckpoints && (
@@ -248,19 +260,6 @@ export function ChatPage({
</motion.button> </motion.button>
)} )}
{/* 配置按钮 */}
{onOpenConfig && (
<motion.button
whileHover={{ scale: 1.1 }}
whileTap={{ scale: 0.9 }}
onClick={onOpenConfig}
className="p-1.5 rounded-lg text-fg-muted hover:text-fg-secondary hover:bg-surface-muted transition-colors"
title="Settings"
>
<Settings size={20} />
</motion.button>
)}
{/* 文件浏览器按钮 - 仅桌面端显示 */} {/* 文件浏览器按钮 - 仅桌面端显示 */}
{onToggleFileBrowser && ( {onToggleFileBrowser && (
<motion.button <motion.button