提交 cbfb44ff39d34a4607a8f58f9744911a220fabfa

作者 Yu
提交者 GitHub
2 个父辈 93564b98 6c0128a4

Merge pull request #5 from umijs/feat-BasicList

feat: BasicList umi-blocks
@@ -64,3 +64,6 @@ typings/ @@ -64,3 +64,6 @@ typings/
64 pages 64 pages
65 .umi 65 .umi
66 .umi-production 66 .umi-production
  67 +
  68 +# MacOS
  69 +.DS_Store
1 export default { 1 export default {
2 plugins: [ 2 plugins: [
3 - ['umi-plugin-block-dev', {}], 3 + ['umi-plugin-block-dev', {
  4 + layout: 'ant-design-pro',
  5 + }],
4 ['umi-plugin-react', { 6 ['umi-plugin-react', {
5 dva: true, 7 dva: true,
6 locale: true, 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,16 +11,17 @@
11 "url": "https://github.com/umijs/umi-blocks/basiclist" 11 "url": "https://github.com/umijs/umi-blocks/basiclist"
12 }, 12 },
13 "dependencies": { 13 "dependencies": {
14 - "react": "^16.6.3",  
15 - "react-dom": "^16.6.3",  
16 - "moment": "^2.22.2",  
17 - "dva": "^2.4.0",  
18 "ant-design-pro": "^2.1.1", 14 "ant-design-pro": "^2.1.1",
19 "antd": "^3.10.9", 15 "antd": "^3.10.9",
20 - "qs": "^6.6.0", 16 + "dva": "^2.4.0",
21 "hash.js": "^1.1.5", 17 "hash.js": "^1.1.5",
  18 + "mockjs": "*",
  19 + "moment": "^2.22.2",
22 "nzh": "^1.0.3", 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 "devDependencies": { 26 "devDependencies": {
26 "umi": "^2.3.0-beta.1", 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 import React, { PureComponent } from 'react'; 1 import React, { PureComponent } from 'react';
  2 +import { FormattedMessage } from 'umi/locale';
2 import { findDOMNode } from 'react-dom'; 3 import { findDOMNode } from 'react-dom';
3 import moment from 'moment'; 4 import moment from 'moment';
4 import { connect } from 'dva'; 5 import { connect } from 'dva';
@@ -21,10 +22,9 @@ import { @@ -21,10 +22,9 @@ import {
21 Select, 22 Select,
22 } from 'antd'; 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 const FormItem = Form.Item; 29 const FormItem = Form.Item;
30 const RadioButton = Radio.Button; 30 const RadioButton = Radio.Button;
@@ -253,7 +253,7 @@ class BasicList extends PureComponent { @@ -253,7 +253,7 @@ class BasicList extends PureComponent {
253 ); 253 );
254 }; 254 };
255 return ( 255 return (
256 - <PageHeaderWrapper> 256 + <React.Fragment>
257 <div className={styles.standardList}> 257 <div className={styles.standardList}>
258 <Card bordered={false}> 258 <Card bordered={false}>
259 <Row> 259 <Row>
@@ -272,7 +272,7 @@ class BasicList extends PureComponent { @@ -272,7 +272,7 @@ class BasicList extends PureComponent {
272 <Card 272 <Card
273 className={styles.listCard} 273 className={styles.listCard}
274 bordered={false} 274 bordered={false}
275 - title="标准列表" 275 + title={<FormattedMessage id="menu.list.basiclist" defaultMessage="Basic List" />}
276 style={{ marginTop: 24 }} 276 style={{ marginTop: 24 }}
277 bodyStyle={{ padding: '0 32px 40px 32px' }} 277 bodyStyle={{ padding: '0 32px 40px 32px' }}
278 extra={extraContent} 278 extra={extraContent}
@@ -332,7 +332,7 @@ class BasicList extends PureComponent { @@ -332,7 +332,7 @@ class BasicList extends PureComponent {
332 > 332 >
333 {getModalContent()} 333 {getModalContent()}
334 </Modal> 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 export default { 3 export default {
4 namespace: 'list', 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 import { stringify } from 'qs'; 1 import { stringify } from 'qs';
2 -import request from '@/utils/request'; 2 +import request from 'umi-request';
3 3
4 export async function queryProjectNotice() { 4 export async function queryProjectNotice() {
5 return request('/api/project/notice'); 5 return request('/api/project/notice');
注册登录 后发表评论