init pro blockadvanced profile

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

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

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

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

+import React from 'react';
+import { FormattedMessage } from 'umi/locale';
+import Link from 'umi/link';
+import PageHeader from 'ant-design-pro/lib/PageHeader';
+import { connect } from 'dva';
+import GridContent from './GridContent';
+import styles from './index.less';
+import MenuContext from '@/layouts/MenuContext';
+
+const PageHeaderWrapper = ({ children, contentWidth, wrapperClassName, top, ...restProps }) => (
+  <div style={{ margin: '-24px -24px 0' }} className={wrapperClassName}>
+    {top}
+    <MenuContext.Consumer>
+      {value => (
+        <PageHeader
+          wide={contentWidth === 'Fixed'}
+          home={<FormattedMessage id="menu.home" defaultMessage="Home" />}
+          {...value}
+          key="pageheader"
+          {...restProps}
+          linkElement={Link}
+          itemRender={item => {
+            if (item.locale) {
+              return <FormattedMessage id={item.locale} defaultMessage={item.title} />;
+            }
+            return item.title;
+          }}
+        />
+      )}
+    </MenuContext.Consumer>
+    {children ? (
+      <div className={styles.content}>
+        <GridContent>{children}</GridContent>
+      </div>
+    ) : null}
+  </div>
+);
+
+export default connect(({ setting }) => ({
+  contentWidth: setting.contentWidth,
+}))(PageHeaderWrapper);

+@import '~antd/lib/style/themes/default.less';
+
+.content {
+  margin: 24px 24px 0;
+}
+
+@media screen and (max-width: @screen-sm) {
+  .content {
+    margin: 24px 0 0;
+  }
+}

+import { createContext } from 'react';
+
+export default createContext();

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

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

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

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

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

+@import '~antd/lib/style/themes/default.less';
+
+.headerList {
+  margin-bottom: 4px;
+}
+
+.tabsCard {
+  :global {
+    .ant-card-head {
+      padding: 0 16px;
+    }
+  }
+}
+
+.noData {
+  color: @disabled-color;
+  text-align: center;
+  line-height: 64px;
+  font-size: 16px;
+  i {
+    font-size: 24px;
+    margin-right: 16px;
+    position: relative;
+    top: 3px;
+  }
+}
+
+.heading {
+  color: @heading-color;
+  font-size: 20px;
+}
+
+.stepDescription {
+  font-size: 14px;
+  position: relative;
+  left: 38px;
+  padding-top: 8px;
+  text-align: left;
+
+  > div {
+    margin-top: 8px;
+    margin-bottom: 4px;
+  }
+}
+
+.textSecondary {
+  color: @text-color-secondary;
+}
+
+@media screen and (max-width: @screen-sm) {
+  .stepDescription {
+    left: 8px;
+  }
+}

+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: '-',
+  },
+];
+
+const getProfileBasicData = {
+  basicGoods,
+  basicProgress,
+};
+
+const getProfileAdvancedData = {
+  advancedOperation1,
+  advancedOperation2,
+  advancedOperation3,
+};
+
+export default {
+  'GET /api/profile/advanced': getProfileAdvancedData,
+  'GET /api/profile/basic': getProfileBasicData,
+};

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

