style(MarketDataView): 缩小页面间距

- Container py: 6 → 4
- VStack spacing: 6 → 4

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
zdl
2025-12-19 17:02:01 +08:00
parent 08842b9097
commit 11544909d3
6 changed files with 31 additions and 10 deletions

View File

@@ -95,6 +95,16 @@ export interface SubTabTheme {
tabHoverBg: string; tabHoverBg: string;
} }
/**
* 尺寸配置
*/
const SIZE_CONFIG = {
sm: { fontSize: '13px', px: 4, py: 2, gap: 1.5, iconSize: 3.5 },
md: { fontSize: '15px', px: 6, py: 3, gap: 2, iconSize: 4 },
} as const;
export type SubTabSize = keyof typeof SIZE_CONFIG;
/** /**
* 预设主题 - 深空 FUI 风格 * 预设主题 - 深空 FUI 风格
*/ */
@@ -140,6 +150,8 @@ export interface SubTabContainerProps {
rightElement?: React.ReactNode; rightElement?: React.ReactNode;
/** 紧凑模式 - 移除 TabList 的外边距 */ /** 紧凑模式 - 移除 TabList 的外边距 */
compact?: boolean; compact?: boolean;
/** Tab 尺寸: sm=小号(二级导航), md=正常(一级导航) */
size?: SubTabSize;
} }
const SubTabContainer: React.FC<SubTabContainerProps> = memo(({ const SubTabContainer: React.FC<SubTabContainerProps> = memo(({
@@ -154,7 +166,10 @@ const SubTabContainer: React.FC<SubTabContainerProps> = memo(({
isLazy = true, isLazy = true,
rightElement, rightElement,
compact = false, compact = false,
size = 'md',
}) => { }) => {
// 获取尺寸配置
const sizeConfig = SIZE_CONFIG[size];
// 内部状态(非受控模式) // 内部状态(非受控模式)
const [internalIndex, setInternalIndex] = useState(defaultIndex); const [internalIndex, setInternalIndex] = useState(defaultIndex);
@@ -239,9 +254,9 @@ const SubTabContainer: React.FC<SubTabContainerProps> = memo(({
<TabList <TabList
border="none" border="none"
px={3} px={3}
py={compact ? 2 : 3} py={compact ? 2 : sizeConfig.py}
flexWrap="nowrap" flexWrap="nowrap"
gap={2} gap={sizeConfig.gap}
> >
{tabs.map((tab, idx) => { {tabs.map((tab, idx) => {
const isSelected = idx === currentIndex; const isSelected = idx === currentIndex;
@@ -251,9 +266,9 @@ const SubTabContainer: React.FC<SubTabContainerProps> = memo(({
key={tab.key} key={tab.key}
color={theme.tabUnselectedColor} color={theme.tabUnselectedColor}
borderRadius={DEEP_SPACE.radius} borderRadius={DEEP_SPACE.radius}
px={6} px={sizeConfig.px}
py={3} py={sizeConfig.py}
fontSize="15px" fontSize={sizeConfig.fontSize}
fontWeight="500" fontWeight="500"
whiteSpace="nowrap" whiteSpace="nowrap"
flexShrink={0} flexShrink={0}
@@ -291,11 +306,11 @@ const SubTabContainer: React.FC<SubTabContainerProps> = memo(({
transform: 'translateY(0)', transform: 'translateY(0)',
}} }}
> >
<HStack spacing={2}> <HStack spacing={size === 'sm' ? 1.5 : 2}>
{tab.icon && ( {tab.icon && (
<Icon <Icon
as={tab.icon} as={tab.icon}
boxSize={4} boxSize={sizeConfig.iconSize}
opacity={isSelected ? 1 : 0.7} opacity={isSelected ? 1 : 0.7}
transition="opacity 0.2s" transition="opacity 0.2s"
/> />
@@ -314,7 +329,7 @@ const SubTabContainer: React.FC<SubTabContainerProps> = memo(({
flexShrink={0} flexShrink={0}
pr={3} pr={3}
pl={2} pl={2}
py={compact ? 2 : 3} py={compact ? 2 : sizeConfig.py}
borderLeft="1px solid" borderLeft="1px solid"
borderColor={DEEP_SPACE.borderGold} borderColor={DEEP_SPACE.borderGold}
> >

View File

@@ -72,6 +72,7 @@ const BasicInfoTab: React.FC<BasicInfoTabProps> = ({
onTabChange={onTabChange} onTabChange={onTabChange}
themePreset="blackGold" themePreset="blackGold"
compact compact
size="sm"
contentPadding={0} contentPadding={0}
/> />
); );

View File

@@ -75,6 +75,7 @@ const DeepAnalysisTab: React.FC<DeepAnalysisTabProps> = ({
onTabChange={onTabChange} onTabChange={onTabChange}
componentProps={{}} componentProps={{}}
themePreset="blackGold" themePreset="blackGold"
size="sm"
/> />
<LoadingState message="加载数据中..." height="200px" /> <LoadingState message="加载数据中..." height="200px" />
</CardBody> </CardBody>
@@ -99,6 +100,7 @@ const DeepAnalysisTab: React.FC<DeepAnalysisTabProps> = ({
onToggleSegment, onToggleSegment,
}} }}
themePreset="blackGold" themePreset="blackGold"
size="sm"
/> />
</CardBody> </CardBody>
</Card> </Card>

View File

@@ -59,6 +59,7 @@ const DynamicTracking = ({ stockCode: propStockCode }) => {
index={activeTab} index={activeTab}
onTabChange={(index) => setActiveTab(index)} onTabChange={(index) => setActiveTab(index)}
isLazy isLazy
size="sm"
/> />
</Box> </Box>
); );

View File

@@ -213,6 +213,7 @@ const FinancialPanorama: React.FC<FinancialPanoramaProps> = ({ stockCode: propSt
componentProps={componentProps} componentProps={componentProps}
themePreset="blackGold" themePreset="blackGold"
isLazy isLazy
size="sm"
onTabChange={handleTabChange} onTabChange={handleTabChange}
rightElement={ rightElement={
<PeriodSelector <PeriodSelector

View File

@@ -125,8 +125,8 @@ const MarketDataView: React.FC<MarketDataViewProps> = ({ stockCode: propStockCod
return ( return (
<Box bg={'#1A202C'} minH="100vh" color={theme.textPrimary}> <Box bg={'#1A202C'} minH="100vh" color={theme.textPrimary}>
<Container maxW="container.xl" py={6}> <Container maxW="container.xl" py={4}>
<VStack align="stretch" spacing={6}> <VStack align="stretch" spacing={4}>
{/* 股票概览 */} {/* 股票概览 */}
{summary && <StockSummaryCard summary={summary} theme={theme} />} {summary && <StockSummaryCard summary={summary} theme={theme} />}
@@ -153,6 +153,7 @@ const MarketDataView: React.FC<MarketDataViewProps> = ({ stockCode: propStockCod
index={activeTab} index={activeTab}
onTabChange={handleTabChange} onTabChange={handleTabChange}
isLazy isLazy
size="sm"
/> />
</VStack> </VStack>
</Container> </Container>