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

update ui

Browse Source
This commit is contained in:
zzlgreat
2025-11-13 22:21:59 +08:00
parent 7e0358ede4
commit c6062efb00
3 changed files with 207 additions and 235 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
src/views/Community/components/DynamicNewsCard.js
View File

@@ -398,49 +398,73 @@ const [currentMode, setCurrentMode] = useState('vertical');
}
}}
>
{/* 标题和搜索部分 - 一行布局 */}
{/* 标题和搜索部分 - 一体化单行布局 */}
<CardHeader
ref={cardHeaderRef}
position="relative"
zIndex={1}
pb={4}
>
{/* 第一行：标题 + 通知开关 + 更新时间 */}
<Flex justify="space-between" align="center" mb={4}>
<VStack align="start" spacing={1}>
<Heading size="md">
<HStack>
{/* 一体化标题栏：左侧标题+badges | 中间筛选组件 | 右侧通知+时间 */}
<Flex
justify="space-between"
align="center"
gap={4}
bg={useColorModeValue('gray.50', 'gray.800')}
borderRadius="lg"
p={3}
borderWidth="1px"
borderColor={borderColor}
>
{/* 左侧：标题 + Badges */}
<HStack spacing={3} minW="200px" flexShrink={0}>
<Heading size="md" whiteSpace="nowrap">
<HStack spacing={2}>
<TimeIcon />
<Text>实时要闻·动态追踪</Text>
<Text>实时要闻</Text>
</HStack>
</Heading>
<HStack fontSize="sm" color="gray.500">
<Badge colorScheme="red">实时</Badge>
<Badge colorScheme="green">盘中</Badge>
<Badge colorScheme="blue">快讯</Badge>
<HStack spacing={1}>
<Badge colorScheme="red" fontSize="xs">实时</Badge>
<Badge colorScheme="green" fontSize="xs">盘中</Badge>
<Badge colorScheme="blue" fontSize="xs">快讯</Badge>
</HStack>
</VStack>
</HStack>
<VStack align="end" spacing={2}>
{/* 通知开关 */}
{/* 中间：筛选组件（占据剩余空间） */}
<Box flex="1" minW={0}>
<CompactSearchBox
onSearch={onSearch}
onSearchFocus={onSearchFocus}
filters={filters}
mode={mode}
pageSize={pageSize}
trackingFunctions={trackingFunctions}
/>
</Box>
{/* 右侧：通知开关 + 更新时间 */}
<VStack align="end" spacing={1} minW="140px" flexShrink={0}>
{/* 通知开关 - 紧凑版 */}
<Tooltip
label={browserPermission === 'granted'
? '浏览器通知已开启，新事件将实时推送'
: '开启后可接收实时事件推送通知'}
? '浏览器通知已开启'
: '开启实时推送通知'}
placement="left"
hasArrow
>
<HStack
spacing={2}
px={3}
py={2}
px={2}
py={1}
borderRadius="md"
bg={browserPermission === 'granted'
? useColorModeValue('green.50', 'green.900')
: useColorModeValue('gray.50', 'gray.700')}
: useColorModeValue('gray.100', 'gray.700')}
borderWidth="1px"
borderColor={browserPermission === 'granted'
? useColorModeValue('green.200', 'green.700')
: useColorModeValue('gray.200', 'gray.600')}
: useColorModeValue('gray.300', 'gray.600')}
cursor="pointer"
_hover={{
borderColor: browserPermission === 'granted'
@@ -452,19 +476,19 @@ const [currentMode, setCurrentMode] = useState('vertical');
>
<Icon
as={BellIcon}
boxSize={4}
boxSize={3}
color={browserPermission === 'granted'
? useColorModeValue('green.600', 'green.300')
: useColorModeValue('gray.500', 'gray.400')}
/>
<Text
fontSize="sm"
fontSize="xs"
fontWeight="medium"
color={browserPermission === 'granted'
? useColorModeValue('green.700', 'green.200')
: useColorModeValue('gray.600', 'gray.300')}
>
{browserPermission === 'granted' ? '通知已开启' : '开启通知'}
{browserPermission === 'granted' ? '已开启' : '开启通知'}
</Text>
<Switch
size="sm"
@@ -475,21 +499,12 @@ const [currentMode, setCurrentMode] = useState('vertical');
</HStack>
</Tooltip>
<Text fontSize="xs" color="gray.500">
最后更新: {lastUpdateTime?.toLocaleTimeString() || '未知'}
{/* 更新时间 */}
<Text fontSize="xs" color="gray.500" whiteSpace="nowrap">
更新: {lastUpdateTime?.toLocaleTimeString() || '--'}
</Text>
</VStack>
</Flex>
{/* 第二行：搜索和筛选组件 */}
<CompactSearchBox
onSearch={onSearch}
onSearchFocus={onSearchFocus}
filters={filters}
mode={mode}
pageSize={pageSize}
trackingFunctions={trackingFunctions}
/>
</CardHeader>
{/* 主体内容 */}

62
src/views/Community/components/DynamicNewsCard/VerticalModeLayout.js
View File

@@ -1,17 +1,15 @@
// src/views/Community/components/DynamicNewsCard/VerticalModeLayout.js
// 纵向分栏模式布局组件
import React, { useState, useEffect } from 'react';
import { Box, IconButton, Tooltip, VStack, Flex, Center, Text } from '@chakra-ui/react';
import { ViewIcon, ViewOffIcon, InfoIcon } from '@chakra-ui/icons';
import React, { useState } from 'react';
import { Box, VStack, Flex, Center, Text } from '@chakra-ui/react';
import { InfoIcon } from '@chakra-ui/icons';
import HorizontalDynamicNewsEventCard from '../EventCard/HorizontalDynamicNewsEventCard';
import EventDetailScrollPanel from './EventDetailScrollPanel';
/**
* 纵向分栏模式布局
* 支持两种展示模式：
* - detail（默认）：左侧事件列表 1fr | 右侧详情 2fr
* - list：左侧事件列表 7fr | 右侧详情 300px
* 固定布局：左侧事件列表 3fr | 右侧详情 7fr
*
* @param {string} display - CSS display 属性（用于显示/隐藏组件）
* @param {Array} events - 当前页的事件列表（分页数据）
@@ -32,33 +30,12 @@ const VerticalModeLayout = ({
getTimelineBoxStyle,
borderColor,
}) => {
// 布局模式状态：'detail' = 聚焦详情（默认），'list' = 聚焦列表
const [layoutMode, setLayoutMode] = useState('detail');
// 详情面板重置 key（预留，用于未来功能）
const [detailPanelKey] = useState(0);
// 详情面板重置 key（切换到 list 模式时改变，强制重新渲染）
const [detailPanelKey, setDetailPanelKey] = useState(0);
// 监听事件选择 - 自动切换到详情模式
useEffect(() => {
if (selectedEvent) {
setLayoutMode('detail');
}
}, [selectedEvent]);
// 切换布局模式
const toggleLayoutMode = () => {
const newMode = layoutMode === 'detail' ? 'list' : 'detail';
setLayoutMode(newMode);
// 如果切换到 list 模式，重置详情面板（收起所有 CollapsibleSection）
if (newMode === 'list') {
setDetailPanelKey(prev => prev + 1); // 改变 key，强制重新渲染
}
};
// 根据模式计算 flex 比例
const leftFlex = layoutMode === 'detail' ? '4' : '6';
const rightFlex = layoutMode === 'detail' ? '6' : '4';
// 固定布局比例：左侧更窄（3），右侧更宽（7）
const leftFlex = '3';
const rightFlex = '7';
return (
<Flex
@@ -111,7 +88,7 @@ const VerticalModeLayout = ({
onToggleFollow={onToggleFollow}
timelineStyle={getTimelineBoxStyle()}
borderColor={borderColor}
indicatorSize={layoutMode === 'detail' ? 'default' : 'comfortable'}
indicatorSize="default"
layout="vertical"
/>
))}
@@ -140,25 +117,6 @@ const VerticalModeLayout = ({
overflow="hidden"
h="100%"
>
{/* 布局切换按钮 */}
<Tooltip
label={layoutMode === 'detail' ? '展开事件列表' : '展开详情面板'}
placement="left"
>
<IconButton
position="absolute"
top={2}
right={2}
zIndex={9999}
size="md"
icon={layoutMode === 'detail' ? <ViewOffIcon /> : <ViewIcon />}
onClick={toggleLayoutMode}
aria-label="切换布局模式"
colorScheme="blue"
variant="solid"
/>
</Tooltip>
{/* 详情面板 */}
<EventDetailScrollPanel
key={detailPanelKey}

295
src/views/Community/components/DynamicNewsDetail/StockListItem.js
View File

@@ -125,157 +125,156 @@ const StockListItem = ({
transition="all 0.2s"
>
{/* 单行紧凑布局：名称+涨跌幅 | 分时图 | K线图 | 关联描述 */}
<HStack spacing={3} align="center" flexWrap="wrap">
{/* 左侧：股票代码 + 名称 + 涨跌幅（垂直排列） */}
<VStack
align="stretch"
spacing={1}
minW="110px"
maxW="130px"
justify="center"
flexShrink={0}
>
<Tooltip
label="点击查看股票详情"
placement="top"
hasArrow
bg="blue.600"
color="white"
fontSize="xs"
<HStack spacing={2} align="center" flexWrap="wrap">
{/* 左侧：股票信息区 */}
<HStack spacing={2} minW="360px" maxW="380px" flexShrink={0}>
{/* 股票代码 + 名称 + 涨跌幅 */}
<VStack
align="stretch"
spacing={1}
minW="95px"
maxW="110px"
justify="center"
flexShrink={0}
>
<VStack spacing={0} align="stretch">
<Text
fontSize="xs"
color={codeColor}
noOfLines={1}
cursor="pointer"
onClick={handleViewDetail}
_hover={{ textDecoration: 'underline' }}
>
{stock.stock_code}
</Text>
<Text
fontSize="sm"
fontWeight="bold"
color={nameColor}
noOfLines={1}
cursor="pointer"
onClick={handleViewDetail}
_hover={{ textDecoration: 'underline' }}
>
{stock.stock_name}
</Text>
</VStack>
</Tooltip>
<HStack spacing={1} align="center">
<Text
fontSize="lg"
fontWeight="bold"
color={getChangeColor(change)}
<Tooltip
label="点击查看股票详情"
placement="top"
hasArrow
bg="blue.600"
color="white"
fontSize="xs"
>
{formatChange(change)}
<VStack spacing={0} align="stretch">
<Text
fontSize="xs"
color={codeColor}
noOfLines={1}
cursor="pointer"
onClick={handleViewDetail}
_hover={{ textDecoration: 'underline' }}
>
{stock.stock_code}
</Text>
<Text
fontSize="xs"
fontWeight="bold"
color={nameColor}
noOfLines={1}
cursor="pointer"
onClick={handleViewDetail}
_hover={{ textDecoration: 'underline' }}
>
{stock.stock_name}
</Text>
</VStack>
</Tooltip>
<HStack spacing={1} align="center">
<Text
fontSize="md"
fontWeight="bold"
color={getChangeColor(change)}
>
{formatChange(change)}
</Text>
{onWatchlistToggle && (
<IconButton
size="xs"
variant={isInWatchlist ? 'solid' : 'ghost'}
colorScheme={isInWatchlist ? 'yellow' : 'gray'}
icon={<StarIcon />}
onClick={handleWatchlistClick}
aria-label={isInWatchlist ? '已关注' : '加自选'}
borderRadius="full"
/>
)}
</HStack>
</VStack>
{/* 分时图 - 更紧凑 */}
<VStack
w="115px"
borderWidth="1px"
borderColor={useColorModeValue('blue.100', 'blue.700')}
borderRadius="md"
px={1.5}
py={1}
bg={useColorModeValue('blue.50', 'blue.900')}
onClick={(e) => {
e.stopPropagation();
setIsModalOpen(true);
}}
cursor="pointer"
flexShrink={0}
align="stretch"
spacing={0}
h="fit-content"
_hover={{
borderColor: useColorModeValue('blue.300', 'blue.500'),
boxShadow: 'md',
transform: 'translateY(-1px)'
}}
transition="all 0.2s"
>
<Text
fontSize="10px"
color={useColorModeValue('blue.700', 'blue.200')}
fontWeight="semibold"
whiteSpace="nowrap"
mb={0.5}
>
📈 分时
</Text>
{onWatchlistToggle && (
<IconButton
size="xs"
variant={isInWatchlist ? 'solid' : 'ghost'}
colorScheme={isInWatchlist ? 'yellow' : 'gray'}
icon={<StarIcon />}
onClick={handleWatchlistClick}
aria-label={isInWatchlist ? '已关注' : '加自选'}
borderRadius="full"
<Box h="32px">
<MiniTimelineChart
stockCode={stock.stock_code}
eventTime={eventTime}
/>
)}
</HStack>
</VStack>
</Box>
</VStack>
{/* 分时图 - 紧凑高度 */}
<VStack
minW="150px"
maxW="180px"
flex="1"
borderWidth="1px"
borderColor={useColorModeValue('blue.100', 'blue.700')}
borderRadius="md"
px={2}
py={1}
bg={useColorModeValue('blue.50', 'blue.900')}
onClick={(e) => {
e.stopPropagation();
setIsModalOpen(true);
}}
cursor="pointer"
flexShrink={1}
align="stretch"
spacing={0}
h="fit-content"
_hover={{
borderColor: useColorModeValue('blue.300', 'blue.500'),
boxShadow: 'md',
transform: 'translateY(-1px)'
}}
transition="all 0.2s"
>
<Text
fontSize="xs"
color={useColorModeValue('blue.700', 'blue.200')}
fontWeight="semibold"
whiteSpace="nowrap"
mb={0.5}
{/* K线图 - 更紧凑 */}
<VStack
w="115px"
borderWidth="1px"
borderColor={useColorModeValue('purple.100', 'purple.700')}
borderRadius="md"
px={1.5}
py={1}
bg={useColorModeValue('purple.50', 'purple.900')}
onClick={(e) => {
e.stopPropagation();
setIsModalOpen(true);
}}
cursor="pointer"
flexShrink={0}
align="stretch"
spacing={0}
h="fit-content"
_hover={{
borderColor: useColorModeValue('purple.300', 'purple.500'),
boxShadow: 'md',
transform: 'translateY(-1px)'
}}
transition="all 0.2s"
>
📈 分时
</Text>
<Box h="35px">
<MiniTimelineChart
stockCode={stock.stock_code}
eventTime={eventTime}
/>
</Box>
</VStack>
{/* K线图 - 紧凑高度 */}
<VStack
minW="150px"
maxW="180px"
flex="1"
borderWidth="1px"
borderColor={useColorModeValue('purple.100', 'purple.700')}
borderRadius="md"
px={2}
py={1}
bg={useColorModeValue('purple.50', 'purple.900')}
onClick={(e) => {
e.stopPropagation();
setIsModalOpen(true);
}}
cursor="pointer"
flexShrink={1}
align="stretch"
spacing={0}
h="fit-content"
_hover={{
borderColor: useColorModeValue('purple.300', 'purple.500'),
boxShadow: 'md',
transform: 'translateY(-1px)'
}}
transition="all 0.2s"
>
<Text
fontSize="xs"
color={useColorModeValue('purple.700', 'purple.200')}
fontWeight="semibold"
whiteSpace="nowrap"
mb={0.5}
>
📊 日线
</Text>
<Box h="35px">
<MiniKLineChart
stockCode={stock.stock_code}
eventTime={eventTime}
/>
</Box>
</VStack>
<Text
fontSize="10px"
color={useColorModeValue('purple.700', 'purple.200')}
fontWeight="semibold"
whiteSpace="nowrap"
mb={0.5}
>
📊 日线
</Text>
<Box h="32px">
<MiniKLineChart
stockCode={stock.stock_code}
eventTime={eventTime}
/>
</Box>
</VStack>
</HStack>
{/* 关联描述 - 升级和降级处理 */}
{stock.relation_desc && (
@@ -347,11 +346,11 @@ const StockListItem = ({
position="relative"
>
{/* 去掉"关联描述"标题 */}
<Collapse in={isDescExpanded} startingHeight={40}>
<Collapse in={isDescExpanded} startingHeight={36}>
<Text
fontSize="sm"
fontSize="xs"
color={nameColor}
lineHeight="1.6"
lineHeight="1.5"
>
{relationText}
</Text>