update ui

src/views/Community/components/DynamicNewsCard.js

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