feat(SubTabContainer): 新增 rightElement prop 支持自定义右侧内容

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

Co-Authored-By: Claude <noreply@anthropic.com>

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}>