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.stock - 股票对象
* - stock_name: 股票名称
* - stock_code: 股票代码
* - change_pct: 涨跌幅
* - reason: 关联原因
* @param {Object} props.stock - 股票对象兼容新旧API格式
* - name / stock_name: 股票名称
* - code / stock_code: 股票代码
* - change_pct: 涨跌幅(可选)
* - reason: 关联原因(可选)
*/
const ConceptStockItem = ({ stock }) => {
const sectionBg = useColorModeValue('gray.50', 'gray.750');
const conceptNameColor = useColorModeValue('gray.800', 'gray.100');
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 stockChangeSymbol = stockChangePct > 0 ? '+' : '';
// 处理股票详情跳转
const handleStockClick = (e) => {
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');
};
@@ -52,13 +58,13 @@ const ConceptStockItem = ({ stock }) => {
<HStack justify="space-between" mb={1}>
<HStack spacing={2}>
<Text fontWeight="semibold" color={conceptNameColor}>
{stock.stock_name}
{stockName}
</Text>
<Badge size="sm" variant="outline">
{stock.stock_code}
{stockCode}
</Badge>
</HStack>
{stock.change_pct && (
{hasChangePct && (
<Badge
colorScheme={stockChangeColor}
fontSize="xs"

View File

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