feat: 升级相关依赖

Author: wangxingkang

package.json

@@ -20,45 +20,47 @@
   },
   "dependencies": {
     "@alitajs/antd-plus": "^2.5.0",
-    "@ant-design/icons": "^4.6.2",
-    "@ant-design/pro-card": "^1.11.6",
-    "@ant-design/pro-layout": "^6.16.0",
-    "@ant-design/pro-table": "^2.32.1",
-    "@formily/antd": "^1.3.13",
-    "@formily/antd-components": "^1.3.13",
-    "@pansy/hooks": "^2.3.0",
+    "@ant-design/icons": "^4.7.0",
+    "@ant-design/pro-card": "^1.18.30",
+    "@ant-design/pro-layout": "^6.32.12",
+    "@ant-design/pro-table": "^2.63.4",
+    "@formily/antd": "^2.0.10",
+    "@formily/antd-components": "^1.3.17",
+    "@formily/core": "^2.0.10",
+    "@formily/react": "^2.0.10",
     "@pansy/policy": "^0.5.0",
-    "@pansy/react-amap": "1.1.0",
+    "@pansy/react-amap": "2.12.3",
     "@pansy/react-charts": "^1.0.0",
-    "@pansy/react-watermark": "^2.1.0",
-    "antd": "^4.15.0",
-    "classnames": "^2.2.6",
+    "@pansy/react-hooks": "^0.9.2",
+    "@pansy/react-watermark": "^3.1.8",
+    "antd": "^4.18.6",
+    "classnames": "^2.3.1",
     "moment": "^2.29.1",
     "numeral": "^2.0.6",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-helmet-async": "^1.0.9",
-    "styled-components": "^5.2.2",
-    "umi": "^3.4.7",
-    "umi-request": "^1.3.5",
+    "react-helmet-async": "^1.2.2",
+    "styled-components": "^5.3.3",
+    "umi": "^3.5.20",
+    "umi-request": "^1.4.0",
     "use-merge-value": "^1.0.2"
   },
   "devDependencies": {
     "@alitajs/umi-plugin-antd-plus": "0.2.0",
     "@alitajs/umi-plugin-console-version": "0.4.0",
     "@alitajs/umi-preset-react": "0.3.0",
-    "@types/classnames": "2.3.0",
-    "@types/numeral": "2.0.1",
-    "@types/react": "17.0.3",
-    "@types/react-dom": "17.0.3",
-    "@types/styled-components": "5.1.10",
+    "@types/classnames": "2.3.1",
+    "@types/numeral": "2.0.2",
+    "@types/react": "17.0.39",
+    "@types/react-dom": "17.0.11",
+    "@types/styled-components": "5.1.22",
     "@walrus/cli": "1.3.4",
-    "@walrus/plugin-release": "1.13.0",
+    "@walrus/plugin-release": "1.14.3",
     "@walrus/preset-lint": "1.1.8",
-    "better-mock": "0.3.1",
+    "better-mock": "0.3.2",
     "cross-env": "7.0.3",
     "husky": "5.2.0",
-    "typescript": "4.2.4"
+    "typescript": "4.5.5"
   },
   "husky": {
     "hooks": {
@@ -70,9 +72,5 @@
     "> 1%",
     "last 2 versions",
     "not ie < 10"
-  ],
-  "engines": {
-    "node": ">=10.13.0",
-    "yarn": ">=1.3.2"
-  }
+  ]
 }

src/components/right-content/avatar-dropdown.tsx

@@ -1,6 +1,7 @@
 import React, { useCallback } from 'react';
 import { LogoutOutlined, SettingOutlined, UserOutlined } from '@ant-design/icons';
 import { Avatar, Menu, Spin } from 'antd';
+import { MenuProps } from 'antd/es/menu';
 import { history, useModel } from 'umi';
 import { getPageQuery } from '@/utils';
 import { fetchLogout } from '@/services/login';
