fix: check hotkey and optimize hotkey input, close #287

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

@@ -1,6 +1,7 @@
+import { useRef, useState } from "react";
 import { alpha, Box, IconButton, styled } from "@mui/material";
 import { DeleteRounded } from "@mui/icons-material";
-import parseHotkey from "@/utils/parse-hotkey";
+import { parseHotkey } from "@/utils/parse-hotkey";
 
 const KeyWrapper = styled("div")(({ theme }) => ({
   position: "relative",
@@ -54,10 +55,20 @@ interface Props {
 export const HotkeyInput = (props: Props) => {
   const { value, onChange } = props;
 
+  const changeRef = useRef<string[]>([]);
+  const [keys, setKeys] = useState(value);
+
   return (
     <Box sx={{ display: "flex", alignItems: "center" }}>
       <KeyWrapper>
         <input
+          onKeyUp={() => {
+            const ret = changeRef.current.slice();
+            if (ret.length) {
+              onChange(ret);
+              changeRef.current = [];
+            }
+          }}
           onKeyDown={(e) => {
             const evt = e.nativeEvent;
             e.preventDefault();
@@ -66,13 +77,13 @@ export const HotkeyInput = (props: Props) => {
             const key = parseHotkey(evt.key);
             if (key === "UNIDENTIFIED") return;
 
-            const newList = [...new Set([...value, key])];
-            onChange(newList);
+            changeRef.current = [...new Set([...changeRef.current, key])];
+            setKeys(changeRef.current);
           }}
         />
 
         <div className="list">
-          {value.map((key) => (
+          {keys.map((key) => (
             <div key={key} className="item">
               {key}
             </div>
@@ -84,7 +95,10 @@ export const HotkeyInput = (props: Props) => {
         size="small"
         title="Delete"
         color="inherit"
-        onClick={() => onChange([])}
+        onClick={() => {
+          onChange([]);
+          setKeys([]);
+        }}
       >
         <DeleteRounded fontSize="inherit" />
       </IconButton>

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

@@ -73,7 +73,7 @@ export const HotkeyViewer = forwardRef<DialogRef>((props, ref) => {
       .filter(Boolean);
 
     try {
-      patchVerge({ hotkeys });
+      await patchVerge({ hotkeys });
       setOpen(false);
     } catch (err: any) {
       Notice.error(err.message || err.toString());

src/utils/parse-hotkey.ts

@@ -1,4 +1,26 @@
-const parseHotkey = (key: string) => {
+const KEY_MAP: Record<string, string> = {
+  '"': "'",
+  ":": ";",
+  "?": "/",
+  ">": ".",
+  "<": ",",
+  "{": "[",
+  "}": "]",
+  "|": "\\",
+  "!": "1",
+  "@": "2",
+  "#": "3",
+  $: "4",
+  "%": "5",
+  "^": "6",
+  "&": "7",
+  "*": "8",
+  "(": "9",
+  ")": "0",
+  "~": "`",
+};
+
+export const parseHotkey = (key: string) => {
   let temp = key.toUpperCase();
 
   if (temp.startsWith("ARROW")) {
@@ -20,10 +42,7 @@ const parseHotkey = (key: string) => {
       return "CMD";
     case " ":
       return "SPACE";
-
     default:
-      return temp;
+      return KEY_MAP[temp] || temp;
   }
 };
-
-export default parseHotkey;