From 165da4e559c7613ad7ba16355ff3ed65e4ad220e Mon Sep 17 00:00:00 2001
From: Gabe <yugang2002@gmail.com>
Date: Tue, 1 Jul 2025 23:34:16 +0800
Subject: [PATCH] fix: rule page: show more button

---
 src/config/i18n.js         |   4 +
 src/views/Options/Rules.js | 271 ++++++++++++++++++-------------------
 2 files changed, 136 insertions(+), 139 deletions(-)

diff --git a/src/config/i18n.js b/src/config/i18n.js
index f556c6d..75eff3f 100644
--- a/src/config/i18n.js
+++ b/src/config/i18n.js
@@ -874,6 +874,10 @@ export const I18N = {
     zh: `更多`,
     en: `More`,
   },
+  less: {
+    zh: `更少`,
+    en: `Less`,
+  },
   fixer_selector: {
     zh: `网页修复选择器`,
     en: `Fixer Selector`,
diff --git a/src/views/Options/Rules.js b/src/views/Options/Rules.js
index ba3d88f..9469723 100644
--- a/src/views/Options/Rules.js
+++ b/src/views/Options/Rules.js
@@ -27,6 +27,7 @@ import Accordion from "@mui/material/Accordion";
 import AccordionSummary from "@mui/material/AccordionSummary";
 import AccordionDetails from "@mui/material/AccordionDetails";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import ExpandLessIcon from "@mui/icons-material/ExpandLess";
 import { useRules } from "../../hooks/Rules";
 import MenuItem from "@mui/material/MenuItem";
 import Grid from "@mui/material/Grid";
@@ -181,6 +182,30 @@ function RuleFields({ rule, rules, setShow, setKeyword }) {
     </MenuItem>
   );
 
+  const ShowMoreButton = showMore ? (
+    <Button
+      size="small"
+      variant="text"
+      onClick={() => {
+        setShowMore(false);
+      }}
+      startIcon={<ExpandLessIcon />}
+    >
+      {i18n("less")}
+    </Button>
+  ) : (
+    <Button
+      size="small"
+      variant="text"
+      onClick={() => {
+        setShowMore(true);
+      }}
+      startIcon={<ExpandMoreIcon />}
+    >
+      {i18n("more")}
+    </Button>
+  );
+
   return (
     <form onSubmit={handleSubmit}>
       <Stack spacing={2}>
@@ -343,112 +368,112 @@ function RuleFields({ rule, rules, setShow, setKeyword }) {
           />
         )}
 
+        <Box>
+          <Grid container spacing={2} columns={12}>
+            <Grid item xs={12} sm={6} md={3} lg={2}>
+              <TextField
+                select
+                size="small"
+                fullWidth
+                name="transOnly"
+                value={transOnly}
+                label={i18n("show_only_translations")}
+                disabled={disabled}
+                onChange={handleChange}
+              >
+                {GlobalItem}
+                <MenuItem value={"false"}>{i18n("disable")}</MenuItem>
+                <MenuItem value={"true"}>{i18n("enable")}</MenuItem>
+              </TextField>
+            </Grid>
+            <Grid item xs={12} sm={6} md={3} lg={2}>
+              <TextField
+                select
+                size="small"
+                fullWidth
+                name="transTiming"
+                value={transTiming}
+                label={i18n("trigger_mode")}
+                disabled={disabled}
+                onChange={handleChange}
+              >
+                {GlobalItem}
+                {OPT_TIMING_ALL.map((item) => (
+                  <MenuItem key={item} value={item}>
+                    {i18n(item)}
+                  </MenuItem>
+                ))}
+              </TextField>
+            </Grid>
+            <Grid item xs={12} sm={6} md={3} lg={2}>
+              <TextField
+                select
+                size="small"
+                fullWidth
+                name="transTag"
+                value={transTag}
+                label={i18n("translation_element_tag")}
+                disabled={disabled}
+                onChange={handleChange}
+              >
+                {GlobalItem}
+                <MenuItem value={"span"}>{`<span>`}</MenuItem>
+                <MenuItem value={"font"}>{`<font>`}</MenuItem>
+              </TextField>
+            </Grid>
+            <Grid item xs={12} sm={6} md={3} lg={2}>
+              <TextField
+                select
+                size="small"
+                fullWidth
+                name="transTitle"
+                value={transTitle}
+                label={i18n("translate_page_title")}
+                disabled={disabled}
+                onChange={handleChange}
+              >
+                {GlobalItem}
+                <MenuItem value={"false"}>{i18n("disable")}</MenuItem>
+                <MenuItem value={"true"}>{i18n("enable")}</MenuItem>
+              </TextField>
+            </Grid>
+            <Grid item xs={12} sm={6} md={3} lg={2}>
+              <TextField
+                select
+                size="small"
+                fullWidth
+                name="transSelected"
+                value={transSelected}
+                label={i18n("translate_selected")}
+                disabled={disabled}
+                onChange={handleChange}
+              >
+                {GlobalItem}
+                <MenuItem value={"false"}>{i18n("disable")}</MenuItem>
+                <MenuItem value={"true"}>{i18n("enable")}</MenuItem>
+              </TextField>
+            </Grid>
+            <Grid item xs={12} sm={6} md={3} lg={2}>
+              <TextField
+                select
+                size="small"
+                fullWidth
+                name="detectRemote"
+                value={detectRemote}
+                label={i18n("detect_lang_remote")}
+                disabled={disabled}
+                onChange={handleChange}
+              >
+                {GlobalItem}
+                <MenuItem value={"false"}>{i18n("disable")}</MenuItem>
+                <MenuItem value={"true"}>{i18n("enable")}</MenuItem>
+              </TextField>
+            </Grid>
+          </Grid>
+        </Box>
+
         {showMore && (
           <>
-            <Box>
-              <Grid container spacing={2} columns={12}>
-                <Grid item xs={12} sm={6} md={3} lg={2}>
-                  <TextField
-                    select
-                    size="small"
-                    fullWidth
-                    name="transOnly"
-                    value={transOnly}
-                    label={i18n("show_only_translations")}
-                    disabled={disabled}
-                    onChange={handleChange}
-                  >
-                    {GlobalItem}
-                    <MenuItem value={"false"}>{i18n("disable")}</MenuItem>
-                    <MenuItem value={"true"}>{i18n("enable")}</MenuItem>
-                  </TextField>
-                </Grid>
-                <Grid item xs={12} sm={6} md={3} lg={2}>
-                  <TextField
-                    select
-                    size="small"
-                    fullWidth
-                    name="transTiming"
-                    value={transTiming}
-                    label={i18n("trigger_mode")}
-                    disabled={disabled}
-                    onChange={handleChange}
-                  >
-                    {GlobalItem}
-                    {OPT_TIMING_ALL.map((item) => (
-                      <MenuItem key={item} value={item}>
-                        {i18n(item)}
-                      </MenuItem>
-                    ))}
-                  </TextField>
-                </Grid>
-                <Grid item xs={12} sm={6} md={3} lg={2}>
-                  <TextField
-                    select
-                    size="small"
-                    fullWidth
-                    name="transTag"
-                    value={transTag}
-                    label={i18n("translation_element_tag")}
-                    disabled={disabled}
-                    onChange={handleChange}
-                  >
-                    {GlobalItem}
-                    <MenuItem value={"span"}>{`<span>`}</MenuItem>
-                    <MenuItem value={"font"}>{`<font>`}</MenuItem>
-                  </TextField>
-                </Grid>
-                <Grid item xs={12} sm={6} md={3} lg={2}>
-                  <TextField
-                    select
-                    size="small"
-                    fullWidth
-                    name="transTitle"
-                    value={transTitle}
-                    label={i18n("translate_page_title")}
-                    disabled={disabled}
-                    onChange={handleChange}
-                  >
-                    {GlobalItem}
-                    <MenuItem value={"false"}>{i18n("disable")}</MenuItem>
-                    <MenuItem value={"true"}>{i18n("enable")}</MenuItem>
-                  </TextField>
-                </Grid>
-                <Grid item xs={12} sm={6} md={3} lg={2}>
-                  <TextField
-                    select
-                    size="small"
-                    fullWidth
-                    name="transSelected"
-                    value={transSelected}
-                    label={i18n("translate_selected")}
-                    disabled={disabled}
-                    onChange={handleChange}
-                  >
-                    {GlobalItem}
-                    <MenuItem value={"false"}>{i18n("disable")}</MenuItem>
-                    <MenuItem value={"true"}>{i18n("enable")}</MenuItem>
-                  </TextField>
-                </Grid>
-                <Grid item xs={12} sm={6} md={3} lg={2}>
-                  <TextField
-                    select
-                    size="small"
-                    fullWidth
-                    name="detectRemote"
-                    value={detectRemote}
-                    label={i18n("detect_lang_remote")}
-                    disabled={disabled}
-                    onChange={handleChange}
-                  >
-                    {GlobalItem}
-                    <MenuItem value={"false"}>{i18n("disable")}</MenuItem>
-                    <MenuItem value={"true"}>{i18n("enable")}</MenuItem>
-                  </TextField>
-                </Grid>
-              </Grid>
-            </Box>
-
             <TextField
               size="small"
               label={i18n("fixer_selector")}
@@ -620,18 +645,7 @@ function RuleFields({ rule, rules, setShow, setKeyword }) {
                       {i18n("delete")}
                     </Button>
                   )}
-                  {!showMore && (
-                    <Button
-                      size="small"
-                      variant="text"
-                      onClick={() => {
-                        setShowMore(true);
-                      }}
-                      startIcon={<ExpandMoreIcon />}
-                    >
-                      {i18n("more")}
-                    </Button>
-                  )}
+                  {ShowMoreButton}
                 </>
               ) : (
                 <>
@@ -651,18 +665,7 @@ function RuleFields({ rule, rules, setShow, setKeyword }) {
                   >
                     {i18n("cancel")}
                   </Button>
-                  {!showMore && (
-                    <Button
-                      size="small"
-                      variant="text"
-                      onClick={() => {
-                        setShowMore(true);
-                      }}
-                      startIcon={<ExpandMoreIcon />}
-                    >
-                      {i18n("more")}
-                    </Button>
-                  )}
+                  {ShowMoreButton}
                 </>
               )}
             </Stack>
@@ -685,17 +688,7 @@ function RuleFields({ rule, rules, setShow, setKeyword }) {
               >
                 {i18n("cancel")}
               </Button>
-              {!showMore && (
-                <Button
-                  size="small"
-                  variant="text"
-                  onClick={() => {
-                    setShowMore(true);
-                  }}
-                >
-                  {i18n("more")}
-                </Button>
-              )}
+              {ShowMoreButton}
             </Stack>
           ))}
       </Stack>