Merge pull request #22301 from ant-design/master

chore: Feature merge master
5 years ago · 7c2e2af9a7
32 changed files with 833 additions and 427 deletions
--- a/components/breadcrumb/style/index.less
+++ b/components/breadcrumb/style/index.less
@ -1,5 +1,6 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
+@import './rtl';

@breadcrumb-prefix-cls: ~'@{ant-prefix}-breadcrumb';

@ -9,15 +10,6 @@
  color: @breadcrumb-base-color;
  font-size: @breadcrumb-font-size;

-  &-rtl {
-    .clearfix;
-    direction: rtl;
-
-    > span {
-      float: right;
-    }
-  }
-
  .@{iconfont-css-prefix} {
    font-size: @breadcrumb-icon-font-size;
  }
@ -49,22 +41,12 @@
  &-link {
    > .@{iconfont-css-prefix} + span {
      margin-left: 4px;
-
-      .@{breadcrumb-prefix-cls}-rtl & {
-        margin-right: 4px;
-        margin-left: 0;
-      }
    }
  }

  &-overlay-link {
    > .@{iconfont-css-prefix} {
      margin-left: 4px;
-
-      .@{breadcrumb-prefix-cls}-rtl & {
-        margin-right: 4px;
-        margin-left: 0;
-      }
    }
  }
 }
