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>
{/* 主体内容 */}

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

@@ -33,9 +33,9 @@ const VerticalModeLayout = ({
// 详情面板重置 key（预留，用于未来功能）
const [detailPanelKey] = useState(0);
// 固定布局比例：左侧更窄（3），右侧更宽（7）
const leftFlex = '3';
const rightFlex = '7';
// 固定布局比例：左侧（4），右侧（6）- 平衡布局，确保左侧有足够空间显示内容
const leftFlex = '4';
const rightFlex = '6';
return (
<Flex

22
src/views/Community/components/EventCard/EventTimeline.js
View File

@@ -13,35 +13,35 @@ import moment from 'moment';
*/
const EventTimeline = ({ createdAt, timelineStyle, borderColor, minHeight = '40px' }) => {
return (
<VStack spacing={0} align="center" minW="90px">
{/* 时间长方形卡片 */}
<VStack spacing={0} align="center" minW="65px">
{/* 时间长方形卡片 - 更紧凑 */}
<Box
{...(timelineStyle.bgGradient ? { bgGradient: timelineStyle.bgGradient } : { bg: timelineStyle.bg })}
borderWidth={timelineStyle.borderWidth}
borderColor={timelineStyle.borderColor}
borderRadius="md"
px={2}
py={2}
minW="85px"
px={1.5}
py={1.5}
minW="60px"
textAlign="center"
boxShadow={timelineStyle.boxShadow}
transition="all 0.3s ease"
>
{/* 日期 YYYY-MM-DD */}
{/* 日期 MM-DD */}
<Text
fontSize="xs"
fontSize="10px"
fontWeight="bold"
color={timelineStyle.textColor}
lineHeight="1.3"
lineHeight="1.2"
>
{moment(createdAt).format('YYYY-MM-DD')}
{moment(createdAt).format('MM-DD')}
</Text>
{/* 时间 HH:mm */}
<Text
fontSize="xs"
fontSize="10px"
fontWeight="bold"
color={timelineStyle.textColor}
lineHeight="1.3"
lineHeight="1.2"
mt={0.5}
>
{moment(createdAt).format('HH:mm')}

2
src/views/Community/index.js
View File

@@ -144,7 +144,7 @@ const Community = () => {
return (
<Box minH="100vh" bg={bgColor}>
{/* 主内容区域 */}
<Container ref={containerRef} maxW="container.xl" pt={6} pb={8}>
<Container ref={containerRef} maxW="1400px" pt={6} pb={8}>
{/* 通知权限提示横幅 */}
{showNotificationBanner && (
<Alert