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-04 18:22:26 +08:00
parent 1a3987afe0
commit 76360102bb
2 changed files with 22 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/views/Community/components/DynamicNewsDetail/RelatedConceptsSection/TradingDateInfo.js
View File

@@ -3,7 +3,6 @@
import React from 'react';
import {
Box,
HStack,
Text,
useColorModeValue,
@@ -18,8 +17,6 @@ import moment from 'moment';
* @param {string|Object} props.eventTime - 事件发生时间
*/
const TradingDateInfo = ({ effectiveTradingDate, eventTime }) => {
const sectionBg = useColorModeValue('gray.50', 'gray.750');
const headingColor = useColorModeValue('gray.700', 'gray.200');
const stockCountColor = useColorModeValue('gray.500', 'gray.400');
if (!effectiveTradingDate) {
@@ -27,19 +24,17 @@ const TradingDateInfo = ({ effectiveTradingDate, eventTime }) => {
}
return (
<Box mb={4} p={3} bg={sectionBg} borderRadius="md">
<HStack spacing={2}>
<FaCalendarAlt color="gray" />
<Text fontSize="sm" color={headingColor}>
涨跌幅数据日期：{effectiveTradingDate}
{eventTime && effectiveTradingDate !== moment(eventTime).format('YYYY-MM-DD') && (
<Text as="span" ml={2} fontSize="xs" color={stockCountColor}>
(事件发生于 {typeof eventTime === 'object' ? moment(eventTime).format('YYYY-MM-DD HH:mm') : moment(eventTime).format('YYYY-MM-DD HH:mm')}，显示下一交易日数据)
</Text>
)}
</Text>
</HStack>
</Box>
<HStack spacing={2}>
<FaCalendarAlt color="gray" size={12} />
<Text fontSize="xs" color={stockCountColor}>
涨跌幅数据：{effectiveTradingDate}
{eventTime && effectiveTradingDate !== moment(eventTime).format('YYYY-MM-DD') && (
<Text as="span" ml={2} fontSize="xs" color={stockCountColor}>
(事件发生于 {typeof eventTime === 'object' ? moment(eventTime).format('YYYY-MM-DD HH:mm') : moment(eventTime).format('YYYY-MM-DD HH:mm')}，显示下一交易日数据)
</Text>
)}
</Text>
</HStack>
);
};

20
src/views/Community/components/DynamicNewsDetail/RelatedConceptsSection/index.js
View File

@@ -204,9 +204,16 @@ const RelatedConceptsSection = ({ eventTitle, effectiveTradingDate, eventTime })
<Box bg={sectionBg} p={3} borderRadius="md">
{/* 标题栏 */}
<Flex justify="space-between" align="center" mb={3}>
<Heading size="sm" color={headingColor}>
相关概念
</Heading>
<Flex align="center" gap={3}>
<Heading size="sm" color={headingColor}>
相关概念
</Heading>
{/* 交易日期信息 */}
<TradingDateInfo
effectiveTradingDate={effectiveTradingDate}
eventTime={eventTime}
/>
</Flex>
<Button
size="sm"
variant="ghost"
@@ -229,12 +236,7 @@ const RelatedConceptsSection = ({ eventTitle, effectiveTradingDate, eventTime })
/>
))}
</Flex>
{/* 交易日期信息 */}
<TradingDateInfo
effectiveTradingDate={effectiveTradingDate}
eventTime={eventTime}
/>
{/* 详细模式：卡片网格（可折叠） */}
<Collapse in={isExpanded} animateOpacity>