优化tabs组件chrome模式下的样式 (#2494)

Co-authored-by: qinhaoyan <qinhaoyan@baidu.com>

docs/zh-CN/components/tabs.md

@@ -430,4 +430,4 @@ order: 68
 | tabs[x].className     | `string`                          | `"bg-white b-l b-r b-b wrapper-md"` | Tab 区域样式                                             |
 | mountOnEnter          | `boolean`                         | false                               | 只有在点中 tab 的时候才渲染                              |
 | unmountOnExit         | `boolean`                         | false                               | 切换 tab 的时候销毁                                      |
-| scrollable            | `boolean`                         | false                               | 是否导航支持内容溢出滚动                                   |
+| scrollable            | `boolean`                         | false                               | 是否导航支持内容溢出滚动，`vertical`和`chrome`模式下不支持该属性；`chrome`模式默认压缩标签                    |

scss/_properties.scss

@@ -1194,6 +1194,8 @@
   --Tabs--vertical-onActive-container-bg: var(--Tabs--vertical-bg);
   --Tabs--chrome-onHover-bg: #f6f7f8;
   --Tabs--chrome-bg: #e7eaed;
+  --Tabs--chrome-radius-size: #{px2rem(8px)};
+  --Tabs--chrome-right-boder-color: var(--borderColorDarken);
 
   --TagControl-sugBtn-bg: var(--Button--default-bg);
   --TagControl-sugBtn-border: var(--Button--default-border);

scss/components/_tabs.scss

@@ -376,24 +376,29 @@
   }
 
   &--chrome {
-    > .#{$ns}Tabs-linksContainer {
-      background: var(--Tabs--chrome-bg);
-    }
-    > .#{$ns}Tabs-links, > .#{$ns}Tabs-linksContainer > .#{$ns}Tabs-linksContainer-main > .#{$ns}Tabs-links {
+    > .#{$ns}Tabs-links {
       background: var(--Tabs--chrome-bg);
       border-bottom: 0;
+      padding: 0 px2rem(10px);
       padding-top: px2rem(8px);
+      display: flex;
       > li {
         position: relative;
         margin-bottom: 0;
-        margin-right: px2rem(-18px);
+        white-space: nowrap;
+        min-width: 0;
+        max-width: px2rem(250px);
+        padding: px2rem(7px) px2rem(20px) px2rem(6px);
+        cursor: pointer;
+        flex: 1;
 
         > a:first-child {
           background: none;
           border: none;
           position: relative;
           z-index: 5;
-          padding: px2rem(7px) px2rem(20px) px2rem(6px);
+          overflow: hidden;
+          padding: 0;
         }
 
         &.is-active {
@@ -403,29 +408,46 @@
             background: none;
             border: none;
           }
+          &:after {
+            display: none;
+          }
+        }
+
+        &:after {
+          content: '';
+          width: 1px;
+          height: calc(100% - var(--Tabs--chrome-radius-size) * 2);
+          position: absolute;
+          right: -2px;
+          background: var(--Tabs--chrome-right-boder-color);
+          top: var(--Tabs--chrome-radius-size)
         }
 
         &:hover {
           .chrome-tab-background {
             z-index: 3;
             display: block;
+            background-color: var(--Tabs--chrome-onHover-bg);
           }
-          .chrome-tab-background > svg .chrome-tab-geometry {
+          .chrome-tab-background > svg {
             fill: var(--Tabs--chrome-onHover-bg);
           }
+          &:after {
+            display: none;
+          }
         }
 
         &.is-active {
           .chrome-tab-background {
             display: block;
+            background-color: var(--Tabs-onActive-bg);
           }
-          .chrome-tab-background > svg .chrome-tab-geometry {
+          .chrome-tab-background > svg {
             fill: var(--Tabs-onActive-bg);
           }
         }
       }
     }
-
     .chrome-tab-background {
       display: none;
       position: absolute;
@@ -434,12 +456,20 @@
       left: 0;
       width: 100%;
       height: 100%;
-      overflow: hidden;
       pointer-events: none;
-    }
-    .chrome-tab-background > svg {
-      width: 100%;
-      height: 100%;
+      border-radius: var(--Tabs--chrome-radius-size) var(--Tabs--chrome-radius-size) 0 0;
+      > svg {
+        width: var(--Tabs--chrome-radius-size);
+        height: var(--Tabs--chrome-radius-size);
+        bottom: 0;
+        position: absolute;
+      }
+      > .chrome-tab-background--right {
+        right: calc(var(--Tabs--chrome-radius-size) * -1);
+      }
+      > .chrome-tab-background--left {
+        left: calc(var(--Tabs--chrome-radius-size) * -1);
+      }
     }
   }
 

src/components/Tabs.tsx

@@ -22,7 +22,7 @@ const transitionStyles: {
 };
 
 export interface TabProps extends ThemeProps {
-  title?: string; // 标题
+  title?: string | React.ReactNode; // 标题
   icon?: string;
   iconPosition?: 'left' | 'right';
   disabled?: boolean | string;
@@ -336,39 +336,13 @@ export class Tabs extends React.Component<TabsProps, any> {
           )}
           {React.isValidElement(toolbar) ? toolbar : null}
         </a>
-        {/* svg 来自 https://github.com/adamschwartz/chrome-tabs */}
         {mode === 'chrome' ? (
           <div className="chrome-tab-background">
-            <svg version="1.1" xmlns="http://www.w3.org/2000/svg">
-              <defs>
-                <symbol id="chrome-tab-geometry-left" viewBox="0 0 214 36">
-                  <path d="M17 0h197v36H0v-2c4.5 0 9-3.5 9-8V8c0-4.5 3.5-8 8-8z" />
-                </symbol>
-                <symbol id="chrome-tab-geometry-right" viewBox="0 0 214 36">
-                  <use href="#chrome-tab-geometry-left" />
-                </symbol>
-                <clipPath id="crop">
-                  <rect className="mask" width="100%" height="100%" x="0" />
-                </clipPath>
-              </defs>
-              <svg width="52%" height="100%">
-                <use
-                  href="#chrome-tab-geometry-left"
-                  width="214"
-                  height="36"
-                  className="chrome-tab-geometry"
-                />
-              </svg>
-              <g transform="scale(-1, 1)">
-                <svg width="52%" height="100%" x="-100%" y="0">
-                  <use
-                    href="#chrome-tab-geometry-right"
-                    width="214"
-                    height="36"
-                    className="chrome-tab-geometry"
-                  />
-                </svg>
-              </g>
+            <svg viewBox="0 0 124 124" className="chrome-tab-background--right">
+              <path d="M0,0 C0,68.483309 55.516691,124 124,124 L0,124 L0,-1 C0.00132103964,-0.667821298 0,-0.334064922 0,0 Z"></path>
+            </svg>
+            <svg viewBox="0 0 124 124" className="chrome-tab-background--left">
+              <path d="M124,0 L124,125 L0,125 L0,125 C68.483309,125 124,69.483309 124,1 L123.992,0 L124,0 Z"></path>
             </svg>
           </div>
         ) : null}
@@ -448,7 +422,7 @@ export class Tabs extends React.Component<TabsProps, any> {
         )}
       >
         {
-          scrollable && mode !== 'vertical' ?
+          scrollable && !['vertical', 'chrome'].includes(mode) ?
             (<div className={cx('Tabs-linksContainer', isOverflow && 'Tabs-linksContainer--overflow')}>
               {this.renderArrow('left')}
               <div