145 lines
3.7 KiB
TypeScript
145 lines
3.7 KiB
TypeScript
import {
|
|
DeploymentUnitOutlined,
|
|
InfoCircleOutlined,
|
|
MoneyCollectOutlined,
|
|
UnorderedListOutlined,
|
|
} from '@ant-design/icons'
|
|
import {type AppItemProps, ProLayout} from '@ant-design/pro-components'
|
|
import {ConfigProvider} from 'antd'
|
|
import {dateFormat} from 'licia'
|
|
import React, {useMemo} from 'react'
|
|
import {NavLink, Outlet, useLocation} from 'react-router'
|
|
import styled from 'styled-components'
|
|
|
|
const ProLayoutDiv = styled.div`
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 0;
|
|
margin: 0;
|
|
|
|
.ant-menu-sub > .ant-menu-item {
|
|
//padding-left: 28px !important;
|
|
}
|
|
`
|
|
const apps: AppItemProps[] = []
|
|
|
|
const menus = {
|
|
routes: [
|
|
{
|
|
path: '/',
|
|
name: '概览',
|
|
icon: <InfoCircleOutlined/>,
|
|
routes: [
|
|
{
|
|
path: '/overview',
|
|
name: '概览',
|
|
icon: <InfoCircleOutlined/>,
|
|
},
|
|
{
|
|
path: '/stock',
|
|
name: '股票',
|
|
icon: <MoneyCollectOutlined/>,
|
|
}, {
|
|
path: '/task',
|
|
name: '任务',
|
|
icon: <UnorderedListOutlined/>,
|
|
routes: [
|
|
{
|
|
path: '/task/list',
|
|
name: '任务列表',
|
|
},
|
|
{
|
|
path: '/task/template/list',
|
|
name: '任务模板',
|
|
},
|
|
{
|
|
path: '/task/schedule/list',
|
|
name: '定时任务',
|
|
},
|
|
],
|
|
},
|
|
{
|
|
path: '/test',
|
|
name: '测试',
|
|
icon: <DeploymentUnitOutlined/>,
|
|
},
|
|
],
|
|
},
|
|
],
|
|
}
|
|
|
|
const Root: React.FC = () => {
|
|
const location = useLocation()
|
|
const currentYear = useMemo(() => dateFormat(new Date(), 'yyyy'), [])
|
|
return (
|
|
<ProLayoutDiv>
|
|
<ProLayout
|
|
collapsed={false}
|
|
collapsedButtonRender={() => <></>}
|
|
siderWidth={180}
|
|
token={{
|
|
colorTextAppListIcon: '#dfdfdf',
|
|
colorTextAppListIconHover: '#ffffff',
|
|
header: {
|
|
colorBgHeader: '#292f33',
|
|
colorHeaderTitle: '#ffffff',
|
|
colorTextMenu: '#dfdfdf',
|
|
colorTextMenuSecondary: '#dfdfdf',
|
|
colorTextMenuSelected: '#ffffff',
|
|
colorTextMenuActive: '#ffffff',
|
|
colorBgMenuItemSelected: '#22272b',
|
|
colorTextRightActionsItem: '#dfdfdf',
|
|
},
|
|
pageContainer: {
|
|
paddingBlockPageContainerContent: 0,
|
|
paddingInlinePageContainerContent: 0,
|
|
marginBlockPageContainerContent: 0,
|
|
marginInlinePageContainerContent: 0,
|
|
},
|
|
}}
|
|
appList={apps}
|
|
breakpoint={false}
|
|
disableMobile={true}
|
|
logo={<img src="icon.png" alt="logo"/>}
|
|
title="金钱豹"
|
|
route={menus}
|
|
location={{pathname: location.pathname}}
|
|
menu={{type: 'sub'}}
|
|
menuItemRender={(item, defaultDom) =>
|
|
<NavLink to={item.path || '/'}>{defaultDom}</NavLink>
|
|
}
|
|
fixSiderbar={true}
|
|
layout="side"
|
|
splitMenus={true}
|
|
style={{minHeight: '100vh'}}
|
|
contentStyle={{backgroundColor: 'white', padding: '10px 10px 10px 20px'}}
|
|
menuFooterRender={props => {
|
|
return (
|
|
<div className="text-xs text-center" style={{userSelect: 'none', msUserSelect: 'none'}}>
|
|
{props?.collapsed
|
|
? undefined
|
|
: <div>© 2023-{currentYear} 兰缘小妖</div>}
|
|
</div>
|
|
)
|
|
}}
|
|
>
|
|
<ConfigProvider
|
|
theme={{
|
|
components: {
|
|
Card: {
|
|
bodyPadding: 0,
|
|
bodyPaddingSM: 0,
|
|
},
|
|
},
|
|
}}
|
|
>
|
|
<Outlet/>
|
|
</ConfigProvider>
|
|
</ProLayout>
|
|
</ProLayoutDiv>
|
|
)
|
|
}
|
|
|
|
export default Root
|