@douyinfe/semi-foundation 2.65.2-alpha.1 → 2.66.0-beta.0

package/hotKeys/constants.ts

@@ -0,0 +1,69 @@
+import { BASE_CLASS_PREFIX } from "../base/constants";
+
+const cssClasses = {
+    PREFIX: `${BASE_CLASS_PREFIX}-hotKeys`,
+} as const;
+
+const strings = {
+};
+
+export { cssClasses, strings };
+
+export function keyToCode(key: KeyboardEvent["key"]) {
+    const keyCodeMap = {
+        // alpha
+        'a': 'KeyA', 'b': 'KeyB', 'c': 'KeyC', 'd': 'KeyD', 'e': 'KeyE',
+        'f': 'KeyF', 'g': 'KeyG', 'h': 'KeyH', 'i': 'KeyI', 'j': 'KeyJ',
+        'k': 'KeyK', 'l': 'KeyL', 'm': 'KeyM', 'n': 'KeyN', 'o': 'KeyO',
+        'p': 'KeyP', 'q': 'KeyQ', 'r': 'KeyR', 's': 'KeyS', 't': 'KeyT',
+        'u': 'KeyU', 'v': 'KeyV', 'w': 'KeyW', 'x': 'KeyX', 'y': 'KeyY',
+        'z': 'KeyZ',
+
+        // digit
+        '0': 'Digit0', '1': 'Digit1', '2': 'Digit2', '3': 'Digit3',
+        '4': 'Digit4', '5': 'Digit5', '6': 'Digit6', '7': 'Digit7', 
+        '8': 'Digit8', '9': 'Digit9',
+
+        // punctuation
+        ' ': 'Space', 'enter': 'Enter', 'escape': 'Escape', 'backspace': 'Backspace',
+        'tab': 'Tab', '-': 'Minus', '=': 'Equal', '[': 'BracketLeft',
+        ']': 'BracketRight', '\\': 'Backslash', ';': 'Semicolon', 
+        "'": 'Quote', '`': 'Backquote', ',': 'Comma', '.': 'Period',
+        '/': 'Slash', '?': 'Slash', '!': 'Digit1', '@': 'Digit2',
+        '#': 'Digit3', '$': 'Digit4', '%': 'Digit5', '^': 'Digit6',
+        '&': 'Digit7', '*': 'Digit8', '(': 'Digit9', ')': 'Digit0',
+
+        // arrow
+        'arrowup': 'ArrowUp', 'arrowdown': 'ArrowDown',
+        'arrowleft': 'ArrowLeft', 'arrowright': 'ArrowRight',
+
+        // function
+        'shift': 'ShiftLeft', 'control': 'ControlLeft', 'alt': 'AltLeft',
+        'meta': 'MetaLeft', 'capslock': 'CapsLock', 'f1': 'F1', 
+        'f2': 'F2', 'f3': 'F3', 'f4': 'F4', 'f5': 'F5', 'f6': 'F6', 
+        'f7': 'F7', 'f8': 'F8', 'f9': 'F9', 'f10': 'F10', 'f11': 'F11', 
+        'f12': 'F12', 'insert': 'Insert', 'delete': 'Delete', 'home': 'Home', 
+        'end': 'End', 'pageup': 'PageUp', 'pagedown': 'PageDown',
+        'numlock': 'NumLock', 'scrolllock': 'ScrollLock', 'pause': 'Pause',
+
+        // numpad
+        'numpad0': 'Numpad0', 'numpad1': 'Numpad1', 'numpad2': 'Numpad2',
+        'numpad3': 'Numpad3', 'numpad4': 'Numpad4', 'numpad5': 'Numpad5',
+        'numpad6': 'Numpad6', 'numpad7': 'Numpad7', 'numpad8': 'Numpad8',
+        'numpad9': 'Numpad9', 'numpaddecimal': 'NumpadDecimal', 
+        'numpaddivide': 'NumpadDivide', 'numpadmultiply': 'NumpadMultiply', 
+        'numpadsubtract': 'NumpadSubtract', 'numpadadd': 'NumpadAdd', 
+        'numpadenter': 'NumpadEnter',
+
+        // Others
+        'printscreen': 'PrintScreen', 'contextmenu': 'ContextMenu',
+        'help': 'Help', 'select': 'Select', 'execute': 'Execute', 
+        'clear': 'Clear', 'kana': 'KanaMode', 'kanji': 'KanjiMode',
+        'nonconvert': 'NonConvert', 'convert': 'Convert', 
+        'process': 'Process', 'accept': 'Accept', 'modechange': 'ModeChange',
+        'launchapp1': 'LaunchApp1', 'launchapp2': 'LaunchApp2',
+        'launchmail': 'LaunchMail', 'mediaselect': 'MediaSelect'
+    };
+
+    return keyCodeMap[key.toLowerCase()] || undefined;
+}

