a47e0feed8
- 新增 src/components/TabContainer/ 通用组件 - 支持受控/非受控模式 - 支持多种主题预设（blackGold、default、dark、light） - 支持自定义主题颜色和样式配置 - 使用 TypeScript 实现，类型完整 - 重构 CompanyTabs 使用通用 TabContainer - 删除 CompanyTabs/TabNavigation.js（逻辑迁移到通用组件） 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
76 lines
2.0 KiB
JavaScript
76 lines
2.0 KiB
JavaScript
// src/views/Company/components/CompanyTabs/index.js
|
||
// Tab 容器组件 - 使用通用 TabContainer 组件
|
||
|
||
import React from 'react';
|
||
import TabContainer from '@components/TabContainer';
|
||
import { COMPANY_TABS, getTabNameByIndex } from '../../constants';
|
||
|
||
// 子组件导入（Tab 内容组件）
|
||
import CompanyOverview from '../CompanyOverview';
|
||
import DeepAnalysis from '../DeepAnalysis';
|
||
import MarketDataView from '../MarketDataView';
|
||
import FinancialPanorama from '../FinancialPanorama';
|
||
import ForecastReport from '../ForecastReport';
|
||
import DynamicTracking from '../DynamicTracking';
|
||
|
||
/**
|
||
* Tab 组件映射
|
||
*/
|
||
const TAB_COMPONENTS = {
|
||
overview: CompanyOverview,
|
||
analysis: DeepAnalysis,
|
||
market: MarketDataView,
|
||
financial: FinancialPanorama,
|
||
forecast: ForecastReport,
|
||
tracking: DynamicTracking,
|
||
};
|
||
|
||
/**
|
||
* 构建 TabContainer 所需的 tabs 配置
|
||
* 合并 COMPANY_TABS 和对应的组件
|
||
*/
|
||
const buildTabsConfig = () => {
|
||
return COMPANY_TABS.map((tab) => ({
|
||
...tab,
|
||
component: TAB_COMPONENTS[tab.key],
|
||
}));
|
||
};
|
||
|
||
// 预构建 tabs 配置（避免每次渲染重新计算）
|
||
const TABS_CONFIG = buildTabsConfig();
|
||
|
||
/**
|
||
* 公司详情 Tab 容器组件
|
||
*
|
||
* 功能：
|
||
* - 使用通用 TabContainer 组件
|
||
* - 保持黑金主题风格
|
||
* - 触发 Tab 变更追踪
|
||
*
|
||
* @param {Object} props
|
||
* @param {string} props.stockCode - 当前股票代码
|
||
* @param {Function} props.onTabChange - Tab 变更回调 (index, tabName, prevIndex) => void
|
||
*/
|
||
const CompanyTabs = ({ stockCode, onTabChange }) => {
|
||
/**
|
||
* 处理 Tab 切换
|
||
* 转换 tabKey 为 tabName 以保持原有回调格式
|
||
*/
|
||
const handleTabChange = (index, tabKey, prevIndex) => {
|
||
const tabName = getTabNameByIndex(index);
|
||
onTabChange?.(index, tabName, prevIndex);
|
||
};
|
||
|
||
return (
|
||
<TabContainer
|
||
tabs={TABS_CONFIG}
|
||
componentProps={{ stockCode }}
|
||
onTabChange={handleTabChange}
|
||
themePreset="blackGold"
|
||
borderRadius="16px"
|
||
/>
|
||
);
|
||
};
|
||
|
||
export default CompanyTabs;
|