Function ScriptList

src/pages/options/routes/ScriptList/index.tsx:73–300

* 主组件

()

 * 主组件
 */
function ScriptList() {
  const { t } = useTranslation();
  const [usp] = useSearchParams();
  const { guideMode } = useAppContext();

  // 1. 基础 UI 状态
  const [sidebarOpen, setSidebarOpen] = useState(() => localStorage.getItem("script-list-sidebar") === "1");
  const [viewMode, setViewMode] = useState<"table" | "card">(() => {
    const saved = localStorage.getItem("script-list-view-mode");
    if (saved === "table" || saved === "card") return saved;
    return window.screen.width < 1280 ? "card" : "table";
  });
  const [selectedFilters, setSelectedFilters] = useState<TSelectFilter>({
    status: null,
    type: null,
    tags: null,
    source: null,
  });
  const [searchRequest, setSearchRequest] = useState<SearchFilterRequest>({ keyword: "", type: "auto" });

  // 2. 弹窗状态 (独立状态，不会引起 MainContent 重绘)
  const [userConfig, setUserConfig] = useState<{
    script: Script;
    userConfig: UserConfig;
    values: Record<string, any>;
  }>();
  const [cloudScript, setCloudScript] = useState<Script>();

  // 3. 数据与统计 Hook
  const { scriptList, setScriptList, loadingList } = useScriptDataManagement();
  const { stats, filterItems } = useScriptFilters(scriptList, selectedFilters, searchRequest, t);
  const [filterScriptList, setFilterScriptList] = useState<ScriptLoading[]>([]);

  // 4. 更新函数 (useCallback 保证引用稳定)
  const updateScripts = useCallback(
    (uuids: string[], data: Partial<ScriptLoading>) => {
      const set = new Set(uuids);
      setScriptList((list) => {
        let changed = false;
        const newList = list.map((s) => {
          if (set.has(s.uuid)) {
            let hasDiff = false;
            const next = { ...s };
            for (const [k, v] of Object.entries(data)) {
              if ((s as any)[k] !== v) {
                hasDiff = true;
                (next as any)[k] = v;
              }
            }
            if (hasDiff) {
              changed = true;
              return next;
            }
          }
          return s;
        });
        return changed ? newList : list;
      });