feat: 画面模块可折叠

Author: kqcoxn

src/components/panels/main/LiveScreenPanel.tsx

@@ -1,7 +1,8 @@
 import style from "../../../styles/panels/LiveScreenPanel.module.less";
 
+import { DownOutlined, UpOutlined } from "@ant-design/icons";
 import { memo, useCallback, useEffect, useRef, useState } from "react";
-import { Spin, message } from "antd";
+import { Button, Spin, Tooltip, message } from "antd";
 import classNames from "classnames";
 
 import { useMFWStore } from "../../../stores/mfwStore";
@@ -27,6 +28,7 @@ const LiveScreenPanel = memo(() => {
   const [screenImage, setScreenImage] = useState<string | null>(null);
   const [isLoading, setIsLoading] = useState(true);
   const [hasError, setHasError] = useState(false);
+  const [isCollapsed, setIsCollapsed] = useState(false);
   const isRequestingRef = useRef(false);
   const consecutiveFailuresRef = useRef(0);
 
@@ -46,6 +48,7 @@ const LiveScreenPanel = memo(() => {
     controllerId !== null &&
     !isDisplaced &&
     enableLiveScreen;
+  const shouldRequestScreen = shouldShow && !isCollapsed;
 
   // 注册截图结果监听
   useEffect(() => {
@@ -90,7 +93,7 @@ const LiveScreenPanel = memo(() => {
   }, [controllerId]);
 
   useEffect(() => {
-    if (!shouldShow || !controllerId) {
+    if (!shouldRequestScreen || !controllerId) {
       return;
     }
 
@@ -105,7 +108,12 @@ const LiveScreenPanel = memo(() => {
       clearInterval(timerId);
       isRequestingRef.current = false;
     };
-  }, [shouldShow, liveScreenRefreshRate, controllerId, requestScreenshot]);
+  }, [
+    shouldRequestScreen,
+    liveScreenRefreshRate,
+    controllerId,
+    requestScreenshot,
+  ]);
 
   // 设备断开时清除画面
   useEffect(() => {
@@ -121,33 +129,54 @@ const LiveScreenPanel = memo(() => {
   const panelClass = classNames(
     style.liveScreenPanel,
     shouldShow ? style.visible : style.hidden,
+    isCollapsed && style.collapsed,
   );
 
   return (
     <div className={panelClass}>
       <div className={style.header}>
         <span className={style.title}>实时画面</span>
-        {hasError && <span className={style.status}>截图异常</span>}
-      </div>
-      <div className={style.contentContainer}>
-        {isLoading && !screenImage ? (
-          <div className={style.loadingContainer}>
-            <Spin />
-            <span>正在获取画面...</span>
-          </div>
-        ) : hasError && !screenImage ? (
-          <div className={style.errorContainer}>
-            <span>截图失败，请检查设备连接</span>
-          </div>
-        ) : screenImage ? (
-          <img
-            className={style.screenImage}
-            src={screenImage}
-            alt="设备画面"
-            draggable={false}
-          />
-        ) : null}
+        <div className={style.headerActions}>
+          {hasError && !isCollapsed && (
+            <span className={style.status}>截图异常</span>
+          )}
+          <Tooltip
+            placement="left"
+            title={isCollapsed ? "展开实时画面" : "折叠实时画面"}
+          >
+            <Button
+              aria-expanded={!isCollapsed}
+              aria-label={isCollapsed ? "展开实时画面" : "折叠实时画面"}
+              className={style.collapseButton}
+              icon={isCollapsed ? <DownOutlined /> : <UpOutlined />}
+              size="small"
+              type="text"
+              onClick={() => setIsCollapsed((collapsed) => !collapsed)}
+            />
+          </Tooltip>
+        </div>
       </div>
+      {!isCollapsed && (
+        <div className={style.contentContainer}>
+          {isLoading && !screenImage ? (
+            <div className={style.loadingContainer}>
+              <Spin />
+              <span>正在获取画面...</span>
+            </div>
+          ) : hasError && !screenImage ? (
+            <div className={style.errorContainer}>
+              <span>截图失败，请检查设备连接</span>
+            </div>
+          ) : screenImage ? (
+            <img
+              className={style.screenImage}
+              src={screenImage}
+              alt="设备画面"
+              draggable={false}
+            />
+          ) : null}
+        </div>
+      )}
     </div>
   );
 });

src/components/panels/main/SearchPanel.tsx

@@ -400,7 +400,7 @@ function SearchPanel() {
         <div className={style.devider}>
           <div></div>
         </div>
-        <Tooltip placement="bottom" title="节点列表">
+        <Tooltip placement="left" title="节点列表">
           <DownOutlined
             className={classNames(
               style["search-icon"],

src/data/updateLogs.ts

@@ -109,7 +109,10 @@ export const updateLogs: UpdateLogItem[] = [
     date: "2026-6-4",
     type: "perf",
     updates: {
-      features: ["🎯 节点可显示后续目标节点，可在设置面板切换是否显示"],
+      features: [
+        "🎯 节点可显示后续目标节点，可在设置面板切换是否显示",
+        "📽️ 实时画面模块新增折叠功能",
+      ],
       perfs: [
         "还原连接线路径时会自动进行 external 节点的就近连接重计算",
         "优化资源健康检查相关术语",

src/stores/configStore.ts

@@ -7,7 +7,7 @@ import { encryptApiKey } from "../utils/ai/crypto";
 export const globalConfig = {
   dev: true,
   version: `1.6.1`,
-  betaIteration: 2,
+  betaIteration: 3,
   mfwVersion: "5.10.5",
   protocolVersion: "1.0.5",
 };

src/styles/panels/LiveScreenPanel.module.less

@@ -27,6 +27,10 @@
     transform: translateY(0);
   }
 
+  &.collapsed {
+    min-height: 0;
+  }
+
   .header {
     flex-shrink: 0;
     box-sizing: border-box;
@@ -43,10 +47,28 @@
       color: #262626;
     }
 
+    .headerActions {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
     .status {
       font-size: 12px;
       color: #8c8c8c;
     }
+
+    .collapseButton {
+      width: 24px;
+      height: 24px;
+      border-radius: 4px;
+      color: #595959;
+
+      &:hover {
+        color: #1677ff;
+        background-color: #f0f5ff;
+      }
+    }
   }
 
   .contentContainer {