diff --git a/src/views/Company/components/DynamicTracking/index.js b/src/views/Company/components/DynamicTracking/index.js index 77cd70ec..c76ca7d6 100644 --- a/src/views/Company/components/DynamicTracking/index.js +++ b/src/views/Company/components/DynamicTracking/index.js @@ -1,45 +1,183 @@ // src/views/Company/components/DynamicTracking/index.js -// 动态跟踪 - 独立一级 Tab 组件 +// 动态跟踪 - 独立一级 Tab 组件(包含新闻动态等二级 Tab) -import React from "react"; +import React, { useState, useEffect, useCallback } from "react"; import { Box, - VStack, - Text, - Icon, - Card, - CardBody, + Tabs, + TabList, + TabPanels, + Tab, + TabPanel, } from "@chakra-ui/react"; import { FaNewspaper } from "react-icons/fa"; +import { logger } from "@utils/logger"; +import { getApiBase } from "@utils/apiConfig"; +import NewsEventsTab from "../CompanyOverview/NewsEventsTab"; + +// API配置 +const API_BASE_URL = getApiBase(); + +// 二级 Tab 配置 +const TRACKING_TABS = [ + { key: "news", name: "新闻动态", icon: FaNewspaper }, + // 后续可扩展更多二级 Tab +]; + /** * 动态跟踪组件 * * 功能: - * - 预留二级 Tab 结构 - * - 后续放入新闻动态等 + * - 二级 Tab 结构 + * - Tab1: 新闻动态(复用 NewsEventsTab) + * - 预留后续扩展 * * @param {Object} props * @param {string} props.stockCode - 股票代码 */ -const DynamicTracking = ({ stockCode }) => { +const DynamicTracking = ({ stockCode: propStockCode }) => { + const [stockCode, setStockCode] = useState(propStockCode || "000001"); + const [activeTab, setActiveTab] = useState(0); + + // 新闻动态状态 + const [newsEvents, setNewsEvents] = useState([]); + const [newsLoading, setNewsLoading] = useState(false); + const [newsPagination, setNewsPagination] = useState({ + page: 1, + per_page: 10, + total: 0, + pages: 0, + has_next: false, + has_prev: false, + }); + const [searchQuery, setSearchQuery] = useState(""); + const [stockName, setStockName] = useState(""); + const [dataLoaded, setDataLoaded] = useState(false); + + // 监听 props 中的 stockCode 变化 + useEffect(() => { + if (propStockCode && propStockCode !== stockCode) { + setStockCode(propStockCode); + setDataLoaded(false); + setNewsEvents([]); + setStockName(""); + setSearchQuery(""); + } + }, [propStockCode, stockCode]); + + // 获取股票名称(用于搜索) + const fetchStockName = useCallback(async () => { + try { + const response = await fetch( + `${API_BASE_URL}/api/stock/${stockCode}/basic-info` + ); + const result = await response.json(); + if (result.success && result.data) { + const name = result.data.SECNAME || result.data.ORGNAME || stockCode; + setStockName(name); + return name; + } + return stockCode; + } catch (err) { + logger.error("DynamicTracking", "fetchStockName", err, { stockCode }); + return stockCode; + } + }, [stockCode]); + + // 加载新闻事件数据 + const loadNewsEvents = useCallback( + async (query, page = 1) => { + setNewsLoading(true); + try { + const searchTerm = query || stockName || stockCode; + const response = await fetch( + `${API_BASE_URL}/api/events?q=${encodeURIComponent(searchTerm)}&page=${page}&per_page=10` + ); + const result = await response.json(); + + if (result.success) { + setNewsEvents(result.data || []); + setNewsPagination({ + page: result.pagination?.page || page, + per_page: result.pagination?.per_page || 10, + total: result.pagination?.total || 0, + pages: result.pagination?.pages || 0, + has_next: result.pagination?.has_next || false, + has_prev: result.pagination?.has_prev || false, + }); + } + } catch (err) { + logger.error("DynamicTracking", "loadNewsEvents", err, { stockCode }); + setNewsEvents([]); + } finally { + setNewsLoading(false); + } + }, + [stockCode, stockName] + ); + + // 首次加载 + useEffect(() => { + const initLoad = async () => { + if (stockCode && !dataLoaded) { + const name = await fetchStockName(); + await loadNewsEvents(name, 1); + setDataLoaded(true); + } + }; + initLoad(); + }, [stockCode, dataLoaded, fetchStockName, loadNewsEvents]); + + // 搜索处理 + const handleSearchChange = (value) => { + setSearchQuery(value); + }; + + const handleSearch = () => { + loadNewsEvents(searchQuery || stockName, 1); + }; + + // 分页处理 + const handlePageChange = (page) => { + loadNewsEvents(searchQuery || stockName, page); + }; + return ( - - - - - - 动态跟踪 - - - 后续将添加新闻动态等内容 - - - 股票代码: {stockCode} - - - - + + + + {TRACKING_TABS.map((tab) => ( + + {tab.name} + + ))} + + + + {/* 新闻动态 Tab */} + + + + + {/* 后续可扩展更多 Tab Panel */} + + + ); };