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:
@@ -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}
|
||||
>
|
||||
|
||||
@@ -72,6 +72,7 @@ const BasicInfoTab: React.FC<BasicInfoTabProps> = ({
|
||||
onTabChange={onTabChange}
|
||||
themePreset="blackGold"
|
||||
compact
|
||||
size="sm"
|
||||
contentPadding={0}
|
||||
/>
|
||||
);
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -59,6 +59,7 @@ const DynamicTracking = ({ stockCode: propStockCode }) => {
|
||||
index={activeTab}
|
||||
onTabChange={(index) => setActiveTab(index)}
|
||||
isLazy
|
||||
size="sm"
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
|
||||
@@ -213,6 +213,7 @@ const FinancialPanorama: React.FC<FinancialPanoramaProps> = ({ stockCode: propSt
|
||||
componentProps={componentProps}
|
||||
themePreset="blackGold"
|
||||
isLazy
|
||||
size="sm"
|
||||
onTabChange={handleTabChange}
|
||||
rightElement={
|
||||
<PeriodSelector
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user