+import React, { Component, Fragment } from 'react';
+import Debounce from 'lodash-decorators/debounce';
+import Bind from 'lodash-decorators/bind';
+import { connect } from 'dva';
+import {
+  Button,
+  Menu,
+  Dropdown,
+  Icon,
+  Row,
+  Col,
+  Steps,
+  Card,
+  Popover,
+  Badge,
+  Table,
+  Tooltip,
+  Divider,
+} from 'antd';
+import classNames from 'classnames';
+import DescriptionList from 'ant-design-pro/lib/DescriptionList';
+import PageHeaderWrapper from '@/components/PageHeaderWrapper';
+import styles from './AdvancedProfile.less';
+
+const { Step } = Steps;
+const { Description } = DescriptionList;
+const ButtonGroup = Button.Group;
+
+const getWindowWidth = () => window.innerWidth || document.documentElement.clientWidth;
+
+const menu = (
+  <Menu>
+    <Menu.Item key="1">选项一</Menu.Item>
+    <Menu.Item key="2">选项二</Menu.Item>
+    <Menu.Item key="3">选项三</Menu.Item>
+  </Menu>
+);
+
+const action = (
+  <Fragment>
+    <ButtonGroup>
+      <Button>操作</Button>
+      <Button>操作</Button>
+      <Dropdown overlay={menu} placement="bottomRight">
+        <Button>
+          <Icon type="ellipsis" />
+        </Button>
+      </Dropdown>
+    </ButtonGroup>
+    <Button type="primary">主操作</Button>
+  </Fragment>
+);
+
+const extra = (
+  <Row>
+    <Col xs={24} sm={12}>
+      <div className={styles.textSecondary}>状态</div>
+      <div className={styles.heading}>待审批</div>
+    </Col>
+    <Col xs={24} sm={12}>
+      <div className={styles.textSecondary}>订单金额</div>
+      <div className={styles.heading}>¥ 568.08</div>
+    </Col>
+  </Row>
+);
+
+const description = (
+  <DescriptionList className={styles.headerList} size="small" col="2">
+    <Description term="创建人">曲丽丽</Description>
+    <Description term="订购产品">XX 服务</Description>
+    <Description term="创建时间">2017-07-07</Description>
+    <Description term="关联单据">
+      <a href="">12421</a>
+    </Description>
+    <Description term="生效日期">2017-07-07 ~ 2017-08-08</Description>
+    <Description term="备注">请于两个工作日内确认</Description>
+  </DescriptionList>
+);
+
+const tabList = [
+  {
+    key: 'detail',
+    tab: '详情',
+  },
+  {
+    key: 'rule',
+    tab: '规则',
+  },
+];
+
+const desc1 = (
+  <div className={classNames(styles.textSecondary, styles.stepDescription)}>
+    <Fragment>
+      曲丽丽
+      <Icon type="dingding-o" style={{ marginLeft: 8 }} />
+    </Fragment>
+    <div>2016-12-12 12:32</div>
+  </div>
+);
+
+const desc2 = (
+  <div className={styles.stepDescription}>
+    <Fragment>
+      周毛毛
+      <Icon type="dingding-o" style={{ color: '#00A0E9', marginLeft: 8 }} />
+    </Fragment>
+    <div>
+      <a href="">催一下</a>
+    </div>
+  </div>
+);
+
+const popoverContent = (
+  <div style={{ width: 160 }}>
+    吴加号
+    <span className={styles.textSecondary} style={{ float: 'right' }}>
+      <Badge status="default" text={<span style={{ color: 'rgba(0, 0, 0, 0.45)' }}>未响应</span>} />
+    </span>
+    <div className={styles.textSecondary} style={{ marginTop: 4 }}>
+      耗时：2小时25分钟
+    </div>
+  </div>
+);
+
+const customDot = (dot, { status }) =>
+  status === 'process' ? (
+    <Popover placement="topLeft" arrowPointAtCenter content={popoverContent}>
+      {dot}
+    </Popover>
+  ) : (
+    dot
+  );
+
+const operationTabList = [
+  {
+    key: 'tab1',
+    tab: '操作日志一',
+  },
+  {
+    key: 'tab2',
+    tab: '操作日志二',
+  },
+  {
+    key: 'tab3',
+    tab: '操作日志三',
+  },
+];
+
+const columns = [
+  {
+    title: '操作类型',
+    dataIndex: 'type',
+    key: 'type',
+  },
+  {
+    title: '操作人',
+    dataIndex: 'name',
+    key: 'name',
+  },
+  {
+    title: '执行结果',
+    dataIndex: 'status',
+    key: 'status',
+    render: text =>
+      text === 'agree' ? (
+        <Badge status="success" text="成功" />
+      ) : (
+        <Badge status="error" text="驳回" />
+      ),
+  },
+  {
+    title: '操作时间',
+    dataIndex: 'updatedAt',
+    key: 'updatedAt',
+  },
+  {
+    title: '备注',
+    dataIndex: 'memo',
+    key: 'memo',
+  },
+];
+
+@connect(({ profile, loading }) => ({
+  profile,
+  loading: loading.effects['profile/fetchAdvanced'],
+}))
+class AdvancedProfile extends Component {
+  state = {
+    operationkey: 'tab1',
+    stepDirection: 'horizontal',
+  };
+
+  componentDidMount() {
+    const { dispatch } = this.props;
+    dispatch({
+      type: 'profile/fetchAdvanced',
+    });
+
+    this.setStepDirection();
+    window.addEventListener('resize', this.setStepDirection, { passive: true });
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.setStepDirection);
+    this.setStepDirection.cancel();
+  }
+
+  onOperationTabChange = key => {
+    this.setState({ operationkey: key });
+  };
+
+  @Bind()
+  @Debounce(200)
+  setStepDirection() {
+    const { stepDirection } = this.state;
+    const w = getWindowWidth();
+    if (stepDirection !== 'vertical' && w <= 576) {
+      this.setState({
+        stepDirection: 'vertical',
+      });
+    } else if (stepDirection !== 'horizontal' && w > 576) {
+      this.setState({
+        stepDirection: 'horizontal',
+      });
+    }
+  }
+
+  render() {
+    const { stepDirection, operationkey } = this.state;
+    const { profile, loading } = this.props;
+    const { advancedOperation1, advancedOperation2, advancedOperation3 } = profile;
+    const contentList = {
+      tab1: (
+        <Table
+          pagination={false}
+          loading={loading}
+          dataSource={advancedOperation1}
+          columns={columns}
+        />
+      ),
+      tab2: (
+        <Table
+          pagination={false}
+          loading={loading}
+          dataSource={advancedOperation2}
+          columns={columns}
+        />
+      ),
+      tab3: (
+        <Table
+          pagination={false}
+          loading={loading}
+          dataSource={advancedOperation3}
+          columns={columns}
+        />
+      ),
+    };
+
+    return (
+      <PageHeaderWrapper
+        title="单号：234231029431"
+        logo={
+          <img alt="" src="https://gw.alipayobjects.com/zos/rmsportal/nxkuOJlFJuAUhzlMTCEe.png" />
+        }
+        action={action}
+        content={description}
+        extraContent={extra}
+        tabList={tabList}
+      >
+        <Card title="流程进度" style={{ marginBottom: 24 }} bordered={false}>
+          <Steps direction={stepDirection} progressDot={customDot} current={1}>
+            <Step title="创建项目" description={desc1} />
+            <Step title="部门初审" description={desc2} />
+            <Step title="财务复核" />
+            <Step title="完成" />
+          </Steps>
+        </Card>
+        <Card title="用户信息" style={{ marginBottom: 24 }} bordered={false}>
+          <DescriptionList style={{ marginBottom: 24 }}>
+            <Description term="用户姓名">付小小</Description>
+            <Description term="会员卡号">32943898021309809423</Description>
+            <Description term="身份证">3321944288191034921</Description>
+            <Description term="联系方式">18112345678</Description>
+            <Description term="联系地址">
+              曲丽丽 18100000000 浙江省杭州市西湖区黄姑山路工专路交叉路口
+            </Description>
+          </DescriptionList>
+          <DescriptionList style={{ marginBottom: 24 }} title="信息组">
+            <Description term="某某数据">725</Description>
+            <Description term="该数据更新时间">2017-08-08</Description>
+            <Description>&nbsp;</Description>
+            <Description
+              term={
+                <span>
+                  某某数据
+                  <Tooltip title="数据说明">
+                    <Icon
+                      style={{ color: 'rgba(0, 0, 0, 0.43)', marginLeft: 4 }}
+                      type="info-circle-o"
+                    />
+                  </Tooltip>
+                </span>
+              }
+            >
+              725
+            </Description>
+            <Description term="该数据更新时间">2017-08-08</Description>
+          </DescriptionList>
+          <h4 style={{ marginBottom: 16 }}>信息组</h4>
+          <Card type="inner" title="多层级信息组">
+            <DescriptionList size="small" style={{ marginBottom: 16 }} title="组名称">
+              <Description term="负责人">林东东</Description>
+              <Description term="角色码">1234567</Description>
+              <Description term="所属部门">XX公司 - YY部</Description>
+              <Description term="过期时间">2017-08-08</Description>
+              <Description term="描述">
+                这段描述很长很长很长很长很长很长很长很长很长很长很长很长很长很长...
+              </Description>
+            </DescriptionList>
+            <Divider style={{ margin: '16px 0' }} />
+            <DescriptionList size="small" style={{ marginBottom: 16 }} title="组名称" col="1">
+              <Description term="学名">
+                Citrullus lanatus (Thunb.) Matsum. et
+                Nakai一年生蔓生藤本；茎、枝粗壮，具明显的棱。卷须较粗..
+              </Description>
+            </DescriptionList>
+            <Divider style={{ margin: '16px 0' }} />
+            <DescriptionList size="small" title="组名称">
+              <Description term="负责人">付小小</Description>
+              <Description term="角色码">1234568</Description>
+            </DescriptionList>
+          </Card>
+        </Card>
+        <Card title="用户近半年来电记录" style={{ marginBottom: 24 }} bordered={false}>
+          <div className={styles.noData}>
+            <Icon type="frown-o" />
+            暂无数据
+          </div>
+        </Card>
+        <Card
+          className={styles.tabsCard}
+          bordered={false}
+          tabList={operationTabList}
+          onTabChange={this.onOperationTabChange}
+        >
+          {contentList[operationkey]}
+        </Card>
+      </PageHeaderWrapper>
+    );
+  }
+}
+
+export default AdvancedProfile;

+import { queryBasicProfile, queryAdvancedProfile } from '@/services/api';
+
+export default {
+  namespace: 'profile',
+
+  state: {
+    basicGoods: [],
+    advancedOperation1: [],
+    advancedOperation2: [],
+    advancedOperation3: [],
+  },
+
+  effects: {
+    *fetchBasic(_, { call, put }) {
+      const response = yield call(queryBasicProfile);
+      yield put({
+        type: 'show',
+        payload: response,
+      });
+    },
+    *fetchAdvanced(_, { call, put }) {
+      const response = yield call(queryAdvancedProfile);
+      yield put({
+        type: 'show',
+        payload: response,
+      });
+    },
+  },
+
+  reducers: {
+    show(state, { payload }) {
+      return {
+        ...state,
+        ...payload,
+      };
+    },
+  },
+};

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