事件中心有引用的相关详情样式调整

This commit is contained in:
2025-11-10 10:18:55 +08:00
parent 800151771c
commit fbf6813615
2 changed files with 71 additions and 31 deletions

View File

@@ -73,7 +73,7 @@ const VirtualizedFourRowGrid = ({
* 【核心逻辑1】无限滚动 + 顶部刷新 - 监听滚动事件,根据滚动位置自动加载数据或刷新
*
* 工作原理:
* 1. 向下滚动到 60% 位置时,触发 loadNextPage()
* 1. 向下滚动到 90% 位置时,触发 loadNextPage()
* - 调用 usePagination.loadNextPage()
* - 内部执行 handlePageChange(currentPage + 1)
* - dispatch(fetchDynamicNews({ page: nextPage }))
@@ -87,7 +87,7 @@ const VirtualizedFourRowGrid = ({
* - 与5分钟定时刷新协同工作
*
* 设计要点:
* - 60% 触发点:提前加载,避免滚动到底部时才出现加载状态
* - 90% 触发点:接近底部才加载,避免过早触发影响用户体验
* - 防抖机制isLoadingMore.current 防止重复触发
* - 两层缓存:
* - Redux 缓存HTTP层fourRowEvents 数组存储已加载数据,避免重复请求
@@ -107,9 +107,9 @@ const VirtualizedFourRowGrid = ({
const { scrollTop, scrollHeight, clientHeight } = scrollElement;
const scrollPercentage = (scrollTop + clientHeight) / scrollHeight;
// 向下滚动:滚动到 60% 时开始加载下一页
if (loadNextPage && hasMore && scrollPercentage > 0.6) {
console.log('%c📜 [无限滚动] 到达底部,加载下一页', 'color: #8B5CF6; font-weight: bold;');
// 向下滚动:滚动到 90% 时开始加载下一页(更接近底部,避免过早触发)
if (loadNextPage && hasMore && scrollPercentage > 0.9) {
console.log('%c📜 [无限滚动] 接近底部,加载下一页', 'color: #8B5CF6; font-weight: bold;');
isLoadingMore.current = true;
await loadNextPage();
isLoadingMore.current = false;

View File

@@ -125,7 +125,7 @@ const StockListItem = ({
transition="all 0.2s"
>
{/* 单行紧凑布局:名称+涨跌幅 | 分时图 | K线图 | 关联描述 */}
<HStack spacing={3} align="stretch">
<HStack spacing={3} align="stretch" flexWrap="wrap">
{/* 左侧:股票代码 + 名称 + 涨跌幅(垂直排列) - 收窄 */}
<VStack
align="stretch"
@@ -189,9 +189,11 @@ const StockListItem = ({
</HStack>
</VStack>
{/* 分时图 - 固定宽度 */}
{/* 分时图 - 响应式宽度 */}
<Box
w="160px"
minW="140px"
maxW="160px"
flex="1"
maxH="50px"
h="auto"
borderWidth="1px"
@@ -204,8 +206,9 @@ const StockListItem = ({
setIsModalOpen(true);
}}
cursor="pointer"
flexShrink={0}
flexShrink={1}
alignSelf="center"
overflow="hidden"
_hover={{
borderColor: useColorModeValue('blue.300', 'blue.500'),
boxShadow: 'sm'
@@ -217,18 +220,23 @@ const StockListItem = ({
color={useColorModeValue('blue.700', 'blue.200')}
mb={1}
fontWeight="semibold"
whiteSpace="nowrap"
>
📈 分时
</Text>
<Box overflow="hidden">
<MiniTimelineChart
stockCode={stock.stock_code}
eventTime={eventTime}
/>
</Box>
</Box>
{/* K线图 - 固定宽度 */}
{/* K线图 - 响应式宽度 */}
<Box
w="160px"
minW="140px"
maxW="160px"
flex="1"
maxH="50px"
h="auto"
borderWidth="1px"
@@ -241,8 +249,9 @@ const StockListItem = ({
setIsModalOpen(true);
}}
cursor="pointer"
flexShrink={0}
flexShrink={1}
alignSelf="center"
overflow="hidden"
_hover={{
borderColor: useColorModeValue('purple.300', 'purple.500'),
boxShadow: 'sm'
@@ -254,30 +263,61 @@ const StockListItem = ({
color={useColorModeValue('purple.700', 'purple.200')}
mb={1}
fontWeight="semibold"
whiteSpace="nowrap"
>
📊 日线
</Text>
<Box overflow="hidden">
<MiniKLineChart
stockCode={stock.stock_code}
eventTime={eventTime}
/>
</Box>
</Box>
{/* 关联描述 - 升级和降级处理 */}
{stock.relation_desc && (
<Box flex={1} minW={0}>
{stock.relation_desc?.data ? (
// 升级:带引用来源的版本
// 升级:带引用来源的版本 - 添加折叠功能
<Tooltip
label={isDescExpanded ? "点击收起" : "点击展开完整描述"}
placement="top"
hasArrow
bg="gray.600"
color="white"
fontSize="xs"
>
<Box
onClick={(e) => {
e.stopPropagation();
setIsDescExpanded(!isDescExpanded);
}}
cursor="pointer"
px={3}
py={2}
bg={useColorModeValue('gray.50', 'gray.700')}
borderRadius="md"
_hover={{
bg: useColorModeValue('gray.100', 'gray.600'),
}}
transition="background 0.2s"
position="relative"
>
<Collapse in={isDescExpanded} startingHeight={40}>
<CitedContent
data={stock.relation_desc}
title=""
showAIBadge={true}
containerStyle={{
backgroundColor: useColorModeValue('#f7fafc', 'rgba(45, 55, 72, 0.6)'),
borderRadius: '8px',
backgroundColor: 'transparent',
borderRadius: '0',
padding: '0',
}}
/>
</Collapse>
</Box>
</Tooltip>
) : (
// 降级:纯文本版本(保留展开/收起功能)
<Tooltip