From a467e712149265f9faefaf2d6f4753b475fddd31 Mon Sep 17 00:00:00 2001 From: xiaohuoni <448627663@qq.com> Date: Mon, 25 Mar 2019 23:50:29 +0800 Subject: [PATCH] Exception404 --- Exception404/package.json | 5 +- .../src/components/Exception/demo/403.md | 29 ++++++ .../src/components/Exception/demo/404.md | 22 +++++ .../src/components/Exception/demo/500.md | 22 +++++ .../src/components/Exception/index.en-US.md | 20 ++++ .../src/components/Exception/index.less | 89 +++++++++++++++++ .../src/components/Exception/index.tsx | 83 ++++++++++++++++ .../src/components/Exception/index.zh-CN.md | 21 ++++ .../src/components/Exception/typeConfig.ts | 36 +++++++ Exception404/src/{index.js => index.tsx} | 8 +- .../src/locales/{en-US.js => en-US.ts} | 0 .../src/locales/{pt-BR.js => pt-BR.ts} | 0 .../src/locales/{zh-CN.js => zh-CN.ts} | 0 .../src/locales/{zh-TW.js => zh-TW.ts} | 0 Exception404/tsconfig.json | 32 +++++++ Exception404/tslint.yml | 95 +++++++++++++++++++ Exception404/typings.d.ts | 12 +++ 17 files changed, 467 insertions(+), 7 deletions(-) create mode 100644 Exception404/src/components/Exception/demo/403.md create mode 100644 Exception404/src/components/Exception/demo/404.md create mode 100644 Exception404/src/components/Exception/demo/500.md create mode 100644 Exception404/src/components/Exception/index.en-US.md create mode 100644 Exception404/src/components/Exception/index.less create mode 100644 Exception404/src/components/Exception/index.tsx create mode 100644 Exception404/src/components/Exception/index.zh-CN.md create mode 100644 Exception404/src/components/Exception/typeConfig.ts rename Exception404/src/{index.js => index.tsx} (64%) rename Exception404/src/locales/{en-US.js => en-US.ts} (100%) rename Exception404/src/locales/{pt-BR.js => pt-BR.ts} (100%) rename Exception404/src/locales/{zh-CN.js => zh-CN.ts} (100%) rename Exception404/src/locales/{zh-TW.js => zh-TW.ts} (100%) create mode 100644 Exception404/tsconfig.json create mode 100644 Exception404/tslint.yml create mode 100644 Exception404/typings.d.ts diff --git a/Exception404/package.json b/Exception404/package.json index 02721d04..b85b4c65 100644 --- a/Exception404/package.json +++ b/Exception404/package.json @@ -1,5 +1,5 @@ { - "name": "@umi-block/exception-404", + "name": "@pro-blocks/exception-404", "version": "0.0.1", "description": "Exception404", "main": "src/index.js", @@ -8,11 +8,10 @@ }, "repository": { "type": "git", - "url": "https://github.com/umijs/umi-blocks/ant-design-pro/exception404" + "url": "https://github.com/ant-design/pro-blocks/tree/master/Exception404" }, "dependencies": { "react": "^16.6.3", - "ant-design-pro": "^2.1.1", "dva": "^2.4.0", "umi-request": "^1.0.0-beta.1" }, diff --git a/Exception404/src/components/Exception/demo/403.md b/Exception404/src/components/Exception/demo/403.md new file mode 100644 index 00000000..c0244ab1 --- /dev/null +++ b/Exception404/src/components/Exception/demo/403.md @@ -0,0 +1,29 @@ +--- +order: 2 +title: + zh-CN: 403 页面 + en-US: 403 Page +--- + +## zh-CN + +403 页面，配合自定义操作。 + +## en-US + +403 page with custom operations. + +````jsx +import Exception from 'ant-design-pro/lib/Exception'; +import { Button } from 'antd'; + +const actions = ( +
+ + +
+); +ReactDOM.render( + +, mountNode); +```` diff --git a/Exception404/src/components/Exception/demo/404.md b/Exception404/src/components/Exception/demo/404.md new file mode 100644 index 00000000..c54e99d4 --- /dev/null +++ b/Exception404/src/components/Exception/demo/404.md @@ -0,0 +1,22 @@ +--- +order: 0 +title: + zh-CN: 404 页面 + en-US: 404 Page +--- + +## zh-CN + +404 页面。 + +## en-US + +404 page. + +````jsx +import Exception from 'ant-design-pro/lib/Exception'; + +ReactDOM.render( + +, mountNode); +```` diff --git a/Exception404/src/components/Exception/demo/500.md b/Exception404/src/components/Exception/demo/500.md new file mode 100644 index 00000000..2336e41e --- /dev/null +++ b/Exception404/src/components/Exception/demo/500.md @@ -0,0 +1,22 @@ +--- +order: 1 +title: + zh-CN: 500 页面 + en-US: 500 Page +--- + +## zh-CN + +500 页面。 + +## en-US + +500 page. + +````jsx +import Exception from 'ant-design-pro/lib/Exception'; + +ReactDOM.render( + +, mountNode); +```` diff --git a/Exception404/src/components/Exception/index.en-US.md b/Exception404/src/components/Exception/index.en-US.md new file mode 100644 index 00000000..37e7e807 --- /dev/null +++ b/Exception404/src/components/Exception/index.en-US.md @@ -0,0 +1,20 @@ +--- +title: Exception +cols: 1 +order: 5 +--- + +Exceptions page is used to provide feedback on specific abnormal state. Usually, it contains an explanation of the error status, and provides users with suggestions or operations, to prevent users from feeling lost and confused. + +## API + +Property | Description | Type | Default +---------|-------------|------|-------- +| backText | default return button text | ReactNode | back to home | +type | type of exception, the corresponding default `title`, `desc`, `img` will be given if set, which can be overridden by explicit setting of `title`, `desc`, `img` | Enum {'403', '404', '500'} | - +title | title | ReactNode | - +desc | supplementary description | ReactNode | - +img | the url of background image | string | - +actions | suggested operations, a default 'Home' link will show if not set | ReactNode | - +linkElement | to specify the element of link | string\|ReactElement | 'a' +redirect | redirect path | string | '/' \ No newline at end of file diff --git a/Exception404/src/components/Exception/index.less b/Exception404/src/components/Exception/index.less new file mode 100644 index 00000000..45a2844b --- /dev/null +++ b/Exception404/src/components/Exception/index.less @@ -0,0 +1,89 @@ +@import '~antd/lib/style/themes/default.less'; + +.exception { + display: flex; + align-items: center; + height: 80%; + min-height: 500px; + + .imgBlock { + flex: 0 0 62.5%; + width: 62.5%; + padding-right: 152px; + zoom: 1; + &::before, + &::after { + content: ' '; + display: table; + } + &::after { + clear: both; + height: 0; + font-size: 0; + visibility: hidden; + } + } + + .imgEle { + float: right; + width: 100%; + max-width: 430px; + height: 360px; + background-repeat: no-repeat; + background-position: 50% 50%; + background-size: contain; + } + + .content { + flex: auto; + + h1 { + margin-bottom: 24px; + color: #434e59; + font-weight: 600; + font-size: 72px; + line-height: 72px; + } + + .desc { + margin-bottom: 16px; + color: @text-color-secondary; + font-size: 20px; + line-height: 28px; + } + + .actions { + button:not(:last-child) { + margin-right: 8px; + } + } + } +} + +@media screen and (max-width: @screen-xl) { + .exception { + .imgBlock { + padding-right: 88px; + } + } +} + +@media screen and (max-width: @screen-sm) { + .exception { + display: block; + text-align: center; + .imgBlock { + margin: 0 auto 24px; + padding-right: 0; + } + } +} + +@media screen and (max-width: @screen-xs) { + .exception { + .imgBlock { + margin-bottom: -24px; + overflow: hidden; + } + } +} diff --git a/Exception404/src/components/Exception/index.tsx b/Exception404/src/components/Exception/index.tsx new file mode 100644 index 00000000..7a25ebfa --- /dev/null +++ b/Exception404/src/components/Exception/index.tsx @@ -0,0 +1,83 @@ +import { Button } from 'antd'; +import classNames from 'classnames'; +import * as H from 'history'; +import React, { createElement } from 'react'; +import styles from './index.less'; +import config from './typeConfig'; +import Link from 'umi/link'; + +export interface ExceptionProps< + L = { + to: H.LocationDescriptor; + href?: H.LocationDescriptor; + replace?: boolean; + innerRef?: (node: HTMLAnchorElement | null) => void; + } +> { + type?: '403' | '404' | '500'; + title?: React.ReactNode; + desc?: React.ReactNode; + img?: string; + actions?: React.ReactNode; + linkElement?: string | React.ComponentType | typeof Link; + style?: React.CSSProperties; + className?: string; + backText?: React.ReactNode; + redirect?: string; +} + +class Exception extends React.Component { + static defaultProps = { + backText: 'back to home', + redirect: '/', + }; + + constructor(props: ExceptionProps) { + super(props); + this.state = {}; + } + + render() { + const { + className, + backText, + linkElement = 'a', + type = '404', + title, + desc, + img, + actions, + redirect, + ...rest + } = this.props; + const pageType = type in config ? type : '404'; + const clsString = classNames(styles.exception, className); + return ( +
+
+
+
+
+

