vf/vf_react
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: 提取 ConceptStocksModal 为通用组件，统一概念中心和个股中心弹窗

Browse Source 
- 将 ConceptStocksModal 从 StockOverview/components 移到 components 目录
- 概念中心复用 ConceptStocksModal，删除冗余的 renderStockTable 函数（约100行）
- 统一 H5 端弹窗体验：响应式尺寸、高度限制(70vh)、左右滑动、垂直居中
- 移除重复的底部关闭按钮，只保留右上角关闭按钮
- 添加"板块原因"列，表头改为中文
- 使用 @components 路径别名

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
zdl
2025-12-04 15:57:32 +08:00
parent b1d5b217d3
commit 5efd598694
3 changed files with 31 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files

135
src/views/Concept/index.js
View File

@@ -86,6 +86,7 @@ import { BsGraphUp, BsLightningFill } from 'react-icons/bs';
import { keyframes } from '@emotion/react';
import ConceptTimelineModal from './ConceptTimelineModal';
import ConceptStatsPanel from './components/ConceptStatsPanel';
import ConceptStocksModal from '@components/ConceptStocksModal';
// 导航栏已由 MainLayout 提供，无需在此导入
// 导入订阅权限管理
import { useSubscription } from '../../hooks/useSubscription';
@@ -528,109 +529,6 @@ const ConceptCenter = () => {
return `https://valuefrontier.cn/company?scode=${seccode}`;
};
// 渲染动态表格列
const renderStockTable = () => {
if (!selectedConceptStocks || selectedConceptStocks.length === 0) {
return <Text>暂无相关股票数据</Text>;
}
const allFields = new Set();
selectedConceptStocks.forEach(stock => {
Object.keys(stock).forEach(key => allFields.add(key));
});
// 定义固定的列顺序，包含新增的现价和涨跌幅列
const orderedFields = ['stock_name', 'stock_code', 'current_price', 'change_percent'];
allFields.forEach(field => {
if (!orderedFields.includes(field)) {
orderedFields.push(field);
}
});
return (
<Box>
{loadingStockData && (
<Box mb={4} textAlign="center">
<HStack justify="center" spacing={2}>
<Spinner size="sm" color="purple.500" />
<Text fontSize="sm" color="gray.600">正在获取行情数据...</Text>
</HStack>
</Box>
)}
<TableContainer maxH="60vh" overflowY="auto">
<Table variant="simple" size="sm">
<Thead position="sticky" top={0} bg="white" zIndex={1}>
<Tr>
{orderedFields.map(field => (
<Th key={field}>
{field === 'stock_name' ? '股票名称' :
field === 'stock_code' ? '股票代码' :
field === 'current_price' ? '现价' :
field === 'change_percent' ? '当日涨跌幅' : field}
</Th>
))}
</Tr>
</Thead>
<Tbody>
{selectedConceptStocks.map((stock, idx) => {
const marketData = stockMarketData[stock.stock_code];
const companyLink = generateCompanyLink(stock.stock_code);
return (
<Tr key={idx} _hover={{ bg: 'gray.50' }}>
{orderedFields.map(field => {
let cellContent = stock[field] || '-';
let cellProps = {};
// 处理特殊字段
if (field === 'current_price') {
cellContent = marketData ? formatPrice(marketData.close) : (loadingStockData ? <Spinner size="xs" /> : '-');
} else if (field === 'change_percent') {
if (marketData) {
cellContent = formatStockChangePercent(marketData.change_percent);
cellProps.color = `${getStockChangeColor(marketData.change_percent)}.500`;
cellProps.fontWeight = 'bold';
} else {
cellContent = loadingStockData ? <Spinner size="xs" /> : '-';
}
} else if (field === 'stock_name' || field === 'stock_code') {
// 添加超链接
cellContent = (
<Text
as="a"
href={companyLink}
target="_blank"
rel="noopener noreferrer"
color="blue.600"
textDecoration="underline"
_hover={{
color: 'blue.800',
textDecoration: 'underline'
}}
cursor="pointer"
>
{stock[field] || '-'}
</Text>
);
}
return (
<Td key={field} {...cellProps}>
{cellContent}
</Td>
);
})}
</Tr>
);
})}
</Tbody>
</Table>
</TableContainer>
</Box>
);
};
// 格式化添加日期显示
const formatAddedDate = (concept) => {
// 优先使用 created_at 或 added_date 字段
@@ -1763,32 +1661,15 @@ const ConceptCenter = () => {
</Flex>
</Container>
{/* 股票详情Modal */}
<Modal
{/* 股票详情Modal - 复用通用组件 */}
<ConceptStocksModal
isOpen={isStockModalOpen}
onClose={() => setIsStockModalOpen(false)}
size="6xl"
scrollBehavior="inside"
>
<ModalOverlay />
<ModalContent>
<ModalHeader bg="purple.500" color="white">
<HStack>
<Icon as={FaTable} />
<Text>{selectedConceptName} - 相关个股</Text>
</HStack>
</ModalHeader>
<ModalCloseButton color="white" />
<ModalBody py={6}>
{renderStockTable()}
</ModalBody>
<ModalFooter>
<Button colorScheme="purple" onClick={() => setIsStockModalOpen(false)}>
关闭
</Button>
</ModalFooter>
</ModalContent>
</Modal>
concept={{
concept_name: selectedConceptName,
stocks: selectedConceptStocks
}}
/>
{/* 时间轴Modal */}
<ConceptTimelineModal
isOpen={isTimelineModalOpen}

233
src/views/StockOverview/components/ConceptStocksModal.tsx
View File

@@ -1,233 +0,0 @@
import React, { useState, useCallback } from 'react';
import { useNavigate } from 'react-router-dom';
import {
Modal,
ModalOverlay,
ModalContent,
ModalHeader,
ModalCloseButton,
ModalBody,
ModalFooter,
Button,
Table,
Thead,
Tbody,
Tr,
Th,
Td,
TableContainer,
Box,
HStack,
Text,
Icon,
Spinner,
useColorModeValue,
} from '@chakra-ui/react';
import { FaTable } from 'react-icons/fa';
import marketService from '@services/marketService';
import { logger } from '@utils/logger';
// 股票信息类型
interface StockInfo {
stock_code: string;
stock_name: string;
[key: string]: unknown;
}
// 概念信息类型
export interface ConceptInfo {
concept_id?: string;
concept_name: string;
stock_count?: number;
stocks?: StockInfo[];
[key: string]: unknown;
}
// 行情数据类型
interface MarketData {
stock_code: string;
close?: number;
change_percent?: number;
[key: string]: unknown;
}
interface ConceptStocksModalProps {
isOpen: boolean;
onClose: () => void;
concept: ConceptInfo | null;
}
const ConceptStocksModal: React.FC<ConceptStocksModalProps> = ({
isOpen,
onClose,
concept,
}) => {
const navigate = useNavigate();
// 状态
const [stockMarketData, setStockMarketData] = useState<Record<string, MarketData>>({});
const [loadingStockData, setLoadingStockData] = useState(false);
// 颜色主题
const cardBg = useColorModeValue('white', '#1a1a1a');
const hoverBg = useColorModeValue('gray.50', '#2a2a2a');
// 批量获取股票行情数据
const fetchStockMarketData = useCallback(async (stocks: StockInfo[]) => {
if (!stocks || stocks.length === 0) return;
setLoadingStockData(true);
const newMarketData: Record<string, MarketData> = {};
try {
const batchSize = 5;
for (let i = 0; i < stocks.length; i += batchSize) {
const batch = stocks.slice(i, i + batchSize);
const promises = batch.map(async (stock) => {
if (!stock.stock_code) return null;
const seccode = stock.stock_code.substring(0, 6);
try {
const response = await marketService.getTradeData(seccode, 1);
if (response.success && response.data?.length > 0) {
const latestData = response.data[response.data.length - 1];
return { stock_code: stock.stock_code, ...latestData };
}
} catch (error) {
logger.warn('ConceptStocksModal', '获取股票行情失败', { stockCode: seccode });
}
return null;
});
const results = await Promise.all(promises);
results.forEach((result) => {
if (result) newMarketData[result.stock_code] = result;
});
}
setStockMarketData(newMarketData);
} catch (error) {
logger.error('ConceptStocksModal', 'fetchStockMarketData', error);
} finally {
setLoadingStockData(false);
}
}, []);
// 弹窗打开时加载数据
React.useEffect(() => {
if (isOpen && concept?.stocks) {
setStockMarketData({});
fetchStockMarketData(concept.stocks);
}
}, [isOpen, concept, fetchStockMarketData]);
// 点击股票行
const handleStockClick = (stockCode: string) => {
navigate(`/company?scode=${stockCode}`);
onClose();
};
const stocks = concept?.stocks || [];
return (
<Modal
isOpen={isOpen}
onClose={onClose}
size="4xl"
scrollBehavior="inside"
>
<ModalOverlay />
<ModalContent bg={cardBg}>
<ModalHeader bg="purple.500" color="white" borderTopRadius="md">
<HStack>
<Icon as={FaTable} />
<Text>{concept?.concept_name} - 相关个股</Text>
</HStack>
</ModalHeader>
<ModalCloseButton color="white" />
<ModalBody py={6}>
{stocks.length === 0 ? (
<Text color="gray.500" textAlign="center">暂无相关股票数据</Text>
) : (
<Box>
{loadingStockData && (
<HStack justify="center" mb={4}>
<Spinner size="sm" color="purple.500" />
<Text fontSize="sm" color="gray.500">正在获取行情数据...</Text>
</HStack>
)}
<TableContainer maxH="60vh" overflowY="auto">
<Table variant="simple" size="sm">
<Thead position="sticky" top={0} bg={cardBg} zIndex={1}>
<Tr>
<Th>股票名称</Th>
<Th>股票代码</Th>
<Th isNumeric>现价</Th>
<Th isNumeric>涨跌幅</Th>
</Tr>
</Thead>
<Tbody>
{stocks.map((stock, idx) => {
const marketData = stockMarketData[stock.stock_code];
const changePercent = marketData?.change_percent;
return (
<Tr
key={idx}
_hover={{ bg: hoverBg }}
cursor="pointer"
onClick={() => handleStockClick(stock.stock_code)}
>
<Td color="blue.500" fontWeight="medium">
{stock.stock_name}
</Td>
<Td>{stock.stock_code}</Td>
<Td isNumeric>
{loadingStockData ? (
<Spinner size="xs" />
) : marketData?.close ? (
`¥${marketData.close.toFixed(2)}`
) : (
'-'
)}
</Td>
<Td
isNumeric
fontWeight="bold"
color={
changePercent && changePercent > 0
? 'red.500'
: changePercent && changePercent < 0
? 'green.500'
: 'gray.500'
}
>
{loadingStockData ? (
<Spinner size="xs" />
) : changePercent !== undefined ? (
`${changePercent > 0 ? '+' : ''}${changePercent.toFixed(2)}%`
) : (
'-'
)}
</Td>
</Tr>
);
})}
</Tbody>
</Table>
</TableContainer>
</Box>
)}
</ModalBody>
<ModalFooter>
<Button colorScheme="purple" onClick={onClose}>
关闭
</Button>
</ModalFooter>
</ModalContent>
</Modal>
);
};
export default ConceptStocksModal;

2
src/views/StockOverview/index.js
View File

@@ -56,7 +56,7 @@ import {
} from '@chakra-ui/react';
import { SearchIcon, CloseIcon, ArrowForwardIcon, TrendingUpIcon, InfoIcon, ChevronRightIcon, MoonIcon, SunIcon, CalendarIcon } from '@chakra-ui/icons';
import { FaChartLine, FaFire, FaRocket, FaBrain, FaCalendarAlt, FaChevronRight, FaArrowUp, FaArrowDown, FaChartBar } from 'react-icons/fa';
import ConceptStocksModal from './components/ConceptStocksModal';
import ConceptStocksModal from '@components/ConceptStocksModal';
import { BsGraphUp, BsLightningFill } from 'react-icons/bs';
import * as echarts from 'echarts';
import { logger } from '../../utils/logger';