提交 d76c2e41c3fa54f98173e91a08034a1b3dc99c1b

作者 愚道
1 个父辈 a9c384da

init pro block exception 500

  1 +/yarn.lock
  2 +/package-lock.json
  3 +/dist
  4 +/node_modules
  5 +
  6 +.umi
  7 +.umi-production
  1 +export default {
  2 + plugins: [
  3 + ['umi-plugin-block-dev', {}],
  4 + ['umi-plugin-react', {
  5 + dva: true,
  6 + locale: true,
  7 + antd: true,
  8 + }]
  9 + ],
  10 +}
  1 +import request from '@/utils/request';
  2 +
  3 +export default async function queryError(code) {
  4 + return request(`/api/${code}`);
  5 +}
  1 +import fetch from 'dva/fetch';
  2 +import { notification } from 'antd';
  3 +import router from 'umi/router';
  4 +import hash from 'hash.js';
  5 +import { isAntdPro } from './utils';
  6 +
  7 +const codeMessage = {
  8 + 200: '服务器成功返回请求的数据。',
  9 + 201: '新建或修改数据成功。',
  10 + 202: '一个请求已经进入后台排队(异步任务)。',
  11 + 204: '删除数据成功。',
  12 + 400: '发出的请求有错误,服务器没有进行新建或修改数据的操作。',
  13 + 401: '用户没有权限(令牌、用户名、密码错误)。',
  14 + 403: '用户得到授权,但是访问是被禁止的。',
  15 + 404: '发出的请求针对的是不存在的记录,服务器没有进行操作。',
  16 + 406: '请求的格式不可得。',
  17 + 410: '请求的资源被永久删除,且不会再得到的。',
  18 + 422: '当创建一个对象时,发生一个验证错误。',
  19 + 500: '服务器发生错误,请检查服务器。',
  20 + 502: '网关错误。',
  21 + 503: '服务不可用,服务器暂时过载或维护。',
  22 + 504: '网关超时。',
  23 +};
  24 +
  25 +const checkStatus = response => {
  26 + if (response.status >= 200 && response.status < 300) {
  27 + return response;
  28 + }
  29 + const errortext = codeMessage[response.status] || response.statusText;
  30 + notification.error({
  31 + message: `请求错误 ${response.status}: ${response.url}`,
  32 + description: errortext,
  33 + });
  34 + const error = new Error(errortext);
  35 + error.name = response.status;
  36 + error.response = response;
  37 + throw error;
  38 +};
  39 +
  40 +const cachedSave = (response, hashcode) => {
  41 + /**
  42 + * Clone a response data and store it in sessionStorage
  43 + * Does not support data other than json, Cache only json
  44 + */
  45 + const contentType = response.headers.get('Content-Type');
  46 + if (contentType && contentType.match(/application\/json/i)) {
  47 + // All data is saved as text
  48 + response
  49 + .clone()
  50 + .text()
  51 + .then(content => {
  52 + sessionStorage.setItem(hashcode, content);
  53 + sessionStorage.setItem(`${hashcode}:timestamp`, Date.now());
  54 + });
  55 + }
  56 + return response;
  57 +};
  58 +
  59 +/**
  60 + * Requests a URL, returning a promise.
  61 + *
  62 + * @param {string} url The URL we want to request
  63 + * @param {object} [option] The options we want to pass to "fetch"
  64 + * @return {object} An object containing either "data" or "err"
  65 + */
  66 +export default function request(url, option) {
  67 + const options = {
  68 + expirys: isAntdPro(),
  69 + ...option,
  70 + };
  71 + /**
  72 + * Produce fingerprints based on url and parameters
  73 + * Maybe url has the same parameters
  74 + */
  75 + const fingerprint = url + (options.body ? JSON.stringify(options.body) : '');
  76 + const hashcode = hash
  77 + .sha256()
  78 + .update(fingerprint)
  79 + .digest('hex');
  80 +
  81 + const defaultOptions = {
  82 + credentials: 'include',
  83 + };
  84 + const newOptions = { ...defaultOptions, ...options };
  85 + if (
  86 + newOptions.method === 'POST' ||
  87 + newOptions.method === 'PUT' ||
  88 + newOptions.method === 'DELETE'
  89 + ) {
  90 + if (!(newOptions.body instanceof FormData)) {
  91 + newOptions.headers = {
  92 + Accept: 'application/json',
  93 + 'Content-Type': 'application/json; charset=utf-8',
  94 + ...newOptions.headers,
  95 + };
  96 + newOptions.body = JSON.stringify(newOptions.body);
  97 + } else {
  98 + // newOptions.body is FormData
  99 + newOptions.headers = {
  100 + Accept: 'application/json',
  101 + ...newOptions.headers,
  102 + };
  103 + }
  104 + }
  105 +
  106 + const expirys = options.expirys && 60;
  107 + // options.expirys !== false, return the cache,
  108 + if (options.expirys !== false) {
  109 + const cached = sessionStorage.getItem(hashcode);
  110 + const whenCached = sessionStorage.getItem(`${hashcode}:timestamp`);
  111 + if (cached !== null && whenCached !== null) {
  112 + const age = (Date.now() - whenCached) / 1000;
  113 + if (age < expirys) {
  114 + const response = new Response(new Blob([cached]));
  115 + return response.json();
  116 + }
  117 + sessionStorage.removeItem(hashcode);
  118 + sessionStorage.removeItem(`${hashcode}:timestamp`);
  119 + }
  120 + }
  121 + return fetch(url, newOptions)
  122 + .then(checkStatus)
  123 + .then(response => cachedSave(response, hashcode))
  124 + .then(response => {
  125 + // DELETE and 204 do not return data by default
  126 + // using .json will report an error.
  127 + if (newOptions.method === 'DELETE' || response.status === 204) {
  128 + return response.text();
  129 + }
  130 + return response.json();
  131 + })
  132 + .catch(e => {
  133 + const status = e.name;
  134 + if (status === 401) {
  135 + // @HACK
  136 + /* eslint-disable no-underscore-dangle */
  137 + window.g_app._store.dispatch({
  138 + type: 'login/logout',
  139 + });
  140 + return;
  141 + }
  142 + // environment should not be used
  143 + if (status === 403) {
  144 + router.push('/exception/403');
  145 + return;
  146 + }
  147 + if (status <= 504 && status >= 500) {
  148 + router.push('/exception/500');
  149 + return;
  150 + }
  151 + if (status >= 404 && status < 422) {
  152 + router.push('/exception/404');
  153 + }
  154 + });
  155 +}
  1 +import moment from 'moment';
  2 +import React from 'react';
  3 +import nzh from 'nzh/cn';
  4 +import { parse, stringify } from 'qs';
  5 +
  6 +export function fixedZero(val) {
  7 + return val * 1 < 10 ? `0${val}` : val;
  8 +}
  9 +
  10 +export function getTimeDistance(type) {
  11 + const now = new Date();
  12 + const oneDay = 1000 * 60 * 60 * 24;
  13 +
  14 + if (type === 'today') {
  15 + now.setHours(0);
  16 + now.setMinutes(0);
  17 + now.setSeconds(0);
  18 + return [moment(now), moment(now.getTime() + (oneDay - 1000))];
  19 + }
  20 +
  21 + if (type === 'week') {
  22 + let day = now.getDay();
  23 + now.setHours(0);
  24 + now.setMinutes(0);
  25 + now.setSeconds(0);
  26 +
  27 + if (day === 0) {
  28 + day = 6;
  29 + } else {
  30 + day -= 1;
  31 + }
  32 +
  33 + const beginTime = now.getTime() - day * oneDay;
  34 +
  35 + return [moment(beginTime), moment(beginTime + (7 * oneDay - 1000))];
  36 + }
  37 +
  38 + if (type === 'month') {
  39 + const year = now.getFullYear();
  40 + const month = now.getMonth();
  41 + const nextDate = moment(now).add(1, 'months');
  42 + const nextYear = nextDate.year();
  43 + const nextMonth = nextDate.month();
  44 +
  45 + return [
  46 + moment(`${year}-${fixedZero(month + 1)}-01 00:00:00`),
  47 + moment(moment(`${nextYear}-${fixedZero(nextMonth + 1)}-01 00:00:00`).valueOf() - 1000),
  48 + ];
  49 + }
  50 +
  51 + const year = now.getFullYear();
  52 + return [moment(`${year}-01-01 00:00:00`), moment(`${year}-12-31 23:59:59`)];
  53 +}
  54 +
  55 +export function getPlainNode(nodeList, parentPath = '') {
  56 + const arr = [];
  57 + nodeList.forEach(node => {
  58 + const item = node;
  59 + item.path = `${parentPath}/${item.path || ''}`.replace(/\/+/g, '/');
  60 + item.exact = true;
  61 + if (item.children && !item.component) {
  62 + arr.push(...getPlainNode(item.children, item.path));
  63 + } else {
  64 + if (item.children && item.component) {
  65 + item.exact = false;
  66 + }
  67 + arr.push(item);
  68 + }
  69 + });
  70 + return arr;
  71 +}
  72 +
  73 +export function digitUppercase(n) {
  74 + return nzh.toMoney(n);
  75 +}
  76 +
  77 +function getRelation(str1, str2) {
  78 + if (str1 === str2) {
  79 + console.warn('Two path are equal!'); // eslint-disable-line
  80 + }
  81 + const arr1 = str1.split('/');
  82 + const arr2 = str2.split('/');
  83 + if (arr2.every((item, index) => item === arr1[index])) {
  84 + return 1;
  85 + }
  86 + if (arr1.every((item, index) => item === arr2[index])) {
  87 + return 2;
  88 + }
  89 + return 3;
  90 +}
  91 +
  92 +function getRenderArr(routes) {
  93 + let renderArr = [];
  94 + renderArr.push(routes[0]);
  95 + for (let i = 1; i < routes.length; i += 1) {
  96 + // 去重
  97 + renderArr = renderArr.filter(item => getRelation(item, routes[i]) !== 1);
  98 + // 是否包含
  99 + const isAdd = renderArr.every(item => getRelation(item, routes[i]) === 3);
  100 + if (isAdd) {
  101 + renderArr.push(routes[i]);
  102 + }
  103 + }
  104 + return renderArr;
  105 +}
  106 +
  107 +/**
  108 + * Get router routing configuration
  109 + * { path:{name,...param}}=>Array<{name,path ...param}>
  110 + * @param {string} path
  111 + * @param {routerData} routerData
  112 + */
  113 +export function getRoutes(path, routerData) {
  114 + let routes = Object.keys(routerData).filter(
  115 + routePath => routePath.indexOf(path) === 0 && routePath !== path
  116 + );
  117 + // Replace path to '' eg. path='user' /user/name => name
  118 + routes = routes.map(item => item.replace(path, ''));
  119 + // Get the route to be rendered to remove the deep rendering
  120 + const renderArr = getRenderArr(routes);
  121 + // Conversion and stitching parameters
  122 + const renderRoutes = renderArr.map(item => {
  123 + const exact = !routes.some(route => route !== item && getRelation(route, item) === 1);
  124 + return {
  125 + exact,
  126 + ...routerData[`${path}${item}`],
  127 + key: `${path}${item}`,
  128 + path: `${path}${item}`,
  129 + };
  130 + });
  131 + return renderRoutes;
  132 +}
  133 +
  134 +export function getPageQuery() {
  135 + return parse(window.location.href.split('?')[1]);
  136 +}
  137 +
  138 +export function getQueryPath(path = '', query = {}) {
  139 + const search = stringify(query);
  140 + if (search.length) {
  141 + return `${path}?${search}`;
  142 + }
  143 + return path;
  144 +}
  145 +
  146 +/* eslint no-useless-escape:0 */
  147 +const reg = /(((^https?:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+(?::\d+)?|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)$/;
  148 +
  149 +export function isUrl(path) {
  150 + return reg.test(path);
  151 +}
  152 +
  153 +export function formatWan(val) {
  154 + const v = val * 1;
  155 + if (!v || Number.isNaN(v)) return '';
  156 +
  157 + let result = val;
  158 + if (val > 10000) {
  159 + result = Math.floor(val / 10000);
  160 + result = (
  161 + <span>
  162 + {result}
  163 + <span
  164 + style={{
  165 + position: 'relative',
  166 + top: -2,
  167 + fontSize: 14,
  168 + fontStyle: 'normal',
  169 + marginLeft: 2,
  170 + }}
  171 + >
  172 +
  173 + </span>
  174 + </span>
  175 + );
  176 + }
  177 + return result;
  178 +}
  179 +
  180 +// 给官方演示站点用,用于关闭真实开发环境不需要使用的特性
  181 +export function isAntdPro() {
  182 + return window.location.hostname === 'preview.pro.ant.design';
  183 +}
  1 +# @umi-material/exception500
  2 +
  3 +Exception500
  4 +
  5 +## Usage
  6 +
  7 +```sh
  8 +umi block https://github.com/umijs/umi-blocks/tree/master/exception500
  9 +```
  10 +
  11 +## LICENSE
  12 +
  13 +MIT
  1 +{
  2 + "name": "@umi-block/exception500",
  3 + "version": "0.0.1",
  4 + "description": "Exception500",
  5 + "main": "src/index.js",
  6 + "scripts": {
  7 + "dev": "umi dev"
  8 + },
  9 + "repository": {
  10 + "type": "git",
  11 + "url": "https://github.com/umijs/umi-blocks/exception500"
  12 + },
  13 + "dependencies": {
  14 + "react": "^16.6.3",
  15 + "ant-design-pro": "^2.1.1",
  16 + "dva": "^2.4.0",
  17 + "antd": "^3.10.9",
  18 + "hash.js": "^1.1.5",
  19 + "moment": "^2.22.2",
  20 + "nzh": "^1.0.3",
  21 + "qs": "^6.6.0"
  22 + },
  23 + "devDependencies": {
  24 + "umi": "^2.3.0-beta.1",
  25 + "umi-plugin-react": "^1.3.0-beta.1",
  26 + "umi-plugin-block-dev": "^1.0.0"
  27 + },
  28 + "license": "ISC"
  29 +}
  1 +module.exports = {
  2 + navTheme: 'dark', // theme for nav menu
  3 + primaryColor: '#1890FF', // primary color of ant design
  4 + layout: 'sidemenu', // nav menu position: sidemenu or topmenu
  5 + contentWidth: 'Fluid', // layout of content: Fluid or Fixed, only works when layout is topmenu
  6 + fixedHeader: false, // sticky header
  7 + autoHideHeader: false, // auto hide header
  8 + fixSiderbar: false, // sticky siderbar
  9 +};
  1 +import React from 'react';
  2 +import { formatMessage } from 'umi/locale';
  3 +import Link from 'umi/link';
  4 +import Exception from 'ant-design-pro/lib/Exception';
  5 +
  6 +const Exception500 = () => (
  7 + <Exception
  8 + type="500"
  9 + desc={formatMessage({ id: 'app.exception.description.500' })}
  10 + linkElement={Link}
  11 + backText={formatMessage({ id: 'app.exception.back' })}
  12 + />
  13 +);
  14 +
  15 +export default Exception500;
  1 +export default {
  2 + 'app.exception.back': 'Back to home',
  3 + 'app.exception.description.403': "Sorry, you don't have access to this page",
  4 + 'app.exception.description.404': 'Sorry, the page you visited does not exist',
  5 + 'app.exception.description.500': 'Sorry, the server is reporting an error',
  6 +};
  1 +export default {
  2 + 'app.exception.back': '返回首页',
  3 + 'app.exception.description.403': '抱歉,你无权访问该页面',
  4 + 'app.exception.description.404': '抱歉,你访问的页面不存在',
  5 + 'app.exception.description.500': '抱歉,服务器出错了',
  6 +};
  1 +export default {
  2 + 'app.exception.back': '返回首頁',
  3 + 'app.exception.description.403': '抱歉,妳無權訪問該頁面',
  4 + 'app.exception.description.404': '抱歉,妳訪問的頁面不存在',
  5 + 'app.exception.description.500': '抱歉,服務器出錯了',
  6 +};
  1 +import queryError from '@/services/error';
  2 +
  3 +export default {
  4 + namespace: 'error',
  5 +
  6 + state: {
  7 + error: '',
  8 + isloading: false,
  9 + },
  10 +
  11 + effects: {
  12 + *query({ payload }, { call, put }) {
  13 + yield call(queryError, payload.code);
  14 + yield put({
  15 + type: 'trigger',
  16 + payload: payload.code,
  17 + });
  18 + },
  19 + },
  20 +
  21 + reducers: {
  22 + trigger(state, action) {
  23 + return {
  24 + error: action.payload,
  25 + };
  26 + },
  27 + },
  28 +};
  1 +import { message } from 'antd';
  2 +import defaultSettings from '../defaultSettings';
  3 +
  4 +let lessNodesAppended;
  5 +const updateTheme = primaryColor => {
  6 + // Don't compile less in production!
  7 + if (APP_TYPE !== 'site') {
  8 + return;
  9 + }
  10 + // Determine if the component is remounted
  11 + if (!primaryColor) {
  12 + return;
  13 + }
  14 + const hideMessage = message.loading('正在编译主题!', 0);
  15 + function buildIt() {
  16 + if (!window.less) {
  17 + return;
  18 + }
  19 + setTimeout(() => {
  20 + window.less
  21 + .modifyVars({
  22 + '@primary-color': primaryColor,
  23 + })
  24 + .then(() => {
  25 + hideMessage();
  26 + })
  27 + .catch(() => {
  28 + message.error('Failed to update theme');
  29 + hideMessage();
  30 + });
  31 + }, 200);
  32 + }
  33 + if (!lessNodesAppended) {
  34 + // insert less.js and color.less
  35 + const lessStyleNode = document.createElement('link');
  36 + const lessConfigNode = document.createElement('script');
  37 + const lessScriptNode = document.createElement('script');
  38 + lessStyleNode.setAttribute('rel', 'stylesheet/less');
  39 + lessStyleNode.setAttribute('href', '/color.less');
  40 + lessConfigNode.innerHTML = `
  41 + window.less = {
  42 + async: true,
  43 + env: 'production',
  44 + javascriptEnabled: true
  45 + };
  46 + `;
  47 + lessScriptNode.src = 'https://gw.alipayobjects.com/os/lib/less.js/3.8.1/less.min.js';
  48 + lessScriptNode.async = true;
  49 + lessScriptNode.onload = () => {
  50 + buildIt();
  51 + lessScriptNode.onload = null;
  52 + };
  53 + document.body.appendChild(lessStyleNode);
  54 + document.body.appendChild(lessConfigNode);
  55 + document.body.appendChild(lessScriptNode);
  56 + lessNodesAppended = true;
  57 + } else {
  58 + buildIt();
  59 + }
  60 +};
  61 +
  62 +const updateColorWeak = colorWeak => {
  63 + document.body.className = colorWeak ? 'colorWeak' : '';
  64 +};
  65 +
  66 +export default {
  67 + namespace: 'setting',
  68 + state: defaultSettings,
  69 + reducers: {
  70 + getSetting(state) {
  71 + const setting = {};
  72 + const urlParams = new URL(window.location.href);
  73 + Object.keys(state).forEach(key => {
  74 + if (urlParams.searchParams.has(key)) {
  75 + const value = urlParams.searchParams.get(key);
  76 + setting[key] = value === '1' ? true : value;
  77 + }
  78 + });
  79 + const { primaryColor, colorWeak } = setting;
  80 + if (state.primaryColor !== primaryColor) {
  81 + updateTheme(primaryColor);
  82 + }
  83 + updateColorWeak(colorWeak);
  84 + return {
  85 + ...state,
  86 + ...setting,
  87 + };
  88 + },
  89 + changeSetting(state, { payload }) {
  90 + const urlParams = new URL(window.location.href);
  91 + Object.keys(defaultSettings).forEach(key => {
  92 + if (urlParams.searchParams.has(key)) {
  93 + urlParams.searchParams.delete(key);
  94 + }
  95 + });
  96 + Object.keys(payload).forEach(key => {
  97 + if (key === 'collapse') {
  98 + return;
  99 + }
  100 + let value = payload[key];
  101 + if (value === true) {
  102 + value = 1;
  103 + }
  104 + if (defaultSettings[key] !== value) {
  105 + urlParams.searchParams.set(key, value);
  106 + }
  107 + });
  108 + const { primaryColor, colorWeak, contentWidth } = payload;
  109 + if (state.primaryColor !== primaryColor) {
  110 + updateTheme(primaryColor);
  111 + }
  112 + if (state.contentWidth !== contentWidth && window.dispatchEvent) {
  113 + window.dispatchEvent(new Event('resize'));
  114 + }
  115 + updateColorWeak(colorWeak);
  116 + window.history.replaceState(null, 'setting', urlParams.href);
  117 + return {
  118 + ...state,
  119 + ...payload,
  120 + };
  121 + },
  122 + },
  123 +};
注册登录 后发表评论