feat(libraries): 添加水印示例

config/routes.ts

@@ -124,18 +124,25 @@ export const routes = [
     ]
   },
   {
-    path: '/components',
+    path: '/libraries',
     menu: {
       name: '组件',
       icon: 'appstore',
     },
     routes: [
       {
-        path: '/components/map',
+        path: '/libraries/amap',
         menu: {
           name: '高德地图'
         },
-        component: '@/pages/components/map'
+        component: '@/pages/libraries/amap'
+      },
+      {
+        path: '/libraries/watermark',
+        menu: {
+          name: '水印组件'
+        },
+        component: '@/pages/libraries/watermark'
       }
     ]
   },

package.json

@@ -21,14 +21,15 @@
   "dependencies": {
     "@alitajs/antd-plus": "^2.4.1",
     "@ant-design/icons": "^4.2.2",
-    "@ant-design/pro-card": "^1.4.3",
-    "@ant-design/pro-layout": "^6.5.10",
-    "@ant-design/pro-table": "^2.9.13",
+    "@ant-design/pro-card": "^1.4.5",
+    "@ant-design/pro-layout": "^6.5.12",
+    "@ant-design/pro-table": "^2.9.16",
     "@formily/antd": "^1.3.6",
     "@formily/antd-components": "^1.3.6",
     "@pansy/hooks": "^2.2.0",
     "@pansy/react-amap": "1.0.0-beta.2",
     "@pansy/react-charts": "^1.0.0",
+    "@pansy/react-watermark": "^2.1.0",
     "antd": "^4.7.3",
     "classnames": "^2.2.6",
     "js-cookie": "^2.2.1",
@@ -37,8 +38,8 @@
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-helmet-async": "^1.0.7",
-    "styled-components": "^5.2.0",
-    "umi": "^3.2.24",
+    "styled-components": "^5.2.1",
+    "umi": "^3.2.26",
     "umi-request": "^1.3.5",
     "use-merge-value": "^1.0.2"
   },
@@ -49,13 +50,13 @@
     "@types/classnames": "^2.2.11",
     "@types/js-cookie": "^2.2.6",
     "@types/numeral": "^0.0.28",
-    "@types/react": "^16.9.55",
+    "@types/react": "^16.9.56",
     "@types/react-dom": "^16.9.9",
     "@types/styled-components": "^5.1.4",
     "@walrus/cli": "^1.3.4",
     "@walrus/plugin-release": "^1.9.1",
     "@walrus/preset-lint": "^1.1.7",
-    "better-mock": "^0.2.9",
+    "better-mock": "^0.3.0",
     "cross-env": "^7.0.2",
     "husky": "^4.3.0",
     "typescript": "^4.0.5"

src/global.less

@@ -14,6 +14,10 @@ body,
   min-height: 100vh;
 }
 
+.ant-layout-header {
+  z-index: 999 !important;
+}
+
 canvas {
   display: block;
 }

src/pages/dashboard/index.tsx

@@ -1,6 +1,8 @@
 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';
 
@@ -19,6 +21,8 @@ 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/components/map.tsx → src/pages/libraries/amap/index.tsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { PageContainer } from '@ant-design/pro-layout';
 import { Map, Markers, ToolBar } from '@pansy/react-amap';
 import { Marker } from './components';
-import './map.less';
+import './styles.less';
 
 const randomMarker = (len: number) => (
   Array(len).fill(true).map(() => ({

src/pages/libraries/watermark/index.tsx

@@ -0,0 +1,37 @@
+import React, { useState, useEffect, useRef } from 'react';
+import moment from 'moment';
+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');
+
+            return texts;
+          })
+        },
+        3000
+      )
+
+      return () => {
+        interval.current && clearInterval(interval.current);
+      }
+    },
+    []
+  );
+
+  return (
+    <div style={{ width: '100%', height: 800 }}>
+      <Watermark text={watermarkTexts} />
+    </div>
+  )
+}