refactor(FinancialPanorama): 重构为 SubTabContainer 二级导航

- 主组件从 Chakra Tabs 迁移到 SubTabContainer
  - 新增 PeriodSelector 时间选择器组件
  - IndustryRankingView 增加深色主题支持
  - 拆分出 6 个独立 Tab 组件到 tabs/ 目录
  - 类型定义优化，props 改为可选

src/views/Company/components/FinancialPanorama/tabs/BalanceSheetTab.tsx

@@ -0,0 +1,77 @@
+/**
+ * 资产负债表 Tab
+ */
+
+import React from 'react';
+import {
+  Card,
+  CardBody,
+  CardHeader,
+  VStack,
+  HStack,
+  Heading,
+  Badge,
+  Text,
+} from '@chakra-ui/react';
+import { BalanceSheetTable } from '../components';
+import type { BalanceSheetData } from '../types';
+
+export interface BalanceSheetTabProps {
+  balanceSheet: BalanceSheetData[];
+  showMetricChart: (name: string, key: string, data: unknown[], path: string) => void;
+  calculateYoYChange: (value: number, period: string, data: unknown[], path: string) => { change: number; intensity: number };
+  getCellBackground: (change: number, intensity: number) => string;
+  positiveColor: string;
+  negativeColor: string;
+  bgColor: string;
+  hoverBg: string;
+}
+
+const BalanceSheetTab: React.FC<BalanceSheetTabProps> = ({
+  balanceSheet,
+  showMetricChart,
+  calculateYoYChange,
+  getCellBackground,
+  positiveColor,
+  negativeColor,
+  bgColor,
+  hoverBg,
+}) => {
+  const tableProps = {
+    showMetricChart,
+    calculateYoYChange,
+    getCellBackground,
+    positiveColor,
+    negativeColor,
+    bgColor,
+    hoverBg,
+  };
+
+  return (
+    <Card>
+      <CardHeader>
+        <VStack align="stretch" spacing={2}>
+          <HStack justify="space-between">
+            <Heading size="md">资产负债表</Heading>
+            <HStack spacing={2}>
+              <Badge colorScheme="blue">
+                显示最近{Math.min(balanceSheet.length, 8)}期
+              </Badge>
+              <Text fontSize="sm" color="gray.500">
+                红涨绿跌 | 同比变化
+              </Text>
+            </HStack>
+          </HStack>
+          <Text fontSize="xs" color="gray.500">
+            提示：表格可横向滚动查看更多数据，点击行查看历史趋势
+          </Text>
+        </VStack>
+      </CardHeader>
+      <CardBody>
+        <BalanceSheetTable data={balanceSheet} {...tableProps} />
+      </CardBody>
+    </Card>
+  );
+};
+
+export default BalanceSheetTab;

src/views/Company/components/FinancialPanorama/tabs/CashflowTab.tsx

