✨ Global search (#662)

* Refines and expands Vietnamese locale

Improves existing Vietnamese translations for better consistency, clarity, and natural phrasing.

Adds numerous new translation keys to provide comprehensive localization for recently introduced features and UI elements.

* Adds global search to the script list

Enables users to filter scripts by name, metadata, or their entire source code.
Introduces a search input with debounce for better performance and a scope selector to toggle between title-only and full-content search.
Lazy-loads and caches script source code on demand when performing full-content searches, improving responsiveness and reducing unnecessary network requests.
This enhances script discoverability and management within the options interface.

* lint-fix

* 全局代码搜索

* 恢复style

---------

Co-authored-by: 王一之 <yz@ggnb.top>

Author: RenjiYuusei

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,