share rules

src/views/Options/Rules.js

@@ -32,9 +32,12 @@ import Radio from "@mui/material/Radio";
 import RadioGroup from "@mui/material/RadioGroup";
 import DeleteIcon from "@mui/icons-material/Delete";
 import IconButton from "@mui/material/IconButton";
+import ShareIcon from "@mui/icons-material/Share";
 import SyncIcon from "@mui/icons-material/Sync";
 import { useSubrules } from "../../hooks/Rules";
 import { rulesCache, tryLoadRules } from "../../libs/rules";
+import { useAlert } from "../../hooks/Alert";
+import { loadSyncOpt, syncShareRules } from "../../libs/sync";
 
 function RuleFields({ rule, rules, setShow }) {
   const initFormValues = rule || { ...DEFAULT_RULE, transOpen: "true" };
@@ -393,12 +396,56 @@ function UploadButton({ onChange, text }) {
   );
 }
 
+function ShareButton({ rules, injectRules, selectedSub }) {
+  const alert = useAlert();
+  const i18n = useI18n();
+  const handleClick = async () => {
+    try {
+      const { syncUrl, syncKey } = await loadSyncOpt();
+      if (!syncUrl || !syncKey) {
+        alert.warning(i18n("error_sync_setting"));
+        return;
+      }
+
+      const shareRules = [...rules.list];
+      if (injectRules) {
+        const subRules = await tryLoadRules(selectedSub?.url);
+        shareRules.splice(-1, 0, ...subRules);
+      }
+
+      const url = await syncShareRules({
+        rules: shareRules,
+        syncUrl,
+        syncKey,
+      });
+
+      window.open(url, "_blank");
+    } catch (err) {
+      alert.warning(i18n("error_got_some_wrong"));
+      console.log("[share rules]", err);
+    }
+  };
+
+  return (
+    <Button
+      size="small"
+      variant="outlined"
+      onClick={handleClick}
+      startIcon={<ShareIcon />}
+    >
+      {"分享"}
+    </Button>
+  );
+}
+
 function UserRules() {
   const i18n = useI18n();
   const rules = useRules();
   const [showAdd, setShowAdd] = useState(false);
   const setting = useSetting();
   const updateSetting = useSettingUpdate();
+  const subrules = useSubrules();
+  const selectedSub = subrules.list.find((item) => item.selected);
 
   const injectRules = !!setting?.injectRules;
 
@@ -451,6 +498,12 @@ function UserRules() {
           text={i18n("export")}
         />
 
+        <ShareButton
+          rules={rules}
+          injectRules={injectRules}
+          selectedSub={selectedSub}
+        />
+
         <FormControlLabel
           control={
             <Switch

src/views/Options/SyncSetting.js

@@ -8,6 +8,7 @@ import Link from "@mui/material/Link";
 import { URL_KISS_WORKER } from "../../config";
 import { debounce } from "../../libs/utils";
 import { useMemo } from "react";
+import { syncAll } from "../../libs/sync";
 
 export default function SyncSetting() {
   const i18n = useI18n();
@@ -15,13 +16,14 @@ export default function SyncSetting() {
 
   const handleChange = useMemo(
     () =>
-      debounce((e) => {
+      debounce(async (e) => {
         e.preventDefault();
         const { name, value } = e.target;
-        sync.update({
+        await sync.update({
           [name]: value,
         });
-      }, 500),
+        await syncAll();
+      }, 1000),
     [sync]
   );
 

src/views/Options/index.js

@@ -11,6 +11,7 @@ import { isGm } from "../../libs/browser";
 import { sleep } from "../../libs/utils";
 import CircularProgress from "@mui/material/CircularProgress";
 import { syncAll } from "../../libs/sync";
+import { AlertProvider } from "../../hooks/Alert";
 
 export default function Options() {
   const [error, setError] = useState(false);
@@ -69,16 +70,18 @@ export default function Options() {
   return (
     <StoragesProvider>
       <ThemeProvider>
-        <HashRouter>
-          <Routes>
-            <Route path="/" element={<Layout />}>
-              <Route index element={<Setting />} />
-              <Route path="rules" element={<Rules />} />
-              <Route path="sync" element={<SyncSetting />} />
-              <Route path="about" element={<About />} />
-            </Route>
-          </Routes>
-        </HashRouter>
+        <AlertProvider>
+          <HashRouter>
+            <Routes>
+              <Route path="/" element={<Layout />}>
+                <Route index element={<Setting />} />
+                <Route path="rules" element={<Rules />} />
+                <Route path="sync" element={<SyncSetting />} />
+                <Route path="about" element={<About />} />
+              </Route>
+            </Routes>
+          </HashRouter>
+        </AlertProvider>
       </ThemeProvider>
     </StoragesProvider>
   );