79 lines
2.5 KiB
TypeScript
79 lines
2.5 KiB
TypeScript
import {Avatar, Dropdown, Layout, Nav} from "@douyinfe/semi-ui"
|
|
import React from "react";
|
|
|
|
import AppLogo from "@/assets/AppLogo.tsx";
|
|
|
|
const {Header, Footer, Content} = Layout;
|
|
|
|
export const HeaderUserAvatar = () => {
|
|
return (<Dropdown
|
|
position={'bottomRight'}
|
|
render={
|
|
<Dropdown.Menu>
|
|
<Dropdown.Item>个人资料</Dropdown.Item>
|
|
<Dropdown.Item>更新密码</Dropdown.Item>
|
|
<Dropdown.Divider/>
|
|
<Dropdown.Item>退出</Dropdown.Item>
|
|
</Dropdown.Menu>
|
|
}
|
|
>
|
|
<Avatar color="orange" size="small">YJ</Avatar>
|
|
</Dropdown>)
|
|
}
|
|
type CommonHeaderProps = {
|
|
children?: React.ReactNode;
|
|
title?: React.ReactNode;
|
|
rightExtra?: React.ReactNode;
|
|
}
|
|
export const CommonHeader: React.FC<CommonHeaderProps> = ({children, title, rightExtra}) => {
|
|
|
|
return (<Header style={{backgroundColor: 'var(--semi-color-bg-1)', position: 'sticky', top: 0, zIndex: 100}}>
|
|
<div>
|
|
<Nav mode="horizontal" defaultSelectedKeys={['Home']}>
|
|
<Nav.Header>
|
|
<AppLogo style={{fontSize: 36}}/>
|
|
</Nav.Header>
|
|
<div className={'align-center'} style={{color: 'var(--semi-color-text-2)',}}>
|
|
<span
|
|
style={{
|
|
marginRight: '24px',
|
|
color: 'var(--semi-color-text-0)',
|
|
fontWeight: '600',
|
|
fontSize: '1.2em'
|
|
}}
|
|
>{title}</span>
|
|
{children}
|
|
</div>
|
|
<Nav.Footer>
|
|
{rightExtra}
|
|
|
|
<HeaderUserAvatar/>
|
|
</Nav.Footer>
|
|
</Nav>
|
|
</div>
|
|
</Header>)
|
|
}
|
|
|
|
|
|
type LayoutProps = {
|
|
header: React.ReactNode
|
|
children: React.ReactNode
|
|
}
|
|
export const BaseLayout: React.FC<LayoutProps> = ({children, header}) => {
|
|
return (<Layout>
|
|
{header}
|
|
<Content style={{padding: '15px', backgroundColor: 'var(--semi-color-fill-0,#fafafa)',}}>
|
|
{children}
|
|
</Content>
|
|
<Footer
|
|
style={{
|
|
textAlign: 'center',
|
|
padding: '20px',
|
|
color: 'var(--semi-color-text-2)',
|
|
backgroundColor: 'rgba(var(--semi-color-bg-0), 1)',
|
|
}}
|
|
>
|
|
<span>Copyright © 2024 星图比特. All Rights Reserved. </span>
|
|
</Footer>
|
|
</Layout>)
|
|
} |