{title || config[pageType].title}

+
{desc || config[pageType].desc}
+
+ {actions || + createElement( + linkElement as any, + { + to: redirect, + href: redirect, + }, + + )} +
+
+
+ ); + } +} + +export default Exception; diff --git a/Exception404/src/components/Exception/index.zh-CN.md b/Exception404/src/components/Exception/index.zh-CN.md new file mode 100644 index 00000000..2e64399f --- /dev/null +++ b/Exception404/src/components/Exception/index.zh-CN.md @@ -0,0 +1,21 @@ +--- +title: Exception +subtitle: 异常 +cols: 1 +order: 5 +--- + +异常页用于对页面特定的异常状态进行反馈。通常，它包含对错误状态的阐述，并向用户提供建议或操作，避免用户感到迷失和困惑。 + +## API + +| 参数 | 说明| 类型 | 默认值 | +|-------------|------------------------------------------|-------------|-------| +| backText| 默认的返回按钮文本 | ReactNode| back to home | +| type| 页面类型，若配置，则自带对应类型默认的 `title`，`desc`，`img`，此默认设置可以被 `title`，`desc`，`img` 覆盖 | Enum {'403', '404', '500'} | - | +| title | 标题 | ReactNode| -| +| desc| 补充描述| ReactNode| -| +| img | 背景图片地址 | string| -| +| actions | 建议操作，配置此属性时默认的『返回首页』按钮不生效| ReactNode| -| +| linkElement | 定义链接的元素 | string\|ReactElement | 'a' | +| redirect | 返回按钮的跳转地址 | string | '/' diff --git a/Exception404/src/components/Exception/typeConfig.ts b/Exception404/src/components/Exception/typeConfig.ts new file mode 100644 index 00000000..453a5edc --- /dev/null +++ b/Exception404/src/components/Exception/typeConfig.ts @@ -0,0 +1,36 @@ +interface Config { + 403: { + img: string; + title: string; + desc: string; + }; + 404: { + img: string; + title: string; + desc: string; + }; + 500: { + img: string; + title: string; + desc: string; + }; +} +const config: Config = { + 403: { + img: 'https://gw.alipayobjects.com/zos/rmsportal/wZcnGqRDyhPOEYFcZDnb.svg', + title: '403', + desc: '抱歉，你无权访问该页面', + }, + 404: { + img: 'https://gw.alipayobjects.com/zos/rmsportal/KpnpchXsobRgLElEozzI.svg', + title: '404', + desc: '抱歉，你访问的页面不存在', + }, + 500: { + img: 'https://gw.alipayobjects.com/zos/rmsportal/RVRUAYdCGeYNBWoKiIwB.svg', + title: '500', + desc: '抱歉，服务器出错了', + }, +}; + +export default config; diff --git a/Exception404/src/index.js b/Exception404/src/index.tsx similarity index 64% rename from Exception404/src/index.js rename to Exception404/src/index.tsx index d5b93d43..1239c2c1 100644 --- a/Exception404/src/index.js +++ b/Exception404/src/index.tsx @@ -1,13 +1,13 @@ import React from 'react'; -import { formatMessage } from 'umi/locale'; +import { formatMessage } from 'umi-plugin-react/locale'; import Link from 'umi/link'; -import { Exception } from 'ant-design-pro'; +import Exception from './components/Exception'; -const PAGE_NAME_UPPER_CAMEL_CASE = () => ( +const PAGE_NAME_UPPER_CAMEL_CASE: React.FC = () => ( ); diff --git a/Exception404/src/locales/en-US.js b/Exception404/src/locales/en-US.ts similarity index 100% rename from Exception404/src/locales/en-US.js rename to Exception404/src/locales/en-US.ts diff --git a/Exception404/src/locales/pt-BR.js b/Exception404/src/locales/pt-BR.ts similarity index 100% rename from Exception404/src/locales/pt-BR.js rename to Exception404/src/locales/pt-BR.ts diff --git a/Exception404/src/locales/zh-CN.js b/Exception404/src/locales/zh-CN.ts similarity index 100% rename from Exception404/src/locales/zh-CN.js rename to Exception404/src/locales/zh-CN.ts diff --git a/Exception404/src/locales/zh-TW.js b/Exception404/src/locales/zh-TW.ts similarity index 100% rename from Exception404/src/locales/zh-TW.js rename to Exception404/src/locales/zh-TW.ts diff --git a/Exception404/tsconfig.json b/Exception404/tsconfig.json new file mode 100644 index 00000000..48b504b7 --- /dev/null +++ b/Exception404/tsconfig.json @@ -0,0 +1,32 @@ +{ + "compilerOptions": { + "outDir": "build/dist", + "module": "esnext", + "target": "esnext", + "lib": ["esnext", "dom"], + "sourceMap": true, + "baseUrl": ".", + "jsx": "react", + "allowSyntheticDefaultImports": true, + "moduleResolution": "node", + "rootDirs": ["/src", "/test", "/mock", "./typings"], + "forceConsistentCasingInFileNames": true, + "noImplicitReturns": true, + "suppressImplicitAnyIndexErrors": true, + "noUnusedLocals": true, + "allowJs": true, + "experimentalDecorators": true, + "strict": true, + "paths": { + "@/*": ["./src/*"] + } + }, + "include": ["."], + "exclude": [ + "node_modules", + "_scripts", + "jest", + "tslint:latest", + "tslint-config-prettier" + ] +} diff --git a/Exception404/tslint.yml b/Exception404/tslint.yml new file mode 100644 index 00000000..a3e95faf --- /dev/null +++ b/Exception404/tslint.yml @@ -0,0 +1,95 @@ +defaultSeverity: error +extends: + - tslint-react + - tslint-eslint-rules + - tslint-config-prettier +jsRules: +rules: + class-name: true + eofline: true + forin: true + jsdoc-format: false + label-position: true + member-ordering: + - true + - order: statics-first + new-parens: true + no-arg: true + no-bitwise: true + no-conditional-assignment: true + no-consecutive-blank-lines: true + no-console: + - true + - debug + - info + - log + - time + - timeEnd + - trace + - warn + no-construct: true + no-debugger: true + no-duplicate-variable: true + no-eval: true + no-internal-module: true + no-multi-spaces: true + no-namespace: true + no-reference: true + no-shadowed-variable: true + no-string-literal: true + no-trailing-whitespace: true + no-unused-expression: true + no-var-keyword: true + one-variable-per-declaration: + - true + - ignore-for-loop + prefer-const: + - true + - destructuring: all + radix: true + space-in-parens: true + switch-default: true + trailing-comma: + - true + - singleline: never + multiline: always + esSpecCompliant: true + triple-equals: + - true + - allow-null-check + typedef-whitespace: + - true + - call-signature: nospace + index-signature: nospace + parameter: nospace + property-declaration: nospace + variable-declaration: nospace + - call-signature: onespace + index-signature: onespace + parameter: onespace + property-declaration: onespace + variable-declaration: onespace + use-isnan: true + variable-name: + - true + - allow-leading-underscore + - ban-keywords + - check-format + - allow-pascal-case + jsx-no-lambda: false + jsx-no-string-ref: false + jsx-boolean-value: + - true + - never + jsx-no-multiline-js: false + whitespace: + - true + - check-branch + - check-decl + - check-operator + - check-module + - check-separator + - check-rest-spread + - check-type + - check-type-operator + - check-preblock diff --git a/Exception404/typings.d.ts b/Exception404/typings.d.ts new file mode 100644 index 00000000..31596c27 --- /dev/null +++ b/Exception404/typings.d.ts @@ -0,0 +1,12 @@ +declare module '*.css'; +declare module '*.less'; +declare module '*.scss'; +declare module '*.sass'; +declare module '*.svg'; +declare module '*.png'; +declare module '*.jpg'; +declare module '*.jpeg'; +declare module '*.gif'; +declare module '*.bmp'; +declare module '*.tiff'; +declare var APP_TYPE: string; -- GitLab