fix shortcut

src/hooks/Setting.js

@@ -12,7 +12,10 @@ const SettingContext = createContext({
 });
 
 export function SettingProvider({ children }) {
-  const { data, update, reload } = useStorage(STOKEY_SETTING, DEFAULT_SETTING);
+  const { data, update, reload, loading } = useStorage(
+    STOKEY_SETTING,
+    DEFAULT_SETTING
+  );
   const {
     sync: { settingUpdateAt },
     updateSync,
@@ -36,6 +39,10 @@ export function SettingProvider({ children }) {
     [settingUpdateAt, update, updateSync, syncSetting]
   );
 
+  if (loading) {
+    return;
+  }
+
   return (
     <SettingContext.Provider
       value={{

src/hooks/Storage.js

@@ -2,6 +2,7 @@ import { useCallback, useEffect, useState } from "react";
 import { storage } from "../libs/storage";
 
 export function useStorage(key, defaultVal = null) {
+  const [loading, setLoading] = useState(true);
   const [data, setData] = useState(defaultVal);
 
   const save = useCallback(
@@ -36,9 +37,16 @@ export function useStorage(key, defaultVal = null) {
 
   useEffect(() => {
     (async () => {
+      try {
+        setLoading(true);
         await reload();
+      } catch (err) {
+        //
+      } finally {
+        setLoading(false);
+      }
     })();
   }, [reload]);
 
-  return { data, save, update, remove, reload };
+  return { data, save, update, remove, reload, loading };
 }

src/libs/shortcut.js

@@ -4,24 +4,34 @@ import { isSameSet } from "./utils";
  * 键盘快捷键监听
  * @param {*} fn
  * @param {*} target
+ * @param {*} timeout
  * @returns
  */
-export const shortcutListener = (fn, target = document) => {
-  // todo: let done = false;
+export const shortcutListener = (fn, target = document, timeout = 3000) => {
   const allkeys = new Set();
   const curkeys = new Set();
+  let timer = null;
 
   const handleKeydown = (e) => {
+    timer && clearTimeout(timer);
+    timer = setTimeout(() => {
+      allkeys.clear();
+      curkeys.clear();
+      clearTimeout(timer);
+      timer = null;
+    }, timeout);
+
     if (e.code) {
       allkeys.add(e.key);
       curkeys.add(e.key);
+      fn([...curkeys], [...allkeys]);
     }
   };
 
   const handleKeyup = (e) => {
     curkeys.delete(e.key);
     if (curkeys.size === 0) {
-      fn([...allkeys]);
+      fn([...curkeys], [...allkeys]);
       allkeys.clear();
     }
   };
@@ -42,8 +52,8 @@ export const shortcutListener = (fn, target = document) => {
  * @returns
  */
 export const shortcutRegister = (targetKeys, fn, target = document) => {
-  return shortcutListener((keys) => {
-    if (isSameSet(new Set(targetKeys), new Set(keys))) {
+  return shortcutListener((curkeys) => {
+    if (isSameSet(new Set(targetKeys), new Set(curkeys))) {
       fn();
     }
   }, target);

src/views/Options/Setting.js

@@ -33,23 +33,29 @@ function ShortcutItem({ action, label }) {
   const { shortcut, setShortcut } = useShortcut(action);
   const [disabled, setDisabled] = useState(true);
   const inputRef = useRef(null);
+  const [formval, setFormval] = useState(shortcut);
 
   useEffect(() => {
     if (disabled) {
+      setFormval(shortcut);
       return;
     }
 
     inputRef.current.focus();
-    setShortcut([]);
+    setFormval([]);
 
-    const clearShortcut = shortcutListener((keys) => {
-      setShortcut(keys);
+    const clearShortcut = shortcutListener((curkeys, allkeys) => {
+      setFormval(allkeys);
+      if (curkeys.length === 0) {
+        setDisabled(true);
+        setShortcut(allkeys);
+      }
     }, inputRef.current);
 
     return () => {
       clearShortcut();
     };
-  }, [disabled, setShortcut]);
+  }, [disabled, setShortcut, shortcut]);
 
   return (
     <Stack direction="row">
@@ -57,7 +63,7 @@ function ShortcutItem({ action, label }) {
         size="small"
         label={label}
         name={label}
-        value={shortcut.join(" + ")}
+        value={formval.join(" + ")}
         fullWidth
         inputRef={inputRef}
         disabled={disabled}