更新Company页面的UI为FUI风格

src/views/Community/components/DynamicNews/layouts/MainlineTimelineView.js

@@ -1,5 +1,5 @@
 // src/views/Community/components/DynamicNews/layouts/MainlineTimelineView.js
-// 主线时间轴布局组件 - 按 lv2 概念分组展示事件（横向滚动布局）
+// 主线时间轴布局组件 - 按 lv1/lv2 概念分组展示事件（横向滚动布局）
 
 import React, {
   useState,
@@ -22,16 +22,13 @@ import {
   IconButton,
   Tooltip,
   Button,
-  SimpleGrid,
 } from "@chakra-ui/react";
-import {
-  ChevronDownIcon,
-  ChevronUpIcon,
-  RepeatIcon,
-} from "@chakra-ui/icons";
+import { ChevronDownIcon, ChevronUpIcon, RepeatIcon } from "@chakra-ui/icons";
 import { FiTrendingUp, FiZap } from "react-icons/fi";
+import { Select } from "antd";
 import MiniEventCard from "../../EventCard/MiniEventCard";
 import { getApiBase } from "@utils/apiConfig";
+import "../../SearchFilters/CompactSearchBox.css";
 
 // 固定深色主题颜色
 const COLORS = {
@@ -53,203 +50,215 @@ const EVENTS_PER_LOAD = 12;
 /**
  * 单个主线卡片组件 - 支持懒加载
  */
-const MainlineCard = React.memo(({
-  mainline,
-  colorScheme,
-  isExpanded,
-  onToggle,
-  selectedEvent,
-  onEventSelect,
-}) => {
-  // 懒加载状态
-  const [displayCount, setDisplayCount] = useState(EVENTS_PER_LOAD);
-  const [isLoadingMore, setIsLoadingMore] = useState(false);
+const MainlineCard = React.memo(
+  ({
+    mainline,
+    colorScheme,
+    isExpanded,
+    onToggle,
+    selectedEvent,
+    onEventSelect,
+  }) => {
+    // 懒加载状态
+    const [displayCount, setDisplayCount] = useState(EVENTS_PER_LOAD);
+    const [isLoadingMore, setIsLoadingMore] = useState(false);
 
-  // 重置显示数量当折叠时
-  useEffect(() => {
-    if (!isExpanded) {
-      setDisplayCount(EVENTS_PER_LOAD);
-    }
-  }, [isExpanded]);
+    // 重置显示数量当折叠时
+    useEffect(() => {
+      if (!isExpanded) {
+        setDisplayCount(EVENTS_PER_LOAD);
+      }
+    }, [isExpanded]);
 
-  // 当前显示的事件
-  const displayedEvents = useMemo(() => {
-    return mainline.events.slice(0, displayCount);
-  }, [mainline.events, displayCount]);
+    // 当前显示的事件
+    const displayedEvents = useMemo(() => {
+      return mainline.events.slice(0, displayCount);
+    }, [mainline.events, displayCount]);
 
-  // 是否还有更多
-  const hasMore = displayCount < mainline.events.length;
+    // 是否还有更多
+    const hasMore = displayCount < mainline.events.length;
 
-  // 加载更多
-  const loadMore = useCallback((e) => {
-    e.stopPropagation();
-    setIsLoadingMore(true);
-    setTimeout(() => {
-      setDisplayCount(prev => Math.min(prev + EVENTS_PER_LOAD, mainline.events.length));
-      setIsLoadingMore(false);
-    }, 50);
-  }, [mainline.events.length]);
+    // 加载更多
+    const loadMore = useCallback(
+      (e) => {
+        e.stopPropagation();
+        setIsLoadingMore(true);
+        setTimeout(() => {
+          setDisplayCount((prev) =>
+            Math.min(prev + EVENTS_PER_LOAD, mainline.events.length)
+          );
+          setIsLoadingMore(false);
+        }, 50);
+      },
+      [mainline.events.length]
+    );
 
-  return (
-    <Box
-      bg={COLORS.cardBg}
-      borderRadius="lg"
-      borderWidth="1px"
-      borderColor={COLORS.cardBorderColor}
-      borderTopWidth="3px"
-      borderTopColor={`${colorScheme}.500`}
-      minW={isExpanded ? "400px" : "200px"}
-      maxW={isExpanded ? "500px" : "240px"}
-      h="100%"
-      display="flex"
-      flexDirection="column"
-      transition="all 0.3s ease"
-      flexShrink={0}
-      _hover={{
-        borderColor: `${colorScheme}.400`,
-        boxShadow: "lg"
-      }}
-    >
-      {/* 卡片头部 */}
-      <Flex
-        align="center"
-        justify="space-between"
-        px={3}
-        py={2}
-        cursor="pointer"
-        onClick={onToggle}
-        _hover={{ bg: COLORS.headerHoverBg }}
-        transition="all 0.15s"
-        borderBottomWidth="1px"
-        borderBottomColor={COLORS.cardBorderColor}
+    return (
+      <Box
+        bg={COLORS.cardBg}
+        borderRadius="lg"
+        borderWidth="1px"
+        borderColor={COLORS.cardBorderColor}
+        borderTopWidth="3px"
+        borderTopColor={`${colorScheme}.500`}
+        minW={isExpanded ? "280px" : "200px"}
+        maxW={isExpanded ? "320px" : "240px"}
+        h="100%"
+        display="flex"
+        flexDirection="column"
+        transition="all 0.3s ease"
         flexShrink={0}
+        _hover={{
+          borderColor: `${colorScheme}.400`,
+          boxShadow: "lg",
+        }}
       >
-        <VStack align="start" spacing={0} flex={1} minW={0}>
-          <HStack spacing={2} w="100%">
-            <Text
-              fontWeight="bold"
-              fontSize="sm"
-              color={COLORS.textColor}
-              noOfLines={1}
-              flex={1}
-            >
-              {mainline.lv2_name || "其他"}
-            </Text>
-            {/* 涨跌幅显示 - 在概念名称旁边 */}
-            {mainline.avg_change_pct != null && (
+        {/* 卡片头部 */}
+        <Flex
+          align="center"
+          justify="space-between"
+          px={3}
+          py={2}
+          cursor="pointer"
+          onClick={onToggle}
+          _hover={{ bg: COLORS.headerHoverBg }}
+          transition="all 0.15s"
+          borderBottomWidth="1px"
+          borderBottomColor={COLORS.cardBorderColor}
+          flexShrink={0}
+        >
+          <VStack align="start" spacing={0} flex={1} minW={0}>
+            <HStack spacing={2} w="100%">
               <Text
-                fontSize="sm"
                 fontWeight="bold"
-                color={mainline.avg_change_pct >= 0 ? "#fc8181" : "#68d391"}
+                fontSize="sm"
+                color={COLORS.textColor}
+                noOfLines={1}
+                flex={1}
+              >
+                {mainline.lv2_name || mainline.lv1_name || "其他"}
+              </Text>
+              {/* 涨跌幅显示 - 在概念名称旁边 */}
+              {mainline.avg_change_pct != null && (
+                <Text
+                  fontSize="sm"
+                  fontWeight="bold"
+                  color={mainline.avg_change_pct >= 0 ? "#fc8181" : "#68d391"}
+                  flexShrink={0}
+                >
+                  {mainline.avg_change_pct >= 0 ? "+" : ""}
+                  {mainline.avg_change_pct.toFixed(2)}%
+                </Text>
+              )}
+              <Badge
+                colorScheme={colorScheme}
+                fontSize="xs"
+                borderRadius="full"
+                px={2}
                 flexShrink={0}
               >
-                {mainline.avg_change_pct >= 0 ? "+" : ""}
-                {mainline.avg_change_pct.toFixed(2)}%
-              </Text>
-            )}
-            <Badge
-              colorScheme={colorScheme}
-              fontSize="xs"
-              borderRadius="full"
-              px={2}
-              flexShrink={0}
-            >
-              {mainline.event_count}
-            </Badge>
-          </HStack>
-          {mainline.lv1_name && (
-            <Text fontSize="xs" color={COLORS.secondaryTextColor} noOfLines={1}>
-              {mainline.lv1_name}
-            </Text>
-          )}
-        </VStack>
-        <Icon
-          as={isExpanded ? ChevronUpIcon : ChevronDownIcon}
-          boxSize={4}
-          color={COLORS.secondaryTextColor}
-          ml={2}
-          flexShrink={0}
-        />
-      </Flex>
-
-      {/* 事件列表区域 */}
-      {isExpanded ? (
-        <Box
-          px={2}
-          py={2}
-          flex={1}
-          overflowY="auto"
-          css={{
-            "&::-webkit-scrollbar": { width: "4px" },
-            "&::-webkit-scrollbar-track": {
-              background: COLORS.scrollbarTrackBg,
-            },
-            "&::-webkit-scrollbar-thumb": {
-              background: COLORS.scrollbarThumbBg,
-              borderRadius: "2px",
-            },
-          }}
-        >
-          {/* 事件网格 - 2列布局 */}
-          <SimpleGrid columns={2} spacing={2}>
-            {displayedEvents.map((event) => (
-              <MiniEventCard
-                key={event.id}
-                event={event}
-                isSelected={selectedEvent?.id === event.id}
-                onEventClick={onEventSelect}
-              />
-            ))}
-          </SimpleGrid>
-
-          {/* 加载更多按钮 */}
-          {hasMore && (
-            <Button
-              size="sm"
-              variant="ghost"
-              color={COLORS.secondaryTextColor}
-              onClick={loadMore}
-              isLoading={isLoadingMore}
-              loadingText="加载中..."
-              w="100%"
-              mt={2}
-              _hover={{ bg: COLORS.headerHoverBg }}
-            >
-              加载更多 ({mainline.events.length - displayCount} 条)
-            </Button>
-          )}
-        </Box>
-      ) : (
-        /* 折叠时显示简要信息 */
-        <Box px={3} py={2} flex={1} overflow="hidden">
-          <VStack spacing={1} align="stretch">
-            {mainline.events.slice(0, 4).map((event) => (
+                {mainline.event_count}
+              </Badge>
+            </HStack>
+            {/* 只有当同时存在 lv1_name 和 lv2_name 时才显示副标题 */}
+            {mainline.lv1_name && mainline.lv2_name && (
               <Text
-                key={event.id}
                 fontSize="xs"
                 color={COLORS.secondaryTextColor}
                 noOfLines={1}
-                cursor="pointer"
-                _hover={{ color: COLORS.textColor }}
-                onClick={(e) => {
-                  e.stopPropagation();
-                  onEventSelect?.(event);
-                }}
               >
-                • {event.title}
-              </Text>
-            ))}
-            {mainline.events.length > 4 && (
-              <Text fontSize="xs" color={COLORS.secondaryTextColor}>
-                ... 还有 {mainline.events.length - 4} 条
+                {mainline.lv1_name}
               </Text>
             )}
           </VStack>
-        </Box>
-      )}
-    </Box>
-  );
-});
+          <Icon
+            as={isExpanded ? ChevronUpIcon : ChevronDownIcon}
+            boxSize={4}
+            color={COLORS.secondaryTextColor}
+            ml={2}
+            flexShrink={0}
+          />
+        </Flex>
+
+        {/* 事件列表区域 */}
+        {isExpanded ? (
+          <Box
+            px={2}
+            py={2}
+            flex={1}
+            overflowY="auto"
+            css={{
+              "&::-webkit-scrollbar": { width: "4px" },
+              "&::-webkit-scrollbar-track": {
+                background: COLORS.scrollbarTrackBg,
+              },
+              "&::-webkit-scrollbar-thumb": {
+                background: COLORS.scrollbarThumbBg,
+                borderRadius: "2px",
+              },
+            }}
+          >
+            {/* 事件列表 - 单列布局 */}
+            <VStack spacing={2} align="stretch">
+              {displayedEvents.map((event) => (
+                <MiniEventCard
+                  key={event.id}
+                  event={event}
+                  isSelected={selectedEvent?.id === event.id}
+                  onEventClick={onEventSelect}
+                />
+              ))}
+            </VStack>
+
+            {/* 加载更多按钮 */}
+            {hasMore && (
+              <Button
+                size="sm"
+                variant="ghost"
+                color={COLORS.secondaryTextColor}
+                onClick={loadMore}
+                isLoading={isLoadingMore}
+                loadingText="加载中..."
+                w="100%"
+                mt={2}
+                _hover={{ bg: COLORS.headerHoverBg }}
+              >
+                加载更多 ({mainline.events.length - displayCount} 条)
+              </Button>
+            )}
+          </Box>
+        ) : (
+          /* 折叠时显示简要信息 */
+          <Box px={3} py={2} flex={1} overflow="hidden">
+            <VStack spacing={1} align="stretch">
+              {mainline.events.slice(0, 4).map((event) => (
+                <Text
+                  key={event.id}
+                  fontSize="xs"
+                  color={COLORS.secondaryTextColor}
+                  noOfLines={1}
+                  cursor="pointer"
+                  _hover={{ color: COLORS.textColor }}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onEventSelect?.(event);
+                  }}
+                >
+                  • {event.title}
+                </Text>
+              ))}
+              {mainline.events.length > 4 && (
+                <Text fontSize="xs" color={COLORS.secondaryTextColor}>
+                  ... 还有 {mainline.events.length - 4} 条
+                </Text>
+              )}
+            </VStack>
+          </Box>
+        )}
+      </Box>
+    );
+  }
+);
 
 MainlineCard.displayName = "MainlineCard";
 
@@ -274,6 +283,10 @@ const MainlineTimelineViewComponent = forwardRef(
     const [error, setError] = useState(null);
     const [mainlineData, setMainlineData] = useState(null);
     const [expandedGroups, setExpandedGroups] = useState({});
+    // 概念级别选择: 'lv1' | 'lv2' | 具体的 lv2_id
+    const [groupBy, setGroupBy] = useState("lv2");
+    // lv2 概念选项（从 API 获取）
+    const [lv2Options, setLv2Options] = useState([]);
 
     // 根据主线类型获取配色
     const getColorScheme = useCallback((lv2Name) => {
@@ -363,6 +376,8 @@ const MainlineTimelineViewComponent = forwardRef(
           params.append("recent_days", filters.recent_days);
         if (filters.importance && filters.importance !== "all")
           params.append("importance", filters.importance);
+        // 添加分组方式参数
+        params.append("group_by", groupBy);
 
         const url = `${apiBase}/api/events/mainline?${params.toString()}`;
         console.log("[MainlineTimelineView] 🔄 请求主线数据:", url);
@@ -377,6 +392,7 @@ const MainlineTimelineViewComponent = forwardRef(
           success: result.success,
           mainlineCount: result.data?.mainlines?.length,
           totalEvents: result.data?.total_events,
+          groupBy: result.data?.group_by,
         });
 
         if (result.success) {
@@ -390,10 +406,15 @@ const MainlineTimelineViewComponent = forwardRef(
             mainlines: sortedMainlines,
           });
 
+          // 保存 lv2 选项供下拉框使用
+          if (result.data.lv2_options) {
+            setLv2Options(result.data.lv2_options);
+          }
+
           // 初始化展开状态（默认全部展开）
           const initialExpanded = {};
           sortedMainlines.forEach((mainline) => {
-            initialExpanded[mainline.lv2_id] = true;
+            initialExpanded[mainline.lv2_id || mainline.lv1_id] = true;
           });
           setExpandedGroups(initialExpanded);
         } else {
@@ -405,7 +426,7 @@ const MainlineTimelineViewComponent = forwardRef(
       } finally {
         setLoading(false);
       }
-    }, [display, filters.recent_days, filters.importance]);
+    }, [display, filters.recent_days, filters.importance, groupBy]);
 
     // 初始加载 & 筛选变化时刷新
     useEffect(() => {
@@ -535,7 +556,37 @@ const MainlineTimelineViewComponent = forwardRef(
             )}
           </HStack>
 
-          <HStack spacing={1}>
+          <HStack spacing={2}>
+            {/* 概念级别选择器 */}
+            <Select
+              value={groupBy}
+              onChange={setGroupBy}
+              size="small"
+              style={{
+                width: 160,
+                backgroundColor: "transparent",
+              }}
+              popupClassName="dark-select-dropdown"
+              dropdownStyle={{
+                backgroundColor: "#252a34",
+                borderColor: "#3a3f4b",
+              }}
+              options={[
+                { value: "lv1", label: "按一级概念" },
+                { value: "lv2", label: "按二级概念" },
+                ...(lv2Options.length > 0
+                  ? [
+                      {
+                        label: "具体概念",
+                        options: lv2Options.map((opt) => ({
+                          value: opt.lv2_id,
+                          label: opt.lv2_name,
+                        })),
+                      },
+                    ]
+                  : []),
+              ]}
+            />
             <Tooltip label="全部展开">
               <IconButton
                 icon={<ChevronDownIcon />}
@@ -604,17 +655,22 @@ const MainlineTimelineViewComponent = forwardRef(
               transform: "rotateX(180deg)",
             }}
           >
-            {mainlines.map((mainline) => (
-              <MainlineCard
-                key={mainline.lv2_id || "ungrouped"}
-                mainline={mainline}
-                colorScheme={getColorScheme(mainline.lv2_name)}
-                isExpanded={expandedGroups[mainline.lv2_id]}
-                onToggle={() => toggleGroup(mainline.lv2_id)}
-                selectedEvent={selectedEvent}
-                onEventSelect={onEventSelect}
-              />
-            ))}
+            {mainlines.map((mainline) => {
+              const groupId = mainline.lv2_id || mainline.lv1_id || "ungrouped";
+              const groupName =
+                mainline.lv2_name || mainline.lv1_name || "其他";
+              return (
+                <MainlineCard
+                  key={groupId}
+                  mainline={mainline}
+                  colorScheme={getColorScheme(groupName)}
+                  isExpanded={expandedGroups[groupId]}
+                  onToggle={() => toggleGroup(groupId)}
+                  selectedEvent={selectedEvent}
+                  onEventSelect={onEventSelect}
+                />
+              );
+            })}
           </HStack>
         </Box>
       </Box>

src/views/Community/components/SearchFilters/CompactSearchBox.css

@@ -78,3 +78,30 @@
 .bracket-select .ant-select-arrow {
     color: rgba(255, 255, 255, 0.65) !important;
 }
+
+/* ==================== 主线视图概念选择器 ==================== */
+
+/* 深色主题下拉框 */
+.dark-select-dropdown {
+    background: #252a34 !important;
+    border: 1px solid #3a3f4b !important;
+}
+
+.dark-select-dropdown .ant-select-item {
+    color: #e2e8f0 !important;
+}
+
+.dark-select-dropdown .ant-select-item:hover,
+.dark-select-dropdown .ant-select-item-option-active {
+    background: #2d323e !important;
+}
+
+.dark-select-dropdown .ant-select-item-option-selected {
+    background: #3a3f4b !important;
+    color: #63b3ed !important;
+}
+
+.dark-select-dropdown .ant-select-item-group {
+    color: #a0aec0 !important;
+    font-size: 12px !important;
+}