From 009d837efe299513addf402cfa5a47c4d866b98c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=81=B5=E5=BA=94?= <lingying@coze.email>
Date: Wed, 8 Jul 2026 14:26:48 +0800
Subject: [PATCH] =?UTF-8?q?fix(P0-2):=20=E4=BF=AE=E5=A4=8Dlint=E8=AD=A6?=
 =?UTF-8?q?=E5=91=8A=EF=BC=8CavailableTypes=E7=94=A8useMemo=E5=8C=85?=
 =?UTF-8?q?=E8=A3=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/TimelinePanel.tsx               | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/apps/web/src/pages/editing-planner/components/TimelinePanel.tsx b/apps/web/src/pages/editing-planner/components/TimelinePanel.tsx
index 867cb6abb..b0e3c1584 100755
--- a/apps/web/src/pages/editing-planner/components/TimelinePanel.tsx
+++ b/apps/web/src/pages/editing-planner/components/TimelinePanel.tsx
@@ -9,6 +9,7 @@ import React, {
   useCallback,
   useEffect,
   useLayoutEffect,
+  useMemo,
 } from "react";
 import type { ClipData, ClipType } from "../types";
 
@@ -59,12 +60,15 @@ const TimelinePanel: React.FC<TimelinePanelProps> = ({
   const [addDuration, setAddDuration] = useState<number>(5);
 
   /* ── 根据模式决定可选类型 ── */
-  const availableTypes: ClipType[] =
-    currentMode === "voice_over"
-      ? ["voice"]
-      : currentMode === "pip"
-        ? ["pip"]
-        : ["voice", "pip"]; // voice_pip 或默认
+  const availableTypes: ClipType[] = useMemo(
+    () =>
+      currentMode === "voice_over"
+        ? ["voice"]
+        : currentMode === "pip"
+          ? ["pip"]
+          : ["voice", "pip"], // voice_pip 或默认
+    [currentMode],
+  );
 
  
   /* ── 模式切换时自动更新默认添加类型 ── */
@@ -72,7 +76,7 @@ const TimelinePanel: React.FC<TimelinePanelProps> = ({
     if (!availableTypes.includes(addType)) {
       setAddType(availableTypes[0]);
     }
-  }, [currentMode]);
+  }, [currentMode, addType, availableTypes]);
   /* ── 面板尺寸（宽度固定，高度由 useLayoutEffect 实测） ── */
   const PICKER_W = 240; // 面板宽度（与 CSS 一致）
   const GAP = 6; // 面板与"+"卡片的间距