1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
| 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,
| }}
| bodyStyle={{
| 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,
| }}
| >
| 欢迎使用 Ant Design Pro
| </div>
| <p
| style={{
| fontSize: '14px',
| color: token.colorTextSecondary,
| lineHeight: '22px',
| marginTop: 16,
| marginBottom: 32,
| width: '65%',
| }}
| >
| Ant Design Pro 是一个整合了 umi，Ant Design 和 ProComponents
| 的脚手架方案。致力于在设计规范和基础组件的基础上，继续向上构建，提炼出典型模板/业务组件/配套设计资源，进一步提升企业级中后台产品设计研发过程中的『用户』和『设计者』的体验。
| </p>
| <div
| style={{
| display: 'flex',
| flexWrap: 'wrap',
| gap: 16,
| }}
| >
| <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>
| );
| };
|
| export default Welcome;
|
|