--- a/components/breadcrumb/style/rtl.less
+++ b/components/breadcrumb/style/rtl.less
@ -0,0 +1,33 @@
+@import '../../style/themes/index';
+@import '../../style/mixins/index';
+
+@breadcrumb-prefix-cls: ~'@{ant-prefix}-breadcrumb';
+
+.@{breadcrumb-prefix-cls} {
+  &-rtl {
+    .clearfix;
+    direction: rtl;
+
+    > span {
+      float: right;
+    }
+  }
+
+  &-link {
+    > .@{iconfont-css-prefix} + span {
+      .@{breadcrumb-prefix-cls}-rtl & {
+        margin-right: 4px;
+        margin-left: 0;
+      }
+    }
+  }
+
+  &-overlay-link {
+    > .@{iconfont-css-prefix} {
+      .@{breadcrumb-prefix-cls}-rtl & {
+        margin-right: 4px;
+        margin-left: 0;
+      }
+    }
+  }
+}
--- a/components/button/style/mixin.rtl.less
+++ b/components/button/style/mixin.rtl.less
@ -1,4 +1,10 @@
 .btn-group(@btnClassName: btn) {
+  .@{btnClassName} + .@{btnClassName},
+  .@{btnClassName} + &,
+  span + .@{btnClassName},
+  .@{btnClassName} + span,
+  > span + span,
+  & + .@{btnClassName},
  & + & {
    .@{btnClassName}-rtl& {
      margin-right: -1px;
--- a/components/dropdown/style/index.less
+++ b/components/dropdown/style/index.less
@ -1,5 +1,6 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
+@import './rtl';

@dropdown-prefix-cls: ~'@{ant-prefix}-dropdown';

@ -12,10 +13,6 @@
  z-index: @zindex-dropdown;
  display: block;

-  &-rtl {
-    direction: rtl;
-  }
-
  &::before {
    position: absolute;
    top: -7px;
@ -25,11 +22,6 @@
    z-index: -9999;
    opacity: 0.0001;
    content: ' ';
-
-    .@{dropdown-prefix-cls}-rtl& {
-      right: -7px;
-      left: 0;
-    }
  }

  &-wrap {
@ -85,10 +77,6 @@
      ul,
      li {
        list-style: none;
-
-        .@{dropdown-prefix-cls}-rtl & {
-          text-align: right;
-        }
      }

      ul {
@ -110,20 +98,11 @@
      cursor: pointer;
      transition: all 0.3s;

-      .@{dropdown-prefix-cls}-rtl & {
-        text-align: right;
-      }
-
      > .anticon:first-child,
      > span > .anticon:first-child {
        min-width: 12px;
        margin-right: 8px;
        font-size: @font-size-sm;
-
-        .@{dropdown-prefix-cls}-rtl & {
-          margin-right: 0;
-          margin-left: 8px;
-        }
      }

      > a {
@ -182,21 +161,11 @@
        position: absolute;
        right: @padding-xs;

-        .@{dropdown-prefix-cls}-rtl & {
-          right: auto;
-          left: @padding-xs;
-        }
-
        &-icon {
          margin-right: 0 !important;
          color: @text-color-secondary;
          font-style: normal;
          .iconfont-size-under-12px(10px);
-
-          .@{dropdown-prefix-cls}-rtl & {
-            margin-left: 0 !important;
-            transform: scaleX(-1);
-          }
        }
      }
    }
@ -209,11 +178,6 @@

    &-submenu-title {
      padding-right: @control-padding-horizontal + @font-size-sm;
-
-      .@{dropdown-prefix-cls}-rtl & {
-        padding-right: @control-padding-horizontal;
-        padding-left: @control-padding-horizontal + @font-size-sm;
-      }
    }

    &-submenu-vertical {
@ -227,13 +191,6 @@
      min-width: 100%;
      margin-left: 4px;
      transform-origin: 0 0;
-
-      .@{dropdown-prefix-cls}-rtl & {
-        right: 100%;
-        left: 0;
-        margin-right: 4px;
-        margin-left: 0;
-      }
    }

    &-submenu&-submenu-disabled .@{dropdown-prefix-cls}-menu-submenu-title {
--- a/components/dropdown/style/rtl.less
+++ b/components/dropdown/style/rtl.less
@ -0,0 +1,73 @@
+@import '../../style/themes/index';
+@import '../../style/mixins/index';
+
+@dropdown-prefix-cls: ~'@{ant-prefix}-dropdown';
+
+.@{dropdown-prefix-cls} {
+  &-rtl {
+    direction: rtl;
+  }
+
+  &::before {
+    .@{dropdown-prefix-cls}-rtl& {
+      right: -7px;
+      left: 0;
+    }
+  }
+
+  &-menu {
+    &-submenu-popup {
+      ul,
+      li {
+        .@{dropdown-prefix-cls}-rtl & {
+          text-align: right;
+        }
+      }
+    }
+
+    &-item,
+    &-submenu-title {
+      .@{dropdown-prefix-cls}-rtl & {
+        text-align: right;
+      }
+
+      > .anticon:first-child,
+      > span > .anticon:first-child {
+        .@{dropdown-prefix-cls}-rtl & {
+          margin-right: 0;
+          margin-left: 8px;
+        }
+      }
+
+      .@{dropdown-prefix-cls}-menu-submenu-arrow {
+        .@{dropdown-prefix-cls}-rtl & {
+          right: auto;
+          left: @padding-xs;
+        }
+
+        &-icon {
+          .@{dropdown-prefix-cls}-rtl & {
+            margin-left: 0 !important;
+            transform: scaleX(-1);
+          }
+        }
+      }
+    }
+
+    &-submenu-title {
+      .@{dropdown-prefix-cls}-rtl & {
+        padding-right: @control-padding-horizontal;
+        padding-left: @control-padding-horizontal + @font-size-sm;
+      }
+    }
+
+    &-submenu-vertical > & {
+      .@{dropdown-prefix-cls}-rtl & {
+        right: 100%;
+        left: 0;
+        margin-right: 4px;
+        margin-left: 0;
+      }
+    }
+  }
+}
--- a/components/locale/de_DE.tsx
+++ b/components/locale/de_DE.tsx
@ -10,12 +10,19 @@ const localeValues: Locale = {
  DatePicker,
  TimePicker,
  Calendar,
+  global: {
+    placeholder: 'Bitte auswählen',
+  },
  Table: {
    filterTitle: 'Filter-Menü',
    filterConfirm: 'OK',
    filterReset: 'Zurücksetzen',
    selectAll: 'Selektiere Alle',
    selectInvert: 'Selektion Invertieren',
+    selectionAll: 'Wählen Sie alle Daten aus',
+    sortTitle: 'Sortieren',
+    expand: 'Zeile erweitern',
+    collapse: 'Zeile reduzieren',
  },
  Modal: {
    okText: 'OK',
@ -41,6 +48,15 @@ const localeValues: Locale = {
  Empty: {
    description: 'Keine Daten',
  },
+  Text: {
+    edit: 'Bearbeiten',
+    copy: 'Kopieren',
+    copied: 'Kopiert',
+    expand: 'Erweitern',
+  },
+  PageHeader: {
+    back: 'Zurück',
+  },
 };

 export default localeValues;
--- a/components/menu/style/index.less
+++ b/components/menu/style/index.less
@ -1,5 +1,6 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
+@import './rtl';

@menu-prefix-cls: ~'@{ant-prefix}-menu';

@ -35,10 +36,6 @@
    font-size: @font-size-base;
    line-height: @line-height-base;
    transition: all 0.3s;
-
-    .@{menu-prefix-cls}-rtl & {
-      text-align: right;
-    }
  }

  &-submenu,
@ -132,14 +129,6 @@
    border-right: @border-width-base @border-style-base @border-color-split;
  }

-  &-inline,
-  &-vertical {
-    .@{menu-prefix-cls}-rtl& {
-      border-right: none;
-      border-left: @border-width-base @border-style-base @border-color-split;
-    }
-  }
-
  &-vertical-right {
    border-left: @border-width-base @border-style-base @border-color-split;
  }
@ -160,10 +149,6 @@
      overflow-y: auto;
    }

-    .@{menu-prefix-cls}-rtl& {
-      transform-origin: top right;
-    }
-
    .@{menu-prefix-cls}-item {
      left: 0;
      margin-left: 0;
@ -175,10 +160,6 @@
    > .@{menu-prefix-cls}-item,
    > .@{menu-prefix-cls}-submenu {
      transform-origin: 0 0;
-
-      .@{menu-prefix-cls}-rtl& {
-        transform-origin: top right;
-      }
    }
  }

@ -205,20 +186,11 @@
        opacity: 1;
        transition: opacity 0.3s @ease-in-out, width 0.3s @ease-in-out;
      }
-
-      .@{menu-prefix-cls}-rtl & {
-        margin-right: auto;
-        margin-left: 10px;
-      }
    }

    &.@{menu-prefix-cls}-item-only-child {
      > .@{iconfont-css-prefix} {
        margin-right: 0;
-
-        .@{menu-prefix-cls}-rtl & {
-          margin-left: 0;
-        }
      }
    }
  }
@ -240,11 +212,6 @@

      .submenu-title-wrapper {
        padding-right: 20px;
-
-        .@{menu-prefix-cls}-submenu-rtl& {
-          padding-right: 0;
-          padding-left: 20px;
-        }
      }

      &::before {
@ -281,11 +248,6 @@
        width: 10px;
        transition: transform 0.3s @ease-in-out;

-        .@{menu-prefix-cls}-rtl & {
-          right: auto;
-          left: 16px;
-        }
-
        &::before,
        &::after {
          position: absolute;
@ -320,15 +282,9 @@
      > .@{menu-prefix-cls}-submenu-title .@{menu-prefix-cls}-submenu-arrow {
        &::before {
          transform: rotate(45deg) translateY(-2px);
-          .@{menu-prefix-cls}-rtl & {
-            transform: rotate(-45deg) translateY(-2px);
-          }
        }
        &::after {
          transform: rotate(-45deg) translateY(2px);
-          .@{menu-prefix-cls}-rtl & {
-            transform: rotate(45deg) translateY(2px);
-          }
        }
      }
    }
@ -432,11 +388,6 @@
        opacity: 0;
        transition: transform 0.15s @ease-out, opacity 0.15s @ease-out;
        content: '';
-
-        .@{menu-prefix-cls}-rtl& {
-          right: auto;
-          left: 0;
-        }
      }
    }

@ -450,10 +401,6 @@
      font-size: @menu-item-font-size;
      line-height: @menu-item-height;
      text-overflow: ellipsis;
-
-      .@{menu-prefix-cls}-rtl& {
-        text-align: right;
-      }
    }

    // disable margin collapsed
@ -490,11 +437,6 @@

    .@{menu-prefix-cls}-submenu-title {
      padding-right: 34px;
-
-      .@{menu-prefix-cls}-rtl& {
-        padding-right: 0;
-        padding-left: 34px;
-      }
    }
  }

@ -556,10 +498,6 @@
    .@{menu-prefix-cls}-item,
    .@{menu-prefix-cls}-submenu-title {
      padding: 0 16px 0 28px;
-
-      .@{menu-prefix-cls}-rtl & {
-        padding: 0 28px 0 16px;
-      }
    }
  }

