134 lines
6.6 KiB
TypeScript
134 lines
6.6 KiB
TypeScript
import {type AppItemProps, ProLayout} from '@ant-design/pro-components'
|
|
import {ConfigProvider} from 'antd'
|
|
import {dateFormat} from 'licia'
|
|
import React, {useMemo, useState} from 'react'
|
|
import {Outlet, useLocation, useNavigate} from 'react-router'
|
|
import styled from 'styled-components'
|
|
import {menus} from '../route.tsx'
|
|
|
|
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 defaultAppIcon =
|
|
<img
|
|
src={'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAMAAAC7IEhfAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAMAUExURUdwTBR20EyHx1iq5EWJ1hNyy0mR1EhzwnbB/8P5/Fx/vVuj5zyO4lCY102P0L3u/3K88dz4/8v1/0fW/jLh/013ujN4wBliuEuEy0FrqT13wFmCvkaH0GSLyBVVqe38/0il4FKu7crr/eL3/7Ls/zd3t1WN1TZcnTloojx6whpYpTdfoDVwtVeS1WeOyiNhsTFyuy50wHCPxDFgqLjK5G2Ow2Gy5ylpvB9uxA5x03W/71Wh4E2U2tr2/i6C3G7J+Gex7KTI8eb9/cbz/yC+/srl++P7/Znf+MPv/cn3/rz6/dL8/2fe/8v+/s/6/knN87f5/jx5uRZtwjRppU6I1liM2Bhcrmyl2kZ5uA9vzjd0wj95yjVstqze9hiD2zOH1kqv7Wqv5K7S7LLn/YfT+sfp/bPf+4jb/YbX+735/SjQ/T7J+VjV9rTs+0ns/6Dk/mPJ7eD9/b/8/Q9YxA5Zxw5Zwg5dwg5byhdn0kSO2xFezg5gwg1XwRBjwkqW4EeT3kuY20mV2BBVtg5avxFoxQ9Yu0+g3xJYslWi5h2q9SKA4AtTwAxjzUGN2UiN0VOm4yKj8NX7/0WQ3RFtyUaR1h95zSOc706J0Bt34VCi5yqw9F6s6SOI5Bx02h2M6Rh13SCX7k2c3E6a4lCd5EeQ2iVtyCJ54BVt3ROV8x+0+jS9+hGq+Ra0/WK37sPy/iOR6R1w2A5p0y9nrjJ/1EaO1yV1yDt+zBaJ4hF83FuJyg5nyhei9hJ96BN35ByV5ymq8S151muu5UCr6hzE/xS+/47h/3/r/xyG5SKV6yJ43BlswBJivA5z2A9duw5s1C590CZXpDVvuhec9BGM7xJQrxKE61yo4DOF4DeZ64jG8bbp/h/Q/j2F0xpr1xliyROA4CRst1mc10d8whNQqDqb3Sig5qrh/qLW9iZ/5UeY5pDU9UWf6J7O9oju/mDV/aXp/orj/6P7/4z3/2Pr/iLa/kaDxnuw57rf9ZfW+2Sd5G3X/7LW9zyR51TI+Dao7Zno//A+0MwAAADpdFJOUwD7Lv/+/v4CAQIK/v7+/P7+b/7+/iKh/f5LjBv8z/4d/v5cNf6A5piF/Pts9PST/tP+Qd0Oc/72Pf5B/Pv0/vv7zqD6/4qU+5JjlCv7ff79/lz628SK/pmm+/5cnh/+/vPht/r+pPKX44z7+/z7/P7+wNL////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////+///////////////////////+1awirQAAA+BJREFUOMtjYCAXcMIAAVW4OKjKgJjDW8nXyytT0NOKCyjAgUudt29RwMdPb48dO/b2aEa6MkQvpjrlQqCqz3ki/j4+2VnCv44+S5XHVAm0xHPixHXuOSIiX4TfHeo87OJin/IjTYmBgwNdndvEibkF/sIiX26/+7f6yJo1K/fPtL/53BXDPKeJQkLvPx87Knz79qzOI2tWr959acFaAYE3rii2cwDVOQutU8k/+uHv4cNrQMpWrFgxTXHtWoc3gkgqORkEJzqvW3fr/f8Paye4rFzZufvSisuXr95QVJw9W+C3MlwlB4O87Tp+fn6VV2sVgOo6wequ7tkz4zWP3QHrm45IBroJJd/if37w0CygaZ0Tpi1YMO/qnr17b7yeMePFAZufSlAjQQbeyle5qbBq1apZIGUn1s87DlS3/DrPsj8vr/McdES48Lv7q4NPVq3avx+sbP2cOV0zZsxfftfuZcdsbm6Bb1YM7BATk64pPHk6C6hqGljVnK6uZSfnzl2+bObMmR3csx0OhkIUMpgkHgKatW/fvO3HjwMVdXWdPHly7oYNd3mA6jo6uLm5Q0ABDcSxCU/37du+/f79HfPnz507dwNQ0Ya7dyuudyzu6Fi8eNGiOjUukEp2BqZDcXE7dpw5c+bcuY0bK+CgbtEioLK6+kmVLKIQhRZP4iwtgWp6gKCqpwoCyivqQACorLeXhQnkSKDC83a7dgEVlfeUw0BJScm9SfVAAFTHwjIdqpBpafyuspISIEICxSWV9ZMmLQGr0wVbzcEgbb518+YDFcWlxUAAUgMGNXfqKisrl1QCFaqZgL3NwGkgzsbb2LC5u7sYAUprWu/UL2HZto1FZrosJGbYGWIMbdjYpjRuvtddU1MDVAMB3U3bljZdubJNZqceJMDZGSQv8vX1TZnS2HCguwaqqrS5ubm1CQiuRE3faQSNGQYu469glVMalnZ315SBAUghUGX7Y/3psrD0yM6gvQmoEGh5Y0Pv+Xs1pdUQlUCF7e2PzXeawgwEGQm0nI2tsaFhYdvC3qVl1WClZ1vb2+XkHskisgLQlRc0IeoWtrUxn2+urT5dXVt99ixQ4UWEC8EqNS5o8jaClLX191bXQsDps+1hWo+QLAYnIfULMrxAdf39s6dWt4BB7enT4lqb9Bg40DK2+iZea2tmZub+qbsmA0HLqZZT4vqbpBgYMIoKbZ2H166Z1U9mhYKgUw+CJdHVgd0pGvHwmllvJCMYsJ56oKPBheI+hEoGpnDdrVungsBWQwNVaQas6oCWAIWlo6WkxMTEVAOZQFo5cJW57Mgm4FYGMRUGyK0tAGzv0vrmaa6xAAAAAElFTkSuQmCC'}
|
|
alt=""
|
|
/>
|
|
const apps: AppItemProps[] = [
|
|
{
|
|
icon: 'http://132.121.223.12:7001/static/webssh/favicon2.ico',
|
|
title: '运营数据汇聚平台',
|
|
desc: '企业全融合数字化平台',
|
|
url: 'http://132.121.223.12:7001/index.html/#/login',
|
|
},
|
|
{
|
|
icon: 'http://132.126.207.124:8686/udal-manager/static/favicon.ico',
|
|
title: 'CSV-HUDI处理平台',
|
|
desc: 'Hudi 批量割接、稽核任务管理平台',
|
|
url: 'http://132.126.207.124:8686/udal-manager/',
|
|
},
|
|
{
|
|
icon: defaultAppIcon,
|
|
title: '汇聚平台辅助工具',
|
|
desc: '辅助工具，用于帮助运营工作，不断改进中',
|
|
url: 'http://132.121.204.100:38080/tools/#/',
|
|
},
|
|
{
|
|
icon: defaultAppIcon,
|
|
title: 'B12-Yarn',
|
|
desc: 'B12集群Yarn页面',
|
|
url: 'http://132.126.207.125:8088/cluster/scheduler',
|
|
},
|
|
]
|
|
|
|
const App: React.FC = () => {
|
|
const navigate = useNavigate()
|
|
const location = useLocation()
|
|
const [collapsed, setCollapsed] = useState<boolean>(false)
|
|
const currentYear = useMemo(() => dateFormat(new Date(), 'yyyy'), [])
|
|
return (
|
|
<ProLayoutDiv>
|
|
<ProLayout
|
|
collapsed={collapsed}
|
|
onCollapse={setCollapsed}
|
|
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="Hudi 服务总台"
|
|
route={menus}
|
|
location={{pathname: location.pathname}}
|
|
menu={{type: 'sub'}}
|
|
menuItemRender={(item, defaultDom) => {
|
|
return (
|
|
<div onClick={() => navigate(item.path || '/')}>
|
|
{/*<span className="align-center">{item.icon}</span>*/}
|
|
{/*<span className="ml-2">{item.name}</span>*/}
|
|
{defaultDom}
|
|
</div>
|
|
)
|
|
}}
|
|
fixSiderbar={true}
|
|
layout="mix"
|
|
splitMenus={true}
|
|
style={{minHeight: '100vh'}}
|
|
contentStyle={{backgroundColor: 'white', padding: '10px 10px 10px 20px'}}
|
|
menuFooterRender={props => {
|
|
return (
|
|
<div className="text-sm 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 App
|