feat(): 优化 tabs 页签宽度 feat #101110862

oceanbase · Oct 13, 2023 · 010aac8 · 010aac8
1 parent dd47d11
commit 010aac8
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 14 deletions.
diff --git a/packages/design/package.json b/packages/design/package.json
@@ -40,7 +40,7 @@
     "@oceanbase/icons": "workspace:^",
     "@oceanbase/util": "workspace:^",
     "ahooks": "^2.10.14",
-    "antd": "^5.8.0",
+    "antd": "^5.10.0",
     "classnames": "^2.3.2",
     "lodash": "^4.17.21",
     "lottie-web": "^5.12.2",
@@ -56,4 +56,4 @@
     "react": "^16.9.0",
     "react-dom": "^16.9.0"
   }
-}
+}
diff --git a/packages/design/src/tabs/index.tsx b/packages/design/src/tabs/index.tsx
@@ -1,14 +1,13 @@
-import { isNullValue } from '@oceanbase/util';
+import React, { useState, useRef, useContext, } from 'react';
 import { Space, Tabs as AntTabs, Tag } from 'antd';
-import React, { useState, useRef, useContext } from 'react';
 import type { TabsProps as AntTabsProps, TabsPosition as AntTabsPosition } from 'antd/es/tabs';
 import type { Tab as AntTab } from 'rc-tabs/es/interface';
+import { isNullValue } from '@oceanbase/util';
+import { useUpdateEffect } from 'ahooks';
 import classNames from 'classnames';
 import ConfigProvider from '../config-provider';
-import useInkBar from './hooks/useInkBar';
 import useLegacyItems from './hooks/useLegacyItems';
 import useStyle from './style';
-import { useUpdateEffect } from 'ahooks';
 import TabPane from './TabPane';
 
 export * from 'antd/es/tabs';
@@ -36,6 +35,7 @@ const Tabs = ({
   tabPosition,
   prefixCls: customizePrefixCls,
   className,
+  indicatorSize,
   ...restProps
 }: TabsProps) => {
   const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
@@ -77,14 +77,6 @@ const Tabs = ({
     }
   }, [activeKeyProp]);
 
-  useInkBar({
-    prefixCls,
-    activeKey,
-    size,
-    type,
-    tabPosition,
-    containerRef: ref,
-  });
 
   return wrapSSR(
     <AntTabs
@@ -98,6 +90,9 @@ const Tabs = ({
       }}
       size={size}
       type={type}
+      //  水平布局，宽度 >= 24，则两侧各减去 8px，并保持水平居中
+      // 垂直布局，高度始终与 Tab btn 相同，并保持垂直居中
+      indicatorSize={isHorizontal ? (origin) => (origin >= 24 ? origin - 16 : origin) : 16}
       tabPosition={tabPosition}
       tabBarGutter={!type || type === 'line' ? (isHorizontal ? 24 : 0) : undefined}
       prefixCls={customizePrefixCls}