diff --git a/src/pages/options/routes/ScriptList/ScriptCard.tsx b/src/pages/options/routes/ScriptList/ScriptCard.tsx index df1f02a3f..eec90d932 100644 --- a/src/pages/options/routes/ScriptList/ScriptCard.tsx +++ b/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 ? (
- {list.map((item) => ( + {scriptList.map((item) => ( ; type CardProps = React.ComponentProps; @@ -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(() => {