45 lines
1.5 KiB
TypeScript
45 lines
1.5 KiB
TypeScript
import { Routes, Route, Link, useLocation } from 'react-router-dom';
|
|
import ModelPage from './pages/ModelPage';
|
|
import { SidebarProvider, Sidebar, SidebarContent, SidebarMenu, SidebarMenuItem, SidebarMenuButton } from '@/components/ui/sidebar';
|
|
import { Home, Users } from 'lucide-react';
|
|
|
|
const menu = [
|
|
{ path: '/', label: '首页', icon: <Home className='mr-2' /> },
|
|
{ path: '/models', label: '模特维护', icon: <Users className='mr-2' /> },
|
|
];
|
|
|
|
function App() {
|
|
const location = useLocation();
|
|
return (
|
|
<SidebarProvider>
|
|
<div className='flex min-h-screen min-w-screen'>
|
|
<Sidebar className='h-screen'>
|
|
<SidebarContent>
|
|
<div className='text-xl font-bold mb-8 px-4 pt-4'>Outfit 管理</div>
|
|
<SidebarMenu>
|
|
{menu.map(item => (
|
|
<SidebarMenuItem key={item.path}>
|
|
<SidebarMenuButton asChild isActive={location.pathname === item.path}>
|
|
<Link to={item.path} className='flex items-center'>
|
|
{item.icon}
|
|
<span>{item.label}</span>
|
|
</Link>
|
|
</SidebarMenuButton>
|
|
</SidebarMenuItem>
|
|
))}
|
|
</SidebarMenu>
|
|
</SidebarContent>
|
|
</Sidebar>
|
|
<main className='flex-1 p-8'>
|
|
<Routes>
|
|
<Route path='/' element={<div>首页内容</div>} />
|
|
<Route path='/models' element={<ModelPage />} />
|
|
</Routes>
|
|
</main>
|
|
</div>
|
|
</SidebarProvider>
|
|
);
|
|
}
|
|
|
|
export default App;
|