From a90158239bf51d5601ed4e954db40f56c971d044 Mon Sep 17 00:00:00 2001
From: zdl <3489966805@qq.com>
Date: Wed, 26 Nov 2025 19:11:33 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=A8=A1=E5=BC=8F=E5=88=87=E8=8A=B1?=
 =?UTF-8?q?=E7=A7=BB=E5=8A=A8=E5=88=B0=E6=A0=87=E9=A2=98=E6=81=BB=EF=BC=8C?=
 =?UTF-8?q?=E9=80=9A=E7=9F=A5UI=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Community/components/DynamicNewsCard.js   | 127 +++++-------------
 1 file changed, 37 insertions(+), 90 deletions(-)

diff --git a/src/views/Community/components/DynamicNewsCard.js b/src/views/Community/components/DynamicNewsCard.js
index 32116204..3f669633 100644
--- a/src/views/Community/components/DynamicNewsCard.js
+++ b/src/views/Community/components/DynamicNewsCard.js
@@ -538,72 +538,49 @@ const [currentMode, setCurrentMode] = useState('vertical');
         pb={3}
       >
         <VStack spacing={3} align="stretch">
-          {/* 第一行：标题 + 通知开关 + 更新时间 */}
+          {/* 第一行：标题 + 模式切换 + 通知开关 + 更新时间 */}
           <Flex justify="space-between" align="center">
-            {/* 左侧：标题 */}
-            <Heading size="md" color={PROFESSIONAL_COLORS.text.primary}>
-              <HStack spacing={2}>
-                <TimeIcon color={PROFESSIONAL_COLORS.gold[500]} />
-                <Text bgGradient={PROFESSIONAL_COLORS.gradients.gold} bgClip="text">实时要闻·动态追踪</Text>
-              </HStack>
-            </Heading>
+            {/* 左侧：标题 + 模式切换按钮 */}
+            <HStack spacing={4}>
+              <Heading size="md" color={PROFESSIONAL_COLORS.text.primary}>
+                <HStack spacing={2}>
+                  <TimeIcon color={PROFESSIONAL_COLORS.gold[500]} />
+                  <Text bgGradient={PROFESSIONAL_COLORS.gradients.gold} bgClip="text">实时要闻·动态追踪</Text>
+                </HStack>
+              </Heading>
+              {/* 模式切换按钮（移动端隐藏） */}
+              {!isMobile && <ModeToggleButtons mode={mode} onModeChange={handleModeToggle} />}
+            </HStack>
 
             {/* 右侧：通知开关 + 更新时间 */}
             <HStack spacing={3}>
               {/* 通知开关 - 移动端隐藏 */}
               {!isMobile && (
-                <Tooltip
-                  label={browserPermission === 'granted'
-                    ? '浏览器通知已开启'
-                    : '开启实时推送通知'}
-                  placement="left"
-                  hasArrow
+                <HStack
+                  spacing={2}
+                  cursor="pointer"
+                  onClick={handleNotificationToggle}
+                  _hover={{ opacity: 0.8 }}
+                  transition="opacity 0.2s"
                 >
-                  <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={PROFESSIONAL_COLORS.gold[500]}
+                  />
+                  <Text
+                    fontSize="sm"
+                    color={PROFESSIONAL_COLORS.text.secondary}
                   >
-                    <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>
+                    实时消息推送：{browserPermission === 'granted' ? '已开启' : '未开启'}
+                  </Text>
+                  <Switch
+                    size="sm"
+                    isChecked={browserPermission === 'granted'}
+                    pointerEvents="none"
+                    colorScheme="yellow"
+                  />
+                </HStack>
               )}
 
               {/* 更新时间 */}
@@ -622,6 +599,7 @@ const [currentMode, setCurrentMode] = useState('vertical');
               mode={mode}
               pageSize={pageSize}
               trackingFunctions={trackingFunctions}
+              isMobile={isMobile}
             />
           </Box>
         </VStack>
@@ -637,37 +615,6 @@ const [currentMode, setCurrentMode] = useState('vertical');
         overflow="visible"
         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">
           {/* Loading 蒙层 - 数据请求时显示 */}
@@ -733,7 +680,7 @@ const [currentMode, setCurrentMode] = useState('vertical');
           </ModalContent>
         </Modal>
       )}
-
+      
       {/* 右侧：分页控制器（仅在纵向模式显示），H5 放不下时折行 */}
       {mode === 'vertical' && totalPages > 1 && (
         <PaginationControl