Skip to content

Commit bd08fba

Browse files
Ohh-889Ohh-889
committed
feat: 集成演示home页面
1 parent a6a30fd commit bd08fba

File tree

8 files changed

+662
-10
lines changed

8 files changed

+662
-10
lines changed

‎src/pages/(base)/home/config.ts

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,6 @@
11
export const config = {
22
i18nKey: 'route.home',
3+
icon: 'mdi:monitor-dashboard',
4+
order: 1,
35
title: 'home'
46
};
5-
6-
export const loader = undefined;
7-
8-
export const action = undefined;
9-
10-
export const shouldRevalidate = undefined;

‎src/pages/(base)/home/index.tsx

Lines changed: 48 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,51 @@
1-
import React from 'react';
1+
import CardData from './modules/CardData';
2+
import CreativityBanner from './modules/CreativityBanner';
3+
import HeaderBanner from './modules/HeaderBanner';
4+
import LineChart from './modules/LineChart';
5+
import PieChart from './modules/PieChart';
6+
import ProjectNews from './modules/ProjectNews';
27

3-
const Index = () => {
4-
return <div>Index</div>;
8+
const Home = () => {
9+
return (
10+
<ASpace
11+
className="w-full"
12+
direction="vertical"
13+
size={[16, 16]}
14+
>
15+
<HeaderBanner />
16+
<CardData />
17+
18+
<ARow gutter={[16, 16]}>
19+
<ACol
20+
lg={14}
21+
span={24}
22+
>
23+
<LineChart />
24+
</ACol>
25+
<ACol
26+
lg={10}
27+
span={24}
28+
>
29+
<PieChart />
30+
</ACol>
31+
</ARow>
32+
33+
<ARow gutter={[16, 16]}>
34+
<ACol
35+
lg={14}
36+
span={24}
37+
>
38+
<ProjectNews />
39+
</ACol>
40+
<ACol
41+
lg={10}
42+
span={24}
43+
>
44+
<CreativityBanner />
45+
</ACol>
46+
</ARow>
47+
</ASpace>
48+
);
549
};
650

7-
export default Index;
51+
export default Home;

‎src/pages/(base)/home/modules/CardData.tsx

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
import NumberTicker from '@/components/NumberTicker';
2+
3+
interface CardDataProps {
4+
color: {
5+
end: string;
6+
start: string;
7+
};
8+
icon: string;
9+
key: string;
10+
title: string;
11+
unit: string;
12+
value: number;
13+
}
14+
15+
function getGradientColor(color: CardDataProps['color']) {
16+
return `linear-gradient(to bottom right, ${color.start}, ${color.end})`;
17+
}
18+
19+
function useGetCardData() {
20+
const { t } = useTranslation();
21+
22+
const cardData: CardDataProps[] = [
23+
{
24+
color: {
25+
end: '#b955a4',
26+
start: '#ec4786'
27+
},
28+
icon: 'ant-design:bar-chart-outlined',
29+
key: 'visitCount',
30+
title: t('page.home.visitCount'),
31+
unit: '',
32+
value: 9725
33+
},
34+
{
35+
color: {
36+
end: '#5144b4',
37+
start: '#865ec0'
38+
},
39+
icon: 'ant-design:money-collect-outlined',
40+
key: 'turnover',
41+
title: t('page.home.turnover'),
42+
unit: '$',
43+
value: 1026
44+
},
45+
{
46+
color: {
47+
end: '#719de3',
48+
start: '#56cdf3'
49+
},
50+
icon: 'carbon:document-download',
51+
key: 'downloadCount',
52+
title: t('page.home.downloadCount'),
53+
unit: '',
54+
value: 970925
55+
},
56+
{
57+
color: {
58+
end: '#f68057',
59+
start: '#fcbc25'
60+
},
61+
icon: 'ant-design:trademark-circle-outlined',
62+
key: 'dealCount',
63+
title: t('page.home.dealCount'),
64+
unit: '',
65+
value: 9527
66+
}
67+
];
68+
69+
return cardData;
70+
}
71+
72+
const CardItem = (data: CardDataProps) => {
73+
return (
74+
<ACol
75+
key={data.key}
76+
lg={6}
77+
md={12}
78+
span={24}
79+
>
80+
<div
81+
className="flex-1 rd-8px px-16px pb-4px pt-8px text-white"
82+
style={{ backgroundImage: getGradientColor(data.color) }}
83+
>
84+
<h3 className="text-16px">{data.title}</h3>
85+
<div className="flex justify-between pt-12px">
86+
<SvgIcon
87+
className="text-32px"
88+
icon={data.icon}
89+
/>
90+
<NumberTicker
91+
className="text-30px"
92+
prefix={data.unit}
93+
value={data.value}
94+
/>
95+
</div>
96+
</div>
97+
</ACol>
98+
);
99+
};
100+
101+
const CardData = () => {
102+
const data = useGetCardData();
103+
104+
return (
105+
<ACard
106+
bordered={false}
107+
className="card-wrapper"
108+
size="small"
109+
>
110+
<ARow gutter={[16, 16]}>{data.map(CardItem)}</ARow>
111+
</ACard>
112+
);
113+
};
114+
115+
export default CardData;

‎src/pages/(base)/home/modules/CreativityBanner.tsx

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
const CreativityBanner = () => {
2+
const { t } = useTranslation();
3+
4+
return (
5+
<ACard
6+
bordered={false}
7+
className="h-full flex-col-stretch card-wrapper"
8+
size="small"
9+
styles={{ body: { flex: 1, overflow: 'hidden' } }}
10+
title={t('page.home.creativity')}
11+
>
12+
<div className="h-full flex-center">
13+
<IconLocalBanner className="text-400px text-primary sm:text-320px" />
14+
</div>
15+
</ACard>
16+
);
17+
};
18+
19+
export default CreativityBanner;

‎src/pages/(base)/home/modules/HeaderBanner.tsx

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
import avatar from '@/assets/imgs/soybean.jpg';
2+
import { selectUserInfo } from '@/store/slice/auth';
3+
4+
interface StatisticData {
5+
id: number;
6+
title: string;
7+
value: string;
8+
}
9+
10+
const HeaderBanner = () => {
11+
const { t } = useTranslation();
12+
13+
const userInfo = useAppSelector(selectUserInfo);
14+
15+
const statisticData: StatisticData[] = [
16+
{
17+
id: 0,
18+
title: t('page.home.projectCount'),
19+
value: '25'
20+
},
21+
{
22+
id: 1,
23+
title: t('page.home.todo'),
24+
value: '4/16'
25+
},
26+
{
27+
id: 2,
28+
title: t('page.home.message'),
29+
value: '12'
30+
}
31+
];
32+
return (
33+
<ACard
34+
bordered={false}
35+
className="card-wrapper"
36+
>
37+
<ARow gutter={[16, 16]}>
38+
<ACol
39+
md={18}
40+
span={24}
41+
>
42+
<div className="flex-y-center">
43+
<div className="size-72px shrink-0 overflow-hidden rd-1/2">
44+
<img
45+
className="size-full"
46+
src={avatar}
47+
/>
48+
</div>
49+
<div className="pl-12px">
50+
<h3 className="text-18px font-semibold">{t('page.home.greeting', { userName: userInfo.userName })}</h3>
51+
<p className="text-#999 leading-30px">{t('page.home.weatherDesc')}</p>
52+
</div>
53+
</div>
54+
</ACol>
55+
56+
<ACol
57+
md={6}
58+
span={24}
59+
>
60+
<ASpace
61+
className="w-full justify-end"
62+
size={24}
63+
>
64+
{statisticData.map(item => (
65+
<AStatistic
66+
className="whitespace-nowrap"
67+
key={item.id}
68+
{...item}
69+
/>
70+
))}
71+
</ASpace>
72+
</ACol>
73+
</ARow>
74+
</ACard>
75+
);
76+
};
77+
78+
export default HeaderBanner;

0 commit comments

Comments
 (0)