提交 4e4716e41e525bfbe7703165ab7d73780cc11d7c

作者 愚道
1 个父辈 08faee8d

init antd pro workplace

  1 +/yarn.lock
  2 +/package-lock.json
  3 +/dist
  4 +/node_modules
  5 +
  6 +.umi
  7 +.umi-production
... ...
  1 +export default {
  2 + plugins: [
  3 + ['umi-plugin-block-dev', {}],
  4 + ['umi-plugin-react', {
  5 + dva: true,
  6 + locale: true,
  7 + antd: true,
  8 + }]
  9 + ],
  10 +}
... ...
  1 +import 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 +.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 { 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 +}
... ...
  1 +import request from '@/utils/request';
  2 +
  3 +export async function query() {
  4 + return request('/api/users');
  5 +}
  6 +
  7 +export async function queryCurrent() {
  8 + return request('/api/currentUser');
  9 +}
... ...
  1 +import fetch from 'dva/fetch';
  2 +import { notification } from 'antd';
  3 +import router from 'umi/router';
  4 +import hash from 'hash.js';
  5 +import { isAntdPro } from './utils';
  6 +
  7 +const codeMessage = {
  8 + 200: '服务器成功返回请求的数据。',
  9 + 201: '新建或修改数据成功。',
  10 + 202: '一个请求已经进入后台排队(异步任务)。',
  11 + 204: '删除数据成功。',
  12 + 400: '发出的请求有错误,服务器没有进行新建或修改数据的操作。',
  13 + 401: '用户没有权限(令牌、用户名、密码错误)。',
  14 + 403: '用户得到授权,但是访问是被禁止的。',
  15 + 404: '发出的请求针对的是不存在的记录,服务器没有进行操作。',
  16 + 406: '请求的格式不可得。',
  17 + 410: '请求的资源被永久删除,且不会再得到的。',
  18 + 422: '当创建一个对象时,发生一个验证错误。',
  19 + 500: '服务器发生错误,请检查服务器。',
  20 + 502: '网关错误。',
  21 + 503: '服务不可用,服务器暂时过载或维护。',
  22 + 504: '网关超时。',
  23 +};
  24 +
  25 +const checkStatus = response => {
  26 + if (response.status >= 200 && response.status < 300) {
  27 + return response;
  28 + }
  29 + const errortext = codeMessage[response.status] || response.statusText;
  30 + notification.error({
  31 + message: `请求错误 ${response.status}: ${response.url}`,
  32 + description: errortext,
  33 + });
  34 + const error = new Error(errortext);
  35 + error.name = response.status;
  36 + error.response = response;
  37 + throw error;
  38 +};
  39 +
  40 +const cachedSave = (response, hashcode) => {
  41 + /**
  42 + * Clone a response data and store it in sessionStorage
  43 + * Does not support data other than json, Cache only json
  44 + */
  45 + const contentType = response.headers.get('Content-Type');
  46 + if (contentType && contentType.match(/application\/json/i)) {
  47 + // All data is saved as text
  48 + response
  49 + .clone()
  50 + .text()
  51 + .then(content => {
  52 + sessionStorage.setItem(hashcode, content);
  53 + sessionStorage.setItem(`${hashcode}:timestamp`, Date.now());
  54 + });
  55 + }
  56 + return response;
  57 +};
  58 +
  59 +/**
  60 + * Requests a URL, returning a promise.
  61 + *
  62 + * @param {string} url The URL we want to request
  63 + * @param {object} [option] The options we want to pass to "fetch"
  64 + * @return {object} An object containing either "data" or "err"
  65 + */
  66 +export default function request(url, option) {
  67 + const options = {
  68 + expirys: isAntdPro(),
  69 + ...option,
  70 + };
  71 + /**
  72 + * Produce fingerprints based on url and parameters
  73 + * Maybe url has the same parameters
  74 + */
  75 + const fingerprint = url + (options.body ? JSON.stringify(options.body) : '');
  76 + const hashcode = hash
  77 + .sha256()
  78 + .update(fingerprint)
  79 + .digest('hex');
  80 +
  81 + const defaultOptions = {
  82 + credentials: 'include',
  83 + };
  84 + const newOptions = { ...defaultOptions, ...options };
  85 + if (
  86 + newOptions.method === 'POST' ||
  87 + newOptions.method === 'PUT' ||
  88 + newOptions.method === 'DELETE'
  89 + ) {
  90 + if (!(newOptions.body instanceof FormData)) {
  91 + newOptions.headers = {
  92 + Accept: 'application/json',
  93 + 'Content-Type': 'application/json; charset=utf-8',
  94 + ...newOptions.headers,
  95 + };
  96 + newOptions.body = JSON.stringify(newOptions.body);
  97 + } else {
  98 + // newOptions.body is FormData
  99 + newOptions.headers = {
  100 + Accept: 'application/json',
  101 + ...newOptions.headers,
  102 + };
  103 + }
  104 + }
  105 +
  106 + const expirys = options.expirys && 60;
  107 + // options.expirys !== false, return the cache,
  108 + if (options.expirys !== false) {
  109 + const cached = sessionStorage.getItem(hashcode);
  110 + const whenCached = sessionStorage.getItem(`${hashcode}:timestamp`);
  111 + if (cached !== null && whenCached !== null) {
  112 + const age = (Date.now() - whenCached) / 1000;
  113 + if (age < expirys) {
  114 + const response = new Response(new Blob([cached]));
  115 + return response.json();
  116 + }
  117 + sessionStorage.removeItem(hashcode);
  118 + sessionStorage.removeItem(`${hashcode}:timestamp`);
  119 + }
  120 + }
  121 + return fetch(url, newOptions)
  122 + .then(checkStatus)
  123 + .then(response => cachedSave(response, hashcode))
  124 + .then(response => {
  125 + // DELETE and 204 do not return data by default
  126 + // using .json will report an error.
  127 + if (newOptions.method === 'DELETE' || response.status === 204) {
  128 + return response.text();
  129 + }
  130 + return response.json();
  131 + })
  132 + .catch(e => {
  133 + const status = e.name;
  134 + if (status === 401) {
  135 + // @HACK
  136 + /* eslint-disable no-underscore-dangle */
  137 + window.g_app._store.dispatch({
  138 + type: 'login/logout',
  139 + });
  140 + return;
  141 + }
  142 + // environment should not be used
  143 + if (status === 403) {
  144 + router.push('/exception/403');
  145 + return;
  146 + }
  147 + if (status <= 504 && status >= 500) {
  148 + router.push('/exception/500');
  149 + return;
  150 + }
  151 + if (status >= 404 && status < 422) {
  152 + router.push('/exception/404');
  153 + }
  154 + });
  155 +}
