feat: added clear btn in filter component (#6229) (#6295)

Co-authored-by: Slinetrac <realakayuki@gmail.com>
2026-04-13 05:20:28 +08:00 · 2026-02-11 14:40:47 +08:00 · 2026-02-11 14:40:47 +08:00 · bba71aaa4c
commit bba71aaa4c
parent a019b26ceb
17 changed files with 52 additions and 25 deletions
--- a/Changelog.md
+++ b/Changelog.md
@ -27,6 +27,7 @@
 - 避免脏订阅地址无法 Scheme 导入订阅
 - macOS TUN 覆盖 DNS 时使用 114.114.114.114
 - 连通性测试替换为更快的 https://1.1.1.1
+- 连接、规则、日志等页面的过滤搜索组件新增了清空输入框按钮
 - 链式代理增加明显的入口出口与数据流向标识

 </details>
--- a/src/components/base/base-search-box.tsx
+++ b/src/components/base/base-search-box.tsx
@ -1,4 +1,5 @@
-import { Box, SvgIcon, TextField, styled } from "@mui/material";
+import { ClearRounded } from "@mui/icons-material";
+import { Box, SvgIcon, TextField, styled, IconButton } from "@mui/material";
 import Tooltip from "@mui/material/Tooltip";
 import {
  ChangeEvent,
@ -168,6 +169,11 @@ export const BaseSearchBox = ({
    });
  };

+  const handleClearInput = () => {
+    setText("");
+    emitSearch({ text: "", matchCase, matchWholeWord, useRegularExpression });
+  };
+
  const handleToggleMatchCase = () => {
    const next = !matchCase;
    setMatchCase(next);
@ -200,35 +206,40 @@ export const BaseSearchBox = ({
            sx: { pr: 1 },
            endAdornment: (
              <Box display="flex">
-                <Tooltip title={t("shared.placeholders.matchCase")}>
-                  <div>
-                    <SvgIcon
-                      component={matchCaseIcon}
+                {!!text && (
+                  <Tooltip title={t("shared.placeholders.resetInput")}>
+                    <IconButton
+                      size="small"
                      {...iconStyle}
-                      aria-label={matchCase ? "active" : "inactive"}
-                      onClick={handleToggleMatchCase}
-                    />
-                  </div>
+                      onClick={handleClearInput}
+                    >
+                      <ClearRounded fontSize="inherit" />
+                    </IconButton>
+                  </Tooltip>
+                )}
+                <Tooltip title={t("shared.placeholders.matchCase")}>
+                  <SvgIcon
+                    component={matchCaseIcon}
+                    {...iconStyle}
+                    aria-label={matchCase ? "active" : "inactive"}
+                    onClick={handleToggleMatchCase}
+                  />
                </Tooltip>
                <Tooltip title={t("shared.placeholders.matchWholeWord")}>
-                  <div>
-                    <SvgIcon
-                      component={matchWholeWordIcon}
-                      {...iconStyle}
-                      aria-label={matchWholeWord ? "active" : "inactive"}
-                      onClick={handleToggleMatchWholeWord}
-                    />
-                  </div>
+                  <SvgIcon
+                    component={matchWholeWordIcon}
+                    {...iconStyle}
+                    aria-label={matchWholeWord ? "active" : "inactive"}
+                    onClick={handleToggleMatchWholeWord}
+                  />
                </Tooltip>
                <Tooltip title={t("shared.placeholders.useRegex")}>
-                  <div>
-                    <SvgIcon
-                      component={UseRegularExpressionIcon}
-                      aria-label={useRegularExpression ? "active" : "inactive"}
-                      {...iconStyle}
-                      onClick={handleToggleUseRegularExpression}
-                    />
-                  </div>
+                  <SvgIcon
+                    component={UseRegularExpressionIcon}
+                    aria-label={useRegularExpression ? "active" : "inactive"}
+                    {...iconStyle}
+                    onClick={handleToggleUseRegularExpression}
+                  />
                </Tooltip>
              </Box>
            ),
--- a/src/locales/ar/shared.json
+++ b/src/locales/ar/shared.json
@ -55,6 +55,7 @@
    "files": "Files"
  },
  "placeholders": {
+    "resetInput": "مربع إدخال واضح",
    "filter": "شروط التصفية",
    "matchCase": "مطابقة الحالة",
    "matchWholeWord": "مطابقة الكلمة بأكملها",
--- a/src/locales/de/shared.json
+++ b/src/locales/de/shared.json
@ -55,6 +55,7 @@
    "files": "Files"
  },
  "placeholders": {
+    "resetInput": "Eingabefeld leeren",
    "filter": "Filterbedingungen",
    "matchCase": "Groß-/Kleinschreibung beachten",
    "matchWholeWord": "Ganzes Wort übereinstimmen",
--- a/src/locales/en/shared.json
+++ b/src/locales/en/shared.json
@ -55,6 +55,7 @@
    "files": "Files"
  },
  "placeholders": {
+    "resetInput": "Clear Input",
    "filter": "Filter conditions",
    "matchCase": "Match Case",
    "matchWholeWord": "Match Whole Word",
--- a/src/locales/es/shared.json
+++ b/src/locales/es/shared.json
@ -55,6 +55,7 @@
    "files": "Files"
  },
  "placeholders": {
+    "resetInput": "Borrar el cuadro de entrada",
    "filter": "Condiciones de filtrado",
    "matchCase": "Distinguir mayúsculas y minúsculas",
    "matchWholeWord": "Coincidencia exacta de palabras",
--- a/src/locales/fa/shared.json
+++ b/src/locales/fa/shared.json
@ -55,6 +55,7 @@
    "files": "Files"
  },
  "placeholders": {
+    "resetInput": "پاک کردن فیلد ورودی",
    "filter": "شرایط فیلتر",
    "matchCase": "تطبیق حروف کوچک و بزرگ",
    "matchWholeWord": "تطبیق کل کلمه",
--- a/src/locales/id/shared.json
+++ b/src/locales/id/shared.json
@ -55,6 +55,7 @@
    "files": "Files"
  },
  "placeholders": {
+    "resetInput": "Bersihkan kolom input",
    "filter": "Kondisi Filter",
    "matchCase": "Cocokkan Kasus",
    "matchWholeWord": "Cocokkan Kata Utuh",
--- a/src/locales/jp/shared.json
+++ b/src/locales/jp/shared.json
@ -55,6 +55,7 @@
    "files": "Files"
  },
  "placeholders": {
+    "resetInput": "入力フィールドをクリア",
    "filter": "フィルタリング条件",
    "matchCase": "大文字小文字を区別する",
    "matchWholeWord": "完全一致",
--- a/src/locales/ko/shared.json
+++ b/src/locales/ko/shared.json
@ -55,6 +55,7 @@
    "files": "파일"
  },
  "placeholders": {
+    "resetInput": "입력 필드 지우기",
    "filter": "필터 조건",
    "matchCase": "대/소문자 구분",
    "matchWholeWord": "단어 전체 일치",
--- a/src/locales/ru/shared.json
+++ b/src/locales/ru/shared.json
@ -55,6 +55,7 @@
    "files": "Files"
  },
  "placeholders": {
+    "resetInput": "Очистить поле ввода",
    "filter": "Условия фильтрации",
    "matchCase": "Учитывать регистр",
    "matchWholeWord": "Полное совпадение слова",
--- a/src/locales/tr/shared.json
+++ b/src/locales/tr/shared.json
@ -55,6 +55,7 @@
    "files": "Files"
  },
  "placeholders": {
+    "resetInput": "Giriş alanını temizle",
    "filter": "Filtre koşulları",
    "matchCase": "Büyük/Küçük Harf Eşleştir",
    "matchWholeWord": "Tam Kelime Eşleştir",
--- a/src/locales/tt/shared.json
+++ b/src/locales/tt/shared.json
@ -55,6 +55,7 @@
    "files": "Files"
  },
  "placeholders": {
+    "resetInput": "кертү кырын чистарту",
    "filter": "Фильтр шартлары",
    "matchCase": "Регистрны исәпкә алу",
    "matchWholeWord": "Сүзнең тулы туры килүе",
--- a/src/locales/zh/shared.json
+++ b/src/locales/zh/shared.json
@ -55,6 +55,7 @@
    "files": "文件"
  },
  "placeholders": {
+    "resetInput": "清空输入框",
    "filter": "过滤条件",
    "matchCase": "区分大小写",
    "matchWholeWord": "全字匹配",
--- a/src/locales/zhtw/shared.json
+++ b/src/locales/zhtw/shared.json
@ -55,6 +55,7 @@
    "files": "檔案"
  },
  "placeholders": {
+    "resetInput": "清空輸入框",
    "filter": "篩選條件",
    "matchCase": "區分大小寫",
    "matchWholeWord": "完整字詞配對",
--- a/src/types/generated/i18n-keys.ts
+++ b/src/types/generated/i18n-keys.ts
@ -730,6 +730,7 @@ export const translationKeys = [
  "shared.units.hours",
  "shared.units.kilobytes",
  "shared.units.files",
+  "shared.placeholders.resetInput",
  "shared.placeholders.filter",
  "shared.placeholders.matchCase",
  "shared.placeholders.matchWholeWord",
--- a/src/types/generated/i18n-resources.ts
+++ b/src/types/generated/i18n-resources.ts
@ -1318,6 +1318,7 @@ export interface TranslationResources {
        usedTotal: string;
      };
      placeholders: {
+        resetInput: string;
        filter: string;
        matchCase: string;
        matchWholeWord: string;