245 lines
10 KiB
TypeScript
245 lines
10 KiB
TypeScript
|
|
import React, { useState, useEffect } from 'react';
|
|
import { HashRouter as Router, Routes, Route, Link, useLocation } from 'react-router-dom';
|
|
import { Bot, Book, User, LayoutDashboard, Mic2, Video, GitBranch, Zap, PanelLeftClose, PanelLeftOpen, History as HistoryIcon, ChevronDown, ChevronRight, Box, Wand2, Wrench, BrainCircuit, AudioLines, Activity } from 'lucide-react';
|
|
|
|
import { AssistantsPage } from './pages/Assistants';
|
|
import { KnowledgeBasePage } from './pages/KnowledgeBase';
|
|
import { HistoryPage } from './pages/History';
|
|
import { ProfilePage } from './pages/Profile';
|
|
import { DashboardPage } from './pages/Dashboard';
|
|
import { VoiceLibraryPage } from './pages/VoiceLibrary';
|
|
import { WorkflowsPage } from './pages/Workflows';
|
|
import { WorkflowEditorPage } from './pages/WorkflowEditor';
|
|
import { AutoTestPage } from './pages/AutoTest';
|
|
import { ToolLibraryPage } from './pages/ToolLibrary';
|
|
import { LLMLibraryPage } from './pages/LLMLibrary';
|
|
import { ASRLibraryPage } from './pages/ASRLibrary';
|
|
|
|
type NavItemType = {
|
|
path: string;
|
|
label: string;
|
|
icon: React.ReactNode;
|
|
children?: NavItemType[];
|
|
};
|
|
|
|
const SidebarItem: React.FC<{
|
|
item: NavItemType;
|
|
isActive: boolean;
|
|
isCollapsed: boolean;
|
|
onExpand: () => void;
|
|
}> = ({ item, isActive, isCollapsed, onExpand }) => {
|
|
const location = useLocation();
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
const hasChildren = item.children && item.children.length > 0;
|
|
|
|
// Check if any child is active to auto-expand
|
|
const isChildActive = hasChildren && item.children!.some(child => location.pathname.startsWith(child.path));
|
|
|
|
useEffect(() => {
|
|
if (isChildActive) {
|
|
setIsOpen(true);
|
|
}
|
|
}, [isChildActive]);
|
|
|
|
const handleClick = (e: React.MouseEvent) => {
|
|
if (hasChildren) {
|
|
e.preventDefault();
|
|
if (isCollapsed) {
|
|
onExpand();
|
|
setIsOpen(true);
|
|
} else {
|
|
setIsOpen(!isOpen);
|
|
}
|
|
}
|
|
};
|
|
|
|
const activeClass = "bg-primary/20 text-primary border-r-2 border-primary";
|
|
const inactiveClass = "text-muted-foreground hover:bg-muted/50 hover:text-foreground";
|
|
|
|
if (hasChildren) {
|
|
return (
|
|
<div className="space-y-1">
|
|
<div
|
|
onClick={handleClick}
|
|
className={`flex items-center justify-between px-4 py-3 rounded-md transition-all duration-300 cursor-pointer ${isChildActive ? 'text-primary' : 'text-muted-foreground hover:bg-muted/50 hover:text-foreground'} ${isCollapsed ? 'justify-center px-2' : ''}`}
|
|
title={isCollapsed ? item.label : undefined}
|
|
>
|
|
<div className={`flex items-center space-x-3 ${isCollapsed ? 'justify-center w-full' : ''}`}>
|
|
<div className="shrink-0">{item.icon}</div>
|
|
{!isCollapsed && <span className="font-medium text-sm whitespace-nowrap overflow-hidden">{item.label}</span>}
|
|
</div>
|
|
{!isCollapsed && (
|
|
<div className="shrink-0 ml-2">
|
|
{isOpen ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{!isCollapsed && isOpen && (
|
|
<div className="ml-4 space-y-1 border-l border-white/10 pl-2 animate-in slide-in-from-left-2 duration-200">
|
|
{item.children!.map(child => {
|
|
const childActive = location.pathname.startsWith(child.path);
|
|
return (
|
|
<Link
|
|
key={child.path}
|
|
to={child.path}
|
|
className={`flex items-center space-x-3 px-4 py-2 rounded-md transition-all duration-300 text-sm ${childActive ? 'text-primary bg-primary/10' : 'text-muted-foreground hover:text-foreground'}`}
|
|
>
|
|
<div className="shrink-0 opacity-70 scale-90">{child.icon}</div>
|
|
<span className="font-medium whitespace-nowrap overflow-hidden">{child.label}</span>
|
|
</Link>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Link
|
|
to={item.path}
|
|
title={isCollapsed ? item.label : undefined}
|
|
className={`flex items-center space-x-3 px-4 py-3 rounded-md transition-all duration-300 ${isActive ? activeClass : inactiveClass} ${isCollapsed ? 'justify-center space-x-0 px-2' : ''}`}
|
|
>
|
|
<div className="shrink-0">{item.icon}</div>
|
|
{!isCollapsed && <span className="font-medium text-sm animate-in fade-in duration-300 whitespace-nowrap overflow-hidden">{item.label}</span>}
|
|
</Link>
|
|
);
|
|
};
|
|
|
|
const AppLayout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
|
|
const location = useLocation();
|
|
const [isCollapsed, setIsCollapsed] = useState(false);
|
|
|
|
const navItems: NavItemType[] = [
|
|
{ path: '/', label: '首页', icon: <LayoutDashboard className="h-5 w-5" /> },
|
|
{
|
|
path: '#creation',
|
|
label: '创建助手',
|
|
icon: <Wand2 className="h-5 w-5" />,
|
|
children: [
|
|
{ path: '/assistants', label: '小助手', icon: <Bot className="h-5 w-5" /> },
|
|
{ path: '/workflows', label: '工作流', icon: <GitBranch className="h-5 w-5" /> },
|
|
]
|
|
},
|
|
{
|
|
path: '#observation',
|
|
label: '观察记录',
|
|
icon: <Activity className="h-5 w-5" />,
|
|
children: [
|
|
{ path: '/history', label: '历史记录', icon: <HistoryIcon className="h-5 w-5" /> },
|
|
]
|
|
},
|
|
{
|
|
path: '#testing',
|
|
label: '自动化测试',
|
|
icon: <Zap className="h-5 w-5" />,
|
|
children: [
|
|
{ path: '/auto-test', label: '测试助手', icon: <Bot className="h-5 w-5" /> },
|
|
]
|
|
},
|
|
{
|
|
path: '#components',
|
|
label: '组件库',
|
|
icon: <Box className="h-5 w-5" />,
|
|
children: [
|
|
{ path: '/llms', label: '模型接入', icon: <BrainCircuit className="h-5 w-5" /> },
|
|
{ path: '/asr', label: '语音识别', icon: <AudioLines className="h-5 w-5" /> },
|
|
{ path: '/voices', label: '声音资源', icon: <Mic2 className="h-5 w-5" /> },
|
|
{ path: '/knowledge', label: '知识库', icon: <Book className="h-5 w-5" /> },
|
|
{ path: '/tools', label: '工具与插件', icon: <Wrench className="h-5 w-5" /> },
|
|
]
|
|
},
|
|
{ path: '/profile', label: '个人中心', icon: <User className="h-5 w-5" /> },
|
|
];
|
|
|
|
return (
|
|
<div className="flex h-screen overflow-hidden">
|
|
{/* Sidebar with Glass effect and collapse logic */}
|
|
<aside
|
|
className={`border-r border-border/40 bg-card/30 backdrop-blur-md hidden md:flex flex-col transition-all duration-300 ease-in-out relative group ${isCollapsed ? 'w-20' : 'w-64'}`}
|
|
>
|
|
<div className={`p-6 flex items-center border-b border-border/40 overflow-hidden transition-all duration-300 ${isCollapsed ? 'justify-center px-4' : 'space-x-3'}`}>
|
|
<div className="h-10 w-10 shrink-0 bg-gradient-to-br from-cyan-400 to-blue-600 rounded-xl flex items-center justify-center shadow-[0_0_20px_rgba(6,182,212,0.5)] border border-white/10">
|
|
<Video className="h-6 w-6 text-white drop-shadow-md" />
|
|
</div>
|
|
{!isCollapsed && (
|
|
<span className="text-lg font-bold tracking-wide whitespace-nowrap bg-clip-text text-transparent bg-gradient-to-r from-white to-white/80 animate-in slide-in-from-left-2">
|
|
AI视频助手
|
|
</span>
|
|
)}
|
|
</div>
|
|
|
|
<nav className="flex-1 p-4 space-y-2 overflow-y-auto overflow-x-hidden custom-scrollbar">
|
|
{navItems.map(item => (
|
|
<SidebarItem
|
|
key={item.path}
|
|
item={item}
|
|
isCollapsed={isCollapsed}
|
|
isActive={item.path === '/' ? location.pathname === '/' : location.pathname.startsWith(item.path)}
|
|
onExpand={() => setIsCollapsed(false)}
|
|
/>
|
|
))}
|
|
</nav>
|
|
|
|
{/* Footer with Version and Collapse Button */}
|
|
<div className={`p-4 border-t border-border/40 flex items-center transition-all duration-300 ${isCollapsed ? 'justify-center' : 'justify-between'}`}>
|
|
{!isCollapsed && (
|
|
<span className="text-[10px] text-muted-foreground font-mono opacity-60 animate-in fade-in">
|
|
SYSTEM v1.0
|
|
</span>
|
|
)}
|
|
<button
|
|
onClick={() => setIsCollapsed(!isCollapsed)}
|
|
title={isCollapsed ? "展开边栏" : "收起边栏"}
|
|
className={`p-1.5 rounded-md hover:bg-white/5 text-muted-foreground hover:text-primary transition-all ${isCollapsed ? '' : 'ml-2'}`}
|
|
>
|
|
{isCollapsed ? <PanelLeftOpen className="h-4 w-4" /> : <PanelLeftClose className="h-4 w-4" />}
|
|
</button>
|
|
</div>
|
|
</aside>
|
|
|
|
{/* Main Content */}
|
|
<main className="flex-1 flex flex-col overflow-hidden relative bg-background">
|
|
<header className="h-16 border-b border-border/40 flex items-center px-6 bg-card/30 backdrop-blur-md md:hidden space-x-3">
|
|
<div className="h-8 w-8 bg-gradient-to-br from-cyan-400 to-blue-600 rounded-lg flex items-center justify-center shadow-lg">
|
|
<Video className="h-5 w-5 text-white" />
|
|
</div>
|
|
<span className="font-bold text-lg whitespace-nowrap text-white">AI视频助手</span>
|
|
</header>
|
|
<div className="flex-1 overflow-auto p-2 md:p-4 transition-all duration-300">
|
|
{children}
|
|
</div>
|
|
</main>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const App: React.FC = () => {
|
|
return (
|
|
<Router>
|
|
<AppLayout>
|
|
<Routes>
|
|
<Route path="/" element={<DashboardPage />} />
|
|
<Route path="/assistants" element={<AssistantsPage />} />
|
|
<Route path="/voices" element={<VoiceLibraryPage />} />
|
|
<Route path="/llms" element={<LLMLibraryPage />} />
|
|
<Route path="/asr" element={<ASRLibraryPage />} />
|
|
<Route path="/knowledge" element={<KnowledgeBasePage />} />
|
|
<Route path="/tools" element={<ToolLibraryPage />} />
|
|
<Route path="/history" element={<HistoryPage />} />
|
|
<Route path="/workflows" element={<WorkflowsPage />} />
|
|
<Route path="/workflows/new" element={<WorkflowEditorPage />} />
|
|
<Route path="/workflows/edit/:id" element={<WorkflowEditorPage />} />
|
|
<Route path="/auto-test" element={<AutoTestPage />} />
|
|
<Route path="/profile" element={<ProfilePage />} />
|
|
</Routes>
|
|
</AppLayout>
|
|
</Router>
|
|
);
|
|
};
|
|
|
|
export default App;
|