feat: 添加Company 页面 Tab 切换组件

src/views/Company/components/CompanyTabs/TabNavigation.js

@@ -0,0 +1,45 @@
+// src/views/Company/components/CompanyTabs/TabNavigation.js
+// Tab 导航组件 - 动态渲染 Tab 按钮
+
+import React from 'react';
+import {
+  TabList,
+  Tab,
+  HStack,
+  Icon,
+  Text,
+} from '@chakra-ui/react';
+
+import { COMPANY_TABS, TAB_SELECTED_STYLE } from '../../constants';
+
+/**
+ * Tab 导航组件
+ *
+ * @param {Object} props
+ * @param {string} props.tabBg - Tab 列表背景色
+ * @param {string} props.activeBg - 激活状态背景色
+ */
+const TabNavigation = ({ tabBg, activeBg }) => {
+  return (
+    <TabList p={4} bg={tabBg}>
+      {COMPANY_TABS.map((tab, index) => (
+        <Tab
+          key={tab.key}
+          _selected={{
+            bg: activeBg,
+            color: 'white',
+            ...TAB_SELECTED_STYLE,
+          }}
+          mr={index < COMPANY_TABS.length - 1 ? 2 : 0}
+        >
+          <HStack spacing={2}>
+            <Icon as={tab.icon} />
+            <Text>{tab.name}</Text>
+          </HStack>
+        </Tab>
+      ))}
+    </TabList>
+  );
+};
+
+export default TabNavigation;

src/views/Company/components/CompanyTabs/index.js

@@ -0,0 +1,100 @@
+// src/views/Company/components/CompanyTabs/index.js
+// Tab 容器组件 - 管理 Tab 切换和内容渲染
+
+import React, { useState } from 'react';
+import {
+  Card,
+  CardBody,
+  Tabs,
+  TabPanels,
+  TabPanel,
+  Divider,
+  useColorModeValue,
+} from '@chakra-ui/react';
+
+import TabNavigation from './TabNavigation';
+import { COMPANY_TABS, getTabNameByIndex } from '../../constants';
+
+// 子组件导入
+import FinancialPanorama from '../../FinancialPanorama';
+import ForecastReport from '../../ForecastReport';
+import MarketDataView from '../../MarketDataView';
+import CompanyOverview from '../../CompanyOverview';
+
+/**
+ * Tab 组件映射
+ * key 与 COMPANY_TABS 中的 key 对应
+ */
+const TAB_COMPONENTS = {
+  overview: CompanyOverview,
+  market: MarketDataView,
+  financial: FinancialPanorama,
+  forecast: ForecastReport,
+};
+
+/**
+ * Tab 容器组件
+ *
+ * 功能：
+ * - 管理 Tab 切换状态
+ * - 动态渲染 Tab 导航和内容
+ * - 触发 Tab 变更追踪
+ *
+ * @param {Object} props
+ * @param {string} props.stockCode - 当前股票代码
+ * @param {Function} props.onTabChange - Tab 变更回调 (index, tabName, prevIndex) => void
+ * @param {string} props.bgColor - 背景颜色
+ */
+const CompanyTabs = ({ stockCode, onTabChange, bgColor }) => {
+  const [currentIndex, setCurrentIndex] = useState(0);
+
+  // 主题相关颜色
+  const tabBg = useColorModeValue('gray.50', 'gray.700');
+  const activeBg = useColorModeValue('blue.500', 'blue.400');
+
+  /**
+   * 处理 Tab 切换
+   */
+  const handleTabChange = (index) => {
+    const tabName = getTabNameByIndex(index);
+
+    // 触发追踪回调
+    onTabChange?.(index, tabName, currentIndex);
+
+    // 更新状态
+    setCurrentIndex(index);
+  };
+
+  return (
+    <Card bg={bgColor} shadow="lg">
+      <CardBody p={0}>
+        <Tabs
+          variant="soft-rounded"
+          colorScheme="blue"
+          size="lg"
+          index={currentIndex}
+          onChange={handleTabChange}
+        >
+          {/* Tab 导航 */}
+          <TabNavigation tabBg={tabBg} activeBg={activeBg} />
+
+          <Divider />
+
+          {/* Tab 内容面板 */}
+          <TabPanels>
+            {COMPANY_TABS.map((tab) => {
+              const Component = TAB_COMPONENTS[tab.key];
+              return (
+                <TabPanel key={tab.key} p={6}>
+                  <Component stockCode={stockCode} />
+                </TabPanel>
+              );
+            })}
+          </TabPanels>
+        </Tabs>
+      </CardBody>
+    </Card>
+  );
+};
+
+export default CompanyTabs;