package/hotKeys/foundation.ts

@@ -0,0 +1,65 @@
+import BaseFoundation, { DefaultAdapter } from '../base/foundation';
+import { keyToCode } from './constants';
+
+export interface HotKeysAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
+    notifyClick: () => void;
+    getListenerTarget: () => HTMLElement
+}
+
+export default class HotKeysFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<HotKeysAdapter<P, S>, P, S> {
+    constructor(adapter: HotKeysAdapter<P, S>) {
+        super({ ...adapter });
+    }
+
+    init(): void {
+        // init Listener
+        const target = this._adapter.getListenerTarget();
+        target?.addEventListener('keydown', this.handleKeyDown);
+    }
+
+    handleKeyDown = (event: KeyboardEvent): void => {
+        const disabled = this.getProps().disabled;
+        if (disabled) {
+            return;
+        }
+        const hotKeys = this.getProps().hotKeys;
+        let allModifier = new Array(4).fill(false); // Meta Shift Alt Ctrl
+        let clickedModifier = [event.metaKey, event.shiftKey, event.altKey, event.ctrlKey];
+        const keysPressed = hotKeys?.map((key: KeyboardEvent["key"])=> {
+            if (key === "Meta") {
+                allModifier[0] = true;
+                return event.metaKey; 
+            } else if (key === "Shift") {
+                allModifier[1] = true;
+                return event.shiftKey;
+            } else if (key === "Alt") {
+                allModifier[2] = true;
+                return event.altKey;
+            } else if (key === "Control") {
+                allModifier[3] = true;
+                return event.ctrlKey;
+            }
+            return event.code === keyToCode(key); 
+        });
+
+        if (!allModifier.every((value, index) => value === clickedModifier[index])) {
+            return;
+        }
+        if (keysPressed.every(Boolean)) {
+            event.preventDefault();
+            this.handleClick();
+            return;
+        }
+        
+    }
+
+    handleClick(): void {
+        this._adapter.notifyClick();
+    }
+
+    destroy(): void {
+        // remove Listener
+        const target = this._adapter.getListenerTarget();
+        target?.removeEventListener('keydown', this.handleKeyDown);
+    }
+}

package/hotKeys/hotKeys.scss

@@ -0,0 +1,29 @@
+@import "./variables.scss";
+
+$module: #{$prefix}-hotKeys;
+
+.#{$module} {
+    box-sizing: border-box;
+    position: relative;
+    user-select: none;
+    white-space: nowrap;
+    vertical-align: bottom;
+    @include all-center;
+    display: inline-flex;
+
+    &-content {
+        @include font-size-small;
+        border-radius: $radius-hotKeys;
+        height: $height-hotKeys;
+        padding: $spacing-hotKeys-paddingY $spacing-hotKeys-paddingX;
+        border: $width-hotKeys-border;
+        background-color: $color-hotKeys-bg;
+        color: $color-hotKeys-text;
+    }
+
+    &-split {
+        @include font-size-small;
+        margin: 0 3px;
+    }
+
+}