@ -585,11 +523,6 @@

    & .@{menu-prefix-cls}-item-group-title {
      padding-left: 32px;
-
-      .@{menu-prefix-cls}-rtl& {
-        padding-right: 32px;
-        padding-left: 0;
-      }
    }
  }

--- a/components/menu/style/rtl.less
+++ b/components/menu/style/rtl.less
@ -0,0 +1,141 @@
+@import '../../style/themes/index';
+@import '../../style/mixins/index';
+
+@menu-prefix-cls: ~'@{ant-prefix}-menu';
+
+.@{menu-prefix-cls} {
+  &-item-group-title {
+    .@{menu-prefix-cls}-rtl & {
+      text-align: right;
+    }
+  }
+
+  &-inline,
+  &-vertical {
+    .@{menu-prefix-cls}-rtl& {
+      border-right: none;
+      border-left: @border-width-base @border-style-base @border-color-split;
+    }
+  }
+
+  &-vertical&-sub,
+  &-vertical-left&-sub,
+  &-vertical-right&-sub {
+    .@{menu-prefix-cls}-rtl& {
+      transform-origin: top right;
+    }
+
+    > .@{menu-prefix-cls}-item,
+    > .@{menu-prefix-cls}-submenu {
+      .@{menu-prefix-cls}-rtl& {
+        transform-origin: top right;
+      }
+    }
+  }
+
+  &-item,
+  &-submenu-title {
+    .@{iconfont-css-prefix} {
+      .@{menu-prefix-cls}-rtl & {
+        margin-right: auto;
+        margin-left: 10px;
+      }
+    }
+
+    &.@{menu-prefix-cls}-item-only-child {
+      > .@{iconfont-css-prefix} {
+        .@{menu-prefix-cls}-rtl & {
+          margin-left: 0;
+        }
+      }
+    }
+  }
+
+  &-submenu {
+    &-popup {
+      .submenu-title-wrapper {
+        .@{menu-prefix-cls}-submenu-rtl& {
+          padding-right: 0;
+          padding-left: 20px;
+        }
+      }
+    }
+
+    &-vertical,
+    &-vertical-left,
+    &-vertical-right,
+    &-inline {
+      > .@{menu-prefix-cls}-submenu-title .@{menu-prefix-cls}-submenu-arrow {
+        .@{menu-prefix-cls}-rtl & {
+          right: auto;
+          left: 16px;
+        }
+      }
+    }
+
+    &-vertical,
+    &-vertical-left,
+    &-vertical-right {
+      > .@{menu-prefix-cls}-submenu-title .@{menu-prefix-cls}-submenu-arrow {
+        &::before {
+          .@{menu-prefix-cls}-rtl & {
+            transform: rotate(-45deg) translateY(-2px);
+          }
+        }
+        &::after {
+          .@{menu-prefix-cls}-rtl & {
+            transform: rotate(45deg) translateY(2px);
+          }
+        }
+      }
+    }
+  }
+
+  &-vertical,
+  &-vertical-left,
+  &-vertical-right,
+  &-inline {
+    .@{menu-prefix-cls}-item {
+      &::after {
+        .@{menu-prefix-cls}-rtl& {
+          right: auto;
+          left: 0;
+        }
+      }
+    }
+
+    .@{menu-prefix-cls}-item,
+    .@{menu-prefix-cls}-submenu-title {
+      .@{menu-prefix-cls}-rtl& {
+        text-align: right;
+      }
+    }
+  }
+
+  &-inline {
+    .@{menu-prefix-cls}-submenu-title {
+      .@{menu-prefix-cls}-rtl& {
+        padding-right: 0;
+        padding-left: 34px;
+      }
+    }
+  }
+
+  &-item-group-list {
+    .@{menu-prefix-cls}-item,
+    .@{menu-prefix-cls}-submenu-title {
+      .@{menu-prefix-cls}-rtl & {
+        padding: 0 28px 0 16px;
+      }
+    }
+  }
+
+  &-sub&-inline {
+    & .@{menu-prefix-cls}-item-group-title {
+      .@{menu-prefix-cls}-rtl& {
+        padding-right: 32px;
+        padding-left: 0;
+      }
+    }
+  }
+}
--- a/components/page-header/style/index.less
+++ b/components/page-header/style/index.less
@ -1,5 +1,6 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
+@import './rtl';

@pageheader-prefix-cls: ~'@{ant-prefix}-page-header';

@ -9,10 +10,6 @@
  padding: @page-header-padding-vertical @page-header-padding;
  background-color: @component-background;

-  &-rtl {
-    direction: rtl;
-  }
-
  &-ghost {
    background-color: @page-header-ghost-bg;
  }
@ -32,12 +29,6 @@
    font-size: 16px;
    line-height: 1;

-    .@{pageheader-prefix-cls}-rtl & {
-      float: right;
-      margin-right: 0;
-      margin-left: 16px;
-    }
-
    &-button {
      .operation-unit();
      color: @page-header-back-color;
@ -68,23 +59,11 @@
      font-weight: 600;
      font-size: @heading-4-size;
      line-height: 32px;
-
-      .@{pageheader-prefix-cls}-rtl & {
-        float: right;
-        padding-right: 0;
-        padding-left: 12px;
-      }
    }

    .@{ant-prefix}-avatar {
      float: left;
      margin-right: 12px;
-
-      .@{pageheader-prefix-cls}-rtl & {
-        float: right;
-        margin-right: 0;
-        margin-left: 12px;
-      }
    }

    &-sub-title {
@ -94,44 +73,21 @@
      color: @text-color-secondary;
      font-size: 14px;
      line-height: 22px;
-
-      .@{pageheader-prefix-cls}-rtl & {
-        float: right;
-        margin-right: 0;
-        margin-left: 12px;
-      }
    }

    &-tags {
      float: left;
      margin: 4px 0;
-
-      .@{pageheader-prefix-cls}-rtl & {
-        float: right;
-      }
    }

    &-extra {
      float: right;

-      .@{pageheader-prefix-cls}-rtl & {
-        float: left;
-      }
-
      > * {
        margin-left: 8px;
-
-        .@{pageheader-prefix-cls}-rtl & {
-          margin-right: 8px;
-          margin-left: 0;
-        }
      }
      > *:first-child {
        margin-left: 0;
-
-        .@{pageheader-prefix-cls}-rtl & {
-          margin-right: 0;
-        }
      }
    }
  }
