@hankliu/rc-exception

在 HankLiu WebApp 页面中使用的通用的 Exception 组件，包含常见 401，403，404，500，502，503 等常见错误码对应的内容。

功能特征

• [x] 401 状态码
• [x] 403 状态码
• [x] 404 状态码
• [x] 500 状态码
• [x] 502 状态码
• [x] 503 状态码

安装

npm install @hankliu/rc-exception --save

or

yarn add @hankliu/rc-exception

or

pnpm install @hankliu/rc-exception

Usage

npm install
npm start

import { Col, ConfigProvider, Divider, Input, Row, Select } from '@hankliu/hankliu-ui';
import zhCN from '@hankliu/hankliu-ui/lib/locale/zh_CN';
import Exception, { EExceptionCode } from '@hankliu/rc-exception';
import * as React from 'react';
import '../../assets/index.less';

const codeOptions = [
  EExceptionCode.Unauthorized,
  EExceptionCode.Forbidden,
  EExceptionCode.NotFound,
  EExceptionCode.InternalServerError,
  EExceptionCode.BadGateway,
  EExceptionCode.ServiceUnavailable,
  EExceptionCode.GatewayTimeout,
];

export default function Base() {
  const [code, setCode] = React.useState<EExceptionCode>(EExceptionCode.Unauthorized);
  const [description, setDescription] = React.useState<string>();

  return (
    <ConfigProvider locale={zhCN}>
      <Exception code={code} description={description} />

      <Divider />

      <Row gutter={16}>
        <Col span={8}>
          <Row align="middle">
            <Col flex="80px">错误码:</Col>
            <Col flex="1">
              <Select
                value={code}
                style={{ width: '100%' }}
                onChange={val => {
                  setDescription(undefined);
                  setCode(val);
                }}
                showSearch
              >
                {codeOptions.map(item => (
                  <Select.Option key={item} value={item}>
                    {item}
                  </Select.Option>
                ))}
              </Select>
            </Col>
          </Row>
        </Col>

        <Col span={8}>
          <Row align="middle">
            <Col flex="80px">错误消息:</Col>
            <Col flex="1">
              <Input
                placeholder="请输入错误消息"
                style={{ width: '100' }}
                value={description}
                onChange={event => {
                  setDescription(event.target.value);
                }}
                allowClear
              />
            </Col>
          </Row>
        </Col>
      </Row>
    </ConfigProvider>
  );
}

API

| 名称 | 类型 | 默认值 | 描述 | | ----------- | -------------- | ------------------------------ | --------------------------- | | className | string | - | 组件外层元素 classname | | prefixCls | string | hlui-footer | 组件外层元素 classname 前缀 | | code | EExceptionCode | - | 错误码 | | description | string | ExceptionDescriptionEn[code] | 错误码对应的描述 |

案例

npm start 然后打开 http://localhost:8000/examples/

线上案例: https://hankliu62.github.io/rc-exception

单元测试

npm test

覆盖率

npm run coverage

License

@hankliu/rc-exception is released under the MIT license.