Merge branch 'master' into feature

2025-01-18 22:36:31 +08:00 · 2018-10-12 19:52:04 +08:00 · 2018-10-12 19:52:04 +08:00 · c8d36568bb
commit c8d36568bb
parent 965fd231b3 ac599a90f2
23 changed files with 183 additions and 32 deletions
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@ -15,6 +15,40 @@ timeline: true

 ---

+## 3.10.1
+
+`2018-10-12`
+
+- 🎉 [Ant Design Mobile of Angular](http://ng.mobile.ant.design/)(NG-ZORRO-Mobile) released!
+- 📝 Upgrade document `Real project with dva` to [Real project with umi](https://ant.design/docs/react/practical-projects).
+- Table
+  - 🐞 Fixed clicking all columns will trigger sort behavior even without `sorter` props. [#12515](https://github.com/ant-design/ant-design/issues/12515)
+  - 🐞 Fixed extra "Sort" title hint of column. [#12613](https://github.com/ant-design/ant-design/issues/12613)
+  - 🐞 Fixed broken style of sort and right-aligned column. [#12552](https://github.com/ant-design/ant-design/issues/12552)
+  - 🐞 Fixed sort not working as expected when `columns` defined in `render`. [#12571](https://github.com/ant-design/ant-design/issues/12571)
+  - 🐞 Fixed sorted column background color of small size Table.
+  - 🐞 Fixed overlap style of Table row selection Checkbox in chrome. [5bef1aa](https://github.com/ant-design/ant-design/commit/5bef1aa6c2e792180ef8d53a1f1489376b8e35db)
+  - 🐞 Fixed broken style of Table inside Form.Item. [#12554](https://github.com/ant-design/ant-design/issues/12554)
+- DatePicker
+  - 🐞 Tweak Italian locale. [#12413](https://github.com/ant-design/ant-design/issues/12413) [@yp](https://github.com/yp)
+  - 🐞 Fixed that picker does not get focused state after select date. [#12475](https://github.com/ant-design/ant-design/issues/12475)
+  - 🐞 Fixed calendar icon missing when use it in Input.Group. [#12536](https://github.com/ant-design/ant-design/issues/12536)
+- 🐞 Fixed Anchor text edge cut problem. [#12520](https://github.com/ant-design/ant-design/issues/12520)
+- 🐞 Fixed that Drawer still cover page even set `mask={false}`. [#12401](https://github.com/ant-design/ant-design/issues/12401)
+- 🐞 Fixed disabled style missing of Input.TextArea when used as custom input in AutoComplete. [#12594](https://github.com/ant-design/ant-design/issues/12594)
+- 🐞 Fixed Modal.confirm `prefixCls` prop not passing to mask element, and changed it's default value to `ant-model-confirm`. [#12546](https://github.com/ant-design/ant-design/issues/12546)
+- 🐞 Fixed an align issue of Input.Group in safari. [#12493](https://github.com/ant-design/ant-design/issues/12493)
+- 🐞 Fixed an align issue of standalone `<Badge />`. [#12419](https://github.com/ant-design/ant-design/issues/12419)
+- 🐞 Fixed inconsistent arugments of `onExpand` when click Tree.DirectoryTree switch icon and tree node. [#12567](https://github.com/ant-design/ant-design/issues/12567)
+- 🐞 Fixed hasFeedback icon unexpected focused state in IE11. [#12524](https://github.com/ant-design/ant-design/pull/12524) [@siyu77](https://github.com/siyu77)
+- 🐞 Fixed multiple Select will trigger `onFocus` and `onBlur` repeatly when click it multiple times. [#12281](https://github.com/ant-design/ant-design/issues/12281) [@Frezc ](https://github.com/Frezc)
+- 🐞 Fixed long text overflow issue of circle type Progress.
+- TypeScript
+  - 🐞 Fixed Steps `labelPlacement` definition. [#12575](https://github.com/ant-design/ant-design/pull/12575) [@yueyes](https://github.com/yueyes)
+  - 🐞 Fixed Select.Option `style` definition. [#12609](https://github.com/ant-design/ant-design/pull/12609) [@dimitropoulos](https://github.com/dimitropoulos)
+  - 🐞 Fixed `form.validateFields` overload order problem. [#12538](https://github.com/ant-design/ant-design/pull/12538) [@TomIsion](https://github.com/TomIsion)
+  - 🐞 Fixed AutoComponent `onFocus` `onBlur` definitions. [#12498](https://github.com/ant-design/ant-design/issues/12498)
+
 ## 3.10.0

 `2018-09-30`
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@ -15,6 +15,40 @@ timeline: true

 ---

+## 3.10.1
+
+`2018-10-12`
+
+- 🎉 [Ant Design Mobile of Angular](http://ng.mobile.ant.design/)（NG-ZORRO-Mobile）发布！
+- 📝 更新 [项目实战](https://ant.design/docs/react/practical-projects-cn) 文档为最新的 umi 技术栈。
+- Table
+  - 🐞 修复未指定排序的列头点击时也会触发排序的问题。[#12515](https://github.com/ant-design/ant-design/issues/12515)
+  - 🐞 修复列头多余的排序 title 提示。[#12613](https://github.com/ant-design/ant-design/issues/12613)
+  - 🐞 修复排序和右对齐的列样式错位的问题。[#12552](https://github.com/ant-design/ant-design/issues/12552)
+  - 🐞 修复一个 columns 定义在 render 内时排序失效的问题。[#12571](https://github.com/ant-design/ant-design/issues/12571)
+  - 🐞 修复小号表格下排序列的列头背景色。
+  - 🐞 修复 Table 的选择器在 chrome 下选中样式的重影问题。[5bef1aa](https://github.com/ant-design/ant-design/commit/5bef1aa6c2e792180ef8d53a1f1489376b8e35db)
+  - 🐞 修复 Form.Item 内的 Table 分页样式。[#12554](https://github.com/ant-design/ant-design/issues/12554)
+- DatePicker
+  - 🐞 调整意大利国际化文案。[#12413](https://github.com/ant-design/ant-design/issues/12413) [@yp](https://github.com/yp)
+  - 🐞 修复选择完成后选择框没有获取焦点的问题。[#12475](https://github.com/ant-design/ant-design/issues/12475)
+  - 🐞 修复在 Input.Group 内使用时日期图标消失的问题。[#12536](https://github.com/ant-design/ant-design/issues/12536)
+- 🐞 修复 Anchor 中文字边缘被切割的问题。[#12520](https://github.com/ant-design/ant-design/issues/12520)
+- 🐞 修复 Drawer 设置无遮罩时依然挡住了页面元素的问题。[#12401](https://github.com/ant-design/ant-design/issues/12401)
+- 🐞 修复 AutoComplete 下使用自定义 Input.TextArea 下失效样式丢失的问题。[#12594](https://github.com/ant-design/ant-design/issues/12594)
+- 🐞 修复 Modal.confirm 的 `prefixCls` 属性没有透传给 mask 的问题，并调整了默认的 prefixCls 的值为 `ant-model-confirm`。[#12546](https://github.com/ant-design/ant-design/issues/12546)
+- 🐞 修复 Input.Group 在 safari 下的一个对齐问题。[#12493](https://github.com/ant-design/ant-design/issues/12493)
+- 🐞 修复独自使用 `<Badge />` 时的垂直对齐。[#12419](https://github.com/ant-design/ant-design/issues/12419)
+- 🐞 修复 Tree.DirectoryTree 点击切换图标和点击文本时 `onExpand` 参数不一致的问题。[#12567](https://github.com/ant-design/ant-design/issues/12567)
+- 🐞 修复在 IE11 下错误聚焦到表单状态图标的问题。[#12524](https://github.com/ant-design/ant-design/pull/12524) [@siyu77](https://github.com/siyu77)
+- 🐞 修复多选 Select 多次点击输入框时会反复触发 `onFocus` 和 `onBlur` 的问题。[#12281](https://github.com/ant-design/ant-design/issues/12281) [@Frezc ](https://github.com/Frezc)
+- 🐞 修复环形 Progress 内文本超长溢出的问题。
+- TypeScript
+  - 🐞 补充 Steps 的 `labelPlacement` 属性定义。[#12575](https://github.com/ant-design/ant-design/pull/12575) [@yueyes](https://github.com/yueyes)
+  - 🐞 补充 Select.Option 的 `style` 属性定义。[#12609](https://github.com/ant-design/ant-design/pull/12609) [@dimitropoulos](https://github.com/dimitropoulos)
+  - 🐞 修复 `form.validateFields` 的定义重载问题。[#12538](https://github.com/ant-design/ant-design/pull/12538) [@TomIsion](https://github.com/TomIsion)
+  - 🐞 补充 AutoComponent 的 `onFocus` `onBlur` 定义。[#12498](https://github.com/ant-design/ant-design/issues/12498)
+
 ## 3.10.0

 `2018-09-30`
--- a/components/auto-complete/style/index.less
+++ b/components/auto-complete/style/index.less
@ -52,6 +52,9 @@
      &:hover {
        .hover;
      }
+      &[disabled] {
+        .disabled;
+      }
    }

    &-lg {
--- a/components/date-picker/style/Picker.less
+++ b/components/date-picker/style/Picker.less
@ -67,7 +67,7 @@

  &-clear {
    opacity: 0;
-    z-index: 1;
+    z-index: 2;
    font-size: @font-size-base;
    color: @disabled-color;
    background: @input-bg;
--- a/components/locale-provider/tests/index.test.js
+++ b/components/locale-provider/tests/index.test.js
@ -126,7 +126,7 @@ describe('Locale Provider', () => {
          <ModalDemo />
        </LocaleProvider>
      );
-      const currentConfirmNode = document.querySelectorAll('.ant-confirm')[document.querySelectorAll('.ant-confirm').length - 1];
+      const currentConfirmNode = document.querySelectorAll('.ant-modal-confirm')[document.querySelectorAll('.ant-modal-confirm').length - 1];
      let cancelButtonText = currentConfirmNode.querySelectorAll('.ant-btn:not(.ant-btn-primary) span')[0].innerHTML;
      let okButtonText = currentConfirmNode.querySelectorAll('.ant-btn-primary span')[0].innerHTML;
      if (locale.locale === 'zh-cn') {
--- a/components/modal/tests/confirm.test.js
+++ b/components/modal/tests/confirm.test.js
@ -71,9 +71,9 @@ describe('Modal.confirm triggers callbacks correctly', () => {
      jest.useFakeTimers();
      open();
      $$('.ant-btn')[0].click();
-      expect($$('.ant-confirm')).toHaveLength(1);
+      expect($$('.ant-modal-confirm')).toHaveLength(1);
      jest.runAllTimers();
-      expect($$('.ant-confirm')).toHaveLength(0);
+      expect($$('.ant-modal-confirm')).toHaveLength(0);
      jest.useRealTimers();
    });
  }
@ -98,10 +98,10 @@ describe('Modal.confirm triggers callbacks correctly', () => {
        title: 'title',
        content: 'content',
      });
-      expect($$(`.ant-confirm-${type}`)).toHaveLength(1);
+      expect($$(`.ant-modal-confirm-${type}`)).toHaveLength(1);
      $$('.ant-btn')[0].click();
      jest.runAllTimers();
-      expect($$(`.ant-confirm-${type}`)).toHaveLength(0);
+      expect($$(`.ant-modal-confirm-${type}`)).toHaveLength(0);
    });
    jest.useRealTimers();
  });
@ -113,16 +113,16 @@ describe('Modal.confirm triggers callbacks correctly', () => {
        title: 'title',
        content: 'content',
      });
-      expect($$(`.ant-confirm-${type}`)).toHaveLength(1);
-      expect($$('.ant-confirm-title')[0].innerHTML).toBe('title');
-      expect($$('.ant-confirm-content')[0].innerHTML).toBe('content');
+      expect($$(`.ant-modal-confirm-${type}`)).toHaveLength(1);
+      expect($$('.ant-modal-confirm-title')[0].innerHTML).toBe('title');
+      expect($$('.ant-modal-confirm-content')[0].innerHTML).toBe('content');
      instance.update({
        title: 'new title',
        content: 'new content',
      });
-      expect($$(`.ant-confirm-${type}`)).toHaveLength(1);
-      expect($$('.ant-confirm-title')[0].innerHTML).toBe('new title');
-      expect($$('.ant-confirm-content')[0].innerHTML).toBe('new content');
+      expect($$(`.ant-modal-confirm-${type}`)).toHaveLength(1);
+      expect($$('.ant-modal-confirm-title')[0].innerHTML).toBe('new title');
+      expect($$('.ant-modal-confirm-content')[0].innerHTML).toBe('new content');
      instance.destroy();
      jest.runAllTimers();
    });
@ -136,11 +136,19 @@ describe('Modal.confirm triggers callbacks correctly', () => {
        title: 'title',
        content: 'content',
      });
-      expect($$(`.ant-confirm-${type}`)).toHaveLength(1);
+      expect($$(`.ant-modal-confirm-${type}`)).toHaveLength(1);
      instance.destroy();
      jest.runAllTimers();
-      expect($$(`.ant-confirm-${type}`)).toHaveLength(0);
+      expect($$(`.ant-modal-confirm-${type}`)).toHaveLength(0);
    });
    jest.useRealTimers();
  });
+
+  it('prefixCls', () => {
+    open({ prefixCls: 'custom-modal' });
+    expect($$('.custom-modal-mask')).toHaveLength(1);
+    expect($$('.custom-modal-wrap')).toHaveLength(1);
+    expect($$('.custom-modal-confirm')).toHaveLength(1);
+    expect($$('.custom-modal-confirm-body-wrapper')).toHaveLength(1);
+  });
 });
--- a/components/modal/confirm.tsx
+++ b/components/modal/confirm.tsx
@ -18,7 +18,8 @@ const ConfirmDialog = (props: ConfirmDialogProps) => {
  const { onCancel, onOk, close, zIndex, afterClose, visible, keyboard, centered, getContainer, okButtonProps, cancelButtonProps } = props;
  const iconType = props.iconType || 'question-circle';
  const okType = props.okType || 'primary';
-  const prefixCls = props.prefixCls || 'ant-confirm';
+  const prefixCls = props.prefixCls || 'ant-modal';
+  const contentPrefixCls = `${prefixCls}-confirm`;
  // 默认为 true，保持向下兼容
  const okCancel = ('okCancel' in props) ? props.okCancel! : true;
  const width = props.width || 416;
@ -32,8 +33,8 @@ const ConfirmDialog = (props: ConfirmDialogProps) => {
  const autoFocusButton = props.autoFocusButton === null ? false : props.autoFocusButton || 'ok';

  const classString = classNames(
-    prefixCls,
-    `${prefixCls}-${props.type}`,
+    contentPrefixCls,
+    `${contentPrefixCls}-${props.type}`,
    props.className,
  );

@ -45,8 +46,9 @@ const ConfirmDialog = (props: ConfirmDialogProps) => {

  return (
    <Dialog
+      prefixCls={prefixCls}
      className={classString}
-      wrapClassName={classNames({ [`${prefixCls}-centered`]: !!props.centered })}
+      wrapClassName={classNames({ [`${contentPrefixCls}-centered`]: !!props.centered })}
      onCancel={close.bind(this, { triggerCancel: true })}
      visible={visible}
      title=""
@ -62,13 +64,13 @@ const ConfirmDialog = (props: ConfirmDialogProps) => {
      centered={centered}
      getContainer={getContainer}
    >
-      <div className={`${prefixCls}-body-wrapper`}>
-        <div className={`${prefixCls}-body`}>
+      <div className={`${contentPrefixCls}-body-wrapper`}>
+        <div className={`${contentPrefixCls}-body`}>
          <Icon type={iconType!} />
-          <span className={`${prefixCls}-title`}>{props.title}</span>
-          <div className={`${prefixCls}-content`}>{props.content}</div>
+          <span className={`${contentPrefixCls}-title`}>{props.title}</span>
+          <div className={`${contentPrefixCls}-content`}>{props.content}</div>
        </div>
-        <div className={`${prefixCls}-btns`}>
+        <div className={`${contentPrefixCls}-btns`}>
          {cancelButton}
          <ActionButton type={okType} actionFn={onOk} closeModal={close} autoFocus={autoFocusButton === 'ok'} buttonProps={okButtonProps}>
            {okText}
--- a/components/modal/demo/position.md
+++ b/components/modal/demo/position.md
@ -11,7 +11,7 @@ title:

 ## en-US

-You can use `centered`、`style.top` or other styles to
+You can use `centered`,`style.top` or other styles to
 set position of modal dialog.

 ````jsx
--- a/components/modal/style/confirm.less
+++ b/components/modal/style/confirm.less
@ -1,6 +1,6 @@
@import "../../style/mixins/index";

-@confirm-prefix-cls: ~"@{ant-prefix}-confirm";
+@confirm-prefix-cls: ~"@{ant-prefix}-modal-confirm";

 .@{confirm-prefix-cls} {
  .@{ant-prefix}-modal-header {
--- a/components/progress/tests/snapshots/demo.test.js.snap
+++ b/components/progress/tests/snapshots/demo.test.js.snap
@ -36,6 +36,7 @@ exports[`renders ./components/progress/demo/circle.md correctly 1`] = `
      </svg>
      <span
        class="ant-progress-text"
+        title="75%"
      >
        75%
      </span>
@ -190,6 +191,7 @@ exports[`renders ./components/progress/demo/circle-dynamic.md correctly 1`] = `
      </svg>
      <span
        class="ant-progress-text"
+        title="0%"
      >
        0%
      </span>
@ -282,6 +284,7 @@ exports[`renders ./components/progress/demo/circle-mini.md correctly 1`] = `
      </svg>
      <span
        class="ant-progress-text"
+        title="30%"
      >
        30%
      </span>
@ -435,6 +438,7 @@ exports[`renders ./components/progress/demo/dashboard.md correctly 1`] = `
    </svg>
    <span
      class="ant-progress-text"
+      title="75%"
    >
      75%
    </span>
@ -462,6 +466,7 @@ exports[`renders ./components/progress/demo/dynamic.md correctly 1`] = `
      </div>
      <span
        class="ant-progress-text"
+        title="0%"
      >
        0%
      </span>
@ -554,6 +559,7 @@ exports[`renders ./components/progress/demo/format.md correctly 1`] = `
      </svg>
      <span
        class="ant-progress-text"
+        title="75 Days"
      >
        75 Days
      </span>
@ -593,6 +599,7 @@ exports[`renders ./components/progress/demo/format.md correctly 1`] = `
      </svg>
      <span
        class="ant-progress-text"
+        title="Done"
      >
        Done
      </span>
@ -621,6 +628,7 @@ exports[`renders ./components/progress/demo/line.md correctly 1`] = `
      </div>
      <span
        class="ant-progress-text"
+        title="30%"
      >
        30%
      </span>
@ -644,6 +652,7 @@ exports[`renders ./components/progress/demo/line.md correctly 1`] = `
      </div>
      <span
        class="ant-progress-text"
+        title="50%"
      >
        50%
      </span>
@ -770,6 +779,7 @@ exports[`renders ./components/progress/demo/line-mini.md correctly 1`] = `
      </div>
      <span
        class="ant-progress-text"
+        title="30%"
      >
        30%
      </span>
@ -793,6 +803,7 @@ exports[`renders ./components/progress/demo/line-mini.md correctly 1`] = `
      </div>
      <span
        class="ant-progress-text"
+        title="50%"
      >
        50%
      </span>
@ -899,6 +910,7 @@ exports[`renders ./components/progress/demo/linecap.md correctly 1`] = `
      </div>
      <span
        class="ant-progress-text"
+        title="75%"
      >
        75%
      </span>
@ -938,6 +950,7 @@ exports[`renders ./components/progress/demo/linecap.md correctly 1`] = `
      </svg>
      <span
        class="ant-progress-text"
+        title="75%"
      >
        75%
      </span>
@ -977,6 +990,7 @@ exports[`renders ./components/progress/demo/linecap.md correctly 1`] = `
      </svg>
      <span
        class="ant-progress-text"
+        title="75%"
      >
        75%
      </span>
@ -1008,6 +1022,7 @@ exports[`renders ./components/progress/demo/segment.md correctly 1`] = `
    </div>
    <span
      class="ant-progress-text"
+      title="60%"
    >
      60%
    </span>
--- a/components/progress/tests/snapshots/index.test.js.snap
+++ b/components/progress/tests/snapshots/index.test.js.snap
@ -23,6 +23,7 @@ exports[`Progress render format 1`] = `
    </div>
    <span
      class="ant-progress-text"
+      title="50 10"
    >
      50 10
    </span>
@ -49,6 +50,7 @@ exports[`Progress render negetive progress 1`] = `
    </div>
    <span
      class="ant-progress-text"
+      title="0%"
    >
      0%
    </span>
@ -79,6 +81,7 @@ exports[`Progress render negetive successPercent 1`] = `
    </div>
    <span
      class="ant-progress-text"
+      title="50%"
    >
      50%
    </span>
--- a/components/progress/progress.tsx
+++ b/components/progress/progress.tsx
@ -93,7 +93,14 @@ export default class Progress extends React.Component<ProgressProps, {}> {
      } else if (progressStatus === 'success') {
        text = <Icon type={`check${iconType}`} theme={type === 'line' ? 'filled' : 'outlined'} />;
      }
-      progressInfo = <span className={`${prefixCls}-text`}>{text}</span>;
+      progressInfo = (
+        <span
+          className={`${prefixCls}-text`}
+          title={typeof text === 'string' ? text : undefined}
+        >
+          {text}
+        </span>
+      );
    }

    if (type === 'line') {
--- a/components/progress/style/index.less
+++ b/components/progress/style/index.less
@ -133,6 +133,8 @@
    left: 0;
    margin: 0;
    color: @progress-text-color;
+    overflow: hidden;
+    text-overflow: ellipsis;

    .@{iconfont-css-prefix} {
      font-size: 14 / 12em;
--- a/components/select/index.tsx
+++ b/components/select/index.tsx
@ -76,6 +76,7 @@ export interface OptionProps {
  children?: React.ReactNode;
  className?: string;
  key?: string;
+  style?: React.CSSProperties;
 }

 export interface OptGroupProps {
--- a/docs/spec/introduce.en-US.md
+++ b/docs/spec/introduce.en-US.md
@ -44,6 +44,11 @@ const LinksList = () => (
        NG-ZORRO - Ant Design of Angular<LinkIcon />
      </a>
    </li>
+    <li>
+      <a href="http://ng.mobile.ant.design" target="_blank">
+        NG-ZORRO-MOBILE - Ant Design Mobile of Angular<LinkIcon />
+      </a>
+    </li>
    <li>
      <a href="https://github.com/FE-Driver/vue-beauty" target="_blank">
        vue-beauty (vue)<LinkIcon />
--- a/docs/spec/introduce.zh-CN.md
+++ b/docs/spec/introduce.zh-CN.md
@ -46,6 +46,11 @@ const LinksList = () => (
        NG-ZORRO - Ant Design of Angular<LinkIcon />
      </a>
    </li>
+    <li>
+      <a href="http://ng.mobile.ant.design" target="_blank">
+        NG-ZORRO-MOBILE - Ant Design Mobile of Angular<LinkIcon />
+      </a>
+    </li>
    <li>
      <a href="https://github.com/FE-Driver/vue-beauty" target="_blank">
        vue-beauty (vue)<LinkIcon />
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "antd",
-  "version": "3.10.0",
+  "version": "3.10.1",
  "title": "Ant Design",
  "description": "An enterprise-class UI design language and React-based implementation",
  "homepage": "http://ant.design/",
@ -65,7 +65,7 @@
    "rc-dropdown": "~2.2.1",
    "rc-editor-mention": "^1.1.7",
    "rc-form": "^2.2.3",
-    "rc-input-number": "~4.2.0",
+    "rc-input-number": "~4.1.0",
    "rc-menu": "~7.4.12",
    "rc-notification": "~3.2.0",
    "rc-pagination": "~1.17.3",
--- a/site/theme/en-US.js
+++ b/site/theme/en-US.js
@ -30,7 +30,7 @@ module.exports = {
    'app.home.solution': 'Solution',
    'app.home.components-explain': 'Based on the Ant Design language, we have provided a suite of out-of-the-box with high quality for developing and serving enterprise background applications,including the official React implementation and Angular, Vue implementations',
    'app.home.product-pro-slogan': 'Out-of-the-box front-end / Design solution',
-    'app.home.product-mobile-slogan': 'antd-mobile is a React implementation of Ant Design\'s mobile specification',
+    'app.home.product-mobile-slogan': 'antd-mobile is the implementation of Ant Design\'s mobile specification',
    'app.home.product-antv-slogan': 'Simple, professional, with unlimited possibilities for data visualization solutions',
    'app.home.tool-title': 'Tools & Resources',
    'app.home.tool-package-title': 'Ant Design Resources',
@ -41,6 +41,8 @@ module.exports = {
    'app.home.tool-kitchen-content': 'A Sketch tools for designers',
    'app.home.getting-started': 'Getting Started',
    'app.home.more': 'Learn more',
+    'app.home.more-mobile-react': 'Ant Design Mobile of React',
+    'app.home.more-mobile-angular': 'Ant Design Mobile of Angular',
    'app.footer.repo': 'GitHub Repository',
    'app.footer.awesome': 'Awesome Ant Design',
    'app.footer.course': 'Ant Design Practical Tutorial',
--- a/site/theme/static/home.less
+++ b/site/theme/static/home.less
@ -269,6 +269,11 @@ svg {
            vertical-align: middle;
          }
        }
+        .more-mobile-react, .more-mobile-angular {
+          display: block;
+          color: @home-bg-color;
+          margin-top: 16px;
+        }
      }
      .block-image-wrapper {
        height: 104px;
--- a/site/theme/static/responsive.less
+++ b/site/theme/static/responsive.less
@ -293,6 +293,13 @@
              display: block;
            }
          }
+          a.more-mobile-react, a.more-mobile-angular {
+            color: @link-color;
+            margin-top: 0;
+          }
+          a.more-mobile-react:hover, a.more-mobile-angular:hover {
+            color: #40a9ff;
+          }
        }
      }
    }
--- a/site/theme/template/Home/Page2.jsx
+++ b/site/theme/template/Home/Page2.jsx
@ -23,7 +23,6 @@ const page2Data = [
    img: 'https://gw.alipayobjects.com/zos/rmsportal/GobRAKexhfTSJdLFzDFY.svg',
    name: 'Ant Design Mobile',
    slogan: (<FormattedMessage id="app.home.product-mobile-slogan" />),
-    link: 'https://mobile.ant.design/index-cn',
  },
  {
    img: 'https://gw.alipayobjects.com/zos/rmsportal/slVtnOCcgeAcLEPwtewY.svg',
@ -85,10 +84,24 @@ export default function Page2({ isMobile, locale }) {
    if (!isMobile && !i) {
      return null;
    }
-    const content = isMobile && !i ? componentButton : [
+    const mobileContent = (
+      <div className="components-button-wrapper">
+        <p key="p">{item.slogan}</p>
+        <a className="more-mobile-react" href="https://mobile.ant.design" target="_black">
+          <FormattedMessage id="app.home.more-mobile-react" />
+          <Icon type="right" />
+        </a>
+        <a className="more-mobile-angular" href="http://ng.mobile.ant.design" target="_black">
+          <FormattedMessage id="app.home.more-mobile-angular" />
+          <Icon type="right" />
+        </a>
+      </div>
+    );
+    const moreContent = i === 2 ? mobileContent : [
      <p key="p">{item.slogan}</p>,
      <span className="more" key="a"><FormattedMessage id="app.home.more" /> <Icon type="right" /></span>,
    ];
+    const content = isMobile && !i ? componentButton : moreContent;
    return (
      <a className="product-block" key={item.name} href={item.link} style={{ display: 'block' }}>
        <Row>
--- a/site/theme/template/Layout/Footer.jsx
+++ b/site/theme/template/Layout/Footer.jsx
@ -104,6 +104,9 @@ class Footer extends React.Component {
                  <span> - </span>
                  Ant Design of Angular
                </div>
+                <div>
+                  <a href="http://ng.mobile.ant.design">NG-ZORRO-MOBILE</a>
+                </div>
                <div>
                  <a target="_blank " href="https://github.com/websemantics/awesome-ant-design">
                    <FormattedMessage id="app.footer.awesome" />
--- a/site/theme/zh-CN.js
+++ b/site/theme/zh-CN.js
@ -30,7 +30,7 @@ module.exports = {
    'app.home.solution': '解决方案',
    'app.home.components-explain': '基于 Ant Design 设计语言，我们提供了一套开箱即用的高质量 React 组件，用于开发和服务于企业级中后台产品，除官方的 React 实现，还有 Angular、Vue 的实现',
    'app.home.product-pro-slogan': '开箱即用的中台前端/设计解决方案',
-    'app.home.product-mobile-slogan': 'antd-mobile 是 Ant Design 的移动规范的 React 实现',
+    'app.home.product-mobile-slogan': 'antd-mobile 是 Ant Design 移动规范的实现',
    'app.home.product-antv-slogan': '简单、专业、拥有无限可能的数据可视化解决方案',
    'app.home.tool-title': '工具和资源',
    'app.home.tool-package-title': 'Ant Design 资源包',
@ -41,6 +41,8 @@ module.exports = {
    'app.home.tool-kitchen-content': '一个为设计师提效的 Sketch 工具集',
    'app.home.getting-started': '开始使用',
    'app.home.more': '查看更多',
+    'app.home.more-mobile-react': 'Ant Design Mobile of React',
+    'app.home.more-mobile-angular': 'Ant Design Mobile of Angular',
    'app.footer.repo': 'GitHub 仓库',
    'app.footer.awesome': 'Awesome Ant Design',
    'app.footer.course': 'Ant Design 实战教程',