更新Company页面的UI为FUI风格
This commit is contained in:
@@ -7,12 +7,14 @@ import { VStack } from "@chakra-ui/react";
|
|||||||
import type { CompanyOverviewProps } from "./types";
|
import type { CompanyOverviewProps } from "./types";
|
||||||
|
|
||||||
// 子组件
|
// 子组件
|
||||||
|
import StockQuoteCard from "../StockQuoteCard";
|
||||||
import BasicInfoTab from "./BasicInfoTab";
|
import BasicInfoTab from "./BasicInfoTab";
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 公司档案组件
|
* 公司档案组件
|
||||||
*
|
*
|
||||||
* 功能:
|
* 功能:
|
||||||
|
* - 显示股票行情卡片(个股详情)
|
||||||
* - 显示基本信息 Tab(内部懒加载各子 Tab 数据)
|
* - 显示基本信息 Tab(内部懒加载各子 Tab 数据)
|
||||||
*
|
*
|
||||||
* 懒加载策略:
|
* 懒加载策略:
|
||||||
@@ -22,6 +24,9 @@ import BasicInfoTab from "./BasicInfoTab";
|
|||||||
const CompanyOverview: React.FC<CompanyOverviewProps> = ({ stockCode }) => {
|
const CompanyOverview: React.FC<CompanyOverviewProps> = ({ stockCode }) => {
|
||||||
return (
|
return (
|
||||||
<VStack spacing={6} align="stretch">
|
<VStack spacing={6} align="stretch">
|
||||||
|
{/* 股票行情卡片 - 个股详情 */}
|
||||||
|
<StockQuoteCard stockCode={stockCode} />
|
||||||
|
|
||||||
{/* 基本信息内容 - 传入 stockCode,内部懒加载各 Tab 数据 */}
|
{/* 基本信息内容 - 传入 stockCode,内部懒加载各 Tab 数据 */}
|
||||||
<BasicInfoTab stockCode={stockCode} />
|
<BasicInfoTab stockCode={stockCode} />
|
||||||
</VStack>
|
</VStack>
|
||||||
|
|||||||
@@ -116,6 +116,28 @@ const CompanyContent = memo<CompanyContentProps>(({ stockCode, onTabChange }) =>
|
|||||||
|
|
||||||
CompanyContent.displayName = 'CompanyContent';
|
CompanyContent.displayName = 'CompanyContent';
|
||||||
|
|
||||||
|
// ============================================
|
||||||
|
// 网页标题 Hook
|
||||||
|
// ============================================
|
||||||
|
|
||||||
|
const useDocumentTitle = (stockCode: string, stockName?: string) => {
|
||||||
|
useEffect(() => {
|
||||||
|
const baseTitle = '价值前沿';
|
||||||
|
if (stockName) {
|
||||||
|
document.title = `${stockName}(${stockCode}) - ${baseTitle}`;
|
||||||
|
} else if (stockCode) {
|
||||||
|
document.title = `${stockCode} - ${baseTitle}`;
|
||||||
|
} else {
|
||||||
|
document.title = baseTitle;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 组件卸载时恢复默认标题
|
||||||
|
return () => {
|
||||||
|
document.title = baseTitle;
|
||||||
|
};
|
||||||
|
}, [stockCode, stockName]);
|
||||||
|
};
|
||||||
|
|
||||||
// ============================================
|
// ============================================
|
||||||
// 主页面组件
|
// 主页面组件
|
||||||
// ============================================
|
// ============================================
|
||||||
@@ -145,6 +167,9 @@ const CompanyIndex: React.FC = () => {
|
|||||||
|
|
||||||
const { trackStockSearched, trackTabChanged, trackWatchlistAdded, trackWatchlistRemoved } = companyEvents;
|
const { trackStockSearched, trackTabChanged, trackWatchlistAdded, trackWatchlistRemoved } = companyEvents;
|
||||||
|
|
||||||
|
// 设置网页标题
|
||||||
|
useDocumentTitle(stockCode, stockInfo?.stock_name);
|
||||||
|
|
||||||
// 股票代码变化追踪
|
// 股票代码变化追踪
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (stockCode !== prevStockCodeRef.current) {
|
if (stockCode !== prevStockCodeRef.current) {
|
||||||
|
|||||||
Reference in New Issue
Block a user