... ...
  1 +import moment from 'moment';
  2 +import React from 'react';
  3 +import nzh from 'nzh/cn';
  4 +import { parse, stringify } from 'qs';
  5 +
  6 +export function fixedZero(val) {
  7 + return val * 1 < 10 ? `0${val}` : val;
  8 +}
  9 +
  10 +export function getTimeDistance(type) {
  11 + const now = new Date();
  12 + const oneDay = 1000 * 60 * 60 * 24;
  13 +
  14 + if (type === 'today') {
  15 + now.setHours(0);
  16 + now.setMinutes(0);
  17 + now.setSeconds(0);
  18 + return [moment(now), moment(now.getTime() + (oneDay - 1000))];
  19 + }
  20 +
  21 + if (type === 'week') {
  22 + let day = now.getDay();
  23 + now.setHours(0);
  24 + now.setMinutes(0);
  25 + now.setSeconds(0);
  26 +
  27 + if (day === 0) {
  28 + day = 6;
  29 + } else {
  30 + day -= 1;
  31 + }
  32 +
  33 + const beginTime = now.getTime() - day * oneDay;
  34 +
  35 + return [moment(beginTime), moment(beginTime + (7 * oneDay - 1000))];
  36 + }
  37 +
  38 + if (type === 'month') {
  39 + const year = now.getFullYear();
  40 + const month = now.getMonth();
  41 + const nextDate = moment(now).add(1, 'months');
  42 + const nextYear = nextDate.year();
  43 + const nextMonth = nextDate.month();
  44 +
  45 + return [
  46 + moment(`${year}-${fixedZero(month + 1)}-01 00:00:00`),
  47 + moment(moment(`${nextYear}-${fixedZero(nextMonth + 1)}-01 00:00:00`).valueOf() - 1000),
  48 + ];
  49 + }
  50 +
  51 + const year = now.getFullYear();
  52 + return [moment(`${year}-01-01 00:00:00`), moment(`${year}-12-31 23:59:59`)];
  53 +}
  54 +
  55 +export function getPlainNode(nodeList, parentPath = '') {
  56 + const arr = [];
  57 + nodeList.forEach(node => {
  58 + const item = node;
  59 + item.path = `${parentPath}/${item.path || ''}`.replace(/\/+/g, '/');
  60 + item.exact = true;
  61 + if (item.children && !item.component) {
  62 + arr.push(...getPlainNode(item.children, item.path));
  63 + } else {
  64 + if (item.children && item.component) {
  65 + item.exact = false;
  66 + }
  67 + arr.push(item);
  68 + }
  69 + });
  70 + return arr;
  71 +}
  72 +
  73 +export function digitUppercase(n) {
  74 + return nzh.toMoney(n);
  75 +}
  76 +
  77 +function getRelation(str1, str2) {
  78 + if (str1 === str2) {
  79 + console.warn('Two path are equal!'); // eslint-disable-line
  80 + }
  81 + const arr1 = str1.split('/');
  82 + const arr2 = str2.split('/');
  83 + if (arr2.every((item, index) => item === arr1[index])) {
  84 + return 1;
  85 + }
  86 + if (arr1.every((item, index) => item === arr2[index])) {
  87 + return 2;
  88 + }
  89 + return 3;
  90 +}
  91 +
  92 +function getRenderArr(routes) {
  93 + let renderArr = [];
  94 + renderArr.push(routes[0]);
  95 + for (let i = 1; i < routes.length; i += 1) {
  96 + // 去重
  97 + renderArr = renderArr.filter(item => getRelation(item, routes[i]) !== 1);
  98 + // 是否包含
  99 + const isAdd = renderArr.every(item => getRelation(item, routes[i]) === 3);
  100 + if (isAdd) {
  101 + renderArr.push(routes[i]);
  102 + }
  103 + }
  104 + return renderArr;
  105 +}
  106 +
  107 +/**
  108 + * Get router routing configuration
  109 + * { path:{name,...param}}=>Array<{name,path ...param}>
  110 + * @param {string} path
  111 + * @param {routerData} routerData
  112 + */
  113 +export function getRoutes(path, routerData) {
  114 + let routes = Object.keys(routerData).filter(
  115 + routePath => routePath.indexOf(path) === 0 && routePath !== path
  116 + );
  117 + // Replace path to '' eg. path='user' /user/name => name
  118 + routes = routes.map(item => item.replace(path, ''));
  119 + // Get the route to be rendered to remove the deep rendering
  120 + const renderArr = getRenderArr(routes);
  121 + // Conversion and stitching parameters
  122 + const renderRoutes = renderArr.map(item => {
  123 + const exact = !routes.some(route => route !== item && getRelation(route, item) === 1);
  124 + return {
  125 + exact,
  126 + ...routerData[`${path}${item}`],
  127 + key: `${path}${item}`,
  128 + path: `${path}${item}`,
  129 + };
  130 + });
  131 + return renderRoutes;
  132 +}
  133 +
  134 +export function getPageQuery() {
  135 + return parse(window.location.href.split('?')[1]);
  136 +}
  137 +
  138 +export function getQueryPath(path = '', query = {}) {
  139 + const search = stringify(query);
  140 + if (search.length) {
  141 + return `${path}?${search}`;
  142 + }
  143 + return path;
  144 +}
  145 +
  146 +/* eslint no-useless-escape:0 */
  147 +const reg = /(((^https?:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+(?::\d+)?|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)$/;
  148 +
  149 +export function isUrl(path) {
  150 + return reg.test(path);
  151 +}
  152 +
  153 +export function formatWan(val) {
  154 + const v = val * 1;
  155 + if (!v || Number.isNaN(v)) return '';
  156 +
  157 + let result = val;
  158 + if (val > 10000) {
  159 + result = Math.floor(val / 10000);
  160 + result = (
  161 + <span>
  162 + {result}
  163 + <span
  164 + style={{
  165 + position: 'relative',
  166 + top: -2,
  167 + fontSize: 14,
  168 + fontStyle: 'normal',
  169 + marginLeft: 2,
  170 + }}
  171 + >
  172 +
  173 + </span>
  174 + </span>
  175 + );
  176 + }
  177 + return result;
  178 +}
  179 +
  180 +// 给官方演示站点用,用于关闭真实开发环境不需要使用的特性
  181 +export function isAntdPro() {
  182 + return window.location.hostname === 'preview.pro.ant.design';
  183 +}
... ...
  1 +.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 +}
... ...
  1 +# @umi-material/workplace
  2 +
  3 +Workplace
  4 +
  5 +## Usage
  6 +
  7 +```sh
  8 +umi block https://github.com/umijs/umi-blocks/tree/master/workplace
  9 +```
  10 +
  11 +## LICENSE
  12 +
  13 +MIT
... ...
  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 +}
... ...
  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 +}
... ...
  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 +};
... ...
  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 + &nbsp;
  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 +};
... ...
  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 +};
... ...
  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 +};
... ...
注册登录 后发表评论