重置项目

CODE_OF_CONDUCT.md

-# Contributor Covenant Code of Conduct
-
-## Our Pledge
-
-In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation.
-
-## Our Standards
-
-Examples of behavior that contributes to creating a positive environment include:
-
-* Using welcoming and inclusive language
-* Being respectful of differing viewpoints and experiences
-* Gracefully accepting constructive criticism
-* Focusing on what is best for the community
-* Showing empathy towards other community members
-
-Examples of unacceptable behavior by participants include:
-
-* The use of sexualized language or imagery and unwelcome sexual attention or advances
-* Trolling, insulting/derogatory comments, and personal or political attacks
-* Public or private harassment
-* Publishing others' private information, such as a physical or electronic address, without explicit permission
-* Other conduct which could reasonably be considered inappropriate in a professional setting
-
-## Our Responsibilities
-
-Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior.
-
-Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.
-
-## Scope
-
-This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers.
-
-## Enforcement
-
-Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at afc163@gmail.com. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
-
-Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.
-
-## Attribution
-
-This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version]
-
-[homepage]: http://contributor-covenant.org
-[version]: http://contributor-covenant.org/version/1/4/

LICENSE

-MIT License
-
-Copyright (c) 2017 Alipay.inc
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

README.md

-# Ant Admin
-
-[![OSSLab](https://img.shields.io/badge/OSSLab-开源软件实验室-blue.svg?style=flat)](http://osslab.online)
-[![travis](https://img.shields.io/travis/rust-lang/rust.svg)](https://opensource.org/licenses/MIT)
-[![npm](https://img.shields.io/npm/v/npm.svg)]()
-[![license](https://img.shields.io/github/license/mashape/apistatus.svg)](https://opensource.org/licenses/MIT)
-
-## 写在前面
-
-Ant Admin 基于 [Ant Design Pro](https://github.com/ant-design/ant-design-pro/) 项目构建，并持续向下延伸，旨在探索 React 前端开发最佳实践。
-
-Ant Design Pro 是一个企业级中后台前端/设计解决方案，我们秉承 Ant Design 的设计价值观，致力于在设计规范和基础组件的基础上，继续向上构建，提炼出典型模板/业务组件/配套设计资源，进一步提升企业级中后台产品设计研发过程中的『用户』和『设计者』的体验。
-
-![screenshot](https://github.com/Vultur/ant-admin/raw/master/screenshot.png)
-
-## 开始使用
-
-```bash
-$ git clone https://github.com/Vultur/ant-admin.git
-$ cd ant-admin
-$ npm install
-$ npm start       # 访问 http://localhost:8000
-```
-
-如果你想使用官方示例，请安装 [ant-design-pro-cli](https://github.com/ant-design/ant-design-pro-cli) 工具。
-
-```bash
-$ npm install ant-design-pro-cli -g
-$ mkdir pro-demo && cd pro-demo
-$ pro new
-```
-
-- 官方首页：http://pro.ant.design
-- 使用文档：http://pro.ant.design/docs/getting-started-cn
-- 常见问题：http://pro.ant.design/docs/faq
-
-## 特色功能
-
-- :gem: **优雅美观**：基于 [Ant Design](http://ant.design/) 体系精心设计
-- :triangular_ruler: **常见设计模式**：提炼自中后台应用的典型页面和场景
-- :rocket: **最新技术栈**：使用 React/dva/antd 等前端前沿技术开发
-- :iphone: **响应式**：针对不同屏幕大小设计
-- :art: **主题**：可配置的主题满足多样化的品牌诉求
-- :globe_with_meridians: **国际化**：内建业界通用的国际化方案
-- :gear: **最佳实践**：良好的工程实践助您持续产出高质量代码
-- :1234: **Mock 数据**：实用的本地数据调试方案
-- :white_check_mark: **UI 测试**：自动化测试保障前端产品质量
-
-## 目录结构
-
-```
-- 仪表盘
-  - 分析页
-  - 监控页
-  - 工作台
-- 表单页
-  - 基础表单页
-  - 分步表单页
-  - 高级表单页
-- 列表页
-  - 查询表格
-  - 标准列表
-  - 卡片列表
-  - 搜索列表（项目/应用/文章）
-- 详情页
-  - 基础详情页
-  - 高级详情页
-- 结果页
-  - 成功提示
-  - 失败提示
-- 错误页
-  - 403 页面
-  - 404 页面
-  - 500 页面
-- 用户账户
-  - 登录页
-  - 注册页
-  - 注册成功
-```
-
-更多信息请参考 [使用文档](http://pro.ant.design/docs/getting-started)。
-
-## 浏览器兼容
-
-现代浏览器及 IE11。
-
-## 开源协议
-
-[MIT License](https://opensource.org/licenses/MIT)
-

appveyor.yml

-# Test against the latest version of this Node.js version
-environment:
-  nodejs_version: "8"
-
-# Install scripts. (runs after repo cloning)
-install:
-  # Get the latest stable version of Node.js or io.js
-  - ps: Install-Product node $env:nodejs_version
-  # install modules
-  - npm install
-  # Output useful info for debugging.
-  - node --version
-  - npm --version
-
-# Post-install test scripts.
-test_script:
-  - npm run lint
-  - npm run test:all
-  - npm run build
-
-# Don't actually build.
-build: off

mock/api.js

-import { getUrlParams } from './utils';
-
-const titles = [
-  'Alipay',
-  'Angular',
-  'Ant Design',
-  'Ant Design Pro',
-  'Bootstrap',
-  'React',
-  'Vue',
-  'Webpack',
-];
-const avatars = [
-  'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png', // Alipay
-  'https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png', // Angular
-  'https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png', // Ant Design
-  'https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png', // Ant Design Pro
-  'https://gw.alipayobjects.com/zos/rmsportal/siCrBXXhmvTQGWPNLBow.png', // Bootstrap
-  'https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png', // React
-  'https://gw.alipayobjects.com/zos/rmsportal/ComBAopevLwENQdKWiIn.png', // Vue
-  'https://gw.alipayobjects.com/zos/rmsportal/nxkuOJlFJuAUhzlMTCEe.png', // Webpack
-];
-
-const avatars2 = [
-  'https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png',
-  'https://gw.alipayobjects.com/zos/rmsportal/cnrhVkzwxjPwAaCfPbdc.png',
-  'https://gw.alipayobjects.com/zos/rmsportal/gaOngJwsRYRaVAuXXcmB.png',
-  'https://gw.alipayobjects.com/zos/rmsportal/ubnKSIfAJTxIgXOKlciN.png',
-  'https://gw.alipayobjects.com/zos/rmsportal/WhxKECPNujWoWEFNdnJE.png',
-  'https://gw.alipayobjects.com/zos/rmsportal/jZUIxmJycoymBprLOUbT.png',
-  'https://gw.alipayobjects.com/zos/rmsportal/psOgztMplJMGpVEqfcgF.png',
-  'https://gw.alipayobjects.com/zos/rmsportal/ZpBqSxLxVEXfcUNoPKrz.png',
-  'https://gw.alipayobjects.com/zos/rmsportal/laiEnJdGHVOhJrUShBaJ.png',
-  'https://gw.alipayobjects.com/zos/rmsportal/UrQsqscbKEpNuJcvBZBu.png',
-];
-
-const covers = [
-  'https://gw.alipayobjects.com/zos/rmsportal/uMfMFlvUuceEyPpotzlq.png',
-  'https://gw.alipayobjects.com/zos/rmsportal/iZBVOIhGJiAnhplqjvZW.png',
-  'https://gw.alipayobjects.com/zos/rmsportal/uVZonEtjWwmUZPBQfycs.png',
-  'https://gw.alipayobjects.com/zos/rmsportal/gLaIAoVWTtLbBWZNYEMg.png',
-];
-const desc = [
-  '那是一种内在的东西， 他们到达不了，也无法触及的',
-  '希望是一个好东西，也许是最好的，好东西是不会消亡的',
-  '生命就像一盒巧克力，结果往往出人意料',
-  '城镇中有那么多的酒馆，她却偏偏走进了我的酒馆',
-  '那时候我只会想自己想要什么，从不想自己拥有什么',
-];
-
-const user = [
-  '付小小',
-  '曲丽丽',
-  '林东东',
-  '周星星',
-  '吴加好',
-  '朱偏右',
-  '鱼酱',
-  '乐哥',
-  '谭小仪',
-  '仲尼',
-];
-
-export function fakeList(count) {
-  const list = [];
-  for (let i = 0; i < count; i += 1) {
-    list.push({
-      id: `fake-list-${i}`,
-      owner: user[i % 10],
-      title: titles[i % 8],
-      avatar: avatars[i % 8],
-      cover: parseInt(i / 4, 10) % 2 === 0 ? covers[i % 4] : covers[3 - (i % 4)],
-      status: ['active', 'exception', 'normal'][i % 3],
-      percent: Math.ceil(Math.random() * 50) + 50,
-      logo: avatars[i % 8],
-      href: 'https://ant.design',
-      updatedAt: new Date(new Date().getTime() - (1000 * 60 * 60 * 2 * i)),
-      createdAt: new Date(new Date().getTime() - (1000 * 60 * 60 * 2 * i)),
-      subDescription: desc[i % 5],
-      description: '在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，这些类似的组件会被抽离成一套标准规范。',
-      activeUser: Math.ceil(Math.random() * 100000) + 100000,
-      newUser: Math.ceil(Math.random() * 1000) + 1000,
-      star: Math.ceil(Math.random() * 100) + 100,
-      like: Math.ceil(Math.random() * 100) + 100,
-      message: Math.ceil(Math.random() * 10) + 10,
-      content: '段落示意：蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。',
-      members: [
-        {
-          avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ZiESqWwCXBRQoaPONSJe.png',
-          name: '曲丽丽',
-        },
-        {
-          avatar: 'https://gw.alipayobjects.com/zos/rmsportal/tBOxZPlITHqwlGjsJWaF.png',
-          name: '王昭君',
-        },
-        {
-          avatar: 'https://gw.alipayobjects.com/zos/rmsportal/sBxjgqiuHMGRkIjqlQCd.png',
-          name: '董娜娜',
-        },
-      ],
-    });
-  }
-
-  return list;
-}
-
-export function getFakeList(req, res, u) {
-  let url = u;
-  if (!url || Object.prototype.toString.call(url) !== '[object String]') {
-    url = req.url; // eslint-disable-line
-  }
-
-  const params = getUrlParams(url);
-
-  const count = (params.count * 1) || 20;
-
-  const result = fakeList(count);
-
-  if (res && res.json) {
-    res.json(result);
-  } else {
-    return result;
-  }
-}
-
-export const getNotice = [
-  {
-    id: 'xxx1',
-    title: titles[0],
-    logo: avatars[0],
-    description: '那是一种内在的东西，他们到达不了，也无法触及的',
-    updatedAt: new Date(),
-    member: '科学搬砖组',
-    href: '',
-    memberLink: '',
-  },
-  {
-    id: 'xxx2',
-    title: titles[1],
-    logo: avatars[1],
-    description: '希望是一个好东西，也许是最好的，好东西是不会消亡的',
-    updatedAt: new Date('2017-07-24'),
-    member: '全组都是吴彦祖',
-    href: '',
-    memberLink: '',
-  },
-  {
-    id: 'xxx3',
-    title: titles[2],
-    logo: avatars[2],
-    description: '城镇中有那么多的酒馆，她却偏偏走进了我的酒馆',
-    updatedAt: new Date(),
-    member: '中二少女团',
-    href: '',
-    memberLink: '',
-  },
-  {
-    id: 'xxx4',
-    title: titles[3],
-    logo: avatars[3],
-    description: '那时候我只会想自己想要什么，从不想自己拥有什么',
-    updatedAt: new Date('2017-07-23'),
-    member: '程序员日常',
-    href: '',
-    memberLink: '',
-  },
-  {
-    id: 'xxx5',
-    title: titles[4],
-    logo: avatars[4],
-    description: '凛冬将至',
-    updatedAt: new Date('2017-07-23'),
-    member: '高逼格设计天团',
-    href: '',
-    memberLink: '',
-  },
-  {
-    id: 'xxx6',
-    title: titles[5],
-    logo: avatars[5],
-    description: '生命就像一盒巧克力，结果往往出人意料',
-    updatedAt: new Date('2017-07-23'),
-    member: '骗你来学计算机',
-    href: '',
-    memberLink: '',
-  },
-];
-
-export const getActivities = [
-  {
-    id: 'trend-1',
-    updatedAt: new Date(),
-    user: {
-      name: '曲丽丽',
-      avatar: avatars2[0],
-    },
-    group: {
-      name: '高逼格设计天团',
-      link: 'http://github.com/',
-    },
-    project: {
-      name: '六月迭代',
-      link: 'http://github.com/',
-    },
-    template: '在 @{group} 新建项目 @{project}',
-  },
-  {
-    id: 'trend-2',
-    updatedAt: new Date(),
-    user: {
-      name: '付小小',
-      avatar: avatars2[1],
-    },
-    group: {
-      name: '高逼格设计天团',
-      link: 'http://github.com/',
-    },
-    project: {
-      name: '六月迭代',
-      link: 'http://github.com/',
-    },
-    template: '在 @{group} 新建项目 @{project}',
-  },
-  {
-    id: 'trend-3',
-    updatedAt: new Date(),
-    user: {
-      name: '林东东',
-      avatar: avatars2[2],
-    },
-    group: {
-      name: '中二少女团',
-      link: 'http://github.com/',
-    },
-    project: {
-      name: '六月迭代',
-      link: 'http://github.com/',
-    },
-    template: '在 @{group} 新建项目 @{project}',
-  },
-  {
-    id: 'trend-4',
-    updatedAt: new Date(),
-    user: {
-      name: '周星星',
-      avatar: avatars2[4],
-    },
-    project: {
-      name: '5 月日常迭代',
-      link: 'http://github.com/',
-    },
-    template: '将 @{project} 更新至已发布状态',
-  },
-  {
-    id: 'trend-5',
-    updatedAt: new Date(),
-    user: {
-      name: '朱偏右',
-      avatar: avatars2[3],
-    },
-    project: {
-      name: '工程效能',
-      link: 'http://github.com/',
-    },
-    comment: {
-      name: '留言',
-      link: 'http://github.com/',
-    },
-    template: '在 @{project} 发布了 @{comment}',
-  },
-  {
-    id: 'trend-6',
-    updatedAt: new Date(),
-    user: {
-      name: '乐哥',
-      avatar: avatars2[5],
-    },
-    group: {
-      name: '程序员日常',
-      link: 'http://github.com/',
-    },
-    project: {
-      name: '品牌迭代',
-      link: 'http://github.com/',
-    },
-    template: '在 @{group} 新建项目 @{project}',
-  },
-];
-
-
-export default {
-  getNotice,
-  getActivities,
-  getFakeList,
-};

mock/chart.js

-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: `门店${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],
-      });
-    }
-  });
-});
-
-export const getFakeChartData = {
-  visitData,
-  visitData2,
-  salesData,
-  searchData,
-  offlineData,
-  offlineChartData,
-  salesTypeData,
-  salesTypeDataOnline,
-  salesTypeDataOffline,
-  radarData,
-};
-
-export default {
-  getFakeChartData,
-};

mock/notices.js

-export default {
-  getNotices(req, res) {
-    res.json([{
-      id: '000000001',
-      avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png',
-      title: '你收到了 14 份新周报',
-      datetime: '2017-08-09',
-      type: '通知',
-    }, {
-      id: '000000002',
-      avatar: 'https://gw.alipayobjects.com/zos/rmsportal/OKJXDXrmkNshAMvwtvhu.png',
-      title: '你推荐的 曲妮妮 已通过第三轮面试',
-      datetime: '2017-08-08',
-      type: '通知',
-    }, {
-      id: '000000003',
-      avatar: 'https://gw.alipayobjects.com/zos/rmsportal/kISTdvpyTAhtGxpovNWd.png',
-      title: '这种模板可以区分多种通知类型',
-      datetime: '2017-08-07',
-      read: true,
-      type: '通知',
-    }, {
-      id: '000000004',
-      avatar: 'https://gw.alipayobjects.com/zos/rmsportal/GvqBnKhFgObvnSGkDsje.png',
-      title: '左侧图标用于区分不同的类型',
-      datetime: '2017-08-07',
-      type: '通知',
-    }, {
-      id: '000000005',
-      avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png',
-      title: '内容不要超过两行字，超出时自动截断',
-      datetime: '2017-08-07',
-      type: '通知',
-    }, {
-      id: '000000006',
-      avatar: 'https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg',
-      title: '曲丽丽 评论了你',
-      description: '描述信息描述信息描述信息',
-      datetime: '2017-08-07',
-      type: '消息',
-    }, {
-      id: '000000007',
-      avatar: 'https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg',
-      title: '朱偏右 回复了你',
-      description: '这种模板用于提醒谁与你发生了互动，左侧放『谁』的头像',
-      datetime: '2017-08-07',
-      type: '消息',
-    }, {
-      id: '000000008',
-      avatar: 'https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg',
-      title: '标题',
-      description: '这种模板用于提醒谁与你发生了互动，左侧放『谁』的头像',
-      datetime: '2017-08-07',
-      type: '消息',
-    }, {
-      id: '000000009',
-      title: '任务名称',
-      description: '任务需要在 2017-01-12 20:00 前启动',
-      extra: '未开始',
-      status: 'todo',
-      type: '待办',
-    }, {
-      id: '000000010',
-      title: '第三方紧急代码变更',
-      description: '冠霖提交于 2017-01-06，需在 2017-01-07 前完成代码变更任务',
-      extra: '马上到期',
-      status: 'urgent',
-      type: '待办',
-    }, {
-      id: '000000011',
-      title: '信息安全考试',
-      description: '指派竹尔于 2017-01-09 前完成更新并发布',
-      extra: '已耗时 8 天',
-      status: 'doing',
-      type: '待办',
-    }, {
-      id: '000000012',
-      title: 'ABCD 版本发布',
-      description: '冠霖提交于 2017-01-06，需在 2017-01-07 前完成代码变更任务',
-      extra: '进行中',
-      status: 'processing',
-      type: '待办',
-    }]);
-  },
-};

mock/profile.js

-const basicGoods = [
-  {
-    id: '1234561',
-    name: '矿泉水 550ml',
-    barcode: '12421432143214321',
-    price: '2.00',
-    num: '1',
-    amount: '2.00',
-  },
-  {
-    id: '1234562',
-    name: '凉茶 300ml',
-    barcode: '12421432143214322',
-    price: '3.00',
-    num: '2',
-    amount: '6.00',
-  },
-  {
-    id: '1234563',
-    name: '好吃的薯片',
-    barcode: '12421432143214323',
-    price: '7.00',
-    num: '4',
-    amount: '28.00',
-  },
-  {
-    id: '1234564',
-    name: '特别好吃的蛋卷',
-    barcode: '12421432143214324',
-    price: '8.50',
-    num: '3',
-    amount: '25.50',
-  },
-];
-
-const basicProgress = [
-  {
-    key: '1',
-    time: '2017-10-01 14:10',
-    rate: '联系客户',
-    status: 'processing',
-    operator: '取货员 ID1234',
-    cost: '5mins',
-  },
-  {
-    key: '2',
-    time: '2017-10-01 14:05',
-    rate: '取货员出发',
-    status: 'success',
-    operator: '取货员 ID1234',
-    cost: '1h',
-  },
-  {
-    key: '3',
-    time: '2017-10-01 13:05',
-    rate: '取货员接单',
-    status: 'success',
-    operator: '取货员 ID1234',
-    cost: '5mins',
-  },
-  {
-    key: '4',
-    time: '2017-10-01 13:00',
-    rate: '申请审批通过',
-    status: 'success',
-    operator: '系统',
-    cost: '1h',
-  },
-  {
-    key: '5',
-    time: '2017-10-01 12:00',
-    rate: '发起退货申请',
-    status: 'success',
-    operator: '用户',
-    cost: '5mins',
-  },
-];
-
-const advancedOperation1 = [
-  {
-    key: 'op1',
-    type: '订购关系生效',
-    name: '曲丽丽',
-    status: 'agree',
-    updatedAt: '2017-10-03  19:23:12',
-    memo: '-',
-  },
-  {
-    key: 'op2',
-    type: '财务复审',
-    name: '付小小',
-    status: 'reject',
-    updatedAt: '2017-10-03  19:23:12',
-    memo: '不通过原因',
-  },
-  {
-    key: 'op3',
-    type: '部门初审',
-    name: '周毛毛',
-    status: 'agree',
-    updatedAt: '2017-10-03  19:23:12',
-    memo: '-',
-  },
-  {
-    key: 'op4',
-    type: '提交订单',
-    name: '林东东',
-    status: 'agree',
-    updatedAt: '2017-10-03  19:23:12',
-    memo: '很棒',
-  },
-  {
-    key: 'op5',
-    type: '创建订单',
-    name: '汗牙牙',
-    status: 'agree',
-    updatedAt: '2017-10-03  19:23:12',
-    memo: '-',
-  },
-];
-
-const advancedOperation2 = [
-  {
-    key: 'op1',
-    type: '订购关系生效',
-    name: '曲丽丽',
-    status: 'agree',
-    updatedAt: '2017-10-03  19:23:12',
-    memo: '-',
-  },
-];
-
-const advancedOperation3 = [
-  {
-    key: 'op1',
-    type: '创建订单',
-    name: '汗牙牙',
-    status: 'agree',
-    updatedAt: '2017-10-03  19:23:12',
-    memo: '-',
-  },
-];
-
-export const getProfileBasicData = {
-  basicGoods,
-  basicProgress,
-};
-
-export const getProfileAdvancedData = {
-  advancedOperation1,
-  advancedOperation2,
-  advancedOperation3,
-};
-
-export default {
-  getProfileBasicData,
-  getProfileAdvancedData,
-};

mock/rule.js

-import { getUrlParams } from './utils';
-
-// mock tableListDataSource
-let tableListDataSource = [];
-for (let i = 0; i < 46; i += 1) {
-  tableListDataSource.push({
-    key: i,
-    disabled: ((i % 6) === 0),
-    href: 'https://ant.design',
-    avatar: ['https://gw.alipayobjects.com/zos/rmsportal/eeHMaZBwmTvLdIwMfBpg.png', 'https://gw.alipayobjects.com/zos/rmsportal/udxAbMEhpwthVVcjLXik.png'][i % 2],
-    no: `TradeCode ${i}`,
-    title: `一个任务名称 ${i}`,
-    owner: '曲丽丽',
-    description: '这是一段描述',
-    callNo: Math.floor(Math.random() * 1000),
-    status: Math.floor(Math.random() * 10) % 4,
-    updatedAt: new Date(`2017-07-${Math.floor(i / 2) + 1}`),
-    createdAt: new Date(`2017-07-${Math.floor(i / 2) + 1}`),
-    progress: Math.ceil(Math.random() * 100),
-  });
-}
-
-export function getRule(req, res, u) {
-  let url = u;
-  if (!url || Object.prototype.toString.call(url) !== '[object String]') {
-    url = req.url; // eslint-disable-line
-  }
-
-  const params = getUrlParams(url);
-
-  let dataSource = [...tableListDataSource];
-
-  if (params.sorter) {
-    const s = params.sorter.split('_');
-    dataSource = dataSource.sort((prev, next) => {
-      if (s[1] === 'descend') {
-        return next[s[0]] - prev[s[0]];
-      }
-      return prev[s[0]] - next[s[0]];
-    });
-  }
-
-  if (params.status) {
-    const status = params.status.split(',');
-    let filterDataSource = [];
-    status.forEach((s) => {
-      filterDataSource = filterDataSource.concat(
-        [...dataSource].filter(data => parseInt(data.status, 10) === parseInt(s[0], 10))
-      );
-    });
-    dataSource = filterDataSource;
-  }
-
-  if (params.no) {
-    dataSource = dataSource.filter(data => data.no.indexOf(params.no) > -1);
-  }
-
-  let pageSize = 10;
-  if (params.pageSize) {
-    pageSize = params.pageSize * 1;
-  }
-
-  const result = {
-    list: dataSource,
-    pagination: {
-      total: dataSource.length,
-      pageSize,
-      current: parseInt(params.currentPage, 10) || 1,
-    },
-  };
-
-  if (res && res.json) {
-    res.json(result);
-  } else {
-    return result;
-  }
-}
-
-export function postRule(req, res, u, b) {
-  let url = u;
-  if (!url || Object.prototype.toString.call(url) !== '[object String]') {
-    url = req.url; // eslint-disable-line
-  }
-
-  const body = (b && b.body) || req.body;
-  const { method, no, description } = body;
-
-  switch (method) {
-    /* eslint no-case-declarations:0 */
-    case 'delete':
-      tableListDataSource = tableListDataSource.filter(item => no.indexOf(item.no) === -1);
-      break;
-    case 'post':
-      const i = Math.ceil(Math.random() * 10000);
-      tableListDataSource.unshift({
-        key: i,
-        href: 'https://ant.design',
-        avatar: ['https://gw.alipayobjects.com/zos/rmsportal/eeHMaZBwmTvLdIwMfBpg.png', 'https://gw.alipayobjects.com/zos/rmsportal/udxAbMEhpwthVVcjLXik.png'][i % 2],
-        no: `TradeCode ${i}`,
-        title: `一个任务名称 ${i}`,
-        owner: '曲丽丽',
-        description,
-        callNo: Math.floor(Math.random() * 1000),
-        status: Math.floor(Math.random() * 10) % 2,
-        updatedAt: new Date(),
-        createdAt: new Date(),
-        progress: Math.ceil(Math.random() * 100),
-      });
-      break;
-    default:
-      break;
-  }
-
-  const result = {
-    list: tableListDataSource,
-    pagination: {
-      total: tableListDataSource.length,
-    },
-  };
-
-  if (res && res.json) {
-    res.json(result);
-  } else {
-    return result;
-  }
-}
-
-export default {
-  getRule,
-  postRule,
-};

mock/utils.js

-export const imgMap = {
-  user: 'https://gw.alipayobjects.com/zos/rmsportal/IOtlElCiWVIOZqgDslYd.png',
-  a: 'https://gw.alipayobjects.com/zos/rmsportal/ZrkcSjizAKNWwJTwcadT.png',
-  b: 'https://gw.alipayobjects.com/zos/rmsportal/KYlwHMeomKQbhJDRUVvt.png',
-  c: 'https://gw.alipayobjects.com/zos/rmsportal/gabvleTstEvzkbQRfjxu.png',
-  d: 'https://gw.alipayobjects.com/zos/rmsportal/jvpNzacxUYLlNsHTtrAD.png',
-};
-
-// refers: https://www.sitepoint.com/get-url-parameters-with-javascript/
-export function getUrlParams(url) {
-  const d = decodeURIComponent;
-  let queryString = url ? url.split('?')[1] : window.location.search.slice(1);
-  const obj = {};
-  if (queryString) {
-    queryString = queryString.split('#')[0]; // eslint-disable-line
-    const arr = queryString.split('&');
-    for (let i = 0; i < arr.length; i += 1) {
-      const a = arr[i].split('=');
-      let paramNum;
-      const paramName = a[0].replace(/\[\d*\]/, (v) => {
-        paramNum = v.slice(1, -1);
-        return '';
-      });
-      const paramValue = typeof (a[1]) === 'undefined' ? true : a[1];
-      if (obj[paramName]) {
-        if (typeof obj[paramName] === 'string') {
-          obj[paramName] = d([obj[paramName]]);
-        }
-        if (typeof paramNum === 'undefined') {
-          obj[paramName].push(d(paramValue));
-        } else {
-          obj[paramName][paramNum] = d(paramValue);
-        }
-      } else {
-        obj[paramName] = d(paramValue);
-      }
-    }
-  }
-  return obj;
-}
-
-export default {
-  getUrlParams,
-  imgMap,
-};

package.json

-{
-  "name": "ant-admin",
-  "version": "0.3.0",
-  "description": "基于 Ant Design of React 和 Ant Design Pro 的企业级 Web 后台管理模板。",
-  "private": true,
-  "scripts": {
-    "start": "roadhog server",
-    "start:no-proxy": "cross-env NO_PROXY=true roadhog server",
-    "build": "roadhog build",
-    "site": "roadhog-api-doc static && gh-pages -d dist",
-    "analyze": "roadhog build --analyze",
-    "lint:style": "stylelint \"src/**/*.less\" --syntax less",
-    "lint": "eslint --ext .js src mock tests && npm run lint:style",
-    "lint:fix": "eslint --fix --ext .js src mock tests && npm run lint:style",
-    "lint-staged": "lint-staged",
-    "lint-staged:js": "eslint --ext .js",
-    "test": "jest",
-    "test:all": "node ./tests/run-tests.js"
-  },
-  "dependencies": {
-    "antd": "^3.0.0",
-    "babel-polyfill": "^6.26.0",
-    "babel-runtime": "^6.9.2",
-    "classnames": "^2.2.5",
-    "core-js": "^2.5.1",
-    "dva": "^2.1.0",
-    "g-cloud": "^1.0.2-beta",
-    "g2": "^2.3.13",
-    "g2-plugin-slider": "^1.2.1",
-    "lodash": "^4.17.4",
-    "lodash-decorators": "^4.4.1",
-    "lodash.clonedeep": "^4.5.0",
-    "moment": "^2.19.1",
-    "numeral": "^2.0.6",
-    "prop-types": "^15.5.10",
-    "qs": "^6.5.0",
-    "react": "^16.0.0",
-    "react-container-query": "^0.9.1",
-    "react-document-title": "^2.0.3",
-    "react-dom": "^16.0.0",
-    "react-fittext": "^1.0.0"
-  },
-  "devDependencies": {
-    "babel-eslint": "^8.0.1",
-    "babel-jest": "^21.0.0",
-    "babel-plugin-dva-hmr": "^0.3.2",
-    "babel-plugin-import": "^1.2.1",
-    "babel-plugin-transform-class-properties": "^6.24.1",
-    "babel-plugin-transform-decorators-legacy": "^1.3.4",
-    "babel-plugin-transform-runtime": "^6.9.0",
-    "babel-preset-env": "^1.6.1",
-    "babel-preset-react": "^6.24.1",
-    "cross-env": "^5.1.1",
-    "cross-port-killer": "^1.0.1",
-    "enzyme": "^3.1.0",
-    "enzyme-adapter-react-16": "^1.0.2",
-    "eslint": "^4.8.0",
-    "eslint-config-airbnb": "^16.0.0",
-    "eslint-plugin-babel": "^4.0.0",
-    "eslint-plugin-compat": "^2.1.0",
-    "eslint-plugin-import": "^2.2.0",
-    "eslint-plugin-jsx-a11y": "^6.0.0",
-    "eslint-plugin-markdown": "^1.0.0-beta.6",
-    "eslint-plugin-react": "^7.0.1",
-    "gh-pages": "^1.0.0",
-    "husky": "^0.14.3",
-    "jest": "^21.0.1",
-    "lint-staged": "^4.3.0",
-    "mockjs": "^1.0.1-beta3",
-    "prettier": "^1.9.0",
-    "pro-download": "^1.0.0",
-    "raven-js": "^3.20.1",
-    "react-test-renderer": "^16.0.0",
-    "redbox-react": "^1.3.2",
-    "roadhog": "^1.3.1",
-    "roadhog-api-doc": "^0.3.3",
-    "rollbar": "^2.3.1",
-    "stylelint": "^8.1.0",
-    "stylelint-config-standard": "^17.0.0"
-  },
-  "optionalDependencies": {
-    "nightmare": "^2.10.0"
-  },
-  "babel": {
-    "presets": [
-      "env",
-      "react"
-    ],
-    "plugins": [
-      "transform-decorators-legacy",
-      "transform-class-properties"
-    ]
-  },
-  "jest": {
-    "setupFiles": [
-      "<rootDir>/tests/setupTests.js"
-    ],
-    "testMatch": [
-      "**/?(*.)(spec|test|e2e).js?(x)"
-    ],
-    "setupTestFrameworkScriptFile": "<rootDir>/tests/jasmine.js",
-    "moduleFileExtensions": [
-      "js",
-      "jsx"
-    ],
-    "moduleNameMapper": {
-      "\\.(css|less)$": "<rootDir>/tests/styleMock.js"
-    }
-  },
-  "lint-staged": {
-    "**/*.{js,jsx}": "lint-staged:js",
-    "**/*.less": "stylelint --syntax less"
-  },
-  "browserslist": [
-    "> 1%",
-    "last 2 versions",
-    "not ie <= 10"
-  ]
-}

src/assets/logo.svg

-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="200px" height="200px" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
-    <title>Group 28 Copy 5</title>
-    <desc>Created with Sketch.</desc>
-    <defs>
-        <linearGradient x1="62.1023273%" y1="0%" x2="108.19718%" y2="37.8635764%" id="linearGradient-1">
-            <stop stop-color="#4285EB" offset="0%"></stop>
-            <stop stop-color="#2EC7FF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="69.644116%" y1="0%" x2="54.0428975%" y2="108.456714%" id="linearGradient-2">
-            <stop stop-color="#29CDFF" offset="0%"></stop>
-            <stop stop-color="#148EFF" offset="37.8600687%"></stop>
-            <stop stop-color="#0A60FF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="69.6908165%" y1="-12.9743587%" x2="16.7228981%" y2="117.391248%" id="linearGradient-3">
-            <stop stop-color="#FA816E" offset="0%"></stop>
-            <stop stop-color="#F74A5C" offset="41.472606%"></stop>
-            <stop stop-color="#F51D2C" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="68.1279872%" y1="-35.6905737%" x2="30.4400914%" y2="114.942679%" id="linearGradient-4">
-            <stop stop-color="#FA8E7D" offset="0%"></stop>
-            <stop stop-color="#F74A5C" offset="51.2635191%"></stop>
-            <stop stop-color="#F51D2C" offset="100%"></stop>
-        </linearGradient>
-    </defs>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="logo" transform="translate(-20.000000, -20.000000)">
-            <g id="Group-28-Copy-5" transform="translate(20.000000, 20.000000)">
-                <g id="Group-27-Copy-3">
-                    <g id="Group-25" fill-rule="nonzero">
-                        <g id="2">
-                            <path d="M91.5880863,4.17652823 L4.17996544,91.5127728 C-0.519240605,96.2081146 -0.519240605,103.791885 4.17996544,108.487227 L91.5880863,195.823472 C96.2872923,200.518814 103.877304,200.518814 108.57651,195.823472 L145.225487,159.204632 C149.433969,154.999611 149.433969,148.181924 145.225487,143.976903 C141.017005,139.771881 134.193707,139.771881 129.985225,143.976903 L102.20193,171.737352 C101.032305,172.906015 99.2571609,172.906015 98.0875359,171.737352 L28.285908,101.993122 C27.1162831,100.824459 27.1162831,99.050775 28.285908,97.8821118 L98.0875359,28.1378823 C99.2571609,26.9692191 101.032305,26.9692191 102.20193,28.1378823 L129.985225,55.8983314 C134.193707,60.1033528 141.017005,60.1033528 145.225487,55.8983314 C149.433969,51.69331 149.433969,44.8756232 145.225487,40.6706018 L108.58055,4.05574592 C103.862049,-0.537986846 96.2692618,-0.500797906 91.5880863,4.17652823 Z" id="Shape" fill="url(#linearGradient-1)"></path>
-                            <path d="M91.5880863,4.17652823 L4.17996544,91.5127728 C-0.519240605,96.2081146 -0.519240605,103.791885 4.17996544,108.487227 L91.5880863,195.823472 C96.2872923,200.518814 103.877304,200.518814 108.57651,195.823472 L145.225487,159.204632 C149.433969,154.999611 149.433969,148.181924 145.225487,143.976903 C141.017005,139.771881 134.193707,139.771881 129.985225,143.976903 L102.20193,171.737352 C101.032305,172.906015 99.2571609,172.906015 98.0875359,171.737352 L28.285908,101.993122 C27.1162831,100.824459 27.1162831,99.050775 28.285908,97.8821118 L98.0875359,28.1378823 C100.999864,25.6271836 105.751642,20.541824 112.729652,19.3524487 C117.915585,18.4685261 123.585219,20.4140239 129.738554,25.1889424 C125.624663,21.0784292 118.571995,14.0340304 108.58055,4.05574592 C103.862049,-0.537986846 96.2692618,-0.500797906 91.5880863,4.17652823 Z" id="Shape" fill="url(#linearGradient-2)"></path>
-                        </g>
-                        <path d="M153.685633,135.854579 C157.894115,140.0596 164.717412,140.0596 168.925894,135.854579 L195.959977,108.842726 C200.659183,104.147384 200.659183,96.5636133 195.960527,91.8688194 L168.690777,64.7181159 C164.472332,60.5180858 157.646868,60.5241425 153.435895,64.7316526 C149.227413,68.936674 149.227413,75.7543607 153.435895,79.9593821 L171.854035,98.3623765 C173.02366,99.5310396 173.02366,101.304724 171.854035,102.473387 L153.685633,120.626849 C149.47715,124.83187 149.47715,131.649557 153.685633,135.854579 Z" id="Shape" fill="url(#linearGradient-3)"></path>
-                    </g>
-                    <ellipse id="Combined-Shape" fill="url(#linearGradient-4)" cx="100.519339" cy="100.436681" rx="23.6001926" ry="23.580786"></ellipse>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>
\ No newline at end of file

src/common/nav.js

-import dynamic from 'dva/dynamic';
-
-// wrapper of dynamic
-const dynamicWrapper = (app, models, component) => dynamic({
-  app,
-  models: () => models.map(m => import(`../models/${m}.js`)),
-  component,
-});
-
-// nav data
-export const getNavData = app => [
-  {
-    component: dynamicWrapper(app, ['user', 'login'], () => import('../layouts/BasicLayout')),
-    layout: 'BasicLayout',
-    name: '仪表盘', // for breadcrumb
-    path: '/',
-    children: [
-      {
-        name: '仪表盘',
-        icon: 'dashboard',
-        path: 'dashboard',
-        children: [
-          {
-            name: '分析页',
-            path: 'analysis',
-            component: dynamicWrapper(app, ['chart'], () => import('../routes/Dashboard/Analysis')),
-          },
-          {
-            name: '监控页',
-            path: 'monitor',
-            component: dynamicWrapper(app, ['monitor'], () => import('../routes/Dashboard/Monitor')),
-          },
-          {
-            name: '工作台',
-            path: 'workplace',
-            component: dynamicWrapper(app, ['project', 'activities', 'chart'], () => import('../routes/Dashboard/Workplace')),
-          },
-        ],
-      },
-      {
-        name: '表单页',
-        path: 'form',
-        icon: 'form',
-        children: [
-          {
-            name: '基础表单',
-            path: 'basic-form',
-            component: dynamicWrapper(app, ['form'], () => import('../routes/Forms/BasicForm')),
-          },
-          {
-            name: '分步表单',
-            path: 'step-form',
-            component: dynamicWrapper(app, ['form'], () => import('../routes/Forms/StepForm')),
-            children: [
-              {
-                path: 'confirm',
-                component: dynamicWrapper(app, ['form'], () => import('../routes/Forms/StepForm/Step2')),
-              },
-              {
-                path: 'result',
-                component: dynamicWrapper(app, ['form'], () => import('../routes/Forms/StepForm/Step3')),
-              },
-            ],
-          },
-          {
-            name: '高级表单',
-            path: 'advanced-form',
-            component: dynamicWrapper(app, ['form'], () => import('../routes/Forms/AdvancedForm')),
-          },
-        ],
-      },
-      {
-        name: '列表页',
-        path: 'list',
-        icon: 'table',
-        children: [
-          {
-            name: '查询表格',
-            path: 'table-list',
-            component: dynamicWrapper(app, ['rule'], () => import('../routes/List/TableList')),
-          },
-          {
-            name: '标准列表',
-            path: 'basic-list',
-            component: dynamicWrapper(app, ['list'], () => import('../routes/List/BasicList')),
-          },
-          {
-            name: '卡片列表',
-            path: 'card-list',
-            component: dynamicWrapper(app, ['list'], () => import('../routes/List/CardList')),
-          },
-          {
-            name: '搜索列表（项目）',
-            path: 'cover-card-list',
-            component: dynamicWrapper(app, ['list'], () => import('../routes/List/CoverCardList')),
-          },
-          {
-            name: '搜索列表（应用）',
-            path: 'filter-card-list',
-            component: dynamicWrapper(app, ['list'], () => import('../routes/List/FilterCardList')),
-          },
-          {
-            name: '搜索列表（文章）',
-            path: 'search',
-            component: dynamicWrapper(app, ['list'], () => import('../routes/List/SearchList')),
-          },
-        ],
-      },
-      {
-        name: '详情页',
-        path: 'profile',
-        icon: 'profile',
-        children: [
-          {
-            name: '基础详情页',
-            path: 'basic',
-            component: dynamicWrapper(app, ['profile'], () => import('../routes/Profile/BasicProfile')),
-          },
-          {
-            name: '高级详情页',
-            path: 'advanced',
-            component: dynamicWrapper(app, ['profile'], () => import('../routes/Profile/AdvancedProfile')),
-          },
-        ],
-      },
-      {
-        name: '结果页',
-        path: 'result',
-        icon: 'check-circle-o',
-        children: [
-          {
-            name: '成功反馈',
-            path: 'success',
-            component: dynamicWrapper(app, [], () => import('../routes/Result/Success')),
-          },
-          {
-            name: '失败反馈',
-            path: 'fail',
-            component: dynamicWrapper(app, [], () => import('../routes/Result/Error')),
-          },
-        ],
-      },
-      {
-        name: '错误页',
-        path: 'exception',
-        icon: 'warning',
-        children: [
-          {
-            name: '403 错误',
-            path: '403',
-            component: dynamicWrapper(app, [], () => import('../routes/Exception/403')),
-          },
-          {
-            name: '404 错误',
-            path: '404',
-            component: dynamicWrapper(app, [], () => import('../routes/Exception/404')),
-          },
-          {
-            name: '500 错误',
-            path: '500',
-            component: dynamicWrapper(app, [], () => import('../routes/Exception/500')),
-          },
-        ],
-      },
-    ],
-  },
-  {
-    component: dynamicWrapper(app, [], () => import('../layouts/UserLayout')),
-    path: '/user',
-    layout: 'UserLayout',
-    children: [
-      {
-        name: '用户账户',
-        icon: 'user',
-        path: 'user',
-        children: [
-          {
-            name: '登录页',
-            path: 'login',
-            component: dynamicWrapper(app, ['login'], () => import('../routes/User/Login')),
-          },
-          {
-            name: '注册页',
-            path: 'register',
-            component: dynamicWrapper(app, ['register'], () => import('../routes/User/Register')),
-          },
-          {
-            name: '注册结果',
-            path: 'register-result',
-            component: dynamicWrapper(app, [], () => import('../routes/User/RegisterResult')),
-          },
-        ],
-      },
-    ],
-  },
-  {
-    component: dynamicWrapper(app, [], () => import('../layouts/BlankLayout')),
-    layout: 'BlankLayout',
-    children: {
-      name: '使用文档',
-      path: 'http://pro.ant.design/docs/getting-started-cn',
-      target: '_blank',
-      icon: 'book',
-    },
-  },
-];

src/components/ActiveChart/index.js

-import React, { PureComponent } from 'react';
-
-import { MiniArea } from '../Charts';
-import NumberInfo from '../NumberInfo';
-
-import styles from './index.less';
-
-function fixedZero(val) {
-  return val * 1 < 10 ? `0${val}` : val;
-}
-
-function getActiveData() {
-  const activeData = [];
-  for (let i = 0; i < 24; i += 1) {
-    activeData.push({
-      x: `${fixedZero(i)}:00`,
-      y: (i * 50) + (Math.floor(Math.random() * 200)),
-    });
-  }
-  return activeData;
-}
-
-export default class ActiveChart extends PureComponent {
-  state = {
-    activeData: getActiveData(),
-  }
-
-  componentDidMount() {
-    this.timer = setInterval(() => {
-      this.setState({
-        activeData: getActiveData(),
-      });
-    }, 1000);
-  }
-
-  componentWillUnmount() {
-    clearInterval(this.timer);
-  }
-
-  render() {
-    const { activeData = [] } = this.state;
-
-    return (
-      <div className={styles.activeChart}>
-        <NumberInfo
-          subTitle="目标评估"
-          total="有望达到预期"
-        />
-        <div style={{ marginTop: 32 }}>
-          <MiniArea
-            animate={false}
-            line
-            borderWidth={2}
-            height={84}
-            yAxis={{
-              tickCount: 3,
-              tickLine: false,
-              labels: false,
-              title: false,
-              line: false,
-            }}
-            data={activeData}
-          />
-        </div>
-        {
-          activeData && (
-            <div className={styles.activeChartGrid}>
-              <p>{[...activeData].sort()[activeData.length - 1].y + 200} 亿元</p>
-              <p>{[...activeData].sort()[Math.floor(activeData.length / 2)].y} 亿元</p>
-            </div>
-          )
-        }
-        {
-          activeData && (
-            <div className={styles.activeChartLegend}>
-              <span>00:00</span>
-              <span>{activeData[Math.floor(activeData.length / 2)].x}</span>
-              <span>{activeData[activeData.length - 1].x}</span>
-            </div>
-          )
-        }
-      </div>
-    );
-  }
-}

src/components/ActiveChart/index.less

-.activeChart {
-  position: relative;
-}
-.activeChartGrid {
-  p {
-    position: absolute;
-    top: 80px;
-  }
-  p:last-child {
-    top: 115px;
-  }
-}
-.activeChartLegend {
-  position: relative;
-  font-size: 0;
-  margin-top: 8px;
-  height: 20px;
-  line-height: 20px;
-  span {
-    display: inline-block;
-    font-size: 12px;
-    text-align: center;
-    width: 33.33%;
-  }
-  span:first-child {
-    text-align: left;
-  }
-  span:last-child {
-    text-align: right;
-  }
-}

src/components/AvatarList/demo/simple.md

----
-order: 0
-title: 
-  zh-CN: 基础样例 
-  en-US: Basic Usage
----
-
-Simplest of usage.
-
-````jsx
-import AvatarList from 'ant-design-pro/lib/AvatarList';
-
-ReactDOM.render(
-  <AvatarList size="mini">
-    <AvatarList.Item tips="Jake" src="https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png" />
-    <AvatarList.Item tips="Andy" src="https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png" />
-    <AvatarList.Item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" />
-  </AvatarList>
-, mountNode);
-````

src/components/AvatarList/index.d.ts

-import * as React from "react";
-export interface AvatarItemProps {
-  tips: React.ReactNode;
-  src: string;
-}
-
-export interface AvatarListProps {
-  size?: "large" | "small" | "mini" | "default";
-  children:
-    | React.ReactElement<AvatarItem>
-    | Array<React.ReactElement<AvatarItem>>;
-}
-
-declare class AvatarItem extends React.Component<AvatarItemProps, any> {
-  constructor(props: AvatarItemProps);
-}
-
-export default class AvatarList extends React.Component<AvatarListProps, any> {
-  constructor(props: AvatarListProps);
-  static Item: typeof AvatarItem;
-}

src/components/AvatarList/index.en-US.md

----
-title: AvatarList
-order: 1
-cols: 1
----
-
-A list of user's avatar for project or group member list frequently. If a large or small AvatarList is desired, set the `size` property to either `large` or `small` and `mini` respectively. Omit the `size` property for a AvatarList with the default size.
-
-## API
-
-### AvatarList
-
-| Property | Description | Type | Default |
-|----------|------------------------------------------|-------------|-------|
-| size | size of list | `large`、`small` 、`mini`, `default` | `default` |
-
-### AvatarList.Item
-
-| Property | Description | Type | Default |
-|----------|------------------------------------------|-------------|-------|
-| tips | title tips for avatar item | ReactNode\/string | - |
-| src | the address of the image for an image avatar | string | - |

src/components/AvatarList/index.js

-import React from 'react';
-import { Tooltip, Avatar } from 'antd';
-import classNames from 'classnames';
-
-import styles from './index.less';
-
-const AvatarList = ({ children, size, ...other }) => {
-  const childrenWithProps = React.Children.map(children, child =>
-    React.cloneElement(child, {
-      size,
-    })
-  );
-
-  return (
-    <div {...other} className={styles.avatarList}>
-      <ul> {childrenWithProps} </ul>
-    </div>
-  );
-};
-
-const Item = ({ src, size, tips, onClick = (() => {}) }) => {
-  const cls = classNames(styles.avatarItem, {
-    [styles.avatarItemLarge]: size === 'large',
-    [styles.avatarItemSmall]: size === 'small',
-    [styles.avatarItemMini]: size === 'mini',
-  });
-
-  return (
-    <li className={cls} onClick={onClick} >
-      {
-        tips ?
-          <Tooltip title={tips}>
-            <Avatar src={src} size={size} style={{ cursor: 'pointer' }} />
-          </Tooltip>
-          :
-          <Avatar src={src} size={size} />
-      }
-    </li>
-  );
-};
-
-AvatarList.Item = Item;
-
-export default AvatarList;

src/components/AvatarList/index.less

-@import "~antd/lib/style/themes/default.less";
-
-.avatarList {
-  display: inline-block;
-  ul {
-    display: inline-block;
-    margin-left: 8px;
-    font-size: 0;
-  }
-}
-
-.avatarItem {
-  display: inline-block;
-  font-size: @font-size-base;
-  margin-left: -8px;
-  width: @avatar-size-base;
-  height: @avatar-size-base;
-  :global {
-    .ant-avatar {
-      border: 1px solid #fff;
-    }
-  }
-}
-
-.avatarItemLarge {
-  width: @avatar-size-lg;
-  height: @avatar-size-lg;
-}
-
-.avatarItemSmall {
-  width: @avatar-size-sm;
-  height: @avatar-size-sm;
-}
-
-.avatarItemMini {
-  width: 20px;
-  height: 20px;
-  :global {
-    .ant-avatar {
-      width: 20px;
-      height: 20px;
-      line-height: 20px;
-    }
-  }
-}

src/components/AvatarList/index.zh-CN.md

----
-title: AvatarList
-subtitle: 用户头像列表
-order: 1
-cols: 1
----
-
-一组用户头像，常用在项目/团队成员列表。可通过设置 `size` 属性来指定头像大小。
-
-## API
-
-### AvatarList
-
-| 参数      | 说明                                      | 类型         | 默认值 |
-|----------|------------------------------------------|-------------|-------|
-| size | 头像大小 | `large`、`small` 、`mini`, `default` | `default` |
-
-### AvatarList.Item
-
-| 参数      | 说明                                      | 类型         | 默认值 |
-|----------|------------------------------------------|-------------|-------|
-| tips | 头像展示文案 | ReactNode\/string | - |
-| src | 头像图片连接 | string | - |

src/components/Charts/Bar/index.d.ts

-import * as React from "react";
-export interface BarProps {
-  title: React.ReactNode;
-  color?: string;
-  margin?: [number, number, number, number];
-  height: number;
-  data: Array<{
-    x: string;
-    y: number;
-  }>;
-  autoLabel?: boolean;
-}
-
-export default class Bar extends React.Component<BarProps, any> {}

src/components/Charts/Bar/index.js

-import React, { PureComponent } from 'react';
-import G2 from 'g2';
-import Debounce from 'lodash-decorators/debounce';
-import Bind from 'lodash-decorators/bind';
-import equal from '../equal';
-import styles from '../index.less';
-
-class Bar extends PureComponent {
-  state = {
-    autoHideXLabels: false,
-  }
-
-  componentDidMount() {
-    this.renderChart(this.props.data);
-
-    window.addEventListener('resize', this.resize);
-  }
-
-  componentWillReceiveProps(nextProps) {
-    if (!equal(this.props, nextProps)) {
-      this.renderChart(nextProps.data);
-    }
-  }
-
-  componentWillUnmount() {
-    window.removeEventListener('resize', this.resize);
-    if (this.chart) {
-      this.chart.destroy();
-    }
-    this.resize.cancel();
-  }
-
-  @Bind()
-  @Debounce(200)
-  resize() {
-    if (!this.node) {
-      return;
-    }
-    const canvasWidth = this.node.parentNode.clientWidth;
-    const { data = [], autoLabel = true } = this.props;
-    if (!autoLabel) {
-      return;
-    }
-    const minWidth = data.length * 30;
-    const { autoHideXLabels } = this.state;
-
-    if (canvasWidth <= minWidth) {
-      if (!autoHideXLabels) {
-        this.setState({
-          autoHideXLabels: true,
-        });
-        this.renderChart(data);
-      }
-    } else if (autoHideXLabels) {
-      this.setState({
-        autoHideXLabels: false,
-      });
-      this.renderChart(data);
-    }
-  }
-
-  handleRef = (n) => {
-    this.node = n;
-  }
-
-  renderChart(data) {
-    const { autoHideXLabels } = this.state;
-    const {
-      height = 0,
-      fit = true,
-      color = 'rgba(24, 144, 255, 0.85)',
-      margin = [32, 0, (autoHideXLabels ? 8 : 32), 40],
-    } = this.props;
-
-
-    if (!data || (data && data.length < 1)) {
-      return;
-    }
-
-    // clean
-    this.node.innerHTML = '';
-
-    const { Frame } = G2;
-    const frame = new Frame(data);
-
-    const chart = new G2.Chart({
-      container: this.node,
-      forceFit: fit,
-      height: height - 22,
-      legend: null,
-      plotCfg: {
-        margin,
-      },
-    });
-
-    if (autoHideXLabels) {
-      chart.axis('x', {
-        title: false,
-        tickLine: false,
-        labels: false,
-      });
-    } else {
-      chart.axis('x', {
-        title: false,
-      });
-    }
-    chart.axis('y', {
-      title: false,
-      line: false,
-      tickLine: false,
-    });
-
-    chart.source(frame, {
-      x: {
-        type: 'cat',
-      },
-      y: {
-        min: 0,
-      },
-    });
-
-    chart.tooltip({
-      title: null,
-      crosshairs: false,
-      map: {
-        name: 'x',
-      },
-    });
-    chart.interval().position('x*y').color(color).style({
-      fillOpacity: 1,
-    });
-    chart.render();
-
-    this.chart = chart;
-  }
-
-  render() {
-    const { height, title } = this.props;
-
-    return (
-      <div className={styles.chart} style={{ height }}>
-        <div>
-          { title && <h4>{title}</h4>}
-          <div ref={this.handleRef} />
-        </div>
-      </div>
-    );
-  }
-}
-
-export default Bar;

src/components/Charts/ChartCard/index.d.ts

-import * as React from "react";
-export interface ChartCardProps {
-  title: React.ReactNode;
-  action?: React.ReactNode;
-  total?: React.ReactNode | number;
-  footer?: React.ReactNode;
-  contentHeight?: number;
-  avatar?: React.ReactNode;
-}
-
-export default class ChartCard extends React.Component<ChartCardProps, any> {}

src/components/Charts/ChartCard/index.js

-import React from 'react';
-import { Card, Spin } from 'antd';
-import classNames from 'classnames';
-
-import styles from './index.less';
-
-const ChartCard = ({
-  loading = false, contentHeight, title, avatar, action, total, footer, children, ...rest
-}) => {
-  const content = (
-    <div className={styles.chartCard}>
-      <div
-        className={classNames(styles.chartTop, { [styles.chartTopMargin]: (!children && !footer) })}
-      >
-        <div className={styles.avatar}>
-          {
-            avatar
-          }
-        </div>
-        <div className={styles.metaWrap}>
-          <div className={styles.meta}>
-            <span className={styles.title}>{title}</span>
-            <span className={styles.action}>{action}</span>
-          </div>
-          {
-            // eslint-disable-next-line
-            (total !== undefined) && (<div className={styles.total} dangerouslySetInnerHTML={{ __html: total }} />)
-          }
-        </div>
-      </div>
-      {
-        children && (
-          <div className={styles.content} style={{ height: contentHeight || 'auto' }}>
-            <div className={contentHeight && styles.contentFixed}>
-              {children}
-            </div>
-          </div>
-        )
-      }
-      {
-        footer && (
-          <div className={classNames(styles.footer, { [styles.footerMargin]: !children })}>
-            {footer}
-          </div>
-        )
-      }
-    </div>
-  );
-
-  return (
-    <Card
-      bodyStyle={{ padding: '20px 24px 8px 24px' }}
-      {...rest}
-    >
-      {<Spin spinning={loading}>{content}</Spin>}
-    </Card>
-  );
-};
-
-export default ChartCard;

src/components/Charts/ChartCard/index.less

-@import "~antd/lib/style/themes/default.less";
-
-.chartCard {
-  position: relative;
-  .chartTop {
-    position: relative;
-    overflow: hidden;
-    width: 100%;
-  }
-  .chartTopMargin {
-    margin-bottom: 12px;
-  }
-  .chartTopHasMargin {
-    margin-bottom: 20px;
-  }
-  .metaWrap {
-    float: left;
-  }
-  .avatar {
-    position: relative;
-    top: 4px;
-    float: left;
-    margin-right: 20px;
-    img {
-      border-radius: 100%;
-    }
-  }
-  .meta {
-    color: @text-color-secondary;
-    font-size: @font-size-base;
-    line-height: 22px;
-    height: 22px;
-  }
-  .action {
-    cursor: pointer;
-    position: absolute;
-    top: 0;
-    right: 0;
-  }
-  .total {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    word-break: break-all;
-    white-space: nowrap;
-    color: @heading-color;
-    margin-top: 4px;
-    margin-bottom: 0;
-    font-size: 30px;
-    line-height: 38px;
-    height: 38px;
-  }
-  .content {
-    margin-bottom: 12px;
-    position: relative;
-    width: 100%;
-  }
-  .contentFixed {
-    position: absolute;
-    left: 0;
-    bottom: 0;
-    width: 100%;
-  }
-  .footer {
-    border-top: 1px solid @border-color-split;
-    padding-top: 9px;
-    margin-top: 8px;
-    & > * {
-      position: relative;
-    }
-  }
-  .footerMargin {
-    margin-top: 20px;
-  }
-}

src/components/Charts/Field/index.d.ts

-import * as React from "react";
-export interface FieldProps {
-  label: React.ReactNode;
-  value: React.ReactNode;
-}
-
-export default class Field extends React.Component<FieldProps, any> {}

src/components/Charts/Field/index.js

-import React from 'react';
-
-import styles from './index.less';
-
-const Field = ({ label, value, ...rest }) => (
-  <div className={styles.field} {...rest}>
-    <span>{label}</span>
-    <span>{value}</span>
-  </div>
-);
-
-export default Field;

src/components/Charts/Field/index.less

-@import "~antd/lib/style/themes/default.less";
-
-.field {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  margin: 0;
-  span {
-    font-size: @font-size-base;
-    line-height: 22px;
-  }
-  span:last-child {
-    margin-left: 8px;
-    color: @heading-color;
-  }
-}

src/components/Charts/Gauge/index.d.ts

-import * as React from "react";
-export interface GaugeProps {
-  title: React.ReactNode;
-  color?: string;
-  height: number;
-  bgColor?: number;
-  percent: number;
-}
-
-export default class Gauge extends React.Component<GaugeProps, any> {}

src/components/Charts/Gauge/index.js

-import React, { PureComponent } from 'react';
-import G2 from 'g2';
-import equal from '../equal';
-
-const { Shape } = G2;
-
-const primaryColor = '#2F9CFF';
-const backgroundColor = '#F0F2F5';
-
-/* eslint no-underscore-dangle: 0 */
-class Gauge extends PureComponent {
-  componentDidMount() {
-    setTimeout(() => {
-      this.renderChart();
-    }, 10);
-  }
-
-  componentWillReceiveProps(nextProps) {
-    if (!equal(this.props, nextProps)) {
-      setTimeout(() => {
-        this.renderChart(nextProps);
-      }, 10);
-    }
-  }
-
-  componentWillUnmount() {
-    if (this.chart) {
-      this.chart.destroy();
-    }
-  }
-
-  handleRef = (n) => {
-    this.node = n;
-  }
-
-  initChart(nextProps) {
-    const { title, color = primaryColor } = nextProps || this.props;
-
-    Shape.registShape('point', 'dashBoard', {
-      drawShape(cfg, group) {
-        const originPoint = cfg.points[0];
-        const point = this.parsePoint({ x: originPoint.x, y: 0.4 });
-
-        const center = this.parsePoint({
-          x: 0,
-          y: 0,
-        });
-
-        const shape = group.addShape('polygon', {
-          attrs: {
-            points: [
-              [center.x, center.y],
-              [point.x + 8, point.y],
-              [point.x + 8, point.y - 2],
-              [center.x, center.y - 2],
-            ],
-            radius: 2,
-            lineWidth: 2,
-            arrow: false,
-            fill: color,
-          },
-        });
-
-        group.addShape('Marker', {
-          attrs: {
-            symbol: 'circle',
-            lineWidth: 2,
-            fill: color,
-            radius: 8,
-            x: center.x,
-            y: center.y,
-          },
-        });
-        group.addShape('Marker', {
-          attrs: {
-            symbol: 'circle',
-            lineWidth: 2,
-            fill: '#fff',
-            radius: 5,
-            x: center.x,
-            y: center.y,
-          },
-        });
-
-        const { origin } = cfg;
-        group.addShape('text', {
-          attrs: {
-            x: center.x,
-            y: center.y + 80,
-            text: `${origin._origin.value}%`,
-            textAlign: 'center',
-            fontSize: 24,
-            fill: 'rgba(0, 0, 0, 0.85)',
-          },
-        });
-        group.addShape('text', {
-          attrs: {
-            x: center.x,
-            y: center.y + 45,
-            text: title,
-            textAlign: 'center',
-            fontSize: 14,
-            fill: 'rgba(0, 0, 0, 0.43)',
-          },
-        });
-
-        return shape;
-      },
-    });
-  }
-
-  renderChart(nextProps) {
-    const {
-      height, color = primaryColor, bgColor = backgroundColor, title, percent, format,
-    } = nextProps || this.props;
-    const data = [{ name: title, value: percent }];
-
-    if (this.chart) {
-      this.chart.clear();
-    }
-    if (this.node) {
-      this.node.innerHTML = '';
-    }
-
-    this.initChart(nextProps);
-
-    const chart = new G2.Chart({
-      container: this.node,
-      forceFit: true,
-      height,
-      animate: false,
-      plotCfg: {
-        margin: [10, 10, 30, 10],
-      },
-    });
-
-    chart.source(data);
-
-    chart.tooltip(false);
-
-    chart.coord('gauge', {
-      startAngle: -1.2 * Math.PI,
-      endAngle: 0.20 * Math.PI,
-    });
-    chart.col('value', {
-      type: 'linear',
-      nice: true,
-      min: 0,
-      max: 100,
-      tickCount: 6,
-    });
-    chart.axis('value', {
-      subTick: false,
-      tickLine: {
-        stroke: color,
-        lineWidth: 2,
-        value: -14,
-      },
-      labelOffset: -12,
-      formatter: format,
-    });
-    chart.point().position('value').shape('dashBoard');
-    draw(data);
-
-    /* eslint no-shadow: 0 */
-    function draw(data) {
-      const val = data[0].value;
-      const lineWidth = 12;
-      chart.guide().clear();
-
-      chart.guide().arc(() => {
-        return [0, 0.95];
-      }, () => {
-        return [val, 0.95];
-      }, {
-        stroke: color,
-        lineWidth,
-      });
-
-      chart.guide().arc(() => {
-        return [val, 0.95];
-      }, (arg) => {
-        return [arg.max, 0.95];
-      }, {
-        stroke: bgColor,
-        lineWidth,
-      });
-
-      chart.changeData(data);
-    }
-
-    this.chart = chart;
-  }
-
-  render() {
-    return (
-      <div ref={this.handleRef} />
-    );
-  }
-}
-
-export default Gauge;

src/components/Charts/MiniArea/index.d.ts

-import * as React from "react";
-
-// g2已经更新到3.0
-// 不带的写了
-
-export interface Axis {
-  title: any;
-  line: any;
-  gridAlign: any;
-  labels: any;
-  tickLine: any;
-  grid: any;
-}
-
-export interface MiniAreaProps {
-  color?: string;
-  height: number;
-  borderColor?: string;
-  line?: boolean;
-  animate?: boolean;
-  xAxis?: Axis;
-  yAxis?: Axis;
-  data: Array<{
-    x: number;
-    y: number;
-  }>;
-}
-
-export default class MiniArea extends React.Component<MiniAreaProps, any> {}

src/components/Charts/MiniArea/index.js

-import React, { PureComponent } from 'react';
-import G2 from 'g2';
-import equal from '../equal';
-import styles from '../index.less';
-
-class MiniArea extends PureComponent {
-  static defaultProps = {
-    borderColor: '#1890FF',
-    color: 'rgba(24, 144, 255, 0.2)',
-  };
-
-  componentDidMount() {
-    this.renderChart(this.props.data);
-  }
-
-  componentWillReceiveProps(nextProps) {
-    if (!equal(this.props, nextProps)) {
-      this.renderChart(nextProps.data);
-    }
-  }
-
-  componentWillUnmount() {
-    if (this.chart) {
-      this.chart.destroy();
-    }
-  }
-
-  handleRef = (n) => {
-    this.node = n;
-  }
-
-  renderChart(data) {
-    const {
-      height = 0, fit = true, color, borderWidth = 2, line, xAxis, yAxis, animate = true,
-    } = this.props;
-    const borderColor = this.props.borderColor || color;
-
-    if (!data || (data && data.length < 1)) {
-      return;
-    }
-
-    // clean
-    this.node.innerHTML = '';
-
-    const chart = new G2.Chart({
-      container: this.node,
-      forceFit: fit,
-      height: height + 54,
-      animate,
-      plotCfg: {
-        margin: [36, 5, 30, 5],
-      },
-      legend: null,
-    });
-
-    if (!xAxis && !yAxis) {
-      chart.axis(false);
-    }
-
-    if (xAxis) {
-      chart.axis('x', xAxis);
-    } else {
-      chart.axis('x', false);
-    }
-
-    if (yAxis) {
-      chart.axis('y', yAxis);
-    } else {
-      chart.axis('y', false);
-    }
-
-    const dataConfig = {
-      x: {
-        type: 'cat',
-        range: [0, 1],
-        ...xAxis,
-      },
-      y: {
-        min: 0,
-        ...yAxis,
-      },
-    };
-
-    chart.tooltip({
-      title: null,
-      crosshairs: false,
-      map: {
-        title: null,
-        name: 'x',
-        value: 'y',
-      },
-    });
-
-    const view = chart.createView();
-    view.source(data, dataConfig);
-
-    view.area().position('x*y').color(color).shape('smooth')
-      .style({ fillOpacity: 1 });
-
-    if (line) {
-      const view2 = chart.createView();
-      view2.source(data, dataConfig);
-      view2.line().position('x*y').color(borderColor).size(borderWidth)
-        .shape('smooth');
-      view2.tooltip(false);
-    }
-    chart.render();
-
-    this.chart = chart;
-  }
-
-  render() {
-    const { height } = this.props;
-
-    return (
-      <div className={styles.miniChart} style={{ height }}>
-        <div className={styles.chartContent}>
-          <div ref={this.handleRef} />
-        </div>
-      </div>
-    );
-  }
-}
-
-export default MiniArea;

src/components/Charts/MiniBar/index.d.ts

-import * as React from "react";
-export interface MiniBarProps {
-  color?: string;
-  height: number;
-  data: Array<{
-    x: number;
-    y: number;
-  }>;
-}
-
-export default class MiniBar extends React.Component<MiniBarProps, any> {}

src/components/Charts/MiniBar/index.js

-import React, { PureComponent } from 'react';
-import G2 from 'g2';
-import equal from '../equal';
-import styles from '../index.less';
-
-class MiniBar extends PureComponent {
-  componentDidMount() {
-    this.renderChart(this.props.data);
-  }
-
-  componentWillReceiveProps(nextProps) {
-    if (!equal(this.props, nextProps)) {
-      this.renderChart(nextProps.data);
-    }
-  }
-
-  componentWillUnmount() {
-    if (this.chart) {
-      this.chart.destroy();
-    }
-  }
-
-  handleRef = (n) => {
-    this.node = n;
-  }
-
-  renderChart(data) {
-    const { height = 0, fit = true, color = '#1890FF' } = this.props;
-
-    if (!data || (data && data.length < 1)) {
-      return;
-    }
-
-    // clean
-    this.node.innerHTML = '';
-
-    const { Frame } = G2;
-    const frame = new Frame(data);
-
-    const chart = new G2.Chart({
-      container: this.node,
-      forceFit: fit,
-      height: height + 54,
-      plotCfg: {
-        margin: [36, 5, 30, 5],
-      },
-      legend: null,
-    });
-
-    chart.axis(false);
-
-    chart.source(frame, {
-      x: {
-        type: 'cat',
-      },
-      y: {
-        min: 0,
-      },
-    });
-
-    chart.tooltip({
-      title: null,
-      crosshairs: false,
-      map: {
-        name: 'x',
-      },
-    });
-    chart.interval().position('x*y').color(color);
-    chart.render();
-
-    this.chart = chart;
-  }
-
-  render() {
-    const { height } = this.props;
-
-    return (
-      <div className={styles.miniChart} style={{ height }}>
-        <div className={styles.chartContent}>
-          <div ref={this.handleRef} />
-        </div>
-      </div>
-    );
-  }
-}
-
-export default MiniBar;

src/components/Charts/MiniProgress/index.d.ts

-import * as React from "react";
-export interface MiniProgressProps {
-  target: number;
-  color?: string;
-  strokeWidth?: number;
-  percent?: number;
-}
-
-export default class MiniProgress extends React.Component<
-  MiniProgressProps,
-  any
-> {}

src/components/Charts/MiniProgress/index.js

-import React from 'react';
-import { Tooltip } from 'antd';
-
-import styles from './index.less';
-
-const MiniProgress = ({ target, color = 'rgb(19, 194, 194)', strokeWidth, percent }) => (
-  <div className={styles.miniProgress}>
-    <Tooltip title={`目标值: ${target}%`}>
-      <div
-        className={styles.target}
-        style={{ left: (target ? `${target}%` : null) }}
-      >
-        <span style={{ backgroundColor: (color || null) }} />
-        <span style={{ backgroundColor: (color || null) }} />
-      </div>
-    </Tooltip>
-    <div className={styles.progressWrap}>
-      <div
-        className={styles.progress}
-        style={{
-          backgroundColor: (color || null),
-          width: (percent ? `${percent}%` : null),
-          height: (strokeWidth || null),
-        }}
-      />
-    </div>
-  </div>
-);
-
-export default MiniProgress;

src/components/Charts/MiniProgress/index.less

-@import "~antd/lib/style/themes/default.less";
-
-.miniProgress {
-  padding: 5px 0;
-  position: relative;
-  width: 100%;
-  .progressWrap {
-    background-color: @background-color-base;
-    position: relative;
-  }
-  .progress {
-    transition: all .4s cubic-bezier(.08, .82, .17, 1) 0s;
-    border-radius: 1px 0 0 1px;
-    background-color: @primary-color;
-    width: 0;
-    height: 100%;
-  }
-  .target {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    span {
-      border-radius: 100px;
-      position: absolute;
-      top: 0;
-      left: 0;
-      height: 4px;
-      width: 2px;
-    }
-    span:last-child {
-      top: auto;
-      bottom: 0;
-    }
-  }
-}

src/components/Charts/Pie/index.d.ts

-import * as React from "react";
-export interface PieProps {
-  animate?: boolean;
-  color?: string;
-  height: number;
-  hasLegend?: boolean;
-  margin?: [number, number, number, number];
-  percent?: number;
-  data?: Array<{
-    x: string;
-    y: number;
-  }>;
-  total?: string;
-  title?: React.ReactNode;
-  tooltip?: boolean;
-  valueFormat?: (value: string) => string;
-  subTitle?: React.ReactNode;
-}
-
-export default class Pie extends React.Component<PieProps, any> {}

src/components/Charts/Pie/index.js

-import React, { Component } from 'react';
-import G2 from 'g2';
-import { Divider } from 'antd';
-import classNames from 'classnames';
-import ReactFitText from 'react-fittext';
-import Debounce from 'lodash-decorators/debounce';
-import Bind from 'lodash-decorators/bind';
-import equal from '../equal';
-import styles from './index.less';
-
-/* eslint react/no-danger:0 */
-class Pie extends Component {
-  state = {
-    legendData: [],
-    legendBlock: true,
-  };
-
-  componentDidMount() {
-    this.renderChart();
-    this.resize();
-    window.addEventListener('resize', this.resize);
-  }
-
-  componentWillReceiveProps(nextProps) {
-    if (!equal(this.props, nextProps)) {
-      this.renderChart(nextProps.data);
-    }
-  }
-
-  componentWillUnmount() {
-    window.removeEventListener('resize', this.resize);
-    if (this.chart) {
-      this.chart.destroy();
-    }
-    this.resize.cancel();
-  }
-
-  @Bind()
-  @Debounce(300)
-  resize() {
-    const { hasLegend } = this.props;
-    if (!hasLegend || !this.root) {
-      window.removeEventListener('resize', this.resize);
-      return;
-    }
-    if (this.root.parentNode.clientWidth <= 380) {
-      if (!this.state.legendBlock) {
-        this.setState({
-          legendBlock: true,
-        }, () => {
-          this.renderChart();
-        });
-      }
-    } else if (this.state.legendBlock) {
-      this.setState({
-        legendBlock: false,
-      }, () => {
-        this.renderChart();
-      });
-    }
-  }
-
-  handleRef = (n) => {
-    this.node = n;
-  }
-
-  handleRoot = (n) => {
-    this.root = n;
-  }
-
-  handleLegendClick = (item, i) => {
-    const newItem = item;
-    newItem.checked = !newItem.checked;
-
-    const { legendData } = this.state;
-    legendData[i] = newItem;
-
-    if (this.chart) {
-      const filterItem = legendData.filter(l => l.checked).map(l => l.x);
-      this.chart.filter('x', filterItem);
-      this.chart.repaint();
-    }
-
-    this.setState({
-      legendData,
-    });
-  }
-
-  renderChart(d) {
-    let data = d || this.props.data;
-
-    const {
-      height = 0,
-      hasLegend,
-      fit = true,
-      margin = [12, 0, 12, 0], percent, color,
-      inner = 0.75,
-      animate = true,
-      colors,
-      lineWidth = 0,
-    } = this.props;
-
-    const defaultColors = colors;
-
-    let selected = this.props.selected || true;
-    let tooltip = this.props.tooltips || true;
-
-    let formatColor;
-    if (percent) {
-      selected = false;
-      tooltip = false;
-      formatColor = (value) => {
-        if (value === '占比') {
-          return color || 'rgba(24, 144, 255, 0.85)';
-        } else {
-          return '#F0F2F5';
-        }
-      };
-
-      /* eslint no-param-reassign: */
-      data = [
-        {
-          x: '占比',
-          y: parseFloat(percent),
-        },
-        {
-          x: '反比',
-          y: 100 - parseFloat(percent),
-        },
-      ];
-    }
-
-    if (!data || (data && data.length < 1)) {
-      return;
-    }
-
-    // clean
-    this.node.innerHTML = '';
-
-    const { Stat } = G2;
-
-    const chart = new G2.Chart({
-      container: this.node,
-      forceFit: fit,
-      height,
-      plotCfg: {
-        margin,
-      },
-      animate,
-    });
-
-    if (!tooltip) {
-      chart.tooltip(false);
-    } else {
-      chart.tooltip({
-        title: null,
-      });
-    }
-
-    chart.axis(false);
-    chart.legend(false);
-
-    chart.source(data, {
-      x: {
-        type: 'cat',
-        range: [0, 1],
-      },
-      y: {
-        min: 0,
-      },
-    });
-
-    chart.coord('theta', {
-      inner,
-    });
-
-    chart
-      .intervalStack()
-      .position(Stat.summary.percent('y'))
-      .style({ lineWidth, stroke: '#fff' })
-      .color('x', percent ? formatColor : defaultColors)
-      .selected(selected);
-
-    chart.render();
-
-    this.chart = chart;
-
-    let legendData = [];
-    if (hasLegend) {
-      const geom = chart.getGeoms()[0]; // 获取所有的图形
-      const items = geom.getData(); // 获取图形对应的数据
-      legendData = items.map((item) => {
-        /* eslint no-underscore-dangle:0 */
-        const origin = item._origin;
-        origin.color = item.color;
-        origin.checked = true;
-        return origin;
-      });
-    }
-
-    this.setState({
-      legendData,
-    });
-  }
-
-  render() {
-    const { valueFormat, subTitle, total, hasLegend, className, style } = this.props;
-    const { legendData, legendBlock } = this.state;
-    const pieClassName = classNames(styles.pie, className, {
-      [styles.hasLegend]: !!hasLegend,
-      [styles.legendBlock]: legendBlock,
-    });
-
-    return (
-      <div ref={this.handleRoot} className={pieClassName} style={style}>
-        <ReactFitText maxFontSize={25}>
-          <div className={styles.chart}>
-            <div ref={this.handleRef} style={{ fontSize: 0 }} />
-            {
-              (subTitle || total) && (
-                <div className={styles.total}>
-                  {subTitle && <h4 className="pie-sub-title">{subTitle}</h4>}
-                  {
-                    // eslint-disable-next-line
-                    total && <div className="pie-stat" dangerouslySetInnerHTML={{ __html: total }} />
-                  }
-                </div>
-              )
-            }
-          </div>
-        </ReactFitText>
-
-        {
-          hasLegend && (
-            <ul className={styles.legend}>
-              {
-                legendData.map((item, i) => (
-                  <li key={item.x} onClick={() => this.handleLegendClick(item, i)}>
-                    <span className={styles.dot} style={{ backgroundColor: !item.checked ? '#aaa' : item.color }} />
-                    <span className={styles.legendTitle}>{item.x}</span>
-                    <Divider type="vertical" />
-                    <span className={styles.percent}>{`${(item['..percent'] * 100).toFixed(2)}%`}</span>
-                    <span
-                      className={styles.value}
-                      dangerouslySetInnerHTML={{
-                        __html: valueFormat ? valueFormat(item.y) : item.y,
-                      }}
-                    />
-                  </li>
-                ))
-              }
-            </ul>
-          )
-        }
-      </div>
-    );
-  }
-}
-
-export default Pie;

src/components/Charts/Pie/index.less

-@import "~antd/lib/style/themes/default.less";
-
-.pie {
-  position: relative;
-  .chart {
-    position: relative;
-  }
-  &.hasLegend .chart {
-    width: ~"calc(100% - 240px)";
-  }
-  .legend {
-    position: absolute;
-    right: 0;
-    min-width: 200px;
-    top: 50%;
-    transform: translateY(-50%);
-    margin: 0 20px;
-    list-style: none;
-    padding: 0;
-    li {
-      cursor: pointer;
-      margin-bottom: 16px;
-      height: 22px;
-      line-height: 22px;
-      &:last-child {
-        margin-bottom: 0;
-      }
-    }
-  }
-  .dot {
-    border-radius: 8px;
-    display: inline-block;
-    margin-right: 8px;
-    position: relative;
-    top: -1px;
-    height: 8px;
-    width: 8px;
-  }
-  .line {
-    background-color: @border-color-split;
-    display: inline-block;
-    margin-right: 8px;
-    width: 1px;
-    height: 16px;
-  }
-  .legendTitle {
-    color: @text-color;
-  }
-  .percent {
-    color: @text-color-secondary;
-  }
-  .value {
-    position: absolute;
-    right: 0;
-  }
-  .title {
-    margin-bottom: 8px;
-  }
-  .total {
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    text-align: center;
-    height: 62px;
-    transform: translate(-50%, -50%);
-    & > h4 {
-      color: @text-color-secondary;
-      font-size: 14px;
-      line-height: 22px;
-      height: 22px;
-      margin-bottom: 8px;
-      font-weight: normal;
-    }
-    & > p {
-      color: @heading-color;
-      display: block;
-      font-size: 1.2em;
-      height: 32px;
-      line-height: 32px;
-      white-space: nowrap;
-    }
-  }
-}
-
-.legendBlock {
-  &.hasLegend .chart {
-    width: 100%;
-    margin: 0 0 32px 0;
-  }
-  .legend {
-    position: relative;
-    transform: none;
-  }
-}

src/components/Charts/Radar/index.d.ts

-import * as React from "react";
-export interface RadarProps {
-  title?: React.ReactNode;
-  height: number;
-  margin?: [number, number, number, number];
-  hasLegend?: boolean;
-  data: Array<{
-    name: string;
-    label: string;
-    value: string;
-  }>;
-}
-
-export default class Radar extends React.Component<RadarProps, any> {}

src/components/Charts/Radar/index.js

-import React, { PureComponent } from 'react';
-import G2 from 'g2';
-import { Row, Col } from 'antd';
-import equal from '../equal';
-import styles from './index.less';
-
-/* eslint react/no-danger:0 */
-class Radar extends PureComponent {
-  state = {
-    legendData: [],
-  }
-
-  componentDidMount() {
-    this.renderChart(this.props.data);
-  }
-
-  componentWillReceiveProps(nextProps) {
-    if (!equal(this.props, nextProps)) {
-      this.renderChart(nextProps.data);
-    }
-  }
-
-  componentWillUnmount() {
-    if (this.chart) {
-      this.chart.destroy();
-    }
-  }
-
-  handleRef = (n) => {
-    this.node = n;
-  }
-
-  handleLegendClick = (item, i) => {
-    const newItem = item;
-    newItem.checked = !newItem.checked;
-
-    const { legendData } = this.state;
-    legendData[i] = newItem;
-
-    if (this.chart) {
-      const filterItem = legendData.filter(l => l.checked).map(l => l.name);
-      this.chart.filter('name', filterItem);
-      this.chart.repaint();
-    }
-
-    this.setState({
-      legendData,
-    });
-  }
-
-  renderChart(data) {
-    const { height = 0,
-      hasLegend = true,
-      fit = true,
-      tickCount = 4,
-      margin = [24, 30, 16, 30] } = this.props;
-
-    const colors = [
-      '#1890FF', '#FACC14', '#2FC25B', '#8543E0', '#F04864', '#13C2C2', '#fa8c16', '#a0d911',
-    ];
-
-    if (!data || (data && data.length < 1)) {
-      return;
-    }
-
-    // clean
-    this.node.innerHTML = '';
-
-    const chart = new G2.Chart({
-      container: this.node,
-      forceFit: fit,
-      height: height - (hasLegend ? 80 : 22),
-      plotCfg: {
-        margin,
-      },
-    });
-
-    this.chart = chart;
-
-    chart.source(data, {
-      value: {
-        min: 0,
-        tickCount,
-      },
-    });
-
-    chart.coord('polar');
-    chart.legend(false);
-
-    chart.axis('label', {
-      line: null,
-      labelOffset: 8,
-      labels: {
-        label: {
-          fill: 'rgba(0, 0, 0, .65)',
-        },
-      },
-      grid: {
-        line: {
-          stroke: '#e9e9e9',
-          lineWidth: 1,
-          lineDash: [0, 0],
-        },
-      },
-    });
-
-    chart.axis('value', {
-      grid: {
-        type: 'polygon',
-        line: {
-          stroke: '#e9e9e9',
-          lineWidth: 1,
-          lineDash: [0, 0],
-        },
-      },
-      labels: {
-        label: {
-          fill: 'rgba(0, 0, 0, .65)',
-        },
-      },
-    });
-
-    chart.line().position('label*value').color('name', colors);
-    chart.point().position('label*value').color('name', colors).shape('circle')
-      .size(3);
-
-    chart.render();
-
-    if (hasLegend) {
-      const geom = chart.getGeoms()[0]; // 获取所有的图形
-      const items = geom.getData(); // 获取图形对应的数据
-      const legendData = items.map((item) => {
-        /* eslint no-underscore-dangle:0 */
-        const origin = item._origin;
-        const result = {
-          name: origin[0].name,
-          color: item.color,
-          checked: true,
-          value: origin.reduce((p, n) => p + n.value, 0),
-        };
-
-        return result;
-      });
-
-      this.setState({
-        legendData,
-      });
-    }
-  }
-
-  render() {
-    const { height, title, hasLegend } = this.props;
-    const { legendData } = this.state;
-
-    return (
-      <div className={styles.radar} style={{ height }}>
-        <div>
-          {title && <h4>{title}</h4>}
-          <div ref={this.handleRef} />
-          {
-            hasLegend && (
-              <Row className={styles.legend}>
-                {
-                  legendData.map((item, i) => (
-                    <Col
-                      span={(24 / legendData.length)}
-                      key={item.name}
-                      onClick={() => this.handleLegendClick(item, i)}
-                    >
-                      <div className={styles.legendItem}>
-                        <p>
-                          <span className={styles.dot} style={{ backgroundColor: !item.checked ? '#aaa' : item.color }} />
-                          <span>{item.name}</span>
-                        </p>
-                        <h6>{item.value}</h6>
-                      </div>
-                    </Col>
-                  ))
-                }
-              </Row>
-            )
-          }
-        </div>
-      </div>
-    );
-  }
-}
-
-export default Radar;

src/components/Charts/Radar/index.less

-@import "~antd/lib/style/themes/default.less";
-
-.radar {
-  .legend {
-    margin-top: 16px;
-    .legendItem {
-      position: relative;
-      text-align: center;
-      cursor: pointer;
-      color: @text-color-secondary;
-      line-height: 22px;
-      p {
-        margin: 0;
-      }
-      h6 {
-        color: @heading-color;
-        padding-left: 16px;
-        font-size: 24px;
-        line-height: 32px;
-        margin-top: 4px;
-        margin-bottom: 0;
-      }
-      &:after {
-        background-color: @border-color-split;
-        position: absolute;
-        top: 8px;
-        right: 0;
-        height: 40px;
-        width: 1px;
-        content: '';
-      }
-    }
-    > :last-child .legendItem:after {
-      display: none;
-    }
-    .dot {
-      border-radius: 6px;
-      display: inline-block;
-      margin-right: 6px;
-      position: relative;
-      top: -1px;
-      height: 6px;
-      width: 6px;
-    }
-  }
-}

src/components/Charts/TagCloud/index.d.ts

-import * as React from "react";
-export interface TagCloudProps {
-  data: Array<{
-    name: string;
-    value: number;
-  }>;
-  height: number;
-}
-
-export default class TagCloud extends React.Component<TagCloudProps, any> {}

src/components/Charts/TagCloud/index.js

-import React, { PureComponent } from 'react';
-import classNames from 'classnames';
-import G2 from 'g2';
-import Cloud from 'g-cloud';
-import Debounce from 'lodash-decorators/debounce';
-import Bind from 'lodash-decorators/bind';
-import styles from './index.less';
-
-/* eslint no-underscore-dangle: 0 */
-/* eslint no-param-reassign: 0 */
-
-const imgUrl = 'https://gw.alipayobjects.com/zos/rmsportal/gWyeGLCdFFRavBGIDzWk.png';
-
-class TagCloud extends PureComponent {
-  componentDidMount() {
-    this.initTagCloud();
-    this.renderChart();
-
-    window.addEventListener('resize', this.resize);
-  }
-
-  componentWillReceiveProps(nextProps) {
-    if (this.props.data !== nextProps.data) {
-      this.renderChart(nextProps.data);
-    }
-  }
-
-  componentWillUnmount() {
-    window.removeEventListener('resize', this.resize);
-    this.renderChart.cancel();
-  }
-
-  resize = () => {
-    this.renderChart();
-  }
-
-  initTagCloud = () => {
-    const { Util, Shape } = G2;
-
-    function getTextAttrs(cfg) {
-      const textAttrs = Util.mix(true, {}, {
-        fillOpacity: cfg.opacity,
-        fontSize: cfg.size,
-        rotate: cfg.origin._origin.rotate,
-        // rotate: cfg.origin._origin.rotate,
-        text: cfg.origin._origin.text,
-        textAlign: 'center',
-        fill: cfg.color,
-        textBaseline: 'Alphabetic',
-      }, cfg.style);
-      return textAttrs;
-    }
-
-    // 给point注册一个词云的shape
-    Shape.registShape('point', 'cloud', {
-      drawShape(cfg, container) {
-        cfg.points = this.parsePoints(cfg.points);
-        const attrs = getTextAttrs(cfg);
-        const shape = container.addShape('text', {
-          attrs: Util.mix(attrs, {
-            x: cfg.points[0].x,
-            y: cfg.points[0].y,
-          }),
-        });
-        return shape;
-      },
-    });
-  }
-
-  saveRootRef = (node) => {
-    this.root = node;
-  }
-
-  saveNodeRef = (node) => {
-    this.node = node;
-  }
-
-  @Bind()
-  @Debounce(500)
-  renderChart(newData) {
-    const data = newData || this.props.data;
-    if (!data || data.length < 1) {
-      return;
-    }
-
-    const colors = ['#1890FF', '#41D9C7', '#2FC25B', '#FACC14', '#9AE65C'];
-
-    const height = this.props.height * 4;
-    let width = 0;
-    if (this.root) {
-      width = this.root.offsetWidth * 4;
-    }
-
-    data.sort((a, b) => b.value - a.value);
-
-    const max = data[0].value;
-    const min = data[data.length - 1].value;
-
-    // 构造一个词云布局对象
-    const layout = new Cloud({
-      words: data,
-      width,
-      height,
-
-      rotate: () => 0,
-
-      // 设定文字大小配置函数(默认为12-24px的随机大小)
-      size: words => (((words.value - min) / (max - min)) * 50) + 30,
-
-      // 设定文字内容
-      text: words => words.name,
-    });
-
-    layout.image(imgUrl, (imageCloud) => {
-      // clean
-      if (this.node) {
-        this.node.innerHTML = '';
-      }
-
-      // 执行词云布局函数，并在回调函数中调用G2对结果进行绘制
-      imageCloud.exec((texts) => {
-        const chart = new G2.Chart({
-          container: this.node,
-          width,
-          height,
-          plotCfg: {
-            margin: 0,
-          },
-        });
-
-        chart.legend(false);
-        chart.axis(false);
-        chart.tooltip(false);
-
-        chart.source(texts);
-
-        // 将词云坐标系调整为G2的坐标系
-        chart.coord().reflect();
-
-        chart
-          .point()
-          .position('x*y')
-          .color('text', colors)
-          .size('size', size => size)
-          .shape('cloud')
-          .style({
-            fontStyle: texts[0].style,
-            fontFamily: texts[0].font,
-            fontWeight: texts[0].weight,
-          });
-
-        chart.render();
-      });
-    });
-  }
-
-  render() {
-    return (
-      <div
-        className={classNames(styles.tagCloud, this.props.className)}
-        ref={this.saveRootRef}
-        style={{ width: '100%' }}
-      >
-        <div ref={this.saveNodeRef} style={{ height: this.props.height }} />
-      </div>
-    );
-  }
-}
-
-export default TagCloud;

src/components/Charts/TagCloud/index.less

-.tagCloud {
-  canvas {
-    transform: scale(0.25);
-    transform-origin: 0 0;
-  }
-}

src/components/Charts/TimelineChart/index.d.ts

-import * as React from "react";
-export interface TimelineChartProps {
-  data: Array<{
-    x: string;
-    y1: string;
-    y2: string;
-  }>;
-  titleMap: { y1: string; y2: string };
-  height?: number;
-}
-
-export default class TimelineChart extends React.Component<
-  TimelineChartProps,
-  any
-> {}

src/components/Charts/TimelineChart/index.js

-import React, { Component } from 'react';
-import G2 from 'g2';
-import Slider from 'g2-plugin-slider';
-import styles from './index.less';
-
-class TimelineChart extends Component {
-  componentDidMount() {
-    this.renderChart(this.props.data);
-  }
-
-  componentWillReceiveProps(nextProps) {
-    if (nextProps.data !== this.props.data) {
-      this.renderChart(nextProps.data);
-    }
-  }
-
-  componentWillUnmount() {
-    if (this.chart) {
-      this.chart.destroy();
-    }
-    if (this.slider) {
-      this.slider.destroy();
-    }
-  }
-
-  sliderId = `timeline-chart-slider-${Math.random() * 1000}`
-
-  handleRef = (n) => {
-    this.node = n;
-  }
-
-  renderChart(data) {
-    const { height = 400, margin = [60, 20, 40, 40], titleMap, borderWidth = 2 } = this.props;
-
-    if (!data || (data && data.length < 1)) {
-      return;
-    }
-
-    // clean
-    if (this.sliderId) {
-      document.getElementById(this.sliderId).innerHTML = '';
-    }
-    this.node.innerHTML = '';
-
-    const chart = new G2.Chart({
-      container: this.node,
-      forceFit: true,
-      height,
-      plotCfg: {
-        margin,
-      },
-    });
-
-    chart.axis('x', {
-      title: false,
-    });
-    chart.axis('y1', {
-      title: false,
-    });
-    chart.axis('y2', false);
-
-    chart.legend({
-      mode: false,
-      position: 'top',
-    });
-
-    let max;
-    if (data[0] && data[0].y1 && data[0].y2) {
-      max = Math.max(data.sort((a, b) => b.y1 - a.y1)[0].y1,
-        data.sort((a, b) => b.y2 - a.y2)[0].y2);
-    }
-
-    chart.source(data, {
-      x: {
-        type: 'timeCat',
-        tickCount: 16,
-        mask: 'HH:MM',
-        range: [0, 1],
-      },
-      y1: {
-        alias: titleMap.y1,
-        max,
-        min: 0,
-      },
-      y2: {
-        alias: titleMap.y2,
-        max,
-        min: 0,
-      },
-    });
-
-    chart.line().position('x*y1').color('#1890FF').size(borderWidth);
-    chart.line().position('x*y2').color('#2FC25B').size(borderWidth);
-
-    this.chart = chart;
-
-    /* eslint new-cap:0 */
-    const slider = new Slider({
-      domId: this.sliderId,
-      height: 26,
-      xDim: 'x',
-      yDim: 'y1',
-      charts: [chart],
-    });
-    slider.render();
-
-    this.slider = slider;
-  }
-
-  render() {
-    const { height, title } = this.props;
-
-    return (
-      <div className={styles.timelineChart} style={{ height }}>
-        <div>
-          { title && <h4>{title}</h4>}
-          <div ref={this.handleRef} />
-          <div id={this.sliderId} />
-        </div>
-      </div>
-    );
-  }
-}
-
-export default TimelineChart;

src/components/Charts/TimelineChart/index.less

-.timelineChart {
-  background: #fff;
-}

src/components/Charts/WaterWave/index.d.ts

-import * as React from "react";
-export interface WaterWaveProps {
-  title: React.ReactNode;
-  color?: string;
-  height: number;
-  percent: number;
-}
-
-export default class WaterWave extends React.Component<WaterWaveProps, any> {}

src/components/Charts/WaterWave/index.js

-import React, { PureComponent } from 'react';
-import styles from './index.less';
-
-/* eslint no-return-assign: 0 */
-// riddle: https://riddle.alibaba-inc.com/riddles/2d9a4b90
-
-class WaterWave extends PureComponent {
-  static defaultProps = {
-    height: 160,
-  }
-  state = {
-    radio: 1,
-  }
-
-  componentDidMount() {
-    this.renderChart();
-    this.resize();
-
-    window.addEventListener('resize', this.resize);
-  }
-
-  componentWillUnmount() {
-    cancelAnimationFrame(this.timer);
-    if (this.node) {
-      this.node.innerHTML = '';
-    }
-    window.removeEventListener('resize', this.resize);
-  }
-
-  resize = () => {
-    const { height } = this.props;
-    const { offsetWidth } = this.root.parentNode;
-    this.setState({
-      radio: offsetWidth < height ? offsetWidth / height : 1,
-    });
-  }
-
-  renderChart() {
-    const { percent, color = '#1890FF' } = this.props;
-    const data = percent / 100;
-    const self = this;
-
-    if (!this.node || !data) {
-      return;
-    }
-
-    const canvas = this.node;
-    const ctx = canvas.getContext('2d');
-
-    const canvasWidth = canvas.width;
-    const canvasHeight = canvas.height;
-    const radius = canvasWidth / 2;
-    const lineWidth = 2;
-    const cR = radius - (lineWidth);
-
-    ctx.beginPath();
-    ctx.lineWidth = lineWidth * 2;
-
-    const axisLength = canvasWidth - (lineWidth);
-    const unit = axisLength / 8;
-    const range = 0.2; // 振幅
-    let currRange = range;
-    const xOffset = lineWidth;
-    let sp = 0; // 周期偏移量
-    let currData = 0;
-    const waveupsp = 0.005; // 水波上涨速度
-
-    let arcStack = [];
-    const bR = radius - (lineWidth);
-    const circleOffset = -(Math.PI / 2);
-    let circleLock = true;
-
-    for (let i = circleOffset; i < circleOffset + (2 * Math.PI); i += 1 / (8 * Math.PI)) {
-      arcStack.push([
-        radius + (bR * Math.cos(i)),
-        radius + (bR * Math.sin(i)),
-      ]);
-    }
-
-    const cStartPoint = arcStack.shift();
-    ctx.strokeStyle = color;
-    ctx.moveTo(cStartPoint[0], cStartPoint[1]);
-
-    function drawSin() {
-      ctx.beginPath();
-      ctx.save();
-
-      const sinStack = [];
-      for (let i = xOffset; i <= xOffset + axisLength; i += 20 / axisLength) {
-        const x = sp + ((xOffset + i) / unit);
-        const y = Math.sin(x) * currRange;
-        const dx = i;
-        const dy = ((2 * cR * (1 - currData)) + (radius - cR)) - (unit * y);
-
-        ctx.lineTo(dx, dy);
-        sinStack.push([dx, dy]);
-      }
-
-      const startPoint = sinStack.shift();
-
-      ctx.lineTo(xOffset + axisLength, canvasHeight);
-      ctx.lineTo(xOffset, canvasHeight);
-      ctx.lineTo(startPoint[0], startPoint[1]);
-
-      const gradient = ctx.createLinearGradient(0, 0, 0, canvasHeight);
-      gradient.addColorStop(0, '#ffffff');
-      gradient.addColorStop(1, '#1890FF');
-      ctx.fillStyle = gradient;
-      ctx.fill();
-      ctx.restore();
-    }
-
-    function render() {
-      ctx.clearRect(0, 0, canvasWidth, canvasHeight);
-      if (circleLock) {
-        if (arcStack.length) {
-          const temp = arcStack.shift();
-          ctx.lineTo(temp[0], temp[1]);
-          ctx.stroke();
-        } else {
-          circleLock = false;
-          ctx.lineTo(cStartPoint[0], cStartPoint[1]);
-          ctx.stroke();
-          arcStack = null;
-
-          ctx.globalCompositeOperation = 'destination-over';
-          ctx.beginPath();
-          ctx.lineWidth = lineWidth;
-          ctx.arc(radius, radius, bR, 0, 2 * Math.PI, 1);
-
-          ctx.beginPath();
-          ctx.save();
-          ctx.arc(radius, radius, radius - (3 * lineWidth), 0, 2 * Math.PI, 1);
-
-          ctx.restore();
-          ctx.clip();
-          ctx.fillStyle = '#1890FF';
-        }
-      } else {
-        if (data >= 0.85) {
-          if (currRange > range / 4) {
-            const t = range * 0.01;
-            currRange -= t;
-          }
-        } else if (data <= 0.1) {
-          if (currRange < range * 1.5) {
-            const t = range * 0.01;
-            currRange += t;
-          }
-        } else {
-          if (currRange <= range) {
-            const t = range * 0.01;
-            currRange += t;
-          }
-          if (currRange >= range) {
-            const t = range * 0.01;
-            currRange -= t;
-          }
-        }
-        if ((data - currData) > 0) {
-          currData += waveupsp;
-        }
-        if ((data - currData) < 0) {
-          currData -= waveupsp;
-        }
-
-        sp += 0.07;
-        drawSin();
-      }
-      self.timer = requestAnimationFrame(render);
-    }
-
-    render();
-  }
-
-  render() {
-    const { radio } = this.state;
-    const { percent, title, height } = this.props;
-    return (
-      <div className={styles.waterWave} ref={n => (this.root = n)} style={{ transform: `scale(${radio})` }}>
-        <div style={{ width: height, height, overflow: 'hidden' }}>
-          <canvas
-            className={styles.waterWaveCanvasWrapper}
-            ref={n => (this.node = n)}
-            width={height * 2}
-            height={height * 2}
-          />
-        </div>
-        <div className={styles.text} style={{ width: height }}>
-          {
-            title && <span>{title}</span>
-          }
-          <h4>{percent}%</h4>
-        </div>
-      </div>
-    );
-  }
-}
-
-export default WaterWave;

src/components/Charts/WaterWave/index.less

-@import "~antd/lib/style/themes/default.less";
-
-.waterWave {
-  display: inline-block;
-  position: relative;
-  transform-origin: left;
-  .text {
-    position: absolute;
-    left: 0;
-    top: 32px;
-    text-align: center;
-    width: 100%;
-    span {
-      color: @text-color-secondary;
-      font-size: 14px;
-      line-height: 22px;
-    }
-    h4 {
-      color: @heading-color;
-      line-height: 32px;
-      font-size: 24px;
-    }
-  }
-  .waterWaveCanvasWrapper {
-    transform: scale(.5);
-    transform-origin: 0 0;
-  }
-}

src/components/Charts/demo/bar.md

----
-order: 4
-title: 柱状图
----
-
-通过设置 `x`，`y` 属性，可以快速的构建出一个漂亮的柱状图，各种纬度的关系则是通过自定义的数据展现。
-
-````jsx
-import { Bar } from 'ant-design-pro/lib/Charts';
-
-const salesData = [];
-for (let i = 0; i < 12; i += 1) {
-  salesData.push({
-    x: `${i + 1}月`,
-    y: Math.floor(Math.random() * 1000) + 200,
-  });
-}
-
-ReactDOM.render(
-  <Bar
-    height={200}
-    title="销售额趋势"
-    data={salesData}
-  />
-, mountNode);
-````

src/components/Charts/demo/chart-card.md

----
-order: 1
-title: 图表卡片
----
-
-用于展示图表的卡片容器，可以方便的配合其它图表套件展示丰富信息。
-
-````jsx
-import { ChartCard, yuan, Field } from 'ant-design-pro/lib/Charts';
-import Trend from 'ant-design-pro/lib/Trend';
-import { Row, Col, Icon, Tooltip } from 'antd';
-import numeral from 'numeral';
-
-ReactDOM.render(
-  <Row>
-    <Col span={24}>
-      <ChartCard
-        title="销售额"
-        action={<Tooltip title="指标说明"><Icon type="info-circle-o" /></Tooltip>}
-        total={yuan(126560)}
-        footer={<Field label="日均销售额" value={numeral(12423).format('0,0')} />}
-        contentHeight={46}
-      >
-        <span>
-          周同比
-          <Trend flag="up" style={{ marginLeft: 8, color: 'rgba(0,0,0,.85)' }}>12%</Trend>
-        </span>
-        <span style={{ marginLeft: 16 }}>
-          日环比
-          <Trend flag="down" style={{ marginLeft: 8, color: 'rgba(0,0,0,.85)' }}>11%</Trend>
-        </span>
-      </ChartCard>
-    </Col>
-    <Col span={24} style={{ marginTop: 24 }}>
-      <ChartCard
-        title="移动指标"
-        avatar={
-          <img
-            style={{ width: 56, height: 56 }}
-            src="https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png"
-            alt="indicator"
-          />
-        }
-        action={<Tooltip title="指标说明"><Icon type="info-circle-o" /></Tooltip>}
-        total={yuan(126560)}
-        footer={<Field label="日均销售额" value={numeral(12423).format('0,0')} />}
-      />
-    </Col>
-    <Col span={24} style={{ marginTop: 24 }}>
-      <ChartCard
-        title="移动指标"
-        avatar={(
-          <img
-            alt="indicator"
-            style={{ width: 56, height: 56 }}
-            src="https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png"
-          />
-        )}
-        action={<Tooltip title="指标说明"><Icon type="info-circle-o" /></Tooltip>}
-        total={yuan(126560)}
-      />
-    </Col>
-  </Row>
-, mountNode);
-````

src/components/Charts/demo/gauge.md

----
-order: 7
-title: 仪表盘 
----
-
-仪表盘是一种进度展示方式，可以更直观的展示当前的进展情况，通常也可表示占比。
-
-````jsx
-import { Gauge } from 'ant-design-pro/lib/Charts';
-
-ReactDOM.render(
-  <Gauge
-    title="核销率"
-    height={164}
-    percent={87}
-  />
-, mountNode);
-````

src/components/Charts/demo/mini-area.md

----
-order: 2
-col: 2
-title: 迷你区域图
----
-
-````jsx
-import { MiniArea } from 'ant-design-pro/lib/Charts';
-import moment from 'moment';
-
-const visitData = [];
-const beginDay = new Date().getTime();
-for (let i = 0; i < 20; i += 1) {
-  visitData.push({
-    x: moment(new Date(beginDay + (1000 * 60 * 60 * 24 * i))).format('YYYY-MM-DD'),
-    y: Math.floor(Math.random() * 100) + 10,
-  });
-}
-
-ReactDOM.render(
-  <MiniArea
-    line
-    color="#cceafe"
-    height={45}
-    data={visitData}
-  />
-, mountNode);
-````

src/components/Charts/demo/mini-bar.md

----
-order: 2
-col: 2
-title: 迷你柱状图
----
-
-迷你柱状图更适合展示简单的区间数据，简洁的表现方式可以很好的减少大数据量的视觉展现压力。
-
-````jsx
-import { MiniBar } from 'ant-design-pro/lib/Charts';
-import moment from 'moment';
-
-const visitData = [];
-const beginDay = new Date().getTime();
-for (let i = 0; i < 20; i += 1) {
-  visitData.push({
-    x: moment(new Date(beginDay + (1000 * 60 * 60 * 24 * i))).format('YYYY-MM-DD'),
-    y: Math.floor(Math.random() * 100) + 10,
-  });
-}
-
-ReactDOM.render(
-  <MiniBar
-    height={45}
-    data={visitData}
-  />
-, mountNode);
-````

src/components/Charts/demo/mini-pie.md

----
-order: 6
-title: 迷你饼状图
----
-
-通过简化 `Pie` 属性的设置，可以快速的实现极简的饼状图，可配合 `ChartCard` 组合展
-现更多业务场景。
-
-```jsx
-import { Pie } from 'ant-design-pro/lib/Charts';
-
-ReactDOM.render(
-  <Pie percent={28} subTitle="中式快餐" total="28%" height={140} />,
-  mountNode
-);
-```

src/components/Charts/demo/mini-progress.md

----
-order: 3
-title: 迷你进度条
----
-
-````jsx
-import { MiniProgress } from 'ant-design-pro/lib/Charts';
-
-ReactDOM.render(
-  <MiniProgress percent={78} strokeWidth={8} target={80} />
-, mountNode);
-````

src/components/Charts/demo/mix.md

----
-order: 0
-title: 图表套件组合展示
----
-
-利用 Ant Design Pro 提供的图表套件，可以灵活组合符合设计规范的图表来满足复杂的业务需求。
-
-````jsx
-import { ChartCard, Field, MiniArea, MiniBar, MiniProgress } from 'ant-design-pro/lib/Charts';
-import Trend from 'ant-design-pro/lib/Trend';
-import NumberInfo from 'ant-design-pro/lib/NumberInfo';
-import { Row, Col, Icon, Tooltip } from 'antd';
-import numeral from 'numeral';
-import moment from 'moment';
-
-const visitData = [];
-const beginDay = new Date().getTime();
-for (let i = 0; i < 20; i += 1) {
-  visitData.push({
-    x: moment(new Date(beginDay + (1000 * 60 * 60 * 24 * i))).format('YYYY-MM-DD'),
-    y: Math.floor(Math.random() * 100) + 10,
-  });
-}
-
-ReactDOM.render(
-  <Row>
-    <Col span={24}>
-      <ChartCard
-        title="搜索用户数量"
-        contentHeight={134}
-      >
-        <NumberInfo
-          subTitle={<span>本周访问</span>}
-          total={numeral(12321).format('0,0')}
-          status="up"
-          subTotal={17.1}
-        />
-        <MiniArea
-          line
-          height={45}
-          data={visitData}
-        />
-      </ChartCard>
-    </Col>
-    <Col span={24} style={{ marginTop: 24 }}>
-      <ChartCard
-        title="访问量"
-        action={<Tooltip title="指标说明"><Icon type="info-circle-o" /></Tooltip>}
-        total={numeral(8846).format('0,0')}
-        footer={<Field label="日访问量" value={numeral(1234).format('0,0')} />}
-        contentHeight={46}
-      >
-        <MiniBar
-          height={46}
-          data={visitData}
-        />
-      </ChartCard>
-    </Col>
-    <Col span={24} style={{ marginTop: 24 }}>
-      <ChartCard
-        title="线上购物转化率"
-        action={<Tooltip title="指标说明"><Icon type="info-circle-o" /></Tooltip>}
-        total="78%"
-        footer={
-          <div>
-            <span>
-              周同比
-              <Trend flag="up" style={{ marginLeft: 8, color: 'rgba(0,0,0,.85)' }}>12%</Trend>
-            </span>
-            <span style={{ marginLeft: 16 }}>
-              日环比
-              <Trend flag="down" style={{ marginLeft: 8, color: 'rgba(0,0,0,.85)' }}>11%</Trend>
-            </span>
-          </div>
-        }
-        contentHeight={46}
-      >
-        <MiniProgress percent={78} strokeWidth={8} target={80} />
-      </ChartCard>
-    </Col>
-  </Row>
-, mountNode);
-````

src/components/Charts/demo/pie.md

----
-order: 5
-title: 饼状图
----
-
-````jsx
-import { Pie, yuan } from 'ant-design-pro/lib/Charts';
-
-const salesPieData = [
-  {
-    x: '家用电器',
-    y: 4544,
-  },
-  {
-    x: '食用酒水',
-    y: 3321,
-  },
-  {
-    x: '个护健康',
-    y: 3113,
-  },
-  {
-    x: '服饰箱包',
-    y: 2341,
-  },
-  {
-    x: '母婴产品',
-    y: 1231,
-  },
-  {
-    x: '其他',
-    y: 1231,
-  },
-];
-
-ReactDOM.render(
-  <Pie
-    hasLegend
-    title="销售额"
-    subTitle="销售额"
-    total={yuan(salesPieData.reduce((pre, now) => now.y + pre, 0))}
-    data={salesPieData}
-    valueFormat={val => yuan(val)}
-    height={294}
-  />
-, mountNode);
-````

src/components/Charts/demo/radar.md

----
-order: 7
-title: 雷达图
----
-
-````jsx
-import { Radar, ChartCard } from 'ant-design-pro/lib/Charts';
-
-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],
-      });
-    }
-  });
-});
-
-ReactDOM.render(
-  <ChartCard title="数据比例">
-    <Radar
-      hasLegend
-      height={286}
-      data={radarData}
-    />
-  </ChartCard>
-, mountNode);
-````

src/components/Charts/demo/tag-cloud.md

----
-order: 9
-title: 标签云
----
-
-标签云是一套相关的标签以及与此相应的权重展示方式，一般典型的标签云有 30 至 150 个标签，而权重影响使用的字体大小或其他视觉效果。
-
-````jsx
-import { TagCloud } from 'ant-design-pro/lib/Charts';
-
-const tags = [];
-for (let i = 0; i < 50; i += 1) {
-  tags.push({
-    name: `TagClout-Title-${i}`,
-    value: Math.floor((Math.random() * 50)) + 20,
-  });
-}
-
-ReactDOM.render(
-  <TagCloud
-    data={tags}
-    height={200}
-  />
-, mountNode);
-````

src/components/Charts/demo/timeline-chart.md

----
-order: 9
-title: 带有时间轴的图表
----
-
-使用 `TimelineChart` 组件可以实现带有时间轴的柱状图展现，而其中的 `x` 属性，则是时间值的指向，默认最多支持同时展现两个指标，分别是 `y1` 和 `y2`。
-
-````jsx
-import { TimelineChart } from 'ant-design-pro/lib/Charts';
-
-const chartData = [];
-for (let i = 0; i < 20; i += 1) {
-  chartData.push({
-    x: (new Date().getTime()) + (1000 * 60 * 30 * i),
-    y1: Math.floor(Math.random() * 100) + 1000,
-    y2: Math.floor(Math.random() * 100) + 10,
-  });
-}
-
-ReactDOM.render(
-  <TimelineChart
-    height={200}
-    data={chartData}
-    titleMap={{ y1: '客流量', y2: '支付笔数' }}
-  />
-, mountNode);
-````

src/components/Charts/demo/waterwave.md

----
-order: 8
-title: 水波图 
----
-
-水波图是一种比例的展示方式，可以更直观的展示关键值的占比。
-
-````jsx
-import { WaterWave } from 'ant-design-pro/lib/Charts';
-
-ReactDOM.render(
-  <div style={{ textAlign: 'center' }}>
-    <WaterWave
-      height={161}
-      title="补贴资金剩余"
-      percent={34}
-    />
-  </div>
-, mountNode);
-````

src/components/Charts/equal.js

-/* eslint eqeqeq: 0 */
-
-function equal(old, target) {
-  let r = true;
-  for (const prop in old) {
-    if (typeof old[prop] === 'function' && typeof target[prop] === 'function') {
-      if (old[prop].toString() != target[prop].toString()) {
-        r = false;
-      }
-    } else if (old[prop] != target[prop]) {
-      r = false;
-    }
-  }
-  return r;
-}
-
-export default equal;

src/components/Charts/index.d.ts

-export { default as numeral } from "numeral";
-export { default as ChartCard } from "./ChartCard";
-export { default as Bar } from "./Bar";
-export { default as Pie } from "./Pie";
-export { default as Radar } from "./Radar";
-export { default as Gauge } from "./Gauge";
-export { default as MiniArea } from "./MiniArea";
-export { default as MiniBar } from "./MiniBar";
-export { default as MiniProgress } from "./MiniProgress";
-export { default as Field } from "./Field";
-export { default as WaterWave } from "./WaterWave";
-export { default as TagCloud } from "./TagCloud";
-export { default as TimelineChart } from "./TimelineChart";
-
-declare const yuan: (value: number | string) => string;
-
-export { yuan };

src/components/Charts/index.js

-import numeral from 'numeral';
-import ChartCard from './ChartCard';
-import Bar from './Bar';
-import Pie from './Pie';
-import Radar from './Radar';
-import Gauge from './Gauge';
-import MiniArea from './MiniArea';
-import MiniBar from './MiniBar';
-import MiniProgress from './MiniProgress';
-import Field from './Field';
-import WaterWave from './WaterWave';
-import TagCloud from './TagCloud';
-import TimelineChart from './TimelineChart';
-
-const yuan = val => `¥ ${numeral(val).format('0,0')}`;
-
-export {
-  yuan,
-  Bar,
-  Pie,
-  Gauge,
-  Radar,
-  MiniBar,
-  MiniArea,
-  MiniProgress,
-  ChartCard,
-  Field,
-  WaterWave,
-  TagCloud,
-  TimelineChart,
-};

src/components/Charts/index.less

-.miniChart {
-  position: relative;
-  width: 100%;
-  .chartContent {
-    position: absolute;
-    bottom: -34px;
-    width: 100%;
-    & > div {
-      margin: 0 -5px;
-      overflow: hidden;
-    }
-  }
-  .chartLoading {
-    position: absolute;
-    top: 16px;
-    left: 50%;
-    margin-left: -7px;
-  }
-}

src/components/Charts/index.md

----
-title: 
-  en-US: Charts
-  zh-CN: Charts
-subtitle: 图表
-order: 2
-cols: 2
----
-
-Ant Design Pro 提供的业务中常用的图表类型，都是基于 [G2](https://antv.alipay.com/g2/doc/index.html) 按照 Ant Design 图表规范封装，需要注意的是 Ant Design Pro 的图表组件以套件形式提供，可以任意组合实现复杂的业务需求。
-
-因为结合了 Ant Design 的标准设计，本着极简的设计思想以及开箱即用的理念，简化了大量 API 配置，所以如果需要灵活定制图表，可以参考 Ant Design Pro 图表实现，自行基于 [G2](https://antv.alipay.com/g2/doc/index.html) 封装图表组件使用。
-
-## API
-
-### ChartCard
-
-| 参数      | 说明                                      | 类型         | 默认值 |
-|----------|------------------------------------------|-------------|-------|
-| title | 卡片标题 | ReactNode\|string | - |
-| action | 卡片操作 | ReactNode | - |
-| total | 数据总量 | ReactNode \| number | - |
-| footer | 卡片底部 | ReactNode | - |
-| contentHeight | 内容区域高度 | number | - |
-| avatar | 右侧图标 | React.ReactNode | - |
-### MiniBar
-
-| 参数      | 说明                                      | 类型         | 默认值 |
-|----------|------------------------------------------|-------------|-------|
-| color | 图表颜色 | string | `#1890FF` |
-| height | 图表高度 | number | - |
-| data | 数据 | array<{x, y}> | - |
-
-### MiniArea
-
-| 参数      | 说明                                      | 类型         | 默认值 |
-|----------|------------------------------------------|-------------|-------|
-| color | 图表颜色 | string | `rgba(24, 144, 255, 0.2)` |
-| borderColor | 图表边颜色 | string | `#1890FF` |
-| height | 图表高度 | number | - |
-| line | 是否显示描边 | boolean | false |
-| animate | 是否显示动画 | boolean | true |
-| xAxis | [x 轴配置](http://antvis.github.io/g2/doc/tutorial/start/axis.html) | object | - |
-| yAxis | [y 轴配置](http://antvis.github.io/g2/doc/tutorial/start/axis.html) | object | - |
-| data | 数据 | array<{x, y}> | - |
-
-### MiniProgress
-
-| 参数      | 说明                                      | 类型         | 默认值 |
-|----------|------------------------------------------|-------------|-------|
-| target | 目标比例 | number | - |
-| color | 进度条颜色 | string | - |
-| strokeWidth | 进度条高度 | number | - |
-| percent | 进度比例 | number | - |
-
-### Bar
-
-| 参数      | 说明                                      | 类型         | 默认值 |
-|----------|------------------------------------------|-------------|-------|
-| title | 图表标题 | ReactNode\|string | - |
-| color | 图表颜色 | string | `rgba(24, 144, 255, 0.85)` |
-| margin | 图表内部间距 | array | \[32, 0, 32, 40\] |
-| height | 图表高度 | number | - |
-| data | 数据 | array<{x, y}> | - |
-| autoLabel | 在宽度不足时，自动隐藏 x 轴的 label | boolean | `true` |
-
-### Pie
-
-| 参数      | 说明                                      | 类型         | 默认值 |
-|----------|------------------------------------------|-------------|-------|
-| animate | 是否显示动画 | boolean | true |
-| color | 图表颜色 | string | `rgba(24, 144, 255, 0.85)` |
-| height | 图表高度 | number | - |
-| hasLegend | 是否显示 legend | boolean | `false` |
-| margin | 图表内部间距 | array | \[24, 0, 24, 0\] |
-| percent | 占比 | number | - |
-| tooltip | 是否显示 tooltip | boolean | true |
-| valueFormat | 显示值的格式化函数 | function | - |
-| title | 图表标题 | ReactNode|string | - |
-| subTitle | 图表子标题 | ReactNode|string | - |
-| total | 图标中央的总数 | string | - |
-
-### Radar
-
-| 参数      | 说明                                      | 类型         | 默认值 |
-|----------|------------------------------------------|-------------|-------|
-| title | 图表标题 | ReactNode\|string | - |
-| height | 图表高度 | number | - |
-| hasLegend | 是否显示 legend | boolean | `false` |
-| margin | 图表内部间距 | array | \[24, 30, 16, 30\] |
-| data | 图标数据 | array<{name,label,value}> | - |
-
-### Gauge
-
-| 参数      | 说明                                      | 类型         | 默认值 |
-|----------|------------------------------------------|-------------|-------|
-| title | 图表标题 | ReactNode\|string | - |
-| height | 图表高度 | number | - |
-| color | 图表颜色 | string | `#2F9CFF` |
-| bgColor | 图表背景颜色 | string | `#F0F2F5` |
-| percent | 进度比例 | number | - |
-
-### WaterWave
-
-| 参数      | 说明                                      | 类型         | 默认值 |
-|----------|------------------------------------------|-------------|-------|
-| title | 图表标题 | ReactNode\|string | - |
-| height | 图表高度 | number | - |
-| color | 图表颜色 | string | `#1890FF` |
-| percent | 进度比例 | number | - |
-
-### TagCloud
-
-| 参数      | 说明                                      | 类型         | 默认值 |
-|----------|------------------------------------------|-------------|-------|
-| data | 标题 | Array<name, value\> | - |
-| height | 高度值 | number | - |
-
-### TimelineChart
-
-| 参数      | 说明                                      | 类型         | 默认值 |
-|----------|------------------------------------------|-------------|-------|
-| data | 标题 | Array<x, y1, y2\> | - |
-| titleMap | 指标别名 | Object{y1: '客流量', y2: '支付笔数'} | - |
-| height | 高度值 | number | 400 |
-
-### Field
-
-| 参数      | 说明                                      | 类型         | 默认值 |
-|----------|------------------------------------------|-------------|-------|
-| label | 标题 | ReactNode\|string | - |
-| value | 值 | ReactNode\|string | - |

src/components/CountDown/demo/simple.md

----
-order: 0
-title:
-  zh-CN: 基本
-  en-US: Basic
----
-
-## zh-CN
-
-简单的倒计时组件使用。
-
-## en-US
-
-The simplest usage.
-
-````jsx
-import CountDown from 'ant-design-pro/lib/CountDown';
-
-const targetTime = new Date().getTime() + 3900000;
-
-ReactDOM.render(
-  <CountDown style={{ fontSize: 20 }} target={targetTime} />
-, mountNode);
-````

src/components/CountDown/index.d.ts

-import * as React from "react";
-export interface CountDownProps {
-  format?: (time: number) => void;
-  target: Date | number;
-  onEnd?: () => void;
-  style?: React.CSSProperties;
-}
-
-export default class CountDown extends React.Component<CountDownProps, any> {}

src/components/CountDown/index.en-US.md

----
-title: CountDown
-cols: 1
-order: 3
----
-
-Simple CountDown Component.
-
-## API
-
-| Property | Description | Type | Default |
-|----------|------------------------------------------|-------------|-------|
-| format | Formatter of time | Function(time) |  |
-| target | Target time | Date | - |
-| onEnd |  Countdown to the end callback | funtion | -|

src/components/CountDown/index.js

-import React, { Component } from 'react';
-
-function fixedZero(val) {
-  return val * 1 < 10 ? `0${val}` : val;
-}
-
-class CountDown extends Component {
-  constructor(props) {
-    super(props);
-
-    const { lastTime } = this.initTime(props);
-
-    this.state = {
-      lastTime,
-    };
-  }
-
-  componentDidMount() {
-    this.tick();
-  }
-
-  componentWillReceiveProps(nextProps) {
-    if (this.props.target !== nextProps.target) {
-      clearTimeout(this.timer);
-      const { lastTime } = this.initTime(nextProps);
-      this.setState({
-        lastTime,
-      }, () => {
-        this.tick();
-      });
-    }
-  }
-
-  componentWillUnmount() {
-    clearTimeout(this.timer);
-  }
-
-  timer = 0;
-  interval = 1000;
-  initTime = (props) => {
-    let lastTime = 0;
-    let targetTime = 0;
-    try {
-      if (Object.prototype.toString.call(props.target) === '[object Date]') {
-        targetTime = props.target.getTime();
-      } else {
-        targetTime = new Date(props.target).getTime();
-      }
-    } catch (e) {
-      throw new Error('invalid target prop', e);
-    }
-
-    lastTime = targetTime - new Date().getTime();
-
-    return {
-      lastTime,
-    };
-  }
-  // defaultFormat = time => (
-  //  <span>{moment(time).format('hh:mm:ss')}</span>
-  // );
-  defaultFormat = (time) => {
-    const hours = 60 * 60 * 1000;
-    const minutes = 60 * 1000;
-
-    const h = fixedZero(Math.floor(time / hours));
-    const m = fixedZero(Math.floor((time - (h * hours)) / minutes));
-    const s = fixedZero(Math.floor((time - (h * hours) - (m * minutes)) / 1000));
-    return (
-      <span>{h}:{m}:{s}</span>
-    );
-  }
-  tick = () => {
-    const { onEnd } = this.props;
-    let { lastTime } = this.state;
-
-    this.timer = setTimeout(() => {
-      if (lastTime < this.interval) {
-        clearTimeout(this.timer);
-        this.setState({
-          lastTime: 0,
-        }, () => {
-          if (onEnd) {
-            onEnd();
-          }
-        });
-      } else {
-        lastTime -= this.interval;
-        this.setState({
-          lastTime,
-        }, () => {
-          this.tick();
-        });
-      }
-    }, this.interval);
-  }
-
-  render() {
-    const { format = this.defaultFormat, ...rest } = this.props;
-    const { lastTime } = this.state;
-
-    const result = format(lastTime);
-
-    return (<span {...rest}>{result}</span>);
-  }
-}
-
-export default CountDown;

src/components/CountDown/index.zh-CN.md

----
-title: CountDown 
-subtitle: 倒计时
-cols: 1
-order: 3
----
-
-倒计时组件。
-
-## API
-
-| 参数      | 说明                                      | 类型         | 默认值 |
-|----------|------------------------------------------|-------------|-------|
-| format | 时间格式化显示 | Function(time) |  |
-| target | 目标时间 | Date | - |
-| onEnd |  倒计时结束回调 | funtion | -|

src/components/DescriptionList/Description.js

-import React from 'react';
-import classNames from 'classnames';
-import { Col } from 'antd';
-import styles from './index.less';
-import responsive from './responsive';
-
-const Description = ({ term, column, className, children, ...restProps }) => {
-  const clsString = classNames(styles.description, className);
-  return (
-    <Col className={clsString} {...responsive[column]} {...restProps}>
-      {term && <div className={styles.term}>{term}</div>}
-      {children && <div className={styles.detail}>{children}</div>}
-    </Col>
-  );
-};
-
-export default Description;

src/components/DescriptionList/DescriptionList.js

-import React from 'react';
-import classNames from 'classnames';
-import { Row } from 'antd';
-import styles from './index.less';
-
-export default ({ className, title, col = 3, layout = 'horizontal', gutter = 32,
-  children, size, ...restProps }) => {
-  const clsString = classNames(styles.descriptionList, styles[layout], className, {
-    [styles.descriptionListSmall]: size === 'small',
-    [styles.descriptionListLarge]: size === 'large',
-  });
-  const column = col > 4 ? 4 : col;
-  return (
-    <div className={clsString} {...restProps}>
-      {title ? <div className={styles.title}>{title}</div> : null}
-      <Row gutter={gutter}>
-        {React.Children.map(children, child => React.cloneElement(child, { column }))}
-      </Row>
-    </div>
-  );
-};

src/components/DescriptionList/demo/basic.md

----
-order: 0
-title: Basic
----
-
-基本描述列表。
-
-````jsx
-import DescriptionList from 'ant-design-pro/lib/DescriptionList';
-
-const { Description } = DescriptionList;
-
-ReactDOM.render(
-  <DescriptionList size="large" title="title">
-    <Description term="Firefox">
-      A free, open source, cross-platform,
-      graphical web browser developed by the
-      Mozilla Corporation and hundreds of
-      volunteers.
-    </Description>
-    <Description term="Firefox">
-      A free, open source, cross-platform,
-      graphical web browser developed by the
-      Mozilla Corporation and hundreds of
-      volunteers.
-    </Description>
-    <Description term="Firefox">
-      A free, open source, cross-platform,
-      graphical web browser developed by the
-      Mozilla Corporation and hundreds of
-      volunteers.
-    </Description>
-  </DescriptionList>
-, mountNode);
-````

src/components/DescriptionList/demo/vertical.md

----
-order: 1
-title: Vertical
----
-
-垂直布局。
-
-````jsx
-import DescriptionList from 'ant-design-pro/lib/DescriptionList';
-
-const { Description } = DescriptionList;
-
-ReactDOM.render(
-  <DescriptionList size="large" title="title" layout="vertical">
-    <Description term="Firefox">
-      A free, open source, cross-platform,
-      graphical web browser developed by the
-      Mozilla Corporation and hundreds of
-      volunteers.
-    </Description>
-    <Description term="Firefox">
-      A free, open source, cross-platform,
-      graphical web browser developed by the
-      Mozilla Corporation and hundreds of
-      volunteers.
-    </Description>
-    <Description term="Firefox">
-      A free, open source, cross-platform,
-      graphical web browser developed by the
-      Mozilla Corporation and hundreds of
-      volunteers.
-    </Description>
-  </DescriptionList>
-, mountNode);
-````