@@ -0,0 +1,77 @@
+/**
+ * 现金流量表 Tab
+ */
+
+import React from 'react';
+import {
+  Card,
+  CardBody,
+  CardHeader,
+  VStack,
+  HStack,
+  Heading,
+  Badge,
+  Text,
+} from '@chakra-ui/react';
+import { CashflowTable } from '../components';
+import type { CashflowData } from '../types';
+
+export interface CashflowTabProps {
+  cashflow: CashflowData[];
+  showMetricChart: (name: string, key: string, data: unknown[], path: string) => void;
+  calculateYoYChange: (value: number, period: string, data: unknown[], path: string) => { change: number; intensity: number };
+  getCellBackground: (change: number, intensity: number) => string;
+  positiveColor: string;
+  negativeColor: string;
+  bgColor: string;
+  hoverBg: string;
+}
+
+const CashflowTab: React.FC<CashflowTabProps> = ({
+  cashflow,
+  showMetricChart,
+  calculateYoYChange,
+  getCellBackground,
+  positiveColor,
+  negativeColor,
+  bgColor,
+  hoverBg,
+}) => {
+  const tableProps = {
+    showMetricChart,
+    calculateYoYChange,
+    getCellBackground,
+    positiveColor,
+    negativeColor,
+    bgColor,
+    hoverBg,
+  };
+
+  return (
+    <Card>
+      <CardHeader>
+        <VStack align="stretch" spacing={2}>
+          <HStack justify="space-between">
+            <Heading size="md">现金流量表</Heading>
+            <HStack spacing={2}>
+              <Badge colorScheme="blue">
+                显示最近{Math.min(cashflow.length, 8)}期
+              </Badge>
+              <Text fontSize="sm" color="gray.500">
+                红涨绿跌 | 同比变化
+              </Text>
+            </HStack>
+          </HStack>
+          <Text fontSize="xs" color="gray.500">
+            提示：现金流数据为累计值，正值红色表示现金流入，负值绿色表示现金流出
+          </Text>
+        </VStack>
+      </CardHeader>
+      <CardBody>
+        <CashflowTable data={cashflow} {...tableProps} />
+      </CardBody>
+    </Card>
+  );
+};
+
+export default CashflowTab;

src/views/Company/components/FinancialPanorama/tabs/IncomeStatementTab.tsx

@@ -0,0 +1,77 @@
+/**
+ * 利润表 Tab
+ */
+
+import React from 'react';
+import {
+  Card,
+  CardBody,
+  CardHeader,
+  VStack,
+  HStack,
+  Heading,
+  Badge,
+  Text,
+} from '@chakra-ui/react';
+import { IncomeStatementTable } from '../components';
+import type { IncomeStatementData } from '../types';
+
+export interface IncomeStatementTabProps {
+  incomeStatement: IncomeStatementData[];
+  showMetricChart: (name: string, key: string, data: unknown[], path: string) => void;
+  calculateYoYChange: (value: number, period: string, data: unknown[], path: string) => { change: number; intensity: number };
+  getCellBackground: (change: number, intensity: number) => string;
+  positiveColor: string;
+  negativeColor: string;
+  bgColor: string;
+  hoverBg: string;
+}
+
+const IncomeStatementTab: React.FC<IncomeStatementTabProps> = ({
+  incomeStatement,
+  showMetricChart,
+  calculateYoYChange,
+  getCellBackground,
+  positiveColor,
+  negativeColor,
+  bgColor,
+  hoverBg,
+}) => {
+  const tableProps = {
+    showMetricChart,
+    calculateYoYChange,
+    getCellBackground,
+    positiveColor,
+    negativeColor,
+    bgColor,
+    hoverBg,
+  };
+
+  return (
+    <Card>
+      <CardHeader>
+        <VStack align="stretch" spacing={2}>
+          <HStack justify="space-between">
+            <Heading size="md">利润表</Heading>
+            <HStack spacing={2}>
+              <Badge colorScheme="blue">
+                显示最近{Math.min(incomeStatement.length, 8)}期
+              </Badge>
+              <Text fontSize="sm" color="gray.500">
+                红涨绿跌 | 同比变化
+              </Text>
+            </HStack>
+          </HStack>
+          <Text fontSize="xs" color="gray.500">
+            提示：Q1、中报、Q3、年报数据为累计值，同比显示与去年同期对比
+          </Text>
+        </VStack>
+      </CardHeader>
+      <CardBody>
+        <IncomeStatementTable data={incomeStatement} {...tableProps} />
+      </CardBody>
+    </Card>
+  );
+};
+
+export default IncomeStatementTab;

src/views/Company/components/FinancialPanorama/tabs/MainBusinessTab.tsx

@@ -0,0 +1,17 @@
+/**
+ * 主营业务 Tab
+ */
+
+import React from 'react';
+import { MainBusinessAnalysis } from '../components';
+import type { MainBusinessData } from '../types';
+
+export interface MainBusinessTabProps {
+  mainBusiness: MainBusinessData | null;
+}
+
+const MainBusinessTab: React.FC<MainBusinessTabProps> = ({ mainBusiness }) => {
+  return <MainBusinessAnalysis mainBusiness={mainBusiness} />;
+};
+
+export default MainBusinessTab;

