|
|
|
@ -1,46 +1,151 @@ |
|
|
|
import { PageContainer } from '@ant-design/pro-components'; |
|
|
|
import { FormattedMessage, useIntl } from '@umijs/max'; |
|
|
|
import { Alert, Card, Typography } from 'antd'; |
|
|
|
import { Card } from 'antd'; |
|
|
|
import React from 'react'; |
|
|
|
import styles from './Welcome.less'; |
|
|
|
|
|
|
|
const CodePreview: React.FC = ({ children }) => ( |
|
|
|
<pre className={styles.pre}> |
|
|
|
<code> |
|
|
|
<Typography.Text copyable>{children}</Typography.Text> |
|
|
|
</code> |
|
|
|
</pre> |
|
|
|
); |
|
|
|
/** |
|
|
|
* 每个单独的卡片，为了复用样式抽成了组件 |
|
|
|
* @param param0 |
|
|
|
* @returns |
|
|
|
*/ |
|
|
|
const InfoCard: React.FC<{ |
|
|
|
title: string; |
|
|
|
index: number; |
|
|
|
desc: string; |
|
|
|
href: string; |
|
|
|
}> = ({ title, href, index, desc }) => { |
|
|
|
return ( |
|
|
|
<div |
|
|
|
style={{ |
|
|
|
backgroundColor: '#FFFFFF', |
|
|
|
boxShadow: '0 2px 4px 0 rgba(35,49,128,0.02), 0 4px 8px 0 rgba(49,69,179,0.02)', |
|
|
|
borderRadius: '8px', |
|
|
|
fontSize: '14px', |
|
|
|
color: 'rgba(0,0,0,0.65)', |
|
|
|
textAlign: 'justify', |
|
|
|
lineHeight: ' 22px', |
|
|
|
padding: '16px 19px', |
|
|
|
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: 'rgba(0, 0, 0, 0.85)', |
|
|
|
paddingBottom: 8, |
|
|
|
}} |
|
|
|
> |
|
|
|
{title} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div |
|
|
|
style={{ |
|
|
|
fontSize: '14px', |
|
|
|
color: 'rgba(0,0,0,0.65)', |
|
|
|
textAlign: 'justify', |
|
|
|
lineHeight: '22px', |
|
|
|
marginBottom: 8, |
|
|
|
}} |
|
|
|
> |
|
|
|
{desc} |
|
|
|
</div> |
|
|
|
<a href={href} target="_blank" rel="noreferrer"> |
|
|
|
了解更多 {'>'} |
|
|
|
</a> |
|
|
|
</div> |
|
|
|
); |
|
|
|
}; |
|
|
|
|
|
|
|
const Welcome: React.FC = () => { |
|
|
|
const intl = useIntl(); |
|
|
|
|
|
|
|
return ( |
|
|
|
<PageContainer> |
|
|
|
<Card> |
|
|
|
<Alert |
|
|
|
message={intl.formatMessage({ |
|
|
|
id: 'pages.welcome.alertMessage', |
|
|
|
defaultMessage: 'Faster and stronger heavy-duty components have been released.', |
|
|
|
})} |
|
|
|
type="success" |
|
|
|
showIcon |
|
|
|
banner |
|
|
|
<Card |
|
|
|
style={{ |
|
|
|
borderRadius: 8, |
|
|
|
}} |
|
|
|
bodyStyle={{ |
|
|
|
backgroundImage: |
|
|
|
'radial-gradient(circle at 97% 10%, #EBF2FF 0%, #F5F8FF 28%, #EBF1FF 124%)', |
|
|
|
}} |
|
|
|
> |
|
|
|
<div |
|
|
|
style={{ |
|
|
|
margin: -12, |
|
|
|
marginBottom: 24, |
|
|
|
backgroundPosition: '100% -30%', |
|
|
|
backgroundRepeat: 'no-repeat', |
|
|
|
backgroundSize: '274px auto', |
|
|
|
backgroundImage: |
|
|
|
"url('https://gw.alipayobjects.com/mdn/rms_a9745b/afts/img/A*BuFmQqsB2iAAAAAAAAAAAAAAARQnAQ')", |
|
|
|
}} |
|
|
|
/> |
|
|
|
<Typography.Text strong> |
|
|
|
<a |
|
|
|
href="https://procomponents.ant.design/components/table" |
|
|
|
rel="noopener noreferrer" |
|
|
|
target="__blank" |
|
|
|
> |
|
|
|
<div |
|
|
|
style={{ |
|
|
|
fontSize: '20px', |
|
|
|
color: '#1A1A1A', |
|
|
|
}} |
|
|
|
> |
|
|
|
欢迎使用 Ant Design Pro |
|
|
|
</div> |
|
|
|
<p |
|
|
|
style={{ |
|
|
|
fontSize: '14px', |
|
|
|
color: 'rgba(0,0,0,0.65)', |
|
|
|
lineHeight: '22px', |
|
|
|
marginTop: 16, |
|
|
|
marginBottom: 32, |
|
|
|
width: '65%', |
|
|
|
}} |
|
|
|
> |
|
|
|
Ant Design Pro 是一个整合了 umi，Ant Design 和 ProComponents |
|
|
|
的脚手架方案。致力于在设计规范和基础组件的基础上，继续向上构建，提炼出典型模板/业务组件/配套设计资源，进一步提升企业级中后台产品设计研发过程中的『用户』和『设计者』的体验。 |
|
|
|
</p> |
|
|
|
<div |
|
|
|
style={{ |
|
|
|
display: 'flex', |
|
|
|
gap: 16, |
|
|
|
}} |
|
|
|
> |
|
|
|
<FormattedMessage id="pages.welcome.link" defaultMessage="Welcome" /> |
|
|
|
</a> |
|
|
|
</Typography.Text> |
|
|
|
<CodePreview>yarn add @ant-design/pro-components</CodePreview> |
|
|
|
<InfoCard |
|
|
|
index={1} |
|
|
|
href="https://umijs.org/docs/introduce/introduce" |
|
|
|
title="了解 umi" |
|
|
|
desc="umi 是一个可扩展的企业级前端应用框架,umi 以路由为基础的，同时支持配置式路由和约定式路由，保证路由的功能完备，并以此进行功能扩展。" |
|
|
|
/> |
|
|
|
<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> |
|
|
|
); |
|
|
|
|
期贤
4 years ago