正在显示
25 个修改的文件
包含
1849 行增加
和
0 行删除
ant-design-pro/Workplace/.gitignore
0 → 100644
ant-design-pro/Workplace/.umirc.js
0 → 100644
1 | +import React, { PureComponent, createElement } from 'react'; | |
2 | +import PropTypes from 'prop-types'; | |
3 | +import { Button } from 'antd'; | |
4 | +import styles from './index.less'; | |
5 | + | |
6 | +// TODO: 添加逻辑 | |
7 | + | |
8 | +class EditableLinkGroup extends PureComponent { | |
9 | + static propTypes = { | |
10 | + links: PropTypes.array, | |
11 | + onAdd: PropTypes.func, | |
12 | + linkElement: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), | |
13 | + }; | |
14 | + | |
15 | + static defaultProps = { | |
16 | + links: [], | |
17 | + onAdd: () => {}, | |
18 | + linkElement: 'a', | |
19 | + }; | |
20 | + | |
21 | + render() { | |
22 | + const { links, linkElement, onAdd } = this.props; | |
23 | + return ( | |
24 | + <div className={styles.linkGroup}> | |
25 | + {links.map(link => | |
26 | + createElement( | |
27 | + linkElement, | |
28 | + { | |
29 | + key: `linkGroup-item-${link.id || link.title}`, | |
30 | + to: link.href, | |
31 | + href: link.href, | |
32 | + }, | |
33 | + link.title | |
34 | + ) | |
35 | + )} | |
36 | + { | |
37 | + <Button size="small" type="primary" ghost onClick={onAdd} icon="plus"> | |
38 | + 添加 | |
39 | + </Button> | |
40 | + } | |
41 | + </div> | |
42 | + ); | |
43 | + } | |
44 | +} | |
45 | + | |
46 | +export default EditableLinkGroup; | ... | ... |
1 | +@import '~antd/lib/style/themes/default.less'; | |
2 | + | |
3 | +.linkGroup { | |
4 | + padding: 20px 0 8px 24px; | |
5 | + font-size: 0; | |
6 | + & > a { | |
7 | + color: @text-color; | |
8 | + display: inline-block; | |
9 | + font-size: @font-size-base; | |
10 | + margin-bottom: 13px; | |
11 | + width: 25%; | |
12 | + &:hover { | |
13 | + color: @primary-color; | |
14 | + } | |
15 | + } | |
16 | +} | ... | ... |
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); | ... | ... |
ant-design-pro/Workplace/@/services/api.js
0 → 100644
1 | +import { stringify } from 'qs'; | |
2 | +import request from '@/utils/request'; | |
3 | + | |
4 | +export async function queryProjectNotice() { | |
5 | + return request('/api/project/notice'); | |
6 | +} | |
7 | + | |
8 | +export async function queryActivities() { | |
9 | + return request('/api/activities'); | |
10 | +} | |
11 | + | |
12 | +export async function queryRule(params) { | |
13 | + return request(`/api/rule?${stringify(params)}`); | |
14 | +} | |
15 | + | |
16 | +export async function removeRule(params) { | |
17 | + return request('/api/rule', { | |
18 | + method: 'POST', | |
19 | + body: { | |
20 | + ...params, | |
21 | + method: 'delete', | |
22 | + }, | |
23 | + }); | |
24 | +} | |
25 | + | |
26 | +export async function addRule(params) { | |
27 | + return request('/api/rule', { | |
28 | + method: 'POST', | |
29 | + body: { | |
30 | + ...params, | |
31 | + method: 'post', | |
32 | + }, | |
33 | + }); | |
34 | +} | |
35 | + | |
36 | +export async function updateRule(params) { | |
37 | + return request('/api/rule', { | |
38 | + method: 'POST', | |
39 | + body: { | |
40 | + ...params, | |
41 | + method: 'update', | |
42 | + }, | |
43 | + }); | |
44 | +} | |
45 | + | |
46 | +export async function fakeSubmitForm(params) { | |
47 | + return request('/api/forms', { | |
48 | + method: 'POST', | |
49 | + body: params, | |
50 | + }); | |
51 | +} | |
52 | + | |
53 | +export async function fakeChartData() { | |
54 | + return request('/api/fake_chart_data'); | |
55 | +} | |
56 | + | |
57 | +export async function queryTags() { | |
58 | + return request('/api/tags'); | |
59 | +} | |
60 | + | |
61 | +export async function queryBasicProfile() { | |
62 | + return request('/api/profile/basic'); | |
63 | +} | |
64 | + | |
65 | +export async function queryAdvancedProfile() { | |
66 | + return request('/api/profile/advanced'); | |
67 | +} | |
68 | + | |
69 | +export async function queryFakeList(params) { | |
70 | + return request(`/api/fake_list?${stringify(params)}`); | |
71 | +} | |
72 | + | |
73 | +export async function removeFakeList(params) { | |
74 | + const { count = 5, ...restParams } = params; | |
75 | + return request(`/api/fake_list?count=${count}`, { | |
76 | + method: 'POST', | |
77 | + body: { | |
78 | + ...restParams, | |
79 | + method: 'delete', | |
80 | + }, | |
81 | + }); | |
82 | +} | |
83 | + | |
84 | +export async function addFakeList(params) { | |
85 | + const { count = 5, ...restParams } = params; | |
86 | + return request(`/api/fake_list?count=${count}`, { | |
87 | + method: 'POST', | |
88 | + body: { | |
89 | + ...restParams, | |
90 | + method: 'post', | |
91 | + }, | |
92 | + }); | |
93 | +} | |
94 | + | |
95 | +export async function updateFakeList(params) { | |
96 | + const { count = 5, ...restParams } = params; | |
97 | + return request(`/api/fake_list?count=${count}`, { | |
98 | + method: 'POST', | |
99 | + body: { | |
100 | + ...restParams, | |
101 | + method: 'update', | |
102 | + }, | |
103 | + }); | |
104 | +} | |
105 | + | |
106 | +export async function fakeAccountLogin(params) { | |
107 | + return request('/api/login/account', { | |
108 | + method: 'POST', | |
109 | + body: params, | |
110 | + }); | |
111 | +} | |
112 | + | |
113 | +export async function fakeRegister(params) { | |
114 | + return request('/api/register', { | |
115 | + method: 'POST', | |
116 | + body: params, | |
117 | + }); | |
118 | +} | |
119 | + | |
120 | +export async function queryNotices() { | |
121 | + return request('/api/notices'); | |
122 | +} | |
123 | + | |
124 | +export async function getFakeCaptcha(mobile) { | |
125 | + return request(`/api/captcha?mobile=${mobile}`); | |
126 | +} | ... | ... |
ant-design-pro/Workplace/@/services/user.js
0 → 100644
ant-design-pro/Workplace/@/utils/request.js
0 → 100644
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 | +} | ... | ... |
ant-design-pro/Workplace/@/utils/utils.js
0 → 100644
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 | +} | ... | ... |
ant-design-pro/Workplace/@/utils/utils.less
0 → 100644
1 | +.textOverflow() { | |
2 | + overflow: hidden; | |
3 | + text-overflow: ellipsis; | |
4 | + word-break: break-all; | |
5 | + white-space: nowrap; | |
6 | +} | |
7 | + | |
8 | +.textOverflowMulti(@line: 3, @bg: #fff) { | |
9 | + overflow: hidden; | |
10 | + position: relative; | |
11 | + line-height: 1.5em; | |
12 | + max-height: @line * 1.5em; | |
13 | + text-align: justify; | |
14 | + margin-right: -1em; | |
15 | + padding-right: 1em; | |
16 | + &:before { | |
17 | + background: @bg; | |
18 | + content: '...'; | |
19 | + padding: 0 1px; | |
20 | + position: absolute; | |
21 | + right: 14px; | |
22 | + bottom: 0; | |
23 | + } | |
24 | + &:after { | |
25 | + background: white; | |
26 | + content: ''; | |
27 | + margin-top: 0.2em; | |
28 | + position: absolute; | |
29 | + right: 14px; | |
30 | + width: 1em; | |
31 | + height: 1em; | |
32 | + } | |
33 | +} | |
34 | + | |
35 | +// mixins for clearfix | |
36 | +// ------------------------ | |
37 | +.clearfix() { | |
38 | + zoom: 1; | |
39 | + &:before, | |
40 | + &:after { | |
41 | + content: ' '; | |
42 | + display: table; | |
43 | + } | |
44 | + &:after { | |
45 | + clear: both; | |
46 | + visibility: hidden; | |
47 | + font-size: 0; | |
48 | + height: 0; | |
49 | + } | |
50 | +} | ... | ... |
ant-design-pro/Workplace/README.md
0 → 100644
ant-design-pro/Workplace/package.json
0 → 100644
1 | +{ | |
2 | + "name": "@umi-block/workplace", | |
3 | + "version": "0.0.1", | |
4 | + "description": "Workplace", | |
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/workplace" | |
12 | + }, | |
13 | + "dependencies": { | |
14 | + "react": "^16.6.3", | |
15 | + "moment": "^2.22.2", | |
16 | + "dva": "^2.4.0", | |
17 | + "antd": "^3.10.9", | |
18 | + "ant-design-pro": "^2.1.1", | |
19 | + "prop-types": "^15.5.10", | |
20 | + "qs": "^6.6.0", | |
21 | + "hash.js": "^1.1.5", | |
22 | + "nzh": "^1.0.3", | |
23 | + "mockjs": "*" | |
24 | + }, | |
25 | + "devDependencies": { | |
26 | + "umi": "^2.3.0-beta.1", | |
27 | + "umi-plugin-react": "^1.3.0-beta.1", | |
28 | + "umi-plugin-block-dev": "^1.0.0" | |
29 | + }, | |
30 | + "license": "ISC" | |
31 | +} | ... | ... |
ant-design-pro/Workplace/src/Workplace.less
0 → 100644
1 | +@import '~antd/lib/style/themes/default.less'; | |
2 | +@import '~@/utils/utils.less'; | |
3 | + | |
4 | +.activitiesList { | |
5 | + padding: 0 24px 8px 24px; | |
6 | + .username { | |
7 | + color: @text-color; | |
8 | + } | |
9 | + .event { | |
10 | + font-weight: normal; | |
11 | + } | |
12 | +} | |
13 | + | |
14 | +.pageHeaderContent { | |
15 | + display: flex; | |
16 | + .avatar { | |
17 | + flex: 0 1 72px; | |
18 | + margin-bottom: 8px; | |
19 | + & > span { | |
20 | + border-radius: 72px; | |
21 | + display: block; | |
22 | + width: 72px; | |
23 | + height: 72px; | |
24 | + } | |
25 | + } | |
26 | + .content { | |
27 | + position: relative; | |
28 | + top: 4px; | |
29 | + margin-left: 24px; | |
30 | + flex: 1 1 auto; | |
31 | + color: @text-color-secondary; | |
32 | + line-height: 22px; | |
33 | + .contentTitle { | |
34 | + font-size: 20px; | |
35 | + line-height: 28px; | |
36 | + font-weight: 500; | |
37 | + color: @heading-color; | |
38 | + margin-bottom: 12px; | |
39 | + } | |
40 | + } | |
41 | +} | |
42 | + | |
43 | +.extraContent { | |
44 | + .clearfix(); | |
45 | + float: right; | |
46 | + white-space: nowrap; | |
47 | + .statItem { | |
48 | + padding: 0 32px; | |
49 | + position: relative; | |
50 | + display: inline-block; | |
51 | + > p:first-child { | |
52 | + color: @text-color-secondary; | |
53 | + font-size: @font-size-base; | |
54 | + line-height: 22px; | |
55 | + margin-bottom: 4px; | |
56 | + } | |
57 | + > p { | |
58 | + color: @heading-color; | |
59 | + font-size: 30px; | |
60 | + line-height: 38px; | |
61 | + margin: 0; | |
62 | + > span { | |
63 | + color: @text-color-secondary; | |
64 | + font-size: 20px; | |
65 | + } | |
66 | + } | |
67 | + &:after { | |
68 | + background-color: @border-color-split; | |
69 | + position: absolute; | |
70 | + top: 8px; | |
71 | + right: 0; | |
72 | + width: 1px; | |
73 | + height: 40px; | |
74 | + content: ''; | |
75 | + } | |
76 | + &:last-child { | |
77 | + padding-right: 0; | |
78 | + &:after { | |
79 | + display: none; | |
80 | + } | |
81 | + } | |
82 | + } | |
83 | +} | |
84 | + | |
85 | +.members { | |
86 | + a { | |
87 | + display: block; | |
88 | + margin: 12px 0; | |
89 | + height: 24px; | |
90 | + color: @text-color; | |
91 | + transition: all 0.3s; | |
92 | + .textOverflow(); | |
93 | + .member { | |
94 | + font-size: @font-size-base; | |
95 | + line-height: 24px; | |
96 | + vertical-align: top; | |
97 | + margin-left: 12px; | |
98 | + } | |
99 | + &:hover { | |
100 | + color: @primary-color; | |
101 | + } | |
102 | + } | |
103 | +} | |
104 | + | |
105 | +.projectList { | |
106 | + :global { | |
107 | + .ant-card-meta-description { | |
108 | + color: @text-color-secondary; | |
109 | + height: 44px; | |
110 | + line-height: 22px; | |
111 | + overflow: hidden; | |
112 | + } | |
113 | + } | |
114 | + .cardTitle { | |
115 | + font-size: 0; | |
116 | + a { | |
117 | + color: @heading-color; | |
118 | + margin-left: 12px; | |
119 | + line-height: 24px; | |
120 | + height: 24px; | |
121 | + display: inline-block; | |
122 | + vertical-align: top; | |
123 | + font-size: @font-size-base; | |
124 | + &:hover { | |
125 | + color: @primary-color; | |
126 | + } | |
127 | + } | |
128 | + } | |
129 | + .projectGrid { | |
130 | + width: 33.33%; | |
131 | + } | |
132 | + .projectItemContent { | |
133 | + display: flex; | |
134 | + margin-top: 8px; | |
135 | + overflow: hidden; | |
136 | + font-size: 12px; | |
137 | + height: 20px; | |
138 | + line-height: 20px; | |
139 | + .textOverflow(); | |
140 | + a { | |
141 | + color: @text-color-secondary; | |
142 | + display: inline-block; | |
143 | + flex: 1 1 0; | |
144 | + .textOverflow(); | |
145 | + &:hover { | |
146 | + color: @primary-color; | |
147 | + } | |
148 | + } | |
149 | + .datetime { | |
150 | + color: @disabled-color; | |
151 | + flex: 0 0 auto; | |
152 | + float: right; | |
153 | + } | |
154 | + } | |
155 | +} | |
156 | + | |
157 | +.datetime { | |
158 | + color: @disabled-color; | |
159 | +} | |
160 | + | |
161 | +@media screen and (max-width: @screen-xl) and (min-width: @screen-lg) { | |
162 | + .activeCard { | |
163 | + margin-bottom: 24px; | |
164 | + } | |
165 | + .members { | |
166 | + margin-bottom: 0; | |
167 | + } | |
168 | + .extraContent { | |
169 | + margin-left: -44px; | |
170 | + .statItem { | |
171 | + padding: 0 16px; | |
172 | + } | |
173 | + } | |
174 | +} | |
175 | + | |
176 | +@media screen and (max-width: @screen-lg) { | |
177 | + .activeCard { | |
178 | + margin-bottom: 24px; | |
179 | + } | |
180 | + .members { | |
181 | + margin-bottom: 0; | |
182 | + } | |
183 | + .extraContent { | |
184 | + float: none; | |
185 | + margin-right: 0; | |
186 | + .statItem { | |
187 | + padding: 0 16px; | |
188 | + text-align: left; | |
189 | + &:after { | |
190 | + display: none; | |
191 | + } | |
192 | + } | |
193 | + } | |
194 | +} | |
195 | + | |
196 | +@media screen and (max-width: @screen-md) { | |
197 | + .extraContent { | |
198 | + margin-left: -16px; | |
199 | + } | |
200 | + .projectList { | |
201 | + .projectGrid { | |
202 | + width: 50%; | |
203 | + } | |
204 | + } | |
205 | +} | |
206 | + | |
207 | +@media screen and (max-width: @screen-sm) { | |
208 | + .pageHeaderContent { | |
209 | + display: block; | |
210 | + .content { | |
211 | + margin-left: 0; | |
212 | + } | |
213 | + } | |
214 | + .extraContent { | |
215 | + .statItem { | |
216 | + float: none; | |
217 | + } | |
218 | + } | |
219 | +} | |
220 | + | |
221 | +@media screen and (max-width: @screen-xs) { | |
222 | + .projectList { | |
223 | + .projectGrid { | |
224 | + width: 100%; | |
225 | + } | |
226 | + } | |
227 | +} | ... | ... |
ant-design-pro/Workplace/src/_mock.js
0 → 100644
1 | +import mockjs from 'mockjs'; | |
2 | + | |
3 | +const titles = [ | |
4 | + 'Alipay', | |
5 | + 'Angular', | |
6 | + 'Ant Design', | |
7 | + 'Ant Design Pro', | |
8 | + 'Bootstrap', | |
9 | + 'React', | |
10 | + 'Vue', | |
11 | + 'Webpack', | |
12 | +]; | |
13 | +const avatars = [ | |
14 | + 'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png', // Alipay | |
15 | + 'https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png', // Angular | |
16 | + 'https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png', // Ant Design | |
17 | + 'https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png', // Ant Design Pro | |
18 | + 'https://gw.alipayobjects.com/zos/rmsportal/siCrBXXhmvTQGWPNLBow.png', // Bootstrap | |
19 | + 'https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png', // React | |
20 | + 'https://gw.alipayobjects.com/zos/rmsportal/ComBAopevLwENQdKWiIn.png', // Vue | |
21 | + 'https://gw.alipayobjects.com/zos/rmsportal/nxkuOJlFJuAUhzlMTCEe.png', // Webpack | |
22 | +]; | |
23 | + | |
24 | +const avatars2 = [ | |
25 | + 'https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png', | |
26 | + 'https://gw.alipayobjects.com/zos/rmsportal/cnrhVkzwxjPwAaCfPbdc.png', | |
27 | + 'https://gw.alipayobjects.com/zos/rmsportal/gaOngJwsRYRaVAuXXcmB.png', | |
28 | + 'https://gw.alipayobjects.com/zos/rmsportal/ubnKSIfAJTxIgXOKlciN.png', | |
29 | + 'https://gw.alipayobjects.com/zos/rmsportal/WhxKECPNujWoWEFNdnJE.png', | |
30 | + 'https://gw.alipayobjects.com/zos/rmsportal/jZUIxmJycoymBprLOUbT.png', | |
31 | + 'https://gw.alipayobjects.com/zos/rmsportal/psOgztMplJMGpVEqfcgF.png', | |
32 | + 'https://gw.alipayobjects.com/zos/rmsportal/ZpBqSxLxVEXfcUNoPKrz.png', | |
33 | + 'https://gw.alipayobjects.com/zos/rmsportal/laiEnJdGHVOhJrUShBaJ.png', | |
34 | + 'https://gw.alipayobjects.com/zos/rmsportal/UrQsqscbKEpNuJcvBZBu.png', | |
35 | +]; | |
36 | + | |
37 | +const covers = [ | |
38 | + 'https://gw.alipayobjects.com/zos/rmsportal/uMfMFlvUuceEyPpotzlq.png', | |
39 | + 'https://gw.alipayobjects.com/zos/rmsportal/iZBVOIhGJiAnhplqjvZW.png', | |
40 | + 'https://gw.alipayobjects.com/zos/rmsportal/iXjVmWVHbCJAyqvDxdtx.png', | |
41 | + 'https://gw.alipayobjects.com/zos/rmsportal/gLaIAoVWTtLbBWZNYEMg.png', | |
42 | +]; | |
43 | +const desc = [ | |
44 | + '那是一种内在的东西, 他们到达不了,也无法触及的', | |
45 | + '希望是一个好东西,也许是最好的,好东西是不会消亡的', | |
46 | + '生命就像一盒巧克力,结果往往出人意料', | |
47 | + '城镇中有那么多的酒馆,她却偏偏走进了我的酒馆', | |
48 | + '那时候我只会想自己想要什么,从不想自己拥有什么', | |
49 | +]; | |
50 | + | |
51 | +const user = [ | |
52 | + '付小小', | |
53 | + '曲丽丽', | |
54 | + '林东东', | |
55 | + '周星星', | |
56 | + '吴加好', | |
57 | + '朱偏右', | |
58 | + '鱼酱', | |
59 | + '乐哥', | |
60 | + '谭小仪', | |
61 | + '仲尼', | |
62 | +]; | |
63 | + | |
64 | +function fakeList(count) { | |
65 | + const list = []; | |
66 | + for (let i = 0; i < count; i += 1) { | |
67 | + list.push({ | |
68 | + id: `fake-list-${i}`, | |
69 | + owner: user[i % 10], | |
70 | + title: titles[i % 8], | |
71 | + avatar: avatars[i % 8], | |
72 | + cover: parseInt(i / 4, 10) % 2 === 0 ? covers[i % 4] : covers[3 - (i % 4)], | |
73 | + status: ['active', 'exception', 'normal'][i % 3], | |
74 | + percent: Math.ceil(Math.random() * 50) + 50, | |
75 | + logo: avatars[i % 8], | |
76 | + href: 'https://ant.design', | |
77 | + updatedAt: new Date(new Date().getTime() - 1000 * 60 * 60 * 2 * i), | |
78 | + createdAt: new Date(new Date().getTime() - 1000 * 60 * 60 * 2 * i), | |
79 | + subDescription: desc[i % 5], | |
80 | + description: | |
81 | + '在中台产品的研发过程中,会出现不同的设计规范和实现方式,但其中往往存在很多类似的页面和组件,这些类似的组件会被抽离成一套标准规范。', | |
82 | + activeUser: Math.ceil(Math.random() * 100000) + 100000, | |
83 | + newUser: Math.ceil(Math.random() * 1000) + 1000, | |
84 | + star: Math.ceil(Math.random() * 100) + 100, | |
85 | + like: Math.ceil(Math.random() * 100) + 100, | |
86 | + message: Math.ceil(Math.random() * 10) + 10, | |
87 | + content: | |
88 | + '段落示意:蚂蚁金服设计平台 ant.design,用最小的工作量,无缝接入蚂蚁金服生态,提供跨越设计与开发的体验解决方案。蚂蚁金服设计平台 ant.design,用最小的工作量,无缝接入蚂蚁金服生态,提供跨越设计与开发的体验解决方案。', | |
89 | + members: [ | |
90 | + { | |
91 | + avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ZiESqWwCXBRQoaPONSJe.png', | |
92 | + name: '曲丽丽', | |
93 | + id: 'member1', | |
94 | + }, | |
95 | + { | |
96 | + avatar: 'https://gw.alipayobjects.com/zos/rmsportal/tBOxZPlITHqwlGjsJWaF.png', | |
97 | + name: '王昭君', | |
98 | + id: 'member2', | |
99 | + }, | |
100 | + { | |
101 | + avatar: 'https://gw.alipayobjects.com/zos/rmsportal/sBxjgqiuHMGRkIjqlQCd.png', | |
102 | + name: '董娜娜', | |
103 | + id: 'member3', | |
104 | + }, | |
105 | + ], | |
106 | + }); | |
107 | + } | |
108 | + | |
109 | + return list; | |
110 | +} | |
111 | + | |
112 | +let sourceData; | |
113 | + | |
114 | +function getFakeList(req, res) { | |
115 | + const params = req.query; | |
116 | + | |
117 | + const count = params.count * 1 || 20; | |
118 | + | |
119 | + const result = fakeList(count); | |
120 | + sourceData = result; | |
121 | + return res.json(result); | |
122 | +} | |
123 | + | |
124 | +function postFakeList(req, res) { | |
125 | + const { /* url = '', */ body } = req; | |
126 | + // const params = getUrlParams(url); | |
127 | + const { method, id } = body; | |
128 | + // const count = (params.count * 1) || 20; | |
129 | + let result = sourceData; | |
130 | + | |
131 | + switch (method) { | |
132 | + case 'delete': | |
133 | + result = result.filter(item => item.id !== id); | |
134 | + break; | |
135 | + case 'update': | |
136 | + result.forEach((item, i) => { | |
137 | + if (item.id === id) { | |
138 | + result[i] = Object.assign(item, body); | |
139 | + } | |
140 | + }); | |
141 | + break; | |
142 | + case 'post': | |
143 | + result.unshift({ | |
144 | + body, | |
145 | + id: `fake-list-${result.length}`, | |
146 | + createdAt: new Date().getTime(), | |
147 | + }); | |
148 | + break; | |
149 | + default: | |
150 | + break; | |
151 | + } | |
152 | + | |
153 | + return res.json(result); | |
154 | +} | |
155 | + | |
156 | +const getNotice = [ | |
157 | + { | |
158 | + id: 'xxx1', | |
159 | + title: titles[0], | |
160 | + logo: avatars[0], | |
161 | + description: '那是一种内在的东西,他们到达不了,也无法触及的', | |
162 | + updatedAt: new Date(), | |
163 | + member: '科学搬砖组', | |
164 | + href: '', | |
165 | + memberLink: '', | |
166 | + }, | |
167 | + { | |
168 | + id: 'xxx2', | |
169 | + title: titles[1], | |
170 | + logo: avatars[1], | |
171 | + description: '希望是一个好东西,也许是最好的,好东西是不会消亡的', | |
172 | + updatedAt: new Date('2017-07-24'), | |
173 | + member: '全组都是吴彦祖', | |
174 | + href: '', | |
175 | + memberLink: '', | |
176 | + }, | |
177 | + { | |
178 | + id: 'xxx3', | |
179 | + title: titles[2], | |
180 | + logo: avatars[2], | |
181 | + description: '城镇中有那么多的酒馆,她却偏偏走进了我的酒馆', | |
182 | + updatedAt: new Date(), | |
183 | + member: '中二少女团', | |
184 | + href: '', | |
185 | + memberLink: '', | |
186 | + }, | |
187 | + { | |
188 | + id: 'xxx4', | |
189 | + title: titles[3], | |
190 | + logo: avatars[3], | |
191 | + description: '那时候我只会想自己想要什么,从不想自己拥有什么', | |
192 | + updatedAt: new Date('2017-07-23'), | |
193 | + member: '程序员日常', | |
194 | + href: '', | |
195 | + memberLink: '', | |
196 | + }, | |
197 | + { | |
198 | + id: 'xxx5', | |
199 | + title: titles[4], | |
200 | + logo: avatars[4], | |
201 | + description: '凛冬将至', | |
202 | + updatedAt: new Date('2017-07-23'), | |
203 | + member: '高逼格设计天团', | |
204 | + href: '', | |
205 | + memberLink: '', | |
206 | + }, | |
207 | + { | |
208 | + id: 'xxx6', | |
209 | + title: titles[5], | |
210 | + logo: avatars[5], | |
211 | + description: '生命就像一盒巧克力,结果往往出人意料', | |
212 | + updatedAt: new Date('2017-07-23'), | |
213 | + member: '骗你来学计算机', | |
214 | + href: '', | |
215 | + memberLink: '', | |
216 | + }, | |
217 | +]; | |
218 | + | |
219 | +const getActivities = [ | |
220 | + { | |
221 | + id: 'trend-1', | |
222 | + updatedAt: new Date(), | |
223 | + user: { | |
224 | + name: '曲丽丽', | |
225 | + avatar: avatars2[0], | |
226 | + }, | |
227 | + group: { | |
228 | + name: '高逼格设计天团', | |
229 | + link: 'http://github.com/', | |
230 | + }, | |
231 | + project: { | |
232 | + name: '六月迭代', | |
233 | + link: 'http://github.com/', | |
234 | + }, | |
235 | + template: '在 @{group} 新建项目 @{project}', | |
236 | + }, | |
237 | + { | |
238 | + id: 'trend-2', | |
239 | + updatedAt: new Date(), | |
240 | + user: { | |
241 | + name: '付小小', | |
242 | + avatar: avatars2[1], | |
243 | + }, | |
244 | + group: { | |
245 | + name: '高逼格设计天团', | |
246 | + link: 'http://github.com/', | |
247 | + }, | |
248 | + project: { | |
249 | + name: '六月迭代', | |
250 | + link: 'http://github.com/', | |
251 | + }, | |
252 | + template: '在 @{group} 新建项目 @{project}', | |
253 | + }, | |
254 | + { | |
255 | + id: 'trend-3', | |
256 | + updatedAt: new Date(), | |
257 | + user: { | |
258 | + name: '林东东', | |
259 | + avatar: avatars2[2], | |
260 | + }, | |
261 | + group: { | |
262 | + name: '中二少女团', | |
263 | + link: 'http://github.com/', | |
264 | + }, | |
265 | + project: { | |
266 | + name: '六月迭代', | |
267 | + link: 'http://github.com/', | |
268 | + }, | |
269 | + template: '在 @{group} 新建项目 @{project}', | |
270 | + }, | |
271 | + { | |
272 | + id: 'trend-4', | |
273 | + updatedAt: new Date(), | |
274 | + user: { | |
275 | + name: '周星星', | |
276 | + avatar: avatars2[4], | |
277 | + }, | |
278 | + project: { | |
279 | + name: '5 月日常迭代', | |
280 | + link: 'http://github.com/', | |
281 | + }, | |
282 | + template: '将 @{project} 更新至已发布状态', | |
283 | + }, | |
284 | + { | |
285 | + id: 'trend-5', | |
286 | + updatedAt: new Date(), | |
287 | + user: { | |
288 | + name: '朱偏右', | |
289 | + avatar: avatars2[3], | |
290 | + }, | |
291 | + project: { | |
292 | + name: '工程效能', | |
293 | + link: 'http://github.com/', | |
294 | + }, | |
295 | + comment: { | |
296 | + name: '留言', | |
297 | + link: 'http://github.com/', | |
298 | + }, | |
299 | + template: '在 @{project} 发布了 @{comment}', | |
300 | + }, | |
301 | + { | |
302 | + id: 'trend-6', | |
303 | + updatedAt: new Date(), | |
304 | + user: { | |
305 | + name: '乐哥', | |
306 | + avatar: avatars2[5], | |
307 | + }, | |
308 | + group: { | |
309 | + name: '程序员日常', | |
310 | + link: 'http://github.com/', | |
311 | + }, | |
312 | + project: { | |
313 | + name: '品牌迭代', | |
314 | + link: 'http://github.com/', | |
315 | + }, | |
316 | + template: '在 @{group} 新建项目 @{project}', | |
317 | + }, | |
318 | +]; | |
319 | + | |
320 | +function getFakeCaptcha(req, res) { | |
321 | + return res.json('captcha-xxx'); | |
322 | +} | |
323 | + | |
324 | +export default { | |
325 | + 'GET /api/project/notice': getNotice, | |
326 | + 'GET /api/activities': getActivities, | |
327 | + 'POST /api/forms': (req, res) => { | |
328 | + res.send({ message: 'Ok' }); | |
329 | + }, | |
330 | + 'GET /api/tags': mockjs.mock({ | |
331 | + 'list|100': [{ name: '@city', 'value|1-100': 150, 'type|0-2': 1 }], | |
332 | + }), | |
333 | + 'GET /api/fake_list': getFakeList, | |
334 | + 'POST /api/fake_list': postFakeList, | |
335 | + 'GET /api/captcha': getFakeCaptcha, | |
336 | +}; | ... | ... |
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 | +}; | ... | ... |
ant-design-pro/Workplace/src/index.js
0 → 100644
1 | +import React, { PureComponent } from 'react'; | |
2 | +import moment from 'moment'; | |
3 | +import { connect } from 'dva'; | |
4 | +import Link from 'umi/link'; | |
5 | +import { Row, Col, Card, List, Avatar } from 'antd'; | |
6 | + | |
7 | +import { Radar } from 'ant-design-pro/lib/Charts'; | |
8 | +import EditableLinkGroup from '@/components/EditableLinkGroup'; | |
9 | +import PageHeaderWrapper from '@/components/PageHeaderWrapper'; | |
10 | + | |
11 | +import styles from './Workplace.less'; | |
12 | + | |
13 | +const links = [ | |
14 | + { | |
15 | + title: '操作一', | |
16 | + href: '', | |
17 | + }, | |
18 | + { | |
19 | + title: '操作二', | |
20 | + href: '', | |
21 | + }, | |
22 | + { | |
23 | + title: '操作三', | |
24 | + href: '', | |
25 | + }, | |
26 | + { | |
27 | + title: '操作四', | |
28 | + href: '', | |
29 | + }, | |
30 | + { | |
31 | + title: '操作五', | |
32 | + href: '', | |
33 | + }, | |
34 | + { | |
35 | + title: '操作六', | |
36 | + href: '', | |
37 | + }, | |
38 | +]; | |
39 | + | |
40 | +@connect(({ user, project, activities, chart, loading }) => ({ | |
41 | + currentUser: user.currentUser, | |
42 | + project, | |
43 | + activities, | |
44 | + chart, | |
45 | + currentUserLoading: loading.effects['user/fetchCurrent'], | |
46 | + projectLoading: loading.effects['project/fetchNotice'], | |
47 | + activitiesLoading: loading.effects['activities/fetchList'], | |
48 | +})) | |
49 | +class Workplace extends PureComponent { | |
50 | + componentDidMount() { | |
51 | + const { dispatch } = this.props; | |
52 | + dispatch({ | |
53 | + type: 'user/fetchCurrent', | |
54 | + }); | |
55 | + dispatch({ | |
56 | + type: 'project/fetchNotice', | |
57 | + }); | |
58 | + dispatch({ | |
59 | + type: 'activities/fetchList', | |
60 | + }); | |
61 | + dispatch({ | |
62 | + type: 'chart/fetch', | |
63 | + }); | |
64 | + } | |
65 | + | |
66 | + componentWillUnmount() { | |
67 | + const { dispatch } = this.props; | |
68 | + dispatch({ | |
69 | + type: 'chart/clear', | |
70 | + }); | |
71 | + } | |
72 | + | |
73 | + renderActivities() { | |
74 | + const { | |
75 | + activities: { list }, | |
76 | + } = this.props; | |
77 | + return list.map(item => { | |
78 | + const events = item.template.split(/@\{([^{}]*)\}/gi).map(key => { | |
79 | + if (item[key]) { | |
80 | + return ( | |
81 | + <a href={item[key].link} key={item[key].name}> | |
82 | + {item[key].name} | |
83 | + </a> | |
84 | + ); | |
85 | + } | |
86 | + return key; | |
87 | + }); | |
88 | + return ( | |
89 | + <List.Item key={item.id}> | |
90 | + <List.Item.Meta | |
91 | + avatar={<Avatar src={item.user.avatar} />} | |
92 | + title={ | |
93 | + <span> | |
94 | + <a className={styles.username}>{item.user.name}</a> | |
95 | + | |
96 | + <span className={styles.event}>{events}</span> | |
97 | + </span> | |
98 | + } | |
99 | + description={ | |
100 | + <span className={styles.datetime} title={item.updatedAt}> | |
101 | + {moment(item.updatedAt).fromNow()} | |
102 | + </span> | |
103 | + } | |
104 | + /> | |
105 | + </List.Item> | |
106 | + ); | |
107 | + }); | |
108 | + } | |
109 | + | |
110 | + render() { | |
111 | + const { | |
112 | + currentUser, | |
113 | + currentUserLoading, | |
114 | + project: { notice }, | |
115 | + projectLoading, | |
116 | + activitiesLoading, | |
117 | + chart: { radarData }, | |
118 | + } = this.props; | |
119 | + | |
120 | + const pageHeaderContent = | |
121 | + currentUser && Object.keys(currentUser).length ? ( | |
122 | + <div className={styles.pageHeaderContent}> | |
123 | + <div className={styles.avatar}> | |
124 | + <Avatar size="large" src={currentUser.avatar} /> | |
125 | + </div> | |
126 | + <div className={styles.content}> | |
127 | + <div className={styles.contentTitle}> | |
128 | + 早安, | |
129 | + {currentUser.name} | |
130 | + ,祝你开心每一天! | |
131 | + </div> | |
132 | + <div> | |
133 | + {currentUser.title} |{currentUser.group} | |
134 | + </div> | |
135 | + </div> | |
136 | + </div> | |
137 | + ) : null; | |
138 | + | |
139 | + const extraContent = ( | |
140 | + <div className={styles.extraContent}> | |
141 | + <div className={styles.statItem}> | |
142 | + <p>项目数</p> | |
143 | + <p>56</p> | |
144 | + </div> | |
145 | + <div className={styles.statItem}> | |
146 | + <p>团队内排名</p> | |
147 | + <p> | |
148 | + 8<span> / 24</span> | |
149 | + </p> | |
150 | + </div> | |
151 | + <div className={styles.statItem}> | |
152 | + <p>项目访问</p> | |
153 | + <p>2,223</p> | |
154 | + </div> | |
155 | + </div> | |
156 | + ); | |
157 | + | |
158 | + return ( | |
159 | + <PageHeaderWrapper | |
160 | + loading={currentUserLoading} | |
161 | + content={pageHeaderContent} | |
162 | + extraContent={extraContent} | |
163 | + > | |
164 | + <Row gutter={24}> | |
165 | + <Col xl={16} lg={24} md={24} sm={24} xs={24}> | |
166 | + <Card | |
167 | + className={styles.projectList} | |
168 | + style={{ marginBottom: 24 }} | |
169 | + title="进行中的项目" | |
170 | + bordered={false} | |
171 | + extra={<Link to="/">全部项目</Link>} | |
172 | + loading={projectLoading} | |
173 | + bodyStyle={{ padding: 0 }} | |
174 | + > | |
175 | + {notice.map(item => ( | |
176 | + <Card.Grid className={styles.projectGrid} key={item.id}> | |
177 | + <Card bodyStyle={{ padding: 0 }} bordered={false}> | |
178 | + <Card.Meta | |
179 | + title={ | |
180 | + <div className={styles.cardTitle}> | |
181 | + <Avatar size="small" src={item.logo} /> | |
182 | + <Link to={item.href}>{item.title}</Link> | |
183 | + </div> | |
184 | + } | |
185 | + description={item.description} | |
186 | + /> | |
187 | + <div className={styles.projectItemContent}> | |
188 | + <Link to={item.memberLink}>{item.member || ''}</Link> | |
189 | + {item.updatedAt && ( | |
190 | + <span className={styles.datetime} title={item.updatedAt}> | |
191 | + {moment(item.updatedAt).fromNow()} | |
192 | + </span> | |
193 | + )} | |
194 | + </div> | |
195 | + </Card> | |
196 | + </Card.Grid> | |
197 | + ))} | |
198 | + </Card> | |
199 | + <Card | |
200 | + bodyStyle={{ padding: 0 }} | |
201 | + bordered={false} | |
202 | + className={styles.activeCard} | |
203 | + title="动态" | |
204 | + loading={activitiesLoading} | |
205 | + > | |
206 | + <List loading={activitiesLoading} size="large"> | |
207 | + <div className={styles.activitiesList}>{this.renderActivities()}</div> | |
208 | + </List> | |
209 | + </Card> | |
210 | + </Col> | |
211 | + <Col xl={8} lg={24} md={24} sm={24} xs={24}> | |
212 | + <Card | |
213 | + style={{ marginBottom: 24 }} | |
214 | + title="快速开始 / 便捷导航" | |
215 | + bordered={false} | |
216 | + bodyStyle={{ padding: 0 }} | |
217 | + > | |
218 | + <EditableLinkGroup onAdd={() => {}} links={links} linkElement={Link} /> | |
219 | + </Card> | |
220 | + <Card | |
221 | + style={{ marginBottom: 24 }} | |
222 | + bordered={false} | |
223 | + title="XX 指数" | |
224 | + loading={radarData.length === 0} | |
225 | + > | |
226 | + <div className={styles.chart}> | |
227 | + <Radar hasLegend height={343} data={radarData} /> | |
228 | + </div> | |
229 | + </Card> | |
230 | + <Card | |
231 | + bodyStyle={{ paddingTop: 12, paddingBottom: 12 }} | |
232 | + bordered={false} | |
233 | + title="团队" | |
234 | + loading={projectLoading} | |
235 | + > | |
236 | + <div className={styles.members}> | |
237 | + <Row gutter={48}> | |
238 | + {notice.map(item => ( | |
239 | + <Col span={12} key={`members-item-${item.id}`}> | |
240 | + <Link to={item.href}> | |
241 | + <Avatar src={item.logo} size="small" /> | |
242 | + <span className={styles.member}>{item.member}</span> | |
243 | + </Link> | |
244 | + </Col> | |
245 | + ))} | |
246 | + </Row> | |
247 | + </div> | |
248 | + </Card> | |
249 | + </Col> | |
250 | + </Row> | |
251 | + </PageHeaderWrapper> | |
252 | + ); | |
253 | + } | |
254 | +} | |
255 | + | |
256 | +export default Workplace; | ... | ... |
1 | +import { queryActivities } from '@/services/api'; | |
2 | + | |
3 | +export default { | |
4 | + namespace: 'activities', | |
5 | + | |
6 | + state: { | |
7 | + list: [], | |
8 | + }, | |
9 | + | |
10 | + effects: { | |
11 | + *fetchList(_, { call, put }) { | |
12 | + const response = yield call(queryActivities); | |
13 | + yield put({ | |
14 | + type: 'saveList', | |
15 | + payload: Array.isArray(response) ? response : [], | |
16 | + }); | |
17 | + }, | |
18 | + }, | |
19 | + | |
20 | + reducers: { | |
21 | + saveList(state, action) { | |
22 | + return { | |
23 | + ...state, | |
24 | + list: action.payload, | |
25 | + }; | |
26 | + }, | |
27 | + }, | |
28 | +}; | ... | ... |
ant-design-pro/Workplace/src/models/chart.js
0 → 100644
1 | +import { fakeChartData } from '@/services/api'; | |
2 | + | |
3 | +export default { | |
4 | + namespace: 'chart', | |
5 | + | |
6 | + state: { | |
7 | + visitData: [], | |
8 | + visitData2: [], | |
9 | + salesData: [], | |
10 | + searchData: [], | |
11 | + offlineData: [], | |
12 | + offlineChartData: [], | |
13 | + salesTypeData: [], | |
14 | + salesTypeDataOnline: [], | |
15 | + salesTypeDataOffline: [], | |
16 | + radarData: [], | |
17 | + loading: false, | |
18 | + }, | |
19 | + | |
20 | + effects: { | |
21 | + *fetch(_, { call, put }) { | |
22 | + const response = yield call(fakeChartData); | |
23 | + yield put({ | |
24 | + type: 'save', | |
25 | + payload: response, | |
26 | + }); | |
27 | + }, | |
28 | + *fetchSalesData(_, { call, put }) { | |
29 | + const response = yield call(fakeChartData); | |
30 | + yield put({ | |
31 | + type: 'save', | |
32 | + payload: { | |
33 | + salesData: response.salesData, | |
34 | + }, | |
35 | + }); | |
36 | + }, | |
37 | + }, | |
38 | + | |
39 | + reducers: { | |
40 | + save(state, { payload }) { | |
41 | + return { | |
42 | + ...state, | |
43 | + ...payload, | |
44 | + }; | |
45 | + }, | |
46 | + clear() { | |
47 | + return { | |
48 | + visitData: [], | |
49 | + visitData2: [], | |
50 | + salesData: [], | |
51 | + searchData: [], | |
52 | + offlineData: [], | |
53 | + offlineChartData: [], | |
54 | + salesTypeData: [], | |
55 | + salesTypeDataOnline: [], | |
56 | + salesTypeDataOffline: [], | |
57 | + radarData: [], | |
58 | + }; | |
59 | + }, | |
60 | + }, | |
61 | +}; | ... | ... |
1 | +import { queryProjectNotice } from '@/services/api'; | |
2 | + | |
3 | +export default { | |
4 | + namespace: 'project', | |
5 | + | |
6 | + state: { | |
7 | + notice: [], | |
8 | + }, | |
9 | + | |
10 | + effects: { | |
11 | + *fetchNotice(_, { call, put }) { | |
12 | + const response = yield call(queryProjectNotice); | |
13 | + yield put({ | |
14 | + type: 'saveNotice', | |
15 | + payload: Array.isArray(response) ? response : [], | |
16 | + }); | |
17 | + }, | |
18 | + }, | |
19 | + | |
20 | + reducers: { | |
21 | + saveNotice(state, action) { | |
22 | + return { | |
23 | + ...state, | |
24 | + notice: 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 | +}; | ... | ... |
ant-design-pro/Workplace/src/models/user.js
0 → 100644
1 | +import { query as queryUsers, queryCurrent } from '@/services/user'; | |
2 | + | |
3 | +export default { | |
4 | + namespace: 'user', | |
5 | + | |
6 | + state: { | |
7 | + list: [], | |
8 | + currentUser: {}, | |
9 | + }, | |
10 | + | |
11 | + effects: { | |
12 | + *fetch(_, { call, put }) { | |
13 | + const response = yield call(queryUsers); | |
14 | + yield put({ | |
15 | + type: 'save', | |
16 | + payload: response, | |
17 | + }); | |
18 | + }, | |
19 | + *fetchCurrent(_, { call, put }) { | |
20 | + const response = yield call(queryCurrent); | |
21 | + yield put({ | |
22 | + type: 'saveCurrentUser', | |
23 | + payload: response, | |
24 | + }); | |
25 | + }, | |
26 | + }, | |
27 | + | |
28 | + reducers: { | |
29 | + save(state, action) { | |
30 | + return { | |
31 | + ...state, | |
32 | + list: action.payload, | |
33 | + }; | |
34 | + }, | |
35 | + saveCurrentUser(state, action) { | |
36 | + return { | |
37 | + ...state, | |
38 | + currentUser: action.payload || {}, | |
39 | + }; | |
40 | + }, | |
41 | + changeNotifyCount(state, action) { | |
42 | + return { | |
43 | + ...state, | |
44 | + currentUser: { | |
45 | + ...state.currentUser, | |
46 | + notifyCount: action.payload.totalCount, | |
47 | + unreadCount: action.payload.unreadCount, | |
48 | + }, | |
49 | + }; | |
50 | + }, | |
51 | + }, | |
52 | +}; | ... | ... |
请
注册
或
登录
后发表评论