feat: 模式切花移动到标题恻，通知UI调整
This commit is contained in:
zdl
@@ -538,72 +538,49 @@ const [currentMode, setCurrentMode] = useState('vertical');
|
|||||||
pb={3}
|
pb={3}
|
||||||
>
|
>
|
||||||
<VStack spacing={3} align="stretch">
|
<VStack spacing={3} align="stretch">
|
||||||
{/* 第一行：标题 + 通知开关 + 更新时间 */}
|
{/* 第一行：标题 + 模式切换 + 通知开关 + 更新时间 */}
|
||||||
<Flex justify="space-between" align="center">
|
<Flex justify="space-between" align="center">
|
||||||
{/* 左侧：标题 */}
|
{/* 左侧：标题 + 模式切换按钮 */}
|
||||||
<Heading size="md" color={PROFESSIONAL_COLORS.text.primary}>
|
<HStack spacing={4}>
|
||||||
<HStack spacing={2}>
|
<Heading size="md" color={PROFESSIONAL_COLORS.text.primary}>
|
||||||
<TimeIcon color={PROFESSIONAL_COLORS.gold[500]} />
|
<HStack spacing={2}>
|
||||||
<Text bgGradient={PROFESSIONAL_COLORS.gradients.gold} bgClip="text">实时要闻·动态追踪</Text>
|
<TimeIcon color={PROFESSIONAL_COLORS.gold[500]} />
|
||||||
</HStack>
|
<Text bgGradient={PROFESSIONAL_COLORS.gradients.gold} bgClip="text">实时要闻·动态追踪</Text>
|
||||||
</Heading>
|
</HStack>
|
||||||
|
</Heading>
|
||||||
|
{/* 模式切换按钮（移动端隐藏） */}
|
||||||
|
{!isMobile && <ModeToggleButtons mode={mode} onModeChange={handleModeToggle} />}
|
||||||
|
</HStack>
|
||||||
|
|
||||||
{/* 右侧：通知开关 + 更新时间 */}
|
{/* 右侧：通知开关 + 更新时间 */}
|
||||||
<HStack spacing={3}>
|
<HStack spacing={3}>
|
||||||
{/* 通知开关 - 移动端隐藏 */}
|
{/* 通知开关 - 移动端隐藏 */}
|
||||||
{!isMobile && (
|
{!isMobile && (
|
||||||
<Tooltip
|
<HStack
|
||||||
label={browserPermission === 'granted'
|
spacing={2}
|
||||||
? '浏览器通知已开启'
|
cursor="pointer"
|
||||||
: '开启实时推送通知'}
|
onClick={handleNotificationToggle}
|
||||||
placement="left"
|
_hover={{ opacity: 0.8 }}
|
||||||
hasArrow
|
transition="opacity 0.2s"
|
||||||
>
|
>
|
||||||
<HStack
|
<Icon
|
||||||
spacing={2}
|
as={BellIcon}
|
||||||
px={3}
|
boxSize={3.5}
|
||||||
py={1.5}
|
color={PROFESSIONAL_COLORS.gold[500]}
|
||||||
borderRadius="md"
|
/>
|
||||||
bg={browserPermission === 'granted'
|
<Text
|
||||||
? useColorModeValue('green.50', 'green.900')
|
fontSize="sm"
|
||||||
: useColorModeValue('gray.50', 'gray.700')}
|
color={PROFESSIONAL_COLORS.text.secondary}
|
||||||
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
|
实时消息推送：{browserPermission === 'granted' ? '已开启' : '未开启'}
|
||||||
as={BellIcon}
|
</Text>
|
||||||
boxSize={3.5}
|
<Switch
|
||||||
color={browserPermission === 'granted'
|
size="sm"
|
||||||
? useColorModeValue('green.600', 'green.300')
|
isChecked={browserPermission === 'granted'}
|
||||||
: useColorModeValue('gray.500', 'gray.400')}
|
pointerEvents="none"
|
||||||
/>
|
colorScheme="yellow"
|
||||||
<Text
|
/>
|
||||||
fontSize="sm"
|
</HStack>
|
||||||
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>
|
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* 更新时间 */}
|
{/* 更新时间 */}
|
||||||
@@ -622,6 +599,7 @@ const [currentMode, setCurrentMode] = useState('vertical');
|
|||||||
mode={mode}
|
mode={mode}
|
||||||
pageSize={pageSize}
|
pageSize={pageSize}
|
||||||
trackingFunctions={trackingFunctions}
|
trackingFunctions={trackingFunctions}
|
||||||
|
isMobile={isMobile}
|
||||||
/>
|
/>
|
||||||
</Box>
|
</Box>
|
||||||
</VStack>
|
</VStack>
|
||||||
@@ -637,37 +615,6 @@ const [currentMode, setCurrentMode] = useState('vertical');
|
|||||||
overflow="visible"
|
overflow="visible"
|
||||||
zIndex={1}
|
zIndex={1}
|
||||||
>
|
>
|
||||||
{/* 顶部控制栏：模式切换按钮 + 分页控制器（移动端隐藏） */}
|
|
||||||
{!isMobile && (
|
|
||||||
<Box
|
|
||||||
position="sticky"
|
|
||||||
top="0"
|
|
||||||
zIndex={10}
|
|
||||||
bg={cardBg}
|
|
||||||
py={2}
|
|
||||||
mb={2}
|
|
||||||
borderBottom="1px solid"
|
|
||||||
borderColor={borderColor}
|
|
||||||
mx={-6}
|
|
||||||
px={6}
|
|
||||||
boxShadow="sm"
|
|
||||||
>
|
|
||||||
<Flex justify="space-between" align="center" flexWrap="wrap" gap={2}>
|
|
||||||
{/* 左侧：模式切换按钮 */}
|
|
||||||
<ModeToggleButtons mode={mode} onModeChange={handleModeToggle} />
|
|
||||||
|
|
||||||
{/* 右侧：分页控制器（仅在纵向模式显示） */}
|
|
||||||
{mode === 'vertical' && totalPages > 1 && (
|
|
||||||
<PaginationControl
|
|
||||||
currentPage={currentPage}
|
|
||||||
totalPages={totalPages}
|
|
||||||
onPageChange={handlePageChangeWithScroll}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</Flex>
|
|
||||||
</Box>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* 内容区域 - 撑满剩余高度 */}
|
{/* 内容区域 - 撑满剩余高度 */}
|
||||||
<Box flex="1" minH={0} position="relative">
|
<Box flex="1" minH={0} position="relative">
|
||||||
{/* Loading 蒙层 - 数据请求时显示 */}
|
{/* Loading 蒙层 - 数据请求时显示 */}
|
||||||
@@ -733,7 +680,7 @@ const [currentMode, setCurrentMode] = useState('vertical');
|
|||||||
</ModalContent>
|
</ModalContent>
|
||||||
</Modal>
|
</Modal>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* 右侧：分页控制器（仅在纵向模式显示），H5 放不下时折行 */}
|
{/* 右侧：分页控制器（仅在纵向模式显示），H5 放不下时折行 */}
|
||||||
{mode === 'vertical' && totalPages > 1 && (
|
{mode === 'vertical' && totalPages > 1 && (
|
||||||
<PaginationControl
|
<PaginationControl
|
||||||
|
|||||||
Reference in New Issue
Block a user