package/hotKeys/variables.scss

@@ -0,0 +1,9 @@
+$color-hotKeys-bg: var(--semi-color-fill-0); // 快捷键背景颜色
+$color-hotKeys-text: var(--semi-color-text-2); // 快捷键文字颜色
+
+$width-hotKeys-border: 1px; // 快捷键描边宽度
+$radius-hotKeys: 2px; // 边框半径
+
+$height-hotKeys: 20px; // 快捷键高度
+$spacing-hotKeys-paddingY: 2px;
+$spacing-hotKeys-paddingX: $spacing-tight;

package/lib/cjs/hotKeys/constants.d.ts

@@ -0,0 +1,6 @@
+declare const cssClasses: {
+    readonly PREFIX: "semi-hotKeys";
+};
+declare const strings: {};
+export { cssClasses, strings };
+export declare function keyToCode(key: KeyboardEvent["key"]): any;

package/lib/cjs/hotKeys/constants.js

@@ -0,0 +1,151 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.cssClasses = void 0;
+exports.keyToCode = keyToCode;
+exports.strings = void 0;
+var _constants = require("../base/constants");
+const cssClasses = exports.cssClasses = {
+  PREFIX: `${_constants.BASE_CLASS_PREFIX}-hotKeys`
+};
+const strings = exports.strings = {};
+function keyToCode(key) {
+  const keyCodeMap = {
+    // alpha
+    'a': 'KeyA',
+    'b': 'KeyB',
+    'c': 'KeyC',
+    'd': 'KeyD',
+    'e': 'KeyE',
+    'f': 'KeyF',
+    'g': 'KeyG',
+    'h': 'KeyH',
+    'i': 'KeyI',
+    'j': 'KeyJ',
+    'k': 'KeyK',
+    'l': 'KeyL',
+    'm': 'KeyM',
+    'n': 'KeyN',
+    'o': 'KeyO',
+    'p': 'KeyP',
+    'q': 'KeyQ',
+    'r': 'KeyR',
+    's': 'KeyS',
+    't': 'KeyT',
+    'u': 'KeyU',
+    'v': 'KeyV',
+    'w': 'KeyW',
+    'x': 'KeyX',
+    'y': 'KeyY',
+    'z': 'KeyZ',
+    // digit
+    '0': 'Digit0',
+    '1': 'Digit1',
+    '2': 'Digit2',
+    '3': 'Digit3',
+    '4': 'Digit4',
+    '5': 'Digit5',
+    '6': 'Digit6',
+    '7': 'Digit7',
+    '8': 'Digit8',
+    '9': 'Digit9',
+    // punctuation
+    ' ': 'Space',
+    'enter': 'Enter',
+    'escape': 'Escape',
+    'backspace': 'Backspace',
+    'tab': 'Tab',
+    '-': 'Minus',
+    '=': 'Equal',
+    '[': 'BracketLeft',
+    ']': 'BracketRight',
+    '\\': 'Backslash',
+    ';': 'Semicolon',
+    "'": 'Quote',
+    '`': 'Backquote',
+    ',': 'Comma',
+    '.': 'Period',
+    '/': 'Slash',
+    '?': 'Slash',
+    '!': 'Digit1',
+    '@': 'Digit2',
+    '#': 'Digit3',
+    '$': 'Digit4',
+    '%': 'Digit5',
+    '^': 'Digit6',
+    '&': 'Digit7',
+    '*': 'Digit8',
+    '(': 'Digit9',
+    ')': 'Digit0',
+    // arrow
+    'arrowup': 'ArrowUp',
+    'arrowdown': 'ArrowDown',
+    'arrowleft': 'ArrowLeft',
+    'arrowright': 'ArrowRight',
+    // function
+    'shift': 'ShiftLeft',
+    'control': 'ControlLeft',
+    'alt': 'AltLeft',
+    'meta': 'MetaLeft',
+    'capslock': 'CapsLock',
+    'f1': 'F1',
+    'f2': 'F2',
+    'f3': 'F3',
+    'f4': 'F4',
+    'f5': 'F5',
+    'f6': 'F6',
+    'f7': 'F7',
+    'f8': 'F8',
+    'f9': 'F9',
+    'f10': 'F10',
+    'f11': 'F11',
+    'f12': 'F12',
+    'insert': 'Insert',
+    'delete': 'Delete',
+    'home': 'Home',
+    'end': 'End',
+    'pageup': 'PageUp',
+    'pagedown': 'PageDown',
+    'numlock': 'NumLock',
+    'scrolllock': 'ScrollLock',
+    'pause': 'Pause',
+    // numpad
+    'numpad0': 'Numpad0',
+    'numpad1': 'Numpad1',
+    'numpad2': 'Numpad2',
+    'numpad3': 'Numpad3',
+    'numpad4': 'Numpad4',
+    'numpad5': 'Numpad5',
+    'numpad6': 'Numpad6',
+    'numpad7': 'Numpad7',
+    'numpad8': 'Numpad8',
+    'numpad9': 'Numpad9',
+    'numpaddecimal': 'NumpadDecimal',
+    'numpaddivide': 'NumpadDivide',
+    'numpadmultiply': 'NumpadMultiply',
+    'numpadsubtract': 'NumpadSubtract',
+    'numpadadd': 'NumpadAdd',
+    'numpadenter': 'NumpadEnter',
+    // Others
+    'printscreen': 'PrintScreen',
+    'contextmenu': 'ContextMenu',
+    'help': 'Help',
+    'select': 'Select',
+    'execute': 'Execute',
+    'clear': 'Clear',
+    'kana': 'KanaMode',
+    'kanji': 'KanjiMode',
+    'nonconvert': 'NonConvert',
+    'convert': 'Convert',
+    'process': 'Process',
+    'accept': 'Accept',
+    'modechange': 'ModeChange',
+    'launchapp1': 'LaunchApp1',
+    'launchapp2': 'LaunchApp2',
+    'launchmail': 'LaunchMail',
+    'mediaselect': 'MediaSelect'
+  };
+  return keyCodeMap[key.toLowerCase()] || undefined;
+}

