feat: add base layout

This commit is contained in:
2025-08-19 22:47:32 +08:00
parent ad91a2f54d
commit 2edf8753a7
8 changed files with 819 additions and 4 deletions

View File

@@ -1,6 +1,73 @@
import { Avatar, Layout, Menu } from '@arco-design/web-react';
import {
IconApps,
IconBulb,
IconFire,
IconMenuFold,
IconMenuUnfold,
IconRobot,
IconSafe,
IconUser,
} from '@arco-design/web-react/icon';
import { useState } from 'react';
import Logo from '@assets/images/logo.svg?react';
import { Outlet } from 'react-router';
function Home() {
return <div>Home</div>;
const [collapsed, setCollapsed] = useState(false);
return (
<Layout className="h-screen w-full">
<Layout.Sider
collapsible
onCollapse={setCollapsed}
trigger={collapsed ? <IconMenuUnfold /> : <IconMenuFold />}
>
<div className="flex flex-row items-center justify-center px-2 py-3">
<Logo />
{!collapsed && <h2 className="ml-4 text-xl font-medium">Foka CI</h2>}
</div>
<Menu
className="flex-1"
defaultOpenKeys={['0']}
defaultSelectedKeys={['0_1']}
>
<Menu.Item key="0">
<IconApps />
Navigation 1
</Menu.Item>
<Menu.Item key="1">
<IconRobot />
Navigation 2
</Menu.Item>
<Menu.Item key="2">
<IconBulb />
Navigation 3
</Menu.Item>
<Menu.Item key="3">
<IconSafe />
Navigation 4
</Menu.Item>
<Menu.Item key="4">
<IconFire />
Navigation 5
</Menu.Item>
</Menu>
</Layout.Sider>
<Layout>
<Layout.Header className="h-14 border-b-gray-100 border-b-[1px]">
<div className="flex items-center justify-end px-4 h-full">
<Avatar>
<IconUser />
</Avatar>
</div>
</Layout.Header>
<Layout.Content>
<Outlet />
</Layout.Content>
</Layout>
</Layout>
);
}
export default Home;