@douyinfe/semi-foundation 2.24.2 → 2.25.0-alpha.0

package/lib/cjs/avatar/foundation.js

@@ -4,22 +4,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _foundation = _interopRequireDefault(require("../base/foundation"));
-
 var _warning = _interopRequireDefault(require("../utils/warning"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 class AvatarFoundation extends _foundation.default {
   constructor(adapter) {
     super(Object.assign({}, adapter));
-
     this.handleFocusVisible = event => {
       const {
         target
       } = event;
-
       try {
         if (target.matches(':focus-visible')) {
           this._adapter.setFocusVisible(true);
@@ -28,37 +22,45 @@ class AvatarFoundation extends _foundation.default {
         (0, _warning.default)(true, 'Warning: [Semi Avatar] The current browser does not support the focus-visible');
       }
     };
-
     this.handleBlur = () => {
       this._adapter.setFocusVisible(false);
     };
+    this.changeScale = () => {
+      const {
+        gap
+      } = this.getProps();
+      const node = this._adapter.getAvatarNode();
+      const stringNode = node === null || node === void 0 ? void 0 : node.firstChild;
+      const [nodeWidth, stringNodeWidth] = [(node === null || node === void 0 ? void 0 : node.offsetWidth) || 0, (stringNode === null || stringNode === void 0 ? void 0 : stringNode.offsetWidth) || 0];
+      if (nodeWidth !== 0 && stringNodeWidth !== 0 && gap * 2 < nodeWidth) {
+        const scale = nodeWidth - gap * 2 > stringNodeWidth ? 1 : (nodeWidth - gap * 2) / stringNodeWidth;
+        this._adapter.setScale(scale);
+      }
+    };
   }
-
-  init() {} // eslint-disable-line
-
-
-  destroy() {} // eslint-disable-line
-
-
+  init() {
+    const {
+      children
+    } = this.getProps();
+    if (typeof children === "string") {
+      this.changeScale();
+    }
+  }
+  destroy() {}
   handleImgLoadError() {
     const {
       onError
     } = this.getProps();
     const errorFlag = onError ? onError() : undefined;
-
     if (errorFlag !== false) {
       this._adapter.notifyImgState(false);
     }
   }
-
   handleEnter(e) {
     this._adapter.notifyEnter(e);
   }
-
   handleLeave(e) {
     this._adapter.notifyLeave(e);
   }
-
 }
-
 exports.default = AvatarFoundation;

package/lib/cjs/avatar/variables.scss

@@ -24,29 +24,85 @@ $font-avatar_extra_large-lineHeight: 77px; // 文本行高 - 超大
 
 $radius-avatar: var(--semi-border-radius-circle); // 头像圆角
 
-$width-avatar_extra_large-border: 3px; // 头像描边尺寸 - 超大
-$spacing-avatar_extra_large-marginLeft: -32px; // 头像左侧外边距 - 超大
+$width-avatar_extra_large-border: 3px; // 头像组头像描边尺寸 - 超大
+$spacing-avatar_extra_large-marginLeft: -32px; // 头像组头像左侧外边距 - 超大
 
-$width-avatar_large-border: 3px; // 头像描边尺寸 - 大
+$width-avatar_large-border: 3px; // 头像组头像描边尺寸 - 大
 $spacing-avatar_large-marginLeft: -18px; // 头像左侧外边距 - 大
 
-$width-avatar_medium-border: 2px; // 头像描边尺寸 - 中
+$width-avatar_medium-border: 2px; // 头像组头像描边尺寸 - 中
 $spacing-avatar_medium-marginLeft: -12px; // 头像左侧外边距 - 中
 
-$width-avatar_default-border: 2px; // 头像描边尺寸 - 默认
+$width-avatar_default-border: 2px; // 头像组头像描边尺寸 - 默认
 $spacing-avatar_default-marginLeft: -12px; // 头像左侧外边距 - 默认
 
-$width-avatar_small-border: 2px; // 头像描边尺寸 - 小
+$width-avatar_small-border: 2px; // 头像组头像描边尺寸 - 小
 $spacing-avatar_small-marginLeft: -12px; // 头像左侧外边距 - 小
 
-$width-avatar_extra_small-border: 1px; // 头像描边尺寸 - 超小
+$width-avatar_extra_small-border: 1px; // 头像组头像描边尺寸 - 超小
 $spacing-avatar_extra_small-marginLeft: -10px; // 头像左侧外边距 - 超小
 
-$width-avatar_extra_extra_small-border: 1px; // 头像描边尺寸 - 极小
+$width-avatar_extra_extra_small-border: 1px; // 头像组头像描边尺寸 - 极小
 $spacing-avatar_extra_extra_small-marginLeft: -4px; // 头像左侧外边距 - 极小
-
 $width-avatar-outline: 2px; //头像聚焦轮廓宽度
 
+$width-avatar_additional-border: 1.5px; // 额外描边尺寸
+$color-avatar_additional-border: var(--semi-color-primary); // 额外描边颜色
+$spacing-avatar_additional-borderGap: 2px; // 额外描边与内侧间距
+
+$width-avatar-bottom_slot_circle_small: 12px; // small 头像底部 slot 圆形半径
+$width-avatar-bottom_slot_circle_default: 16px; // default 头像底部 slot 圆形半径
+$width-avatar-bottom_slot_circle_medium: 18px; // medium 头像底部 slot 圆形半径
+$width-avatar-bottom_slot_circle_large: 28px; // large 头像底部 slot 圆形半径
+$width-avatar-bottom_slot_circle_extra_large: 28px; // extra large 头像底部 slot 圆形半径
+$color-avatar-bottom_slot_bg:var(--semi-color-primary); // 头像底部 slot 背景色
+
+$radius-avatar-bottom_slot_square:4px;  // 底部 slot square 圆角
+$font-avatar_bottom_slot-small-fontSize: 5px; // small 底部 slot 文字大小
+$font-avatar_bottom_slot-default-fontSize: 12px; // default 底部 slot 文字大小
+$font-avatar_bottom_slot-medium-fontSize: 12px; // medium 底部 slot 文字大小
+$font-avatar_bottom_slot-large-fontSize: 12px; // large 底部 slot 文字大小
+$font-avatar_bottom_slot-extra_large-fontSize: 14px; // extra large 底部 slot 文字大小
+$spacing-avatar-bottom_slot_square-paddingX:4px; // 底部 slot square 形状左边距
+$spacing-avatar-bottom_slot_square-paddingY:1px; //底部 slot square 形状右边距
+
+$font-avatar_top_slot-small-fontSize: 5px; // small 顶部 slot 文字大小
+$font-avatar_top_slot-default-fontSize: 6px; // default 顶部 slot 文字大小
+$font-avatar_top_slot-medium-fontSize: 8px; // medium 顶部 slot 文字大小
+$font-avatar_top_slot-large-fontSize: 14px; // large 顶部 slot 文字大小
+$font-avatar_top_slot-extra_large-fontSize: 16px; // extra large 顶部 slot 文字大小
+
+$spacing-avatar-top_slot_small-content-marginTop: 0px; // small 顶部文字 marginTop
+$spacing-avatar-top_slot_default-content-marginTop: -2px; // default 顶部文字 marginTop
+$spacing-avatar-top_slot_medium-content-marginTop: 0px; // medium 顶部文字 marginTop
+$spacing-avatar-top_slot_large-content-marginTop: 0px; // large 顶部文字 marginTop
+$spacing-avatar-top_slot_extra_large-content-marginTop: 0px; // extra large 顶部文字 marginTop 
+
+$color-avatar-bottom_slot_square-border:var(--semi-color-bg-0); // 底部 square 边框颜色
+$width-avatar-bottom_slot_square_small-border:2px; // small 头像底部 square 边框宽度
+$width-avatar-bottom_slot_square_default-border:2px; // default 头像底部 square 边框宽度
+$width-avatar-bottom_slot_square_medium-border:2px; // medium 头像底部 square 边框宽度 
+$width-avatar-bottom_slot_square_large-border:2px; // large 头像底部 square 边框宽度
+$width-avatar-bottom_slot_square_extra_large-border:2px; // extra large 头像底部 square 边框宽度
+
+$color-avatar-top_slot_text:var(--semi-color-bg-0); //顶部 Slot 文字颜色
+$color-avatar-top_slot_gradient_start: var(--semi-color-primary); // 顶部 slot 渐变起始色
+$color-avatar-top_slot_gradient_end: var(--semi-color-primary); //  顶部 slot 渐变结束色
+
+
+$spacing-avatar-top_slot_small-shift: -28px; // small 顶部 slot 偏移量, 和 scale 一起控制 slot 的位置
+$spacing-avatar-top_slot_default-shift: -32px; // default 顶部 slot 偏移量, 和 scale 一起控制 slot 的位置
+$spacing-avatar-top_slot_medium-shift: -30px; // medium 顶部 slot 偏移量, 和 scale 一起控制 slot 的位置
+$spacing-avatar-top_slot_large-shift: -30px; // large 顶部 slot 偏移量, 和 scale 一起控制 slot 的位置
+$spacing-avatar-top_slot_extra_large-shift: -32px; // extra large 顶部 slot 偏移量, 和 scale 一起控制 slot 的位置
+
+$spacing-avatar-top_slot_small-scale: 0.4; // small 顶部 slot 缩放比例
+$spacing-avatar-top_slot_default-scale: 0.7; // default 顶部 slot 缩放比例
+$spacing-avatar-top_slot_medium-scale: 0.8; // medium 顶部 slot 缩放比例
+$spacing-avatar-top_slot_large-scale: 1.1; // large 顶部 slot 缩放比例
+$spacing-avatar-top_slot_extra_large-scale: 1.4; // large 顶部 slot 缩放比例 
+
+
 // radius
 $radius-avatar_extra_extra_small: 3px; // 极小尺寸头像的圆角
 $radius-avatar_extra_small: 3px; // 超小尺寸头像的圆角
@@ -54,4 +110,4 @@ $radius-avatar_small: 3px; // 小尺寸头像的圆角
 $radius-avatar_default: 3px; // 默认尺寸头像的圆角
 $radius-avatar_medium: 3px; // 中尺寸头像的圆角
 $radius-avatar_large: 6px; // 大尺寸头像的圆角
-$radius-avatar_extra_large: 12px; // 超大尺寸头像的圆角
+$radius-avatar_extra_large: 12px; // 超大尺寸头像的圆角

package/lib/cjs/backtop/constants.js

@@ -4,11 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.strings = exports.cssClasses = void 0;
-
 var _constants = require("../base/constants");
-
 const cssClasses = {
-  PREFIX: "".concat(_constants.BASE_CLASS_PREFIX, "-backtop")
+  PREFIX: `${_constants.BASE_CLASS_PREFIX}-backtop`
 };
 exports.cssClasses = cssClasses;
 const strings = {};

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

@@ -1,6 +1,6 @@
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
-export declare type BackTopClickEvent = any;
-export declare type Target = any;
+export type BackTopClickEvent = any;
+export type Target = any;
 export interface BackTopAdapter extends DefaultAdapter {
     updateVisible: (visible: boolean) => void;
     notifyClick: (e: BackTopClickEvent) => void;

package/lib/cjs/backtop/foundation.js

@@ -4,17 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _foundation = _interopRequireDefault(require("../base/foundation"));
-
 var _semiAnimation = require("@douyinfe/semi-animation");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 class BackTopFoundation extends _foundation.default {
   constructor(adapter) {
     super(Object.assign({}, adapter));
-
     this.scrollTo = (targetNode, from, to) => {
       const {
         duration
@@ -34,29 +29,23 @@ class BackTopFoundation extends _foundation.default {
         let {
           scrollTop
         } = _ref;
-
         this._adapter.targetScrollToTop(targetNode, scrollTop);
       });
       this.animation.start();
     };
-
     this.handleScroll = () => {
       const {
         target,
         visibilityHeight
       } = this.getProps();
       const targetNode = target();
-
       const update = () => {
         const scrollTop = this.getScroll(targetNode);
-
         this._adapter.updateVisible(scrollTop > visibilityHeight);
       };
-
       requestAnimationFrame(update);
     };
   }
-
   init() {
     const {
       target
@@ -65,7 +54,6 @@ class BackTopFoundation extends _foundation.default {
     targetNode.addEventListener('scroll', this.handleScroll);
     this.handleScroll();
   }
-
   destroy() {
     const {
       target
@@ -74,21 +62,16 @@ class BackTopFoundation extends _foundation.default {
     targetNode && targetNode.removeEventListener('scroll', this.handleScroll);
     this.animation && this.animation.destroy();
   }
-
   getScroll(target) {
     if (this._adapter.isWindowUndefined()) {
       return 0;
     }
-
     const prop = 'pageYOffset';
     const method = 'scrollTop';
-
     const isWindow = this._adapter.targetIsWindow(target);
-
     const scroll = isWindow ? target[prop] : target[method];
     return scroll;
   }
-
   setScrollTop(to) {
     const {
       target
@@ -97,13 +80,9 @@ class BackTopFoundation extends _foundation.default {
     const from = this.getScroll(targetNode);
     this.scrollTo(targetNode, from, to);
   }
-
   onClick(e) {
     this.setScrollTop(0);
-
     this._adapter.notifyClick(e);
   }
-
 }
-
 exports.default = BackTopFoundation;

package/lib/cjs/badge/badge.css

@@ -139,6 +139,16 @@
 .semi-badge-warning.semi-badge-inverted {
   color: var(--semi-color-warning);
 }
+.semi-badge-success.semi-badge-solid {
+  background-color: var(--semi-color-success);
+}
+.semi-badge-success.semi-badge-light {
+  background-color: var(--semi-color-success-light-default);
+  color: var(--semi-color-success);
+}
+.semi-badge-success.semi-badge-inverted {
+  color: var(--semi-color-success);
+}
 
 .semi-rtl .semi-badge,
 .semi-portal-rtl .semi-badge {

package/lib/cjs/badge/badge.scss

@@ -163,6 +163,19 @@ $module: #{$prefix}-badge;
         }
     }
 
+    &-success {
+        &.#{$module}-solid {
+            background-color: $color-badge_success_solid-bg-default;
+        }
+        &.#{$module}-light {
+            background-color: $color-badge_success_light-bg-default;
+            color: $color-badge_success_light-text-default;
+        }
+        &.#{$module}-inverted {
+            color: $color-badge_success_inverted-text-default;
+        }
+    }
+
 }
 
 @import "./rtl.scss";

package/lib/cjs/badge/constants.js

@@ -4,15 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.strings = exports.numbers = exports.cssClasses = void 0;
-
 var _constants = require("../base/constants");
-
 const cssClasses = {
-  PREFIX: "".concat(_constants.BASE_CLASS_PREFIX, "-badge")
+  PREFIX: `${_constants.BASE_CLASS_PREFIX}-badge`
 };
 exports.cssClasses = cssClasses;
 const strings = {
-  TYPE_SET: ['primary', 'secondary', 'tertiary', 'warning', 'danger'],
+  TYPE_SET: ['success', 'primary', 'secondary', 'tertiary', 'warning', 'danger'],
   THEME_SET: ['solid', 'light', 'inverted'],
   POS_SET: ['leftTop', 'leftBottom', 'rightTop', 'rightBottom']
 };

package/lib/cjs/badge/variables.scss

@@ -29,6 +29,10 @@ $color-badge_warning_light-bg-default: var(--semi-color-warning-light-default);
 $color-badge_warning_light-text-default: var(--semi-color-warning); // 文字颜色 - 浅版危险
 $color-badge_warning_inverted-text-default: var(--semi-color-warning); // 文字颜色 - 白底
 
+$color-badge_success_solid-bg-default: var(--semi-color-success); // 背景颜色 - 成功
+$color-badge_success_light-bg-default: var(--semi-color-success-light-default); // 背景颜色 - 浅版成功
+$color-badge_success_light-text-default: var(--semi-color-success); // 文字颜色 - 浅版成功
+$color-badge_success_inverted-text-default: var(--semi-color-success); // 文字颜色 - 白底
 
 $width-badge_dot: 8px; // 点状徽标宽度
 $height-badge_dot: 8px; // 点状徽标高度

package/lib/cjs/banner/constants.js

@@ -4,11 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.strings = exports.cssClasses = void 0;
-
 var _constants = require("../base/constants");
-
 const cssClasses = {
-  PREFIX: "".concat(_constants.BASE_CLASS_PREFIX, "-banner")
+  PREFIX: `${_constants.BASE_CLASS_PREFIX}-banner`
 };
 exports.cssClasses = cssClasses;
 const strings = {

package/lib/cjs/banner/foundation.js

@@ -4,22 +4,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _foundation = _interopRequireDefault(require("../base/foundation"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 class BannerFoundation extends _foundation.default {
   constructor(adapter) {
     super(Object.assign(Object.assign({}, BannerFoundation.defaultAdapter), adapter));
   }
-
   removeBanner(e) {
     this._adapter.notifyClose(e);
-
     this._adapter.setVisible();
   }
-
 }
-
 exports.default = BannerFoundation;

package/lib/cjs/base/constants.js

@@ -10,9 +10,7 @@ Object.defineProperty(exports, "BASE_CLASS_PREFIX", {
   }
 });
 exports.VALIDATE_STATUS = void 0;
-
 var _env = require("./env");
-
-const VALIDATE_STATUS = ['default', 'error', 'warning', 'success']; // const VALIDATE_STATUS = ['default', 'error', 'warning', 'success', 'validating'] as const;
-
+const VALIDATE_STATUS = ['default', 'error', 'warning', 'success'];
+// const VALIDATE_STATUS = ['default', 'error', 'warning', 'success', 'validating'] as const;
 exports.VALIDATE_STATUS = VALIDATE_STATUS;

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

@@ -3,7 +3,7 @@
  * We re-implemented our own code based on the principle and added more functions we need according to actual needs.
  *
  */
-export declare type noopFunction = (...args: any) => any;
+export type noopFunction = (...args: any) => any;
 export interface DefaultAdapter<P = Record<string, any>, S = Record<string, any>> {
     getContext(key: string): any;
     getContexts(): any;
@@ -11,7 +11,7 @@ export interface DefaultAdapter<P = Record<string, any>, S = Record<string, any>
     getProps(): P;
     getState(key: string): any;
     getStates(): S;
-    setState(s: Pick<S, keyof S>, callback?: any): void;
+    setState<K extends keyof S>(s: Pick<S, K>, callback?: any): void;
     getCache(c: string): any;
     getCaches(): any;
     setCache(key: any, value: any): void;
@@ -45,7 +45,7 @@ declare class BaseFoundation<T extends Partial<DefaultAdapter<P, S>>, P = Record
     getProps(): any;
     getState(key: string): any;
     getStates(): any;
-    setState(states: S, cb?: (...args: any) => void): void;
+    setState<K extends keyof S>(states: Pick<S, K>, cb?: (...args: any) => void): void;
     getContext(key: string): any;
     getContexts(): any;
     getCaches(): any;

package/lib/cjs/base/foundation.js

@@ -4,53 +4,37 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _noop2 = _interopRequireDefault(require("lodash/noop"));
-
 var _log = _interopRequireDefault(require("../utils/log"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 /**
  * The Semi Foundation / Adapter architecture split was inspired by Material Component For Web. （https://github.com/material-components/material-components-web）
  * We re-implemented our own code based on the principle and added more functions we need according to actual needs.
  *
  */
+
 class BaseFoundation {
-  constructor(adapter) {
-    this._adapter = Object.assign(Object.assign({}, BaseFoundation.defaultAdapter), adapter);
-  }
   /** @return enum{css className} */
-
   /* istanbul ignore next */
-
-
   static get cssClasses() {
     // Classes extending Foundation should implement this method to return an object which exports every
     // CSS class the foundation class needs as a property. e.g. {ACTIVE: 'component--active'}
     return {};
   }
   /** @return enum{strings} */
-
   /* istanbul ignore next */
-
-
   static get strings() {
     // Classes extending Foundation should implement this method to return an object which exports all
     // semantic strings as constants. e.g. {ARIA_ROLE: 'tablist'}
     return {};
   }
   /** @return enum{numbers} */
-
   /* istanbul ignore next */
-
-
   static get numbers() {
     // Classes extending Foundation should implement this method to return an object which exports all
     // of its semantic numbers as constants. e.g. {ANIMATION_DELAY_MS: 350}
     return {};
   }
-
   static get defaultAdapter() {
     return {
       getProp: _noop2.default,
@@ -67,91 +51,73 @@ class BaseFoundation {
       persistEvent: _noop2.default
     };
   }
-
+  constructor(adapter) {
+    this._adapter = Object.assign(Object.assign({}, BaseFoundation.defaultAdapter), adapter);
+  }
   getProp(key) {
     return this._adapter.getProp(key);
   }
-
   getProps() {
     return this._adapter.getProps();
   }
-
   getState(key) {
     return this._adapter.getState(key);
   }
-
   getStates() {
     return this._adapter.getStates();
   }
-
   setState(states, cb) {
     return this._adapter.setState(Object.assign({}, states), cb);
   }
-
   getContext(key) {
     return this._adapter.getContext(key);
   }
   /* istanbul ignore next */
-
-
   getContexts() {
     return this._adapter.getContexts();
   }
   /* istanbul ignore next */
-
-
   getCaches() {
     return this._adapter.getCaches();
   }
-
   getCache(key) {
     return this._adapter.getCache(key);
   }
-
   setCache(key, value) {
     return key && this._adapter.setCache(key, value);
   }
-
   stopPropagation(e) {
     this._adapter.stopPropagation(e);
-  } // Determine whether a controlled component
-
-
+  }
+  // Determine whether a controlled component
   _isControlledComponent() {
     let key = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'value';
     const props = this.getProps();
     const isControlComponent = (key in props);
     return isControlComponent;
-  } // Does the user have incoming props, eg: _isInProps (value)
-
-
+  }
+  // Does the user have incoming props, eg: _isInProps (value)
   _isInProps(key) {
     const props = this.getProps();
     return key in props;
   }
-
-  init(lifecycle) {// Subclasses should override this method to perform initialization routines (registering events, etc.)
+  init(lifecycle) {
+    // Subclasses should override this method to perform initialization routines (registering events, etc.)
   }
-
-  destroy() {// Subclasses should override this method to perform de-initialization routines (de-registering events, etc.)
+  destroy() {
+    // Subclasses should override this method to perform de-initialization routines (de-registering events, etc.)
   }
   /* istanbul ignore next */
-
-
   log(text) {
     for (var _len = arguments.length, rest = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
       rest[_key - 1] = arguments[_key];
     }
-
     (0, _log.default)(text, ...rest);
   }
-
   _persistEvent(e) {
     // only work for react adapter for now
     this._adapter.persistEvent(e);
   }
-
 }
-
 var _default = BaseFoundation;
 exports.default = _default;

package/lib/cjs/base/index.js

@@ -4,11 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _foundation = _interopRequireDefault(require("./foundation"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 var _default = {
   BaseFoundation: _foundation.default
 };

package/lib/cjs/breadcrumb/breadcrumb.css

@@ -12,11 +12,13 @@
   font-size: 14px;
   line-height: 20px;
   font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 14px;
 }
 .semi-breadcrumb-wrapper-compact {
   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;
+  font-size: 12px;
 }
 .semi-breadcrumb-item-wrap {
   display: inline-flex;
@@ -46,15 +48,15 @@
   color: var(--semi-color-text-0);
   cursor: default;
 }
+.semi-breadcrumb-item-active .semi-typography {
+  font-weight: 600;
+}
 .semi-breadcrumb-item-icon {
   margin-bottom: -1px;
 }
 .semi-breadcrumb-item-more svg {
   vertical-align: middle;
 }
-.semi-breadcrumb-item-icon + .semi-breadcrumb-item-title {
-  margin-left: 4px;
-}
 .semi-breadcrumb-item-link {
   display: inline-flex;
   align-items: center;