更新Company页面的UI为FUI风格

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

@@ -288,6 +288,8 @@ const MainlineTimelineViewComponent = forwardRef(
     const [groupBy, setGroupBy] = useState("lv2");
     // 层级选项（从 API 获取）
     const [hierarchyOptions, setHierarchyOptions] = useState({ lv1: [], lv2: [], lv3: [] });
+    // 排序方式: 'event_count' | 'change_desc' | 'change_asc'
+    const [sortBy, setSortBy] = useState("event_count");
 
     // 根据主线类型获取配色
     const getColorScheme = useCallback((lv2Name) => {
@@ -372,11 +374,9 @@ const MainlineTimelineViewComponent = forwardRef(
         const apiBase = getApiBase();
         const params = new URLSearchParams();
 
-        // 添加筛选参数
+        // 添加筛选参数（主线模式只保留时间范围筛选）
         if (filters.recent_days)
           params.append("recent_days", filters.recent_days);
-        if (filters.importance && filters.importance !== "all")
-          params.append("importance", filters.importance);
         // 添加分组方式参数
         params.append("group_by", groupBy);
 
@@ -397,15 +397,8 @@ const MainlineTimelineViewComponent = forwardRef(
         });
 
         if (result.success) {
-          // 按事件数量从多到少排序
+          // 保存原始数据，排序在渲染时根据 sortBy 状态进行
-          const sortedMainlines = [...(result.data.mainlines || [])].sort(
+          setMainlineData(result.data);
-            (a, b) => b.event_count - a.event_count
-          );
-
-          setMainlineData({
-            ...result.data,
-            mainlines: sortedMainlines,
-          });
 
           // 保存层级选项供下拉框使用
           if (result.data.hierarchy_options) {
@@ -414,7 +407,7 @@ const MainlineTimelineViewComponent = forwardRef(
 
           // 初始化展开状态（默认全部展开）
           const initialExpanded = {};
-          sortedMainlines.forEach((mainline) => {
+          (result.data.mainlines || []).forEach((mainline) => {
             const groupId = mainline.group_id || mainline.lv2_id || mainline.lv1_id;
             initialExpanded[groupId] = true;
           });
@@ -428,7 +421,7 @@ const MainlineTimelineViewComponent = forwardRef(
       } finally {
         setLoading(false);
       }
-    }, [display, filters.recent_days, filters.importance, groupBy]);
+    }, [display, filters.recent_days, groupBy]);
 
     // 初始加载 & 筛选变化时刷新
     useEffect(() => {
@@ -517,12 +510,30 @@ const MainlineTimelineViewComponent = forwardRef(
     }
 
     const {
-      mainlines,
+      mainlines: rawMainlines,
       total_events,
       mainline_count,
       ungrouped_count,
     } = mainlineData;
 
+    // 根据排序方式排序主线列表
+    const mainlines = useMemo(() => {
+      if (!rawMainlines) return [];
+      const sorted = [...rawMainlines];
+      switch (sortBy) {
+        case "change_desc":
+          // 按涨跌幅从高到低（涨幅大的在前）
+          return sorted.sort((a, b) => (b.avg_change_pct ?? -999) - (a.avg_change_pct ?? -999));
+        case "change_asc":
+          // 按涨跌幅从低到高（跌幅大的在前）
+          return sorted.sort((a, b) => (a.avg_change_pct ?? 999) - (b.avg_change_pct ?? 999));
+        case "event_count":
+        default:
+          // 按事件数量从多到少
+          return sorted.sort((a, b) => b.event_count - a.event_count);
+      }
+    }, [rawMainlines, sortBy]);
+
     return (
       <Box
         display={display}
@@ -565,7 +576,7 @@ const MainlineTimelineViewComponent = forwardRef(
               onChange={setGroupBy}
               size="small"
               style={{
-                width: 200,
+                width: 180,
                 backgroundColor: "transparent",
               }}
               popupClassName="dark-select-dropdown"
@@ -620,6 +631,26 @@ const MainlineTimelineViewComponent = forwardRef(
                   : []),
               ]}
             />
+            {/* 排序方式选择器 */}
+            <Select
+              value={sortBy}
+              onChange={setSortBy}
+              size="small"
+              style={{
+                width: 140,
+                backgroundColor: "transparent",
+              }}
+              popupClassName="dark-select-dropdown"
+              dropdownStyle={{
+                backgroundColor: "#252a34",
+                borderColor: "#3a3f4b",
+              }}
+              options={[
+                { value: "event_count", label: "按事件数量" },
+                { value: "change_desc", label: "按涨幅↓" },
+                { value: "change_asc", label: "按跌幅↓" },
+              ]}
+            />
             <Tooltip label="全部展开">
               <IconButton
                 icon={<ChevronDownIcon />}