update pay ui

This commit is contained in:
2025-12-05 17:16:56 +08:00
parent 7ca6601325
commit 821e1a69d2
2 changed files with 29 additions and 22 deletions

View File

@@ -13,25 +13,31 @@ import {
/** /**
* 概念股票列表项组件 * 概念股票列表项组件
* @param {Object} props * @param {Object} props
* @param {Object} props.stock - 股票对象 * @param {Object} props.stock - 股票对象兼容新旧API格式
* - stock_name: 股票名称 * - name / stock_name: 股票名称
* - stock_code: 股票代码 * - code / stock_code: 股票代码
* - change_pct: 涨跌幅 * - change_pct: 涨跌幅(可选)
* - reason: 关联原因 * - reason: 关联原因(可选)
*/ */
const ConceptStockItem = ({ stock }) => { const ConceptStockItem = ({ stock }) => {
const sectionBg = useColorModeValue('gray.50', 'gray.750'); const sectionBg = useColorModeValue('gray.50', 'gray.750');
const conceptNameColor = useColorModeValue('gray.800', 'gray.100'); const conceptNameColor = useColorModeValue('gray.800', 'gray.100');
const stockCountColor = useColorModeValue('gray.500', 'gray.400'); const stockCountColor = useColorModeValue('gray.500', 'gray.400');
const stockChangePct = parseFloat(stock.change_pct); // 兼容新旧API格式
const stockName = stock.name || stock.stock_name || '未知';
const stockCode = stock.code || stock.stock_code || '';
// 涨跌幅可能不存在v2 API不返回单个股票涨跌幅
const hasChangePct = stock.change_pct !== undefined && stock.change_pct !== null;
const stockChangePct = hasChangePct ? parseFloat(stock.change_pct) : 0;
const stockChangeColor = stockChangePct > 0 ? 'red' : stockChangePct < 0 ? 'green' : 'gray'; const stockChangeColor = stockChangePct > 0 ? 'red' : stockChangePct < 0 ? 'green' : 'gray';
const stockChangeSymbol = stockChangePct > 0 ? '+' : ''; const stockChangeSymbol = stockChangePct > 0 ? '+' : '';
// 处理股票详情跳转 // 处理股票详情跳转
const handleStockClick = (e) => { const handleStockClick = (e) => {
e.stopPropagation(); // 阻止事件冒泡到概念卡片 e.stopPropagation(); // 阻止事件冒泡到概念卡片
const cleanCode = stock.stock_code.replace(/\.(SZ|SH)$/i, ''); const cleanCode = stockCode.replace(/\.(SZ|SH)$/i, '');
window.open(`https://valuefrontier.cn/company?scode=${cleanCode}`, '_blank'); window.open(`https://valuefrontier.cn/company?scode=${cleanCode}`, '_blank');
}; };
@@ -52,13 +58,13 @@ const ConceptStockItem = ({ stock }) => {
<HStack justify="space-between" mb={1}> <HStack justify="space-between" mb={1}>
<HStack spacing={2}> <HStack spacing={2}>
<Text fontWeight="semibold" color={conceptNameColor}> <Text fontWeight="semibold" color={conceptNameColor}>
{stock.stock_name} {stockName}
</Text> </Text>
<Badge size="sm" variant="outline"> <Badge size="sm" variant="outline">
{stock.stock_code} {stockCode}
</Badge> </Badge>
</HStack> </HStack>
{stock.change_pct && ( {hasChangePct && (
<Badge <Badge
colorScheme={stockChangeColor} colorScheme={stockChangeColor}
fontSize="xs" fontSize="xs"

View File

@@ -19,14 +19,14 @@ import ConceptStockItem from './ConceptStockItem';
/** /**
* 详细概念卡片组件 * 详细概念卡片组件
* @param {Object} props * @param {Object} props
* @param {Object} props.concept - 概念对象 * @param {Object} props.concept - 概念对象(兼容 v1/v2 API
* - name: 概念名称 * - concept: 概念名称
* - stock_count: 相关股票数量 * - stock_count: 相关股票数量
* - relevance: 相关度0-100 * - score: 相关度0-1
* - avg_change_pct: 平均涨跌幅 * - price_info.avg_change_pct: 平均涨跌幅
* - description: 概念描述 * - description: 概念描述
* - happened_times: 历史触发时间数组 * - outbreak_dates / happened_times: 爆发日期数组
* - stocks: 相关股票数组 * - stocks: 相关股票数组 [{ name/stock_name, code/stock_code }]
* @param {Function} props.onClick - 点击回调 * @param {Function} props.onClick - 点击回调
*/ */
const DetailedConceptCard = ({ concept, onClick }) => { const DetailedConceptCard = ({ concept, onClick }) => {
@@ -109,16 +109,17 @@ const DetailedConceptCard = ({ concept, onClick }) => {
</Text> </Text>
)} )}
{/* 历史触发时间 */} {/* 爆发日期(兼容 happened_times 和 outbreak_dates */}
{concept.happened_times && concept.happened_times.length > 0 && ( {((concept.outbreak_dates && concept.outbreak_dates.length > 0) ||
(concept.happened_times && concept.happened_times.length > 0)) && (
<Box> <Box>
<Text fontSize="xs" fontWeight="semibold" mb={2} color={stockCountColor}> <Text fontSize="xs" fontWeight="semibold" mb={2} color={stockCountColor}>
历史触发时间 爆发日期
</Text> </Text>
<HStack spacing={2} flexWrap="wrap"> <HStack spacing={2} flexWrap="wrap">
{concept.happened_times.map((time, idx) => ( {(concept.outbreak_dates || concept.happened_times).map((date, idx) => (
<Badge key={idx} variant="subtle" colorScheme="gray" fontSize="xs"> <Badge key={idx} variant="subtle" colorScheme="orange" fontSize="xs">
{time} {date}
</Badge> </Badge>
))} ))}
</HStack> </HStack>