97 lines
3.1 KiB
TypeScript
97 lines
3.1 KiB
TypeScript
import React from 'react';
|
|
import { Outlet, useSearchParams } from 'react-router-dom';
|
|
import { NavItem } from '../components/NavItem';
|
|
import { UserOutlined } from '@ant-design/icons';
|
|
import { Button, Dropdown } from 'antd';
|
|
import { useUserStore } from '../store/user';
|
|
import { useLogout } from '../api/model/user';
|
|
import { ColorSchemeSwitcher } from '../components/ColorSchemeSwitcher';
|
|
import { version } from '../../shared';
|
|
|
|
export const Layout: React.FC = React.memo(() => {
|
|
const [params] = useSearchParams();
|
|
const workspaces = useUserStore((state) => {
|
|
const userInfo = state.info;
|
|
if (userInfo) {
|
|
return userInfo.workspaces.map((w) => ({
|
|
id: w.workspace.id,
|
|
name: w.workspace.name,
|
|
role: w.role,
|
|
current: userInfo.currentWorkspace?.id === w.workspace.id,
|
|
}));
|
|
}
|
|
|
|
return [];
|
|
});
|
|
const logout = useLogout();
|
|
const showHeader = !params.has('hideHeader');
|
|
|
|
return (
|
|
<div className="flex flex-col h-full dark:bg-gray-900 dark:text-gray-300">
|
|
{showHeader && (
|
|
<div className="flex items-center bg-gray-100 dark:bg-gray-800 px-4 sticky top-0 z-20">
|
|
<div className="px-2 mr-10 font-bold flex items-center">
|
|
<img src="/icon.svg" className="w-10 h-10 mr-2" />
|
|
<span className="text-xl dark:text-gray-200">Tianji</span>
|
|
</div>
|
|
<div className="flex gap-8">
|
|
<NavItem to="/dashboard" label="Dashboard" />
|
|
<NavItem to="/monitor" label="Monitor" />
|
|
<NavItem to="/website" label="Website" />
|
|
<NavItem to="/servers" label="Servers" />
|
|
<NavItem to="/settings" label="Settings" />
|
|
</div>
|
|
|
|
<div className="flex-1" />
|
|
|
|
<div className="flex gap-2">
|
|
<ColorSchemeSwitcher />
|
|
|
|
<Dropdown
|
|
placement="bottomRight"
|
|
menu={{
|
|
items: [
|
|
{
|
|
key: 'workspaces',
|
|
label: 'Workspaces',
|
|
children: workspaces.map((w) => ({
|
|
key: w.id,
|
|
label: `${w.name}${w.current ? '(current)' : ''}`,
|
|
disabled: w.current,
|
|
})),
|
|
},
|
|
{
|
|
key: 'logout',
|
|
label: 'Logout',
|
|
onClick: () => {
|
|
logout();
|
|
},
|
|
},
|
|
{
|
|
type: 'divider',
|
|
},
|
|
{
|
|
key: 'version',
|
|
label: `v${version}`,
|
|
disabled: true,
|
|
},
|
|
],
|
|
}}
|
|
>
|
|
<Button shape="circle" size="large" icon={<UserOutlined />} />
|
|
</Dropdown>
|
|
</div>
|
|
</div>
|
|
)}
|
|
<div className="flex-1 w-full overflow-hidden">
|
|
<div className="h-full px-1 sm:px-4 overflow-auto">
|
|
<div className="max-w-7xl m-auto">
|
|
<Outlet />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
});
|
|
Layout.displayName = 'Layout';
|