merge master

docker/nginx.conf

@@ -4,7 +4,7 @@ server {
     gzip on;
     gzip_min_length 1k;
     gzip_comp_level 9;
-    gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
+    gzip_types text/plain text/css text/javascript application/json application/javascript application/x-javascript application/xml;
     gzip_vary on;
     gzip_disable "MSIE [1-6]\.";
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ant-design-pro",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "description": "An out-of-box UI solution for enterprise applications",
   "private": true,
   "scripts": {
@@ -27,10 +27,10 @@
     "docker-prod:build": "docker-compose -f ./docker/docker-compose.yml build"
   },
   "dependencies": {
-    "@antv/data-set": "^0.9.6",
-    "@babel/runtime": "^7.1.2",
-    "antd": "^3.10.0",
-    "bizcharts": "^3.2.2",
+    "@antv/data-set": "^0.10.0",
+    "@babel/runtime": "^7.1.5",
+    "antd": "^3.10.7",
+    "bizcharts": "^3.2.5-beta.4",
     "bizcharts-plugin-slider": "^2.0.3",
     "classnames": "^2.2.6",
     "dva": "^2.4.0",
@@ -58,7 +58,7 @@
   "devDependencies": {
     "@types/react": "^16.4.16",
     "@types/react-dom": "^16.0.9",
-    "antd-pro-merge-less": "^0.0.9",
+    "antd-pro-merge-less": "^0.2.0",
     "antd-theme-webpack-plugin": "^1.1.8",
     "babel-eslint": "^10.0.1",
     "cross-env": "^5.1.1",
@@ -73,25 +73,25 @@
     "eslint-plugin-jsx-a11y": "^6.1.2",
     "eslint-plugin-markdown": "^1.0.0-beta.6",
     "eslint-plugin-react": "^7.11.1",
-    "tslint": "^5.10.0",
-    "tslint-config-prettier": "^1.10.0",
-    "tslint-react": "^3.6.0",
     "gh-pages": "^2.0.1",
     "husky": "^1.1.2",
-    "lint-staged": "^7.2.0",
+    "lint-staged": "^8.0.4",
     "merge-umi-mock-data": "^0.0.3",
     "mockjs": "^1.0.1-beta3",
-    "prettier": "1.14.3",
+    "prettier": "1.15.2",
     "pro-download": "^1.0.1",
     "stylelint": "^9.4.0",
     "stylelint-config-prettier": "^4.0.0",
     "stylelint-config-standard": "^18.0.0",
+    "tslint": "^5.10.0",
+    "tslint-config-prettier": "^1.10.0",
+    "tslint-react": "^3.6.0",
     "umi": "^2.2.1",
     "umi-plugin-ga": "^1.1.3",
     "umi-plugin-react": "^1.2.0"
   },
   "optionalDependencies": {
-    "puppeteer": "^1.9.0"
+    "puppeteer": "^1.10.0"
   },
   "lint-staged": {
     "**/*.{js,jsx,less}": [

src/components/Charts/Field/index.js

@@ -4,8 +4,8 @@ import styles from './index.less';
 
 const Field = ({ label, value, ...rest }) => (
   <div className={styles.field} {...rest}>
-    <span>{label}</span>
-    <span>{value}</span>
+    <span className={styles.label}>{label}</span>
+    <span className={styles.number}>{value}</span>
   </div>
 );
 

src/components/Charts/Field/index.less

@@ -5,12 +5,13 @@
   overflow: hidden;
   text-overflow: ellipsis;
   margin: 0;
-  span {
+  .label,
+  .number {
     font-size: @font-size-base;
     line-height: 22px;
   }
-  span:last-child {
-    margin-left: 8px;
+  .number {
     color: @heading-color;
+    margin-left: 8px;
   }
 }

src/components/Charts/Gauge/index.js

@@ -72,7 +72,7 @@ class Gauge extends React.Component {
         nice: true,
       },
     };
-    const data = [{ value: percent }];
+    const data = [{ value: percent / 10 }];
     return (
       <Chart height={height} data={data} scale={cols} padding={[-16, 0, 16, 0]} forceFit={forceFit}>
         <Coord type="polar" startAngle={-1.25 * Math.PI} endAngle={0.25 * Math.PI} radius={0.8} />
@@ -134,7 +134,7 @@ class Gauge extends React.Component {
           <Arc
             zIndex={1}
             start={[0, 0.965]}
-            end={[data[0].value / 10, 0.965]}
+            end={[data[0].value, 0.965]}
             style={{
               stroke: color,
               lineWidth: 10,
@@ -146,7 +146,7 @@ class Gauge extends React.Component {
                 <div style="width: 300px;text-align: center;font-size: 12px!important;">
                   <p style="font-size: 14px; color: rgba(0,0,0,0.43);margin: 0;">${title}</p>
                   <p style="font-size: 24px;color: rgba(0,0,0,0.85);margin: 0;">
-                    ${data[0].value}%
+                    ${data[0].value * 10}%
                   </p>
                 </div>`}
           />

src/components/Ellipsis/index.d.ts

@@ -1,6 +1,13 @@
 import * as React from 'react';
+import { TooltipProps } from 'antd/lib/tooltip';
+
+export interface IEllipsisTooltipProps extends TooltipProps {
+  title?: undefined;
+  overlayStyle?: undefined;
+}
+
 export interface IEllipsisProps {
-  tooltip?: boolean;
+  tooltip?: boolean | IEllipsisTooltipProps;
   length?: number;
   lines?: number;
   style?: React.CSSProperties;

src/components/Ellipsis/index.js

@@ -38,6 +38,14 @@ export const cutStrByFullLength = (str = '', maxLength) => {
   }, '');
 };
 
+const getTooltip = ({ tooltip, overlayStyle, title, children }) => {
+  if (tooltip) {
+    const props = tooltip === true ? { overlayStyle, title } : { ...tooltip, overlayStyle, title };
+    return <Tooltip {...props}>{children}</Tooltip>;
+  }
+  return children;
+};
+
 const EllipsisText = ({ text, length, tooltip, fullWidthRecognition, ...other }) => {
   if (typeof text !== 'string') {
     throw new Error('Ellipsis children must be string.');
@@ -54,23 +62,18 @@ const EllipsisText = ({ text, length, tooltip, fullWidthRecognition, ...other })
     displayText = fullWidthRecognition ? cutStrByFullLength(text, length) : text.slice(0, length);
   }
 
-  if (tooltip) {
-    return (
-      <Tooltip overlayStyle={TooltipOverlayStyle} title={text}>
-        <span>
-          {displayText}
-          {tail}
-        </span>
-      </Tooltip>
-    );
-  }
-
-  return (
-    <span {...other}>
-      {displayText}
-      {tail}
-    </span>
-  );
+  const spanAttrs = tooltip ? {} : { ...other };
+  return getTooltip({
+    tooltip,
+    overlayStyle: TooltipOverlayStyle,
+    title: text,
+    children: (
+      <span {...spanAttrs}>
+        {displayText}
+        {tail}
+      </span>
+    ),
+  });
 };
 
 export default class Ellipsis extends Component {
@@ -230,13 +233,12 @@ export default class Ellipsis extends Component {
         </div>
       );
 
-      return tooltip ? (
-        <Tooltip overlayStyle={TooltipOverlayStyle} title={children}>
-          {node}
-        </Tooltip>
-      ) : (
-        node
-      );
+      return getTooltip({
+        tooltip,
+        overlayStyle: TooltipOverlayStyle,
+        title: children,
+        children: node,
+      });
     }
 
     const childNode = (
@@ -249,13 +251,12 @@ export default class Ellipsis extends Component {
     return (
       <div {...restProps} ref={this.handleRoot} className={cls}>
         <div ref={this.handleContent}>
-          {tooltip ? (
-            <Tooltip overlayStyle={TooltipOverlayStyle} title={text}>
-              {childNode}
-            </Tooltip>
-          ) : (
-            childNode
-          )}
+          {getTooltip({
+            tooltip,
+            overlayStyle: TooltipOverlayStyle,
+            title: text,
+            children: childNode,
+          })}
           <div className={styles.shadow} ref={this.handleShadowChildren}>
             {children}
           </div>

src/components/Exception/index.d.ts

@@ -5,7 +5,7 @@ export interface IExceptionProps {
   desc?: React.ReactNode;
   img?: string;
   actions?: React.ReactNode;
-  linkElement?: React.ReactNode;
+  linkElement?: string | React.ComponentType;
   style?: React.CSSProperties;
   className?: string;
   backText?: React.ReactNode;

src/components/Login/LoginItem.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import { Form, Input, Button, Row, Col } from 'antd';
+import { formatMessage } from 'umi/locale';
 import omit from 'omit.js';
 import styles from './index.less';
 import ItemMap from './map';
@@ -9,7 +10,8 @@ const FormItem = Form.Item;
 
 class WrapFormItem extends Component {
   static defaultProps = {
-    buttonText: '获取验证码',
+    getCaptchaButtonText: formatMessage({ id: 'form.captcha' }),
+    getCaptchaSecondText: formatMessage({ id: 'form.captcha.second' }),
   };
 
   constructor(props) {
@@ -83,7 +85,8 @@ class WrapFormItem extends Component {
       defaultValue,
       rules,
       name,
-      buttonText,
+      getCaptchaButtonText,
+      getCaptchaSecondText,
       updateActive,
       type,
       ...restProps
@@ -108,7 +111,7 @@ class WrapFormItem extends Component {
                 size="large"
                 onClick={this.onGetCaptcha}
               >
-                {count ? `${count} s` : buttonText}
+                {count ? `${count} ${getCaptchaSecondText}` : getCaptchaButtonText}
               </Button>
             </Col>
           </Row>

src/components/Login/index.less

@@ -13,6 +13,11 @@
     }
   }
 
+  .getCaptcha {
+    display: block;
+    width: 100%;
+  }
+
   .icon {
     font-size: 24px;
     color: rgba(0, 0, 0, 0.2);

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

@@ -21,6 +21,7 @@ popupAlign | 弹出卡片的位置配置 | Object [alignConfig](https://github.c
 onPopupVisibleChange | 弹出卡片显隐的回调 | function(visible) | -
 popupVisible | 控制弹层显隐 | boolean | -
 locale | 默认文案 | Object | `{ emptyText: '暂无数据', clear: '清空' }`
+clearClose | 点击清空按钮后关闭通知菜单 | boolean | false
 
 ### NoticeIcon.Tab
 
@@ -43,3 +44,4 @@ title | 标题 | ReactNode | -
 description | 描述信息 | ReactNode | -
 datetime | 时间戳 | ReactNode | -
 extra | 额外信息，在列表项右上角 | ReactNode | -
+clickClose | 点击列表项关闭通知菜单 | boolean | false

src/components/SiderMenu/SiderMenu.js

@@ -118,7 +118,7 @@ export default class SiderMenu extends PureComponent {
           mode="inline"
           handleOpenChange={this.handleOpenChange}
           onOpenChange={this.handleOpenChange}
-          style={{ padding: '16px 0', width: '100%', overflowX: 'hidden' }}
+          style={{ padding: '16px 0', width: '100%' }}
           {...defaultProps}
         />
       </Sider>

src/components/SiderMenu/index.less

@@ -21,7 +21,7 @@
     vertical-align: middle;
     font-size: 20px;
     margin: 0 0 0 12px;
-    font-family: 'Myriad Pro', 'Helvetica Neue', Arial, Helvetica, sans-serif;
+    font-family: Avenir, 'Helvetica Neue', Arial, Helvetica, sans-serif;
     font-weight: 600;
   }
 }

src/components/Trend/index.js

@@ -14,7 +14,7 @@ const Trend = ({ colorful = true, reverseColor = false, flag, children, classNam
   );
   return (
     <div {...rest} className={classString} title={typeof children === 'string' ? children : ''}>
-      <span className={styles.value}>{children}</span>
+      <span>{children}</span>
       {flag && (
         <span className={styles[flag]}>
           <Icon type={`caret-${flag}`} />

src/e2e/home.e2e.js

@@ -3,13 +3,16 @@ import puppeteer from 'puppeteer';
 const BASE_URL = `http://localhost:${process.env.PORT || 8000}`;
 
 describe('Homepage', () => {
+  beforeAll(async () => {
+    jest.setTimeout(1000000);
+  });
   it('it should have logo text', async () => {
     const browser = await puppeteer.launch({ args: ['--no-sandbox'] });
     const page = await browser.newPage();
     await page.goto(BASE_URL, { waitUntil: 'networkidle2' });
-    await page.waitForSelector('#logo h1');
-    const text = await page.evaluate(() => document.body.innerHTML);
-    expect(text).toContain('<h1>Ant Design Pro</h1>');
+    const text = await page.evaluate(() => document.getElementsByTagName('h1')[0].innerText);
+    expect(text).toContain('Ant Design Pro');
+
     await page.close();
     browser.close();
   });

src/e2e/layout.e2e.js

@@ -28,6 +28,7 @@ describe('Homepage', () => {
   };
 
   beforeAll(async () => {
+    jest.setTimeout(1000000);
     browser = await puppeteer.launch({ args: ['--no-sandbox'] });
     page = await browser.newPage();
   });

src/layouts/UserLayout.less

@@ -32,7 +32,7 @@
   }
 
   .content {
-    padding: 72px 0 24px 0;
+    padding: 32px 0 24px 0;
   }
 }
 
@@ -57,7 +57,7 @@
 .title {
   font-size: 33px;
   color: @heading-color;
-  font-family: 'Myriad Pro', 'Helvetica Neue', Arial, Helvetica, sans-serif;
+  font-family: Avenir, 'Helvetica Neue', Arial, Helvetica, sans-serif;
   font-weight: 600;
   position: relative;
   top: 2px;

src/locales/en-US.js

@@ -20,6 +20,8 @@ export default {
   'validation.date.required': 'Please select the start and end date',
   'validation.goal.required': 'Please enter a description of the goal',
   'validation.standard.required': 'Please enter a metric',
+  'form.captcha': 'Get Captcha',
+  'form.captcha.second': 'sec',
   'form.optional': ' (optional) ',
   'form.submit': 'Submit',
   'form.save': 'Save',

src/locales/pt-BR.js

@@ -16,6 +16,8 @@ export default {
   'validation.phone-number.required': 'Por favor insira seu telefone!',
   'validation.phone-number.wrong-format': 'Formato de telefone errado!',
   'validation.verification-code.required': 'Por favor insira seu código de verificação!',
+  'form.captcha': 'Get Captcha',
+  'form.captcha.second': 'sec',
   'form.email.placeholder': 'Email',
   'form.password.placeholder': 'Senha',
   'form.confirm-password.placeholder': 'Confirme a senha',

src/locales/zh-CN.js

@@ -19,6 +19,8 @@ export default {
   'validation.date.required': '请选择起止日期',
   'validation.goal.required': '请输入目标描述',
   'validation.standard.required': '请输入衡量标准',
+  'form.captcha': '获取验证码',
+  'form.captcha.second': '秒',
   'form.optional': '（选填）',
   'form.submit': '提交',
   'form.save': '保存',

src/locales/zh-TW.js

@@ -19,6 +19,8 @@ export default {
   'validation.date.required': '請選擇起止日期',
   'validation.goal.required': '請輸入目標描述',
   'validation.standard.required': '請輸入衡量標淮',
+  'form.captcha': '獲取驗證碼',
+  'form.captcha.second': '秒',
   'form.optional': '（選填）',
   'form.submit': '提交',
   'form.save': '保存',

src/pages/Dashboard/Monitor.js

@@ -145,7 +145,7 @@ class Monitor extends PureComponent {
           </Col>
         </Row>
         <Row gutter={24}>
-          <Col xl={12} lg={24} sm={24} xs={24}>
+          <Col xl={12} lg={24} sm={24} xs={24} style={{ marginBottom: 24 }}>
             <Card
               title={
                 <FormattedMessage
@@ -201,7 +201,7 @@ class Monitor extends PureComponent {
               </Row>
             </Card>
           </Col>
-          <Col xl={6} lg={12} sm={24} xs={24}>
+          <Col xl={6} lg={12} sm={24} xs={24} style={{ marginBottom: 24 }}>
             <Card
               title={
                 <FormattedMessage
@@ -216,7 +216,7 @@ class Monitor extends PureComponent {
               <TagCloud data={tags} height={161} />
             </Card>
           </Col>
-          <Col xl={6} lg={12} sm={24} xs={24}>
+          <Col xl={6} lg={12} sm={24} xs={24} style={{ marginBottom: 24 }}>
             <Card
               title={
                 <FormattedMessage

src/pages/Dashboard/Monitor.less

@@ -3,7 +3,7 @@
 
 .mapChart {
   padding-top: 24px;
-  height: 457px;
+  height: 452px;
   text-align: center;
   img {
     display: inline-block;

src/pages/User/Login.js

@@ -114,7 +114,7 @@ class LoginPage extends Component {
             <Icon type="alipay-circle" className={styles.icon} theme="outlined" />
             <Icon type="taobao-circle" className={styles.icon} theme="outlined" />
             <Icon type="weibo-circle" className={styles.icon} theme="outlined" />
-            <Link className={styles.register} to="/User/Register">
+            <Link className={styles.register} to="/user/register">
               <FormattedMessage id="app.login.signup" />
             </Link>
           </div>