12-23-上传master

src/layouts/BasicLayout.tsx

@@ -0,0 +1,173 @@
+import ProLayout, {
+  MenuDataItem,
+  BasicLayoutProps as ProLayoutProps,
+  Settings,
+  DefaultFooter,
+} from '@ant-design/pro-layout';
+import React, { useEffect, useMemo, useRef } from 'react';
+import { Link, useIntl, connect, Dispatch, history } from 'umi';
+import { GithubOutlined } from '@ant-design/icons';
+import { Result, Button } from 'antd';
+import Authorized from '@/utils/Authorized';
+import RightContent from '@/components/GlobalHeader/RightContent';
+import { ConnectState } from '@/models/connect';
+import { getMatchMenu } from '@umijs/route-utils';
+import logo from '../assets/logo.svg';
+
+const noMatch = (
+  <Result
+    status={403}
+    title="403"
+    subTitle="Sorry, you are not authorized to access this page."
+    extra={
+      <Button type="primary">
+        <Link to="/user/login">Go Login</Link>
+      </Button>
+    }
+  />
+);
+export interface BasicLayoutProps extends ProLayoutProps {
+  breadcrumbNameMap: {
+    [path: string]: MenuDataItem;
+  };
+  route: ProLayoutProps['route'] & {
+    authority: string[];
+  };
+  settings: Settings;
+  dispatch: Dispatch;
+}
+export type BasicLayoutContext = { [K in 'location']: BasicLayoutProps[K] } & {
+  breadcrumbNameMap: {
+    [path: string]: MenuDataItem;
+  };
+};
+/**
+ * use Authorized check all menu item
+ */
+
+const menuDataRender = (menuList: MenuDataItem[]): MenuDataItem[] =>
+  menuList.map((item) => {
+    const localItem = {
+      ...item,
+      children: item.children ? menuDataRender(item.children) : undefined,
+    };
+    return Authorized.check(item.authority, localItem, null) as MenuDataItem;
+  });
+
+const defaultFooterDom = (
+  <DefaultFooter
+    copyright={`${new Date().getFullYear()} 蚂蚁集团体验技术部出品`}
+    links={[
+      {
+        key: 'Ant Design Pro',
+        title: 'Ant Design Pro',
+        href: 'https://pro.ant.design',
+        blankTarget: true,
+      },
+      {
+        key: 'github',
+        title: <GithubOutlined />,
+        href: 'https://github.com/ant-design/ant-design-pro',
+        blankTarget: true,
+      },
+      {
+        key: 'Ant Design',
+        title: 'Ant Design',
+        href: 'https://ant.design',
+        blankTarget: true,
+      },
+    ]}
+  />
+);
+
+const BasicLayout: React.FC<BasicLayoutProps> = (props) => {
+  const {
+    dispatch,
+    children,
+    settings,
+    location = {
+      pathname: '/',
+    },
+  } = props;
+
+  const menuDataRef = useRef<MenuDataItem[]>([]);
+
+  useEffect(() => {
+    if (dispatch) {
+      dispatch({
+        type: 'user/fetchCurrent',
+      });
+    }
+  }, []);
+  /**
+   * init variables
+   */
+
+  const handleMenuCollapse = (payload: boolean): void => {
+    if (dispatch) {
+      dispatch({
+        type: 'global/changeLayoutCollapsed',
+        payload,
+      });
+    }
+  };
+  // get children authority
+  const authorized = useMemo(
+    () =>
+      getMatchMenu(location.pathname || '/', menuDataRef.current).pop() || {
+        authority: undefined,
+      },
+    [location.pathname],
+  );
+
+  const { formatMessage } = useIntl();
+
+  return (
+    <ProLayout
+      logo={logo}
+      formatMessage={formatMessage}
+      onCollapse={handleMenuCollapse}
+      onMenuHeaderClick={() => history.push('/')}
+      menuItemRender={(menuItemProps, defaultDom) => {
+        if (menuItemProps.isUrl || !menuItemProps.path) {
+          return defaultDom;
+        }
+        return <Link to={menuItemProps.path}>{defaultDom}</Link>;
+      }}
+      breadcrumbRender={(routers = []) => [
+        {
+          path: '/',
+          breadcrumbName: formatMessage({ id: 'menu.home' }),
+        },
+        ...routers,
+      ]}
+      itemRender={(route, params, routes, paths) => {
+        const first = routes.indexOf(route) === 0;
+        return first ? (
+          <Link to={paths.join('/')}>{route.breadcrumbName}</Link>
+        ) : (
+          <span>{route.breadcrumbName}</span>
+        );
+      }}
+      footerRender={() => defaultFooterDom}
+      menuDataRender={menuDataRender}
+      rightContentRender={() => <RightContent />}
+      postMenuData={(menuData) => {
+        menuDataRef.current = menuData || [];
+        return menuData || [];
+      }}
+      {...props}
+      {...settings}
+    >
+      <Authorized authority={authorized!.authority} noMatch={noMatch}>
+        {children}
+        
+      </Authorized>
+    </ProLayout>
+  );
+};
+
+export default connect(({ global, settings }: ConnectState) => ({
+  collapsed: global.collapsed,
+  settings,
+}))(BasicLayout);