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

Co-authored-by: Slinetrac <realakayuki@gmail.com>

Changelog.md

@@ -27,6 +27,7 @@
 - 避免脏订阅地址无法 Scheme 导入订阅
 - macOS TUN 覆盖 DNS 时使用 114.114.114.114
 - 连通性测试替换为更快的 https://1.1.1.1
+- 连接、规则、日志等页面的过滤搜索组件新增了清空输入框按钮
 - 链式代理增加明显的入口出口与数据流向标识
 
 </details>

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")}>
+                {!!text && (
-                  <div>
+                  <Tooltip title={t("shared.placeholders.resetInput")}>
-                    <SvgIcon
+                    <IconButton
-                      component={matchCaseIcon}
+                      size="small"
                       {...iconStyle}
-                      aria-label={matchCase ? "active" : "inactive"}
+                      onClick={handleClearInput}
-                      onClick={handleToggleMatchCase}
+                    >
-                    />
+                      <ClearRounded fontSize="inherit" />
-                  </div>
+                    </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
-                    <SvgIcon
+                    component={matchWholeWordIcon}
-                      component={matchWholeWordIcon}
+                    {...iconStyle}
-                      {...iconStyle}
+                    aria-label={matchWholeWord ? "active" : "inactive"}
-                      aria-label={matchWholeWord ? "active" : "inactive"}
+                    onClick={handleToggleMatchWholeWord}
-                      onClick={handleToggleMatchWholeWord}
+                  />
-                    />
-                  </div>
                 </Tooltip>
                 <Tooltip title={t("shared.placeholders.useRegex")}>
-                  <div>
+                  <SvgIcon
-                    <SvgIcon
+                    component={UseRegularExpressionIcon}
-                      component={UseRegularExpressionIcon}
+                    aria-label={useRegularExpression ? "active" : "inactive"}
-                      aria-label={useRegularExpression ? "active" : "inactive"}
+                    {...iconStyle}
-                      {...iconStyle}
+                    onClick={handleToggleUseRegularExpression}
-                      onClick={handleToggleUseRegularExpression}
+                  />
-                    />
-                  </div>
                 </Tooltip>
               </Box>
             ),

src/locales/ar/shared.json

@@ -55,6 +55,7 @@
     "files": "Files"
   },
   "placeholders": {
+    "resetInput": "مربع إدخال واضح",
     "filter": "شروط التصفية",
     "matchCase": "مطابقة الحالة",
     "matchWholeWord": "مطابقة الكلمة بأكملها",

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",

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",

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",

src/locales/fa/shared.json

@@ -55,6 +55,7 @@
     "files": "Files"
   },
   "placeholders": {
+    "resetInput": "پاک کردن فیلد ورودی",
     "filter": "شرایط فیلتر",
     "matchCase": "تطبیق حروف کوچک و بزرگ",
     "matchWholeWord": "تطبیق کل کلمه",

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",

src/locales/jp/shared.json

@@ -55,6 +55,7 @@
     "files": "Files"
   },
   "placeholders": {
+    "resetInput": "入力フィールドをクリア",
     "filter": "フィルタリング条件",
     "matchCase": "大文字小文字を区別する",
     "matchWholeWord": "完全一致",

src/locales/ko/shared.json

@@ -55,6 +55,7 @@
     "files": "파일"
   },
   "placeholders": {
+    "resetInput": "입력 필드 지우기",
     "filter": "필터 조건",
     "matchCase": "대/소문자 구분",
     "matchWholeWord": "단어 전체 일치",

src/locales/ru/shared.json

@@ -55,6 +55,7 @@
     "files": "Files"
   },
   "placeholders": {
+    "resetInput": "Очистить поле ввода",
     "filter": "Условия фильтрации",
     "matchCase": "Учитывать регистр",
     "matchWholeWord": "Полное совпадение слова",

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",

src/locales/tt/shared.json

@@ -55,6 +55,7 @@
     "files": "Files"
   },
   "placeholders": {
+    "resetInput": "кертү кырын чистарту",
     "filter": "Фильтр шартлары",
     "matchCase": "Регистрны исәпкә алу",
     "matchWholeWord": "Сүзнең тулы туры килүе",

src/locales/zh/shared.json

@@ -55,6 +55,7 @@
     "files": "文件"
   },
   "placeholders": {
+    "resetInput": "清空输入框",
     "filter": "过滤条件",
     "matchCase": "区分大小写",
     "matchWholeWord": "全字匹配",

src/locales/zhtw/shared.json

@@ -55,6 +55,7 @@
     "files": "檔案"
   },
   "placeholders": {
+    "resetInput": "清空輸入框",
     "filter": "篩選條件",
     "matchCase": "區分大小寫",
     "matchWholeWord": "完整字詞配對",

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",

src/types/generated/i18n-resources.ts

@@ -1318,6 +1318,7 @@ export interface TranslationResources {
         usedTotal: string;
       };
       placeholders: {
+        resetInput: string;
         filter: string;
         matchCase: string;
         matchWholeWord: string;