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>
2025-12-19 16:51:08 +08:00
parent 0ad0287f7b
commit 08842b9097
6 changed files with 140 additions and 128 deletions
--- a/src/components/SubTabContainer/index.tsx
+++ b/src/components/SubTabContainer/index.tsx
@@ -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) => {
--- a/src/views/Company/components/FinancialPanorama/components/UnifiedFinancialTable.tsx
+++ b/src/views/Company/components/FinancialPanorama/components/UnifiedFinancialTable.tsx
@@ -345,12 +345,6 @@ const UnifiedFinancialTableInner: React.FC<UnifiedFinancialTableProps> = ({
  return (
    <Box className={TABLE_CLASS_NAME}>
      <style>{extendedTableStyles}</style>
-      {/* 右上角显示期数标签 */}
-      <HStack justify="flex-end" mb={1}>
-        <Text fontSize="2xs" color="gray.500">
-          显示 {displayData.length} 期
-        </Text>
-      </HStack>
      <ConfigProvider theme={BLACK_GOLD_TABLE_THEME}>
        <Table
          columns={columns}
--- a/src/views/Company/components/FinancialPanorama/tabs/UnifiedTabs.tsx
+++ b/src/views/Company/components/FinancialPanorama/tabs/UnifiedTabs.tsx
@@ -216,26 +216,26 @@ const BALANCE_SHEET_SECTIONS = [
 ];

 /** 资产负债表 Tab */
-export const BalanceSheetTab = memo<BalanceSheetTabProps>(({ balanceSheet, loading, showMetricChart }) => (
+export const BalanceSheetTab = memo<BalanceSheetTabProps>(({ balanceSheet, loading, loadingTab, showMetricChart }) => (
  <UnifiedFinancialTable
    type="statement"
    data={balanceSheet as unknown as FinancialDataItem[]}
    sections={BALANCE_SHEET_SECTIONS}
    showMetricChart={showMetricChart}
-    loading={loading}
+    loading={loading || loadingTab === 'balance'}
  />
 ));
 BalanceSheetTab.displayName = 'BalanceSheetTab';

 /** 利润表 Tab */
-export const IncomeStatementTab = memo<IncomeStatementTabProps>(({ incomeStatement, loading, showMetricChart }) => (
+export const IncomeStatementTab = memo<IncomeStatementTabProps>(({ incomeStatement, loading, loadingTab, showMetricChart }) => (
  <UnifiedFinancialTable
    type="statement"
    data={incomeStatement as unknown as FinancialDataItem[]}
    sections={INCOME_STATEMENT_SECTIONS}
    hideTotalSectionTitle={false}
    showMetricChart={showMetricChart}
-    loading={loading}
+    loading={loading || loadingTab === 'income'}
  />
 ));
 IncomeStatementTab.displayName = 'IncomeStatementTab';
@@ -251,14 +251,14 @@ const CASHFLOW_SECTIONS = [{
 }];

 /** 现金流量表 Tab */
-export const CashflowTab = memo<CashflowTabProps>(({ cashflow, loading, showMetricChart }) => (
+export const CashflowTab = memo<CashflowTabProps>(({ cashflow, loading, loadingTab, showMetricChart }) => (
  <UnifiedFinancialTable
    type="statement"
    data={cashflow as unknown as FinancialDataItem[]}
    sections={CASHFLOW_SECTIONS}
    hideTotalSectionTitle
    showMetricChart={showMetricChart}
-    loading={loading}
+    loading={loading || loadingTab === 'cashflow'}
  />
 ));
 CashflowTab.displayName = 'CashflowTab';
--- a/src/views/Company/components/MarketDataView/components/panels/TradeDataPanel/KLineModule.tsx
+++ b/src/views/Company/components/MarketDataView/components/panels/TradeDataPanel/KLineModule.tsx
@@ -2,7 +2,7 @@
 // K线模块 - 日K线/分时图切换展示（黑金主题 + 专业技术指标 + 商品数据叠加 + 分时盘口）

 import React, { useState, useMemo, useCallback, memo } from 'react';
-import { Box } from '@chakra-ui/react';
+import { Box, HStack, Skeleton, Card, CardBody } from '@chakra-ui/react';

 import { darkGoldTheme } from '../../../constants';
 import type { IndicatorType, MainIndicatorType, DrawingType } from '../../../utils/chartOptions';
@@ -30,6 +30,7 @@ const KLineModule: React.FC<KLineModuleProps> = ({
  selectedPeriod,
  onPeriodChange,
  stockCode,
+  loading = false,
 }) => {
  // ========== 状态管理 ==========
  const [mode, setMode] = useState<ChartMode>('daily');
@@ -127,7 +128,19 @@ const KLineModule: React.FC<KLineModuleProps> = ({

      {/* 图表内容区域 */}
      <Box pt={4}>
-        {mode === 'daily' ? (
+        {/* 加载中骨架屏 */}
+        {loading && tradeData.length === 0 ? (
+          <Card bg="gray.900" border="1px solid" borderColor="rgba(212, 175, 55, 0.3)">
+            <CardBody p={4}>
+              <Skeleton
+                height="600px"
+                borderRadius="md"
+                startColor="rgba(26, 32, 44, 0.6)"
+                endColor="rgba(212, 175, 55, 0.2)"
+              />
+            </CardBody>
+          </Card>
+        ) : mode === 'daily' ? (
          // 日K线图
          <DailyKLineChart
            tradeData={tradeData}
--- a/src/views/Company/components/MarketDataView/index.tsx
+++ b/src/views/Company/components/MarketDataView/index.tsx
@@ -30,7 +30,6 @@ import {
  UnusualPanel,
  PledgePanel,
 } from './components/panels';
-import LoadingState from '../LoadingState';
 import type { MarketDataViewProps } from './types';

 /**
@@ -61,7 +60,6 @@ const MarketDataView: React.FC<MarketDataViewProps> = ({ stockCode: propStockCod
    minuteData,
    minuteLoading,
    analysisMap,
-    refetch,
    loadMinuteData,
    loadDataByType,
  } = useMarketData(stockCode, selectedPeriod);
@@ -133,41 +131,29 @@ const MarketDataView: React.FC<MarketDataViewProps> = ({ stockCode: propStockCod
          {summary && <StockSummaryCard summary={summary} theme={theme} />}

          {/* 交易数据 - 日K/分钟K线（独立显示在 Tab 上方） */}
-          {!loading && (
-            <TradeDataPanel
-              theme={theme}
-              tradeData={tradeData}
-              minuteData={minuteData}
-              minuteLoading={minuteLoading}
-              analysisMap={analysisMap}
-              onLoadMinuteData={loadMinuteData}
-              onChartClick={handleChartClick}
-              selectedPeriod={selectedPeriod}
-              onPeriodChange={setSelectedPeriod}
-              stockCode={stockCode}
-            />
-          )}
+          <TradeDataPanel
+            theme={theme}
+            tradeData={tradeData}
+            minuteData={minuteData}
+            minuteLoading={minuteLoading}
+            analysisMap={analysisMap}
+            onLoadMinuteData={loadMinuteData}
+            onChartClick={handleChartClick}
+            selectedPeriod={selectedPeriod}
+            onPeriodChange={setSelectedPeriod}
+            stockCode={stockCode}
+            loading={loading}
+          />

          {/* 主要内容区域 - Tab */}
-          {loading ? (
-            <Box
-              bg="gray.900"
-              border="1px solid"
-              borderColor="rgba(212, 175, 55, 0.3)"
-              borderRadius="xl"
-            >
-              <LoadingState message="数据加载中..." height="400px" />
-            </Box>
-          ) : (
-            <SubTabContainer
-              tabs={tabConfigs}
-              componentProps={componentProps}
-              themePreset="blackGold"
-              index={activeTab}
-              onTabChange={handleTabChange}
-              isLazy
-            />
-          )}
+          <SubTabContainer
+            tabs={tabConfigs}
+            componentProps={componentProps}
+            themePreset="blackGold"
+            index={activeTab}
+            onTabChange={handleTabChange}
+            isLazy
+          />
        </VStack>
      </Container>

--- a/src/views/Company/components/MarketDataView/types.ts
+++ b/src/views/Company/components/MarketDataView/types.ts
@@ -300,6 +300,7 @@ export interface KLineModuleProps {
  selectedPeriod?: number;
  onPeriodChange?: (period: number) => void;
  stockCode?: string;  // 股票代码，用于获取实时盘口数据
+  loading?: boolean;   // 日K线数据加载中
 }

 /**