feat: 初步完成主页设计

2024-07-15 16:17:00 +08:00
parent 1d3b753cbd
commit c83b9fa6b6
3 changed files with 1726 additions and 1102 deletions
--- a/package.json
+++ b/package.json
@@ -11,10 +11,14 @@
    "start": "npm run dev"
  },
  "dependencies": {
+    "@ant-design/charts": "^2.1.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",
    "antd": "^5.4.0",
+    "echarts": "^5.5.1",
+    "echarts-for-react": "^3.0.2",
+    "react-calendar-heatmap": "^1.9.0",
    "yarn": "^1.22.22"
  },
  "devDependencies": {
--- a/src/pages/Home/index.tsx
+++ b/src/pages/Home/index.tsx
@@ -1,19 +1,319 @@
-import Guide from '@/components/Guide';
-import { trim } from '@/utils/format';
-import { PageContainer } from '@ant-design/pro-components';
-import { useModel } from '@umijs/max';
-import React from 'react';
-import styles from './index.less';
+/** @format */
+import { ProCard, ProList } from '@ant-design/pro-components';
+import { Avatar, Card, Skeleton, Space, Tag } from 'antd';
+import Meta from 'antd/es/card/Meta';
+import ReactECharts from 'echarts-for-react';
+import { FunctionComponent, useEffect, useState } from 'react';
+import styles from './index.module.less';

-const HomePage: React.FC = () => {
-  const { name } = useModel('global');
+import aliyun from '@/assets/icons/aliyun.svg';
+import eye from '@/assets/icons/eye-outline.svg';
+import share from '@/assets/icons/share.svg';
+import standard_directory from '@/assets/icons/standard_directory.svg';
+import userInfo from '@/assets/icons/userInfo.svg';
+// import * as echarts from "echarts/core";
+
+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,
+      },
+    ],
+  };
+
+  useEffect(() => {
+    setTimeout(() => {
+      setLoading(false);
+    }, 2000);
+  }, []);
  return (
-    <PageContainer ghost>
-      <div className={styles.container}>
-        <Guide name={trim(name)} />
+    <>
+      <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>
-    </PageContainer>
+    </>
  );
 };
-
-export default HomePage;
+export default MainHome;
--- a/yarn.lock
+++ b/yarn.lock