@@ -32,13 +33,8 @@ const loginOut = async () => {
 const AvatarDropdown: React.FC<GlobalHeaderRightProps> = ({ menu }) => {
   const { initialState, setInitialState } = useModel('@@initialState');
 
-  const onMenuClick = useCallback(
-    (event: {
-      key: React.Key;
-      keyPath: React.Key[];
-      item: React.ReactInstance;
-      domEvent: React.MouseEvent<HTMLElement>;
-    }) => {
+  const onMenuClick: MenuProps['onClick'] = useCallback(
+    (event) => {
       const { key } = event;
       if (key === 'logout') {
         // @ts-ignore

src/layouts/user-layout.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React from 'react';
 import { Link, useIntl, SelectLang } from 'umi';
 import {
   MenuDataItem,
@@ -18,7 +18,7 @@ export interface UserLayoutProps {
   route?: ProLayoutProps['route'];
 }
 
-const UserLayout: FC<UserLayoutProps> = (props) => {
+const UserLayout: React.FC<UserLayoutProps> = (props) => {
   const {
     children,
     location = {

src/pages/404.tsx

@@ -2,7 +2,7 @@ import { Button, Result } from 'antd';
 import React from 'react';
 import { useHistory } from 'umi';
 
-const NoFoundPage: React.FC<{}> = () => {
+export default () => {
   const history = useHistory();
 
   return (
@@ -18,5 +18,3 @@ const NoFoundPage: React.FC<{}> = () => {
     />
   )
 };
-
-export default NoFoundPage;

src/pages/dashboard/index.tsx

@@ -1,8 +1,6 @@
 import React, { Suspense } from 'react';
 import { Space, Row, Col } from 'antd';
-import moment from 'moment';
 import { useRequest } from 'umi';
-import Watermark from '@pansy/react-watermark';
 import { GridContent, PageLoading } from '@ant-design/pro-layout';
 import { fetchChartData } from '@/services/dashboard';
 
@@ -21,8 +19,6 @@ const Dashboard: React.FC = () => {
       <Space direction="vertical" size="middle" style={{ width: '100%' }}>
         <Suspense fallback={<PageLoading />}>
           <IntroduceRow loading={loading}  />
-
-          <Watermark zIndex={998} text={['王某某 6909', moment().format('YYYY-MM-DD HH:mm:ss')]} isBody />
         </Suspense>
 
         <Suspense fallback={null}>

src/pages/index.tsx

@@ -1,8 +1,11 @@
 import React from 'react';
-import { ClusterComponentProps } from '@pansy/react-amap/es/markers';
 import styles from './index.less';
 
-export const Cluster: React.FC<ClusterComponentProps> = ({ count }) => {
+export interface ClusterProps {
+  count: number;
+}
+
+export const Cluster: React.FC<ClusterProps> = ({ count }) => {
   return (
     <div className={styles.markers}>
       {count}

src/pages/libraries/amap/components/cluster/index.tsx

@@ -1,33 +1,27 @@
 import React, { useState } from 'react';
 import { PageContainer } from '@ant-design/pro-layout';
-import { Map, Markers, ControlBar } from '@pansy/react-amap';
-import { MarkersProps } from '@pansy/react-amap/es/markers';
+import { Map, ControlBar, MarkerCluster } from '@pansy/react-amap';
 import { Marker, Cluster } from './components';
 import './styles.less';
 
 const randomMarker = (len: number) => (
   Array(len).fill(true).map(() => ({
-    position: {
-      longitude: 100 + Math.random() * 30,
-      latitude: 30 + Math.random() * 20,
-    },
-  }))
+    lnglat: [ 100 + Math.random() * 30, 30 + Math.random() * 20,]
+  })) as AMap.MarkerCluster.DataOptions[]
 );
 
-const MapComponent: React.FC = () => {
-  const [markers] = useState<MarkersProps['markers']>(randomMarker(100));
+export default () => {
+  const [markers] = useState<AMap.MarkerCluster.DataOptions[]>(randomMarker(100));
 
   return (
     <PageContainer>
       <div style={{ width: '100%', height: 800 }}>
         <Map zoom={5}>
           <ControlBar position={{ right: '10px', bottom: '10px' }} />
-          <Markers
-            markers={markers}
-            useCluster={{
-              render: () => {
-                return <Cluster />
-              }
+          <MarkerCluster
+            data={markers}
+            renderCluster={(data) => {
+              return <Cluster count={data.count} />
             }}
             render={() => <Marker />}
           />
@@ -36,5 +30,3 @@ const MapComponent: React.FC = () => {
     </PageContainer>
   )
 }
-
-export default MapComponent;

src/pages/libraries/amap/index.tsx

@@ -1,37 +1,24 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState } from 'react';
 import moment from 'moment';
+import { useInterval } from '@pansy/react-hooks'
 import Watermark from '@pansy/react-watermark';
 
 export default () => {
-  const interval = useRef<NodeJS.Timeout>();
   const [watermarkTexts, setWatermarkTexts] = useState<string[]>(
     ['王某某 6909', moment().format('YYYY-MM-DD HH:mm:ss')]
   );
 
-  useEffect(
-    () => {
-      // @ts-ignore
-      interval.current = setInterval(
-        () => {
-          setWatermarkTexts((texts) => {
-            texts[1] = moment().format('YYYY-MM-DD HH:mm:ss');
+  useInterval(() => {
+    setWatermarkTexts((texts) => {
+      texts[1] = moment().format('YYYY-MM-DD HH:mm:ss');
 
-            return texts;
-          })
-        },
-        3000
-      )
-
-      return () => {
-        interval.current && clearInterval(interval.current);
-      }
-    },
-    []
-  );
+      return texts;
+    })
+  }, 3 * 1000);
 
   return (
-    <div style={{ width: '100%', height: 800 }}>
-      <Watermark text={watermarkTexts} />
-    </div>
+    <Watermark width={200} height={200} text={watermarkTexts}>
+      <div style={{ width: '100%', height: 800 }} />
+    </Watermark>
   )
 }