From 872207284519885e452c797b155c5188176a79bf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E4=B8=80=E4=B9=8B?= <yz@ggnb.top>
Date: Tue, 25 Nov 2025 14:52:14 +0800
Subject: [PATCH 01/13] =?UTF-8?q?=E5=A4=84=E7=90=86=E6=90=9C=E7=B4=A2?=
 =?UTF-8?q?=E4=BA=A4=E4=BA=92=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../options/routes/ScriptList/ScriptTable.tsx | 62 +++++++++++---
 .../options/routes/ScriptList/components.tsx  | 85 +++++++++----------
 src/pages/options/routes/ScriptList/hooks.tsx |  6 +-
 src/pages/options/routes/ScriptList/index.tsx |  6 +-
 4 files changed, 96 insertions(+), 63 deletions(-)

diff --git a/src/pages/options/routes/ScriptList/ScriptTable.tsx b/src/pages/options/routes/ScriptList/ScriptTable.tsx
index 4ac0f9a02..0aa7f05cf 100644
--- a/src/pages/options/routes/ScriptList/ScriptTable.tsx
+++ b/src/pages/options/routes/ScriptList/ScriptTable.tsx
@@ -56,12 +56,16 @@ import { systemConfig } from "@App/pages/store/global";
 import { i18nName } from "@App/locales/locales";
 import { hashColor, ScriptIcons } from "../utils";
 import type { ScriptLoading } from "@App/pages/store/features/script";
-import { requestEnableScript, pinToTop, scriptClient, synchronizeClient } from "@App/pages/store/features/script";
+import {
+  requestEnableScript,
+  pinToTop,
+  scriptClient,
+  synchronizeClient,
+  requestFilterResult,
+} from "@App/pages/store/features/script";
 import { getCombinedMeta } from "@App/app/service/service_worker/utils";
 import { parseTags } from "@App/app/repo/metadata";
 import { EnableSwitch, HomeCell, MemoizedAvatar, ScriptSearchField, SourceCell, UpdateTimeCell } from "./components";
-import type { SetSearchRequest } from "./hooks";
-import type { SearchType } from "@App/app/service/service_worker/types";
 
 type ListType = ScriptLoading;
 
