From f0bb00a2ce6c9336a6ef20c60bc2da53cfe1abfb Mon Sep 17 00:00:00 2001
From: zzlgreat <zzlgreat@gmail.com>
Date: Thu, 13 Nov 2025 22:35:33 +0800
Subject: [PATCH] update ui

---
 .../Community/components/DynamicNewsCard.js   | 162 ++++++++----------
 .../DynamicNewsCard/VerticalModeLayout.js     |   6 +-
 .../components/EventCard/EventTimeline.js     |  22 +--
 src/views/Community/index.js                  |   2 +-
 4 files changed, 89 insertions(+), 103 deletions(-)

diff --git a/src/views/Community/components/DynamicNewsCard.js b/src/views/Community/components/DynamicNewsCard.js
index 58a739e7..5c3f5011 100644
--- a/src/views/Community/components/DynamicNewsCard.js
+++ b/src/views/Community/components/DynamicNewsCard.js
@@ -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>
 
       {/* 主体内容 */}
diff --git a/src/views/Community/components/DynamicNewsCard/VerticalModeLayout.js b/src/views/Community/components/DynamicNewsCard/VerticalModeLayout.js
index 14d14459..d0a81707 100644
--- a/src/views/Community/components/DynamicNewsCard/VerticalModeLayout.js
+++ b/src/views/Community/components/DynamicNewsCard/VerticalModeLayout.js
@@ -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
diff --git a/src/views/Community/components/EventCard/EventTimeline.js b/src/views/Community/components/EventCard/EventTimeline.js
index d2bfdce0..28cac251 100644
--- a/src/views/Community/components/EventCard/EventTimeline.js
+++ b/src/views/Community/components/EventCard/EventTimeline.js
@@ -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')}
diff --git a/src/views/Community/index.js b/src/views/Community/index.js
index 08208863..e304f5ab 100644
--- a/src/views/Community/index.js
+++ b/src/views/Community/index.js
@@ -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