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

fix: UI调试

Browse Source
This commit is contained in:
zdl
2025-11-27 18:27:44 +08:00
parent 589e1c20f9
commit 34338373cd
3 changed files with 92 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
src/components/Citation/CitedContent.js
View File

@@ -82,29 +82,9 @@ const CitedContent = ({
...containerStyle
}}
>
{/* AI 标识 - 固定在右上角 */}
{showAIBadge && (
<Tag
icon={<RobotOutlined />}
color="purple"
style={{
position: 'absolute',
top: 12,
right: 12,
margin: 0,
zIndex: 10,
fontSize: 12,
padding: '2px 8px'
}}
className="ai-badge-responsive"
>
AI合成
</Tag>
)}
{/* 标题栏 */}
{title && (
<div style={{ marginBottom: 12, paddingRight: 80 }}>
<div style={{ marginBottom: 12 }}>
<Text strong style={{ fontSize: 14, color: finalTitleColor }}>
{title}
</Text>
@@ -112,10 +92,24 @@ const CitedContent = ({
)}
{/* 带引用的文本内容 */}
<div style={{
lineHeight: 1.8,
paddingRight: title ? 0 : (showAIBadge ? 80 : 0)
}}>
<div style={{ lineHeight: 1.8 }}>
{/* AI 标识 - 行内显示在文字前面 */}
{showAIBadge && (
<Tag
icon={<RobotOutlined />}
color="purple"
style={{
fontSize: 12,
padding: '2px 8px',
marginRight: 8,
verticalAlign: 'middle',
display: 'inline-flex',
}}
className="ai-badge-responsive"
>
AI合成
</Tag>
)}
{/* 前缀标签（如果有） */}
{prefix && (
<Text style={{

36
src/views/EventDetail/components/HistoricalEvents.js
View File

@@ -29,10 +29,12 @@ import {
FaChartLine,
FaInfoCircle
} from 'react-icons/fa';
import { stockService } from '../../../services/eventService';
import { logger } from '../../../utils/logger';
import CitedContent from '../../../components/Citation/CitedContent';
import { PROFESSIONAL_COLORS } from '../../../constants/professionalTheme';
import { Tag } from 'antd';
import { RobotOutlined } from '@ant-design/icons';
import { stockService } from '@services/eventService';
import { logger } from '@utils/logger';
import CitedContent from '@components/Citation/CitedContent';
import { PROFESSIONAL_COLORS } from '@constants/professionalTheme';
const HistoricalEvents = ({
events = [],
@@ -244,7 +246,7 @@ const HistoricalEvents = ({
key={event.id}
bg={cardBg}
borderWidth="1px"
borderColor={borderColor}
borderColor="gray.500"
borderRadius="lg"
position="relative"
overflow="visible"
@@ -267,16 +269,16 @@ const HistoricalEvents = ({
}}
transition="all 0.2s"
>
<VStack align="stretch" spacing={2} p={3}>
<VStack align="stretch" spacing={3} p={4}>
{/* 顶部区域：左侧（标题+时间） + 右侧（按钮） */}
<HStack align="flex-start" spacing={3}>
{/* 左侧：标题 + 时间信息（允许折行） */}
<VStack flex="1" align="flex-start" spacing={1}>
<VStack flex="1" align="flex-start" spacing={2}>
{/* 标题 */}
<Text
fontSize="md"
fontSize="lg"
fontWeight="bold"
color={useColorModeValue('blue.600', 'blue.400')}
color={useColorModeValue('blue.500', 'blue.300')}
lineHeight="1.4"
cursor="pointer"
onClick={(e) => {
@@ -290,27 +292,28 @@ const HistoricalEvents = ({
{/* 时间 + Badges（允许折行） */}
<HStack spacing={2} flexWrap="wrap">
<Text fontSize="sm" color={textSecondary}>
<Text fontSize="sm" color="gray.300" fontWeight="medium">
{formatDate(getEventDate(event))}
</Text>
<Text fontSize="sm" color={textSecondary}>
<Text fontSize="sm" color="gray.400">
({getRelativeTime(getEventDate(event))})
</Text>
{event.importance && (
<Badge colorScheme={importanceColor} size="sm">
<Badge colorScheme={importanceColor} fontSize="xs" px={2}>
重要性: {event.importance}
</Badge>
)}
{event.avg_change_pct !== undefined && event.avg_change_pct !== null && (
<Badge
colorScheme={event.avg_change_pct > 0 ? 'red' : event.avg_change_pct < 0 ? 'green' : 'gray'}
size="sm"
fontSize="xs"
px={2}
>
涨幅: {event.avg_change_pct > 0 ? '+' : ''}{event.avg_change_pct.toFixed(2)}%
</Badge>
)}
{event.similarity !== undefined && event.similarity !== null && (
<Badge colorScheme={getSimilarityColor(event.similarity)} size="sm">
<Badge colorScheme={getSimilarityColor(event.similarity)} fontSize="xs" px={2}>
相关度: {event.similarity}
</Badge>
)}
@@ -344,10 +347,9 @@ const HistoricalEvents = ({
data={content}
title=""
showAIBadge={true}
textColor={PROFESSIONAL_COLORS.text.primary}
textColor="#E2E8F0"
containerStyle={{
backgroundColor: useColorModeValue('#f7fafc', 'rgba(45, 55, 72, 0.6)'),
borderRadius: '8px',
backgroundColor: 'transparent',
padding: '0',
}}
/>

71
src/views/EventDetail/components/TransmissionChainAnalysis.js
View File

@@ -826,8 +826,8 @@ const TransmissionChainAnalysis = ({ eventId }) => {
<Modal isOpen={isModalOpen} onClose={handleCloseModal} size="xl">
<ModalOverlay />
<ModalContent maxH="80vh" bg={modalBgColor}>
<ModalHeader borderBottom="1px solid" borderColor={modalBorderColor}>
<HStack justify="space-between">
<ModalHeader borderBottom="1px solid" borderColor={modalBorderColor} pr={12}>
<HStack justify="space-between" pr={2}>
<Text color={PROFESSIONAL_COLORS.text.primary}>{selectedNode ? '节点详情' : '传导链分析'}</Text>
{selectedNode && (
<Badge
@@ -841,7 +841,10 @@ const TransmissionChainAnalysis = ({ eventId }) => {
)}
</HStack>
</ModalHeader>
<ModalCloseButton />
<ModalCloseButton
color={PROFESSIONAL_COLORS.text.secondary}
_hover={{ bg: 'rgba(255, 255, 255, 0.1)' }}
/>
<ModalBody overflowY="auto">
{selectedNode ? (
@@ -1084,11 +1087,15 @@ const TransmissionChainAnalysis = ({ eventId }) => {
prefix="机制:"
prefixStyle={{ fontSize: 12, color: PROFESSIONAL_COLORS.text.secondary, fontWeight: 'bold' }}
textColor={PROFESSIONAL_COLORS.text.primary}
containerStyle={{ marginTop: 8 }}
containerStyle={{
marginTop: 8,
backgroundColor: 'transparent',
padding: 0,
}}
showAIBadge={false}
/>
) : parent.transmission_mechanism ? (
<Text fontSize="xs" color="gray.600">
<Text fontSize="xs" color={PROFESSIONAL_COLORS.text.secondary}>
机制: {parent.transmission_mechanism}（AI合成）
</Text>
) : null}
@@ -1105,23 +1112,42 @@ const TransmissionChainAnalysis = ({ eventId }) => {
{/* 影响输出 */}
{(() => {
const targetsFromAPI = nodeDetail && nodeDetail.children && nodeDetail.children.length > 0;
if (targetsFromAPI) {
return (
<Box>
<Text fontWeight="bold" mb={2} color="blue.600">
影响输出 ({nodeDetail.children.length})
<Text fontWeight="bold" mb={2} color={PROFESSIONAL_COLORS.gold[500]}>
影响输出 ({nodeDetail.children.length})（AI合成）
</Text>
<List spacing={2}>
{nodeDetail.children.map((child, index) => (
<ListItem key={index} p={2} bg="gray.50" borderRadius="md" borderLeft="3px solid" borderColor="orange.300" position="relative">
<ListItem
key={index}
p={2}
bg={PROFESSIONAL_COLORS.background.secondary}
borderRadius="md"
borderLeft="3px solid"
borderColor="#FB923C"
position="relative"
>
{child.direction && (
<Box position="absolute" top={2} right={2} zIndex={1}>
<Badge
colorScheme={
child.direction === 'positive' ? 'green' :
child.direction === 'negative' ? 'red' :
'gray'
bg={
child.direction === 'positive' ? 'rgba(16, 185, 129, 0.15)' :
child.direction === 'negative' ? 'rgba(239, 68, 68, 0.15)' :
'rgba(107, 114, 128, 0.15)'
}
color={
child.direction === 'positive' ? '#10B981' :
child.direction === 'negative' ? '#EF4444' :
'#6B7280'
}
borderWidth="1px"
borderColor={
child.direction === 'positive' ? '#10B981' :
child.direction === 'negative' ? '#EF4444' :
'#6B7280'
}
size="sm"
>
@@ -1132,7 +1158,7 @@ const TransmissionChainAnalysis = ({ eventId }) => {
</Box>
)}
<VStack align="stretch" spacing={1}>
<Text fontWeight="bold" fontSize="sm" pr={child.direction ? 20 : 0}>{child.name}</Text>
<Text fontWeight="bold" fontSize="sm" color={PROFESSIONAL_COLORS.text.primary} pr={child.direction ? 20 : 0}>{child.name}</Text>
{child.transmission_mechanism?.data ? (
<CitedContent
data={child.transmission_mechanism}
@@ -1140,11 +1166,15 @@ const TransmissionChainAnalysis = ({ eventId }) => {
prefix="机制:"
prefixStyle={{ fontSize: 12, color: PROFESSIONAL_COLORS.text.secondary, fontWeight: 'bold' }}
textColor={PROFESSIONAL_COLORS.text.primary}
containerStyle={{ marginTop: 8 }}
containerStyle={{
marginTop: 8,
backgroundColor: 'transparent',
padding: 0,
}}
showAIBadge={false}
/>
) : child.transmission_mechanism ? (
<Text fontSize="xs" color="gray.600">
<Text fontSize="xs" color={PROFESSIONAL_COLORS.text.secondary}>
机制: {child.transmission_mechanism}（AI合成）
</Text>
) : null}
@@ -1169,7 +1199,14 @@ const TransmissionChainAnalysis = ({ eventId }) => {
</ModalBody>
<ModalFooter borderTop="1px solid" borderColor={modalBorderColor}>
<Button onClick={handleCloseModal}>关闭</Button>
<Button
onClick={handleCloseModal}
variant="ghost"
color={PROFESSIONAL_COLORS.text.secondary}
_hover={{ bg: 'rgba(255, 255, 255, 0.1)' }}
>
关闭
</Button>
</ModalFooter>
</ModalContent>
</Modal>