feat: plugin-layout

example/.umirc.ts

@@ -1,11 +1,24 @@
 import { defineConfig } from 'umi';
 
 export default defineConfig({
+  routes: [
+    {
+      name: 'model 测试',
+      path: '/plugin-model',
+      component: './plugin-model',
+    },
+    {
+      name: '首页',
+      path: '/',
+      component: './index',
+    },
+  ],
   plugins: [
     require.resolve('../packages/plugin-antd/lib'),
     require.resolve('../packages/plugin-locale/lib'),
     require.resolve('../packages/plugin-dva/lib'),
     require.resolve('../packages/plugin-model/lib'),
     require.resolve('../packages/plugin-request/lib'),
+    require.resolve('../packages/plugin-layout/lib'),
   ],
 });

example/app.ts

@@ -2,6 +2,18 @@ export function render(oldRender: Function) {
   oldRender();
 }
 
+// export function getInitialState() {
+//   return {
+//     name: 'test'
+//   };
+// }
+
+export const layout = {
+  logout: () => {
+    console.log('logout success');
+  }, // do something
+};
+
 export const locale = {
   default: 'zh-CN',
 };

example/package.json

@@ -1,4 +1,3 @@
 {
-  "dependencies": {
-  }
+  "dependencies": {}
 }

package.json

