快捷键保存配置

web/src/components/Setting/index.tsx

@@ -1,7 +1,7 @@
 import { Editor } from "@monaco-editor/react"
 import { Button, Space, message } from "antd"
 import { defaultValue } from "../../config.ts"
-import { useState } from "react"
+import { useEffect, useState } from "react"
 import { useGlobalConfig } from "../../context/globalConfig"
 import { isJSON } from "../../utils.ts"
 
@@ -18,6 +18,7 @@ function Settting() {
       })
     }
     setConfig(JSON.parse(value))
+    format()
     messageApi.open({
       type: "success",
       content: "修改成功",
@@ -26,32 +27,48 @@ function Settting() {
   const reset = () => {
     setValue(JSON.stringify(defaultValue, null, 2))
   }
+  const share = () => {
+    console.log("share")
+  }
   const format = () => {
     const v = JSON.parse(value)
     setValue(JSON.stringify(v, null, 2))
   }
+  useEffect(() => {
+    document.addEventListener("keydown", handleSaveKeyboardAction, false)
+    return () => {
+      document.removeEventListener("keydown", handleSaveKeyboardAction, false)
+    }
+  }, [])
+
+  const handleSaveKeyboardAction = (e) => {
+    if ((e.ctrlKey && e.key === "s") || (e.metaKey && e.key === "s")) {
+      e.preventDefault()
+      submit()
+    }
+  }
 
   return (
     <div className="w-full">
       {contextHolder}
+      <Space className="mb-2 float-right">
+        <Button type="primary" className="bg-blue-500" onClick={reset}>
+          恢复模板
+        </Button>
+        <Button type="primary" className="bg-blue-500" onClick={share}>
+          分享配置
+        </Button>
+        <Button type="primary" className="bg-blue-500" onClick={submit}>
+          确认
+        </Button>
+      </Space>
       <Editor
         height="800px"
         language="json"
         theme="vs-dark"
         value={value}
         onChange={setValue}
       />
-      <Space>
-        <Button type="primary" className="bg-blue-500 mt-5" onClick={reset}>
-          恢复模板
-        </Button>
-        <Button type="primary" className="bg-blue-500 mt-5" onClick={format}>
-          格式化代码
-        </Button>
-        <Button type="primary" className="bg-blue-500 mt-5" onClick={submit}>
-          确认
-        </Button>
-      </Space>
     </div>
   )
 }