fix: 优化加载状态和布局
MarketDataView: - 移除重复的 LoadingState，改用 KLineModule 内部骨架屏 - 修复点击股票行情后数据不显示的问题 FinancialPanorama: - 移除表格右上角"显示 6 期"标签 - 优化 loadingTab 状态处理 SubTabContainer: - 重构布局：Tab 区域可滚动，右侧元素固定 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
zdl
@@ -22,6 +22,7 @@
|
||||
import React, { useState, useCallback, memo, Suspense } from 'react';
|
||||
import {
|
||||
Box,
|
||||
Flex,
|
||||
Tabs,
|
||||
TabList,
|
||||
TabPanels,
|
||||
@@ -30,7 +31,6 @@ import {
|
||||
Icon,
|
||||
HStack,
|
||||
Text,
|
||||
Spacer,
|
||||
Center,
|
||||
Spinner,
|
||||
} from '@chakra-ui/react';
|
||||
@@ -202,8 +202,8 @@ const SubTabContainer: React.FC<SubTabContainerProps> = memo(({
|
||||
index={currentIndex}
|
||||
onChange={handleTabChange}
|
||||
>
|
||||
{/* TabList - 玻璃态导航栏 */}
|
||||
<TabList
|
||||
{/* 导航栏容器：左侧 Tab 可滚动，右侧元素固定 */}
|
||||
<Flex
|
||||
bg={theme.bg}
|
||||
backdropFilter="blur(20px)"
|
||||
borderBottom="1px solid"
|
||||
@@ -211,18 +211,9 @@ const SubTabContainer: React.FC<SubTabContainerProps> = memo(({
|
||||
borderRadius={compact ? 0 : DEEP_SPACE.radiusLG}
|
||||
mx={compact ? 0 : 2}
|
||||
mb={compact ? 0 : 2}
|
||||
px={3}
|
||||
py={compact ? 2 : 3}
|
||||
flexWrap="nowrap"
|
||||
gap={2}
|
||||
alignItems="center"
|
||||
overflowX="auto"
|
||||
position="relative"
|
||||
boxShadow={compact ? 'none' : DEEP_SPACE.innerGlow}
|
||||
css={{
|
||||
'&::-webkit-scrollbar': { display: 'none' },
|
||||
scrollbarWidth: 'none',
|
||||
}}
|
||||
alignItems="center"
|
||||
>
|
||||
{/* 顶部金色光条 */}
|
||||
<Box
|
||||
@@ -235,75 +226,102 @@ const SubTabContainer: React.FC<SubTabContainerProps> = memo(({
|
||||
background={`linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.4), transparent)`}
|
||||
/>
|
||||
|
||||
{tabs.map((tab, idx) => {
|
||||
const isSelected = idx === currentIndex;
|
||||
{/* 左侧：可滚动的 Tab 区域 */}
|
||||
<Box
|
||||
flex="1"
|
||||
minW={0}
|
||||
overflowX="auto"
|
||||
css={{
|
||||
'&::-webkit-scrollbar': { display: 'none' },
|
||||
scrollbarWidth: 'none',
|
||||
}}
|
||||
>
|
||||
<TabList
|
||||
border="none"
|
||||
px={3}
|
||||
py={compact ? 2 : 3}
|
||||
flexWrap="nowrap"
|
||||
gap={2}
|
||||
>
|
||||
{tabs.map((tab, idx) => {
|
||||
const isSelected = idx === currentIndex;
|
||||
|
||||
return (
|
||||
<Tab
|
||||
key={tab.key}
|
||||
color={theme.tabUnselectedColor}
|
||||
borderRadius={DEEP_SPACE.radius}
|
||||
px={6}
|
||||
py={3}
|
||||
fontSize="15px"
|
||||
fontWeight="500"
|
||||
whiteSpace="nowrap"
|
||||
flexShrink={0}
|
||||
border="1px solid transparent"
|
||||
position="relative"
|
||||
letterSpacing="0.03em"
|
||||
transition={DEEP_SPACE.transition}
|
||||
_before={{
|
||||
content: '""',
|
||||
position: 'absolute',
|
||||
bottom: '-1px',
|
||||
left: '50%',
|
||||
transform: 'translateX(-50%)',
|
||||
width: isSelected ? '70%' : '0%',
|
||||
height: '2px',
|
||||
bg: '#D4AF37',
|
||||
borderRadius: 'full',
|
||||
transition: 'width 0.3s ease',
|
||||
boxShadow: isSelected ? '0 0 10px rgba(212, 175, 55, 0.5)' : 'none',
|
||||
}}
|
||||
_selected={{
|
||||
bg: theme.tabSelectedBg,
|
||||
color: theme.tabSelectedColor,
|
||||
fontWeight: '700',
|
||||
boxShadow: DEEP_SPACE.glowGold,
|
||||
border: `1px solid ${DEEP_SPACE.borderGoldHover}`,
|
||||
transform: 'translateY(-2px)',
|
||||
}}
|
||||
_hover={{
|
||||
bg: isSelected ? undefined : theme.tabHoverBg,
|
||||
border: isSelected ? undefined : `1px solid ${DEEP_SPACE.borderGold}`,
|
||||
transform: 'translateY(-1px)',
|
||||
}}
|
||||
_active={{
|
||||
transform: 'translateY(0)',
|
||||
}}
|
||||
>
|
||||
<HStack spacing={2}>
|
||||
{tab.icon && (
|
||||
<Icon
|
||||
as={tab.icon}
|
||||
boxSize={4}
|
||||
opacity={isSelected ? 1 : 0.7}
|
||||
transition="opacity 0.2s"
|
||||
/>
|
||||
)}
|
||||
<Text>{tab.name}</Text>
|
||||
</HStack>
|
||||
</Tab>
|
||||
);
|
||||
})}
|
||||
return (
|
||||
<Tab
|
||||
key={tab.key}
|
||||
color={theme.tabUnselectedColor}
|
||||
borderRadius={DEEP_SPACE.radius}
|
||||
px={6}
|
||||
py={3}
|
||||
fontSize="15px"
|
||||
fontWeight="500"
|
||||
whiteSpace="nowrap"
|
||||
flexShrink={0}
|
||||
border="1px solid transparent"
|
||||
position="relative"
|
||||
letterSpacing="0.03em"
|
||||
transition={DEEP_SPACE.transition}
|
||||
_before={{
|
||||
content: '""',
|
||||
position: 'absolute',
|
||||
bottom: '-1px',
|
||||
left: '50%',
|
||||
transform: 'translateX(-50%)',
|
||||
width: isSelected ? '70%' : '0%',
|
||||
height: '2px',
|
||||
bg: '#D4AF37',
|
||||
borderRadius: 'full',
|
||||
transition: 'width 0.3s ease',
|
||||
boxShadow: isSelected ? '0 0 10px rgba(212, 175, 55, 0.5)' : 'none',
|
||||
}}
|
||||
_selected={{
|
||||
bg: theme.tabSelectedBg,
|
||||
color: theme.tabSelectedColor,
|
||||
fontWeight: '700',
|
||||
boxShadow: DEEP_SPACE.glowGold,
|
||||
border: `1px solid ${DEEP_SPACE.borderGoldHover}`,
|
||||
transform: 'translateY(-2px)',
|
||||
}}
|
||||
_hover={{
|
||||
bg: isSelected ? undefined : theme.tabHoverBg,
|
||||
border: isSelected ? undefined : `1px solid ${DEEP_SPACE.borderGold}`,
|
||||
transform: 'translateY(-1px)',
|
||||
}}
|
||||
_active={{
|
||||
transform: 'translateY(0)',
|
||||
}}
|
||||
>
|
||||
<HStack spacing={2}>
|
||||
{tab.icon && (
|
||||
<Icon
|
||||
as={tab.icon}
|
||||
boxSize={4}
|
||||
opacity={isSelected ? 1 : 0.7}
|
||||
transition="opacity 0.2s"
|
||||
/>
|
||||
)}
|
||||
<Text>{tab.name}</Text>
|
||||
</HStack>
|
||||
</Tab>
|
||||
);
|
||||
})}
|
||||
</TabList>
|
||||
</Box>
|
||||
|
||||
{/* 右侧：固定的自定义元素（如期数选择器） */}
|
||||
{rightElement && (
|
||||
<>
|
||||
<Spacer />
|
||||
<Box flexShrink={0}>{rightElement}</Box>
|
||||
</>
|
||||
<Box
|
||||
flexShrink={0}
|
||||
pr={3}
|
||||
pl={2}
|
||||
py={compact ? 2 : 3}
|
||||
borderLeft="1px solid"
|
||||
borderColor={DEEP_SPACE.borderGold}
|
||||
>
|
||||
{rightElement}
|
||||
</Box>
|
||||
)}
|
||||
</TabList>
|
||||
</Flex>
|
||||
|
||||
<TabPanels p={contentPadding}>
|
||||
{tabs.map((tab, idx) => {
|
||||
|
||||
Reference in New Issue
Block a user