From 08842b909714fad789e8c5352cf3c87a7f7bb92c Mon Sep 17 00:00:00 2001
From: zdl <3489966805@qq.com>
Date: Fri, 19 Dec 2025 16:51:08 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BC=98=E5=8C=96=E5=8A=A0=E8=BD=BD?=
 =?UTF-8?q?=E7=8A=B6=E6=80=81=E5=92=8C=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

MarketDataView:
- 移除重复的 LoadingState，改用 KLineModule 内部骨架屏
- 修复点击股票行情后数据不显示的问题

FinancialPanorama:
- 移除表格右上角"显示 6 期"标签
- 优化 loadingTab 状态处理

SubTabContainer:
- 重构布局：Tab 区域可滚动，右侧元素固定

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/components/SubTabContainer/index.tsx      | 176 ++++++++++--------
 .../components/UnifiedFinancialTable.tsx      |   6 -
 .../FinancialPanorama/tabs/UnifiedTabs.tsx    |  12 +-
 .../panels/TradeDataPanel/KLineModule.tsx     |  17 +-
 .../components/MarketDataView/index.tsx       |  56 +++---
 .../components/MarketDataView/types.ts        |   1 +
 6 files changed, 140 insertions(+), 128 deletions(-)

diff --git a/src/components/SubTabContainer/index.tsx b/src/components/SubTabContainer/index.tsx
index e077358d..a946d439 100644
--- 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) => {
diff --git a/src/views/Company/components/FinancialPanorama/components/UnifiedFinancialTable.tsx b/src/views/Company/components/FinancialPanorama/components/UnifiedFinancialTable.tsx
index 61869c73..f039900d 100644
--- 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}
diff --git a/src/views/Company/components/FinancialPanorama/tabs/UnifiedTabs.tsx b/src/views/Company/components/FinancialPanorama/tabs/UnifiedTabs.tsx
index 664ddeb7..f8008600 100644
--- 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';
diff --git a/src/views/Company/components/MarketDataView/components/panels/TradeDataPanel/KLineModule.tsx b/src/views/Company/components/MarketDataView/components/panels/TradeDataPanel/KLineModule.tsx
index 12e18409..7ee7b9d0 100644
--- 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}
diff --git a/src/views/Company/components/MarketDataView/index.tsx b/src/views/Company/components/MarketDataView/index.tsx
index 780fbade..2d490c6e 100644
--- 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>
 
diff --git a/src/views/Company/components/MarketDataView/types.ts b/src/views/Company/components/MarketDataView/types.ts
index c9fabdfb..84f1320f 100644
--- 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线数据加载中
 }
 
 /**