webfix setting

src/views/Options/Navigator.js

@@ -11,6 +11,7 @@ import DesignServicesIcon from "@mui/icons-material/DesignServices";
 import { useI18n } from "../../hooks/I18n";
 import SyncIcon from "@mui/icons-material/Sync";
 import ApiIcon from "@mui/icons-material/Api";
+import SendTimeExtensionIcon from "@mui/icons-material/SendTimeExtension";
 
 function LinkItem({ label, url, icon }) {
   const match = useMatch(url);
@@ -49,6 +50,12 @@ export default function Navigator(props) {
       url: "/sync",
       icon: <SyncIcon />,
     },
+    {
+      id: "webfix",
+      label: i18n("patch_setting"),
+      url: "/webfix",
+      icon: <SendTimeExtensionIcon />,
+    },
     { id: "about", label: i18n("about"), url: "/about", icon: <InfoIcon /> },
   ];
   return (

src/views/Options/Webfix.js

@@ -0,0 +1,89 @@
+import Stack from "@mui/material/Stack";
+import TextField from "@mui/material/TextField";
+import { useState } from "react";
+import { useI18n } from "../../hooks/I18n";
+import Typography from "@mui/material/Typography";
+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 Alert from "@mui/material/Alert";
+import Box from "@mui/material/Box";
+import { sites as webfixSites } from "../../libs/webfix";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import Switch from "@mui/material/Switch";
+import { useSetting } from "../../hooks/Setting";
+
+function ApiFields({ site }) {
+  const { selector, rootSlector } = site;
+  return (
+    <Stack spacing={3}>
+      <TextField
+        size="small"
+        label={"rootSlector"}
+        name="rootSlector"
+        value={rootSlector || "document"}
+        disabled
+      />
+      <TextField
+        size="small"
+        label={"selector"}
+        name="selector"
+        value={selector}
+        disabled
+      />
+    </Stack>
+  );
+}
+
+function ApiAccordion({ site }) {
+  const [expanded, setExpanded] = useState(false);
+
+  const handleChange = (e) => {
+    setExpanded((pre) => !pre);
+  };
+
+  return (
+    <Accordion expanded={expanded} onChange={handleChange}>
+      <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+        <Typography>{site.pattern}</Typography>
+      </AccordionSummary>
+      <AccordionDetails>
+        {expanded && <ApiFields site={site} />}
+      </AccordionDetails>
+    </Accordion>
+  );
+}
+
+export default function Webfix() {
+  const i18n = useI18n();
+  const { setting, updateSetting } = useSetting();
+  return (
+    <Box>
+      <Stack spacing={3}>
+        <Alert severity="info">{i18n("patch_setting_help")}</Alert>
+
+        <FormControlLabel
+          control={
+            <Switch
+              size="small"
+              checked={!!setting.injectWebfix}
+              onChange={() => {
+                updateSetting({
+                  injectWebfix: !setting.injectWebfix,
+                });
+              }}
+            />
+          }
+          label={i18n("inject_webfix")}
+        />
+
+        <Box>
+          {webfixSites.map((site) => (
+            <ApiAccordion key={site.pattern} site={site} />
+          ))}
+        </Box>
+      </Stack>
+    </Box>
+  );
+}

src/views/Options/index.js

@@ -18,6 +18,7 @@ import Stack from "@mui/material/Stack";
 import { adaptScript } from "../../libs/gm";
 import Alert from "@mui/material/Alert";
 import Apis from "./Apis";
+import Webfix from "./Webfix";
 
 export default function Options() {
   const [error, setError] = useState("");
@@ -127,6 +128,7 @@ export default function Options() {
                 <Route path="rules" element={<Rules />} />
                 <Route path="apis" element={<Apis />} />
                 <Route path="sync" element={<SyncSetting />} />
+                <Route path="webfix" element={<Webfix />} />
                 <Route path="about" element={<About />} />
               </Route>
             </Routes>