Global search

src/locales/en-US/translation.json

@@ -451,5 +451,7 @@
   "light": "Light",
   "dark": "Dark",
   "individual_edit": "Individual Edit",
-  "batch_edit": "Batch Edit"
+  "batch_edit": "Batch Edit",
+  "script_code": "Script Code",
+  "enter_search_value": "Enter {{search}} to search"
 }

src/locales/zh-CN/translation.json

@@ -451,5 +451,7 @@
   "light": "亮色模式",
   "dark": "暗色模式",
   "individual_edit": "单独编辑",
-  "batch_edit": "批量编辑"
+  "batch_edit": "批量编辑",
+  "script_code": "脚本代码",
+  "enter_search_value": "请输入 {{search}} 进行搜索"
 }

src/pages/options/routes/ScriptList.tsx

@@ -82,6 +82,7 @@ import {
   updateEnableStatus,
   synchronizeClient,
   batchDeleteScript,
+  requestScriptCode,
 } from "@App/pages/store/features/script";
 import { ValueClient } from "@App/app/service/service_worker/client";
 import { loadScriptFavicons } from "@App/pages/store/utils";
@@ -203,6 +204,8 @@ const EnableSwitch = React.memo(
 );
 EnableSwitch.displayName = "EnableSwitch";
 
+type SearchType = "auto" | "name" | "script_code";
+
 function ScriptList() {
   const [userConfig, setUserConfig] = useState<{
     script: Script;
@@ -298,35 +301,84 @@ function ScriptList() {
           sorter: (a, b) => a.name.localeCompare(b.name),
           filterIcon: <IconSearch />,
           filterDropdown: ({ filterKeys, setFilterKeys, confirm }: any) => {
+            if (!filterKeys.length) {
+              filterKeys = [{ type: "auto", value: "" }];
+            }
             return (
-              <div className="arco-table-custom-filter">
+              <div className="arco-table-custom-filter flex flex-row gap-2">
+                <Select
+                  className="flex-1"
+                  triggerProps={{ autoAlignPopupWidth: false, autoAlignPopupMinWidth: true, position: "bl" }}
+                  size="small"
+                  value={filterKeys[0].type || "auto"}
+                  onChange={(value) => {
+                    filterKeys[0].type = value;
+                    setFilterKeys([...filterKeys]);
+                  }}
+                >
+                  <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
-                  placeholder={t("enter_script_name")!}
-                  value={filterKeys[0] || ""}
+                  style={{ minWidth: 240 }}
+                  placeholder={
+                    t("enter_search_value", {
+                      search: filterKeys[0].type == "auto" ? `${t("name")}/${t("script_code")}` : t(""),
+                    })!
+                  }
+                  value={filterKeys[0].value || ""}
                   onChange={(value) => {
-                    setFilterKeys(value ? [value] : []);
+                    filterKeys[0].value = value;
+                    setFilterKeys([...filterKeys]);
                   }}
                   onSearch={() => {
-                    confirm();
+                    confirm!();
                   }}
                 />
               </div>
             );
           },
-          onFilter: (value: string, row) => {
-            if (!value) {
+          onFilter: (value: { type: SearchType; value: string }, row) => {
+            if (!value || !value.value) {
               return true;
             }
-            value = value.toLocaleLowerCase();
+            const keyword = value.value.toLocaleLowerCase();
             row.name = row.name.toLocaleLowerCase();
             const i18n = i18nName(row).toLocaleLowerCase();
             // 空格分开关键字搜索
-            const keys = value.split(" ");
+            const keys = keyword.split(" ");
+            const searchName = (keyword: string) => {
+              return row.name.includes(keyword) || i18n.includes(keyword);
+            };
+            const searchCode = (keyword: string) => {
+              if (!row.code) {
+                // 没有code，请求一下code
+                dispatch(requestScriptCode(row.uuid));
+                return false;
+              }
+              return row.code.includes(keyword);
+            };
             for (const key of keys) {
-              if (row.name.includes(key) || i18n.includes(key)) {
-                return true;
+              switch (value.type) {
+                case "auto":
+                  if (searchName(key) || searchCode(key)) {
+                    return true;
+                  }
+                  break;
+                case "script_code":
+                  if (searchCode(key)) {
+                    return true;
+                  }
+                  break;
+                case "name":
+                  if (searchName(key)) {
+                    return true;
+                  }
+                  break;
               }
             }
             return false;
@@ -545,7 +597,6 @@ function ScriptList() {
                     scriptClient
                       .requestCheckUpdate(script.uuid)
                       .then((res) => {
-                        console.log("res", res);
                         if (res) {
                           Message.warning({
                             id: "checkupdate",

src/pages/store/features/script.ts

@@ -48,6 +48,18 @@ export const requestDeleteScript = createAsyncThunk("script/deleteScript", async
   return await scriptClient.delete(uuid);
 });
 
+export const requestScriptCode = createAsyncThunk("script/requestScriptCode", async (uuid: string, { getState }) => {
+  const state = getState() as { script: { scripts: ScriptLoading[] } };
+  const script = state.script.scripts.find((s) => s.uuid === uuid);
+
+  // 如果已经有代码了，直接返回
+  if (script?.code !== undefined) {
+    return { code: script.code };
+  }
+
+  return await scriptClient.getCode(uuid);
+});
+
 export type ScriptLoading = Script & {
   enableLoading?: boolean;
   actionLoading?: boolean;
@@ -56,6 +68,7 @@ export type ScriptLoading = Script & {
     website?: string;
     icon?: string;
   }[];
+  code?: string; // 用于搜索的脚本代码
 };
 
 const updateScript = (scripts: ScriptLoading[], uuid: string, update: (s: ScriptLoading) => void) => {
@@ -171,7 +184,13 @@ export const scriptSlice = createAppSlice({
       )
       .addCase(requestStopScript.fulfilled, (state, action) =>
         updateScript(state.scripts, action.meta.arg, (s) => (s.actionLoading = false))
-      );
+      )
+      //处理请求脚本代码
+      .addCase(requestScriptCode.fulfilled, (state, action) => {
+        updateScript(state.scripts, action.meta.arg, (s) => {
+          s.code = action.payload?.code.toLocaleLowerCase();
+        });
+      });
   },
   selectors: {
     selectScripts: (state) => state.scripts,