update pay ui
This commit is contained in:
@@ -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"
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user