update ui

2025-11-13 22:21:59 +08:00
parent 7e0358ede4
commit c6062efb00
3 changed files with 207 additions and 235 deletions
--- a/src/views/Community/components/DynamicNewsCard.js
+++ b/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>
          </HStack>
-          </VStack>

-          <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>

      {/* 主体内容 */}
--- a/src/views/Community/components/DynamicNewsCard/VerticalModeLayout.js
+++ b/src/views/Community/components/DynamicNewsCard/VerticalModeLayout.js
@@ -1,17 +1,15 @@
 // src/views/Community/components/DynamicNewsCard/VerticalModeLayout.js
 // 纵向分栏模式布局组件

-import React, { useState, useEffect } from 'react';
-import { Box, IconButton, Tooltip, VStack, Flex, Center, Text } from '@chakra-ui/react';
-import { ViewIcon, ViewOffIcon, InfoIcon } from '@chakra-ui/icons';
+import React, { useState } from 'react';
+import { Box, VStack, Flex, Center, Text } from '@chakra-ui/react';
+import { InfoIcon } from '@chakra-ui/icons';
 import HorizontalDynamicNewsEventCard from '../EventCard/HorizontalDynamicNewsEventCard';
 import EventDetailScrollPanel from './EventDetailScrollPanel';

 /**
 * 纵向分栏模式布局
- * 支持两种展示模式：
- * - detail（默认）：左侧事件列表 1fr | 右侧详情 2fr
- * - list：左侧事件列表 7fr | 右侧详情 300px
+ * 固定布局：左侧事件列表 3fr | 右侧详情 7fr
 *
 * @param {string} display - CSS display 属性（用于显示/隐藏组件）
 * @param {Array} events - 当前页的事件列表（分页数据）
@@ -32,33 +30,12 @@ const VerticalModeLayout = ({
  getTimelineBoxStyle,
  borderColor,
 }) => {
-  // 布局模式状态：'detail' = 聚焦详情（默认），'list' = 聚焦列表
-  const [layoutMode, setLayoutMode] = useState('detail');
+  // 详情面板重置 key（预留，用于未来功能）
+  const [detailPanelKey] = useState(0);

-  // 详情面板重置 key（切换到 list 模式时改变，强制重新渲染）
-  const [detailPanelKey, setDetailPanelKey] = useState(0);
-
-  // 监听事件选择 - 自动切换到详情模式
-  useEffect(() => {
-    if (selectedEvent) {
-      setLayoutMode('detail');
-    }
-  }, [selectedEvent]);
-
-  // 切换布局模式
-  const toggleLayoutMode = () => {
-    const newMode = layoutMode === 'detail' ? 'list' : 'detail';
-    setLayoutMode(newMode);
-
-    // 如果切换到 list 模式，重置详情面板（收起所有 CollapsibleSection）
-    if (newMode === 'list') {
-      setDetailPanelKey(prev => prev + 1);  // 改变 key，强制重新渲染
-    }
-  };
-
-  // 根据模式计算 flex 比例
-  const leftFlex = layoutMode === 'detail' ? '4' : '6';
-  const rightFlex = layoutMode === 'detail' ? '6' : '4';
+  // 固定布局比例：左侧更窄（3），右侧更宽（7）
+  const leftFlex = '3';
+  const rightFlex = '7';

  return (
    <Flex
@@ -111,7 +88,7 @@ const VerticalModeLayout = ({
                  onToggleFollow={onToggleFollow}
                  timelineStyle={getTimelineBoxStyle()}
                  borderColor={borderColor}
-                  indicatorSize={layoutMode === 'detail' ? 'default' : 'comfortable'}
+                  indicatorSize="default"
                  layout="vertical"
                />
              ))}
@@ -140,25 +117,6 @@ const VerticalModeLayout = ({
        overflow="hidden"
        h="100%"
      >
-        {/* 布局切换按钮 */}
-        <Tooltip
-          label={layoutMode === 'detail' ? '展开事件列表' : '展开详情面板'}
-          placement="left"
-        >
-          <IconButton
-            position="absolute"
-            top={2}
-            right={2}
-            zIndex={9999}
-            size="md"
-            icon={layoutMode === 'detail' ? <ViewOffIcon /> : <ViewIcon />}
-            onClick={toggleLayoutMode}
-            aria-label="切换布局模式"
-            colorScheme="blue"
-            variant="solid"
-          />
-        </Tooltip>
-
        {/* 详情面板 */}
        <EventDetailScrollPanel
          key={detailPanelKey}
