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,6 +226,23 @@ const SubTabContainer: React.FC<SubTabContainerProps> = memo(({
            background={`linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.4), transparent)`}
          />

+          {/* 左侧：可滚动的 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;

@@ -297,13 +305,23 @@ const SubTabContainer: React.FC<SubTabContainerProps> = memo(({
                  </Tab>
                );
              })}
-          {rightElement && (
-            <>
-              <Spacer />
-              <Box flexShrink={0}>{rightElement}</Box>
-            </>
-          )}
            </TabList>
+          </Box>
+
+          {/* 右侧：固定的自定义元素（如期数选择器） */}
+          {rightElement && (
+            <Box
+              flexShrink={0}
+              pr={3}
+              pl={2}
+              py={compact ? 2 : 3}
+              borderLeft="1px solid"
+              borderColor={DEEP_SPACE.borderGold}
+            >
+              {rightElement}
+            </Box>
+          )}
+        </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,7 +131,6 @@ const MarketDataView: React.FC<MarketDataViewProps> = ({ stockCode: propStockCod
          {summary && <StockSummaryCard summary={summary} theme={theme} />}

          {/* 交易数据 - 日K/分钟K线（独立显示在 Tab 上方） */}
-          {!loading && (
          <TradeDataPanel
            theme={theme}
            tradeData={tradeData}
@@ -145,20 +142,10 @@ const MarketDataView: React.FC<MarketDataViewProps> = ({ stockCode: propStockCod
            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}
@@ -167,7 +154,6 @@ const MarketDataView: React.FC<MarketDataViewProps> = ({ stockCode: propStockCod
            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线数据加载中
 }

 /**