refactor: 财报披露日程独立为动态跟踪第三个 Tab

- 新建 DisclosureSchedulePanel 组件,独立展示财报披露日程
- 简化 AnnouncementsPanel,移除财报披露日程部分
- DynamicTracking 新增第三个 Tab:财报披露日程
- 更新 mock 数据字段名匹配组件需求

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
zdl
2025-12-10 18:55:30 +08:00
parent c237a4dc0c
commit 2994de98c2
5 changed files with 146 additions and 90 deletions

View File

@@ -10,11 +10,14 @@ import {
Tab,
TabPanel,
} from "@chakra-ui/react";
import { FaNewspaper } from "react-icons/fa";
import { FaNewspaper, FaBullhorn, FaCalendarAlt } from "react-icons/fa";
import { logger } from "@utils/logger";
import { getApiBase } from "@utils/apiConfig";
import NewsEventsTab from "../CompanyOverview/NewsEventsTab";
import AnnouncementsPanel from "../CompanyOverview/BasicInfoTab/components/AnnouncementsPanel";
import DisclosureSchedulePanel from "../CompanyOverview/BasicInfoTab/components/DisclosureSchedulePanel";
import { THEME } from "../CompanyOverview/BasicInfoTab/config";
// API配置
const API_BASE_URL = getApiBase();
@@ -22,7 +25,8 @@ const API_BASE_URL = getApiBase();
// 二级 Tab 配置
const TRACKING_TABS = [
{ key: "news", name: "新闻动态", icon: FaNewspaper },
// 后续可扩展更多二级 Tab
{ key: "announcements", name: "公司公告", icon: FaBullhorn },
{ key: "disclosure", name: "财报披露日程", icon: FaCalendarAlt },
];
/**
@@ -144,16 +148,26 @@ const DynamicTracking = ({ stockCode: propStockCode }) => {
};
return (
<Box>
<Box bg={THEME.bg} p={4} borderRadius="md">
<Tabs
variant="enclosed"
colorScheme="blue"
variant="soft-rounded"
index={activeTab}
onChange={setActiveTab}
isLazy
>
<TabList>
<TabList bg={THEME.cardBg} borderBottom="1px solid" borderColor={THEME.border}>
{TRACKING_TABS.map((tab) => (
<Tab key={tab.key} fontWeight="medium">
<Tab
key={tab.key}
fontWeight="medium"
color={THEME.textSecondary}
_selected={{
color: THEME.tabSelected.color,
bg: THEME.tabSelected.bg,
borderRadius: "md",
}}
_hover={{ color: THEME.gold }}
>
{tab.name}
</Tab>
))}
@@ -174,7 +188,15 @@ const DynamicTracking = ({ stockCode: propStockCode }) => {
/>
</TabPanel>
{/* 后续可扩展更多 Tab Panel */}
{/* 公司公告 Tab */}
<TabPanel p={4}>
<AnnouncementsPanel stockCode={stockCode} />
</TabPanel>
{/* 财报披露日程 Tab */}
<TabPanel p={4}>
<DisclosureSchedulePanel stockCode={stockCode} />
</TabPanel>
</TabPanels>
</Tabs>
</Box>