--- a/src/views/Community/components/DynamicNewsDetail/StockListItem.js
+++ b/src/views/Community/components/DynamicNewsDetail/StockListItem.js
@@ -125,13 +125,15 @@ const StockListItem = ({
      transition="all 0.2s"
    >
      {/* 单行紧凑布局：名称+涨跌幅 | 分时图 | K线图 | 关联描述 */}
-      <HStack spacing={3} align="center" flexWrap="wrap">
-        {/* 左侧：股票代码 + 名称 + 涨跌幅（垂直排列） */}
+      <HStack spacing={2} align="center" flexWrap="wrap">
+        {/* 左侧：股票信息区 */}
+        <HStack spacing={2} minW="360px" maxW="380px" flexShrink={0}>
+          {/* 股票代码 + 名称 + 涨跌幅 */}
          <VStack
            align="stretch"
            spacing={1}
-          minW="110px"
-          maxW="130px"
+            minW="95px"
+            maxW="110px"
            justify="center"
            flexShrink={0}
          >
@@ -155,7 +157,7 @@ const StockListItem = ({
                  {stock.stock_code}
                </Text>
                <Text
-                fontSize="sm"
+                  fontSize="xs"
                  fontWeight="bold"
                  color={nameColor}
                  noOfLines={1}
@@ -169,7 +171,7 @@ const StockListItem = ({
            </Tooltip>
            <HStack spacing={1} align="center">
              <Text
-              fontSize="lg"
+                fontSize="md"
                fontWeight="bold"
                color={getChangeColor(change)}
              >
@@ -189,15 +191,13 @@ const StockListItem = ({
            </HStack>
          </VStack>

-        {/* 分时图 - 紧凑高度 */}
+          {/* 分时图 - 更紧凑 */}
          <VStack
-          minW="150px"
-          maxW="180px"
-          flex="1"
+            w="115px"
            borderWidth="1px"
            borderColor={useColorModeValue('blue.100', 'blue.700')}
            borderRadius="md"
-          px={2}
+            px={1.5}
            py={1}
            bg={useColorModeValue('blue.50', 'blue.900')}
            onClick={(e) => {
@@ -205,7 +205,7 @@ const StockListItem = ({
              setIsModalOpen(true);
            }}
            cursor="pointer"
-          flexShrink={1}
+            flexShrink={0}
            align="stretch"
            spacing={0}
            h="fit-content"
@@ -217,7 +217,7 @@ const StockListItem = ({
            transition="all 0.2s"
          >
            <Text
-            fontSize="xs"
+              fontSize="10px"
              color={useColorModeValue('blue.700', 'blue.200')}
              fontWeight="semibold"
              whiteSpace="nowrap"
@@ -225,7 +225,7 @@ const StockListItem = ({
            >
              📈 分时
            </Text>
-          <Box h="35px">
+            <Box h="32px">
              <MiniTimelineChart
                stockCode={stock.stock_code}
                eventTime={eventTime}
@@ -233,15 +233,13 @@ const StockListItem = ({
            </Box>
          </VStack>

-        {/* K线图 - 紧凑高度 */}
+          {/* K线图 - 更紧凑 */}
          <VStack
-          minW="150px"
-          maxW="180px"
-          flex="1"
+            w="115px"
            borderWidth="1px"
            borderColor={useColorModeValue('purple.100', 'purple.700')}
            borderRadius="md"
-          px={2}
+            px={1.5}
            py={1}
            bg={useColorModeValue('purple.50', 'purple.900')}
            onClick={(e) => {
@@ -249,7 +247,7 @@ const StockListItem = ({
              setIsModalOpen(true);
            }}
            cursor="pointer"
-          flexShrink={1}
+            flexShrink={0}
            align="stretch"
            spacing={0}
            h="fit-content"
@@ -261,7 +259,7 @@ const StockListItem = ({
            transition="all 0.2s"
          >
            <Text
-            fontSize="xs"
+              fontSize="10px"
              color={useColorModeValue('purple.700', 'purple.200')}
              fontWeight="semibold"
              whiteSpace="nowrap"
@@ -269,13 +267,14 @@ const StockListItem = ({
            >
              📊 日线
            </Text>
-          <Box h="35px">
+            <Box h="32px">
              <MiniKLineChart
                stockCode={stock.stock_code}
                eventTime={eventTime}
              />
            </Box>
          </VStack>
+        </HStack>

        {/* 关联描述 - 升级和降级处理 */}
        {stock.relation_desc && (
@@ -347,11 +346,11 @@ const StockListItem = ({
                  position="relative"
                >
                  {/* 去掉"关联描述"标题 */}
-                  <Collapse in={isDescExpanded} startingHeight={40}>
+                  <Collapse in={isDescExpanded} startingHeight={36}>
                    <Text
-                      fontSize="sm"
+                      fontSize="xs"
                      color={nameColor}
-                      lineHeight="1.6"
+                      lineHeight="1.5"
                    >
                      {relationText}
                    </Text>