@@ -28,6 +28,9 @@
     ]
   },
   "devDependencies": {
+    "@umijs/plugin-initial-state": "^1.0.1",
+    "@umijs/plugin-model": "^1.0.1",
+    "@umijs/plugin-locale": "^0.1.2",
     "@testing-library/react": "^9.4.0",
     "@testing-library/react-hooks": "^3.2.1",
     "@types/jest": "^24.0.25",

packages/plugin-layout/README.md

@@ -0,0 +1,3 @@
+# @umijs/plugin-layout
+
+https://github.com/umijs/plugin-layout/blob/master/README.md

packages/plugin-layout/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@umijs/plugin-layout",
+  "version": "0.0.1",
+  "description": "@umijs/plugin-layout",
+  "main": "lib/index.js",
+  "types": "lib/types/index.d.ts",
+  "files": [
+    "lib",
+    "src"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/umijs/plugins"
+  },
+  "keywords": [
+    "umi"
+  ],
+  "authors": [
+    "Ariel <1319413542@qq.com> (https://github.com/Ariel-Cheng)"
+  ],
+  "license": "MIT",
+  "bugs": "http://github.com/umijs/plugins/issues",
+  "homepage": "https://github.com/umijs/plugins/tree/master/packages/plugin-layout#readme",
+  "peerDependencies": {
+    "umi": "3.x",
+    "@umijs/plugin-initial-state": "^1.0.1",
+    "@umijs/plugin-model": "^1.0.1",
+    "@umijs/plugin-locale": "^0.1.2",
+    "react": "^16.0.0"
+  },
+  "dependencies": {
+    "@ant-design/pro-layout": "^5.0.0",
+    "antd": "^4.0.0-rc.4",
+    "lodash": "^4.17.15",
+    "memoize-one": "^5.1.1",
+    "path-to-regexp": "1.x"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

packages/plugin-layout/src/component/ErrorBoundary/index.tsx

@@ -0,0 +1,84 @@
+import * as React from 'react';
+import { Result, Typography } from 'antd';
+import { intl } from '../../utils/intl';
+import { Exception500 } from '../Exception';
+
+interface Error {
+  componentStack?: string;
+  error?: string;
+  [key: string]: any;
+}
+
+interface IState {
+  hasError?: boolean;
+  error?: string;
+  info?: {
+    componentStack?: string;
+  };
+}
+
+export interface IProps {
+  /** 发生错误后的回调（可做一些错误日志上报，打点等） */
+  onError?: (error: Error, info: any) => void;
+}
+
+const DefaultFallbackComponent = ({ componentStack, error }: Error) => (
+  <Result
+    status="error"
+    title={intl({ id: 'layout.global.error.title' })}
+    subTitle={error!.toString()}
+  >
+    <Typography.Paragraph>
+      {intl({ id: 'layout.global.error.stack' })}：<pre>{componentStack}</pre>
+    </Typography.Paragraph>
+  </Result>
+);
+
+class ErrorBoundary extends React.Component<IProps, IState> {
+  static defaultProps = {
+    onError: null,
+  };
+
+  static getDerivedStateFromError() {
+    return { hasError: true };
+  }
+
+  constructor(props: IProps) {
+    super(props);
+    this.state = {
+      hasError: false,
+      error: '',
+    };
+  }
+
+  componentDidCatch(error: any, info: any) {
+    this.setState({
+      error,
+      info,
+    });
+    const { onError } = this.props;
+    if (onError && typeof onError === 'function') {
+      onError(error, info);
+    }
+  }
+
+  render() {
+    const { children, ...restProps } = this.props;
+    const { hasError, error, info } = this.state;
+    if (hasError) {
+      return (
+        // @ts-ignore
+        (process.env.NODE_ENV === 'development' && (
+          <DefaultFallbackComponent
+            {...restProps}
+            componentStack={info ? info.componentStack : ''}
+            error={error}
+          />
+        )) || <Exception500 />
+      );
+    }
+    return children;
+  }
+}
+
+export default ErrorBoundary;

packages/plugin-layout/src/component/Exception/index.less

@@ -0,0 +1,33 @@
+.umi-plugin-layout-exception-container {
+  min-width: 750px;
+  height: 624px;
+  background-color: #fff;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 24px;
+
+  .umi-plugin-layout-exception-content {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: row;
+
+    .umi-plugin-layout-exception-rightContent {
+      margin-left: 120px;
+
+      :global(h1.ant-typography) {
+        font-size: 56px;
+        line-height: 56px;
+        margin-bottom: 0;
+      }
+
+      .umi-plugin-layout-exception-desc {
+        margin: 8px 0 24px 0;
+        font-size: 16px;
+        color: rgba(0, 0, 0, 0.45);
+        max-width: 350px;
+      }
+    }
+  }
+}

packages/plugin-layout/src/component/Exception/index.tsx

@@ -0,0 +1,114 @@
+import React from 'react';
+import { Typography, Button } from 'antd';
+import { history } from 'umi';
+import './index.less';
+import { IRouteLayoutConfig } from '../../types/interface.d';
+
+interface ExceptionProps {
+  exceptionImg: string | any;
+  title: string | number;
+  description: string;
+  footer?: any;
+}
+
+function backToHome() {
+  history.push('/');
+}
+
+const Exception = (props: ExceptionProps) => {
+  const { exceptionImg, title, description, footer } = props;
+
+  return (
+    <div className="umi-plugin-layout-exception-container">
+      <div className="umi-plugin-layout-exception-content">
+        {typeof exceptionImg === 'string' ? (
+          <img src={exceptionImg} width="438" alt="desc" />
+        ) : (
+          exceptionImg
+        )}
+        <div className="umi-plugin-layout-exception-rightContent">
+          {isNaN(Number(title)) ? (
+            <Typography.Title level={2}>{title}</Typography.Title>
+          ) : (
+            <Typography.Title>{title}</Typography.Title>
+          )}
+          <p className="umi-plugin-layout-exception-desc">{description}</p>
+          {footer}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const Exception404 = () => (
+  <Exception
+    exceptionImg={
+      <img
+        src="https://img.alicdn.com/tfs/TB1_3MMg1H2gK0jSZJnXXaT1FXa-1323-801.png"
+        width="438"
+        alt="desc"
+      />
+    }
+    title="404"
+    description="抱歉，你访问的页面不存在"
+    footer={
+      <Button type="primary" onClick={backToHome}>
+        返回首页
+      </Button>
+    }
+  />
+);
+
+const Exception500 = () => (
+  <Exception
+    exceptionImg="https://img.alicdn.com/tfs/TB1Pt.Mg.z1gK0jSZLeXXb9kVXa-1446-795.png"
+    title="500"
+    description="抱歉，服务器出错了"
+    footer={
+      <Button type="primary" onClick={backToHome}>
+        返回首页
+      </Button>
+    }
+  />
+);
+
+const Exception403 = () => (
+  <Exception
+    exceptionImg={
+      <img
+        src="https://img.alicdn.com/tfs/TB1uK.QgW61gK0jSZFlXXXDKFXa-1311-825.png"
+        width="438"
+        alt="desc"
+      />
+    }
+    title="403"
+    description="抱歉，你无权访问该页面"
+    footer={
+      <Button type="primary" onClick={backToHome}>
+        返回首页
+      </Button>
+    }
+  />
+);
+
+/**
+ * 异常路由处理组件
+ * - 无权限
+ * - 404
+ */
+const WithExceptionOpChildren = (
+  children: React.ReactNode,
+  currentPathConfig?: IRouteLayoutConfig,
+) => {
+  if (!currentPathConfig) {
+    return <Exception404 />;
+  }
+  if (currentPathConfig.unAccessible) {
+    return <Exception403 />;
+  }
+  return children;
+};
+
+export default Exception;
+
+export { Exception404, Exception403, Exception500, WithExceptionOpChildren };