@douyinfe/semi-foundation 2.64.0 → 2.65.0-alpha.0

package/lib/cjs/tabs/tabs.css

@@ -135,18 +135,27 @@
   margin-left: 10px;
   cursor: pointer;
 }
+.semi-tabs-tab-single.semi-tabs-tab .semi-icon.semi-tabs-tab-icon-close.semi-icon-close:hover {
+  color: var(--semi-color-text-0);
+}
 .semi-tabs-tab-single.semi-tabs-tab:hover {
   color: var(--semi-color-text-0);
 }
 .semi-tabs-tab-single.semi-tabs-tab:hover .semi-icon:not(.semi-icon-checkbox_tick, .semi-icon-radio, .semi-icon-checkbox_indeterminate) {
   color: var(--semi-color-text-0);
 }
+.semi-tabs-tab-single.semi-tabs-tab:hover .semi-icon.semi-tabs-tab-icon-close {
+  color: var(--semi-color-text-2);
+}
 .semi-tabs-tab-single.semi-tabs-tab:active {
   color: var(--semi-color-text-0);
 }
 .semi-tabs-tab-single.semi-tabs-tab:active .semi-icon:not(.semi-icon-checkbox_tick, .semi-icon-radio, .semi-icon-checkbox_indeterminate) {
   color: var(--semi-color-text-0);
 }
+.semi-tabs-tab-single.semi-tabs-tab:active .semi-icon.semi-tabs-tab-icon-close {
+  color: var(--semi-color-text-2);
+}
 .semi-tabs-tab-single.semi-tabs-tab-active, .semi-tabs-tab-single.semi-tabs-tab-active:hover {
   cursor: default;
   font-weight: 600;
@@ -424,6 +433,26 @@
   border: none;
   background-color: var(--semi-color-primary-light-default);
 }
+.semi-tabs-bar-slash .semi-tabs-tab {
+  padding: 12px 0px;
+}
+.semi-tabs-bar-slash .semi-tabs-tab:nth-of-type(1) {
+  padding-left: 0;
+}
+.semi-tabs-bar-slash .semi-tabs-tab:not(:last-of-type) {
+  margin-right: 16px;
+}
+.semi-tabs-bar-slash .semi-tabs-tab:not(:last-of-type):after {
+  content: "";
+  margin-left: 16px;
+  display: inline-block;
+  height: 14px;
+  width: 8px;
+  margin-top: 3px;
+  margin-bottom: 3px;
+  vertical-align: bottom;
+  background: linear-gradient(to bottom right, transparent 0%, transparent calc(50% - 1px), var(--semi-color-text-2) 50%, transparent calc(50% + 1px), transparent 100%);
+}
 .semi-tabs-content {
   width: 100%;
   padding: 5px 0;

package/lib/cjs/tabs/tabs.scss

@@ -174,6 +174,10 @@ $ignoreIcon: '.#{$prefix}-icon-checkbox_tick, .#{$prefix}-icon-radio, .#{$prefix
                 color: var(--semi-color-text-2);
                 margin-left: 10px;
                 cursor: pointer;
+
+                &.#{$prefix}-icon-close:hover {
+                    color: var(--semi-color-text-0);
+                }
             }
 
             &:hover {
@@ -182,6 +186,10 @@ $ignoreIcon: '.#{$prefix}-icon-checkbox_tick, .#{$prefix}-icon-radio, .#{$prefix
                 .#{$prefix}-icon:not(#{$ignoreIcon}) {
                     color: $color-tabs_tab-icon-hover;
                 }
+
+                .#{$prefix}-icon.#{$module}-tab-icon-close {
+                    color: var(--semi-color-text-2);
+                }
             }
 
             &:active {
@@ -190,6 +198,10 @@ $ignoreIcon: '.#{$prefix}-icon-checkbox_tick, .#{$prefix}-icon-radio, .#{$prefix
                 .#{$prefix}-icon:not(#{$ignoreIcon}) {
                     color: $color-tabs_tab-icon-active;
                 }
+
+                .#{$prefix}-icon.#{$module}-tab-icon-close {
+                    color: var(--semi-color-text-2);
+                }
             }
         }
 
