style: 子 Tab 紧凑模式,移除多余边距

- SubTabContainer: 添加 compact 属性
  - 移除 TabList 的 mx/mb 外边距
  - 移除圆角和阴影
  - 减小垂直内边距
- BasicInfoTab: 启用 compact 模式,移除 Card 包裹

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
zdl
2025-12-18 17:54:56 +08:00
parent 4b3588e8de
commit 9b8983869c
2 changed files with 16 additions and 17 deletions

View File

@@ -134,6 +134,8 @@ export interface SubTabContainerProps {
isLazy?: boolean; isLazy?: boolean;
/** TabList 右侧自定义内容 */ /** TabList 右侧自定义内容 */
rightElement?: React.ReactNode; rightElement?: React.ReactNode;
/** 紧凑模式 - 移除 TabList 的外边距 */
compact?: boolean;
} }
const SubTabContainer: React.FC<SubTabContainerProps> = memo(({ const SubTabContainer: React.FC<SubTabContainerProps> = memo(({
@@ -147,6 +149,7 @@ const SubTabContainer: React.FC<SubTabContainerProps> = memo(({
contentPadding = 4, contentPadding = 4,
isLazy = true, isLazy = true,
rightElement, rightElement,
compact = false,
}) => { }) => {
// 内部状态(非受控模式) // 内部状态(非受控模式)
const [internalIndex, setInternalIndex] = useState(defaultIndex); const [internalIndex, setInternalIndex] = useState(defaultIndex);
@@ -201,17 +204,17 @@ const SubTabContainer: React.FC<SubTabContainerProps> = memo(({
sx={{ WebkitBackdropFilter: 'blur(20px)' }} sx={{ WebkitBackdropFilter: 'blur(20px)' }}
borderBottom="1px solid" borderBottom="1px solid"
borderColor={theme.borderColor} borderColor={theme.borderColor}
borderRadius={DEEP_SPACE.radiusLG} borderRadius={compact ? 0 : DEEP_SPACE.radiusLG}
mx={2} mx={compact ? 0 : 2}
mb={2} mb={compact ? 0 : 2}
px={3} px={3}
py={3} py={compact ? 2 : 3}
flexWrap="nowrap" flexWrap="nowrap"
gap={2} gap={2}
alignItems="center" alignItems="center"
overflowX="auto" overflowX="auto"
position="relative" position="relative"
boxShadow={DEEP_SPACE.innerGlow} boxShadow={compact ? 'none' : DEEP_SPACE.innerGlow}
css={{ css={{
'&::-webkit-scrollbar': { display: 'none' }, '&::-webkit-scrollbar': { display: 'none' },
scrollbarWidth: 'none', scrollbarWidth: 'none',

View File

@@ -2,7 +2,6 @@
// 基本信息 Tab 组件 - 使用 SubTabContainer 通用组件 // 基本信息 Tab 组件 - 使用 SubTabContainer 通用组件
import React, { useMemo } from "react"; import React, { useMemo } from "react";
import { Card, CardBody } from "@chakra-ui/react";
import SubTabContainer, { type SubTabConfig } from "@components/SubTabContainer"; import SubTabContainer, { type SubTabConfig } from "@components/SubTabContainer";
import { THEME, TAB_CONFIG, getEnabledTabs } from "./config"; import { THEME, TAB_CONFIG, getEnabledTabs } from "./config";
@@ -66,17 +65,14 @@ const BasicInfoTab: React.FC<BasicInfoTabProps> = ({
const tabs = useMemo(() => buildTabsConfig(enabledTabs), [enabledTabs]); const tabs = useMemo(() => buildTabsConfig(enabledTabs), [enabledTabs]);
return ( return (
<Card bg={THEME.cardBg} shadow="md" border="1px solid" borderColor={THEME.border}>
<CardBody p={0}>
<SubTabContainer <SubTabContainer
tabs={tabs} tabs={tabs}
componentProps={{ stockCode }} componentProps={{ stockCode }}
defaultIndex={defaultTabIndex} defaultIndex={defaultTabIndex}
onTabChange={onTabChange} onTabChange={onTabChange}
themePreset="blackGold" themePreset="blackGold"
compact
/> />
</CardBody>
</Card>
); );
}; };