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

View File

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

View File

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

View File

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

View File

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

View File

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