优化Tabs组件占位符在响应式场景下的交互体验和一些组件样式问题

CONTRIBUTING.md

@@ -136,9 +136,12 @@ $ pnpm --filter @bifrostui/icons build
 
   ```bash
   # 1. 切到你要发布beta版的分支，同步最新main分支代码，v:beta命令只会自动添加patch版本的beta，
-  # 如果需要发布minor或major版本的beta，可在此处执行 pnpm v:online 命令，并务必选择正确的beta版本号
+  # 方式1：自动升级patch的beta版本号，跳过版本询问
   $ pnpm v:beta
 
+  # 方式2：自行选择beta版本号，包括minor、major或正式版，务必选择正确！
+  $ npx lerna version --preid=beta --force-publish --message 'Publish'
+
   # 2. 构建
   $ pnpm build
 

packages/bui-core/src/Select/Select.less

@@ -50,7 +50,7 @@
     justify-content: space-between;
     align-items: center;
     flex: 1;
-    height: var(--bui-select-height);
+    height: var(--height);
     background-color: transparent;
     outline: none;
     border: 0;

packages/bui-core/src/Slider/Slider.less

@@ -15,7 +15,7 @@
     --bui-slider-button-font-size,
     var(--bui-title-size-3)
   );
-  --button-border-radius: var(--bui--slider-button-border-radius, 50%);
+  --button-border-radius: var(--bui-slider-button-border-radius, 50%);
   --tooltip-width: var(--bui-slider-tooltip-width, 46px);
   --tooltip-height: var(--bui-slider-tooltip-height, 24px);
   --tooltip-line-height: var(--bui-slider-tooltip-line-height, 24px);

packages/bui-core/src/Tabs/Tabs.less

@@ -1,4 +1,3 @@
-@holderWidth: 12px;
 @class-prefix-tabs: ~'bui-tabs';
 
 .@{class-prefix-tabs} {
@@ -9,6 +8,7 @@
   /* prettier-ignore */
   --line-height: var(--bui-tabs-line-height, 3PX);
   --line-width: var(--bui-tabs-line-width, 18px);
+  --mask-width: var(--bui-tabs-mask-width, 12px);
   --mask-height: var(--bui-tabs-mask-height, 100%);
   --tab-height: var(--bui-tab-height, 100%);
   --tab-padding: var(
@@ -54,12 +54,11 @@
     top: 0;
     bottom: 0;
     z-index: 1;
-    width: @holderWidth;
-    height: var(--bui-tabs-mask-height);
+    width: var(--mask-width);
+    height: var(--mask-height);
     pointer-events: none;
   }
 
-  // TODO 这个是干嘛的！！！
   &-mask-left {
     left: 0;
     background: linear-gradient(

packages/bui-core/src/Tabs/Tabs.tsx

@@ -99,6 +99,7 @@ const Tabs = React.forwardRef<HTMLDivElement, TabsProps>((props, ref) => {
   useEffect(() => {
     const handleResize = debounce(() => {
       animate({ transitionInUse: true });
+      updateMask();
     }, 100);
 
     window.addEventListener('resize', handleResize);

packages/bui-core/src/Tabs/index.en-US.md

@@ -333,6 +333,7 @@ export default () => {
 | --active-color | Activate Tab font color          | --bui-color-fg-default | --bui-tabs-active-color |
 | --line-width   | Width of the lower marking line  | 18px                   | --bui-tabs-line-width   |
 | --line-height  | Height of the lower marking line | 3PX                    | --bui-tabs-line-height  |
+| --mask-width   | Mask width                       | 12px                   | --bui-tabs-mask-width   |
 | --mask-height  | Mask height                      | 100%                   | --bui-tabs-mask-height  |
 
 ### Tab

packages/bui-core/src/Tabs/index.zh-CN.md

@@ -333,6 +333,7 @@ export default () => {
 | --active-color | 激活 Tab 字体颜色 | --bui-color-fg-default | --bui-tabs-active-color |
 | --line-width   | 下标线宽度        | 18px                   | --bui-tabs-line-width   |
 | --line-height  | 下标线高度        | 3PX                    | --bui-tabs-line-height  |
+| --mask-width   | 蒙层宽度          | 12px                   | --bui-tabs-mask-width   |
 | --mask-height  | 蒙层高度          | 100%                   | --bui-tabs-mask-height  |
 
 ### Tab