事件中心有引用的相关详情样式调整
This commit is contained in:
@@ -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;
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user