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:35:33 +08:00
parent c6062efb00
commit f0bb00a2ce
4 changed files with 89 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -398,41 +398,89 @@ const [currentMode, setCurrentMode] = useState('vertical');
}
}}
>
{/* 标题和搜索部分 - 一体化单行布局 */}
{/* 标题和搜索部分 - 优化版 */}
<CardHeader
ref={cardHeaderRef}
position="relative"
zIndex={1}
pb={4}
pb={3}
>
{/* 一体化标题栏：左侧标题+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">
<VStack spacing={3} align="stretch">
{/* 第一行：标题 + 通知开关 + 更新时间 */}
<Flex justify="space-between" align="center">
{/* 左侧：标题 */}
<Heading size="md">
<HStack spacing={2}>
<TimeIcon />
<Text>实时要闻</Text>
<Text>实时要闻·动态追踪</Text>
</HStack>
</Heading>
<HStack spacing={1}>
<Badge colorScheme="red" fontSize="xs">实时</Badge>
<Badge colorScheme="green" fontSize="xs">盘中</Badge>
<Badge colorScheme="blue" fontSize="xs">快讯</Badge>
</HStack>
</HStack>
{/* 中间：筛选组件（占据剩余空间） */}
<Box flex="1" minW={0}>
{/* 右侧：通知开关 + 更新时间 */}
<HStack spacing={3}>
{/* 通知开关 */}
<Tooltip
label={browserPermission === 'granted'
? '浏览器通知已开启'
: '开启实时推送通知'}
placement="left"
hasArrow
>
<HStack
spacing={2}
px={3}
py={1.5}
borderRadius="md"
bg={browserPermission === 'granted'
? useColorModeValue('green.50', 'green.900')
: useColorModeValue('gray.50', 'gray.700')}
borderWidth="1px"
borderColor={browserPermission === 'granted'
? useColorModeValue('green.200', 'green.700')
: useColorModeValue('gray.200', 'gray.600')}
cursor="pointer"
_hover={{
borderColor: browserPermission === 'granted'
? useColorModeValue('green.300', 'green.600')
: useColorModeValue('blue.300', 'blue.600'),
}}
transition="all 0.2s"
onClick={handleNotificationToggle}
>
<Icon
as={BellIcon}
boxSize={3.5}
color={browserPermission === 'granted'
? useColorModeValue('green.600', 'green.300')
: useColorModeValue('gray.500', 'gray.400')}
/>
<Text
fontSize="sm"
fontWeight="medium"
color={browserPermission === 'granted'
? useColorModeValue('green.700', 'green.200')
: useColorModeValue('gray.600', 'gray.300')}
>
{browserPermission === 'granted' ? '已开启' : '开启通知'}
</Text>
<Switch
size="sm"
isChecked={browserPermission === 'granted'}
pointerEvents="none"
colorScheme="green"
/>
</HStack>
</Tooltip>
{/* 更新时间 */}
<Text fontSize="xs" color="gray.500" whiteSpace="nowrap">
最后更新: {lastUpdateTime?.toLocaleTimeString() || '--'}
</Text>
</HStack>
</Flex>
{/* 第二行：筛选组件 */}
<Box>
<CompactSearchBox
onSearch={onSearch}
onSearchFocus={onSearchFocus}
@@ -442,69 +490,7 @@ const [currentMode, setCurrentMode] = useState('vertical');
trackingFunctions={trackingFunctions}
/>
</Box>
{/* 右侧：通知开关 + 更新时间 */}
<VStack align="end" spacing={1} minW="140px" flexShrink={0}>
{/* 通知开关 - 紧凑版 */}
<Tooltip
label={browserPermission === 'granted'
? '浏览器通知已开启'
: '开启实时推送通知'}
placement="left"
hasArrow
>
<HStack
spacing={2}
px={2}
py={1}
borderRadius="md"
bg={browserPermission === 'granted'
? useColorModeValue('green.50', 'green.900')
: useColorModeValue('gray.100', 'gray.700')}
borderWidth="1px"
borderColor={browserPermission === 'granted'
? useColorModeValue('green.200', 'green.700')
: useColorModeValue('gray.300', 'gray.600')}
cursor="pointer"
_hover={{
borderColor: browserPermission === 'granted'
? useColorModeValue('green.300', 'green.600')
: useColorModeValue('blue.300', 'blue.600'),
}}
transition="all 0.2s"
onClick={handleNotificationToggle}
>
<Icon
as={BellIcon}
boxSize={3}
color={browserPermission === 'granted'
? useColorModeValue('green.600', 'green.300')
: useColorModeValue('gray.500', 'gray.400')}
/>
<Text
fontSize="xs"
fontWeight="medium"
color={browserPermission === 'granted'
? useColorModeValue('green.700', 'green.200')
: useColorModeValue('gray.600', 'gray.300')}
>
{browserPermission === 'granted' ? '已开启' : '开启通知'}
</Text>
<Switch
size="sm"
isChecked={browserPermission === 'granted'}
pointerEvents="none"
colorScheme="green"
/>
</HStack>
</Tooltip>
{/* 更新时间 */}
<Text fontSize="xs" color="gray.500" whiteSpace="nowrap">
更新: {lastUpdateTime?.toLocaleTimeString() || '--'}
</Text>
</VStack>
</Flex>
</VStack>
</CardHeader>
{/* 主体内容 */}