@@ -420,8 +424,6 @@ interface ScriptTableProps {
   updateScripts: (uuids: string[], data: Partial<Script | ScriptLoading>) => void;
   setUserConfig: (config: { script: Script; userConfig: UserConfig; values: { [key: string]: any } }) => void;
   setCloudScript: (script: Script) => void;
-  searchRequest: { keyword: string; type: SearchType };
-  setSearchRequest: SetSearchRequest;
   handleDelete: (item: ScriptLoading) => void;
   handleConfig: (
     item: ScriptLoading,
@@ -440,8 +442,6 @@ export const ScriptTable = ({
   updateScripts,
   setUserConfig,
   setCloudScript,
-  searchRequest,
-  setSearchRequest,
   handleDelete,
   handleConfig,
   handleRunStop,
@@ -455,6 +455,8 @@ export const ScriptTable = ({
   const navigate = useNavigate();
   const [savedWidths, setSavedWidths] = useState<{ [key: string]: number } | null>(null);
 
+  const filterCache: Map<string, any> = useMemo(() => new Map(), []);
+
   const columns: ColumnProps[] = useMemo(
     () =>
       [
@@ -494,21 +496,56 @@ export const ScriptTable = ({
           dataIndex: "name",
           sorter: (a, b) => a.name.localeCompare(b.name),
           filterIcon: <IconSearch />,
-          filterDropdown: ({ confirm }: any) => {
+          filterDropdown: ({ filterKeys, setFilterKeys, confirm }: any) => {
+            if (!filterKeys?.length) {
+              filterKeys = [{ type: "auto", keyword: "" }];
+            }
             return (
               <div className="arco-table-custom-filter flex flex-row gap-2">
                 <ScriptSearchField
                   t={t}
-                  defaultValue={searchRequest}
+                  inputRef={inputRef}
+                  defaultValue={filterKeys[0]}
+                  onChange={(req) => {
+                    requestFilterResult({ value: req.keyword }).then((res) => {
+                      filterCache.clear();
+                      if (res && Array.isArray(res)) {
+                        for (const entry of res) {
+                          filterCache.set(entry.uuid, {
+                            code: entry.code,
+                            name: entry.name,
+                            auto: entry.auto,
+                          });
+                        }
+                      }
+                      setFilterKeys([{ type: req.type, keyword: req.keyword }]);
+                    });
+                  }}
                   onSearch={(req) => {
-                    setSearchRequest(req);
+                    if (req.bySelect) return;
                     confirm();
                   }}
-                  inputRef={inputRef}
                 />
               </div>
             );
           },
+          onFilter(value, row) {
+            if (!value || !value.keyword) {
+              return true;
+            }
+            const result = filterCache.get(row.uuid);
+            if (!result) return false;
+            switch (value.type) {
+              case "auto":
+                return result.auto;
+              case "script_code":
+                return result.code;
+              case "name":
+                return result.name;
+              default:
+                return false;
+            }
+          },
           onFilterDropdownVisibleChange: (visible) => {
             if (visible) {
               setTimeout(() => inputRef.current!.focus(), 1);
@@ -620,8 +657,7 @@ export const ScriptTable = ({
       t,
       sidebarOpen,
       updateScripts,
-      searchRequest,
-      setSearchRequest,
+      filterCache,
       navigate,
       setSidebarOpen,
       setViewMode,
diff --git a/src/pages/options/routes/ScriptList/components.tsx b/src/pages/options/routes/ScriptList/components.tsx
index a44993c33..5acd38a2d 100644
--- a/src/pages/options/routes/ScriptList/components.tsx
+++ b/src/pages/options/routes/ScriptList/components.tsx
@@ -184,50 +184,47 @@ UpdateTimeCell.displayName = "UpdateTimeCell";
 
 interface ScriptSearchFieldProps {
   t: TFunction<"translation", undefined>;
-  defaultValue: { keyword: string; type: SearchType };
-  onSearch?: (req: { keyword: string; type: SearchType }) => void;
+  defaultValue?: { keyword: string; type: SearchType };
+  onChange?: (value: { keyword: string; type: SearchType }) => void;
+  onSearch?: (req: { keyword: string; type: SearchType; bySelect: boolean }) => void;
   inputRef?: React.RefObject<RefInputType>;
 }
 
-export const ScriptSearchField = React.memo(
-  ({ t, defaultValue, onSearch, inputRef }: ScriptSearchFieldProps) => {
-    const [keyword, setKeyword] = React.useState(defaultValue?.keyword || "");
-    const [type, setType] = React.useState<SearchType>(defaultValue?.type || "auto");
-    return (
-      <Space direction="horizontal">
-        <Select
-          className="flex-1"
-          triggerProps={{ autoAlignPopupWidth: false, autoAlignPopupMinWidth: true, position: "bl" }}
-          size="small"
-          value={type}
-          onChange={(value) => {
-            setType(value as SearchType);
-            onSearch?.({ keyword, type: value as SearchType });
-          }}
-        >
-          <Select.Option value="auto">{t("auto")}</Select.Option>
-          <Select.Option value="name">{t("name")}</Select.Option>
-          <Select.Option value="script_code">{t("script_code")}</Select.Option>
-        </Select>
-        <Input.Search
-          ref={inputRef}
-          size="small"
-          searchButton
-          style={{ width: 280 }}
-          value={keyword}
-          placeholder={t("enter_search_value", { search: `${t("name")}/${t("script_code")}` })!}
-          onChange={(value) => {
-            setKeyword(value);
-          }}
-          onSearch={(value) => {
-            onSearch?.({ keyword: value, type });
-          }}
-        />
-      </Space>
-    );
-  },
-  (prevProps, nextProps) => {
-    return prevProps.t === nextProps.t && prevProps.defaultValue === nextProps.defaultValue;
-  }
-);
-ScriptSearchField.displayName = "ScriptSearchField";
+export const ScriptSearchField = ({ t, defaultValue, onChange, onSearch, inputRef }: ScriptSearchFieldProps) => {
+  const [keyword, setKeyword] = React.useState(defaultValue?.keyword || "");
+  const [type, setType] = React.useState<SearchType>(defaultValue?.type || "auto");
+  return (
+    <Space direction="horizontal">
+      <Select
+        className="flex-1"
+        triggerProps={{ autoAlignPopupWidth: false, autoAlignPopupMinWidth: true, position: "bl" }}
+        size="small"
+        value={type}
+        onChange={(value) => {
+          setType(value as SearchType);
+          onChange?.({ keyword, type: value as SearchType });
+          onSearch?.({ keyword, type: value as SearchType, bySelect: true });
+        }}
+      >
+        <Select.Option value="auto">{t("auto")}</Select.Option>
+        <Select.Option value="name">{t("name")}</Select.Option>
+        <Select.Option value="script_code">{t("script_code")}</Select.Option>
+      </Select>
+      <Input.Search
+        ref={inputRef}
+        size="small"
+        searchButton
+        style={{ width: 280 }}
+        value={keyword}
+        placeholder={t("enter_search_value", { search: `${t("name")}/${t("script_code")}` })!}
+        onChange={(value) => {
+          onChange?.({ keyword: value, type });
+          setKeyword(value);
+        }}
+        onSearch={(value) => {
+          onSearch?.({ keyword: value, type, bySelect: false });
+        }}
+      />
+    </Space>
+  );
+};
diff --git a/src/pages/options/routes/ScriptList/hooks.tsx b/src/pages/options/routes/ScriptList/hooks.tsx
index 6694bd766..a8babaee6 100644
--- a/src/pages/options/routes/ScriptList/hooks.tsx
+++ b/src/pages/options/routes/ScriptList/hooks.tsx
@@ -551,9 +551,9 @@ export function useScriptSearch() {
         if (res && Array.isArray(res)) {
           for (const entry of res) {
             cacheMap.set(entry.uuid, {
-              code: entry.code === true,
-              name: entry.name === true,
-              auto: entry.auto === true,
+              code: entry.code,
+              name: entry.name,
+              auto: entry.auto,
             });
           }
         }
diff --git a/src/pages/options/routes/ScriptList/index.tsx b/src/pages/options/routes/ScriptList/index.tsx
index 05d9d347e..21a19a0dc 100644
--- a/src/pages/options/routes/ScriptList/index.tsx
+++ b/src/pages/options/routes/ScriptList/index.tsx
@@ -21,6 +21,7 @@ function ScriptList() {
   const [cloudScript, setCloudScript] = useState<Script>();
   const {
     loadingList,
+    scriptList,
     filterScriptList,
     scriptListSortOrder,
     updateScripts,
@@ -92,7 +93,8 @@ function ScriptList() {
             {viewMode === "table" ? (
               <ScriptTable
                 loadingList={loadingList}
-                scriptList={filterScriptList}
+                // 表格传入全部脚本，由表格组件处理过滤和排序
+                scriptList={scriptList}
                 scriptListSortOrder={scriptListSortOrder}
                 updateScripts={updateScripts}
                 sidebarOpen={sidebarOpen}
@@ -100,8 +102,6 @@ function ScriptList() {
                 setViewMode={setViewMode}
                 setUserConfig={setUserConfig}
                 setCloudScript={setCloudScript}
-                searchRequest={searchRequest}
-                setSearchRequest={setSearchRequest}
                 handleDelete={handleDelete}
                 handleConfig={handleConfig}
                 handleRunStop={handleRunStop}

From 04253ff6464ccd7c791b25391d0479ba011fb914 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E4=B8=80=E4=B9=8B?= <yz@ggnb.top>
Date: Tue, 25 Nov 2025 16:13:06 +0800
Subject: [PATCH 02/13] =?UTF-8?q?=E5=A5=87=E6=80=AA=E7=9A=84=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/options/routes/ScriptList/ScriptTable.tsx | 3 ++-
 src/pages/options/routes/ScriptList/components.tsx  | 7 ++++++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/pages/options/routes/ScriptList/ScriptTable.tsx b/src/pages/options/routes/ScriptList/ScriptTable.tsx
index 0aa7f05cf..97b4887c2 100644
--- a/src/pages/options/routes/ScriptList/ScriptTable.tsx
+++ b/src/pages/options/routes/ScriptList/ScriptTable.tsx
@@ -507,6 +507,7 @@ export const ScriptTable = ({
                   inputRef={inputRef}
                   defaultValue={filterKeys[0]}
                   onChange={(req) => {
+                    filterKeys[0] = req;
                     requestFilterResult({ value: req.keyword }).then((res) => {
                       filterCache.clear();
                       if (res && Array.isArray(res)) {
@@ -518,7 +519,7 @@ export const ScriptTable = ({
                           });
                         }
                       }
-                      setFilterKeys([{ type: req.type, keyword: req.keyword }]);
+                      setFilterKeys([req]);
                     });
                   }}
                   onSearch={(req) => {
diff --git a/src/pages/options/routes/ScriptList/components.tsx b/src/pages/options/routes/ScriptList/components.tsx
index 5acd38a2d..56ddee3a0 100644
--- a/src/pages/options/routes/ScriptList/components.tsx
+++ b/src/pages/options/routes/ScriptList/components.tsx
@@ -216,7 +216,12 @@ export const ScriptSearchField = ({ t, defaultValue, onChange, onSearch, inputRe
         searchButton
         style={{ width: 280 }}
         value={keyword}
-        placeholder={t("enter_search_value", { search: `${t("name")}/${t("script_code")}` })!}
+        placeholder={
+          t("enter_search_value", {
+            search:
+              type == "auto" ? `${t("name")}/${t("script_code")}` : type === "name" ? t("name") : t("script_code"),
+          })!
+        }
         onChange={(value) => {
           onChange?.({ keyword: value, type });
           setKeyword(value);

From bc0a86f789906239c41af899c4175f4eacadeb0c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E4=B8=80=E4=B9=8B?= <yz@ggnb.top>
Date: Tue, 25 Nov 2025 17:10:40 +0800
Subject: [PATCH 03/13] =?UTF-8?q?=E5=A4=84=E7=90=86=E8=BF=99=E4=B8=AA?=
 =?UTF-8?q?=E7=A5=9E=E5=A5=87=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/options/routes/ScriptList/ScriptTable.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/pages/options/routes/ScriptList/ScriptTable.tsx b/src/pages/options/routes/ScriptList/ScriptTable.tsx
index 97b4887c2..a6cfe0e00 100644
--- a/src/pages/options/routes/ScriptList/ScriptTable.tsx
+++ b/src/pages/options/routes/ScriptList/ScriptTable.tsx
@@ -507,7 +507,8 @@ export const ScriptTable = ({
                   inputRef={inputRef}
                   defaultValue={filterKeys[0]}
                   onChange={(req) => {
-                    filterKeys[0] = req;
+                    filterKeys[0].type = req.type;
+                    filterKeys[0].keyword = req.keyword;
                     requestFilterResult({ value: req.keyword }).then((res) => {
                       filterCache.clear();
                       if (res && Array.isArray(res)) {
@@ -519,7 +520,7 @@ export const ScriptTable = ({
                           });
                         }
                       }
-                      setFilterKeys([req]);
+                      setFilterKeys([...filterKeys]);
                     });
                   }}
                   onSearch={(req) => {

From babec4a233b283a41748fe9b5ea1150252678f1f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E4=B8=80=E4=B9=8B?= <yz@ggnb.top>
Date: Tue, 25 Nov 2025 17:11:24 +0800
Subject: [PATCH 04/13] =?UTF-8?q?=E5=8A=A0=E6=B3=A8=E9=87=8A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/options/routes/ScriptList/ScriptTable.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/pages/options/routes/ScriptList/ScriptTable.tsx b/src/pages/options/routes/ScriptList/ScriptTable.tsx
index a6cfe0e00..9d5983c25 100644
--- a/src/pages/options/routes/ScriptList/ScriptTable.tsx
+++ b/src/pages/options/routes/ScriptList/ScriptTable.tsx
@@ -507,6 +507,7 @@ export const ScriptTable = ({
                   inputRef={inputRef}
                   defaultValue={filterKeys[0]}
                   onChange={(req) => {
+                    // 神奇的问题 #1023
                     filterKeys[0].type = req.type;
                     filterKeys[0].keyword = req.keyword;
                     requestFilterResult({ value: req.keyword }).then((res) => {

From b90e951b29c843b512f88a4949e9042579b35467 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E4=B8=80=E4=B9=8B?= <yz@ggnb.top>
Date: Tue, 25 Nov 2025 17:15:11 +0800
Subject: [PATCH 05/13] =?UTF-8?q?=E5=8A=A0key=E5=8E=BB=E6=8E=89warn?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/options/routes/utils.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/pages/options/routes/utils.tsx b/src/pages/options/routes/utils.tsx
index 217f10878..d69c4151e 100644
--- a/src/pages/options/routes/utils.tsx
+++ b/src/pages/options/routes/utils.tsx
@@ -150,7 +150,13 @@ export function ListHomeRender({ script }: { script: Script }) {
     return null;
   }
 
-  return <Space size="mini">{item}</Space>;
+  return (
+    <Space size="mini">
+      {item.map((i, index) => (
+        <i key={index}>{i}</i>
+      ))}
+    </Space>
+  );
 }
 
 export type ScriptIconsProps = {

From 631e0866e7223db45f311a78219f76f52aa0843e Mon Sep 17 00:00:00 2001
From: cyfung1031 <44498510+cyfung1031@users.noreply.github.com>
Date: Wed, 26 Nov 2025 20:27:40 +0900
Subject: [PATCH 06/13] onFilterDropdownVisibleChange  + inputRef -> autoFocus

---
 src/pages/components/ScriptResource/index.tsx      | 11 ++---------
 src/pages/components/ScriptStorage/index.tsx       | 11 ++---------
 src/pages/options/routes/ScriptList/components.tsx |  7 +++----
 src/pages/options/routes/SubscribeList.tsx         | 11 ++---------
 4 files changed, 9 insertions(+), 31 deletions(-)

diff --git a/src/pages/components/ScriptResource/index.tsx b/src/pages/components/ScriptResource/index.tsx
index 5a2a6505f..3acc82f9c 100644
--- a/src/pages/components/ScriptResource/index.tsx
+++ b/src/pages/components/ScriptResource/index.tsx
@@ -4,10 +4,9 @@ import { ResourceClient } from "@App/app/service/service_worker/client";
 import { message } from "@App/pages/store/global";
 import { base64ToBlob } from "@App/pkg/utils/utils";
 import { Button, Drawer, Input, Message, Popconfirm, Space, Table } from "@arco-design/web-react";
-import type { RefInputType } from "@arco-design/web-react/es/Input/interface";
 import type { ColumnProps } from "@arco-design/web-react/es/Table";
 import { IconDelete, IconDownload, IconSearch } from "@arco-design/web-react/icon";
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 
 type ResourceListItem = {
@@ -21,7 +20,6 @@ const ScriptResource: React.FC<{
   onCancel: () => void;
 }> = ({ script, visible, onCancel, onOk }) => {
   const [data, setData] = useState<ResourceListItem[]>([]);
-  const inputRef = useRef<RefInputType>(null);
   const { t } = useTranslation();
   const resourceClient = new ResourceClient(message);
 
@@ -53,8 +51,8 @@ const ScriptResource: React.FC<{
         return (
           <div className="arco-table-custom-filter">
             <Input.Search
-              ref={inputRef}
               searchButton
+              autoFocus
               placeholder={t("enter_key")!}
               value={filterKeys[0] || ""}
               onChange={(value) => {
@@ -68,11 +66,6 @@ const ScriptResource: React.FC<{
         );
       },
       onFilter: (value, row) => !value || row.key.includes(value),
-      onFilterDropdownVisibleChange: (v) => {
-        if (v) {
-          setTimeout(() => inputRef.current!.focus(), 1);
-        }
-      },
     },
     {
       title: t("type"),
diff --git a/src/pages/components/ScriptStorage/index.tsx b/src/pages/components/ScriptStorage/index.tsx
index 2f25446b9..1bce8a33e 100644
--- a/src/pages/components/ScriptStorage/index.tsx
+++ b/src/pages/components/ScriptStorage/index.tsx
@@ -2,10 +2,9 @@ import type { Script } from "@App/app/repo/scripts";
 import { valueClient } from "@App/pages/store/features/script";
 import { valueType } from "@App/pkg/utils/utils";
 import { Button, Drawer, Form, Input, Message, Modal, Popconfirm, Select, Space, Table } from "@arco-design/web-react";
-import type { RefInputType } from "@arco-design/web-react/es/Input/interface";
 import type { ColumnProps } from "@arco-design/web-react/es/Table";
 import { IconDelete, IconEdit, IconSearch } from "@arco-design/web-react/icon";
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 
 const FormItem = Form.Item;
@@ -23,7 +22,6 @@ const ScriptStorage: React.FC<{
 }> = ({ script, visible, onCancel, onOk }) => {
   const [data, setData] = useState<ValueModel[]>([]);
   const [rawData, setRawData] = useState<{ [key: string]: any }>({});
-  const inputRef = useRef<RefInputType>(null);
   const [currentValue, setCurrentValue] = useState<ValueModel>();
   const [visibleEdit, setVisibleEdit] = useState(false);
   const [isEdit, setIsEdit] = useState(false);
@@ -93,8 +91,8 @@ const ScriptStorage: React.FC<{
         return (
           <div className="arco-table-custom-filter">
             <Input.Search
-              ref={inputRef}
               searchButton
+              autoFocus
               placeholder={t("enter_key")!}
               value={filterKeys[0] || ""}
               onChange={(value) => {
@@ -108,11 +106,6 @@ const ScriptStorage: React.FC<{
         );
       },
       onFilter: (value, row) => !value || row.key.includes(value),
-      onFilterDropdownVisibleChange: (v) => {
-        if (v) {
-          setTimeout(() => inputRef.current!.focus(), 1);
-        }
-      },
     },
     {
       title: t("value"),
diff --git a/src/pages/options/routes/ScriptList/components.tsx b/src/pages/options/routes/ScriptList/components.tsx
index 56ddee3a0..28d51ba5a 100644
--- a/src/pages/options/routes/ScriptList/components.tsx
+++ b/src/pages/options/routes/ScriptList/components.tsx
@@ -11,7 +11,6 @@ import { ListHomeRender } from "../utils";
 import { IconEdit, IconLink, IconUserAdd } from "@arco-design/web-react/icon";
 import type { SearchType } from "@App/app/service/service_worker/types";
 import type { TFunction } from "i18next";
-import type { RefInputType } from "@arco-design/web-react/es/Input";
 
 export const EnableSwitch = React.memo(
   ({
@@ -187,10 +186,10 @@ interface ScriptSearchFieldProps {
   defaultValue?: { keyword: string; type: SearchType };
   onChange?: (value: { keyword: string; type: SearchType }) => void;
   onSearch?: (req: { keyword: string; type: SearchType; bySelect: boolean }) => void;
-  inputRef?: React.RefObject<RefInputType>;
+  autoFocus?: boolean;
 }
 
-export const ScriptSearchField = ({ t, defaultValue, onChange, onSearch, inputRef }: ScriptSearchFieldProps) => {
+export const ScriptSearchField = ({ t, defaultValue, onChange, onSearch, autoFocus }: ScriptSearchFieldProps) => {
   const [keyword, setKeyword] = React.useState(defaultValue?.keyword || "");
   const [type, setType] = React.useState<SearchType>(defaultValue?.type || "auto");
   return (
@@ -211,9 +210,9 @@ export const ScriptSearchField = ({ t, defaultValue, onChange, onSearch, inputRe
         <Select.Option value="script_code">{t("script_code")}</Select.Option>
       </Select>
       <Input.Search
-        ref={inputRef}
         size="small"
         searchButton
+        autoFocus={autoFocus}
         style={{ width: 280 }}
         value={keyword}
         placeholder={
diff --git a/src/pages/options/routes/SubscribeList.tsx b/src/pages/options/routes/SubscribeList.tsx
index 8643f564b..0376e0d96 100644
--- a/src/pages/options/routes/SubscribeList.tsx
+++ b/src/pages/options/routes/SubscribeList.tsx
@@ -1,11 +1,10 @@
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useState } from "react";
 import Text from "@arco-design/web-react/es/Typography/text";
 import { Button, Card, Input, Message, Popconfirm, Switch, Table, Tag, Tooltip } from "@arco-design/web-react";
 import type { Subscribe } from "@App/app/repo/subscribe";
 import { SUBSCRIBE_STATUS_DISABLE, SUBSCRIBE_STATUS_ENABLE, SubscribeDAO } from "@App/app/repo/subscribe";
 import type { ColumnProps } from "@arco-design/web-react/es/Table";
 import { IconSearch, IconUserAdd } from "@arco-design/web-react/icon";
-import type { RefInputType } from "@arco-design/web-react/es/Input/interface";
 import { semTime } from "@App/pkg/utils/dayjs";
 import { RiDeleteBin5Fill } from "react-icons/ri";
 import { useTranslation } from "react-i18next"; // 添加了 react-i18next 的引用
@@ -15,7 +14,6 @@ type ListType = Subscribe & { loading?: boolean };
 
 function SubscribeList() {
   const [list, setList] = useState<ListType[]>([]);
-  const inputRef = useRef<RefInputType>(null);
   const { t } = useTranslation(); // 使用 useTranslation hook
 
   const setListEntry = async (index: number, obj: any) => {
@@ -110,8 +108,8 @@ function SubscribeList() {
         return (
           <div className="arco-table-custom-filter">
             <Input.Search
-              ref={inputRef}
               searchButton
+              autoFocus
               placeholder={t("enter_subscribe_name")!}
               value={filterKeys[0] || ""}
               onChange={(value) => {
@@ -125,11 +123,6 @@ function SubscribeList() {
         );
       },
       onFilter: (value, row) => !value || row.name.includes(value),
-      onFilterDropdownVisibleChange: (visible) => {
-        if (visible) {
-          setTimeout(() => inputRef.current!.focus(), 1);
-        }
-      },
       className: "max-w-[240px]",
       render: (col) => {
         return (

From 354dd0b40171ef3372769f4c45e8907bd38c28d4 Mon Sep 17 00:00:00 2001
From: cyfung1031 <44498510+cyfung1031@users.noreply.github.com>
Date: Wed, 26 Nov 2025 20:28:12 +0900
Subject: [PATCH 07/13] searchFilter

---
 .../options/routes/ScriptList/ScriptTable.tsx | 112 ++++++++++--------
 src/pages/options/routes/ScriptList/hooks.tsx | 110 ++++++++++-------
 2 files changed, 133 insertions(+), 89 deletions(-)

diff --git a/src/pages/options/routes/ScriptList/ScriptTable.tsx b/src/pages/options/routes/ScriptList/ScriptTable.tsx
index 9d5983c25..ef9bab47b 100644
--- a/src/pages/options/routes/ScriptList/ScriptTable.tsx
+++ b/src/pages/options/routes/ScriptList/ScriptTable.tsx
@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useEffect, useMemo, useRef, useState } from "react";
+import React, { createContext, useContext, useEffect, useMemo, useState } from "react";
 import {
   Avatar,
   Button,
@@ -18,7 +18,7 @@ import {
 } from "@arco-design/web-react";
 import type { ColumnProps } from "@arco-design/web-react/es/Table";
 import type { ComponentsProps } from "@arco-design/web-react/es/Table/interface";
-import type { Script, UserConfig } from "@App/app/repo/scripts";
+import type { Script, ScriptCode, UserConfig } from "@App/app/repo/scripts";
 import { FaThLarge } from "react-icons/fa";
 import { VscLayoutSidebarLeft, VscLayoutSidebarLeftOff } from "react-icons/vsc";
 import {
@@ -38,7 +38,6 @@ import {
   RiUploadCloudFill,
 } from "react-icons/ri";
 import { Link, useNavigate } from "react-router-dom";
-import type { RefInputType } from "@arco-design/web-react/es/Input/interface";
 import Text from "@arco-design/web-react/es/Typography/text";
 import type { DragEndEvent } from "@dnd-kit/core";
 import { closestCenter, DndContext, KeyboardSensor, PointerSensor, useSensor, useSensors } from "@dnd-kit/core";
@@ -66,6 +65,7 @@ import {
 import { getCombinedMeta } from "@App/app/service/service_worker/utils";
 import { parseTags } from "@App/app/repo/metadata";
 import { EnableSwitch, HomeCell, MemoizedAvatar, ScriptSearchField, SourceCell, UpdateTimeCell } from "./components";
+import type { SearchType } from "@App/app/service/service_worker/types";
 
 type ListType = ScriptLoading;
 
@@ -451,11 +451,61 @@ export const ScriptTable = ({
   const [action, setAction] = useState("");
   const [select, setSelect] = useState<Script[]>([]);
   const [selectColumn, setSelectColumn] = useState(0);
-  const inputRef = useRef<RefInputType>(null);
   const navigate = useNavigate();
   const [savedWidths, setSavedWidths] = useState<{ [key: string]: number } | null>(null);
 
-  const filterCache: Map<string, any> = useMemo(() => new Map(), []);
+  const searchFilterCache: Map<string, any> = useMemo(() => new Map(), []);
+
+  type SearchFilterEntry = { type: SearchType; keyword: string };
+  type SearchFilterRequest = { type: SearchType; keyword: string }; // 兩個Type日後可能會不同。先分開寫。
+  type SearchFilterResponse = ScriptCode | undefined;
+  const searchFilter = {
+    filterKeys: undefined,
+    setFilterKeys: undefined,
+    defaultValue: { type: "auto", keyword: "" },
+    requestFilterResult(req: SearchFilterRequest) {
+      requestFilterResult({ value: req.keyword }).then((res) => this.onResponse(req, res));
+    },
+    onResponse(req: SearchFilterRequest, resp: SearchFilterResponse) {
+      const newFilterKeys = [...(this.filterKeys || [])] as SearchFilterEntry[];
+      newFilterKeys[0] = { type: req.type, keyword: req.keyword };
+      searchFilterCache.clear();
+      if (resp && Array.isArray(resp)) {
+        for (const entry of resp) {
+          searchFilterCache.set(entry.uuid, {
+            code: entry.code,
+            name: entry.name,
+            auto: entry.auto,
+          });
+        }
+      }
+      this.setFilterKeys?.(newFilterKeys as SearchFilterEntry[]);
+    },
+    onFilter(value: SearchFilterEntry, row: any): boolean {
+      if (!value || !value.keyword) {
+        return true;
+      }
+      const result = searchFilterCache.get(row.uuid);
+      if (!result) return false;
+      switch (value.type) {
+        case "auto":
+          return result.auto;
+        case "script_code":
+          return result.code;
+        case "name":
+          return result.name;
+        default:
+          return false;
+      }
+    },
+  } as {
+    filterKeys?: SearchFilterEntry[];
+    setFilterKeys?: (filterKeys: SearchFilterEntry[], callback?: (...args: any[]) => any) => void;
+    defaultValue: SearchFilterEntry;
+    requestFilterResult: (req: SearchFilterRequest) => Promise<SearchFilterResponse>;
+    onResponse: (req: SearchFilterRequest, resp: SearchFilterResponse) => void;
+    onFilter: (value: SearchFilterEntry, row: any) => boolean;
+  };
 
   const columns: ColumnProps[] = useMemo(
     () =>
@@ -497,32 +547,17 @@ export const ScriptTable = ({
           sorter: (a, b) => a.name.localeCompare(b.name),
           filterIcon: <IconSearch />,
           filterDropdown: ({ filterKeys, setFilterKeys, confirm }: any) => {
-            if (!filterKeys?.length) {
-              filterKeys = [{ type: "auto", keyword: "" }];
-            }
+            // 重繪時更新React參考
+            searchFilter.filterKeys = filterKeys;
+            searchFilter.setFilterKeys = setFilterKeys;
             return (
               <div className="arco-table-custom-filter flex flex-row gap-2">
                 <ScriptSearchField
                   t={t}
-                  inputRef={inputRef}
-                  defaultValue={filterKeys[0]}
+                  autoFocus
+                  defaultValue={filterKeys?.[0] || searchFilter.defaultValue}
                   onChange={(req) => {
-                    // 神奇的问题 #1023
-                    filterKeys[0].type = req.type;
-                    filterKeys[0].keyword = req.keyword;
-                    requestFilterResult({ value: req.keyword }).then((res) => {
-                      filterCache.clear();
-                      if (res && Array.isArray(res)) {
-                        for (const entry of res) {
-                          filterCache.set(entry.uuid, {
-                            code: entry.code,
-                            name: entry.name,
-                            auto: entry.auto,
-                          });
-                        }
-                      }
-                      setFilterKeys([...filterKeys]);
-                    });
+                    searchFilter.requestFilterResult(req);
                   }}
                   onSearch={(req) => {
                     if (req.bySelect) return;
@@ -532,28 +567,7 @@ export const ScriptTable = ({
               </div>
             );
           },
-          onFilter(value, row) {
-            if (!value || !value.keyword) {
-              return true;
-            }
-            const result = filterCache.get(row.uuid);
-            if (!result) return false;
-            switch (value.type) {
-              case "auto":
-                return result.auto;
-              case "script_code":
-                return result.code;
-              case "name":
-                return result.name;
-              default:
-                return false;
-            }
-          },
-          onFilterDropdownVisibleChange: (visible) => {
-            if (visible) {
-              setTimeout(() => inputRef.current!.focus(), 1);
-            }
-          },
+          onFilter: (value, row) => searchFilter.onFilter(value, row),
           className: "max-w-[240px] min-w-[100px]",
           render: (col: string, item: ListType) => <NameCell col={col} item={item} />,
         },
@@ -660,7 +674,7 @@ export const ScriptTable = ({
       t,
       sidebarOpen,
       updateScripts,
-      filterCache,
+      searchFilterCache,
       navigate,
       setSidebarOpen,
       setViewMode,
diff --git a/src/pages/options/routes/ScriptList/hooks.tsx b/src/pages/options/routes/ScriptList/hooks.tsx
index a8babaee6..b7057224a 100644
--- a/src/pages/options/routes/ScriptList/hooks.tsx
+++ b/src/pages/options/routes/ScriptList/hooks.tsx
@@ -1,4 +1,4 @@
-import type { Script, UserConfig } from "@App/app/repo/scripts";
+import type { Script, ScriptCode, UserConfig } from "@App/app/repo/scripts";
 import {
   SCRIPT_STATUS_ENABLE,
   SCRIPT_STATUS_DISABLE,
@@ -325,10 +325,19 @@ export function useScriptSearch() {
     tags: "all",
     source: "all",
   });
-  const [searchRequest, setSearchRequest] = useState<{ keyword: string; type: SearchType }>({
+
+  const searchFilterCache: Map<string, any> = useMemo(() => new Map(), []);
+
+  type SearchFilterRequest = { type: SearchType; keyword: string }; // 兩個Type日後可能會不同。先分開寫。
+  type SearchFilterResponse = ScriptCode | undefined;
+  const [searchRequest, setSearchRequest] = useState<SearchFilterRequest>({
     keyword: "",
     type: "auto",
   });
+  const [lastFilterQuery, setLastFilterQuery] = useState<{
+    request?: SearchFilterRequest;
+    response?: SearchFilterResponse;
+  }>();
   const [sidebarOpen, setSidebarOpen] = useState<boolean>(() => localStorage.getItem("script-list-sidebar") === "1");
 
   // 计算数据量
@@ -485,7 +494,8 @@ export function useScriptSearch() {
     return { statusItems, typeItems, tagItems, sourceItems, tagMap, originMap };
   }, [scriptList, sidebarOpen, t]);
 
-  useEffect(() => {
+  const filterFuncs = useMemo(() => {
+    // 當 originMap, selectedFilters, tagMap 改變時更新
     const filterFuncs: Array<(script: Script) => boolean> = [];
     for (const [groupKey, itemKey] of Object.entries(selectedFilters)) {
       switch (groupKey) {
@@ -541,47 +551,67 @@ export function useScriptSearch() {
           break;
       }
     }
-    const filterList = scriptList.filter((script) => filterFuncs.every((fn) => fn(script)));
-    if (searchRequest.keyword !== "") {
-      let mounted = true;
-      // 再基于关键词过滤一次
-      requestFilterResult({ value: searchRequest.keyword }).then((res) => {
-        if (!mounted) return;
-        const cacheMap = new Map<string, any>();
-        if (res && Array.isArray(res)) {
-          for (const entry of res) {
-            cacheMap.set(entry.uuid, {
-              code: entry.code,
-              name: entry.name,
-              auto: entry.auto,
-            });
-          }
+    return filterFuncs;
+  }, [originMap, selectedFilters, tagMap]);
+
+  const searchFilter = {
+    requestFilterResult(req: SearchFilterRequest) {
+      requestFilterResult({ value: req.keyword }).then((res) => this.onResponse(req, res));
+    },
+    onResponse(req: SearchFilterRequest, searchRes: SearchFilterResponse) {
+      searchFilterCache.clear();
+      if (searchRes && Array.isArray(searchRes)) {
+        for (const entry of searchRes) {
+          searchFilterCache.set(entry.uuid, {
+            code: entry.code,
+            name: entry.name,
+            auto: entry.auto,
+          });
         }
+      }
+      setLastFilterQuery({ request: req, response: searchRes });
+    },
+  } as {
+    requestFilterResult: (req: SearchFilterRequest) => Promise<SearchFilterResponse>;
+    onResponse: (req: SearchFilterRequest, resp: SearchFilterResponse) => void;
+  };
 
-        setFilterScriptList(
-          filterList.filter((item) => {
-            const result = cacheMap.get(item.uuid);
-            if (!result) return false;
-            switch (searchRequest.type) {
-              case "auto":
-                return result.auto;
-              case "name":
-                return result.name;
-              case "script_code":
-                return result.code;
-              default:
-                return false;
-            }
-          })
-        );
-      });
-      return () => {
-        mounted = false;
-      };
+  useEffect(() => {
+    // 當控制項改變了 searchRequest 時執行
+    if (searchRequest.keyword === "") {
+      setLastFilterQuery(undefined);
     } else {
-      setFilterScriptList(filterList);
+      searchFilter.requestFilterResult(searchRequest);
     }
-  }, [originMap, scriptList, selectedFilters, tagMap, searchRequest]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [searchRequest, scriptList]); // scriptList 有改動時也重新查一下最新的結果吧
+
+  useEffect(() => {
+    // 當 filterFuncs 改變時進行 / Filter結果取得時進行
+    // 按 filterFuncs 过滤一次
+    let filterList = scriptList.filter((script) => filterFuncs.every((fn) => fn(script)));
+    const searchReq = lastFilterQuery?.request; // 當前的Filter的請求資料
+    const searchRes = lastFilterQuery?.response; // 當前的Filter的回應資料
+    if (searchReq && searchRes) {
+      // 再基于关键词过滤一次
+      filterList = filterList.filter((item) => {
+        const result = searchFilterCache.get(item.uuid);
+        if (!result) return false;
+        switch (searchReq.type) {
+          case "auto":
+            return result.auto;
+          case "name":
+            return result.name;
+          case "script_code":
+            return result.code;
+          default:
+            return false;
+        }
+      });
+    }
+    setFilterScriptList(filterList);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [scriptList, filterFuncs, lastFilterQuery]); // searchFilterCache 參考固定不變
 
   // 覆盖scriptListManager的排序方法
   // 避免触发顺序是 scriptList -> filterScriptList 导致列表会出现一瞬间的错乱

From aeb461f6cfbc6acb3e5eceff20dc61808fe0b728 Mon Sep 17 00:00:00 2001
From: cyfung1031 <44498510+cyfung1031@users.noreply.github.com>
Date: Wed, 26 Nov 2025 20:30:21 +0900
Subject: [PATCH 08/13] =?UTF-8?q?=E4=B8=AD=E6=96=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../options/routes/ScriptList/ScriptTable.tsx | 20 +++++++++----------
 src/pages/options/routes/ScriptList/hooks.tsx | 16 +++++++--------
 2 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/src/pages/options/routes/ScriptList/ScriptTable.tsx b/src/pages/options/routes/ScriptList/ScriptTable.tsx
index ef9bab47b..cac917107 100644
--- a/src/pages/options/routes/ScriptList/ScriptTable.tsx
+++ b/src/pages/options/routes/ScriptList/ScriptTable.tsx
@@ -456,8 +456,8 @@ export const ScriptTable = ({
 
   const searchFilterCache: Map<string, any> = useMemo(() => new Map(), []);
 
-  type SearchFilterEntry = { type: SearchType; keyword: string };
-  type SearchFilterRequest = { type: SearchType; keyword: string }; // 兩個Type日後可能會不同。先分開寫。
+  type SearchFilterKeyEntry = { type: SearchType; keyword: string };
+  type SearchFilterRequest = { type: SearchType; keyword: string }; // 两个Type日后可能会不同。先分开写。
   type SearchFilterResponse = ScriptCode | undefined;
   const searchFilter = {
     filterKeys: undefined,
@@ -467,7 +467,7 @@ export const ScriptTable = ({
       requestFilterResult({ value: req.keyword }).then((res) => this.onResponse(req, res));
     },
     onResponse(req: SearchFilterRequest, resp: SearchFilterResponse) {
-      const newFilterKeys = [...(this.filterKeys || [])] as SearchFilterEntry[];
+      const newFilterKeys = [...(this.filterKeys || [])] as SearchFilterKeyEntry[];
       newFilterKeys[0] = { type: req.type, keyword: req.keyword };
       searchFilterCache.clear();
       if (resp && Array.isArray(resp)) {
@@ -479,9 +479,9 @@ export const ScriptTable = ({
           });
         }
       }
-      this.setFilterKeys?.(newFilterKeys as SearchFilterEntry[]);
+      this.setFilterKeys?.(newFilterKeys as SearchFilterKeyEntry[]);
     },
-    onFilter(value: SearchFilterEntry, row: any): boolean {
+    onFilter(value: SearchFilterKeyEntry, row: any): boolean {
       if (!value || !value.keyword) {
         return true;
       }
@@ -499,12 +499,12 @@ export const ScriptTable = ({
       }
     },
   } as {
-    filterKeys?: SearchFilterEntry[];
-    setFilterKeys?: (filterKeys: SearchFilterEntry[], callback?: (...args: any[]) => any) => void;
-    defaultValue: SearchFilterEntry;
+    filterKeys?: SearchFilterKeyEntry[];
+    setFilterKeys?: (filterKeys: SearchFilterKeyEntry[], callback?: (...args: any[]) => any) => void;
+    defaultValue: SearchFilterKeyEntry;
     requestFilterResult: (req: SearchFilterRequest) => Promise<SearchFilterResponse>;
     onResponse: (req: SearchFilterRequest, resp: SearchFilterResponse) => void;
-    onFilter: (value: SearchFilterEntry, row: any) => boolean;
+    onFilter: (value: SearchFilterKeyEntry, row: any) => boolean;
   };
 
   const columns: ColumnProps[] = useMemo(
@@ -547,7 +547,7 @@ export const ScriptTable = ({
           sorter: (a, b) => a.name.localeCompare(b.name),
           filterIcon: <IconSearch />,
           filterDropdown: ({ filterKeys, setFilterKeys, confirm }: any) => {
-            // 重繪時更新React參考
+            // 重绘时更新React参考
             searchFilter.filterKeys = filterKeys;
             searchFilter.setFilterKeys = setFilterKeys;
             return (
diff --git a/src/pages/options/routes/ScriptList/hooks.tsx b/src/pages/options/routes/ScriptList/hooks.tsx
index b7057224a..16dede9de 100644
--- a/src/pages/options/routes/ScriptList/hooks.tsx
+++ b/src/pages/options/routes/ScriptList/hooks.tsx
@@ -328,7 +328,7 @@ export function useScriptSearch() {
 
   const searchFilterCache: Map<string, any> = useMemo(() => new Map(), []);
 
-  type SearchFilterRequest = { type: SearchType; keyword: string }; // 兩個Type日後可能會不同。先分開寫。
+  type SearchFilterRequest = { type: SearchType; keyword: string }; // 两个Type日后可能会不同。先分开写。
   type SearchFilterResponse = ScriptCode | undefined;
   const [searchRequest, setSearchRequest] = useState<SearchFilterRequest>({
     keyword: "",
@@ -495,7 +495,7 @@ export function useScriptSearch() {
   }, [scriptList, sidebarOpen, t]);
 
   const filterFuncs = useMemo(() => {
-    // 當 originMap, selectedFilters, tagMap 改變時更新
+    // 当 originMap, selectedFilters, tagMap 改变时更新
     const filterFuncs: Array<(script: Script) => boolean> = [];
     for (const [groupKey, itemKey] of Object.entries(selectedFilters)) {
       switch (groupKey) {
@@ -577,21 +577,21 @@ export function useScriptSearch() {
   };
 
   useEffect(() => {
-    // 當控制項改變了 searchRequest 時執行
+    // 当控制项改变了 searchRequest 时执行
     if (searchRequest.keyword === "") {
       setLastFilterQuery(undefined);
     } else {
       searchFilter.requestFilterResult(searchRequest);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [searchRequest, scriptList]); // scriptList 有改動時也重新查一下最新的結果吧
+  }, [searchRequest, scriptList]); // scriptList 有改动时也重新查一下最新的结果吧
 
   useEffect(() => {
-    // 當 filterFuncs 改變時進行 / Filter結果取得時進行
+    // 当 filterFuncs 改变时进行 / Filter结果取得时进行
     // 按 filterFuncs 过滤一次
     let filterList = scriptList.filter((script) => filterFuncs.every((fn) => fn(script)));
-    const searchReq = lastFilterQuery?.request; // 當前的Filter的請求資料
-    const searchRes = lastFilterQuery?.response; // 當前的Filter的回應資料
+    const searchReq = lastFilterQuery?.request; // 当前的Filter的请求资料
+    const searchRes = lastFilterQuery?.response; // 当前的Filter的回应资料
     if (searchReq && searchRes) {
       // 再基于关键词过滤一次
       filterList = filterList.filter((item) => {
@@ -611,7 +611,7 @@ export function useScriptSearch() {
     }
     setFilterScriptList(filterList);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [scriptList, filterFuncs, lastFilterQuery]); // searchFilterCache 參考固定不變
+  }, [scriptList, filterFuncs, lastFilterQuery]); // searchFilterCache 参考固定不变
 
   // 覆盖scriptListManager的排序方法
   // 避免触发顺序是 scriptList -> filterScriptList 导致列表会出现一瞬间的错乱

From 5701f8a2026178ecc92dd25b5812302a97c2f9d2 Mon Sep 17 00:00:00 2001
From: cyfung1031 <44498510+cyfung1031@users.noreply.github.com>
Date: Wed, 26 Nov 2025 21:45:09 +0900
Subject: [PATCH 09/13] SearchFilter.ts

---
 .../options/routes/ScriptList/ScriptTable.tsx | 72 ++++++-------------
 .../options/routes/ScriptList/SearchFilter.ts | 57 +++++++++++++++
 src/pages/options/routes/ScriptList/hooks.tsx | 50 +++----------
 3 files changed, 87 insertions(+), 92 deletions(-)
 create mode 100644 src/pages/options/routes/ScriptList/SearchFilter.ts

diff --git a/src/pages/options/routes/ScriptList/ScriptTable.tsx b/src/pages/options/routes/ScriptList/ScriptTable.tsx
index cac917107..997b1ee6c 100644
--- a/src/pages/options/routes/ScriptList/ScriptTable.tsx
+++ b/src/pages/options/routes/ScriptList/ScriptTable.tsx
@@ -18,7 +18,7 @@ import {
 } from "@arco-design/web-react";
 import type { ColumnProps } from "@arco-design/web-react/es/Table";
 import type { ComponentsProps } from "@arco-design/web-react/es/Table/interface";
-import type { Script, ScriptCode, UserConfig } from "@App/app/repo/scripts";
+import type { Script, UserConfig } from "@App/app/repo/scripts";
 import { FaThLarge } from "react-icons/fa";
 import { VscLayoutSidebarLeft, VscLayoutSidebarLeftOff } from "react-icons/vsc";
 import {
@@ -55,17 +55,17 @@ import { systemConfig } from "@App/pages/store/global";
 import { i18nName } from "@App/locales/locales";
 import { hashColor, ScriptIcons } from "../utils";
 import type { ScriptLoading } from "@App/pages/store/features/script";
-import {
-  requestEnableScript,
-  pinToTop,
-  scriptClient,
-  synchronizeClient,
-  requestFilterResult,
-} from "@App/pages/store/features/script";
+import { requestEnableScript, pinToTop, scriptClient, synchronizeClient } from "@App/pages/store/features/script";
 import { getCombinedMeta } from "@App/app/service/service_worker/utils";
 import { parseTags } from "@App/app/repo/metadata";
 import { EnableSwitch, HomeCell, MemoizedAvatar, ScriptSearchField, SourceCell, UpdateTimeCell } from "./components";
-import type { SearchType } from "@App/app/service/service_worker/types";
+import type {
+  SearchFilterKeyEntry,
+  SearchFilterRequest,
+  SearchFilterResponse,
+  SearchFilterKeysSetter,
+} from "./SearchFilter";
+import { SearchFilter } from "./SearchFilter";
 
 type ListType = ScriptLoading;
 
@@ -456,56 +456,24 @@ export const ScriptTable = ({
 
   const searchFilterCache: Map<string, any> = useMemo(() => new Map(), []);
 
-  type SearchFilterKeyEntry = { type: SearchType; keyword: string };
-  type SearchFilterRequest = { type: SearchType; keyword: string }; // 两个Type日后可能会不同。先分开写。
-  type SearchFilterResponse = ScriptCode | undefined;
-  const searchFilter = {
-    filterKeys: undefined,
-    setFilterKeys: undefined,
-    defaultValue: { type: "auto", keyword: "" },
-    requestFilterResult(req: SearchFilterRequest) {
-      requestFilterResult({ value: req.keyword }).then((res) => this.onResponse(req, res));
-    },
-    onResponse(req: SearchFilterRequest, resp: SearchFilterResponse) {
+  class ScriptTableSearchFilter extends SearchFilter {
+    filterKeys?: SearchFilterKeyEntry[] = undefined;
+    setFilterKeys?: SearchFilterKeysSetter = undefined;
+    defaultValue = { type: "auto", keyword: "" };
+    onResponse(req: SearchFilterRequest, _res: SearchFilterResponse) {
       const newFilterKeys = [...(this.filterKeys || [])] as SearchFilterKeyEntry[];
       newFilterKeys[0] = { type: req.type, keyword: req.keyword };
-      searchFilterCache.clear();
-      if (resp && Array.isArray(resp)) {
-        for (const entry of resp) {
-          searchFilterCache.set(entry.uuid, {
-            code: entry.code,
-            name: entry.name,
-            auto: entry.auto,
-          });
-        }
-      }
       this.setFilterKeys?.(newFilterKeys as SearchFilterKeyEntry[]);
-    },
+    }
     onFilter(value: SearchFilterKeyEntry, row: any): boolean {
       if (!value || !value.keyword) {
         return true;
       }
-      const result = searchFilterCache.get(row.uuid);
-      if (!result) return false;
-      switch (value.type) {
-        case "auto":
-          return result.auto;
-        case "script_code":
-          return result.code;
-        case "name":
-          return result.name;
-        default:
-          return false;
-      }
-    },
-  } as {
-    filterKeys?: SearchFilterKeyEntry[];
-    setFilterKeys?: (filterKeys: SearchFilterKeyEntry[], callback?: (...args: any[]) => any) => void;
-    defaultValue: SearchFilterKeyEntry;
-    requestFilterResult: (req: SearchFilterRequest) => Promise<SearchFilterResponse>;
-    onResponse: (req: SearchFilterRequest, resp: SearchFilterResponse) => void;
-    onFilter: (value: SearchFilterKeyEntry, row: any) => boolean;
-  };
+      return this.checkByUUID(row.uuid);
+    }
+  }
+
+  const searchFilter = new ScriptTableSearchFilter();
 
   const columns: ColumnProps[] = useMemo(
     () =>
diff --git a/src/pages/options/routes/ScriptList/SearchFilter.ts b/src/pages/options/routes/ScriptList/SearchFilter.ts
new file mode 100644
index 000000000..240d1ba78
--- /dev/null
+++ b/src/pages/options/routes/ScriptList/SearchFilter.ts
@@ -0,0 +1,57 @@
+import type { ScriptCode } from "@App/app/repo/scripts";
+import type { SearchType } from "@App/app/service/service_worker/types";
+import { requestFilterResult } from "@App/pages/store/features/script";
+
+export type SearchFilterKeyEntry = { type: SearchType; keyword: string };
+export type SearchFilterRequest = { type: SearchType; keyword: string }; // 两个Type日后可能会不同。先分开写。
+export type SearchFilterResponse = ScriptCode | undefined;
+export type SearchFilterKeysSetter = (filterKeys: SearchFilterKeyEntry[], callback?: (...args: any[]) => any) => void;
+
+let lastReqType: SearchType | undefined = undefined;
+let lastKeyword: string = "";
+let lastResponse: ScriptCode | undefined = undefined;
+const searchFilterCache: Map<string, any> = new Map();
+
+export class SearchFilter {
+  constructor() {}
+  requestFilterResult(req: SearchFilterRequest): void {
+    if (req.keyword === lastKeyword) {
+      lastReqType = req.type;
+      this.onResponse(req, lastResponse);
+    } else {
+      requestFilterResult({ value: req.keyword }).then((res) => {
+        lastReqType = req.type;
+        lastKeyword = req.keyword;
+        lastResponse = res;
+        searchFilterCache.clear();
+        if (res && Array.isArray(res)) {
+          for (const entry of res) {
+            searchFilterCache.set(entry.uuid, {
+              code: entry.code,
+              name: entry.name,
+              auto: entry.auto,
+            });
+          }
+        }
+        this.onResponse(req, res);
+      });
+    }
+  }
+  onResponse(_req: SearchFilterRequest, _res: SearchFilterResponse): void {
+    // placeholder
+  }
+  checkByUUID(uuid: string): boolean {
+    const result = searchFilterCache.get(uuid);
+    if (!result) return false;
+    switch (lastReqType) {
+      case "auto":
+        return result.auto;
+      case "script_code":
+        return result.code;
+      case "name":
+        return result.name;
+      default:
+        return false;
+    }
+  }
+}
diff --git a/src/pages/options/routes/ScriptList/hooks.tsx b/src/pages/options/routes/ScriptList/hooks.tsx
index 16dede9de..b28d6f6ae 100644
--- a/src/pages/options/routes/ScriptList/hooks.tsx
+++ b/src/pages/options/routes/ScriptList/hooks.tsx
@@ -1,4 +1,4 @@
-import type { Script, ScriptCode, UserConfig } from "@App/app/repo/scripts";
+import type { Script, UserConfig } from "@App/app/repo/scripts";
 import {
   SCRIPT_STATUS_ENABLE,
   SCRIPT_STATUS_DISABLE,
@@ -20,7 +20,6 @@ import type { ScriptLoading } from "@App/pages/store/features/script";
 import {
   fetchScript,
   fetchScriptList,
-  requestFilterResult,
   sortScript,
   requestDeleteScripts,
   requestRunScript,
@@ -48,6 +47,7 @@ import { ValueClient } from "@App/app/service/service_worker/client";
 import { message } from "@App/pages/store/global";
 import { Message } from "@arco-design/web-react";
 import type { SearchType } from "@App/app/service/service_worker/types";
+import { SearchFilter, type SearchFilterRequest, type SearchFilterResponse } from "./SearchFilter";
 
 export function useScriptList() {
   const { t } = useTranslation();
@@ -328,8 +328,6 @@ export function useScriptSearch() {
 
   const searchFilterCache: Map<string, any> = useMemo(() => new Map(), []);
 
-  type SearchFilterRequest = { type: SearchType; keyword: string }; // 两个Type日后可能会不同。先分开写。
-  type SearchFilterResponse = ScriptCode | undefined;
   const [searchRequest, setSearchRequest] = useState<SearchFilterRequest>({
     keyword: "",
     type: "auto",
@@ -554,27 +552,12 @@ export function useScriptSearch() {
     return filterFuncs;
   }, [originMap, selectedFilters, tagMap]);
 
-  const searchFilter = {
-    requestFilterResult(req: SearchFilterRequest) {
-      requestFilterResult({ value: req.keyword }).then((res) => this.onResponse(req, res));
-    },
-    onResponse(req: SearchFilterRequest, searchRes: SearchFilterResponse) {
-      searchFilterCache.clear();
-      if (searchRes && Array.isArray(searchRes)) {
-        for (const entry of searchRes) {
-          searchFilterCache.set(entry.uuid, {
-            code: entry.code,
-            name: entry.name,
-            auto: entry.auto,
-          });
-        }
-      }
-      setLastFilterQuery({ request: req, response: searchRes });
-    },
-  } as {
-    requestFilterResult: (req: SearchFilterRequest) => Promise<SearchFilterResponse>;
-    onResponse: (req: SearchFilterRequest, resp: SearchFilterResponse) => void;
-  };
+  class HooksSearchFilter extends SearchFilter {
+    onResponse(req: SearchFilterRequest, res: SearchFilterResponse) {
+      setLastFilterQuery({ request: req, response: res });
+    }
+  }
+  const searchFilter = new HooksSearchFilter();
 
   useEffect(() => {
     // 当控制项改变了 searchRequest 时执行
@@ -590,23 +573,10 @@ export function useScriptSearch() {
     // 当 filterFuncs 改变时进行 / Filter结果取得时进行
     // 按 filterFuncs 过滤一次
     let filterList = scriptList.filter((script) => filterFuncs.every((fn) => fn(script)));
-    const searchReq = lastFilterQuery?.request; // 当前的Filter的请求资料
-    const searchRes = lastFilterQuery?.response; // 当前的Filter的回应资料
-    if (searchReq && searchRes) {
+    if (lastFilterQuery) {
       // 再基于关键词过滤一次
       filterList = filterList.filter((item) => {
-        const result = searchFilterCache.get(item.uuid);
-        if (!result) return false;
-        switch (searchReq.type) {
-          case "auto":
-            return result.auto;
-          case "name":
-            return result.name;
-          case "script_code":
-            return result.code;
-          default:
-            return false;
-        }
+        return searchFilter.checkByUUID(item.uuid);
       });
     }
     setFilterScriptList(filterList);

From 09be75821a5adf455b3bdc7a7720099a0fe7278f Mon Sep 17 00:00:00 2001
From: cyfung1031 <44498510+cyfung1031@users.noreply.github.com>
Date: Wed, 26 Nov 2025 21:49:45 +0900
Subject: [PATCH 10/13] lint

---
 src/pages/options/routes/ScriptList/ScriptTable.tsx | 3 ---
 src/pages/options/routes/ScriptList/SearchFilter.ts | 1 +
 src/pages/options/routes/ScriptList/hooks.tsx       | 4 +---
 3 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/src/pages/options/routes/ScriptList/ScriptTable.tsx b/src/pages/options/routes/ScriptList/ScriptTable.tsx
index 997b1ee6c..e59476c4f 100644
--- a/src/pages/options/routes/ScriptList/ScriptTable.tsx
+++ b/src/pages/options/routes/ScriptList/ScriptTable.tsx
@@ -454,8 +454,6 @@ export const ScriptTable = ({
   const navigate = useNavigate();
   const [savedWidths, setSavedWidths] = useState<{ [key: string]: number } | null>(null);
 
-  const searchFilterCache: Map<string, any> = useMemo(() => new Map(), []);
-
   class ScriptTableSearchFilter extends SearchFilter {
     filterKeys?: SearchFilterKeyEntry[] = undefined;
     setFilterKeys?: SearchFilterKeysSetter = undefined;
@@ -642,7 +640,6 @@ export const ScriptTable = ({
       t,
       sidebarOpen,
       updateScripts,
-      searchFilterCache,
       navigate,
       setSidebarOpen,
       setViewMode,
diff --git a/src/pages/options/routes/ScriptList/SearchFilter.ts b/src/pages/options/routes/ScriptList/SearchFilter.ts
index 240d1ba78..089a991fd 100644
--- a/src/pages/options/routes/ScriptList/SearchFilter.ts
+++ b/src/pages/options/routes/ScriptList/SearchFilter.ts
@@ -7,6 +7,7 @@ export type SearchFilterRequest = { type: SearchType; keyword: string }; // 两
 export type SearchFilterResponse = ScriptCode | undefined;
 export type SearchFilterKeysSetter = (filterKeys: SearchFilterKeyEntry[], callback?: (...args: any[]) => any) => void;
 
+// 静态变数不随重绘重置
 let lastReqType: SearchType | undefined = undefined;
 let lastKeyword: string = "";
 let lastResponse: ScriptCode | undefined = undefined;
diff --git a/src/pages/options/routes/ScriptList/hooks.tsx b/src/pages/options/routes/ScriptList/hooks.tsx
index b28d6f6ae..da810397a 100644
--- a/src/pages/options/routes/ScriptList/hooks.tsx
+++ b/src/pages/options/routes/ScriptList/hooks.tsx
@@ -326,8 +326,6 @@ export function useScriptSearch() {
     source: "all",
   });
 
-  const searchFilterCache: Map<string, any> = useMemo(() => new Map(), []);
-
   const [searchRequest, setSearchRequest] = useState<SearchFilterRequest>({
     keyword: "",
     type: "auto",
@@ -581,7 +579,7 @@ export function useScriptSearch() {
     }
     setFilterScriptList(filterList);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [scriptList, filterFuncs, lastFilterQuery]); // searchFilterCache 参考固定不变
+  }, [scriptList, filterFuncs, lastFilterQuery]); // searchFilter 参考固定不变
 
   // 覆盖scriptListManager的排序方法
   // 避免触发顺序是 scriptList -> filterScriptList 导致列表会出现一瞬间的错乱

From a829565989fab7c09785dab5f604c6e8ff7b2249 Mon Sep 17 00:00:00 2001
From: cyfung1031 <44498510+cyfung1031@users.noreply.github.com>
Date: Wed, 26 Nov 2025 22:04:41 +0900
Subject: [PATCH 11/13] typescript

---
 src/pages/options/routes/ScriptList/ScriptTable.tsx | 4 ++--
 src/pages/options/routes/ScriptList/SearchFilter.ts | 2 +-
 src/pages/options/routes/ScriptList/components.tsx  | 7 ++++---
 3 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/pages/options/routes/ScriptList/ScriptTable.tsx b/src/pages/options/routes/ScriptList/ScriptTable.tsx
index e59476c4f..218260c76 100644
--- a/src/pages/options/routes/ScriptList/ScriptTable.tsx
+++ b/src/pages/options/routes/ScriptList/ScriptTable.tsx
@@ -459,9 +459,9 @@ export const ScriptTable = ({
     setFilterKeys?: SearchFilterKeysSetter = undefined;
     defaultValue = { type: "auto", keyword: "" };
     onResponse(req: SearchFilterRequest, _res: SearchFilterResponse) {
-      const newFilterKeys = [...(this.filterKeys || [])] as SearchFilterKeyEntry[];
+      const newFilterKeys = [...(this.filterKeys || [])];
       newFilterKeys[0] = { type: req.type, keyword: req.keyword };
-      this.setFilterKeys?.(newFilterKeys as SearchFilterKeyEntry[]);
+      this.setFilterKeys?.(newFilterKeys);
     }
     onFilter(value: SearchFilterKeyEntry, row: any): boolean {
       if (!value || !value.keyword) {
diff --git a/src/pages/options/routes/ScriptList/SearchFilter.ts b/src/pages/options/routes/ScriptList/SearchFilter.ts
index 089a991fd..72cfb6ed2 100644
--- a/src/pages/options/routes/ScriptList/SearchFilter.ts
+++ b/src/pages/options/routes/ScriptList/SearchFilter.ts
@@ -3,7 +3,7 @@ import type { SearchType } from "@App/app/service/service_worker/types";
 import { requestFilterResult } from "@App/pages/store/features/script";
 
 export type SearchFilterKeyEntry = { type: SearchType; keyword: string };
-export type SearchFilterRequest = { type: SearchType; keyword: string }; // 两个Type日后可能会不同。先分开写。
+export type SearchFilterRequest = { type: SearchType; keyword: string; bySelect?: boolean }; // 两个Type日后可能会不同。先分开写。
 export type SearchFilterResponse = ScriptCode | undefined;
 export type SearchFilterKeysSetter = (filterKeys: SearchFilterKeyEntry[], callback?: (...args: any[]) => any) => void;
 
diff --git a/src/pages/options/routes/ScriptList/components.tsx b/src/pages/options/routes/ScriptList/components.tsx
index 28d51ba5a..2aa5a95e3 100644
--- a/src/pages/options/routes/ScriptList/components.tsx
+++ b/src/pages/options/routes/ScriptList/components.tsx
@@ -11,6 +11,7 @@ import { ListHomeRender } from "../utils";
 import { IconEdit, IconLink, IconUserAdd } from "@arco-design/web-react/icon";
 import type { SearchType } from "@App/app/service/service_worker/types";
 import type { TFunction } from "i18next";
+import type { SearchFilterKeyEntry, SearchFilterRequest } from "./SearchFilter";
 
 export const EnableSwitch = React.memo(
   ({
@@ -183,9 +184,9 @@ UpdateTimeCell.displayName = "UpdateTimeCell";
 
 interface ScriptSearchFieldProps {
   t: TFunction<"translation", undefined>;
-  defaultValue?: { keyword: string; type: SearchType };
-  onChange?: (value: { keyword: string; type: SearchType }) => void;
-  onSearch?: (req: { keyword: string; type: SearchType; bySelect: boolean }) => void;
+  defaultValue?: SearchFilterKeyEntry;
+  onChange?: (req: SearchFilterRequest) => void;
+  onSearch?: (req: SearchFilterRequest) => void;
   autoFocus?: boolean;
 }
 

From 9949cc2a9f953bfa6a4816f5d1e3ea99aa69bca3 Mon Sep 17 00:00:00 2001
From: wangyizhi <yz@ggnb.top>
Date: Fri, 28 Nov 2025 10:11:40 +0800
Subject: [PATCH 12/13] Update
 src/pages/options/routes/ScriptList/SearchFilter.ts

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 src/pages/options/routes/ScriptList/SearchFilter.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/pages/options/routes/ScriptList/SearchFilter.ts b/src/pages/options/routes/ScriptList/SearchFilter.ts
index 72cfb6ed2..49137e98b 100644
--- a/src/pages/options/routes/ScriptList/SearchFilter.ts
+++ b/src/pages/options/routes/ScriptList/SearchFilter.ts
@@ -11,7 +11,8 @@ export type SearchFilterKeysSetter = (filterKeys: SearchFilterKeyEntry[], callba
 let lastReqType: SearchType | undefined = undefined;
 let lastKeyword: string = "";
 let lastResponse: ScriptCode | undefined = undefined;
-const searchFilterCache: Map<string, any> = new Map();
+type SearchFilterCacheEntry = { code: boolean; name: boolean; auto: boolean };
+const searchFilterCache: Map<string, SearchFilterCacheEntry> = new Map();
 
 export class SearchFilter {
   constructor() {}

From b9c60b059de259d3a5362a4fe3f2f2f434719ce3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E4=B8=80=E4=B9=8B?= <yz@ggnb.top>
Date: Fri, 28 Nov 2025 11:15:20 +0800
Subject: [PATCH 13/13] =?UTF-8?q?=E6=95=B4=E7=90=86=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |  2 +-
 src/manifest.json                             |  2 +-
 src/pages/components/ScriptResource/index.tsx |  3 +-
 .../options/routes/ScriptList/ScriptTable.tsx | 40 ++++-------------
 .../options/routes/ScriptList/SearchFilter.ts | 45 ++++++++-----------
 .../options/routes/ScriptList/components.tsx  |  2 +-
 src/pages/options/routes/ScriptList/hooks.tsx | 40 ++++++-----------
 7 files changed, 45 insertions(+), 89 deletions(-)

diff --git a/package.json b/package.json
index fca10f68e..ac69babf7 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "scriptcat",
-  "version": "1.2.0-beta.5",
+  "version": "1.2.0",
   "description": "脚本猫,一个可以执行用户脚本的浏览器扩展,万物皆可脚本化,让你的浏览器可以做更多的事情!",
   "author": "CodFrm",
   "license": "GPLv3",
diff --git a/src/manifest.json b/src/manifest.json
index 7aea65769..f8cd3f5c0 100644
--- a/src/manifest.json
+++ b/src/manifest.json
@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "__MSG_scriptcat__",
-  "version": "1.2.0.1600",
+  "version": "1.2.0",
   "author": "CodFrm",
   "description": "__MSG_scriptcat_description__",
   "options_ui": {
diff --git a/src/pages/components/ScriptResource/index.tsx b/src/pages/components/ScriptResource/index.tsx
index 3acc82f9c..8e8901115 100644
--- a/src/pages/components/ScriptResource/index.tsx
+++ b/src/pages/components/ScriptResource/index.tsx
@@ -13,6 +13,8 @@ type ResourceListItem = {
   key: string;
 } & Resource;
 
+const resourceClient = new ResourceClient(message);
+
 const ScriptResource: React.FC<{
   script?: Script;
   visible: boolean;
@@ -21,7 +23,6 @@ const ScriptResource: React.FC<{
 }> = ({ script, visible, onCancel, onOk }) => {
   const [data, setData] = useState<ResourceListItem[]>([]);
   const { t } = useTranslation();
-  const resourceClient = new ResourceClient(message);
 
   useEffect(() => {
     if (!script) {
diff --git a/src/pages/options/routes/ScriptList/ScriptTable.tsx b/src/pages/options/routes/ScriptList/ScriptTable.tsx
index 218260c76..53635dfc0 100644
--- a/src/pages/options/routes/ScriptList/ScriptTable.tsx
+++ b/src/pages/options/routes/ScriptList/ScriptTable.tsx
@@ -59,12 +59,6 @@ import { requestEnableScript, pinToTop, scriptClient, synchronizeClient } from "
 import { getCombinedMeta } from "@App/app/service/service_worker/utils";
 import { parseTags } from "@App/app/repo/metadata";
 import { EnableSwitch, HomeCell, MemoizedAvatar, ScriptSearchField, SourceCell, UpdateTimeCell } from "./components";
-import type {
-  SearchFilterKeyEntry,
-  SearchFilterRequest,
-  SearchFilterResponse,
-  SearchFilterKeysSetter,
-} from "./SearchFilter";
 import { SearchFilter } from "./SearchFilter";
 
 type ListType = ScriptLoading;
@@ -454,25 +448,6 @@ export const ScriptTable = ({
   const navigate = useNavigate();
   const [savedWidths, setSavedWidths] = useState<{ [key: string]: number } | null>(null);
 
-  class ScriptTableSearchFilter extends SearchFilter {
-    filterKeys?: SearchFilterKeyEntry[] = undefined;
-    setFilterKeys?: SearchFilterKeysSetter = undefined;
-    defaultValue = { type: "auto", keyword: "" };
-    onResponse(req: SearchFilterRequest, _res: SearchFilterResponse) {
-      const newFilterKeys = [...(this.filterKeys || [])];
-      newFilterKeys[0] = { type: req.type, keyword: req.keyword };
-      this.setFilterKeys?.(newFilterKeys);
-    }
-    onFilter(value: SearchFilterKeyEntry, row: any): boolean {
-      if (!value || !value.keyword) {
-        return true;
-      }
-      return this.checkByUUID(row.uuid);
-    }
-  }
-
-  const searchFilter = new ScriptTableSearchFilter();
-
   const columns: ColumnProps[] = useMemo(
     () =>
       [
@@ -513,17 +488,15 @@ export const ScriptTable = ({
           sorter: (a, b) => a.name.localeCompare(b.name),
           filterIcon: <IconSearch />,
           filterDropdown: ({ filterKeys, setFilterKeys, confirm }: any) => {
-            // 重绘时更新React参考
-            searchFilter.filterKeys = filterKeys;
-            searchFilter.setFilterKeys = setFilterKeys;
             return (
               <div className="arco-table-custom-filter flex flex-row gap-2">
                 <ScriptSearchField
                   t={t}
                   autoFocus
-                  defaultValue={filterKeys?.[0] || searchFilter.defaultValue}
+                  defaultValue={filterKeys?.[0] || { type: "auto", keyword: "" }}
                   onChange={(req) => {
-                    searchFilter.requestFilterResult(req);
+                    setFilterKeys([{ type: req.type, keyword: req.keyword }]);
+                    SearchFilter.requestFilterResult(req);
                   }}
                   onSearch={(req) => {
                     if (req.bySelect) return;
@@ -533,7 +506,12 @@ export const ScriptTable = ({
               </div>
             );
           },
-          onFilter: (value, row) => searchFilter.onFilter(value, row),
+          onFilter: (value, row) => {
+            if (!value || !value.keyword) {
+              return true;
+            }
+            return SearchFilter.checkByUUID(row.uuid);
+          },
           className: "max-w-[240px] min-w-[100px]",
           render: (col: string, item: ListType) => <NameCell col={col} item={item} />,
         },
diff --git a/src/pages/options/routes/ScriptList/SearchFilter.ts b/src/pages/options/routes/ScriptList/SearchFilter.ts
index 49137e98b..67828f0e0 100644
--- a/src/pages/options/routes/ScriptList/SearchFilter.ts
+++ b/src/pages/options/routes/ScriptList/SearchFilter.ts
@@ -1,48 +1,39 @@
-import type { ScriptCode } from "@App/app/repo/scripts";
 import type { SearchType } from "@App/app/service/service_worker/types";
 import { requestFilterResult } from "@App/pages/store/features/script";
 
 export type SearchFilterKeyEntry = { type: SearchType; keyword: string };
 export type SearchFilterRequest = { type: SearchType; keyword: string; bySelect?: boolean }; // 两个Type日后可能会不同。先分开写。
-export type SearchFilterResponse = ScriptCode | undefined;
-export type SearchFilterKeysSetter = (filterKeys: SearchFilterKeyEntry[], callback?: (...args: any[]) => any) => void;
 
-// 静态变数不随重绘重置
+// 静态变量不随重绘重置
 let lastReqType: SearchType | undefined = undefined;
 let lastKeyword: string = "";
-let lastResponse: ScriptCode | undefined = undefined;
 type SearchFilterCacheEntry = { code: boolean; name: boolean; auto: boolean };
 const searchFilterCache: Map<string, SearchFilterCacheEntry> = new Map();
 
 export class SearchFilter {
-  constructor() {}
-  requestFilterResult(req: SearchFilterRequest): void {
+  static async requestFilterResult(req: SearchFilterRequest) {
     if (req.keyword === lastKeyword) {
       lastReqType = req.type;
-      this.onResponse(req, lastResponse);
+      return Promise.resolve(this);
     } else {
-      requestFilterResult({ value: req.keyword }).then((res) => {
-        lastReqType = req.type;
-        lastKeyword = req.keyword;
-        lastResponse = res;
-        searchFilterCache.clear();
-        if (res && Array.isArray(res)) {
-          for (const entry of res) {
-            searchFilterCache.set(entry.uuid, {
-              code: entry.code,
-              name: entry.name,
-              auto: entry.auto,
-            });
-          }
+      const res = await requestFilterResult({ value: req.keyword });
+      lastReqType = req.type;
+      lastKeyword = req.keyword;
+      searchFilterCache.clear();
+      if (res && Array.isArray(res)) {
+        for (const entry of res) {
+          searchFilterCache.set(entry.uuid, {
+            code: entry.code,
+            name: entry.name,
+            auto: entry.auto,
+          });
         }
-        this.onResponse(req, res);
-      });
+      }
+      return this;
     }
   }
-  onResponse(_req: SearchFilterRequest, _res: SearchFilterResponse): void {
-    // placeholder
-  }
-  checkByUUID(uuid: string): boolean {
+
+  static checkByUUID(uuid: string): boolean {
     const result = searchFilterCache.get(uuid);
     if (!result) return false;
     switch (lastReqType) {
diff --git a/src/pages/options/routes/ScriptList/components.tsx b/src/pages/options/routes/ScriptList/components.tsx
index 2aa5a95e3..e264abdac 100644
--- a/src/pages/options/routes/ScriptList/components.tsx
+++ b/src/pages/options/routes/ScriptList/components.tsx
@@ -219,7 +219,7 @@ export const ScriptSearchField = ({ t, defaultValue, onChange, onSearch, autoFoc
         placeholder={
           t("enter_search_value", {
             search:
-              type == "auto" ? `${t("name")}/${t("script_code")}` : type === "name" ? t("name") : t("script_code"),
+              type === "auto" ? `${t("name")}/${t("script_code")}` : type === "name" ? t("name") : t("script_code"),
           })!
         }
         onChange={(value) => {
diff --git a/src/pages/options/routes/ScriptList/hooks.tsx b/src/pages/options/routes/ScriptList/hooks.tsx
index da810397a..23e5f6bc5 100644
--- a/src/pages/options/routes/ScriptList/hooks.tsx
+++ b/src/pages/options/routes/ScriptList/hooks.tsx
@@ -47,7 +47,7 @@ import { ValueClient } from "@App/app/service/service_worker/client";
 import { message } from "@App/pages/store/global";
 import { Message } from "@arco-design/web-react";
 import type { SearchType } from "@App/app/service/service_worker/types";
-import { SearchFilter, type SearchFilterRequest, type SearchFilterResponse } from "./SearchFilter";
+import { SearchFilter, type SearchFilterRequest } from "./SearchFilter";
 
 export function useScriptList() {
   const { t } = useTranslation();
@@ -330,10 +330,6 @@ export function useScriptSearch() {
     keyword: "",
     type: "auto",
   });
-  const [lastFilterQuery, setLastFilterQuery] = useState<{
-    request?: SearchFilterRequest;
-    response?: SearchFilterResponse;
-  }>();
   const [sidebarOpen, setSidebarOpen] = useState<boolean>(() => localStorage.getItem("script-list-sidebar") === "1");
 
   // 计算数据量
@@ -550,36 +546,26 @@ export function useScriptSearch() {
     return filterFuncs;
   }, [originMap, selectedFilters, tagMap]);
 
-  class HooksSearchFilter extends SearchFilter {
-    onResponse(req: SearchFilterRequest, res: SearchFilterResponse) {
-      setLastFilterQuery({ request: req, response: res });
-    }
-  }
-  const searchFilter = new HooksSearchFilter();
-
-  useEffect(() => {
-    // 当控制项改变了 searchRequest 时执行
-    if (searchRequest.keyword === "") {
-      setLastFilterQuery(undefined);
-    } else {
-      searchFilter.requestFilterResult(searchRequest);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [searchRequest, scriptList]); // scriptList 有改动时也重新查一下最新的结果吧
-
   useEffect(() => {
     // 当 filterFuncs 改变时进行 / Filter结果取得时进行
     // 按 filterFuncs 过滤一次
     let filterList = scriptList.filter((script) => filterFuncs.every((fn) => fn(script)));
-    if (lastFilterQuery) {
+    if (searchRequest.keyword !== "") {
       // 再基于关键词过滤一次
-      filterList = filterList.filter((item) => {
-        return searchFilter.checkByUUID(item.uuid);
+      let setLoading = true;
+      SearchFilter.requestFilterResult(searchRequest).then(() => {
+        if (setLoading === false) return;
+        filterList = filterList.filter((item) => {
+          return SearchFilter.checkByUUID(item.uuid);
+        });
+        setFilterScriptList(filterList);
       });
+      return () => {
+        setLoading = false;
+      };
     }
     setFilterScriptList(filterList);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [scriptList, filterFuncs, lastFilterQuery]); // searchFilter 参考固定不变
+  }, [scriptList, filterFuncs, searchRequest]); // searchFilter 参考固定不变
 
   // 覆盖scriptListManager的排序方法
   // 避免触发顺序是 scriptList -> filterScriptList 导致列表会出现一瞬间的错乱