package/lib/cjs/hotKeys/foundation.d.ts

@@ -0,0 +1,12 @@
+import BaseFoundation, { DefaultAdapter } from '../base/foundation';
+export interface HotKeysAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
+    notifyClick: () => void;
+    getListenerTarget: () => HTMLElement;
+}
+export default class HotKeysFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<HotKeysAdapter<P, S>, P, S> {
+    constructor(adapter: HotKeysAdapter<P, S>);
+    init(): void;
+    handleKeyDown: (event: KeyboardEvent) => void;
+    handleClick(): void;
+    destroy(): void;
+}

package/lib/cjs/hotKeys/foundation.js

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _foundation = _interopRequireDefault(require("../base/foundation"));
+var _constants = require("./constants");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+class HotKeysFoundation extends _foundation.default {
+  constructor(adapter) {
+    super(Object.assign({}, adapter));
+    this.handleKeyDown = event => {
+      const disabled = this.getProps().disabled;
+      if (disabled) {
+        return;
+      }
+      const hotKeys = this.getProps().hotKeys;
+      let allModifier = new Array(4).fill(false); // Meta Shift Alt Ctrl
+      let clickedModifier = [event.metaKey, event.shiftKey, event.altKey, event.ctrlKey];
+      const keysPressed = hotKeys === null || hotKeys === void 0 ? void 0 : hotKeys.map(key => {
+        if (key === "Meta") {
+          allModifier[0] = true;
+          return event.metaKey;
+        } else if (key === "Shift") {
+          allModifier[1] = true;
+          return event.shiftKey;
+        } else if (key === "Alt") {
+          allModifier[2] = true;
+          return event.altKey;
+        } else if (key === "Control") {
+          allModifier[3] = true;
+          return event.ctrlKey;
+        }
+        return event.code === (0, _constants.keyToCode)(key);
+      });
+      if (!allModifier.every((value, index) => value === clickedModifier[index])) {
+        return;
+      }
+      if (keysPressed.every(Boolean)) {
+        event.preventDefault();
+        this.handleClick();
+        return;
+      }
+    };
+  }
+  init() {
+    // init Listener
+    const target = this._adapter.getListenerTarget();
+    target === null || target === void 0 ? void 0 : target.addEventListener('keydown', this.handleKeyDown);
+  }
+  handleClick() {
+    this._adapter.notifyClick();
+  }
+  destroy() {
+    // remove Listener
+    const target = this._adapter.getListenerTarget();
+    target === null || target === void 0 ? void 0 : target.removeEventListener('keydown', this.handleKeyDown);
+  }
+}
+exports.default = HotKeysFoundation;