@@ -583,6 +595,36 @@ $ignoreIcon: '.#{$prefix}-icon-checkbox_tick, .#{$prefix}-icon-radio, .#{$prefix
         }
     }
 
+    &-bar-slash {
+
+        .#{$module}-tab {
+            padding: $spacing-tabs_bar_slash_tab-paddingY $spacing-tabs_bar_slash_tab-paddingX;
+
+            &:nth-of-type(1) {
+                padding-left: 0;
+            }  
+
+            &:not(:last-of-type) {
+                margin-right: $spacing-tabs_bar_slash-marginRight;
+
+                &:after {  
+                    content: "";
+                    margin-left: $spacing-tabs_bar_slash_line_marginLeft;
+                    display: inline-block;
+                    height: $height-tabs_tab_slash_line;
+                    width: $width-tabs_tab_slash_line;
+                    margin-top: $spacing-tabs_bar_slash_line_marginTop;
+                    margin-bottom: $spacing-tabs_bar_slash_line_marginBottom;
+                    vertical-align: bottom;
+                    // Get diagonal slash
+                    background: linear-gradient(to bottom right, transparent 0%, 
+                        transparent calc(50% - 1px), $color-tabs_tab_slash_line 50%,
+                        transparent calc(50% + 1px), transparent 100%);
+                }
+            }
+        }
+    }
+
     &-content {
         width: 100%;
         padding: $spacing-tabs_content-paddingY $spacing-tabs_content-paddingX;

package/lib/cjs/tabs/variables.scss

@@ -65,6 +65,8 @@ $color-tabs_tab-pane_arrow_disabled-bg-hover:  transparent;
 $color-tabs_tab-pane_arrow_disabled-text-default: var(--semi-color-disabled-text);
 $color-tabs_tab-pane_arrow_disabled-text-hover:  var(--semi-color-disabled-text);
 
+$color-tabs_tab_slash_line: var(--semi-color-text-2); //斜线式页签分割线颜色
+
 $font-tabs_tab-fontWeight: $font-weight-regular; // 页签文本字重 - 默认
 $font-tabs_tab_active-fontWeight: $font-weight-bold; // 页签文本字重 - 选中
 
@@ -79,6 +81,9 @@ $width-tabs-outline-offset: -2px; // 聚焦轮廓偏移宽度
 $width-tabs_bar_line-outline-offset: -1px; // 线条式页签聚焦轮廓偏移宽度
 $width-tabs_tab-pane_arrow-border:0px; // 滚动折叠箭头边框宽度
 
+$width-tabs_tab_slash_line: 8px; // 斜线式页签分割线宽度
+$height-tabs_tab_slash_line: 14px; // 斜线式页签分割线高度
+
 $height-tabs_bar_extra_large: 50px; // 大尺寸页签高度
 $font-tabs_bar_extra_large-lineHeight: $height-tabs_bar_extra_large; // 大尺寸页签文字行高
 
@@ -118,6 +123,13 @@ $spacing-tabs_bar_line_tab_left-padding: 12px; // 垂直线条式页签左侧内
 $spacing-tabs_bar_line_tab_left_small-padding: $spacing-tight - 2px;  // 小尺寸垂直线条式页签左侧内边距
 $spacing-tabs_bar_line_tab_left_medium-padding: $spacing-base-tight - 2px; // 中等尺寸垂直线条式页签左侧内边距
 
+$spacing-tabs_bar_slash_tab-paddingY: 12px; // 斜线式页签上下内边距
+$spacing-tabs_bar_slash_tab-paddingX: 0px; // 斜线式页签水平内边距
+$spacing-tabs_bar_slash-marginRight: 16px; // 斜线式页签右侧外边距
+$spacing-tabs_bar_slash_line_marginLeft: 16px; // 斜线式页签斜线左侧外边距
+$spacing-tabs_bar_slash_line_marginTop: 3px; // 斜线式页签斜线顶部外边距
+$spacing-tabs_bar_slash_line_marginBottom: 3px; // 斜线式页签斜线底部外边距
+
 $spacing-tabs_content-paddingY: 5px; // 页签内容区垂直方向内边距
 $spacing-tabs_content-paddingX: 0; // 页签内容区水平方向内边距
 

package/lib/es/button/button.css

@@ -46,6 +46,10 @@
 .semi-button.semi-button-primary:focus-visible, .semi-button.semi-button-secondary:focus-visible, .semi-button.semi-button-tertiary:focus-visible, .semi-button.semi-button-warning:focus-visible, .semi-button.semi-button-danger:focus-visible {
   outline: 2px solid var(--semi-color-primary-light-active);
 }
+.semi-button-content {
+  display: flex;
+  align-items: center;
+}
 .semi-button-danger {
   background-color: var(--semi-color-danger);
   color: rgba(var(--semi-white), 1);

package/lib/es/button/button.scss

@@ -36,6 +36,11 @@ $module: #{$prefix}-button;
         }
     }
 
