Add cors (#3909)

* add external `cors` control panel

* optimize format

* fix-script.rs

* fix-service.rs

* fix-rs

async_proxy_query.rs

event_driven_proxy.rs

service_ipc.rs

service.rs

sysopt.rs

* lower the prettier version number to 3.5.3

* Revert "lower the prettier version number to 3.5.3"

This reverts commit 0f1c3dfa8abad9f451f32d2da6211e86341bda84.

* fix: prttier erros

* add developer environment detection and controlled the display of development environment URL

* submit required

* fix-external-controller-cors

* use the custom component ToggleButton to ensure a uniform button style

* fix-tsx

hotkey-viewer.tsx

external-controller-cors.tsx

* fix-bug_report.yml

* remove the annoying title

* fix-write overload problem

* Individual button settings

* fix-setting-clash.tsx

---------

Co-authored-by: Tunglies <77394545+Tunglies@users.noreply.github.com>
Co-authored-by: Tunglies <tunglies.dev@outlook.com>

src/components/setting/mods/hotkey-viewer.tsx

@@ -1,12 +1,62 @@
 import { forwardRef, useImperativeHandle, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useLockFn } from "ahooks";
-import { styled, Typography, Switch } from "@mui/material";
+import { styled, Typography } from "@mui/material";
 import { useVerge } from "@/hooks/use-verge";
 import { BaseDialog, DialogRef } from "@/components/base";
 import { HotkeyInput } from "./hotkey-input";
 import { showNotice } from "@/services/noticeService";
 
+// 修复后的自定义开关组件
+const ToggleButton = styled("label")`
+  position: relative;
+  display: inline-block;
+  width: 48px;
+  height: 24px;
+
+  input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+  }
+
+  .slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #e0e0e0;
+    transition: 0.4s;
+    border-radius: 34px;
+
+    &:before {
+      position: absolute;
+      content: "";
+      height: 16px;
+      width: 16px;
+      left: 4px;
+      bottom: 4px;
+      background-color: white;
+      transition: 0.4s;
+      border-radius: 50%;
+    }
+  }
+
+  input:checked + .slider {
+    background-color: #2196f3;
+  }
+
+  input:focus + .slider {
+    box-shadow: 0 0 1px #2196f3;
+  }
+
+  input:checked + .slider:before {
+    transform: translateX(24px);
+  }
+`;
+
 const ItemWrapper = styled("div")`
   display: flex;
   align-items: center;
@@ -97,11 +147,15 @@ export const HotkeyViewer = forwardRef<DialogRef>((props, ref) => {
     >
       <ItemWrapper style={{ marginBottom: 16 }}>
         <Typography>{t("Enable Global Hotkey")}</Typography>
-        <Switch
-          edge="end"
-          checked={enableGlobalHotkey}
-          onChange={(e) => setEnableHotkey(e.target.checked)}
-        />
+        <ToggleButton>
+          <input
+            type="checkbox"
+            checked={enableGlobalHotkey}
+            onChange={(e) => setEnableHotkey(e.target.checked)}
+            id="global-hotkey-toggle"
+          />
+          <span className="slider"></span>
+        </ToggleButton>
       </ItemWrapper>
 
       {HOTKEY_FUNC.map((func) => (