提交 cbfb44ff39d34a4607a8f58f9744911a220fabfa
提交者
GitHub
Merge pull request #5 from umijs/feat-BasicList
feat: BasicList umi-blocks
正在显示
20 个修改的文件
包含
33 行增加
和
440 行删除
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 | -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 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 | -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'); |
请
注册
或
登录
后发表评论