+    &-content{
+        display: flex;
+        align-items: center;
+    }
+
     &-danger {
         background-color: $color-button_danger-bg-default;
         color: $color-button_danger-text-default;

package/lib/es/button/iconButton.css

@@ -42,9 +42,13 @@
 }
 .semi-button-content-left {
   margin-right: 8px;
+  display: flex;
+  align-items: center;
 }
 .semi-button-content-right {
   margin-left: 8px;
+  display: flex;
+  align-items: center;
 }
 
 .semi-rtl .semi-button,

package/lib/es/button/iconButton.scss

@@ -60,12 +60,16 @@ $module: #{$prefix}-button;
 
         &-left {
             margin-right: $spacing-button_iconOnly_content-marginRight;
+            display: flex;
+            align-items: center;
         }
 
         &-right {
             margin-left: $spacing-button_iconOnly_content-marginLeft;
+            display: flex;
+            align-items: center;
         }
     }
 }
 
-@import "./rtl.scss";
+@import "./rtl.scss";

package/lib/es/cascader/foundation.js

@@ -42,6 +42,7 @@ export default class CascaderFoundation extends BaseFoundation {
       }
       const removedItem = (_a = keyEntities[key]) !== null && _a !== void 0 ? _a : {};
       !((_b = removedItem === null || removedItem === void 0 ? void 0 : removedItem.data) === null || _b === void 0 ? void 0 : _b.disable) && this._handleMultipleSelect(removedItem);
