167 lines
4.5 KiB
TypeScript
167 lines
4.5 KiB
TypeScript
import { PageContainer } from '@ant-design/pro-components';
|
||
import { useModel } from '@umijs/max';
|
||
import { Card, theme } from 'antd';
|
||
import React from 'react';
|
||
|
||
/**
|
||
* 每个单独的卡片，为了复用样式抽成了组件
|
||
* @param param0
|
||
* @returns
|
||
*/
|
||
const InfoCard: React.FC<{
|
||
title: string;
|
||
index: number;
|
||
desc: string;
|
||
href: string;
|
||
}> = ({ title, href, index, desc }) => {
|
||
const { useToken } = theme;
|
||
|
||
const { token } = useToken();
|
||
|
||
return (
|
||
<div
|
||
style={{
|
||
backgroundColor: token.colorBgContainer,
|
||
boxShadow: token.boxShadow,
|
||
borderRadius: '8px',
|
||
fontSize: '14px',
|
||
color: token.colorTextSecondary,
|
||
lineHeight: '22px',
|
||
padding: '16px 19px',
|
||
minWidth: '220px',
|
||
flex: 1,
|
||
}}
|
||
>
|
||
<div
|
||
style={{
|
||
display: 'flex',
|
||
gap: '4px',
|
||
alignItems: 'center',
|
||
}}
|
||
>
|
||
<div
|
||
style={{
|
||
width: 48,
|
||
height: 48,
|
||
lineHeight: '22px',
|
||
backgroundSize: '100%',
|
||
textAlign: 'center',
|
||
padding: '8px 16px 16px 12px',
|
||
color: '#FFF',
|
||
fontWeight: 'bold',
|
||
backgroundImage:
|
||
"url('https://gw.alipayobjects.com/zos/bmw-prod/daaf8d50-8e6d-4251-905d-676a24ddfa12.svg')",
|
||
}}
|
||
>
|
||
{index}
|
||
</div>
|
||
<div
|
||
style={{
|
||
fontSize: '16px',
|
||
color: token.colorText,
|
||
paddingBottom: 8,
|
||
}}
|
||
>
|
||
{title}
|
||
</div>
|
||
</div>
|
||
<div
|
||
style={{
|
||
fontSize: '14px',
|
||
color: token.colorTextSecondary,
|
||
textAlign: 'justify',
|
||
lineHeight: '22px',
|
||
marginBottom: 8,
|
||
}}
|
||
>
|
||
{desc}
|
||
</div>
|
||
<a href={href} target="_blank" rel="noreferrer">
|
||
了解更多 {'>'}
|
||
</a>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
const Welcome: React.FC = () => {
|
||
const { token } = theme.useToken();
|
||
const { initialState } = useModel('@@initialState');
|
||
return (
|
||
<PageContainer>
|
||
<Card
|
||
style={{
|
||
borderRadius: 8,
|
||
}}
|
||
styles={{
|
||
body: {
|
||
|
||
backgroundImage:
|
||
initialState?.settings?.navTheme === 'realDark'
|
||
? 'background-image: linear-gradient(75deg, #1A1B1F 0%, #191C1F 100%)'
|
||
: 'background-image: linear-gradient(75deg, #FBFDFF 0%, #F5F7FF 100%)',
|
||
}
|
||
}}
|
||
>
|
||
<div
|
||
style={{
|
||
backgroundPosition: '100% -30%',
|
||
backgroundRepeat: 'no-repeat',
|
||
backgroundSize: '274px auto',
|
||
backgroundImage:
|
||
"url('https://gw.alipayobjects.com/mdn/rms_a9745b/afts/img/A*BuFmQqsB2iAAAAAAAAAAAAAAARQnAQ')",
|
||
}}
|
||
>
|
||
<div
|
||
style={{
|
||
fontSize: '20px',
|
||
color: token.colorTextHeading,
|
||
}}
|
||
>
|
||
欢迎使用 LAITool Admin
|
||
</div>
|
||
<p
|
||
style={{
|
||
fontSize: '14px',
|
||
color: token.colorTextSecondary,
|
||
lineHeight: '22px',
|
||
marginTop: 16,
|
||
marginBottom: 32,
|
||
width: '65%',
|
||
}}
|
||
>
|
||
LAITool Admin 是一个基于 React 中后台解决方案，基于 Ant Design 设计体系，管理LAITool软件中的各种管理功能。
|
||
</p>
|
||
<div
|
||
style={{
|
||
display: 'flex',
|
||
flexWrap: 'wrap',
|
||
gap: 16,
|
||
}}
|
||
>
|
||
<InfoCard
|
||
index={1}
|
||
href=""
|
||
title="了解 LAITool"
|
||
desc="LaiTool 是一个完善的，零基础，零配置邀请的AI小说推文工具，不止于此，还有更多功能等你来探索。"
|
||
/>
|
||
{/* <InfoCard
|
||
index={2}
|
||
title="了解 ant design"
|
||
href="https://ant.design"
|
||
desc="antd 是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。"
|
||
/>
|
||
<InfoCard
|
||
index={3}
|
||
title="了解 Pro Components"
|
||
href="https://procomponents.ant.design"
|
||
desc="ProComponents 是一个基于 Ant Design 做了更高抽象的模板组件，以 一个组件就是一个页面为开发理念，为中后台开发带来更好的体验。"
|
||
/> */}
|
||
</div>
|
||
</div>
|
||
</Card>
|
||
</PageContainer>
|
||
);
|
||
};
|
||
|
||
export default Welcome;
|