feat(proxy): unify filter search box and sync filter options (#5819)

* feat(proxy): unify filter search box and sync filter options

* docs: fix JSDoc placement

* refactor(search): unify string matcher and stabilize regex filtering

* fix(search): treat invalid regex as matching nothing

* docs: update changelog to include advanced filter search feature for proxy page

---------

Co-authored-by: Tunglies <77394545+Tunglies@users.noreply.github.com>

Changelog.md

@@ -7,6 +7,8 @@
 <details>
 <summary><strong> ✨ 新增功能 </strong></summary>
 
+- 允许代理页面允许高级过滤搜索
+
 </details>
 
 <details>

src/components/base/base-search-box.tsx

@@ -13,6 +13,7 @@ import { useTranslation } from "react-i18next";
 import matchCaseIcon from "@/assets/image/component/match_case.svg?react";
 import matchWholeWordIcon from "@/assets/image/component/match_whole_word.svg?react";
 import useRegularExpressionIcon from "@/assets/image/component/use_regular_expression.svg?react";
+import { buildRegex, compileStringMatcher } from "@/utils/search-matcher";
 
 export type SearchState = {
   text: string;
@@ -21,11 +22,17 @@ export type SearchState = {
   useRegularExpression: boolean;
 };
 
+type SearchOptionState = Omit<SearchState, "text">;
+
 type SearchProps = {
+  value?: string;
+  defaultValue?: string;
+  autoFocus?: boolean;
   placeholder?: string;
   matchCase?: boolean;
   matchWholeWord?: boolean;
   useRegularExpression?: boolean;
+  searchState?: Partial<SearchOptionState>;
   onSearch: (match: (content: string) => boolean, state: SearchState) => void;
 };
 
@@ -42,36 +49,61 @@ const StyledTextField = styled(TextField)(({ theme }) => ({
   },
 }));
 
+const useControllableState = <T,>(options: {
+  controlled: T | undefined;
+  defaultValue: T;
+}) => {
+  const { controlled, defaultValue } = options;
+  const [uncontrolled, setUncontrolled] = useState(defaultValue);
+  const isControlled = controlled !== undefined;
+
+  const value = isControlled ? controlled : uncontrolled;
+
+  const setValue = useCallback(
+    (next: T) => {
+      if (!isControlled) setUncontrolled(next);
+    },
+    [isControlled],
+  );
+
+  return [value, setValue] as const;
+};
+
 export const BaseSearchBox = ({
+  value,
+  defaultValue,
+  autoFocus,
   placeholder,
+  searchState,
   matchCase: defaultMatchCase = false,
   matchWholeWord: defaultMatchWholeWord = false,
   useRegularExpression: defaultUseRegularExpression = false,
   onSearch,
 }: SearchProps) => {
   const { t } = useTranslation();
-
-  const escapeRegex = useCallback((value: string) => {
-    return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-  }, []);
-
-  const buildRegex = useCallback((pattern: string, flags = "") => {
-    try {
-      return new RegExp(pattern, flags);
-    } catch (e) {
-      console.warn("[BaseSearchBox] buildRegex error:", e);
-      return null;
-    }
-  }, []);
-
-  const inputRef = useRef<HTMLInputElement>(null);
   const onSearchRef = useRef(onSearch);
-  const [matchCase, setMatchCase] = useState(defaultMatchCase);
-  const [matchWholeWord, setMatchWholeWord] = useState(defaultMatchWholeWord);
-  const [useRegularExpression, setUseRegularExpression] = useState(
-    defaultUseRegularExpression,
-  );
-  const [errorMessage, setErrorMessage] = useState("");
+  const lastSearchStateRef = useRef<SearchState | null>(null);
+
+  const [text, setText] = useControllableState<string>({
+    controlled: value,
+    defaultValue: defaultValue ?? "",
+  });
+
+  const [matchCase, setMatchCase] = useControllableState<boolean>({
+    controlled: searchState?.matchCase,
+    defaultValue: defaultMatchCase,
+  });
+
+  const [matchWholeWord, setMatchWholeWord] = useControllableState<boolean>({
+    controlled: searchState?.matchWholeWord,
+    defaultValue: defaultMatchWholeWord,
+  });
+
+  const [useRegularExpression, setUseRegularExpression] =
+    useControllableState<boolean>({
+      controlled: searchState?.useRegularExpression,
+      defaultValue: defaultUseRegularExpression,
+    });
 
   const iconStyle = {
     style: {
@@ -82,97 +114,43 @@ export const BaseSearchBox = ({
     inheritViewBox: true,
   };
 
-  // Helper that verifies whether a pattern is a valid regular expression
-  const validateRegex = useCallback(
-    (pattern: string, flags = "") => {
-      if (!pattern) return true;
-      return !!buildRegex(pattern, flags);
-    },
-    [buildRegex],
-  );
-
-  const createMatcher = useMemo(() => {
-    return (searchText: string) => {
-      if (!searchText) {
-        return () => true;
-      }
-
-      const flags = matchCase ? "" : "i";
-
-      if (useRegularExpression) {
-        const regex = buildRegex(searchText, flags);
-        if (!regex) return () => false;
-
-        return (content: string) => {
-          try {
-            return regex.test(content);
-          } catch (e) {
-            console.warn("[BaseSearchBox] regex match error:", e);
-            return false;
-          }
-        };
-      }
-
-      if (matchWholeWord) {
-        const regex = buildRegex(`\\b${escapeRegex(searchText)}\\b`, flags);
-        if (!regex) return () => false;
-
-        return (content: string) => {
-          try {
-            return regex.test(content);
-          } catch (e) {
-            console.warn("[BaseSearchBox] whole word match error:", e);
-            return false;
-          }
-        };
-      }
-
-      return (content: string) => {
-        const item = matchCase ? content : content.toLowerCase();
-        const target = matchCase ? searchText : searchText.toLowerCase();
-        return item.includes(target);
-      };
-    };
-  }, [
-    buildRegex,
-    escapeRegex,
-    matchCase,
-    matchWholeWord,
-    useRegularExpression,
-  ]);
-
   useEffect(() => {
     onSearchRef.current = onSearch;
   }, [onSearch]);
 
+  const emitSearch = useCallback((nextState: SearchState) => {
+    const prevState = lastSearchStateRef.current;
+    const isSameState =
+      !!prevState &&
+      prevState.text === nextState.text &&
+      prevState.matchCase === nextState.matchCase &&
+      prevState.matchWholeWord === nextState.matchWholeWord &&
+      prevState.useRegularExpression === nextState.useRegularExpression;
+    if (isSameState) return;
+
+    const compiled = compileStringMatcher(nextState.text, nextState);
+    onSearchRef.current(compiled.matcher, nextState);
+
+    lastSearchStateRef.current = nextState;
+  }, []);
+
   useEffect(() => {
-    if (!inputRef.current) return;
-    const value = inputRef.current.value;
-    const matcher = createMatcher(value);
-    onSearchRef.current(matcher, {
-      text: value,
-      matchCase,
-      matchWholeWord,
-      useRegularExpression,
-    });
-  }, [matchCase, matchWholeWord, useRegularExpression, createMatcher]);
+    emitSearch({ text, matchCase, matchWholeWord, useRegularExpression });
+  }, [emitSearch, matchCase, matchWholeWord, text, useRegularExpression]);
 
-  const onChange = (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
-    const value = e.target?.value ?? "";
-    setErrorMessage("");
+  const effectiveErrorMessage = useMemo(() => {
+    if (!useRegularExpression || !text) return "";
     const flags = matchCase ? "" : "i";
+    return buildRegex(text, flags) ? "" : t("shared.validation.invalidRegex");
+  }, [matchCase, t, text, useRegularExpression]);
 
-    // Validate regex input eagerly
-    if (useRegularExpression && value) {
-      const isValid = validateRegex(value, flags);
-      if (!isValid) {
-        setErrorMessage(t("shared.validation.invalidRegex"));
-      }
-    }
-
-    const matcher = createMatcher(value);
-    onSearchRef.current(matcher, {
-      text: value,
+  const handleChangeText = (
+    e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+  ) => {
+    const nextText = e.target?.value ?? "";
+    setText(nextText);
+    emitSearch({
+      text: nextText,
       matchCase,
       matchWholeWord,
       useRegularExpression,
@@ -180,35 +158,43 @@ export const BaseSearchBox = ({
   };
 
   const handleToggleUseRegularExpression = () => {
-    setUseRegularExpression((prev) => {
-      const next = !prev;
-      if (!next) {
-        setErrorMessage("");
-      } else {
-        const value = inputRef.current?.value ?? "";
-        const flags = matchCase ? "" : "i";
-        if (value && !validateRegex(value, flags)) {
-          setErrorMessage(t("shared.validation.invalidRegex"));
-        }
-      }
-      return next;
+    const next = !useRegularExpression;
+    setUseRegularExpression(next);
+    emitSearch({
+      text,
+      matchCase,
+      matchWholeWord,
+      useRegularExpression: next,
     });
   };
 
+  const handleToggleMatchCase = () => {
+    const next = !matchCase;
+    setMatchCase(next);
+    emitSearch({ text, matchCase: next, matchWholeWord, useRegularExpression });
+  };
+
+  const handleToggleMatchWholeWord = () => {
+    const next = !matchWholeWord;
+    setMatchWholeWord(next);
+    emitSearch({ text, matchCase, matchWholeWord: next, useRegularExpression });
+  };
+
   return (
-    <Tooltip title={errorMessage || ""} placement="bottom-start">
+    <Tooltip title={effectiveErrorMessage || ""} placement="bottom-start">
       <StyledTextField
         autoComplete="new-password"
-        inputRef={inputRef}
         hiddenLabel
         fullWidth
         size="small"
         variant="outlined"
+        autoFocus={autoFocus}
         spellCheck="false"
         placeholder={placeholder ?? t("shared.placeholders.filter")}
         sx={{ input: { py: 0.65, px: 1.25 } }}
-        onChange={onChange}
-        error={!!errorMessage}
+        value={text}
+        onChange={handleChangeText}
+        error={!!effectiveErrorMessage}
         slotProps={{
           input: {
             sx: { pr: 1 },
@@ -220,7 +206,7 @@ export const BaseSearchBox = ({
                       component={matchCaseIcon}
                       {...iconStyle}
                       aria-label={matchCase ? "active" : "inactive"}
-                      onClick={() => setMatchCase((prev) => !prev)}
+                      onClick={handleToggleMatchCase}
                     />
                   </div>
                 </Tooltip>
@@ -230,7 +216,7 @@ export const BaseSearchBox = ({
                       component={matchWholeWordIcon}
                       {...iconStyle}
                       aria-label={matchWholeWord ? "active" : "inactive"}
-                      onClick={() => setMatchWholeWord((prev) => !prev)}
+                      onClick={handleToggleMatchWholeWord}
                     />
                   </div>
                 </Tooltip>

src/components/proxy/proxy-head.tsx

@@ -15,6 +15,7 @@ import { Box, IconButton, TextField, SxProps } from "@mui/material";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 
+import { BaseSearchBox } from "@/components/base/base-search-box";
 import { useVerge } from "@/hooks/use-verge";
 import delayManager from "@/services/delay";
 import { debugLog } from "@/utils/debug";
@@ -43,7 +44,16 @@ export const ProxyHead = ({
   onLocation,
   onCheckDelay,
 }: Props) => {
-  const { showType, sortType, filterText, textState, testUrl } = headState;
+  const {
+    showType,
+    sortType,
+    filterText,
+    textState,
+    testUrl,
+    filterMatchCase,
+    filterMatchWholeWord,
+    filterUseRegularExpression,
+  } = headState;
 
   const { t } = useTranslation();
   const [autoFocus, setAutoFocus] = useState(false);
@@ -154,17 +164,25 @@ export const ProxyHead = ({
       </IconButton>
 
       {textState === "filter" && (
-        <TextField
-          autoComplete="new-password"
-          autoFocus={autoFocus}
-          hiddenLabel
-          value={filterText}
-          size="small"
-          variant="outlined"
-          placeholder={t("shared.placeholders.filter")}
-          onChange={(e) => onHeadState({ filterText: e.target.value })}
-          sx={{ ml: 0.5, flex: "1 1 auto", input: { py: 0.65, px: 1 } }}
-        />
+        <Box sx={{ ml: 0.5, flex: "1 1 auto" }}>
+          <BaseSearchBox
+            autoFocus={autoFocus}
+            value={filterText}
+            searchState={{
+              matchCase: filterMatchCase,
+              matchWholeWord: filterMatchWholeWord,
+              useRegularExpression: filterUseRegularExpression,
+            }}
+            onSearch={(_, state) =>
+              onHeadState({
+                filterText: state.text,
+                filterMatchCase: state.matchCase,
+                filterMatchWholeWord: state.matchWholeWord,
+                filterUseRegularExpression: state.useRegularExpression,
+              })
+            }
+          />
+        </Box>
       )}
 
       {textState === "url" && (

src/components/proxy/use-filter-sort.ts

@@ -2,15 +2,23 @@ import { useEffect, useMemo, useReducer } from "react";
 
 import { useVerge } from "@/hooks/use-verge";
 import delayManager from "@/services/delay";
+import { compileStringMatcher } from "@/utils/search-matcher";
 
 // default | delay | alphabet
 export type ProxySortType = 0 | 1 | 2;
 
+export type ProxySearchState = {
+  matchCase?: boolean;
+  matchWholeWord?: boolean;
+  useRegularExpression?: boolean;
+};
+
 export default function useFilterSort(
   proxies: IProxyItem[],
   groupName: string,
   filterText: string,
   sortType: ProxySortType,
+  searchState?: ProxySearchState,
 ) {
   const { verge } = useVerge();
   const [_, bumpRefresh] = useReducer((count: number) => count + 1, 0);
@@ -33,7 +41,7 @@ export default function useFilterSort(
   }, [groupName]);
 
   return useMemo(() => {
-    const fp = filterProxies(proxies, groupName, filterText);
+    const fp = filterProxies(proxies, groupName, filterText, searchState);
     const sp = sortProxies(
       fp,
       groupName,
@@ -46,6 +54,7 @@ export default function useFilterSort(
     groupName,
     filterText,
     sortType,
+    searchState,
     verge?.default_latency_timeout,
   ]);
 }
@@ -56,8 +65,9 @@ export function filterSort(
   filterText: string,
   sortType: ProxySortType,
   latencyTimeout?: number,
+  searchState?: ProxySearchState,
 ) {
-  const fp = filterProxies(proxies, groupName, filterText);
+  const fp = filterProxies(proxies, groupName, filterText, searchState);
   const sp = sortProxies(fp, groupName, sortType, latencyTimeout);
   return sp;
 }
@@ -76,10 +86,12 @@ function filterProxies(
   proxies: IProxyItem[],
   groupName: string,
   filterText: string,
+  searchState?: ProxySearchState,
 ) {
-  if (!filterText) return proxies;
+  const query = filterText.trim();
+  if (!query) return proxies;
 
-  const res1 = regex1.exec(filterText);
+  const res1 = regex1.exec(query);
   if (res1) {
     const symbol = res1[1];
     const symbol2 = res1[2].toLowerCase();
@@ -100,13 +112,25 @@ function filterProxies(
     });
   }
 
-  const res2 = regex2.exec(filterText);
+  const res2 = regex2.exec(query);
   if (res2) {
     const type = res2[1].toLowerCase();
     return proxies.filter((p) => p.type.toLowerCase().includes(type));
   }
 
-  return proxies.filter((p) => p.name.includes(filterText.trim()));
+  const {
+    matchCase = false,
+    matchWholeWord = false,
+    useRegularExpression = false,
+  } = searchState ?? {};
+  const compiled = compileStringMatcher(query, {
+    matchCase,
+    matchWholeWord,
+    useRegularExpression,
+  });
+
+  if (!compiled.isValid) return [];
+  return proxies.filter((p) => compiled.matcher(p.name));
 }
 
 /**

src/components/proxy/use-head-state.ts

@@ -9,6 +9,9 @@ export interface HeadState {
   showType: boolean;
   sortType: ProxySortType;
   filterText: string;
+  filterMatchCase?: boolean;
+  filterMatchWholeWord?: boolean;
+  filterUseRegularExpression?: boolean;
   textState: "url" | "filter" | null;
   testUrl: string;
 }
@@ -21,6 +24,9 @@ export const DEFAULT_STATE: HeadState = {
   showType: true,
   sortType: 0,
   filterText: "",
+  filterMatchCase: false,
+  filterMatchWholeWord: false,
+  filterUseRegularExpression: false,
   textState: null,
   testUrl: "",
 };

src/components/proxy/use-render-list.ts

@@ -390,6 +390,11 @@ export const useRenderList = (
           headState.filterText,
           headState.sortType,
           latencyTimeout,
+          {
+            matchCase: headState.filterMatchCase,
+            matchWholeWord: headState.filterMatchWholeWord,
+            useRegularExpression: headState.filterUseRegularExpression,
+          },
         );
 
         ret.push({

src/utils/search-matcher.ts

@@ -0,0 +1,59 @@
+export type SearchMatcherOptions = {
+  matchCase?: boolean;
+  matchWholeWord?: boolean;
+  useRegularExpression?: boolean;
+};
+
+export type CompileStringMatcherResult = {
+  matcher: (content: string) => boolean;
+  isValid: boolean;
+};
+
+export const escapeRegex = (value: string) => {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+};
+
+export const buildRegex = (pattern: string, flags = "") => {
+  try {
+    return new RegExp(pattern, flags);
+  } catch {
+    return null;
+  }
+};
+
+export const compileStringMatcher = (
+  query: string,
+  options: SearchMatcherOptions = {},
+): CompileStringMatcherResult => {
+  if (!query) return { matcher: () => true, isValid: true };
+
+  const matchCase = options.matchCase ?? false;
+  const matchWholeWord = options.matchWholeWord ?? false;
+  const useRegularExpression = options.useRegularExpression ?? false;
+  const flags = matchCase ? "" : "i";
+
+  if (useRegularExpression) {
+    const regex = buildRegex(query, flags);
+    if (!regex) return { matcher: () => false, isValid: false };
+    return { matcher: (content: string) => regex.test(content), isValid: true };
+  }
+
+  if (matchWholeWord) {
+    const regex = buildRegex(`\\b${escapeRegex(query)}\\b`, flags);
+    if (!regex) return { matcher: () => false, isValid: false };
+    return { matcher: (content: string) => regex.test(content), isValid: true };
+  }
+
+  if (matchCase) {
+    return {
+      matcher: (content: string) => content.includes(query),
+      isValid: true,
+    };
+  }
+
+  const target = query.toLowerCase();
+  return {
+    matcher: (content: string) => content.toLowerCase().includes(target),
+    isValid: true,
+  };
+};