+      this._adapter.rePositionDropdown();
     };
     this.handleTagRemoveInTrigger = pos => {
       const {
@@ -751,6 +752,7 @@ export default class CascaderFoundation extends BaseFoundation {
       filteredKeys: new Set(filteredKeys)
     });
     this._adapter.notifyOnSearch(sugInput);
+    this._adapter.rePositionDropdown();
   }
   handleClear() {
     const {

package/lib/es/chat/chat.css

@@ -93,7 +93,7 @@
   display: flex;
   flex-direction: row;
   margin-top: 8px;
-  margin-Bottom: 8px;
+  margin-bottom: 8px;
   column-gap: 12px;
 }
 .semi-chat-chatBox:hover .semi-chat-chatBox-action:not(.semi-chat-chatBox-action-hidden) {

package/lib/es/chat/chat.scss

@@ -119,7 +119,7 @@ $module: #{$prefix}-chat;
         display: flex;
         flex-direction: row;
         margin-top: $spacing-chat_chatBox-marginY;
-        margin-Bottom: $spacing-chat_chatBox-marginY;
+        margin-bottom: $spacing-chat_chatBox-marginY;
         column-gap: $spacing-chat_chatBox-columnGap;
 
         &:hover {

package/lib/es/datePicker/datePicker.css

@@ -5,6 +5,9 @@
   box-sizing: border-box;
   display: inline-block;
 }
+.semi-datepicker-container {
+  display: flex;
+}
 .semi-datepicker .semi-scrolllist-body .semi-scrolllist-item {
   -ms-overflow-style: none; /* Internet Explorer 10+ */
   scrollbar-width: none; /* Firefox */
@@ -531,6 +534,12 @@
 .semi-datepicker-topSlot {
   border-bottom: 1px solid var(--semi-color-border);
 }
+.semi-datepicker-leftSlot {
+  border-right: 1px solid var(--semi-color-border);
+}
+.semi-datepicker-rightSlot {
+  border-left: 1px solid var(--semi-color-border);
+}
 .semi-datepicker-bottomSlot {
   border-top: 1px solid var(--semi-color-border);
 }

package/lib/es/datePicker/datePicker.scss

@@ -8,6 +8,10 @@ $module-list: #{$prefix}-scrolllist;
     box-sizing: border-box;
     display: inline-block;
 
+    &-container {
+        display: flex;
+    }
+
     .#{$module-list}-body {
         .#{$module-list}-item {
             -ms-overflow-style: none; /* Internet Explorer 10+ */
@@ -820,6 +824,14 @@ $module-list: #{$prefix}-scrolllist;
     &-topSlot {
         border-bottom: $width-datepicker_slot-border solid $color-datepicker_border-bg-default;
     }
+    
+    &-leftSlot {
+        border-right: $width-datepicker_slot-border solid $color-datepicker_border-bg-default;
+    }
+
+    &-rightSlot {
+        border-left: $width-datepicker_slot-border solid $color-datepicker_border-bg-default;
+    }
 
     &-bottomSlot {
         border-top: $width-datepicker_slot-border solid $color-datepicker_border-bg-default;

package/lib/es/datePicker/monthsGridFoundation.js

@@ -537,7 +537,7 @@ export default class MonthsGridFoundation extends BaseFoundation {
       fullDate
     } = day;
     const time = monthDetail.pickerDate;
-    const dateStr = type === 'dateTime' ? this._mergeDateAndTime(fullDate, time) : fullDate;
+    const dateStr = fullDate;
     if (!multiple) {
       newSelected.add(dateStr);
     } else {
@@ -549,9 +549,8 @@ export default class MonthsGridFoundation extends BaseFoundation {
         newSelected.add(dateStr);
       }
     }
-    const dateFormat = this.getValidDateFormat();
     // When passed to the upper layer, it is converted into a Date object to ensure that the input parameter format of initFormDefaultValue is consistent
-    const newSelectedDates = [...newSelected].map(_dateStr => compatibleParse(_dateStr, dateFormat, undefined, dateFnsLocale));
+    const newSelectedDates = [...newSelected].map(_dateStr => type === 'dateTime' ? this._mergeDateAndTime(_dateStr, time) : compatibleParse(_dateStr, strings.FORMAT_FULL_DATE, undefined, dateFnsLocale));
     this.handleShowDateAndTime(panelType, time);
     if (!isControlledComponent) {
       // Uncontrolled components, update internal values when operating, and notify external

package/lib/es/input/foundation.d.ts

@@ -47,7 +47,7 @@ declare class InputFoundation extends BaseFoundation<InputAdapter> {
      * @param {Number} maxLength
      * @returns {String}
      */
-    handleTruncateValue(value: any, maxLength: number): any;
+    handleTruncateValue(value: any, maxLength: number): string;
     handleClear(e: any): void;
     /**
      * trigger when click input wrapper

package/lib/es/input/foundation.js

@@ -6,6 +6,7 @@ import _noop from "lodash/noop";
 import BaseFoundation from '../base/foundation';
 import { strings } from './constants';
 import { ENTER_KEY } from './../utils/keyCode';
+import truncateValue from './util/truncateValue';
 class InputFoundation extends BaseFoundation {
   static get inputDefaultAdapter() {
     return {
@@ -96,6 +97,7 @@ class InputFoundation extends BaseFoundation {
         return value;
       }
     }
+    return value;
   }
   /**
    * Truncate input values based on maximum length
@@ -107,20 +109,11 @@ class InputFoundation extends BaseFoundation {
     const {
       getValueLength
     } = this._adapter.getProps();
-    if (_isFunction(getValueLength)) {
-      let truncatedValue = '';
-      for (let i = 1, len = value.length; i <= len; i++) {
-        const currentValue = value.slice(0, i);
-        if (getValueLength(currentValue) > maxLength) {
-          return truncatedValue;
-        } else {
-          truncatedValue = currentValue;
-        }
-      }
-      return truncatedValue;
-    } else {
-      return value.slice(0, maxLength);
-    }
+    return truncateValue({
+      value,
+      maxLength,
+      getValueLength
+    });
   }
   handleClear(e) {
     let eventObj = e;

package/lib/es/input/textareaFoundation.js

@@ -5,6 +5,7 @@ import _noop from "lodash/noop";
 import BaseFoundation from '../base/foundation';
 import calculateNodeHeight from './util/calculateNodeHeight';
 import getSizingData from './util/getSizingData';
+import truncateValue from './util/truncateValue';
 export default class TextAreaFoundation extends BaseFoundation {
   static get textAreaDefaultAdapter() {
     return {
@@ -128,20 +129,11 @@ export default class TextAreaFoundation extends BaseFoundation {
     const {
       getValueLength
     } = this._adapter.getProps();
-    if (_isFunction(getValueLength)) {
-      let truncatedValue = '';
-      for (let i = 1, len = value.length; i <= len; i++) {
-        const currentValue = value.slice(0, i);
-        if (getValueLength(currentValue) > maxLength) {
-          return truncatedValue;
-        } else {
-          truncatedValue = currentValue;
-        }
-      }
-      return truncatedValue;
-    } else {
-      return value.slice(0, maxLength);
-    }
+    return truncateValue({
+      value,
+      maxLength,
+      getValueLength
+    });
   }
   handleFocus(e) {
     const {

package/lib/es/input/util/truncateValue.d.ts

@@ -0,0 +1,5 @@
+export default function truncateValue(options: {
+    value: string;
+    maxLength: number;
+    getValueLength?: (value: string) => number;
+}): string;

package/lib/es/input/util/truncateValue.js

@@ -0,0 +1,24 @@
+import _isFunction from "lodash/isFunction";
+export default function truncateValue(options) {
+  const {
+    value,
+    maxLength,
+    getValueLength
+  } = options;
+  if (_isFunction(getValueLength)) {
+    let left = 0;
+    let right = value.length;
+    while (left < right) {
+      const mid = left + Math.floor((right - left) / 2);
+      const currentValue = value.slice(0, mid + 1);
+      if (getValueLength(currentValue) > maxLength) {
+        right = mid;
+      } else {
+        left = mid + 1;
+      }
+    }
+    return value.slice(0, left);
+  } else {
+    return value.slice(0, maxLength);
+  }
+}

package/lib/es/markdownRender/foundation.d.ts

@@ -1,5 +1,6 @@
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 import { MDXProps } from 'mdx/types';
+import { type PluggableList } from "@mdx-js/mdx/lib/core";
 export interface MarkdownRenderAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
     getRuntime: () => any;
 }
@@ -7,6 +8,8 @@ export interface MarkdownRenderBaseProps {
     raw: string;
     components: MDXProps['components'];
     format: "md" | "mdx";
+    remarkPlugins?: PluggableList;
+    rehypePlugins?: PluggableList;
 }
 export interface MarkdownRenderBaseState {
     MDXContentComponent: any;

package/lib/es/markdownRender/foundation.js

@@ -32,13 +32,17 @@ class MarkdownRenderFoundation extends BaseFoundation {
   constructor() {
     super(...arguments);
     this.getOptions = () => {
+      var _a, _b, _c, _d;
       return {
         evaluateOptions: {
-          remarkPlugins: [remarkGfm],
+          remarkPlugins: [remarkGfm, ...((_a = this.getProp("remarkPlugins")) !== null && _a !== void 0 ? _a : [])],
+          rehypePlugins: (_b = this.getProp("rehypePlugins")) !== null && _b !== void 0 ? _b : [],
           format: this.getProp("format")
         },
         compileOptions: {
-          format: this.getProp("format")
+          format: this.getProp("format"),
+          remarkPlugins: [remarkGfm, ...((_c = this.getProp("remarkPlugins")) !== null && _c !== void 0 ? _c : [])],
+          rehypePlugins: (_d = this.getProp("rehypePlugins")) !== null && _d !== void 0 ? _d : []
         },
         runOptions: {}
       };

package/lib/es/overflowList/foundation.js

@@ -32,7 +32,8 @@ class OverflowListFoundation extends BaseFoundation {
     if (!this.isScrollMode()) {
       return overflow;
     }
-    const visibleStateArr = items.map(_ref => {
+    const cloneItems = copy(items);
+    const visibleStateArr = cloneItems.map(_ref => {
       let {
         key
       } = _ref;
@@ -41,8 +42,8 @@ class OverflowListFoundation extends BaseFoundation {
     const visibleStart = visibleStateArr.indexOf(true);
     const visibleEnd = visibleStateArr.lastIndexOf(true);
     const overflowList = [];
-    overflowList[0] = visibleStart >= 0 ? items.slice(0, visibleStart) : [];
-    overflowList[1] = visibleEnd >= 0 ? items.slice(visibleEnd + 1, items.length) : items;
+    overflowList[0] = visibleStart >= 0 ? cloneItems.slice(0, visibleStart) : [];
+    overflowList[1] = visibleEnd >= 0 ? cloneItems.slice(visibleEnd + 1, cloneItems.length) : cloneItems;
     return overflowList;
   }
   handleIntersect(entries) {

package/lib/es/slider/foundation.js

@@ -302,7 +302,12 @@ export default class SliderFoundation extends BaseFoundation {
         };
       })();
       if (Array.isArray(inputValue)) {
-        return [transWay(inputValue[0]), transWay(inputValue[1])];
+        const min = transWay(inputValue[0]);
+        const max = transWay(inputValue[1]);
+        if (min > max) {
+          return this.getState("focusPos") === "min" ? [max, max] : [min, min];
+        }
+        return [min, max];
       } else {
         return transWay(inputValue);
       }

package/lib/es/table/animation.scss

@@ -1,3 +1,5 @@
 $transition_duration-table_body-bg: var(--semi-transition_duration-none); // 表格-背景颜色-动画持续时间
 $transition_function-table_body-bg: var(--semi-transition_function-easeOut); // 表格-背景颜色-过渡曲线
 $transition_delay-table_body-bg: 0ms; // 表格-背景颜色-延迟时间
+$transition_duration-table_row-head-bg: 0.1s; // 表格-行头-背景颜色-动画持续时间
+$transition_function-table_row-head-bg: linear; // 表格-行头-背景颜色-过渡曲线

package/lib/es/table/table.css

@@ -134,6 +134,16 @@
   vertical-align: middle;
   overflow-wrap: break-word;
   position: relative;
+  transition: background-color 0.1s linear;
+}
+.semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-row-head-clickSort {
+  cursor: pointer;
+}
+.semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-row-head-clickSort:hover {
+  background: var(--semi-color-fill-0);
+}
+.semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-row-head-clickSort:hover.semi-table-cell-fixed-left::before, .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-row-head-clickSort:hover.semi-table-cell-fixed-right::before {
+  background-color: transparent;
 }
 .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-left, .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-right {
   z-index: 101;

package/lib/es/table/table.scss

@@ -140,6 +140,23 @@ $module: #{$prefix}-table;
                 // word-break: break-all;
                 // word-wrap: break-word;
                 position: relative;
+                transition: background-color $transition_duration-table_row-head-bg $transition_function-table_row-head-bg;
+
+                &.#{$module}-row-head-clickSort {
+                    cursor: pointer;
+                    &:hover {
+                        background: $color-table_th-clickSort-bg-hover;
+                        
+                        &.#{$module}-cell-fixed {
+                            &-left,
+                            &-right {
+                                &::before {
+                                    background-color: transparent;
+                                }
+                            }
+                        }
+                    }
+                }
 
                 &.#{$module}-cell-fixed {
                     &-left,

package/lib/es/table/variables.scss

@@ -57,6 +57,7 @@ $color-table_shadow-border-default: var(--semi-color-border); // 表格拟阴影
 $color-table_th-bg-default: var(--semi-color-bg-1); // 表头背景色
 $color-table_th-border-default: var(--semi-color-border); // 表头底部分割线颜色
 $color-table_th-text-default: var(--semi-color-text-2); // 表头文字颜色
+$color-table_th-clickSort-bg-hover: var(--semi-color-fill-0); //点击表头触发排序背景色 - 悬浮
 
 $color-table_pl-bg-default: transparent;
 $color-table_body-bg-default: var(--semi-color-bg-1); // 表格背景颜色 - 默认

package/lib/es/tabs/constants.d.ts

@@ -4,6 +4,7 @@ declare const cssClasses: {
     TABS_BAR_LINE: string;
     TABS_BAR_CARD: string;
     TABS_BAR_BUTTON: string;
+    TABS_BAR_SLASH: string;
     TABS_BAR_EXTRA: string;
     TABS_TAB: string;
     TABS_TAB_ACTIVE: string;

package/lib/es/tabs/constants.js

@@ -5,6 +5,7 @@ const cssClasses = {
   TABS_BAR_LINE: `${BASE_CLASS_PREFIX}-tabs-bar-line`,
   TABS_BAR_CARD: `${BASE_CLASS_PREFIX}-tabs-bar-card`,
   TABS_BAR_BUTTON: `${BASE_CLASS_PREFIX}-tabs-bar-button`,
+  TABS_BAR_SLASH: `${BASE_CLASS_PREFIX}-tabs-bar-slash`,
   TABS_BAR_EXTRA: `${BASE_CLASS_PREFIX}-tabs-bar-extra`,
   TABS_TAB: `${BASE_CLASS_PREFIX}-tabs-tab`,
   TABS_TAB_ACTIVE: `${BASE_CLASS_PREFIX}-tabs-tab-active`,
@@ -26,7 +27,7 @@ const numbers = {
   DEFAULT_ACTIVE_KEY: 1
 };
 const strings = {
-  TYPE_MAP: ['line', 'card', 'button'],
+  TYPE_MAP: ['line', 'card', 'button', 'slash'],
   SIZE: ['small', 'medium', 'large'],
   POSITION_MAP: ['top', 'left']
 };

package/lib/es/tabs/tabs.css

@@ -135,18 +135,27 @@
   margin-left: 10px;
   cursor: pointer;
 }
+.semi-tabs-tab-single.semi-tabs-tab .semi-icon.semi-tabs-tab-icon-close.semi-icon-close:hover {
+  color: var(--semi-color-text-0);
+}
 .semi-tabs-tab-single.semi-tabs-tab:hover {
   color: var(--semi-color-text-0);
 }
 .semi-tabs-tab-single.semi-tabs-tab:hover .semi-icon:not(.semi-icon-checkbox_tick, .semi-icon-radio, .semi-icon-checkbox_indeterminate) {
   color: var(--semi-color-text-0);
 }
+.semi-tabs-tab-single.semi-tabs-tab:hover .semi-icon.semi-tabs-tab-icon-close {
+  color: var(--semi-color-text-2);
+}
 .semi-tabs-tab-single.semi-tabs-tab:active {
   color: var(--semi-color-text-0);
 }
 .semi-tabs-tab-single.semi-tabs-tab:active .semi-icon:not(.semi-icon-checkbox_tick, .semi-icon-radio, .semi-icon-checkbox_indeterminate) {
   color: var(--semi-color-text-0);
 }
+.semi-tabs-tab-single.semi-tabs-tab:active .semi-icon.semi-tabs-tab-icon-close {
+  color: var(--semi-color-text-2);
+}
 .semi-tabs-tab-single.semi-tabs-tab-active, .semi-tabs-tab-single.semi-tabs-tab-active:hover {
   cursor: default;
   font-weight: 600;
@@ -424,6 +433,26 @@
   border: none;
   background-color: var(--semi-color-primary-light-default);
 }
+.semi-tabs-bar-slash .semi-tabs-tab {
+  padding: 12px 0px;
+}
+.semi-tabs-bar-slash .semi-tabs-tab:nth-of-type(1) {
+  padding-left: 0;
+}
+.semi-tabs-bar-slash .semi-tabs-tab:not(:last-of-type) {
+  margin-right: 16px;
+}
+.semi-tabs-bar-slash .semi-tabs-tab:not(:last-of-type):after {
+  content: "";
+  margin-left: 16px;
+  display: inline-block;
+  height: 14px;
+  width: 8px;
+  margin-top: 3px;
+  margin-bottom: 3px;
+  vertical-align: bottom;
+  background: linear-gradient(to bottom right, transparent 0%, transparent calc(50% - 1px), var(--semi-color-text-2) 50%, transparent calc(50% + 1px), transparent 100%);
+}
 .semi-tabs-content {
   width: 100%;
   padding: 5px 0;