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

feat: 调整关联描述UI

Browse Source
This commit is contained in:
zdl
2025-11-23 10:21:04 +08:00
parent c2b80a727d
commit 098107f38e
1 changed files with 27 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
src/components/StockChart/StockChartModal.js
View File

@@ -1,5 +1,5 @@
// src/components/StockChart/StockChartModal.js - 统一的股票图表组件 // src/components/StockChart/StockChartModal.js - 统一的股票图表组件
import React, { useState, useEffect, useRef } from 'react'; import React, { useState, useEffect, useRef, useMemo } from 'react';
import { Modal, ModalOverlay, ModalContent, ModalHeader, ModalCloseButton, ModalBody, Button, ButtonGroup, VStack, HStack, Text, Badge, Box, Flex, CircularProgress } from '@chakra-ui/react'; import { Modal, ModalOverlay, ModalContent, ModalHeader, ModalCloseButton, ModalBody, Button, ButtonGroup, VStack, HStack, Text, Badge, Box, Flex, CircularProgress } from '@chakra-ui/react';
import ReactECharts from 'echarts-for-react'; import ReactECharts from 'echarts-for-react';
import * as echarts from 'echarts'; import * as echarts from 'echarts';
@@ -24,24 +24,26 @@ const StockChartModal = ({
const [chartData, setChartData] = useState(null); const [chartData, setChartData] = useState(null);
const [preloadedData, setPreloadedData] = useState({}); const [preloadedData, setPreloadedData] = useState({});
// 处理关联描述（兼容对象和字符串格式） // 处理关联描述（兼容对象和字符串格式）- 使用 useMemo 缓存计算结果
const getRelationDesc = () => { const relationDesc = useMemo(() => {
const relationDesc = stock?.relation_desc; const desc = stock?.relation_desc;
if (!relationDesc) return null; if (!desc) return null;
if (typeof relationDesc === 'string') { if (typeof desc === 'string') {
return relationDesc; return desc;
} else if (typeof relationDesc === 'object' && relationDesc.data && Array.isArray(relationDesc.data)) { }
if (typeof desc === 'object' && desc.data && Array.isArray(desc.data)) {
// 新格式：{data: [{query_part: "...", sentences: "..."}]} // 新格式：{data: [{query_part: "...", sentences: "..."}]}
return relationDesc.data return desc.data
.map(item => item.query_part || item.sentences || '') .map(item => item.query_part || item.sentences || '')
.filter(s => s) .filter(s => s)
.join('；') || null; .join('；') || null;
} }
return null; return null;
}; }, [stock?.relation_desc]);
// 预加载数据 // 预加载数据
const preloadData = async (type) => { const preloadData = async (type) => {
@@ -540,7 +542,8 @@ const StockChartModal = ({
</ModalHeader> </ModalHeader>
<ModalCloseButton /> <ModalCloseButton />
<ModalBody p={0} overflowY="auto" maxH="calc(90vh - 120px)"> <ModalBody p={0} overflowY="auto" maxH="calc(90vh - 120px)">
<Box h="400px" w="100%" position="relative"> {/* 图表区域 */}
<Box h="500px" w="100%" position="relative">
{loading && ( {loading && (
<Flex <Flex
position="absolute" position="absolute"
@@ -559,10 +562,20 @@ const StockChartModal = ({
<div ref={chartRef} style={{ height: '100%', width: '100%', minHeight: '500px' }} /> <div ref={chartRef} style={{ height: '100%', width: '100%', minHeight: '500px' }} />
</Box> </Box>
{getRelationDesc() && ( {/* 关联描述 */}
{relationDesc && (
<Box p={4} borderTop="1px solid" borderTopColor="gray.200"> <Box p={4} borderTop="1px solid" borderTopColor="gray.200">
<Text fontSize="sm" fontWeight="bold" mb={2}>关联描述:</Text> <Text fontSize="sm" fontWeight="bold" mb={2} color="gray.700">
<Text fontSize="sm" color="gray.600">{getRelationDesc()}</Text> 关联描述:
</Text>
<Text
fontSize="sm"
color="gray.600"
lineHeight="1.7"
whiteSpace="pre-wrap"
>
{relationDesc}
</Text>
</Box> </Box>
)} )}