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;
|
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}
|
||||||
>
|
>
|
||||||
|
|||||||
@@ -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}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -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
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user