fix(types): 修复 ECharts 类型导出和组件类型冲突

- echarts.ts: 将 EChartsOption 改为 EChartsCoreOption 的类型别名 - FuiCorners: 移除 extends BoxProps，position 重命名为 corner - KLineChartModal/TimelineChartModal/ConcentrationCard: 使用导入的 EChartsOption - LoadingState: 新增骨架屏 variant 支持 - FinancialPanorama: 使用骨架屏加载状态 - useFinancialData/financialService: 优化数据获取逻辑 - Company/index: 简化组件结构 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-18 18:42:19 +08:00
parent 5331bc64b4
commit 2720946ccf
10 changed files with 213 additions and 104 deletions
--- a/src/views/Company/components/CompanyOverview/components/shareholder/ConcentrationCard.tsx
+++ b/src/views/Company/components/CompanyOverview/components/shareholder/ConcentrationCard.tsx
@@ -99,7 +99,7 @@ const ConcentrationCard: React.FC<ConcentrationCardProps> = ({ concentration = [
        chartInstance.current = echarts.init(chartRef.current);
      }

-      const option: echarts.EChartsOption = {
+      const option: EChartsOption = {
        backgroundColor: "transparent",
        tooltip: {
          trigger: "item",
--- a/src/views/Company/components/FinancialPanorama/hooks/useFinancialData.ts
+++ b/src/views/Company/components/FinancialPanorama/hooks/useFinancialData.ts
@@ -5,6 +5,7 @@

 import { useState, useEffect, useCallback, useRef } from 'react';
 import { useToast } from '@chakra-ui/react';
+import axios from 'axios';
 import { logger } from '@utils/logger';
 import { financialService } from '@services/financialService';
 import type {
@@ -19,6 +20,11 @@ import type {
  ComparisonData,
 } from '../types';

+// 判断是否为取消请求的错误
+const isCancelError = (error: unknown): boolean => {
+  return axios.isCancel(error) || (error instanceof Error && error.name === 'CanceledError');
+};
+
 // Tab key 到数据类型的映射
 export type DataTypeKey =
  | 'balance'
@@ -102,6 +108,10 @@ export const useFinancialData = (
  const isInitialLoad = useRef(true);
  const prevPeriods = useRef(selectedPeriods);

+  // AbortController refs - 用于取消请求
+  const coreDataControllerRef = useRef<AbortController | null>(null);
+  const tabDataControllerRef = useRef<AbortController | null>(null);
+
  // 判断 Tab key 对应的数据类型
  const getDataTypeForTab = (tabKey: DataTypeKey): 'balance' | 'income' | 'cashflow' | 'metrics' => {
    switch (tabKey) {
@@ -120,32 +130,36 @@ export const useFinancialData = (
  // 按数据类型加载数据
  const loadDataByType = useCallback(async (
    dataType: 'balance' | 'income' | 'cashflow' | 'metrics',
-    periods: number
+    periods: number,
+    signal?: AbortSignal
  ) => {
+    const options: { signal?: AbortSignal } = signal ? { signal } : {};
    try {
      switch (dataType) {
        case 'balance': {
-          const res = await financialService.getBalanceSheet(stockCode, periods);
+          const res = await financialService.getBalanceSheet(stockCode, periods, options);
          if (res.success) setBalanceSheet(res.data);
          break;
        }
        case 'income': {
-          const res = await financialService.getIncomeStatement(stockCode, periods);
+          const res = await financialService.getIncomeStatement(stockCode, periods, options);
          if (res.success) setIncomeStatement(res.data);
          break;
        }
        case 'cashflow': {
-          const res = await financialService.getCashflow(stockCode, periods);
+          const res = await financialService.getCashflow(stockCode, periods, options);
          if (res.success) setCashflow(res.data);
          break;
        }
        case 'metrics': {
-          const res = await financialService.getFinancialMetrics(stockCode, periods);
+          const res = await financialService.getFinancialMetrics(stockCode, periods, options);
          if (res.success) setFinancialMetrics(res.data);
          break;
        }
      }
    } catch (err) {
+      // 取消请求不作为错误处理
+      if (isCancelError(err)) return;
      logger.error('useFinancialData', 'loadDataByType', err, { dataType, periods });
      throw err;
    }
@@ -157,6 +171,11 @@ export const useFinancialData = (
      return;
    }

+    // 取消之前的 Tab 数据请求
+    tabDataControllerRef.current?.abort();
+    const controller = new AbortController();
+    tabDataControllerRef.current = controller;
+
    const dataType = getDataTypeForTab(tabKey);
    logger.debug('useFinancialData', '刷新单个 Tab 数据', { tabKey, dataType, selectedPeriods });

@@ -164,13 +183,18 @@ export const useFinancialData = (
    setError(null);

    try {
-      await loadDataByType(dataType, selectedPeriods);
+      await loadDataByType(dataType, selectedPeriods, controller.signal);
      logger.info('useFinancialData', `${tabKey} 数据刷新成功`);
    } catch (err) {
+      // 取消请求不作为错误处理
+      if (isCancelError(err)) return;
      const errorMessage = err instanceof Error ? err.message : '未知错误';
      setError(errorMessage);
    } finally {
-      setLoadingTab(null);
+      // 只有当前请求没有被取消时才设置 loading 状态
+      if (!controller.signal.aborted) {
+        setLoadingTab(null);
+      }
    }
  }, [stockCode, selectedPeriods, loadDataByType]);

@@ -191,6 +215,12 @@ export const useFinancialData = (
      return;
    }

+    // 取消之前的核心数据请求
+    coreDataControllerRef.current?.abort();
+    const controller = new AbortController();
+    coreDataControllerRef.current = controller;
+    const options = { signal: controller.signal };
+
    logger.debug('useFinancialData', '开始加载核心财务数据', { stockCode, selectedPeriods });
    setLoading(true);
    setError(null);
@@ -203,10 +233,10 @@ export const useFinancialData = (
        comparisonRes,
        businessRes,
      ] = await Promise.all([
-        financialService.getStockInfo(stockCode),
-        financialService.getFinancialMetrics(stockCode, selectedPeriods),
-        financialService.getPeriodComparison(stockCode, selectedPeriods),
-        financialService.getMainBusiness(stockCode, 4),
+        financialService.getStockInfo(stockCode, options),
+        financialService.getFinancialMetrics(stockCode, selectedPeriods, options),
+        financialService.getPeriodComparison(stockCode, selectedPeriods, options),
+        financialService.getMainBusiness(stockCode, 4, options),
      ]);

      // 设置数据
@@ -217,11 +247,16 @@ export const useFinancialData = (

      logger.info('useFinancialData', '核心财务数据加载成功', { stockCode });
    } catch (err) {
+      // 取消请求不作为错误处理
+      if (isCancelError(err)) return;
      const errorMessage = err instanceof Error ? err.message : '未知错误';
      setError(errorMessage);
      logger.error('useFinancialData', 'loadCoreFinancialData', err, { stockCode, selectedPeriods });
    } finally {
-      setLoading(false);
+      // 只有当前请求没有被取消时才设置 loading 状态
+      if (!controller.signal.aborted) {
+        setLoading(false);
+      }
    }
  }, [stockCode, selectedPeriods, toast]);

@@ -253,6 +288,14 @@ export const useFinancialData = (
    }
  }, [selectedPeriods, activeTab, refetchByTab]);

+  // 组件卸载时取消所有进行中的请求
+  useEffect(() => {
+    return () => {
+      coreDataControllerRef.current?.abort();
+      tabDataControllerRef.current?.abort();
+    };
+  }, []);
+
  return {
    // 数据状态
    stockInfo,
--- a/src/views/Company/components/FinancialPanorama/index.tsx
+++ b/src/views/Company/components/FinancialPanorama/index.tsx
@@ -283,7 +283,7 @@ const FinancialPanorama: React.FC<FinancialPanoramaProps> = ({ stockCode: propSt
      <VStack spacing={6} align="stretch">
        {/* 财务全景面板（三列布局：成长能力、盈利与回报、风险与运营） */}
        {loading ? (
-          <LoadingState message="加载财务数据中..." height="300px" />
+          <LoadingState message="加载财务数据中..." height="300px" variant="skeleton" skeletonRows={6} />
        ) : (
          <FinancialOverviewPanel
            stockInfo={stockInfo}
--- a/src/views/Company/components/LoadingState.tsx
+++ b/src/views/Company/components/LoadingState.tsx
@@ -1,29 +1,97 @@
 // src/views/Company/components/LoadingState.tsx
 // 统一的加载状态组件 - 黑金主题

-import React from "react";
-import { Center, VStack, Spinner, Text } from "@chakra-ui/react";
+import React, { memo } from "react";
+import { Center, VStack, Spinner, Text, Box, Skeleton, SimpleGrid } from "@chakra-ui/react";

 // 黑金主题配置
 const THEME = {
  gold: "#D4AF37",
+  goldLight: "rgba(212, 175, 55, 0.3)",
+  bgInset: "rgba(26, 32, 44, 0.6)",
+  borderGlass: "rgba(212, 175, 55, 0.2)",
  textSecondary: "gray.400",
+  radiusSM: "md",
+  radiusMD: "lg",
 };

 interface LoadingStateProps {
  message?: string;
  height?: string;
+  /** 使用骨架屏模式（更好的视觉体验） */
+  variant?: "spinner" | "skeleton";
+  /** 骨架屏行数 */
+  skeletonRows?: number;
 }

+/**
+ * 骨架屏组件（黑金主题）
+ */
+const SkeletonContent: React.FC<{ rows: number }> = memo(({ rows }) => (
+  <VStack align="stretch" spacing={4} w="100%">
+    {/* 头部骨架 */}
+    <Box display="flex" justifyContent="space-between" alignItems="center">
+      <Skeleton
+        height="28px"
+        width="180px"
+        startColor={THEME.bgInset}
+        endColor={THEME.borderGlass}
+        borderRadius={THEME.radiusSM}
+      />
+      <Skeleton
+        height="24px"
+        width="100px"
+        startColor={THEME.bgInset}
+        endColor={THEME.borderGlass}
+        borderRadius={THEME.radiusSM}
+      />
+    </Box>
+
+    {/* 内容骨架行 */}
+    <SimpleGrid columns={{ base: 2, md: 4 }} spacing={4}>
+      {Array.from({ length: Math.min(rows, 8) }).map((_, i) => (
+        <Skeleton
+          key={i}
+          height="60px"
+          startColor={THEME.bgInset}
+          endColor={THEME.borderGlass}
+          borderRadius={THEME.radiusMD}
+        />
+      ))}
+    </SimpleGrid>
+
+    {/* 图表区域骨架 */}
+    <Skeleton
+      height="200px"
+      startColor={THEME.bgInset}
+      endColor={THEME.borderGlass}
+      borderRadius={THEME.radiusMD}
+    />
+  </VStack>
+));
+
+SkeletonContent.displayName = "SkeletonContent";
+
 /**
 * 统一的加载状态组件（黑金主题）
 *
 * 用于所有一级 Tab 的 loading 状态展示
+ * @param variant - "spinner"（默认）或 "skeleton"（骨架屏）
 */
-const LoadingState: React.FC<LoadingStateProps> = ({
+const LoadingState: React.FC<LoadingStateProps> = memo(({
  message = "加载中...",
  height = "300px",
+  variant = "spinner",
+  skeletonRows = 4,
 }) => {
+  if (variant === "skeleton") {
+    return (
+      <Box h={height} p={4}>
+        <SkeletonContent rows={skeletonRows} />
+      </Box>
+    );
+  }
+
  return (
    <Center h={height}>
      <VStack spacing={4}>
@@ -39,6 +107,8 @@ const LoadingState: React.FC<LoadingStateProps> = ({
      </VStack>
    </Center>
  );
-};
+});
+
+LoadingState.displayName = "LoadingState";

 export default LoadingState;
--- a/src/views/Company/index.tsx
+++ b/src/views/Company/index.tsx
@@ -24,52 +24,6 @@ import CompanyHeader from './components/CompanyHeader';
 import StockQuoteCard from './components/StockQuoteCard';
 import { THEME, TAB_CONFIG } from './config';

-// ============================================
-// 主内容区组件 - FUI 风格
-// ============================================
-
-interface CompanyContentProps {
-  stockCode: string;
-  isInWatchlist: boolean;
-  watchlistLoading: boolean;
-  onWatchlistToggle: () => void;
-  onTabChange: (index: number, tabKey: string) => void;
-}
-
-const CompanyContent = memo<CompanyContentProps>(({
-  stockCode,
-  isInWatchlist,
-  watchlistLoading,
-  onWatchlistToggle,
-  onTabChange,
-}) => (
-  <Box maxW="container.xl" mx="auto" px={4} py={6}>
-    {/* 股票行情卡片 - 放在 Tab 切换器上方，始终可见 */}
-    <Box mb={6}>
-      <StockQuoteCard
-        stockCode={stockCode}
-        isInWatchlist={isInWatchlist}
-        isWatchlistLoading={watchlistLoading}
-        onWatchlistToggle={onWatchlistToggle}
-      />
-    </Box>
-
-    {/* Tab 内容区 - 使用 FuiContainer */}
-    <FuiContainer variant="default">
-      <SubTabContainer
-        tabs={TAB_CONFIG}
-        componentProps={{ stockCode }}
-        onTabChange={onTabChange}
-        themePreset="blackGold"
-        contentPadding={0}
-        isLazy={true}
-      />
-    </FuiContainer>
-  </Box>
-));
-
-CompanyContent.displayName = 'CompanyContent';
-
 // ============================================
 // 主页面组件
 // ============================================
@@ -162,13 +116,29 @@ const CompanyIndex: React.FC = () => {

      {/* 主内容区 */}
      <Box position="relative" zIndex={1}>
-        <CompanyContent
-          stockCode={stockCode}
-          isInWatchlist={isInWatchlist}
-          watchlistLoading={watchlistLoading}
-          onWatchlistToggle={handleWatchlistToggle}
-          onTabChange={handleTabChange}
-        />
+        <Box maxW="container.xl" mx="auto" px={4} py={6}>
+          {/* 股票行情卡片 - 放在 Tab 切换器上方，始终可见 */}
+          <Box mb={6}>
+            <StockQuoteCard
+              stockCode={stockCode}
+              isInWatchlist={isInWatchlist}
+              isWatchlistLoading={watchlistLoading}
+              onWatchlistToggle={handleWatchlistToggle}
+            />
+          </Box>
+
+          {/* Tab 内容区 - 使用 FuiContainer */}
+          <FuiContainer variant="default">
+            <SubTabContainer
+              tabs={TAB_CONFIG}
+              componentProps={{ stockCode }}
+              onTabChange={handleTabChange}
+              themePreset="blackGold"
+              contentPadding={0}
+              isLazy={true}
+            />
+          </FuiContainer>
+        </Box>
      </Box>
    </Box>
  );