提交 6c0128a4c9841e2784524bd433cef3b646a72bc8

作者 ycjcl868
1 个父辈 b02b0f38

feat: BasicList umi-blocks

... ... @@ -64,3 +64,6 @@ typings/
64 64 pages
65 65 .umi
66 66 .umi-production
  67 +
  68 +# MacOS
  69 +.DS_Store
... ...
1 1 export default {
2 2 plugins: [
3   - ['umi-plugin-block-dev', {}],
  3 + ['umi-plugin-block-dev', {
  4 + layout: 'ant-design-pro',
  5 + }],
4 6 ['umi-plugin-react', {
5 7 dva: true,
6 8 locale: true,
... ...
1   -import React, { PureComponent } from 'react';
2   -import { connect } from 'dva';
3   -import styles from './GridContent.less';
4   -
5   -class GridContent extends PureComponent {
6   - render() {
7   - const { contentWidth, children } = this.props;
8   - let className = `${styles.main}`;
9   - if (contentWidth === 'Fixed') {
10   - className = `${styles.main} ${styles.wide}`;
11   - }
12   - return <div className={className}>{children}</div>;
13   - }
14   -}
15   -
16   -export default connect(({ setting }) => ({
17   - contentWidth: setting.contentWidth,
18   -}))(GridContent);
1   -.main {
2   - width: 100%;
3   - height: 100%;
4   - min-height: 100%;
5   - transition: 0.3s;
6   - &.wide {
7   - max-width: 1200px;
8   - margin: 0 auto;
9   - }
10   -}
1   -import React from 'react';
2   -import { FormattedMessage } from 'umi/locale';
3   -import Link from 'umi/link';
4   -import PageHeader from 'ant-design-pro/lib/PageHeader';
5   -import { connect } from 'dva';
6   -import GridContent from './GridContent';
7   -import styles from './index.less';
8   -import MenuContext from '@/layouts/MenuContext';
9   -
10   -const PageHeaderWrapper = ({ children, contentWidth, wrapperClassName, top, ...restProps }) => (
11   - <div style={{ margin: '-24px -24px 0' }} className={wrapperClassName}>
12   - {top}
13   - <MenuContext.Consumer>
14   - {value => (
15   - <PageHeader
16   - wide={contentWidth === 'Fixed'}
17   - home={<FormattedMessage id="menu.home" defaultMessage="Home" />}
18   - {...value}
19   - key="pageheader"
20   - {...restProps}
21   - linkElement={Link}
22   - itemRender={item => {
23   - if (item.locale) {
24   - return <FormattedMessage id={item.locale} defaultMessage={item.title} />;
25   - }
26   - return item.title;
27   - }}
28   - />
29   - )}
30   - </MenuContext.Consumer>
31   - {children ? (
32   - <div className={styles.content}>
33   - <GridContent>{children}</GridContent>
34   - </div>
35   - ) : null}
36   - </div>
37   -);
38   -
39   -export default connect(({ setting }) => ({
40   - contentWidth: setting.contentWidth,
41   -}))(PageHeaderWrapper);
1   -@import '~antd/lib/style/themes/default.less';
2   -
3   -.content {
4   - margin: 24px 24px 0;
5   -}
6   -
7   -@media screen and (max-width: @screen-sm) {
8   - .content {
9   - margin: 24px 0 0;
10   - }
11   -}
1   -import { createContext } from 'react';
2   -
3   -export default createContext();
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   -}
... ... @@ -11,16 +11,17 @@
11 11 "url": "https://github.com/umijs/umi-blocks/basiclist"
12 12 },
13 13 "dependencies": {
14   - "react": "^16.6.3",
15   - "react-dom": "^16.6.3",
16   - "moment": "^2.22.2",
17   - "dva": "^2.4.0",
18 14 "ant-design-pro": "^2.1.1",
19 15 "antd": "^3.10.9",
20   - "qs": "^6.6.0",
  16 + "dva": "^2.4.0",
21 17 "hash.js": "^1.1.5",
  18 + "mockjs": "*",
  19 + "moment": "^2.22.2",
22 20 "nzh": "^1.0.3",
23   - "mockjs": "*"
  21 + "qs": "^6.6.0",
  22 + "react": "^16.6.3",
  23 + "react-dom": "^16.6.3",
  24 + "umi-request": "^1.0.0"
24 25 },
25 26 "devDependencies": {
26 27 "umi": "^2.3.0-beta.1",
... ...
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 1 import React, { PureComponent } from 'react';
  2 +import { FormattedMessage } from 'umi/locale';
2 3 import { findDOMNode } from 'react-dom';
3 4 import moment from 'moment';
4 5 import { connect } from 'dva';
... ... @@ -21,10 +22,9 @@ import {
21 22 Select,
22 23 } from 'antd';
23 24
24   -import PageHeaderWrapper from '@/components/PageHeaderWrapper';
25   -import Result from 'ant-design-pro/lib/Result';
  25 +import { Result } from 'ant-design-pro';
26 26
27   -import styles from './BasicList.less';
  27 +import styles from './style.less';
28 28
29 29 const FormItem = Form.Item;
30 30 const RadioButton = Radio.Button;
... ... @@ -253,7 +253,7 @@ class BasicList extends PureComponent {
253 253 );
254 254 };
255 255 return (
256   - <PageHeaderWrapper>
  256 + <React.Fragment>
257 257 <div className={styles.standardList}>
258 258 <Card bordered={false}>
259 259 <Row>
... ... @@ -272,7 +272,7 @@ class BasicList extends PureComponent {
272 272 <Card
273 273 className={styles.listCard}
274 274 bordered={false}
275   - title="标准列表"
  275 + title={<FormattedMessage id="menu.list.basiclist" defaultMessage="Basic List" />}
276 276 style={{ marginTop: 24 }}
277 277 bodyStyle={{ padding: '0 32px 40px 32px' }}
278 278 extra={extraContent}
... ... @@ -332,7 +332,7 @@ class BasicList extends PureComponent {
332 332 >
333 333 {getModalContent()}
334 334 </Modal>
335   - </PageHeaderWrapper>
  335 + </React.Fragment>
336 336 );
337 337 }
338 338 }
... ...
  1 +export default {
  2 + 'menu.list.basiclist': 'Basic List',
  3 +};
... ...
  1 +export default {
  2 + 'menu.list.basiclist': 'Lista Básica',
  3 +};
... ...
  1 +export default {
  2 + 'menu.list.basiclist': '标准列表',
  3 +};
... ...
  1 +export default {
  2 + 'menu.list.basiclist': '標淮列表',
  3 +};
... ...
1   -import { queryFakeList, removeFakeList, addFakeList, updateFakeList } from '@/services/api';
  1 +import { queryFakeList, removeFakeList, addFakeList, updateFakeList } from './service';
2 2
3 3 export default {
4 4 namespace: 'list',
... ...
1   -import { queryRule, removeRule, addRule, updateRule } from '@/services/api';
2   -
3   -export default {
4   - namespace: 'rule',
5   -
6   - state: {
7   - data: {
8   - list: [],
9   - pagination: {},
10   - },
11   - },
12   -
13   - effects: {
14   - *fetch({ payload }, { call, put }) {
15   - const response = yield call(queryRule, payload);
16   - yield put({
17   - type: 'save',
18   - payload: response,
19   - });
20   - },
21   - *add({ payload, callback }, { call, put }) {
22   - const response = yield call(addRule, payload);
23   - yield put({
24   - type: 'save',
25   - payload: response,
26   - });
27   - if (callback) callback();
28   - },
29   - *remove({ payload, callback }, { call, put }) {
30   - const response = yield call(removeRule, payload);
31   - yield put({
32   - type: 'save',
33   - payload: response,
34   - });
35   - if (callback) callback();
36   - },
37   - *update({ payload, callback }, { call, put }) {
38   - const response = yield call(updateRule, payload);
39   - yield put({
40   - type: 'save',
41   - payload: response,
42   - });
43   - if (callback) callback();
44   - },
45   - },
46   -
47   - reducers: {
48   - save(state, action) {
49   - return {
50   - ...state,
51   - data: action.payload,
52   - };
53   - },
54   - },
55   -};
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   -};
1 1 import { stringify } from 'qs';
2   -import request from '@/utils/request';
  2 +import request from 'umi-request';
3 3
4 4 export async function queryProjectNotice() {
5 5 return request('/api/project/notice');
... ...
注册登录 后发表评论