src/views/Company/components/FinancialPanorama/tabs/MetricsTab.tsx

@@ -0,0 +1,43 @@
+/**
+ * 财务指标 Tab
+ */
+
+import React from 'react';
+import { FinancialMetricsTable } from '../components';
+import type { FinancialMetricsData } from '../types';
+
+export interface MetricsTabProps {
+  financialMetrics: FinancialMetricsData[];
+  showMetricChart: (name: string, key: string, data: unknown[], path: string) => void;
+  calculateYoYChange: (value: number, period: string, data: unknown[], path: string) => { change: number; intensity: number };
+  getCellBackground: (change: number, intensity: number) => string;
+  positiveColor: string;
+  negativeColor: string;
+  bgColor: string;
+  hoverBg: string;
+}
+
+const MetricsTab: React.FC<MetricsTabProps> = ({
+  financialMetrics,
+  showMetricChart,
+  calculateYoYChange,
+  getCellBackground,
+  positiveColor,
+  negativeColor,
+  bgColor,
+  hoverBg,
+}) => {
+  const tableProps = {
+    showMetricChart,
+    calculateYoYChange,
+    getCellBackground,
+    positiveColor,
+    negativeColor,
+    bgColor,
+    hoverBg,
+  };
+
+  return <FinancialMetricsTable data={financialMetrics} {...tableProps} />;
+};
+
+export default MetricsTab;

src/views/Company/components/FinancialPanorama/tabs/OverviewTab.tsx

@@ -0,0 +1,51 @@
+/**
+ * 财务概览 Tab
+ */
+
+import React from 'react';
+import { VStack } from '@chakra-ui/react';
+import { ComparisonAnalysis, FinancialMetricsTable } from '../components';
+import type { FinancialMetricsData, ComparisonData } from '../types';
+
+export interface OverviewTabProps {
+  comparison: ComparisonData[];
+  financialMetrics: FinancialMetricsData[];
+  showMetricChart: (name: string, key: string, data: unknown[], path: string) => void;
+  calculateYoYChange: (value: number, period: string, data: unknown[], path: string) => { change: number; intensity: number };
+  getCellBackground: (change: number, intensity: number) => string;
+  positiveColor: string;
+  negativeColor: string;
+  bgColor: string;
+  hoverBg: string;
+}
+
+const OverviewTab: React.FC<OverviewTabProps> = ({
+  comparison,
+  financialMetrics,
+  showMetricChart,
+  calculateYoYChange,
+  getCellBackground,
+  positiveColor,
+  negativeColor,
+  bgColor,
+  hoverBg,
+}) => {
+  const tableProps = {
+    showMetricChart,
+    calculateYoYChange,
+    getCellBackground,
+    positiveColor,
+    negativeColor,
+    bgColor,
+    hoverBg,
+  };
+
+  return (
+    <VStack spacing={4} align="stretch">
+      <ComparisonAnalysis comparison={comparison} />
+      <FinancialMetricsTable data={financialMetrics} {...tableProps} />
+    </VStack>
+  );
+};
+
+export default OverviewTab;

src/views/Company/components/FinancialPanorama/tabs/index.ts

@@ -0,0 +1,12 @@
+/**
+ * Tab 组件统一导出
+ * 仅保留三大财务报表 Tab
+ */
+
+export { default as BalanceSheetTab } from './BalanceSheetTab';
+export { default as IncomeStatementTab } from './IncomeStatementTab';
+export { default as CashflowTab } from './CashflowTab';
+
+export type { BalanceSheetTabProps } from './BalanceSheetTab';
+export type { IncomeStatementTabProps } from './IncomeStatementTab';
+export type { CashflowTabProps } from './CashflowTab';