feat(components): 添加地图组件示例

config/routes.ts

@@ -1,14 +1,4 @@
-import {  } from 'umi';
-
 export const routes = [
-  {
-    path: '/dashboard',
-    component: 'dashboard',
-    menu: {
-      name: '首页',
-      icon: 'dashboard',
-    },
-  },
   {
     path: '/login',
     component: 'login',
@@ -19,6 +9,14 @@ export const routes = [
     component: 'register',
     layout: false
   },
+  {
+    path: '/dashboard',
+    component: 'dashboard',
+    menu: {
+      name: '首页',
+      icon: 'dashboard',
+    },
+  },
   {
     path: '/',
     redirect: '/dashboard',
@@ -125,6 +123,22 @@ export const routes = [
       },
     ]
   },
+  {
+    path: '/components',
+    menu: {
+      name: '组件',
+      icon: 'appstore',
+    },
+    routes: [
+      {
+        path: '/components/map',
+        menu: {
+          name: '高德地图'
+        },
+        component: '@/pages/components/map'
+      }
+    ]
+  },
   {
     path: '/permission',
     menu: {
@@ -136,18 +150,34 @@ export const routes = [
         path: '/permission',
         redirect: '/permission/action',
       },
+      {
+        path: '/permission/page',
+        menu: {
+          name: '页面权限测试'
+        },
+        component: '@/pages/permission/page'
+      },
+      {
+        path: '/permission/button',
+        menu: {
+          name: '按钮权限测试'
+        },
+        component: '@/pages/permission/button'
+      },
       {
         path: '/permission/action',
         menu: {
           name: '操作管理'
         },
+        authority: 'permission:actionView',
         component: '@/pages/permission/action'
       },
       {
         path: '/permission/policy',
         menu: {
           name: '策略管理'
         },
+        authority: 'permission:policyView',
         component: '@/pages/permission/policy'
       },
     ]

mock/user.ts

@@ -1,11 +1,36 @@
 import { Request, Response } from 'express';
 import { packResult } from './utils';
 
+const permissionCodes = [
+  { group: 'dashboard', actions: ['view'] },
+  {
+    group: 'permission',
+    actions: [
+      'view',
+      'policyAdd',
+      'policyDelete',
+      'policyModify',
+      'policyView',
+      'actionAdd',
+      'actionDelete',
+      'actionModify',
+      'actionView',
+    ]
+  }
+]
+
 function fetchCaptcha(req: Request, res: Response) {
   res.send(packResult());
 }
 
 function fetchCurrentUser(req: Request, res: Response) {
+  const authorization = req.headers?.authorization;
+  const token = authorization?.split(' ')?.[1];
+
+  if (token !== 'admin' && token !== 'user') {
+    res.status(401).send(packResult({ data: {}, code: 401 }))
+  }
+
   const data = {
     name: 'Serati Ma',
     avatar: 'https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png',
@@ -15,10 +40,7 @@ function fetchCurrentUser(req: Request, res: Response) {
     title: '交互专家',
     group: '蚂蚁金服－某某某事业群－某某平台部－某某技术部－UED',
     // 所有的权限
-    permissionCodes: [
-      { group: 'module1', actions: ['action1', 'action2', 'action3'] },
-      { group: 'module2', actions: ['action1', 'action2'] }
-    ],
+    permissionCodes,
     // 赋予的权限
     access: [
       { group: 'module1', actions: '*' },

src/app.tsx

@@ -12,8 +12,6 @@ import { getCookie, removeCookie } from '@/utils/cookie';
 import logo from '@/assets/logo.svg';
 import defaultSettings from '../config/default-settings';
 
-const token = getCookie();
-
 export async function getInitialState(): Promise<{
   settings?: LayoutSettings;
   currentUser?: API.CurrentUser;
@@ -103,6 +101,7 @@ const errorHandler = (error: ResponseError) => {
 
   const httpCode = error?.response?.status;
 
+  // 登录过期
   if (httpCode === 401) {
     removeCookie();
     history.replace('/login');
@@ -131,6 +130,12 @@ export const request: RequestConfig = {
   },
   requestInterceptors: [
     (url, options) => {
+      const token = getCookie();
+      // token 不存在，则跳转到登录页面
+      if (!token) {
+        removeCookie();
+        history.replace('/login');
+      }
       return {
         url: `${url}`,
         options: {

src/common/constant/index.ts

@@ -1,4 +0,0 @@
-// cookie key config
-export const COOKIE_DEFAULT_CONFIG = {
-  TOKEN: 'ADMIN-TOKEN'
-};

src/config/index.ts

@@ -5,3 +5,6 @@ export const NO_LOGIN_WHITELIST = [
   '/login',
   '/register'
 ];
+
+// cookie key config
+export const TOKEN_KEY = 'ADMIN-TOKEN';

src/pages/components/components/index.tsx

@@ -0,0 +1 @@
+export { default as Marker } from './marker';

src/pages/components/components/marker/index.less

@@ -0,0 +1,13 @@
+.marker {
+  position: relative;
+  text-align: center;
+  cursor: pointer;
+  width: 32px;
+  height: 32px;
+  opacity: 1;
+  border-radius: 50%;
+  font-size: 14px;
+  color: #fff;
+  border: 4px solid #fff;
+  background: #1dccbb;
+}

src/pages/components/components/marker/index.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import LockFilled from '@ant-design/icons/LockFilled';
+import styles from './index.less';
+
+// 聚合标记点
+const Marker: React.FC = () => {
+  return (
+    <div className={styles.marker}>
+      <LockFilled />
+    </div>
+  );
+};
+
+export default Marker;

src/pages/components/map.less

@@ -0,0 +1,13 @@
+.map-markers {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  height: 48px;
+  width: 48px;
+  border-radius: 50%;
+  border: solid 4px #fff;
+  cursor: pointer;
+  background: #217ad9;
+}

src/pages/components/map.tsx

@@ -0,0 +1,42 @@
+import React, { useState } from 'react';
+import { PageContainer } from '@ant-design/pro-layout';
+import { Map, Markers } from '@pansy/react-amap';
+import { Marker } from './components';
+import './map.less';
+
+const randomMarker = (len: number) => (
+  Array(len).fill(true).map(() => ({
+    position: {
+      longitude: 100 + Math.random() * 30,
+      latitude: 30 + Math.random() * 20,
+    },
+  }))
+);
+
+const MapComponent: React.FC = () => {
+  const [markers] = useState(randomMarker(100));
+
+  return (
+    <PageContainer>
+      <div style={{ width: '100%', height: 800 }}>
+        <Map zoom={5}>
+          <Markers
+            markers={markers}
+            useCluster={{
+              renderClusterMarker: ({ count, marker }) => {
+                return marker.setContent(`<div class="map-markers">${count}</div>`);
+              }
+            }}
+            render={() => {
+              return (
+                <Marker />
+              )
+            }}
+          />
+        </Map>
+      </div>
+    </PageContainer>
+  )
+}
+
+export default MapComponent;

src/pages/permission/button/index.tsx

@@ -0,0 +1,43 @@
+import React, { useState } from 'react';
+import { Authority } from 'umi';
+import { Radio, Divider, Alert, Tag, Space } from 'antd';
+import { RadioChangeEvent } from 'antd/es/radio/interface';
+import { PageContainer } from '@ant-design/pro-layout';
+
+const PermissionButton: React.FC = () => {
+  const [role, setRole] = useState<string>('admin');
+
+  const handleChange = (e: RadioChangeEvent) => {
+    setRole(e.target.value);
+  }
+
+  return (
+    <PageContainer>
+      <Space size={8}>
+        <span>权限切换:</span>
+        <Radio.Group value={role} onChange={handleChange}>
+          <Radio.Button value="user">
+            user
+          </Radio.Button>
+          <Radio.Button value="admin">
+            admin
+          </Radio.Button>
+        </Radio.Group>
+      </Space>
+      <Divider dashed />
+      <Space style={{ width: '100%' }} size={16} direction="vertical">
+        <Authority access={'dashboard:view'}>
+          <Alert message={ <span>Only <Tag>admin</Tag> can see this</span> } />
+        </Authority>
+        <Authority access={'dashboard:view'}>
+          <Alert message={ <span>Only <Tag>user</Tag> can see this</span> } />
+        </Authority>
+        <Authority access={'dashboard:view'}>
+          <Alert message={ <span>Both <Tag>admin</Tag> and <Tag>user</Tag> can see this</span> } />
+        </Authority>
+      </Space>
+    </PageContainer>
+  )
+}
+
+export default PermissionButton;

src/pages/permission/page/index.tsx

@@ -0,0 +1,31 @@
+import React, { useState } from 'react';
+import { Radio } from 'antd';
+import { RadioChangeEvent } from 'antd/es/radio/interface';
+import { PageContainer } from '@ant-design/pro-layout';
+
+const PermissionPage: React.FC = (props) => {
+  console.log(props);
+  const [role, setRole] = useState<string>('admin');
+
+  const handleChange = (e: RadioChangeEvent) => {
+    setRole(e.target.value);
+  }
+
+  return (
+    <PageContainer>
+      <div>
+        权限切换
+        <Radio.Group value={role} onChange={handleChange}>
+          <Radio.Button value="user">
+            user
+          </Radio.Button>
+          <Radio.Button value="admin">
+            admin
+          </Radio.Button>
+        </Radio.Group>
+      </div>
+    </PageContainer>
+  )
+}
+
+export default PermissionPage;

src/utils/cookie.ts

@@ -1,7 +1,7 @@
 import cookie from 'js-cookie';
-import { COOKIE_DEFAULT_CONFIG } from '@/common/constant';
+import { TOKEN_KEY } from '@/config';
 
-const cookieKey = COOKIE_DEFAULT_CONFIG.TOKEN;
+const cookieKey = TOKEN_KEY;
 
 export function getCookie() {
   return cookie.get(cookieKey);