init antd-pro block analysis

+/yarn.lock
+/package-lock.json
+/dist
+/node_modules
+
+.umi
+.umi-production

+export default {
+  plugins: [
+    ['umi-plugin-block-dev', {}],
+    ['umi-plugin-react', {
+      dva: true,
+      locale: true,
+      antd: true,
+    }]
+  ],
+}

+import React, { PureComponent } from 'react';
+import { connect } from 'dva';
+import styles from './GridContent.less';
+
+class GridContent extends PureComponent {
+  render() {
+    const { contentWidth, children } = this.props;
+    let className = `${styles.main}`;
+    if (contentWidth === 'Fixed') {
+      className = `${styles.main} ${styles.wide}`;
+    }
+    return <div className={className}>{children}</div>;
+  }
+}
+
+export default connect(({ setting }) => ({
+  contentWidth: setting.contentWidth,
+}))(GridContent);

+.main {
+  width: 100%;
+  height: 100%;
+  min-height: 100%;
+  transition: 0.3s;
+  &.wide {
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+}

+import React from 'react';
+import { Spin } from 'antd';
+
+// loading components from code split
+// https://umijs.org/plugin/umi-plugin-react.html#dynamicimport
+export default () => (
+  <div style={{ paddingTop: 100, textAlign: 'center' }}>
+    <Spin size="large" />
+  </div>
+);

+import { stringify } from 'qs';
+import request from '@/utils/request';
+
+export async function queryProjectNotice() {
+  return request('/api/project/notice');
+}
+
+export async function queryActivities() {
+  return request('/api/activities');
+}
+
+export async function queryRule(params) {
+  return request(`/api/rule?${stringify(params)}`);
+}
+
+export async function removeRule(params) {
+  return request('/api/rule', {
+    method: 'POST',
+    body: {
+      ...params,
+      method: 'delete',
+    },
+  });
+}
+
+export async function addRule(params) {
+  return request('/api/rule', {
+    method: 'POST',
+    body: {
+      ...params,
+      method: 'post',
+    },
+  });
+}
+
+export async function updateRule(params) {
+  return request('/api/rule', {
+    method: 'POST',
+    body: {
+      ...params,
+      method: 'update',
+    },
+  });
+}
+
+export async function fakeSubmitForm(params) {
+  return request('/api/forms', {
+    method: 'POST',
+    body: params,
+  });
+}
+
+export async function fakeChartData() {
+  return request('/api/fake_chart_data');
+}
+
+export async function queryTags() {
+  return request('/api/tags');
+}
+
+export async function queryBasicProfile() {
+  return request('/api/profile/basic');
+}
+
+export async function queryAdvancedProfile() {
+  return request('/api/profile/advanced');
+}
+
+export async function queryFakeList(params) {
+  return request(`/api/fake_list?${stringify(params)}`);
+}
+
+export async function removeFakeList(params) {
+  const { count = 5, ...restParams } = params;
+  return request(`/api/fake_list?count=${count}`, {
+    method: 'POST',
+    body: {
+      ...restParams,
+      method: 'delete',
+    },
+  });
+}
+
+export async function addFakeList(params) {
+  const { count = 5, ...restParams } = params;
+  return request(`/api/fake_list?count=${count}`, {
+    method: 'POST',
+    body: {
+      ...restParams,
+      method: 'post',
+    },
+  });
+}
+
+export async function updateFakeList(params) {
+  const { count = 5, ...restParams } = params;
+  return request(`/api/fake_list?count=${count}`, {
+    method: 'POST',
+    body: {
+      ...restParams,
+      method: 'update',
+    },
+  });
+}
+
+export async function fakeAccountLogin(params) {
+  return request('/api/login/account', {
+    method: 'POST',
+    body: params,
+  });
+}
+
+export async function fakeRegister(params) {
+  return request('/api/register', {
+    method: 'POST',
+    body: params,
+  });
+}
+
+export async function queryNotices() {
+  return request('/api/notices');
+}
+
+export async function getFakeCaptcha(mobile) {
+  return request(`/api/captcha?mobile=${mobile}`);
+}

+import React from 'react';
+import { yuan } from 'ant-design-pro/lib/Charts';
+/**
+ * 减少使用 dangerouslySetInnerHTML
+ */
+export default class Yuan extends React.PureComponent {
+  componentDidMount() {
+    this.rendertoHtml();
+  }
+
+  componentDidUpdate() {
+    this.rendertoHtml();
+  }
+
+  rendertoHtml = () => {
+    const { children } = this.props;
+    if (this.main) {
+      this.main.innerHTML = yuan(children);
+    }
+  };
+
+  render() {
+    return (
+      <span
+        ref={ref => {
+          this.main = ref;
+        }}
+      />
+    );
+  }
+}

+import fetch from 'dva/fetch';
+import { notification } from 'antd';
+import router from 'umi/router';
+import hash from 'hash.js';
+import { isAntdPro } from './utils';
+
+const codeMessage = {
+  200: '服务器成功返回请求的数据。',
+  201: '新建或修改数据成功。',
+  202: '一个请求已经进入后台排队（异步任务）。',
+  204: '删除数据成功。',
+  400: '发出的请求有错误，服务器没有进行新建或修改数据的操作。',
+  401: '用户没有权限（令牌、用户名、密码错误）。',
+  403: '用户得到授权，但是访问是被禁止的。',
+  404: '发出的请求针对的是不存在的记录，服务器没有进行操作。',
+  406: '请求的格式不可得。',
+  410: '请求的资源被永久删除，且不会再得到的。',
+  422: '当创建一个对象时，发生一个验证错误。',
+  500: '服务器发生错误，请检查服务器。',
+  502: '网关错误。',
+  503: '服务不可用，服务器暂时过载或维护。',
+  504: '网关超时。',
+};
+
+const checkStatus = response => {
+  if (response.status >= 200 && response.status < 300) {
+    return response;
+  }
+  const errortext = codeMessage[response.status] || response.statusText;
+  notification.error({
+    message: `请求错误 ${response.status}: ${response.url}`,
+    description: errortext,
+  });
+  const error = new Error(errortext);
+  error.name = response.status;
+  error.response = response;
+  throw error;
+};
+
+const cachedSave = (response, hashcode) => {
+  /**
+   * Clone a response data and store it in sessionStorage
+   * Does not support data other than json, Cache only json
+   */
+  const contentType = response.headers.get('Content-Type');
+  if (contentType && contentType.match(/application\/json/i)) {
+    // All data is saved as text
+    response
+      .clone()
+      .text()
+      .then(content => {
+        sessionStorage.setItem(hashcode, content);
+        sessionStorage.setItem(`${hashcode}:timestamp`, Date.now());
+      });
+  }
+  return response;
+};
+
+/**
+ * Requests a URL, returning a promise.
+ *
+ * @param  {string} url       The URL we want to request
+ * @param  {object} [option] The options we want to pass to "fetch"
+ * @return {object}           An object containing either "data" or "err"
+ */
+export default function request(url, option) {
+  const options = {
+    expirys: isAntdPro(),
+    ...option,
+  };
+  /**
+   * Produce fingerprints based on url and parameters
+   * Maybe url has the same parameters
+   */
+  const fingerprint = url + (options.body ? JSON.stringify(options.body) : '');
+  const hashcode = hash
+    .sha256()
+    .update(fingerprint)
+    .digest('hex');
+
+  const defaultOptions = {
+    credentials: 'include',
+  };
+  const newOptions = { ...defaultOptions, ...options };
+  if (
+    newOptions.method === 'POST' ||
+    newOptions.method === 'PUT' ||
+    newOptions.method === 'DELETE'
+  ) {
+    if (!(newOptions.body instanceof FormData)) {
+      newOptions.headers = {
+        Accept: 'application/json',
+        'Content-Type': 'application/json; charset=utf-8',
+        ...newOptions.headers,
+      };
+      newOptions.body = JSON.stringify(newOptions.body);
+    } else {
+      // newOptions.body is FormData
+      newOptions.headers = {
+        Accept: 'application/json',
+        ...newOptions.headers,
+      };
+    }
+  }
+
+  const expirys = options.expirys && 60;
+  // options.expirys !== false, return the cache,
+  if (options.expirys !== false) {
+    const cached = sessionStorage.getItem(hashcode);
+    const whenCached = sessionStorage.getItem(`${hashcode}:timestamp`);
+    if (cached !== null && whenCached !== null) {
+      const age = (Date.now() - whenCached) / 1000;
+      if (age < expirys) {
+        const response = new Response(new Blob([cached]));
+        return response.json();
+      }
+      sessionStorage.removeItem(hashcode);
+      sessionStorage.removeItem(`${hashcode}:timestamp`);
+    }
+  }
+  return fetch(url, newOptions)
+    .then(checkStatus)
+    .then(response => cachedSave(response, hashcode))
+    .then(response => {
+      // DELETE and 204 do not return data by default
+      // using .json will report an error.
+      if (newOptions.method === 'DELETE' || response.status === 204) {
+        return response.text();
+      }
+      return response.json();
+    })
+    .catch(e => {
+      const status = e.name;
+      if (status === 401) {
+        // @HACK
+        /* eslint-disable no-underscore-dangle */
+        window.g_app._store.dispatch({
+          type: 'login/logout',
+        });
+        return;
+      }
+      // environment should not be used
+      if (status === 403) {
+        router.push('/exception/403');
+        return;
+      }
+      if (status <= 504 && status >= 500) {
+        router.push('/exception/500');
+        return;
+      }
+      if (status >= 404 && status < 422) {
+        router.push('/exception/404');
+      }
+    });
+}

+import moment from 'moment';
+import React from 'react';
+import nzh from 'nzh/cn';
+import { parse, stringify } from 'qs';
+
+export function fixedZero(val) {
+  return val * 1 < 10 ? `0${val}` : val;
+}
+
+export function getTimeDistance(type) {
+  const now = new Date();
+  const oneDay = 1000 * 60 * 60 * 24;
+
+  if (type === 'today') {
+    now.setHours(0);
+    now.setMinutes(0);
+    now.setSeconds(0);
+    return [moment(now), moment(now.getTime() + (oneDay - 1000))];
+  }
+
+  if (type === 'week') {
+    let day = now.getDay();
+    now.setHours(0);
+    now.setMinutes(0);
+    now.setSeconds(0);
+
+    if (day === 0) {
+      day = 6;
+    } else {
+      day -= 1;
+    }
+
+    const beginTime = now.getTime() - day * oneDay;
+
+    return [moment(beginTime), moment(beginTime + (7 * oneDay - 1000))];
+  }
+
+  if (type === 'month') {
+    const year = now.getFullYear();
+    const month = now.getMonth();
+    const nextDate = moment(now).add(1, 'months');
+    const nextYear = nextDate.year();
+    const nextMonth = nextDate.month();
+
+    return [
+      moment(`${year}-${fixedZero(month + 1)}-01 00:00:00`),
+      moment(moment(`${nextYear}-${fixedZero(nextMonth + 1)}-01 00:00:00`).valueOf() - 1000),
+    ];
+  }
+
+  const year = now.getFullYear();
+  return [moment(`${year}-01-01 00:00:00`), moment(`${year}-12-31 23:59:59`)];
+}
+
+export function getPlainNode(nodeList, parentPath = '') {
+  const arr = [];
+  nodeList.forEach(node => {
+    const item = node;
+    item.path = `${parentPath}/${item.path || ''}`.replace(/\/+/g, '/');
+    item.exact = true;
+    if (item.children && !item.component) {
+      arr.push(...getPlainNode(item.children, item.path));
+    } else {
+      if (item.children && item.component) {
+        item.exact = false;
+      }
+      arr.push(item);
+    }
+  });
+  return arr;
+}
+
+export function digitUppercase(n) {
+  return nzh.toMoney(n);
+}
+
+function getRelation(str1, str2) {
+  if (str1 === str2) {
+    console.warn('Two path are equal!'); // eslint-disable-line
+  }
+  const arr1 = str1.split('/');
+  const arr2 = str2.split('/');
+  if (arr2.every((item, index) => item === arr1[index])) {
+    return 1;
+  }
+  if (arr1.every((item, index) => item === arr2[index])) {
+    return 2;
+  }
+  return 3;
+}
+
+function getRenderArr(routes) {
+  let renderArr = [];
+  renderArr.push(routes[0]);
+  for (let i = 1; i < routes.length; i += 1) {
+    // 去重
+    renderArr = renderArr.filter(item => getRelation(item, routes[i]) !== 1);
+    // 是否包含
+    const isAdd = renderArr.every(item => getRelation(item, routes[i]) === 3);
+    if (isAdd) {
+      renderArr.push(routes[i]);
+    }
+  }
+  return renderArr;
+}
+
+/**
+ * Get router routing configuration
+ * { path:{name,...param}}=>Array<{name,path ...param}>
+ * @param {string} path
+ * @param {routerData} routerData
+ */
+export function getRoutes(path, routerData) {
+  let routes = Object.keys(routerData).filter(
+    routePath => routePath.indexOf(path) === 0 && routePath !== path
+  );
+  // Replace path to '' eg. path='user' /user/name => name
+  routes = routes.map(item => item.replace(path, ''));
+  // Get the route to be rendered to remove the deep rendering
+  const renderArr = getRenderArr(routes);
+  // Conversion and stitching parameters
+  const renderRoutes = renderArr.map(item => {
+    const exact = !routes.some(route => route !== item && getRelation(route, item) === 1);
+    return {
+      exact,
+      ...routerData[`${path}${item}`],
+      key: `${path}${item}`,
+      path: `${path}${item}`,
+    };
+  });
+  return renderRoutes;
+}
+
+export function getPageQuery() {
+  return parse(window.location.href.split('?')[1]);
+}
+
+export function getQueryPath(path = '', query = {}) {
+  const search = stringify(query);
+  if (search.length) {
+    return `${path}?${search}`;
+  }
+  return path;
+}
+
+/* eslint no-useless-escape:0 */
+const reg = /(((^https?:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+(?::\d+)?|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)$/;
+
+export function isUrl(path) {
+  return reg.test(path);
+}
+
+export function formatWan(val) {
+  const v = val * 1;
+  if (!v || Number.isNaN(v)) return '';
+
+  let result = val;
+  if (val > 10000) {
+    result = Math.floor(val / 10000);
+    result = (
+      <span>
+        {result}
+        <span
+          style={{
+            position: 'relative',
+            top: -2,
+            fontSize: 14,
+            fontStyle: 'normal',
+            marginLeft: 2,
+          }}
+        >
+          万
+        </span>
+      </span>
+    );
+  }
+  return result;
+}
+
+// 给官方演示站点用，用于关闭真实开发环境不需要使用的特性
+export function isAntdPro() {
+  return window.location.hostname === 'preview.pro.ant.design';
+}

+.textOverflow() {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: break-all;
+  white-space: nowrap;
+}
+
+.textOverflowMulti(@line: 3, @bg: #fff) {
+  overflow: hidden;
+  position: relative;
+  line-height: 1.5em;
+  max-height: @line * 1.5em;
+  text-align: justify;
+  margin-right: -1em;
+  padding-right: 1em;
+  &:before {
+    background: @bg;
+    content: '...';
+    padding: 0 1px;
+    position: absolute;
+    right: 14px;
+    bottom: 0;
+  }
+  &:after {
+    background: white;
+    content: '';
+    margin-top: 0.2em;
+    position: absolute;
+    right: 14px;
+    width: 1em;
+    height: 1em;
+  }
+}
+
+// mixins for clearfix
+// ------------------------
+.clearfix() {
+  zoom: 1;
+  &:before,
+  &:after {
+    content: ' ';
+    display: table;
+  }
+  &:after {
+    clear: both;
+    visibility: hidden;
+    font-size: 0;
+    height: 0;
+  }
+}

+# @umi-material/analysis
+
+Analysis
+
+## Usage
+
+```sh
+umi block https://github.com/umijs/umi-blocks/tree/master/analysis
+```
+
+## LICENSE
+
+MIT

+{
+  "name": "@umi-block/analysis",
+  "version": "0.0.1",
+  "description": "Analysis",
+  "main": "src/index.js",
+  "scripts": {
+    "dev": "umi dev"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/umijs/umi-blocks/analysis"
+  },
+  "dependencies": {
+    "react": "^16.6.3",
+    "dva": "^2.4.0",
+    "antd": "^3.10.9",
+    "moment": "^2.22.2",
+    "nzh": "^1.0.3",
+    "qs": "^6.6.0",
+    "ant-design-pro": "^2.1.1",
+    "numeral": "^2.0.6",
+    "hash.js": "^1.1.5"
+  },
+  "devDependencies": {
+    "umi": "^2.3.0-beta.1",
+    "umi-plugin-react": "^1.3.0-beta.1",
+    "umi-plugin-block-dev": "^1.0.0"
+  },
+  "license": "ISC"
+}

+@import '~antd/lib/style/themes/default.less';
+@import '~@/utils/utils.less';
+
+.iconGroup {
+  i {
+    transition: color 0.32s;
+    color: @text-color-secondary;
+    cursor: pointer;
+    margin-left: 16px;
+    &:hover {
+      color: @text-color;
+    }
+  }
+}
+
+.rankingList {
+  margin: 25px 0 0;
+  padding: 0;
+  list-style: none;
+  li {
+    .clearfix();
+    margin-top: 16px;
+    display: flex;
+    align-items: center;
+    span {
+      color: @text-color;
+      font-size: 14px;
+      line-height: 22px;
+    }
+    .rankingItemNumber {
+      background-color: @background-color-base;
+      border-radius: 20px;
+      display: inline-block;
+      font-size: 12px;
+      font-weight: 600;
+      margin-right: 16px;
+      height: 20px;
+      line-height: 20px;
+      width: 20px;
+      text-align: center;
+      margin-top: 1.5px;
+      &.active {
+        background-color: #314659;
+        color: #fff;
+      }
+    }
+    .rankingItemTitle {
+      flex: 1;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      margin-right: 8px;
+    }
+  }
+}
+
+.salesExtra {
+  display: inline-block;
+  margin-right: 24px;
+  a {
+    color: @text-color;
+    margin-left: 24px;
+    &:hover {
+      color: @primary-color;
+    }
+    &.currentDate {
+      color: @primary-color;
+    }
+  }
+}
+
+.salesCard {
+  .salesBar {
+    padding: 0 0 32px 32px;
+  }
+  .salesRank {
+    padding: 0 32px 32px 72px;
+  }
+  :global {
+    .ant-tabs-bar {
+      padding-left: 16px;
+      .ant-tabs-nav .ant-tabs-tab {
+        padding-top: 16px;
+        padding-bottom: 14px;
+        line-height: 24px;
+      }
+    }
+    .ant-tabs-extra-content {
+      padding-right: 24px;
+      line-height: 55px;
+    }
+    .ant-card-head {
+      position: relative;
+    }
+    .ant-card-head-title {
+      align-items: normal;
+    }
+  }
+}
+
+.salesCardExtra {
+  height: inherit;
+}
+
+.salesTypeRadio {
+  position: absolute;
+  right: 54px;
+  bottom: 12px;
+}
+
+.offlineCard {
+  :global {
+    .ant-tabs-ink-bar {
+      bottom: auto;
+    }
+    .ant-tabs-bar {
+      border-bottom: none;
+    }
+    .ant-tabs-nav-container-scrolling {
+      padding-left: 40px;
+      padding-right: 40px;
+    }
+    .ant-tabs-tab-prev-icon:before {
+      position: relative;
+      left: 6px;
+    }
+    .ant-tabs-tab-next-icon:before {
+      position: relative;
+      right: 6px;
+    }
+    .ant-tabs-tab-active h4 {
+      color: @primary-color;
+    }
+  }
+}
+
+.trendText {
+  margin-left: 8px;
+  color: @heading-color;
+}
+
+@media screen and (max-width: @screen-lg) {
+  .salesExtra {
+    display: none;
+  }
+
+  .rankingList {
+    li {
+      span:first-child {
+        margin-right: 8px;
+      }
+    }
+  }
+}
+
+@media screen and (max-width: @screen-md) {
+  .rankingTitle {
+    margin-top: 16px;
+  }
+
+  .salesCard .salesBar {
+    padding: 16px;
+  }
+}
+
+@media screen and (max-width: @screen-sm) {
+  .salesExtraWrap {
+    display: none;
+  }
+
+  .salesCard {
+    :global {
+      .ant-tabs-content {
+        padding-top: 30px;
+      }
+    }
+  }
+}

+import React, { memo } from 'react';
+import { Row, Col, Icon, Tooltip } from 'antd';
+import { FormattedMessage } from 'umi/locale';
+import styles from './Analysis.less';
+import { ChartCard, MiniArea, MiniBar, MiniProgress, Field } from 'ant-design-pro/lib/Charts';
+import Trend from 'ant-design-pro/lib/Trend';
+import numeral from 'numeral';
+import Yuan from '@/utils/Yuan';
+
+const topColResponsiveProps = {
+  xs: 24,
+  sm: 12,
+  md: 12,
+  lg: 12,
+  xl: 6,
+  style: { marginBottom: 24 },
+};
+
+const IntroduceRow = memo(({ loading, visitData }) => (
+  <Row gutter={24}>
+    <Col {...topColResponsiveProps}>
+      <ChartCard
+        bordered={false}
+        title={<FormattedMessage id="app.analysis.total-sales" defaultMessage="Total Sales" />}
+        action={
+          <Tooltip
+            title={<FormattedMessage id="app.analysis.introduce" defaultMessage="Introduce" />}
+          >
+            <Icon type="info-circle-o" />
+          </Tooltip>
+        }
+        loading={loading}
+        total={() => <Yuan>126560</Yuan>}
+        footer={
+          <Field
+            label={<FormattedMessage id="app.analysis.day-sales" defaultMessage="Daily Sales" />}
+            value={`￥${numeral(12423).format('0,0')}`}
+          />
+        }
+        contentHeight={46}
+      >
+        <Trend flag="up" style={{ marginRight: 16 }}>
+          <FormattedMessage id="app.analysis.week" defaultMessage="Weekly Changes" />
+          <span className={styles.trendText}>12%</span>
+        </Trend>
+        <Trend flag="down">
+          <FormattedMessage id="app.analysis.day" defaultMessage="Daily Changes" />
+          <span className={styles.trendText}>11%</span>
+        </Trend>
+      </ChartCard>
+    </Col>
+
+    <Col {...topColResponsiveProps}>
+      <ChartCard
+        bordered={false}
+        loading={loading}
+        title={<FormattedMessage id="app.analysis.visits" defaultMessage="Visits" />}
+        action={
+          <Tooltip
+            title={<FormattedMessage id="app.analysis.introduce" defaultMessage="Introduce" />}
+          >
+            <Icon type="info-circle-o" />
+          </Tooltip>
+        }
+        total={numeral(8846).format('0,0')}
+        footer={
+          <Field
+            label={<FormattedMessage id="app.analysis.day-visits" defaultMessage="Daily Visits" />}
+            value={numeral(1234).format('0,0')}
+          />
+        }
+        contentHeight={46}
+      >
+        <MiniArea color="#975FE4" data={visitData} />
+      </ChartCard>
+    </Col>
+    <Col {...topColResponsiveProps}>
+      <ChartCard
+        bordered={false}
+        loading={loading}
+        title={<FormattedMessage id="app.analysis.payments" defaultMessage="Payments" />}
+        action={
+          <Tooltip
+            title={<FormattedMessage id="app.analysis.introduce" defaultMessage="Introduce" />}
+          >
+            <Icon type="info-circle-o" />
+          </Tooltip>
+        }
+        total={numeral(6560).format('0,0')}
+        footer={
+          <Field
+            label={
+              <FormattedMessage
+                id="app.analysis.conversion-rate"
+                defaultMessage="Conversion Rate"
+              />
+            }
+            value="60%"
+          />
+        }
+        contentHeight={46}
+      >
+        <MiniBar data={visitData} />
+      </ChartCard>
+    </Col>
+    <Col {...topColResponsiveProps}>
+      <ChartCard
+        loading={loading}
+        bordered={false}
+        title={
+          <FormattedMessage
+            id="app.analysis.operational-effect"
+            defaultMessage="Operational Effect"
+          />
+        }
+        action={
+          <Tooltip
+            title={<FormattedMessage id="app.analysis.introduce" defaultMessage="Introduce" />}
+          >
+            <Icon type="info-circle-o" />
+          </Tooltip>
+        }
+        total="78%"
+        footer={
+          <div style={{ whiteSpace: 'nowrap', overflow: 'hidden' }}>
+            <Trend flag="up" style={{ marginRight: 16 }}>
+              <FormattedMessage id="app.analysis.week" defaultMessage="Weekly Changes" />
+              <span className={styles.trendText}>12%</span>
+            </Trend>
+            <Trend flag="down">
+              <FormattedMessage id="app.analysis.day" defaultMessage="Weekly Changes" />
+              <span className={styles.trendText}>11%</span>
+            </Trend>
+          </div>
+        }
+        contentHeight={46}
+      >
+        <MiniProgress percent={78} strokeWidth={8} target={80} color="#13C2C2" />
+      </ChartCard>
+    </Col>
+  </Row>
+));
+
+export default IntroduceRow;

+import React, { memo } from 'react';
+import { Card, Tabs, Row, Col } from 'antd';
+import { formatMessage, FormattedMessage } from 'umi/locale';
+import { TimelineChart, Pie } from 'ant-design-pro/lib/Charts';
+import NumberInfo from 'ant-design-pro/lib/NumberInfo';
+import styles from './Analysis.less';
+
+const CustomTab = ({ data, currentTabKey: currentKey }) => (
+  <Row gutter={8} style={{ width: 138, margin: '8px 0' }}>
+    <Col span={12}>
+      <NumberInfo
+        title={data.name}
+        subTitle={
+          <FormattedMessage id="app.analysis.conversion-rate" defaultMessage="Conversion Rate" />
+        }
+        gap={2}
+        total={`${data.cvr * 100}%`}
+        theme={currentKey !== data.name && 'light'}
+      />
+    </Col>
+    <Col span={12} style={{ paddingTop: 36 }}>
+      <Pie
+        animate={false}
+        color={currentKey !== data.name && '#BDE4FF'}
+        inner={0.55}
+        tooltip={false}
+        margin={[0, 0, 0, 0]}
+        percent={data.cvr * 100}
+        height={64}
+      />
+    </Col>
+  </Row>
+);
+
+const { TabPane } = Tabs;
+
+const OfflineData = memo(
+  ({ activeKey, loading, offlineData, offlineChartData, handleTabChange }) => (
+    <Card
+      loading={loading}
+      className={styles.offlineCard}
+      bordered={false}
+      style={{ marginTop: 32 }}
+    >
+      <Tabs activeKey={activeKey} onChange={handleTabChange}>
+        {offlineData.map(shop => (
+          <TabPane tab={<CustomTab data={shop} currentTabKey={activeKey} />} key={shop.name}>
+            <div style={{ padding: '0 24px' }}>
+              <TimelineChart
+                height={400}
+                data={offlineChartData}
+                titleMap={{
+                  y1: formatMessage({ id: 'app.analysis.traffic' }),
+                  y2: formatMessage({ id: 'app.analysis.payments' }),
+                }}
+              />
+            </div>
+          </TabPane>
+        ))}
+      </Tabs>
+    </Card>
+  )
+);
+
+export default OfflineData;

+import React, { memo } from 'react';
+import { Card, Radio } from 'antd';
+import { FormattedMessage } from 'umi/locale';
+import styles from './Analysis.less';
+import { Pie } from 'ant-design-pro/lib/Charts';
+import Yuan from '@/utils/Yuan';
+
+const ProportionSales = memo(
+  ({ dropdownGroup, salesType, loading, salesPieData, handleChangeSalesType }) => (
+    <Card
+      loading={loading}
+      className={styles.salesCard}
+      bordered={false}
+      title={
+        <FormattedMessage
+          id="app.analysis.the-proportion-of-sales"
+          defaultMessage="The Proportion of Sales"
+        />
+      }
+      bodyStyle={{ padding: 24 }}
+      extra={
+        <div className={styles.salesCardExtra}>
+          {dropdownGroup}
+          <div className={styles.salesTypeRadio}>
+            <Radio.Group value={salesType} onChange={handleChangeSalesType}>
+              <Radio.Button value="all">
+                <FormattedMessage id="app.analysis.channel.all" defaultMessage="ALL" />
+              </Radio.Button>
+              <Radio.Button value="online">
+                <FormattedMessage id="app.analysis.channel.online" defaultMessage="Online" />
+              </Radio.Button>
+              <Radio.Button value="stores">
+                <FormattedMessage id="app.analysis.channel.stores" defaultMessage="Stores" />
+              </Radio.Button>
+            </Radio.Group>
+          </div>
+        </div>
+      }
+      style={{ marginTop: 24 }}
+    >
+      <div
+        style={{
+          minHeight: 380,
+        }}
+      >
+        <h4 style={{ marginTop: 8, marginBottom: 32 }}>
+          <FormattedMessage id="app.analysis.sales" defaultMessage="Sales" />
+        </h4>
+        <Pie
+          hasLegend
+          subTitle={<FormattedMessage id="app.analysis.sales" defaultMessage="Sales" />}
+          total={() => <Yuan>{salesPieData.reduce((pre, now) => now.y + pre, 0)}</Yuan>}
+          data={salesPieData}
+          valueFormat={value => <Yuan>{value}</Yuan>}
+          height={248}
+          lineWidth={4}
+        />
+      </div>
+    </Card>
+  )
+);
+
+export default ProportionSales;

+import React, { memo } from 'react';
+import { Row, Col, Card, Tabs, DatePicker } from 'antd';
+import { FormattedMessage, formatMessage } from 'umi/locale';
+import numeral from 'numeral';
+import { Bar } from 'ant-design-pro/lib/Charts';
+import styles from './Analysis.less';
+
+const { RangePicker } = DatePicker;
+const { TabPane } = Tabs;
+
+const rankingListData = [];
+for (let i = 0; i < 7; i += 1) {
+  rankingListData.push({
+    title: formatMessage({ id: 'app.analysis.test' }, { no: i }),
+    total: 323234,
+  });
+}
+
+const SalesCard = memo(
+  ({ rangePickerValue, salesData, isActive, handleRangePickerChange, loading, selectDate }) => (
+    <Card loading={loading} bordered={false} bodyStyle={{ padding: 0 }}>
+      <div className={styles.salesCard}>
+        <Tabs
+          tabBarExtraContent={
+            <div className={styles.salesExtraWrap}>
+              <div className={styles.salesExtra}>
+                <a className={isActive('today')} onClick={() => selectDate('today')}>
+                  <FormattedMessage id="app.analysis.all-day" defaultMessage="All Day" />
+                </a>
+                <a className={isActive('week')} onClick={() => selectDate('week')}>
+                  <FormattedMessage id="app.analysis.all-week" defaultMessage="All Week" />
+                </a>
+                <a className={isActive('month')} onClick={() => selectDate('month')}>
+                  <FormattedMessage id="app.analysis.all-month" defaultMessage="All Month" />
+                </a>
+                <a className={isActive('year')} onClick={() => selectDate('year')}>
+                  <FormattedMessage id="app.analysis.all-year" defaultMessage="All Year" />
+                </a>
+              </div>
+              <RangePicker
+                value={rangePickerValue}
+                onChange={handleRangePickerChange}
+                style={{ width: 256 }}
+              />
+            </div>
+          }
+          size="large"
+          tabBarStyle={{ marginBottom: 24 }}
+        >
+          <TabPane
+            tab={<FormattedMessage id="app.analysis.sales" defaultMessage="Sales" />}
+            key="sales"
+          >
+            <Row>
+              <Col xl={16} lg={12} md={12} sm={24} xs={24}>
+                <div className={styles.salesBar}>
+                  <Bar
+                    height={295}
+                    title={
+                      <FormattedMessage
+                        id="app.analysis.sales-trend"
+                        defaultMessage="Sales Trend"
+                      />
+                    }
+                    data={salesData}
+                  />
+                </div>
+              </Col>
+              <Col xl={8} lg={12} md={12} sm={24} xs={24}>
+                <div className={styles.salesRank}>
+                  <h4 className={styles.rankingTitle}>
+                    <FormattedMessage
+                      id="app.analysis.sales-ranking"
+                      defaultMessage="Sales Ranking"
+                    />
+                  </h4>
+                  <ul className={styles.rankingList}>
+                    {rankingListData.map((item, i) => (
+                      <li key={item.title}>
+                        <span
+                          className={`${styles.rankingItemNumber} ${i < 3 ? styles.active : ''}`}
+                        >
+                          {i + 1}
+                        </span>
+                        <span className={styles.rankingItemTitle} title={item.title}>
+                          {item.title}
+                        </span>
+                        <span className={styles.rankingItemValue}>
+                          {numeral(item.total).format('0,0')}
+                        </span>
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              </Col>
+            </Row>
+          </TabPane>
+          <TabPane
+            tab={<FormattedMessage id="app.analysis.visits" defaultMessage="Visits" />}
+            key="views"
+          >
+            <Row>
+              <Col xl={16} lg={12} md={12} sm={24} xs={24}>
+                <div className={styles.salesBar}>
+                  <Bar
+                    height={292}
+                    title={
+                      <FormattedMessage
+                        id="app.analysis.visits-trend"
+                        defaultMessage="Visits Trend"
+                      />
+                    }
+                    data={salesData}
+                  />
+                </div>
+              </Col>
+              <Col xl={8} lg={12} md={12} sm={24} xs={24}>
+                <div className={styles.salesRank}>
+                  <h4 className={styles.rankingTitle}>
+                    <FormattedMessage
+                      id="app.analysis.visits-ranking"
+                      defaultMessage="Visits Ranking"
+                    />
+                  </h4>
+                  <ul className={styles.rankingList}>
+                    {rankingListData.map((item, i) => (
+                      <li key={item.title}>
+                        <span
+                          className={`${styles.rankingItemNumber} ${i < 3 ? styles.active : ''}`}
+                        >
+                          {i + 1}
+                        </span>
+                        <span className={styles.rankingItemTitle} title={item.title}>
+                          {item.title}
+                        </span>
+                        <span>{numeral(item.total).format('0,0')}</span>
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              </Col>
+            </Row>
+          </TabPane>
+        </Tabs>
+      </div>
+    </Card>
+  )
+);
+
+export default SalesCard;

+import React, { memo } from 'react';
+import { Row, Col, Table, Tooltip, Card, Icon } from 'antd';
+import { FormattedMessage } from 'umi/locale';
+import Trend from 'ant-design-pro/lib/Trend';
+import numeral from 'numeral';
+import NumberInfo from 'ant-design-pro/lib/NumberInfo';
+import { MiniArea } from 'ant-design-pro/lib/Charts';
+import styles from './Analysis.less';
+
+const columns = [
+  {
+    title: <FormattedMessage id="app.analysis.table.rank" defaultMessage="Rank" />,
+    dataIndex: 'index',
+    key: 'index',
+  },
+  {
+    title: (
+      <FormattedMessage id="app.analysis.table.search-keyword" defaultMessage="Search keyword" />
+    ),
+    dataIndex: 'keyword',
+    key: 'keyword',
+    render: text => <a href="/">{text}</a>,
+  },
+  {
+    title: <FormattedMessage id="app.analysis.table.users" defaultMessage="Users" />,
+    dataIndex: 'count',
+    key: 'count',
+    sorter: (a, b) => a.count - b.count,
+    className: styles.alignRight,
+  },
+  {
+    title: <FormattedMessage id="app.analysis.table.weekly-range" defaultMessage="Weekly Range" />,
+    dataIndex: 'range',
+    key: 'range',
+    sorter: (a, b) => a.range - b.range,
+    render: (text, record) => (
+      <Trend flag={record.status === 1 ? 'down' : 'up'}>
+        <span style={{ marginRight: 4 }}>{text}%</span>
+      </Trend>
+    ),
+    align: 'right',
+  },
+];
+
+const TopSearch = memo(({ loading, visitData2, searchData, dropdownGroup }) => (
+  <Card
+    loading={loading}
+    bordered={false}
+    title={
+      <FormattedMessage id="app.analysis.online-top-search" defaultMessage="Online Top Search" />
+    }
+    extra={dropdownGroup}
+    style={{ marginTop: 24 }}
+  >
+    <Row gutter={68}>
+      <Col sm={12} xs={24} style={{ marginBottom: 24 }}>
+        <NumberInfo
+          subTitle={
+            <span>
+              <FormattedMessage id="app.analysis.search-users" defaultMessage="search users" />
+              <Tooltip
+                title={<FormattedMessage id="app.analysis.introduce" defaultMessage="introduce" />}
+              >
+                <Icon style={{ marginLeft: 8 }} type="info-circle-o" />
+              </Tooltip>
+            </span>
+          }
+          gap={8}
+          total={numeral(12321).format('0,0')}
+          status="up"
+          subTotal={17.1}
+        />
+        <MiniArea line height={45} data={visitData2} />
+      </Col>
+      <Col sm={12} xs={24} style={{ marginBottom: 24 }}>
+        <NumberInfo
+          subTitle={
+            <span>
+              <FormattedMessage
+                id="app.analysis.per-capita-search"
+                defaultMessage="Per Capita Search"
+              />
+              <Tooltip
+                title={<FormattedMessage id="app.analysis.introduce" defaultMessage="introduce" />}
+              >
+                <Icon style={{ marginLeft: 8 }} type="info-circle-o" />
+              </Tooltip>
+            </span>
+          }
+          total={2.7}
+          status="down"
+          subTotal={26.2}
+          gap={8}
+        />
+        <MiniArea line height={45} data={visitData2} />
+      </Col>
+    </Row>
+    <Table
+      rowKey={record => record.index}
+      size="small"
+      columns={columns}
+      dataSource={searchData}
+      pagination={{
+        style: { marginBottom: 0 },
+        pageSize: 5,
+      }}
+    />
+  </Card>
+));
+
+export default TopSearch;

+import moment from 'moment';
+
+// mock data
+const visitData = [];
+const beginDay = new Date().getTime();
+
+const fakeY = [7, 5, 4, 2, 4, 7, 5, 6, 5, 9, 6, 3, 1, 5, 3, 6, 5];
+for (let i = 0; i < fakeY.length; i += 1) {
+  visitData.push({
+    x: moment(new Date(beginDay + 1000 * 60 * 60 * 24 * i)).format('YYYY-MM-DD'),
+    y: fakeY[i],
+  });
+}
+
+const visitData2 = [];
+const fakeY2 = [1, 6, 4, 8, 3, 7, 2];
+for (let i = 0; i < fakeY2.length; i += 1) {
+  visitData2.push({
+    x: moment(new Date(beginDay + 1000 * 60 * 60 * 24 * i)).format('YYYY-MM-DD'),
+    y: fakeY2[i],
+  });
+}
+
+const salesData = [];
+for (let i = 0; i < 12; i += 1) {
+  salesData.push({
+    x: `${i + 1}月`,
+    y: Math.floor(Math.random() * 1000) + 200,
+  });
+}
+const searchData = [];
+for (let i = 0; i < 50; i += 1) {
+  searchData.push({
+    index: i + 1,
+    keyword: `搜索关键词-${i}`,
+    count: Math.floor(Math.random() * 1000),
+    range: Math.floor(Math.random() * 100),
+    status: Math.floor((Math.random() * 10) % 2),
+  });
+}
+const salesTypeData = [
+  {
+    x: '家用电器',
+    y: 4544,
+  },
+  {
+    x: '食用酒水',
+    y: 3321,
+  },
+  {
+    x: '个护健康',
+    y: 3113,
+  },
+  {
+    x: '服饰箱包',
+    y: 2341,
+  },
+  {
+    x: '母婴产品',
+    y: 1231,
+  },
+  {
+    x: '其他',
+    y: 1231,
+  },
+];
+
+const salesTypeDataOnline = [
+  {
+    x: '家用电器',
+    y: 244,
+  },
+  {
+    x: '食用酒水',
+    y: 321,
+  },
+  {
+    x: '个护健康',
+    y: 311,
+  },
+  {
+    x: '服饰箱包',
+    y: 41,
+  },
+  {
+    x: '母婴产品',
+    y: 121,
+  },
+  {
+    x: '其他',
+    y: 111,
+  },
+];
+
+const salesTypeDataOffline = [
+  {
+    x: '家用电器',
+    y: 99,
+  },
+  {
+    x: '食用酒水',
+    y: 188,
+  },
+  {
+    x: '个护健康',
+    y: 344,
+  },
+  {
+    x: '服饰箱包',
+    y: 255,
+  },
+  {
+    x: '其他',
+    y: 65,
+  },
+];
+
+const offlineData = [];
+for (let i = 0; i < 10; i += 1) {
+  offlineData.push({
+    name: `Stores ${i}`,
+    cvr: Math.ceil(Math.random() * 9) / 10,
+  });
+}
+const offlineChartData = [];
+for (let i = 0; i < 20; i += 1) {
+  offlineChartData.push({
+    x: new Date().getTime() + 1000 * 60 * 30 * i,
+    y1: Math.floor(Math.random() * 100) + 10,
+    y2: Math.floor(Math.random() * 100) + 10,
+  });
+}
+
+const radarOriginData = [
+  {
+    name: '个人',
+    ref: 10,
+    koubei: 8,
+    output: 4,
+    contribute: 5,
+    hot: 7,
+  },
+  {
+    name: '团队',
+    ref: 3,
+    koubei: 9,
+    output: 6,
+    contribute: 3,
+    hot: 1,
+  },
+  {
+    name: '部门',
+    ref: 4,
+    koubei: 1,
+    output: 6,
+    contribute: 5,
+    hot: 7,
+  },
+];
+
+const radarData = [];
+const radarTitleMap = {
+  ref: '引用',
+  koubei: '口碑',
+  output: '产量',
+  contribute: '贡献',
+  hot: '热度',
+};
+radarOriginData.forEach(item => {
+  Object.keys(item).forEach(key => {
+    if (key !== 'name') {
+      radarData.push({
+        name: item.name,
+        label: radarTitleMap[key],
+        value: item[key],
+      });
+    }
+  });
+});
+
+const getFakeChartData = {
+  visitData,
+  visitData2,
+  salesData,
+  searchData,
+  offlineData,
+  offlineChartData,
+  salesTypeData,
+  salesTypeDataOnline,
+  salesTypeDataOffline,
+  radarData,
+};
+
+export default {
+  'GET /api/fake_chart_data': getFakeChartData,
+};

+module.exports = {
+  navTheme: 'dark', // theme for nav menu
+  primaryColor: '#1890FF', // primary color of ant design
+  layout: 'sidemenu', // nav menu position: sidemenu or topmenu
+  contentWidth: 'Fluid', // layout of content: Fluid or Fixed, only works when layout is topmenu
+  fixedHeader: false, // sticky header
+  autoHideHeader: false, // auto hide header
+  fixSiderbar: false, // sticky siderbar
+};

+import React, { Component, Suspense } from 'react';
+import { connect } from 'dva';
+import { Row, Col, Icon, Menu, Dropdown } from 'antd';
+
+import GridContent from '@/components/PageHeaderWrapper/GridContent';
+import { getTimeDistance } from '@/utils/utils';
+
+import styles from './Analysis.less';
+import PageLoading from '@/components/PageLoading';
+
+const IntroduceRow = React.lazy(() => import('./IntroduceRow'));
+const SalesCard = React.lazy(() => import('./SalesCard'));
+const TopSearch = React.lazy(() => import('./TopSearch'));
+const ProportionSales = React.lazy(() => import('./ProportionSales'));
+const OfflineData = React.lazy(() => import('./OfflineData'));
+
+@connect(({ chart, loading }) => ({
+  chart,
+  loading: loading.effects['chart/fetch'],
+}))
+class Analysis extends Component {
+  state = {
+    salesType: 'all',
+    currentTabKey: '',
+    rangePickerValue: getTimeDistance('year'),
+  };
+
+  componentDidMount() {
+    const { dispatch } = this.props;
+    this.reqRef = requestAnimationFrame(() => {
+      dispatch({
+        type: 'chart/fetch',
+      });
+    });
+  }
+
+  componentWillUnmount() {
+    const { dispatch } = this.props;
+    dispatch({
+      type: 'chart/clear',
+    });
+    cancelAnimationFrame(this.reqRef);
+    clearTimeout(this.timeoutId);
+  }
+
+  handleChangeSalesType = e => {
+    this.setState({
+      salesType: e.target.value,
+    });
+  };
+
+  handleTabChange = key => {
+    this.setState({
+      currentTabKey: key,
+    });
+  };
+
+  handleRangePickerChange = rangePickerValue => {
+    const { dispatch } = this.props;
+    this.setState({
+      rangePickerValue,
+    });
+
+    dispatch({
+      type: 'chart/fetchSalesData',
+    });
+  };
+
+  selectDate = type => {
+    const { dispatch } = this.props;
+    this.setState({
+      rangePickerValue: getTimeDistance(type),
+    });
+
+    dispatch({
+      type: 'chart/fetchSalesData',
+    });
+  };
+
+  isActive = type => {
+    const { rangePickerValue } = this.state;
+    const value = getTimeDistance(type);
+    if (!rangePickerValue[0] || !rangePickerValue[1]) {
+      return '';
+    }
+    if (
+      rangePickerValue[0].isSame(value[0], 'day') &&
+      rangePickerValue[1].isSame(value[1], 'day')
+    ) {
+      return styles.currentDate;
+    }
+    return '';
+  };
+
+  render() {
+    const { rangePickerValue, salesType, currentTabKey } = this.state;
+    const { chart, loading } = this.props;
+    const {
+      visitData,
+      visitData2,
+      salesData,
+      searchData,
+      offlineData,
+      offlineChartData,
+      salesTypeData,
+      salesTypeDataOnline,
+      salesTypeDataOffline,
+    } = chart;
+    let salesPieData;
+    if (salesType === 'all') {
+      salesPieData = salesTypeData;
+    } else {
+      salesPieData = salesType === 'online' ? salesTypeDataOnline : salesTypeDataOffline;
+    }
+    const menu = (
+      <Menu>
+        <Menu.Item>操作一</Menu.Item>
+        <Menu.Item>操作二</Menu.Item>
+      </Menu>
+    );
+
+    const dropdownGroup = (
+      <span className={styles.iconGroup}>
+        <Dropdown overlay={menu} placement="bottomRight">
+          <Icon type="ellipsis" />
+        </Dropdown>
+      </span>
+    );
+
+    const activeKey = currentTabKey || (offlineData[0] && offlineData[0].name);
+
+    return (
+      <GridContent>
+        <Suspense fallback={<PageLoading />}>
+          <IntroduceRow loading={loading} visitData={visitData} />
+        </Suspense>
+        <Suspense fallback={null}>
+          <SalesCard
+            rangePickerValue={rangePickerValue}
+            salesData={salesData}
+            isActive={this.isActive}
+            handleRangePickerChange={this.handleRangePickerChange}
+            loading={loading}
+            selectDate={this.selectDate}
+          />
+        </Suspense>
+        <Row gutter={24}>
+          <Col xl={12} lg={24} md={24} sm={24} xs={24}>
+            <Suspense fallback={null}>
+              <TopSearch
+                loading={loading}
+                visitData2={visitData2}
+                selectDate={this.selectDate}
+                searchData={searchData}
+                dropdownGroup={dropdownGroup}
+              />
+            </Suspense>
+          </Col>
+          <Col xl={12} lg={24} md={24} sm={24} xs={24}>
+            <Suspense fallback={null}>
+              <ProportionSales
+                dropdownGroup={dropdownGroup}
+                salesType={salesType}
+                loading={loading}
+                salesPieData={salesPieData}
+                handleChangeSalesType={this.handleChangeSalesType}
+              />
+            </Suspense>
+          </Col>
+        </Row>
+        <Suspense fallback={null}>
+          <OfflineData
+            activeKey={activeKey}
+            loading={loading}
+            offlineData={offlineData}
+            offlineChartData={offlineChartData}
+            handleTabChange={this.handleTabChange}
+          />
+        </Suspense>
+      </GridContent>
+    );
+  }
+}
+
+export default Analysis;

+import { fakeChartData } from '@/services/api';
+
+export default {
+  namespace: 'chart',
+
+  state: {
+    visitData: [],
+    visitData2: [],
+    salesData: [],
+    searchData: [],
+    offlineData: [],
+    offlineChartData: [],
+    salesTypeData: [],
+    salesTypeDataOnline: [],
+    salesTypeDataOffline: [],
+    radarData: [],
+    loading: false,
+  },
+
+  effects: {
+    *fetch(_, { call, put }) {
+      const response = yield call(fakeChartData);
+      yield put({
+        type: 'save',
+        payload: response,
+      });
+    },
+    *fetchSalesData(_, { call, put }) {
+      const response = yield call(fakeChartData);
+      yield put({
+        type: 'save',
+        payload: {
+          salesData: response.salesData,
+        },
+      });
+    },
+  },
+
+  reducers: {
+    save(state, { payload }) {
+      return {
+        ...state,
+        ...payload,
+      };
+    },
+    clear() {
+      return {
+        visitData: [],
+        visitData2: [],
+        salesData: [],
+        searchData: [],
+        offlineData: [],
+        offlineChartData: [],
+        salesTypeData: [],
+        salesTypeDataOnline: [],
+        salesTypeDataOffline: [],
+        radarData: [],
+      };
+    },
+  },
+};

+import { message } from 'antd';
+import defaultSettings from '../defaultSettings';
+
+let lessNodesAppended;
+const updateTheme = primaryColor => {
+  // Don't compile less in production!
+  if (APP_TYPE !== 'site') {
+    return;
+  }
+  // Determine if the component is remounted
+  if (!primaryColor) {
+    return;
+  }
+  const hideMessage = message.loading('正在编译主题！', 0);
+  function buildIt() {
+    if (!window.less) {
+      return;
+    }
+    setTimeout(() => {
+      window.less
+        .modifyVars({
+          '@primary-color': primaryColor,
+        })
+        .then(() => {
+          hideMessage();
+        })
+        .catch(() => {
+          message.error('Failed to update theme');
+          hideMessage();
+        });
+    }, 200);
+  }
+  if (!lessNodesAppended) {
+    // insert less.js and color.less
+    const lessStyleNode = document.createElement('link');
+    const lessConfigNode = document.createElement('script');
+    const lessScriptNode = document.createElement('script');
+    lessStyleNode.setAttribute('rel', 'stylesheet/less');
+    lessStyleNode.setAttribute('href', '/color.less');
+    lessConfigNode.innerHTML = `
+      window.less = {
+        async: true,
+        env: 'production',
+        javascriptEnabled: true
+      };
+    `;
+    lessScriptNode.src = 'https://gw.alipayobjects.com/os/lib/less.js/3.8.1/less.min.js';
+    lessScriptNode.async = true;
+    lessScriptNode.onload = () => {
+      buildIt();
+      lessScriptNode.onload = null;
+    };
+    document.body.appendChild(lessStyleNode);
+    document.body.appendChild(lessConfigNode);
+    document.body.appendChild(lessScriptNode);
+    lessNodesAppended = true;
+  } else {
+    buildIt();
+  }
+};
+
+const updateColorWeak = colorWeak => {
+  document.body.className = colorWeak ? 'colorWeak' : '';
+};
+
+export default {
+  namespace: 'setting',
+  state: defaultSettings,
+  reducers: {
+    getSetting(state) {
+      const setting = {};
+      const urlParams = new URL(window.location.href);
+      Object.keys(state).forEach(key => {
+        if (urlParams.searchParams.has(key)) {
+          const value = urlParams.searchParams.get(key);
+          setting[key] = value === '1' ? true : value;
+        }
+      });
+      const { primaryColor, colorWeak } = setting;
+      if (state.primaryColor !== primaryColor) {
+        updateTheme(primaryColor);
+      }
+      updateColorWeak(colorWeak);
+      return {
+        ...state,
+        ...setting,
+      };
+    },
+    changeSetting(state, { payload }) {
+      const urlParams = new URL(window.location.href);
+      Object.keys(defaultSettings).forEach(key => {
+        if (urlParams.searchParams.has(key)) {
+          urlParams.searchParams.delete(key);
+        }
+      });
+      Object.keys(payload).forEach(key => {
+        if (key === 'collapse') {
+          return;
+        }
+        let value = payload[key];
+        if (value === true) {
+          value = 1;
+        }
+        if (defaultSettings[key] !== value) {
+          urlParams.searchParams.set(key, value);
+        }
+      });
+      const { primaryColor, colorWeak, contentWidth } = payload;
+      if (state.primaryColor !== primaryColor) {
+        updateTheme(primaryColor);
+      }
+      if (state.contentWidth !== contentWidth && window.dispatchEvent) {
+        window.dispatchEvent(new Event('resize'));
+      }
+      updateColorWeak(colorWeak);
+      window.history.replaceState(null, 'setting', urlParams.href);
+      return {
+        ...state,
+        ...payload,
+      };
+    },
+  },
+};