@ -146,10 +102,6 @@
      margin-bottom: 1px;
      border-bottom: 0;
      .@{ant-prefix}-tabs-nav {
-        .@{pageheader-prefix-cls}-rtl & {
-          float: right;
-        }
-
        .@{ant-prefix}-tabs-tab {
          padding: @tabs-horizontal-padding-sm;
          font-size: 16px;
--- a/components/page-header/style/rtl.less
+++ b/components/page-header/style/rtl.less
@ -0,0 +1,78 @@
+@import '../../style/themes/index';
+@import '../../style/mixins/index';
+
+@pageheader-prefix-cls: ~'@{ant-prefix}-page-header';
+
+.@{pageheader-prefix-cls} {
+  &-rtl {
+    direction: rtl;
+  }
+
+  &-back {
+    .@{pageheader-prefix-cls}-rtl & {
+      float: right;
+      margin-right: 0;
+      margin-left: 16px;
+    }
+  }
+
+  &-heading {
+    &-title {
+      .@{pageheader-prefix-cls}-rtl & {
+        float: right;
+        padding-right: 0;
+        padding-left: 12px;
+      }
+    }
+
+    .@{ant-prefix}-avatar {
+      .@{pageheader-prefix-cls}-rtl & {
+        float: right;
+        margin-right: 0;
+        margin-left: 12px;
+      }
+    }
+
+    &-sub-title {
+      .@{pageheader-prefix-cls}-rtl & {
+        float: right;
+        margin-right: 0;
+        margin-left: 12px;
+      }
+    }
+
+    &-tags {
+      .@{pageheader-prefix-cls}-rtl & {
+        float: right;
+      }
+    }
+
+    &-extra {
+      .@{pageheader-prefix-cls}-rtl & {
+        float: left;
+      }
+
+      > * {
+        .@{pageheader-prefix-cls}-rtl & {
+          margin-right: 8px;
+          margin-left: 0;
+        }
+      }
+      > *:first-child {
+        .@{pageheader-prefix-cls}-rtl & {
+          margin-right: 0;
+        }
+      }
+    }
+  }
+
+  &-footer {
+    .@{ant-prefix}-tabs-bar {
+      .@{ant-prefix}-tabs-nav {
+        .@{pageheader-prefix-cls}-rtl & {
+          float: right;
+        }
+      }
+    }
+  }
+}
--- a/components/pagination/style/index.less
+++ b/components/pagination/style/index.less
@ -1,16 +1,13 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
@import '../../input/style/mixin';
+@import './rtl';

@pagination-prefix-cls: ~'@{ant-prefix}-pagination';

 .@{pagination-prefix-cls} {
  .reset-component;

-  &-rtl {
-    direction: rtl;
-  }
-
  ul,
  ol {
    margin: 0;
@ -33,11 +30,6 @@
    margin-right: 8px;
    line-height: @pagination-item-size - 2px;
    vertical-align: middle;
-
-    .@{pagination-prefix-cls}-rtl & {
-      margin-right: 0;
-      margin-left: 8px;
-    }
  }

  &-item {
@ -57,11 +49,6 @@
    cursor: pointer;
    user-select: none;

-    .@{pagination-prefix-cls}-rtl & {
-      margin-right: 0;
-      margin-left: 8px;
-    }
-
    a {
      display: block;
      padding: 0 6px;
@ -156,11 +143,6 @@
  &-jump-prev,
  &-jump-next {
    margin-right: 8px;
-
-    .@{pagination-prefix-cls}-rtl & {
-      margin-right: 0;
-      margin-left: 8px;
-    }
  }
  &-prev,
  &-next,
@ -235,20 +217,10 @@
    margin-left: 16px;
    vertical-align: middle;

-    .@{pagination-prefix-cls}-rtl & {
-      margin-right: 16px;
-      margin-left: 0;
-    }
-
    &-size-changer.@{ant-prefix}-select {
      display: inline-block;
      width: auto;
      margin-right: 8px;
-
-      .@{pagination-prefix-cls}-rtl & {
-        margin-right: 0;
-        margin-left: 8px;
-      }
    }

    &-quick-jumper {
@ -286,11 +258,6 @@
    height: @pagination-item-size-sm;
    margin-right: 8px;

-    .@{pagination-prefix-cls}-rtl& {
-      margin-right: 0;
-      margin-left: 8px;
-    }
-
    input {
      box-sizing: border-box;
      height: 100%;
@ -306,11 +273,6 @@
      &:hover {
        border-color: @primary-color;
      }
-
-      .@{pagination-prefix-cls}-rtl& {
-        margin-right: 0;
-        margin-left: 8px;
-      }
    }
  }

@ -360,11 +322,6 @@
  &.mini &-options {
    margin-left: 2px;

-    .@{pagination-prefix-cls}-rtl& {
-      margin-right: 2px;
-      margin-left: 0;
-    }
-
    &-quick-jumper {
      height: @pagination-item-size-sm;
      line-height: @pagination-item-size-sm;
--- a/components/pagination/style/rtl.less
+++ b/components/pagination/style/rtl.less
@ -0,0 +1,69 @@
+@import '../../style/themes/index';
+@import '../../style/mixins/index';
+@import '../../input/style/mixin';
+
+@pagination-prefix-cls: ~'@{ant-prefix}-pagination';
+
+.@{pagination-prefix-cls} {
+  &-rtl {
+    direction: rtl;
+  }
+
+  &-total-text {
+    .@{pagination-prefix-cls}-rtl & {
+      margin-right: 0;
+      margin-left: 8px;
+    }
+  }
+
+  &-item {
+    .@{pagination-prefix-cls}-rtl & {
+      margin-right: 0;
+      margin-left: 8px;
+    }
+  }
+
+  &-prev,
+  &-jump-prev,
+  &-jump-next {
+    .@{pagination-prefix-cls}-rtl & {
+      margin-right: 0;
+      margin-left: 8px;
+    }
+  }
+
+  &-options {
+    .@{pagination-prefix-cls}-rtl & {
+      margin-right: 16px;
+      margin-left: 0;
+    }
+
+    &-size-changer.@{ant-prefix}-select {
+      .@{pagination-prefix-cls}-rtl & {
+        margin-right: 0;
+        margin-left: 8px;
+      }
+    }
+  }
+
+  &-simple &-simple-pager {
+    .@{pagination-prefix-cls}-rtl& {
+      margin-right: 0;
+      margin-left: 8px;
+    }
+
+    input {
+      .@{pagination-prefix-cls}-rtl& {
+        margin-right: 0;
+        margin-left: 8px;
+      }
+    }
+  }
+
+  &.mini &-options {
+    .@{pagination-prefix-cls}-rtl& {
+      margin-right: 2px;
+      margin-left: 0;
+    }
+  }
+}
--- a/components/rate/style/index.less
+++ b/components/rate/style/index.less
@ -1,5 +1,6 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
+@import './rtl';

@rate-prefix-cls: ~'@{ant-prefix}-rate';

@ -15,10 +16,6 @@
  list-style: none;
  outline: none;

-  &-rtl {
-    direction: rtl;
-  }
-
  &-disabled &-star {
    cursor: default;
    &:hover {
@ -37,11 +34,6 @@

    &:not(:last-child) {
      margin-right: 8px;
-
-      .@{rate-prefix-cls}-rtl & {
-        margin-right: 0;
-        margin-left: 8px;
-      }
    }

    > div {
@ -73,11 +65,6 @@
      height: 100%;
      overflow: hidden;
      opacity: 0;
-
-      .@{rate-prefix-cls}-rtl & {
-        right: 0;
-        left: auto;
-      }
    }

    &-half &-first,
@ -95,10 +82,5 @@
    display: inline-block;
    margin-left: 8px;
    font-size: @font-size-base;
-
-    .@{rate-prefix-cls}-rtl & {
-      margin-right: 8px;
-      margin-left: 0;
-    }
  }
 }
--- a/components/rate/style/rtl.less
+++ b/components/rate/style/rtl.less
@ -0,0 +1,33 @@
+@import '../../style/themes/index';
+@import '../../style/mixins/index';
+
+@rate-prefix-cls: ~'@{ant-prefix}-rate';
+
+.@{rate-prefix-cls} {
+  &-rtl {
+    direction: rtl;
+  }
+
+  &-star {
+    &:not(:last-child) {
+      .@{rate-prefix-cls}-rtl & {
+        margin-right: 0;
+        margin-left: 8px;
+      }
+    }
+
+    &-first {
+      .@{rate-prefix-cls}-rtl & {
+        right: 0;
+        left: auto;
+      }
+    }
+  }
+
+  &-text {
+    .@{rate-prefix-cls}-rtl & {
+      margin-right: 8px;
+      margin-left: 0;
+    }
+  }
+}
--- a/components/slider/style/index.less
+++ b/components/slider/style/index.less
@ -1,5 +1,6 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
+@import './rtl';

@slider-prefix-cls: ~'@{ant-prefix}-slider';

@ -15,10 +16,6 @@

  .vertical();

-  &-rtl {
-    direction: rtl;
-  }
-
  &-with-marks {
    margin-bottom: 28px;
  }
@ -87,11 +84,6 @@
    left: 0;
    width: 100%;
    font-size: @font-size-base;
-
-    .@{slider-prefix-cls}-rtl & {
-      right: 0;
-      left: auto;
-    }
  }

  &-mark-text {
@ -125,25 +117,11 @@
    border-radius: 50%;
    cursor: pointer;

-    .@{slider-prefix-cls}-rtl & {
-      margin-right: -4px;
-      margin-left: 0;
-    }
    &:first-child {
      margin-left: -4px;
-
-      .@{slider-prefix-cls}-rtl & {
-        margin-right: -4px;
-        margin-left: 0;
-      }
    }
    &:last-child {
      margin-left: -4px;
-
-      .@{slider-prefix-cls}-rtl & {
-        margin-right: -4px;
-        margin-left: 0;
-      }
    }
    &-active {
      border-color: @slider-dot-border-color-active;
@ -191,11 +169,6 @@
    .@{slider-prefix-cls}-handle {
      margin-top: -6px; // we chould consider border width as well: (10 + 2 ) / 2
      margin-left: -5px;
-
-      .@{slider-prefix-cls}-rtl& {
-        margin-right: -5px;
-        margin-left: 0;
-      }
    }

    .@{slider-prefix-cls}-mark {
@ -203,21 +176,11 @@
      left: 12px;
      width: 18px;
      height: 100%;
-
-      .@{slider-prefix-cls}-rtl& {
-        right: 12px;
-        left: auto;
-      }
    }

    .@{slider-prefix-cls}-mark-text {
      left: 4px;
      white-space: nowrap;
-
-      .@{slider-prefix-cls}-rtl& {
-        right: 4px;
-        left: auto;
-      }
    }

    .@{slider-prefix-cls}-step {
@ -229,11 +192,6 @@
      top: auto;
      left: 2px;
      margin-bottom: -4px;
-
-      .@{slider-prefix-cls}-rtl& {
-        right: 2px;
-        left: auto;
-      }
    }
  }

--- a/components/slider/style/rtl.less
+++ b/components/slider/style/rtl.less
@ -0,0 +1,70 @@
+@import '../../style/themes/index';
+@import '../../style/mixins/index';
+
+@slider-prefix-cls: ~'@{ant-prefix}-slider';
+
+.@{slider-prefix-cls} {
+  &-rtl {
+    direction: rtl;
+  }
+
+  &-mark {
+    .@{slider-prefix-cls}-rtl & {
+      right: 0;
+      left: auto;
+    }
+  }
+
+  &-dot {
+    .@{slider-prefix-cls}-rtl & {
+      margin-right: -4px;
+      margin-left: 0;
+    }
+
+    &:first-child {
+      .@{slider-prefix-cls}-rtl & {
+        margin-right: -4px;
+        margin-left: 0;
+      }
+    }
+
+    &:last-child {
+      .@{slider-prefix-cls}-rtl & {
+        margin-right: -4px;
+        margin-left: 0;
+      }
+    }
+  }
+}
+
+.vertical() {
+  &-vertical {
+    .@{slider-prefix-cls}-handle {
+      .@{slider-prefix-cls}-rtl& {
+        margin-right: -5px;
+        margin-left: 0;
+      }
+    }
+
+    .@{slider-prefix-cls}-mark {
+      .@{slider-prefix-cls}-rtl& {
+        right: 12px;
+        left: auto;
+      }
+    }
+
+    .@{slider-prefix-cls}-mark-text {
+      .@{slider-prefix-cls}-rtl& {
+        right: 4px;
+        left: auto;
+      }
+    }
+
+    .@{slider-prefix-cls}-dot {
+      .@{slider-prefix-cls}-rtl& {
+        right: 2px;
+        left: auto;
+      }
+    }
+  }
+}
--- a/components/steps/style/custom-icon.less
+++ b/components/steps/style/custom-icon.less
@ -1,3 +1,5 @@
+@import './custom-icon.rtl.less';
+
 .@{steps-prefix-cls}-item-custom {
  .@{steps-prefix-cls}-item-icon {
    height: auto;
@ -10,11 +12,6 @@
      height: @steps-icon-size;
      font-size: 24px;
      line-height: @steps-icon-size;
-
-      .@{steps-prefix-cls}-rtl & {
-        right: 0.5px;
-        left: auto;
-      }
    }
  }
  &.@{steps-prefix-cls}-item-process {
--- a/components/steps/style/custom-icon.rtl.less
+++ b/components/steps/style/custom-icon.rtl.less
@ -0,0 +1,10 @@
+.@{steps-prefix-cls}-item-custom {
+  .@{steps-prefix-cls}-item-icon {
+    > .@{steps-prefix-cls}-icon {
+      .@{steps-prefix-cls}-rtl & {
+        right: 0.5px;
+        left: auto;
+      }
+    }
+  }
+}
--- a/components/steps/style/index.less
+++ b/components/steps/style/index.less
@ -1,5 +1,6 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
+@import './rtl';

@steps-prefix-cls: ~'@{ant-prefix}-steps';
@process-icon-color: @primary-color;
@ -33,9 +34,6 @@
  display: flex;
  width: 100%;
  font-size: 0;
-  &-rtl {
-    direction: rtl;
-  }
 }

 .@{steps-prefix-cls}-item {
@ -76,11 +74,6 @@
    border-radius: @steps-icon-size;
    transition: background-color 0.3s, border-color 0.3s;

-    .@{steps-prefix-cls}-rtl & {
-      margin-right: 0;
-      margin-left: 8px;
-    }
-
    > .@{steps-prefix-cls}-icon {
      position: relative;
      top: -1px;
@ -95,10 +88,6 @@
    width: 100%;
    padding: 0 10px;

-    .@{steps-prefix-cls}-rtl & {
-      right: 0;
-      left: auto;
-    }
    &::after {
      display: inline-block;
      width: 100%;
@ -117,11 +106,6 @@
    font-size: @font-size-lg;
    line-height: @steps-icon-size;

-    .@{steps-prefix-cls}-rtl & {
-      padding-right: 0;
-      padding-left: 16px;
-    }
-
    &::after {
      position: absolute;
      top: @steps-icon-size / 2;
@ -131,11 +115,6 @@
      height: 1px;
      background: @wait-tail-color;
      content: '';
-
-      .@{steps-prefix-cls}-rtl & {
-        right: 100%;
-        left: auto;
-      }
    }
  }
  &-subtitle {
@ -214,24 +193,11 @@
    margin-right: 16px;
    white-space: nowrap;

-    .@{steps-prefix-cls}-rtl& {
-      margin-right: 0;
-      margin-left: 16px;
-    }
-
    &:last-child {
      margin-right: 0;
-
-      .@{steps-prefix-cls}-rtl& {
-        margin-left: 0;
-      }
    }
    &:last-child .@{steps-prefix-cls}-item-title {
      padding-right: 0;
-
-      .@{steps-prefix-cls}-rtl& {
-        padding-left: 0;
-      }
    }
    &-tail {
      display: none;
--- a/components/steps/style/nav.less
+++ b/components/steps/style/nav.less
@ -1,3 +1,5 @@
+@import './nav.rtl.less';
+
 .@{steps-prefix-cls}-navigation {
  padding-top: 12px;

@ -5,11 +7,6 @@
    .@{steps-prefix-cls}-item {
      &-container {
        margin-left: -12px;
-
-        .@{steps-prefix-cls}-rtl& {
-          margin-right: -12px;
-          margin-left: 0;
-        }
      }
    }
  }
@ -26,12 +23,6 @@
      text-align: left;
      transition: opacity 0.3s;

-      .@{steps-prefix-cls}-rtl& {
-        margin-right: -16px;
-        margin-left: 0;
-        text-align: right;
-      }
-
      .@{steps-prefix-cls}-item-content {
        max-width: @steps-nav-content-max-width;
      }
@ -43,10 +34,6 @@
        white-space: nowrap;
        text-overflow: ellipsis;

-        .@{steps-prefix-cls}-rtl& {
-          padding-left: 0;
-        }
-
        &::after {
          display: none;
        }
@ -83,14 +70,6 @@
      border-left: none;
      transform: rotate(45deg);
      content: '';
-
-      .@{steps-prefix-cls}-rtl& {
-        right: 100%;
-        left: auto;
-        margin-right: -2px;
-        margin-left: 0;
-        transform: rotate(225deg);
-      }
    }

    &::before {
--- a/components/steps/style/nav.rtl.less
+++ b/components/steps/style/nav.rtl.less
@ -0,0 +1,37 @@
+.@{steps-prefix-cls}-navigation {
+  &.@{steps-prefix-cls}-small {
+    .@{steps-prefix-cls}-item {
+      &-container {
+        .@{steps-prefix-cls}-rtl& {
+          margin-right: -12px;
+          margin-left: 0;
+        }
+      }
+    }
+  }
+
+  .@{steps-prefix-cls}-item {
+    &-container {
+      .@{steps-prefix-cls}-rtl& {
+        margin-right: -16px;
+        margin-left: 0;
+        text-align: right;
+      }
+      .@{steps-prefix-cls}-item-title {
+        .@{steps-prefix-cls}-rtl& {
+          padding-left: 0;
+        }
+      }
+    }
+
+    &::after {
+      .@{steps-prefix-cls}-rtl& {
+        right: 100%;
+        left: auto;
+        margin-right: -2px;
+        margin-left: 0;
+        transform: rotate(225deg);
+      }
+    }
+  }
+}
--- a/components/steps/style/rtl.less
+++ b/components/steps/style/rtl.less
@ -0,0 +1,60 @@
+@import '../../style/themes/index';
+@import '../../style/mixins/index';
+
+@steps-prefix-cls: ~'@{ant-prefix}-steps';
+
+.@{steps-prefix-cls} {
+  &-rtl {
+    direction: rtl;
+  }
+}
+
+.@{steps-prefix-cls}-item {
+  &-icon {
+    .@{steps-prefix-cls}-rtl & {
+      margin-right: 0;
+      margin-left: 8px;
+    }
+  }
+
+  &-tail {
+    .@{steps-prefix-cls}-rtl & {
+      right: 0;
+      left: auto;
+    }
+  }
+
+  &-title {
+    .@{steps-prefix-cls}-rtl & {
+      padding-right: 0;
+      padding-left: 16px;
+    }
+
+    &::after {
+      .@{steps-prefix-cls}-rtl & {
+        right: 100%;
+        left: auto;
+      }
+    }
+  }
+}
+
+.@{steps-prefix-cls}-horizontal:not(.@{steps-prefix-cls}-label-vertical) {
+  .@{steps-prefix-cls}-item {
+    .@{steps-prefix-cls}-rtl& {
+      margin-right: 0;
+      margin-left: 16px;
+    }
+
+    &:last-child {
+      .@{steps-prefix-cls}-rtl& {
+        margin-left: 0;
+      }
+    }
+    &:last-child .@{steps-prefix-cls}-item-title {
+      .@{steps-prefix-cls}-rtl& {
+        padding-left: 0;
+      }
+    }
+  }
+}
--- a/components/steps/style/small.less
+++ b/components/steps/style/small.less
@ -1,19 +1,12 @@
+@import './small.rtl.less';
+
 .@{steps-prefix-cls}-small {
  &.@{steps-prefix-cls}-horizontal:not(.@{steps-prefix-cls}-label-vertical)
    .@{steps-prefix-cls}-item {
    margin-right: 12px;

-    .@{steps-prefix-cls}-rtl& {
-      margin-right: 0;
-      margin-left: 12px;
-    }
-
    &:last-child {
      margin-right: 0;
-
-      .@{steps-prefix-cls}-rtl& {
-        margin-left: 0;
-      }
    }
  }
  .@{steps-prefix-cls}-item-icon {
@ -31,9 +24,6 @@
    &::after {
      top: @steps-small-icon-size / 2;
    }
-    .@{steps-prefix-cls}-rtl& {
-      padding-right: 0;
-    }
  }
  .@{steps-prefix-cls}-item-description {
    color: @text-color-secondary;
--- a/components/steps/style/small.rtl.less
+++ b/components/steps/style/small.rtl.less
@ -0,0 +1,21 @@
+.@{steps-prefix-cls}-small {
+  &.@{steps-prefix-cls}-horizontal:not(.@{steps-prefix-cls}-label-vertical)
+    .@{steps-prefix-cls}-item {
+    .@{steps-prefix-cls}-rtl& {
+      margin-right: 0;
+      margin-left: 12px;
+    }
+
+    &:last-child {
+      .@{steps-prefix-cls}-rtl& {
+        margin-left: 0;
+      }
+    }
+  }
+
+  .@{steps-prefix-cls}-item-title {
+    .@{steps-prefix-cls}-rtl& {
+      padding-right: 0;
+    }
+  }
+}
--- a/components/steps/style/vertical.less
+++ b/components/steps/style/vertical.less
@ -1,3 +1,5 @@
+@import './vertical.rtl.less';
+
 .steps-vertical() {
  display: block;
  .@{steps-prefix-cls}-item {
@ -6,12 +8,6 @@
    &-icon {
      float: left;
      margin-right: 16px;
-
-      .@{steps-prefix-cls}-rtl& {
-        float: right;
-        margin-right: 0;
-        margin-left: 16px;
-      }
    }
    &-content {
      display: block;
@ -36,11 +32,6 @@
    height: 100%;
    padding: @steps-icon-size + 6px 0 6px;

-    .@{steps-prefix-cls}-rtl& {
-      right: 16px;
-      left: auto;
-    }
-
    &::after {
      width: 1px;
      height: 100%;
@ -68,11 +59,6 @@
      top: 0;
      left: 12px;
      padding: @steps-small-icon-size + 6px 0 6px;
-
-      .@{steps-prefix-cls}-rtl& {
-        right: 12px;
-        left: auto;
-      }
    }
    .@{steps-prefix-cls}-item-title {
      line-height: @steps-small-icon-size;
--- a/components/steps/style/vertical.rtl.less
+++ b/components/steps/style/vertical.rtl.less
@ -0,0 +1,29 @@
+.steps-vertical() {
+  .@{steps-prefix-cls}-item {
+    &-icon {
+      .@{steps-prefix-cls}-rtl& {
+        float: right;
+        margin-right: 0;
+        margin-left: 16px;
+      }
+    }
+  }
+
+  > .@{steps-prefix-cls}-item
+    > .@{steps-prefix-cls}-item-container
+    > .@{steps-prefix-cls}-item-tail {
+    .@{steps-prefix-cls}-rtl& {
+      right: 16px;
+      left: auto;
+    }
+  }
+
+  &.@{steps-prefix-cls}-small .@{steps-prefix-cls}-item-container {
+    .@{steps-prefix-cls}-item-tail {
+      .@{steps-prefix-cls}-rtl& {
+        right: 12px;
+        left: auto;
+      }
+    }
+  }
+}
--- a/components/switch/style/index.less
+++ b/components/switch/style/index.less
@ -1,5 +1,6 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
+@import './rtl';

@switch-prefix-cls: ~'@{ant-prefix}-switch';
@switch-duration: 0.36s;
@ -20,20 +21,13 @@
  cursor: pointer;
  transition: all @switch-duration;
  user-select: none;
-  &-rtl {
-    direction: rtl;
-  }
+
  &-inner {
    display: block;
    margin-right: 6px;
    margin-left: 24px;
    color: @text-color-inverse;
    font-size: @font-size-sm;
-
-    .@{switch-prefix-cls}-rtl & {
-      margin-right: 24px;
-      margin-left: 6px;
-    }
  }

  &-loading-icon,
@ -48,12 +42,6 @@
    cursor: pointer;
    transition: all @switch-duration @ease-in-out-circ;
    content: ' ';
-
-    .@{switch-prefix-cls}-rtl& {
-      left: 100%;
-      margin-left: -1px;
-      transform: translateX(-100%);
-    }
  }

  &::after {
@ -109,11 +97,6 @@
      margin-right: 3px;
      margin-left: 18px;
      font-size: @font-size-sm;
-
-      .@{switch-prefix-cls}-rtl& {
-        margin-right: 18px;
-        margin-left: 3px;
-      }
    }

    &::after {
@ -130,21 +113,12 @@
  &-small &-loading-icon {
    width: @switch-sm-height - 4px;
    height: @switch-sm-height - 4px;
-
-    .@{switch-prefix-cls}-rtl& {
-      margin-left: 12px;
-    }
  }

  &-small&-checked {
    .@{switch-prefix-cls}-inner {
      margin-right: 18px;
      margin-left: 3px;
-
-      .@{switch-prefix-cls}-rtl& {
-        margin-right: 3px;
-        margin-left: 18px;
-      }
    }
  }

@ -165,33 +139,18 @@
    .@{switch-prefix-cls}-inner {
      margin-right: 24px;
      margin-left: 6px;
-
-      .@{switch-prefix-cls}-rtl& {
-        margin-right: 6px;
-        margin-left: 24px;
-      }
    }

    &::after {
      left: 100%;
      margin-left: -1px;
      transform: translateX(-100%);
-
-      .@{switch-prefix-cls}-rtl& {
-        left: 1px;
-        margin-left: 0;
-        transform: translateX(0);
-      }
    }
  }

  &-checked &-loading-icon {
    left: 100%;
    margin-left: -19px;
-
-    .@{switch-prefix-cls}-rtl& {
-      margin-left: -41px;
-    }
  }

  &-loading,
--- a/components/switch/style/rtl.less
+++ b/components/switch/style/rtl.less
@ -0,0 +1,73 @@
+@import '../../style/themes/index';
+@import '../../style/mixins/index';
+
+@switch-prefix-cls: ~'@{ant-prefix}-switch';
+
+.@{switch-prefix-cls} {
+  &-rtl {
+    direction: rtl;
+  }
+
+  &-inner {
+    .@{switch-prefix-cls}-rtl & {
+      margin-right: 24px;
+      margin-left: 6px;
+    }
+  }
+
+  &-loading-icon,
+  &::after {
+    .@{switch-prefix-cls}-rtl& {
+      left: 100%;
+      margin-left: -1px;
+      transform: translateX(-100%);
+    }
+  }
+
+  &-small {
+    .@{switch-prefix-cls}-inner {
+      .@{switch-prefix-cls}-rtl& {
+        margin-right: 18px;
+        margin-left: 3px;
+      }
+    }
+  }
+
+  &-small &-loading-icon {
+    .@{switch-prefix-cls}-rtl& {
+      margin-left: 12px;
+    }
+  }
+
+  &-small&-checked {
+    .@{switch-prefix-cls}-inner {
+      .@{switch-prefix-cls}-rtl& {
+        margin-right: 3px;
+        margin-left: 18px;
+      }
+    }
+  }
+
+  &-checked {
+    .@{switch-prefix-cls}-inner {
+      .@{switch-prefix-cls}-rtl& {
+        margin-right: 6px;
+        margin-left: 24px;
+      }
+    }
+
+    &::after {
+      .@{switch-prefix-cls}-rtl& {
+        left: 1px;
+        margin-left: 0;
+        transform: translateX(0);
+      }
+    }
+  }
+
+  &-checked &-loading-icon {
+    .@{switch-prefix-cls}-rtl& {
+      margin-left: -41px;
+    }
+  }
+}
--- a/components/typography/tests/snapshots/demo.test.js.snap
+++ b/components/typography/tests/snapshots/demo.test.js.snap
@ -545,6 +545,41 @@ exports[`renders ./components/typography/demo/paragraph-debug.md correctly 1`] =
      </li>
    </ul>
  </div>
+  <div
+    class="ant-typography"
+  >
+    <ul>
+      <li>
+        I am an unordered item
+      </li>
+      <li>
+        I am an unordered item with an ordered sublist
+        <ol>
+          <li>
+            I am ordered
+          </li>
+        </ol>
+        <ul>
+          <li>
+            I am unordered
+          </li>
+        </ul>
+      </li>
+    </ul>
+    <ol>
+      <li>
+        Ordered list item with unordered sublist
+        <ul>
+          <li>
+            I am unordered!
+          </li>
+          <li>
+            I am also unordered!
+          </li>
+        </ul>
+      </li>
+    </ol>
+  </div>
 </div>
 `;

--- a/components/typography/demo/paragraph-debug.md
+++ b/components/typography/demo/paragraph-debug.md
@ -86,6 +86,30 @@ ReactDOM.render(
        </li>
      </ul>
    </Paragraph>
+
+    <Paragraph>
+      <ul>
+        <li>I am an unordered item</li>
+        <li>
+          I am an unordered item with an ordered sublist
+          <ol>
+            <li>I am ordered</li>
+          </ol>
+          <ul>
+            <li>I am unordered</li>
+          </ul>
+        </li>
+      </ul>
+      <ol>
+        <li>
+          Ordered list item with unordered sublist
+          <ul>
+            <li>I am unordered!</li>
+            <li>I am also unordered!</li>
+          </ul>
+        </li>
+      </ol>
+    </Paragraph>
  </div>,
  mountNode,
 );
--- a/components/typography/style/index.less
+++ b/components/typography/style/index.less
@ -176,15 +176,15 @@
    }
  }

-  ul li {
+  ul {
    list-style-type: circle;

-    li {
+    ul {
      list-style-type: disc;
    }
  }

-  ol li {
+  ol {
    list-style-type: decimal;
  }

--- a/site/theme/template/Home/RecommendPage.tsx
+++ b/site/theme/template/Home/RecommendPage.tsx
@ -24,11 +24,11 @@ const LIST_CN: Recommend[] = [
    popularize: true,
  },
  {
-    title: '我的按钮究竟该放哪儿！？',
+    title: '图表库 G2Plot 1.0 发布了！',
    description:
-      '按钮是一种使用广泛的基础界面元素，我们需要并一直在探索建立按钮设计规范。Ant Design 提供了丰富的按钮类型以覆盖各种场景。',
-    img: 'https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*wXuKQ6-ssWMAAAAAAAAAAABkARQnAQ',
-    href: 'https://zhuanlan.zhihu.com/p/109644406',
+      '开箱即用图表库 G2Plot 1.0 发布，支持 40+ 图表类型，高级统计分析组件和复杂交互内置。',
+    img: 'https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*Wv4XTIoIJ3gAAAAAAAAAAABkARQnAQ',
+    href: 'https://zhuanlan.zhihu.com/p/113888415',
  },
  {
    title: 'HiTu·让人人都是插画师',