🐛 修正 ScriptCard 动画问题 (#1234)

* v1.3 修正 ScriptCard 动画问题

* Update src/pages/options/routes/ScriptList/ScriptCard.tsx

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

---------

Co-authored-by: wangyizhi <i@xloli.top>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Author: 3 people

src/pages/options/routes/ScriptList/ScriptCard.tsx

@@ -27,7 +27,6 @@ import type { DragEndEvent } from "@dnd-kit/core";
 import { closestCenter, DndContext, KeyboardSensor, PointerSensor, useSensor, useSensors } from "@dnd-kit/core";
 import { rectSwappingStrategy, SortableContext, sortableKeyboardCoordinates, useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
-import { useAppContext } from "@App/pages/store/AppContext";
 import { type SearchFilterRequest } from "./SearchFilter";
 import type { SearchType } from "@App/app/service/service_worker/types";
 
@@ -410,28 +409,7 @@ const ScriptCard = ({
   handleRunStop,
 }: ScriptCardProps) => {
   const { t } = useTranslation();
-  const { guideMode } = useAppContext();
-
-  // 如果是引导模式，且没有脚本，则创建一条演示数据
-  const list = useMemo(
-    () =>
-      guideMode && scriptList.length === 0
-        ? [
-            {
-              uuid: "demo-uuid-1234",
-              name: "Demo Script",
-              namespace: "demo",
-              sort: 0,
-              createtime: Date.now(),
-              checktime: Date.now(),
-              metadata: {},
-              type: SCRIPT_TYPE_NORMAL,
-              favorite: [{ match: "Example", icon: "", website: "https://example.com" }],
-            } as ScriptLoading,
-          ]
-        : scriptList,
-    [guideMode, scriptList]
-  );
+
   // Sensors — move them here (or even higher in parent) so they're stable
   const sensors = useSensors(
     useSensor(PointerSensor, {
@@ -442,8 +420,8 @@ const ScriptCard = ({
     })
   );
 
-  // 故意生成一个字串 避免因 list 的参考频繁改动而导致 ctx 的 sortableIds 参考出现非预期更改。
-  const sortableIdsString = list?.map((s) => s.uuid).join(",") || "";
+  // 基于 scriptList 的 uuid 生成稳定字串，避免因 scriptList 引用频繁变动导致 ctx 内部 sortableIds 参考出现非预期更改。
+  const sortableIdsString = scriptList?.map((s) => s.uuid).join(",") || "";
 
   // sortableIds 应该只包含 ID 字符串数组，而不是对象数组，
   // 且确保 items 属性接收的是纯 ID 列表，这样 dnd-kit 内部对比更高效。
@@ -529,7 +507,7 @@ const ScriptCard = ({
           padding: "16px",
         }}
       >
-        {list.length === 0 ? (
+        {scriptList.length === 0 ? (
           loadingList ? (
             <div
               style={{
@@ -566,7 +544,7 @@ const ScriptCard = ({
                   gap: "16px",
                 }}
               >
-                {list.map((item) => (
+                {scriptList.map((item) => (
                   <ScriptCardItem
                     key={item.uuid}
                     item={item}

src/pages/options/routes/ScriptList/index.tsx

@@ -36,6 +36,7 @@ import { SearchFilter, type SearchFilterRequest } from "./SearchFilter";
 import type { ScriptLoading } from "@App/pages/store/features/script";
 
 import { type TSelectFilter, useScriptDataManagement, useScriptFilters } from "./hooks";
+import { useAppContext } from "@App/pages/store/AppContext";
 
 type TableProps = React.ComponentProps<typeof ScriptTable>;
 type CardProps = React.ComponentProps<typeof ScriptCard>;
@@ -51,12 +52,28 @@ const MainContent = memo(({ viewMode, ...props }: { viewMode: "table" | "card" }
 
 MainContent.displayName = "MainContent";
 
+// 一条演示数据
+const guideModeScriptList = [
+  {
+    uuid: "demo-uuid-1234",
+    name: "Demo Script",
+    namespace: "demo",
+    sort: 0,
+    createtime: Date.now(),
+    checktime: Date.now(),
+    metadata: {},
+    type: SCRIPT_TYPE_NORMAL,
+    favorite: [{ match: "Example", icon: "", website: "https://example.com" }],
+  } as ScriptLoading,
+];
+
 /**
  * 主组件
  */
 function ScriptList() {
   const { t } = useTranslation();
   const [usp] = useSearchParams();
+  const { guideMode } = useAppContext();
 
   // 1. 基础 UI 状态
   const [sidebarOpen, setSidebarOpen] = useState(() => localStorage.getItem("script-list-sidebar") === "1");
@@ -190,7 +207,11 @@ function ScriptList() {
   // 6. 执行过滤逻辑
   useEffect(() => {
     const { status, type, tags, source } = selectedFilters;
-    const list = scriptList.filter((s) => {
+
+    // 如果是引导模式，且没有脚本，则使用演示数据
+    const targetList = guideMode && scriptList.length === 0 ? guideModeScriptList : scriptList;
+
+    const list = targetList.filter((s) => {
       if (status !== null) {
         if (status === SCRIPT_STATUS_ENABLE || status === SCRIPT_STATUS_DISABLE) {
           if (s.status !== status) return false;
@@ -221,7 +242,7 @@ function ScriptList() {
     return () => {
       enableKeywordSearch = false;
     };
-  }, [scriptList, selectedFilters, stats, searchRequest]);
+  }, [guideMode, scriptList, selectedFilters, stats, searchRequest]);
 
   // 处理 URL 传参打开配置
   useEffect(() => {