feat: 初步完成主页设计
This commit is contained in:
@@ -11,10 +11,14 @@
|
|||||||
"start": "npm run dev"
|
"start": "npm run dev"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@ant-design/charts": "^2.1.1",
|
||||||
"@ant-design/icons": "^5.0.1",
|
"@ant-design/icons": "^5.0.1",
|
||||||
"@ant-design/pro-components": "^2.4.4",
|
"@ant-design/pro-components": "^2.7.10",
|
||||||
"@umijs/max": "^4.3.1",
|
"@umijs/max": "^4.3.1",
|
||||||
"antd": "^5.4.0",
|
"antd": "^5.4.0",
|
||||||
|
"echarts": "^5.5.1",
|
||||||
|
"echarts-for-react": "^3.0.2",
|
||||||
|
"react-calendar-heatmap": "^1.9.0",
|
||||||
"yarn": "^1.22.22"
|
"yarn": "^1.22.22"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
|||||||
@@ -1,19 +1,319 @@
|
|||||||
import Guide from '@/components/Guide';
|
/** @format */
|
||||||
import { trim } from '@/utils/format';
|
import { ProCard, ProList } from '@ant-design/pro-components';
|
||||||
import { PageContainer } from '@ant-design/pro-components';
|
import { Avatar, Card, Skeleton, Space, Tag } from 'antd';
|
||||||
import { useModel } from '@umijs/max';
|
import Meta from 'antd/es/card/Meta';
|
||||||
import React from 'react';
|
import ReactECharts from 'echarts-for-react';
|
||||||
import styles from './index.less';
|
import { FunctionComponent, useEffect, useState } from 'react';
|
||||||
|
import styles from './index.module.less';
|
||||||
|
|
||||||
const HomePage: React.FC = () => {
|
import aliyun from '@/assets/icons/aliyun.svg';
|
||||||
const { name } = useModel('global');
|
import eye from '@/assets/icons/eye-outline.svg';
|
||||||
return (
|
import share from '@/assets/icons/share.svg';
|
||||||
<PageContainer ghost>
|
import standard_directory from '@/assets/icons/standard_directory.svg';
|
||||||
<div className={styles.container}>
|
import userInfo from '@/assets/icons/userInfo.svg';
|
||||||
<Guide name={trim(name)} />
|
// import * as echarts from "echarts/core";
|
||||||
</div>
|
|
||||||
</PageContainer>
|
import 'react-calendar-heatmap/dist/styles.css';
|
||||||
);
|
const defaultData = [
|
||||||
|
{
|
||||||
|
id: '1',
|
||||||
|
name: '管理员1',
|
||||||
|
content: '2024-07-01',
|
||||||
|
image: aliyun,
|
||||||
|
desc: 'IP:255.255.255',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '2',
|
||||||
|
name: '管理员2',
|
||||||
|
content: '2024-06-01',
|
||||||
|
image:
|
||||||
|
'https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg',
|
||||||
|
desc: 'IP:255.255.255',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '3',
|
||||||
|
name: '管理员3',
|
||||||
|
content: '2024-05-01',
|
||||||
|
image:
|
||||||
|
'https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg',
|
||||||
|
desc: 'IP:255.255.255',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '4',
|
||||||
|
name: '管理员4',
|
||||||
|
content: '2024-04-01',
|
||||||
|
image:
|
||||||
|
'https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg',
|
||||||
|
desc: 'IP:255.255.255',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
type DataItem = (typeof defaultData)[number];
|
||||||
|
const MainHome: FunctionComponent = () => {
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [dataSource, setDataSource] = useState<DataItem[]>(defaultData);
|
||||||
|
const option = {
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
color: ['#F58080', '#47D8BE', '#F9A589'],
|
||||||
|
data: ['活跃用户数量', '新增分享圈数量'],
|
||||||
|
left: 'center',
|
||||||
|
bottom: 'bottom',
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
top: 'middle',
|
||||||
|
left: '3%',
|
||||||
|
right: '4%',
|
||||||
|
bottom: '3%',
|
||||||
|
height: '80%',
|
||||||
|
containLabel: true,
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
data: [
|
||||||
|
'2024-02-01',
|
||||||
|
'2024-03-01',
|
||||||
|
'2024-04-01',
|
||||||
|
'2024-05-01',
|
||||||
|
'2024-06-01',
|
||||||
|
'2024-07-01',
|
||||||
|
],
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '#999',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value',
|
||||||
|
|
||||||
|
splitLine: {
|
||||||
|
lineStyle: {
|
||||||
|
type: 'dashed',
|
||||||
|
color: '#DDD',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: false,
|
||||||
|
lineStyle: {
|
||||||
|
color: '#333',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
nameTextStyle: {
|
||||||
|
color: '#999',
|
||||||
|
},
|
||||||
|
splitArea: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '活跃用户数量',
|
||||||
|
type: 'line',
|
||||||
|
data: [800, 900, 220, 130, 660, 289],
|
||||||
|
color: '#F58080',
|
||||||
|
lineStyle: {
|
||||||
|
width: 5,
|
||||||
|
color: {
|
||||||
|
type: 'linear',
|
||||||
|
|
||||||
|
colorStops: [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: '#FFCAD4', // 0% 处的颜色
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 0.4,
|
||||||
|
color: '#F58080', // 100% 处的颜色
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: '#F58080', // 100% 处的颜色
|
||||||
|
},
|
||||||
|
],
|
||||||
|
globalCoord: false, // 缺省为 false
|
||||||
|
},
|
||||||
|
shadowColor: 'rgba(245,128,128, 0.5)',
|
||||||
|
shadowBlur: 10,
|
||||||
|
shadowOffsetY: 7,
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
color: '#F58080',
|
||||||
|
borderWidth: 10,
|
||||||
|
/*shadowColor: 'rgba(72,216,191, 0.3)',
|
||||||
|
shadowBlur: 100,*/
|
||||||
|
borderColor: '#F58080',
|
||||||
|
},
|
||||||
|
smooth: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '新增分享圈数量',
|
||||||
|
type: 'line',
|
||||||
|
data: [123, 568, 111, 222, 123, 56],
|
||||||
|
lineStyle: {
|
||||||
|
width: 5,
|
||||||
|
color: {
|
||||||
|
type: 'linear',
|
||||||
|
|
||||||
|
colorStops: [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: '#AAF487', // 0% 处的颜色
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 0.4,
|
||||||
|
color: '#47D8BE', // 100% 处的颜色
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: '#47D8BE', // 100% 处的颜色
|
||||||
|
},
|
||||||
|
],
|
||||||
|
globalCoord: false, // 缺省为 false
|
||||||
|
},
|
||||||
|
shadowColor: 'rgba(71,216,190, 0.5)',
|
||||||
|
shadowBlur: 10,
|
||||||
|
shadowOffsetY: 7,
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
color: '#AAF487',
|
||||||
|
borderWidth: 10,
|
||||||
|
/*shadowColor: 'rgba(72,216,191, 0.3)',
|
||||||
|
shadowBlur: 100,*/
|
||||||
|
borderColor: '#AAF487',
|
||||||
|
},
|
||||||
|
smooth: true,
|
||||||
|
},
|
||||||
|
],
|
||||||
};
|
};
|
||||||
|
|
||||||
export default HomePage;
|
useEffect(() => {
|
||||||
|
setTimeout(() => {
|
||||||
|
setLoading(false);
|
||||||
|
}, 2000);
|
||||||
|
}, []);
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className={styles.home_content_main}>
|
||||||
|
<div className={styles.home_content_head}>
|
||||||
|
<div className={styles.home_content_head_left}>
|
||||||
|
<Card
|
||||||
|
style={{ width: '13.5vw', height: '21vh' }}
|
||||||
|
loading={false}
|
||||||
|
bordered
|
||||||
|
hoverable
|
||||||
|
>
|
||||||
|
<Skeleton loading={loading} active avatar>
|
||||||
|
<Meta
|
||||||
|
avatar={<Avatar shape="square" size="large" src={userInfo} />}
|
||||||
|
title="用户数量"
|
||||||
|
description="This is the description"
|
||||||
|
/>
|
||||||
|
</Skeleton>
|
||||||
|
</Card>
|
||||||
|
<Card
|
||||||
|
style={{ width: '13.5vw', height: '21vh' }}
|
||||||
|
loading={false}
|
||||||
|
bordered
|
||||||
|
hoverable
|
||||||
|
>
|
||||||
|
<Skeleton loading={loading} active avatar>
|
||||||
|
<Meta
|
||||||
|
avatar={<Avatar shape="square" size="large" src={share} />}
|
||||||
|
title="分享圈数量"
|
||||||
|
description="This is the description"
|
||||||
|
/>
|
||||||
|
</Skeleton>
|
||||||
|
</Card>
|
||||||
|
<Card
|
||||||
|
style={{ width: '13.5vw', height: '21vh' }}
|
||||||
|
loading={false}
|
||||||
|
bordered
|
||||||
|
hoverable
|
||||||
|
>
|
||||||
|
<Skeleton loading={loading} active avatar>
|
||||||
|
<Meta
|
||||||
|
avatar={
|
||||||
|
<Avatar
|
||||||
|
shape="square"
|
||||||
|
size="large"
|
||||||
|
src={standard_directory}
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
title="文件总数"
|
||||||
|
description="This is the description"
|
||||||
|
/>
|
||||||
|
</Skeleton>
|
||||||
|
</Card>
|
||||||
|
<Card
|
||||||
|
style={{ width: '13.5vw', height: '21vh' }}
|
||||||
|
loading={false}
|
||||||
|
bordered
|
||||||
|
hoverable
|
||||||
|
>
|
||||||
|
<Skeleton loading={loading} active avatar>
|
||||||
|
<Meta
|
||||||
|
avatar={<Avatar shape="square" size="large" src={eye} />}
|
||||||
|
title="浏览总量"
|
||||||
|
description="This is the description"
|
||||||
|
/>
|
||||||
|
</Skeleton>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
<div style={{ width: '55%' }}>
|
||||||
|
<ProCard bordered boxShadow>
|
||||||
|
<Skeleton loading={loading} active>
|
||||||
|
<ReactECharts option={option} />
|
||||||
|
</Skeleton>
|
||||||
|
</ProCard>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className={styles.home_content_list}>
|
||||||
|
<ProCard bordered boxShadow style={{ width: '49%' }}>
|
||||||
|
<ProList<DataItem>
|
||||||
|
rowKey="id"
|
||||||
|
headerTitle="管理员日志"
|
||||||
|
dataSource={dataSource}
|
||||||
|
showActions="hover"
|
||||||
|
editable={{
|
||||||
|
onSave: async (key, record, originRow) => {
|
||||||
|
console.log(key, record, originRow);
|
||||||
|
return true;
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
onDataSourceChange={setDataSource}
|
||||||
|
metas={{
|
||||||
|
title: {
|
||||||
|
dataIndex: 'name',
|
||||||
|
},
|
||||||
|
avatar: {
|
||||||
|
dataIndex: 'image',
|
||||||
|
editable: false,
|
||||||
|
},
|
||||||
|
content: {
|
||||||
|
dataIndex: 'content',
|
||||||
|
},
|
||||||
|
description: {
|
||||||
|
dataIndex: 'desc',
|
||||||
|
},
|
||||||
|
subTitle: {
|
||||||
|
render: () => {
|
||||||
|
return (
|
||||||
|
<Space size={0}>
|
||||||
|
<Tag color="blue">Ant Design</Tag>
|
||||||
|
<Tag color="#5BD8A6">TechUI</Tag>
|
||||||
|
</Space>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</ProCard>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
export default MainHome;
|
||||||
|
|||||||
Reference in New Issue
Block a user