From 8e60497f286f2c780472615c7264d67cb9090d3e Mon Sep 17 00:00:00 2001
From: zdl <3489966805@qq.com>
Date: Tue, 16 Dec 2025 19:59:00 +0800
Subject: [PATCH] =?UTF-8?q?feat(SubTabContainer):=20=E6=96=B0=E5=A2=9E=20r?=
 =?UTF-8?q?ightElement=20prop=20=E6=94=AF=E6=8C=81=E8=87=AA=E5=AE=9A?=
 =?UTF-8?q?=E4=B9=89=E5=8F=B3=E4=BE=A7=E5=86=85=E5=AE=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/components/SubTabContainer/index.tsx | 36 ++++++++++++++++++------
 1 file changed, 27 insertions(+), 9 deletions(-)

diff --git a/src/components/SubTabContainer/index.tsx b/src/components/SubTabContainer/index.tsx
index 76a38d60..d21b49ad 100644
--- a/src/components/SubTabContainer/index.tsx
+++ b/src/components/SubTabContainer/index.tsx
@@ -28,6 +28,7 @@ import {
   Icon,
   HStack,
   Text,
+  Spacer,
 } from '@chakra-ui/react';
 import type { ComponentType } from 'react';
 import type { IconType } from 'react-icons';
@@ -95,6 +96,8 @@ export interface SubTabContainerProps {
   contentPadding?: number;
   /** 是否懒加载 */
   isLazy?: boolean;
+  /** TabList 右侧自定义内容 */
+  rightElement?: React.ReactNode;
 }
 
 const SubTabContainer: React.FC<SubTabContainerProps> = memo(({
@@ -107,6 +110,7 @@ const SubTabContainer: React.FC<SubTabContainerProps> = memo(({
   theme: customTheme,
   contentPadding = 4,
   isLazy = true,
+  rightElement,
 }) => {
   // 内部状态（非受控模式）
   const [internalIndex, setInternalIndex] = useState(defaultIndex);
@@ -148,19 +152,27 @@ const SubTabContainer: React.FC<SubTabContainerProps> = memo(({
           borderBottom="1px solid"
           borderColor={theme.borderColor}
           pl={0}
-          pr={4}
-          py={2}
-          flexWrap="wrap"
-          gap={2}
+          pr={2}
+          py={1.5}
+          flexWrap="nowrap"
+          gap={1}
+          alignItems="center"
+          overflowX="auto"
+          css={{
+            '&::-webkit-scrollbar': { display: 'none' },
+            scrollbarWidth: 'none',
+          }}
         >
           {tabs.map((tab) => (
             <Tab
               key={tab.key}
               color={theme.tabUnselectedColor}
               borderRadius="full"
-              px={4}
-              py={2}
-              fontSize="sm"
+              px={2.5}
+              py={1.5}
+              fontSize="xs"
+              whiteSpace="nowrap"
+              flexShrink={0}
               _selected={{
                 bg: theme.tabSelectedBg,
                 color: theme.tabSelectedColor,
@@ -170,12 +182,18 @@ const SubTabContainer: React.FC<SubTabContainerProps> = memo(({
                 bg: theme.tabHoverBg,
               }}
             >
-              <HStack spacing={2}>
-                {tab.icon && <Icon as={tab.icon} boxSize={4} />}
+              <HStack spacing={1}>
+                {tab.icon && <Icon as={tab.icon} boxSize={3} />}
                 <Text>{tab.name}</Text>
               </HStack>
             </Tab>
           ))}
+          {rightElement && (
+            <>
+              <Spacer />
+              <Box flexShrink={0}>{rightElement}</Box>
+            </>
+          )}
         </TabList>
 
         <TabPanels p={contentPadding}>