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

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