package/lib/cjs/hotKeys/hotKeys.css

@@ -0,0 +1,31 @@
+/* shadow */
+/* sizing */
+/* spacing */
+.semi-hotKeys {
+  box-sizing: border-box;
+  position: relative;
+  user-select: none;
+  white-space: nowrap;
+  vertical-align: bottom;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  display: inline-flex;
+}
+.semi-hotKeys-content {
+  font-size: 12px;
+  line-height: 16px;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  border-radius: 2px;
+  height: 20px;
+  padding: 2px 8px;
+  border: 1px;
+  background-color: var(--semi-color-fill-0);
+  color: var(--semi-color-text-2);
+}
+.semi-hotKeys-split {
+  font-size: 12px;
+  line-height: 16px;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  margin: 0 3px;
+}

package/lib/cjs/hotKeys/hotKeys.scss

@@ -0,0 +1,29 @@
+@import "./variables.scss";
+
+$module: #{$prefix}-hotKeys;
+
+.#{$module} {
+    box-sizing: border-box;
+    position: relative;
+    user-select: none;
+    white-space: nowrap;
+    vertical-align: bottom;
+    @include all-center;
+    display: inline-flex;
+
+    &-content {
+        @include font-size-small;
+        border-radius: $radius-hotKeys;
+        height: $height-hotKeys;
+        padding: $spacing-hotKeys-paddingY $spacing-hotKeys-paddingX;
+        border: $width-hotKeys-border;
+        background-color: $color-hotKeys-bg;
+        color: $color-hotKeys-text;
+    }
+
+    &-split {
+        @include font-size-small;
+        margin: 0 3px;
+    }
+
+}

package/lib/cjs/hotKeys/variables.scss

@@ -0,0 +1,9 @@
+$color-hotKeys-bg: var(--semi-color-fill-0); // 快捷键背景颜色
+$color-hotKeys-text: var(--semi-color-text-2); // 快捷键文字颜色
+
+$width-hotKeys-border: 1px; // 快捷键描边宽度
+$radius-hotKeys: 2px; // 边框半径
+
+$height-hotKeys: 20px; // 快捷键高度
+$spacing-hotKeys-paddingY: 2px;
+$spacing-hotKeys-paddingX: $spacing-tight;

package/lib/cjs/overflowList/foundation.js

@@ -5,9 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _get2 = _interopRequireDefault(require("lodash/get"));
-var _fastCopy = _interopRequireDefault(require("fast-copy"));
 var _foundation = _interopRequireDefault(require("../base/foundation"));
 var _constants = require("./constants");
+var _fastCopy = _interopRequireDefault(require("fast-copy"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const Boundary = _constants.strings.BOUNDARY_MAP;
 const OverflowDirection = _constants.strings.OVERFLOW_DIR;

package/lib/cjs/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/cjs/tabs/constants.js

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

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;