@rainbow-oh/yee-c 0.1.0 → 0.3.0

package/src/Splitter/interface.ts

@@ -1,5 +1,13 @@
 import type { DataAttributeProps } from '../utils/types';
 
+export type PanelRect = {
+  type: 'default' | 'percent' | 'auto';
+  size: number;
+  currentSize: number;
+  min?: string | number;
+  max?: string | number;
+};
+
 export interface SplitterItemProps {
   /**
    * custom item element class name prefix
@@ -65,14 +73,13 @@ export interface SplitterProps extends DataAttributeProps {
   /**
    * children
    */
-  children?: React.ReactElement[];
+  children?: Array<React.ReactElement | null>;
   /**
    * display border or not
    * */
   bordered?: boolean;
-  itemPadding?: number | string;
   /**
    * panel size change event
    * */
-  onResize?: (sizes: number[]) => void;
+  onResize?: (sizes: PanelRect[]) => void;
 }

package/src/Splitter/splitter-handler.tsx

@@ -2,7 +2,8 @@ import clsx from 'clsx';
 import { ChevronLeft, ChevronRight } from 'lucide-react';
 import React, { useContext, useRef } from 'react';
 import useMove from './hooks/useMove';
-import { PanelRect, SplitterCtx, SplitterWrapperCtx } from './splitter';
+import type { PanelRect } from './interface';
+import { SplitterCtx, SplitterWrapperCtx } from './splitter';
 
 interface SplitterHandlerProps {
   layout: 'horizontal' | 'vertical';
@@ -37,7 +38,7 @@ const SplitterHandler = ({
   const cref = useRef<HTMLDivElement>(null);
   const handler = useRef<HTMLDivElement | null>(null);
   const { refs } = useContext(SplitterWrapperCtx);
-  const { prefixCls } = useContext(SplitterCtx);
+  const { prefixCls, onResize } = useContext(SplitterCtx);
 
   const status = records[index - 1] || {};
   const next = records[index] || {};
@@ -85,6 +86,7 @@ const SplitterHandler = ({
         currentSize: s,
       };
       newState[index] = { ...newState[index], size: e, currentSize: e };
+      onResize?.(newState);
       return newState;
     });
   };

package/src/Splitter/splitter.tsx

@@ -4,7 +4,7 @@ import { GlobalContext } from '../Config-Provider';
 import mergeContextToProps from '../utils/mergeContextToProps';
 import SplitterHandler from './splitter-handler';
 
-import type { SplitterItemProps, SplitterProps } from './interface';
+import type { PanelRect, SplitterItemProps, SplitterProps } from './interface';
 import './style/index.less';
 
 type SplitterWrapperCtxType = {
@@ -13,7 +13,7 @@ type SplitterWrapperCtxType = {
 
 type SplitterCtxType = {
   prefixCls: string;
-  onResize?: (sizes: number[]) => void;
+  onResize?: (sizes: PanelRect[]) => void;
 };
 
 export const SplitterWrapperCtx = React.createContext<SplitterWrapperCtxType>({
@@ -24,14 +24,6 @@ export const SplitterCtx = React.createContext<SplitterCtxType>({
   prefixCls: '',
 });
 
-export type PanelRect = {
-  type: 'default' | 'percent' | 'auto';
-  size: number;
-  currentSize: number;
-  min?: string | number;
-  max?: string | number;
-};
-
 const getPanelSize = (
   children: React.ReactNode,
   {
@@ -156,63 +148,66 @@ const Wrapper = ({ children, itemsSize, onClick, ...props }: any) => {
   const arr = React.Children.toArray(children);
 
   React.Children.forEach(children, (child, index) => {
-    const n = index + 1;
-    const { style } = child.props || {};
-    let currentSize;
-    let min = undefined;
-    let max = undefined;
-    if (itemsSize && itemsSize[index]) {
-      ({ currentSize, min, max } = itemsSize[index]);
-    }
+    if (React.isValidElement(child)) {
+      const n = index + 1;
+      const { style } = child.props || ({} as any);
+      let currentSize;
+      let min = undefined;
+      let max = undefined;
+      if (itemsSize && itemsSize[index]) {
+        ({ currentSize, min, max } = itemsSize[index]);
+      }
 
-    wrappered.push(
-      React.cloneElement(child, {
-        style: {
-          ...style, // If there is a border or other size-related design, it may cause calculation issues
-          flexBasis: currentSize,
-        },
-        min,
-        max,
-        index: n,
-        key: n,
-        ref: (el: HTMLDivElement) => {
-          refs.current[`item${n}`] = {
-            el: el,
-            props: child.props,
-            size: { min, max },
-          };
-        },
-      }),
-    );
-    const next = arr[index + 1];
+      wrappered.push(
+        React.cloneElement(child, {
+          // @ts-ignore
+          style: {
+            ...style, // If there is a border or other size-related design, it may cause calculation issues
+            flexBasis: currentSize,
+          },
+          min,
+          max,
+          index: n,
+          key: n,
+          ref: (el: HTMLDivElement) => {
+            refs.current[`item${n}`] = {
+              el: el,
+              props: child.props as SplitterItemProps,
+              size: { min, max },
+            };
+          },
+        }),
+      );
+      const next = arr[index + 1];
+
+      if (!next || !React.isValidElement(next)) {
+        return;
+      }
 
-    if (!next || !React.isValidElement(next)) {
-      return;
-    }
+      const { flexable, expandable } = child.props || ({} as any);
+      const { expandable: nextExpandable } = next.props || ({} as any);
 
-    const { flexable, expandable } = child.props || {};
-    const { expandable: nextExpandable } = next.props || ({} as any);
+      const _expandable = { start: false, end: false };
 
-    const _expandable = { start: false, end: false };
+      if (expandable) {
+        _expandable.start = true;
+      }
 
-    if (expandable) {
-      _expandable.start = true;
-    }
+      if (nextExpandable) {
+        _expandable.end = true;
+      }
 
-    if (nextExpandable) {
-      _expandable.end = true;
+      wrappered.push(
+        <SplitterHandler
+          {...props}
+          index={n}
+          flexable={flexable}
+          expandable={_expandable}
+          onClick={onClick}
+          key={`handler-${n}`}
+        />,
+      );
     }
-
-    wrappered.push(
-      <SplitterHandler
-        {...props}
-        index={n}
-        flexable={flexable}
-        expandable={_expandable}
-        onClick={onClick}
-        key={`handler-${n}`}
-      />,
-    );
   });
 
   return (

package/src/Splitter/style/index.less

@@ -10,8 +10,18 @@
       var(--yee-splitter-border-color);
   }
 
+  &-horizontal {
+    @{pls}-handler {
+      cursor: e-resize;
+    }
+  }
+
   &-vertical {
     flex-direction: column;
+
+    @{pls}-handler {
+      cursor: n-resize;
+    }
   }
 }
 
@@ -77,8 +87,19 @@
       transition:
         background 0.2s ease-in-out,
         opacity 0.2s ease-in-out;
+      border-radius: 2px;
       content: '';
     }
+
+    &:hover {
+      &::after {
+        background-color: color-mix(
+          in srgb,
+          var(--yee-splitter-handler-color),
+          black 20%
+        );
+      }
+    }
   }
 
   &-flexable {

package/src/Steps/step.tsx

@@ -64,7 +64,7 @@ const Step: React.FC<StepProps> = (props) => {
 
     return index < current ? (
       <span className={`${prefixCls}-item-serial ${prefixCls}-item-icon-check`}>
-        <Check />
+        <Check size={18} strokeWidth={3} />
       </span>
     ) : (
       <span className={`${prefixCls}-item-serial`}>{index + 1}</span>

package/src/Steps/style/index.less

@@ -142,7 +142,7 @@
         background-color: var(--yee-steps-serial-done-bg-color, #fff);
         background-clip: padding-box;
         border-color: var(--yee-steps-serial-done-border-color, #1890ff);
-        color: var(--yee-steps-serial-done-color, #1890ff);
+        color: var(--yee-steps-step-done-color);
       }
 
       @{pls}-item-title {
@@ -283,9 +283,15 @@
       margin-bottom: 8px;
       padding-left: 0;
 
+      &-title {
+        &::after {
+          display: none;
+        }
+      }
+
       &-content {
         align-items: flex-start;
-        margin-left: 8px;
+        margin-left: 12px;
       }
 
       &-icon {

package/src/Switch/demo/content.tsx

@@ -4,11 +4,21 @@ import React from 'react';
 export default () => {
   return (
     <Space direction="vertical">
-      <Switch checkedChildren="ON" unCheckedChildren="OFF" />
-
-      <Switch checkedChildren="On" unCheckedChildren="Off" />
-
-      <Switch checkedChildren="✅" unCheckedChildren="❌" />
+      <Switch
+        checkedChildren="ON"
+        unCheckedChildren="OFF"
+        style={{ width: 60 }}
+      />
+      <Switch
+        checkedChildren="On"
+        unCheckedChildren="OFF"
+        style={{ width: 60 }}
+      />
+      <Switch
+        checkedChildren="✅"
+        unCheckedChildren="❌"
+        style={{ width: 48 }}
+      />
     </Space>
   );
 };

package/src/Switch/style/index.less

@@ -15,6 +15,10 @@
   cursor: pointer;
   transition: background 0.2s linear;
 
+  &-spin {
+    position: absolute;
+  }
+
   &-handle {
     position: absolute;
     top: var(--yee-switch-handle-top);
@@ -67,6 +71,12 @@
         var(--m-switch-handle-size) + var(--yee-switch-inner-padding-offset)
       );
     }
+
+    @{pls}-spin {
+      inset-inline-end: calc(
+        var(--m-switch-handle-size) + var(--yee-switch-handle-offset)
+      );
+    }
   }
 
   &-unchecked {
@@ -77,6 +87,12 @@
         var(--m-switch-handle-size) + var(--yee-switch-inner-padding-offset)
       );
     }
+
+    @{pls}-spin {
+      padding-inline-start: calc(
+        var(--m-switch-handle-size) + var(--yee-switch-inner-padding-offset)
+      );
+    }
   }
 
   --m-switch-handle-size: var(--yee-switch-handle-size);

package/src/Switch/switch.tsx

@@ -58,7 +58,7 @@ const Switch = (baseprops: SwitchProps) => {
       role="switch"
       aria-checked={mergedChecked}
       className={cls}
-      disabled={disabled}
+      disabled={disabled || loading}
       onClick={onClick}
       style={style}
     >
@@ -71,11 +71,19 @@ const Switch = (baseprops: SwitchProps) => {
           bounce: 0.2,
         }}
       >
-        {loading ? (
-          <Spin size="small" />
-        ) : (
-          <span className={clsx(`${prefixCls}-handle-inner`)}></span>
-        )}
+        {/* {loading ? (
+          
+        ) : ( */}
+        <span className={clsx(`${prefixCls}-handle-inner`)}>
+          {loading ? (
+            <Spin
+              size="small"
+              className={`${prefixCls}-spin`}
+              color={checked ? '#fff' : undefined}
+            />
+          ) : null}
+        </span>
+        {/* )} */}
       </motion.span>
       <span
         className={clsx(`${prefixCls}-inner`, classNames?.inner)}

package/src/Table/demo/size.tsx

@@ -1,4 +1,4 @@
-import { Space, Table } from '@rainbow-oh/yee-c';
+import { Table } from '@rainbow-oh/yee-c';
 import React from 'react';
 
 export default () => {
@@ -42,12 +42,12 @@ export default () => {
   ];
 
   return (
-    <Space direction="vertical" style={{ width: '100%' }}>
+    <div>
       <Table columns={columns} dataSource={dataSource} size="small" />
 
       <Table columns={columns} dataSource={dataSource} size="default" />
 
       <Table columns={columns} dataSource={dataSource} size="large" />
-    </Space>
+    </div>
   );
 };

package/src/Table/index.en-US.md

@@ -38,6 +38,7 @@ A table displays rows of data.
 | columns | `ColumnProps[]` | Table column configuration | - |
 | children | `Array<React.ReactElement<ColumnProps>> | React.ReactElement<ColumnProps>` | Children elements | - |
 | locale | `Record<string, string>` | Locale messages | - |
+| noData | `React.ReactNode` | Content displayed when no data is available | - |
 | dataSource | `Array<Record<string, any>>` | Data source | - |
 | footer | `React.ReactNode \| (() => React.ReactNode)` | Table footer | - |
 | loading | `boolean` | Loading state | - |

package/src/Table/index.zh-CN.md

@@ -31,47 +31,48 @@ toc: 'content'
 
 ### TableProps
 
-| 属性名            | 类型                                                                   | 描述                                 | 默认值 |
-| ----------------- | ---------------------------------------------------------------------- | ------------------------------------ | ------ |
-| prefixCls         | `string`                                                               | 自定义类名前缀                       | -      |
-| className         | `string`                                                               | 自定义根类名                         | -      |
-| style             | `React.CSSProperties`                                                  | 自定义根样式                         | -      |
-| classNames        | `Partial<Record<SemanticType, string>>`                                | 语义化类名                           | -      |
-| styles            | `Partial<Record<SemanticType, React.CSSProperties>>`                   | 语义化样式                           | -      |
-| components        | `Partial<Record<SemanticType, React.ReactNode>>`                       | 自定义表格元素                       | -      |
-| bordered          | `boolean`                                                              | 是否展示外边框和列边框               | -      |
-| columns           | `ColumnProps[]`                                                        | 表格列的配置信息                     | -      |
+| 属性名            | 类型                                                                        | 描述                                 | 默认值 |
+| ----------------- | --------------------------------------------------------------------------- | ------------------------------------ | ------ |
+| prefixCls         | `string`                                                                    | 自定义类名前缀                       | -      |
+| className         | `string`                                                                    | 自定义根类名                         | -      |
+| style             | `React.CSSProperties`                                                       | 自定义根样式                         | -      |
+| classNames        | `Partial<Record<SemanticType, string>>`                                     | 语义化类名                           | -      |
+| styles            | `Partial<Record<SemanticType, React.CSSProperties>>`                        | 语义化样式                           | -      |
+| components        | `Partial<Record<SemanticType, React.ReactNode>>`                            | 自定义表格元素                       | -      |
+| bordered          | `boolean`                                                                   | 是否展示外边框和列边框               | -      |
+| columns           | `ColumnProps[]`                                                             | 表格列的配置信息                     | -      |
 | children          | `Array<React.ReactElement<ColumnProps>> \| React.ReactElement<ColumnProps>` | 子元素                               | -      |
-| locale            | `Record<string, string>`                                               | 提示信息                             | -      |
-| dataSource        | `Array<Record<string, any>>`                                           | 数据                                 | -      |
-| footer            | `React.ReactNode \| (() => React.ReactNode)`                           | 表格底部                             | -      |
-| loading           | `boolean`                                                              | 加载状态                             | -      |
-| stripe            | `boolean`                                                              | 斑马条纹                             | -      |
-| getPopupContainer | `() => HTMLElement`                                                    | 设置表格内的弹出组件的渲染节点       | -      |
-| rowClassName      | `(record: object) => string`                                           | 每行类名                             | -      |
-| pagination | `Partial<PaginationType> \| boolean` | 分页器配置 | - |
-| rowSelection      | `RowSelectionType`                                                     | 表格行是否可选中                     | -      |
-| expandable        | `ExpandableType`                                                       | 是否可展开                           | -      |
-| scroll            | `{ y?: number; x?: number }`                                           | 表格是否可滚动                       | -      |
-| showHeader        | `boolean`                                                              | 是否显示表头                         | `true` |
-| showSorterTooltip | `boolean`                                                              | 配置排序时的提示                     | -      |
-| size              | `'small' \| 'default' \| 'large'`                                      | 表格尺寸                             | -      |
-| rowKey | `string \| ((record: Record<string, any>) => string)` | 设置行的唯一键 | `id` |
-| summary           | `(pageData: Array<Record<string, any>>) => React.ReactNode`            | 总结栏                               | -      |
-| tableLayout       | `'auto' \| 'fixed'`                                                    | 设置Table布局                        | -      |
-| virtual           | `boolean`                                                              | 是否开启虚拟列表                     | -      |
-| onChange          | `({ pagination, filters, sorter, currentDataSource, action }) => void` | 分页，排序，筛选发生变化时的回调函数 | -      |
-| onRow             | `(record: Record<string, any>, index: number) => Record<string, any>`  | 自定义行属性                         | -      |
-| onHeaderRow       | `() => Record<string, any>`                                            | 自定义表头行属性                     | -      |
+| locale            | `Record<string, string>`                                                    | 提示信息                             | -      |
+| noData            | `React.ReactNode`                                                           | 无数据时展示的内容                   | -      |
+| dataSource        | `Array<Record<string, any>>`                                                | 数据                                 | -      |
+| footer            | `React.ReactNode \| (() => React.ReactNode)`                                | 表格底部                             | -      |
+| loading           | `boolean`                                                                   | 加载状态                             | -      |
+| stripe            | `boolean`                                                                   | 斑马条纹                             | -      |
+| getPopupContainer | `() => HTMLElement`                                                         | 设置表格内的弹出组件的渲染节点       | -      |
+| rowClassName      | `(record: object) => string`                                                | 每行类名                             | -      |
+| pagination        | `Partial<PaginationType> \| boolean`                                        | 分页器配置                           | -      |
+| rowSelection      | `RowSelectionType`                                                          | 表格行是否可选中                     | -      |
+| expandable        | `ExpandableType`                                                            | 是否可展开                           | -      |
+| scroll            | `{ y?: number; x?: number }`                                                | 表格是否可滚动                       | -      |
+| showHeader        | `boolean`                                                                   | 是否显示表头                         | `true` |
+| showSorterTooltip | `boolean`                                                                   | 配置排序时的提示                     | -      |
+| size              | `'small' \| 'default' \| 'large'`                                           | 表格尺寸                             | -      |
+| rowKey            | `string \| ((record: Record<string, any>) => string)`                       | 设置行的唯一键                       | `id`   |
+| summary           | `(pageData: Array<Record<string, any>>) => React.ReactNode`                 | 总结栏                               | -      |
+| tableLayout       | `'auto' \| 'fixed'`                                                         | 设置Table布局                        | -      |
+| virtual           | `boolean`                                                                   | 是否开启虚拟列表                     | -      |
+| onChange          | `({ pagination, filters, sorter, currentDataSource, action }) => void`      | 分页，排序，筛选发生变化时的回调函数 | -      |
+| onRow             | `(record: Record<string, any>, index: number) => Record<string, any>`       | 自定义行属性                         | -      |
+| onHeaderRow       | `() => Record<string, any>`                                                 | 自定义表头行属性                     | -      |
 
 ### ColumnProps
 
 | 属性名       | 类型                                                                 | 描述                           | 默认值 |
 | ------------ | -------------------------------------------------------------------- | ------------------------------ | ------ |
-| className | `string` | 自定义类名 | - |
-| style | `React.CSSProperties` | 自定义样式 | - |
-| classNames | `Partial<Record<ColumnSemanticType, string>>` | 列结构化类名 | - |
-| styles | `Partial<Record<ColumnSemanticType, React.CSSProperties>>` | 列结构化样式 | - |
+| className    | `string`                                                             | 自定义类名                     | -      |
+| style        | `React.CSSProperties`                                                | 自定义样式                     | -      |
+| classNames   | `Partial<Record<ColumnSemanticType, string>>`                        | 列结构化类名                   | -      |
+| styles       | `Partial<Record<ColumnSemanticType, React.CSSProperties>>`           | 列结构化样式                   | -      |
 | align        | `'left' \| 'right' \| 'center'`                                      | 对齐方式                       | -      |
 | fixed        | `'left' \| 'right' \| true`                                          | 固定列                         | -      |
 | filter       | `object`                                                             | 过滤配置                       | -      |
@@ -84,24 +85,24 @@ toc: 'content'
 | children     | `(record: Record<string, any>, rowIndex: number) => React.ReactNode` | 回调函数，用于自定义单元格内容 | -      |
 | onCell       | `(record: object, rowIndex: number) => object`                       | 设置单元格属性                 | -      |
 | onHeaderCell | `(column: ColumnProps) => object`                                    | 设置表头单元格属性             | -      |
-| render       | `(record: object, rowIndex: number) => React.ReactNode`              | 自定义渲染函数                 | -      |
+| render       | `(record: Record<string, any>, rowIndex: number) => React.ReactNode` | 自定义渲染函数                 | -      |
 
 ### RowSelectionType
 
-| 属性名                 | 类型                                                                     | 描述                        | 默认值 |
-| ---------------------- | ------------------------------------------------------------------------ | --------------------------- | ------ |
-| type                   | `'checkbox' \| 'radio'`                                                  | 单选/多选                   | -      |
-| width                  | `number \| string`                                                       | 列宽                        | -      |
-| selectAll              | `React.ReactNode \| boolean`                                             | 设置全选节点                | `true` |
-| selectedRowKeys        | `Array<SelectionKeyType> \| SelectionKeyType`                            | （受控）选中的行的keys      | -      |
-| defaultSelectedRowKeys | `string[] \| number[]`                                              | 默认选中的行的keys          | -      |
-| index                  | `number`                                                                 | 设置Checkbox或Radio在第几列 | `1`    |
-| disabled               | `boolean \| Array<boolean> \| ((record: Record<string, unknown>, index: number) => boolean)` | 是否禁用 | -      |
-| onCell                 | `(record: Record<string, unknown>, rowIndex: number) => Record<string, unknown>` | 设置Checkbox或Radio属性     | -      |
-| renderCell             | `(record: Record<string, any>, rowIndex: number) => React.ReactNode`     | 渲染checkbox                | -      |
-| onChange               | `(selectedRowKeys, selectedRows) => void`                                | 选中项发生变化时的回调      | -      |
-| onSelectAll            | `(selected, selectedRowKeys, selectedRows) => void`                      | 全选选中或取消时的回调      | -      |
-| selections             | `Array<any>`                                                             | 选择配置                    | -      |
+| 属性名                 | 类型                                                                                         | 描述                        | 默认值 |
+| ---------------------- | -------------------------------------------------------------------------------------------- | --------------------------- | ------ |
+| type                   | `'checkbox' \| 'radio'`                                                                      | 单选/多选                   | -      |
+| width                  | `number \| string`                                                                           | 列宽                        | -      |
+| selectAll              | `React.ReactNode \| boolean`                                                                 | 设置全选节点                | `true` |
+| selectedRowKeys        | `Array<SelectionKeyType> \| SelectionKeyType`                                                | （受控）选中的行的keys      | -      |
+| defaultSelectedRowKeys | `string[] \| number[]`                                                                       | 默认选中的行的keys          | -      |
+| index                  | `number`                                                                                     | 设置Checkbox或Radio在第几列 | `1`    |
+| disabled               | `boolean \| Array<boolean> \| ((record: Record<string, unknown>, index: number) => boolean)` | 是否禁用                    | -      |
+| onCell                 | `(record: Record<string, unknown>, rowIndex: number) => Record<string, unknown>`             | 设置Checkbox或Radio属性     | -      |
+| renderCell             | `(record: Record<string, any>, rowIndex: number) => React.ReactNode`                         | 渲染checkbox                | -      |
+| onChange               | `(selectedRowKeys, selectedRows) => void`                                                    | 选中项发生变化时的回调      | -      |
+| onSelectAll            | `(selected, selectedRowKeys, selectedRows) => void`                                          | 全选选中或取消时的回调      | -      |
+| selections             | `Array<any>`                                                                                 | 选择配置                    | -      |
 
 ### ExpandableType
 

package/src/Table/interface.ts

@@ -267,7 +267,7 @@ export interface ColumnProps {
    * Custom render cell content
    */
   render?: (
-    record: HeadCellProps | Record<string, unknown>,
+    record: Record<string, unknown>,
     rowIndex: number,
   ) => React.ReactNode;
 }
@@ -492,6 +492,10 @@ export interface TableProps
    * Locale text, including sort and empty data hints
    */
   locale?: Record<string, string>;
+  /**
+   * Content displayed when no data is available
+   * */
+  noData?: React.ReactNode;
   /**
    * Data
    */

package/src/Table/theader/cell.tsx

@@ -29,7 +29,6 @@ const HeadCell: React.FC<HeadCellProps> = (props) => {
     onHeaderCell,
     onSort,
     onInternalFilter,
-    render,
     ...rest
   } = props;
 
@@ -117,14 +116,8 @@ const HeadCell: React.FC<HeadCellProps> = (props) => {
         className={`${prefixCls}-thead-cell`}
         style={{ justifyContent: align }}
       >
-        {render ? (
-          render(props, 0)
-        ) : (
-          <>
-            {renderTitle()}
-            {renderFilter()}
-          </>
-        )}
+        {renderTitle()}
+        {renderFilter()}
       </div>
     );
   };

package/src/Tabs/interface.ts

@@ -1,6 +1,6 @@
 import type { DataAttributeProps } from '../utils/types';
 
-type SemanticDOM = 'header' | 'content';
+type SemanticDOM = 'header' | 'content' | 'track' | 'list' | 'activeBar';
 
 export type TabItemType = {
   /**

package/src/Tabs/style/index.less

@@ -522,6 +522,10 @@
   // background-color: var(--yee-color-bg-container);
 }
 
+@{pls}-tab-content {
+  height: 100%;
+}
+
 @{pls}-active {
   z-index: 2;