From 977ee0208cb9f5286139104e0ba9b5afaf3b7a7e Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Wed, 27 Jul 2022 10:44:50 +0800
Subject: [PATCH] feat: add shortcut support for user editing form

Signed-off-by: Ryan Wang <i@ryanc.cc>
---
 .../users/components/UserEditingModal.vue     | 38 +++++++++++++------
 1 file changed, 27 insertions(+), 11 deletions(-)

diff --git a/src/modules/system/users/components/UserEditingModal.vue b/src/modules/system/users/components/UserEditingModal.vue
index de585e807..39932fa60 100644
--- a/src/modules/system/users/components/UserEditingModal.vue
+++ b/src/modules/system/users/components/UserEditingModal.vue
@@ -6,16 +6,18 @@ import type { Role, User } from "@halo-dev/api-client";
 import {
   IconCodeBoxLine,
   IconEye,
-  IconSave,
   VButton,
   VCodemirror,
   VModal,
+  VSpace,
 } from "@halo-dev/components";
 import { v4 as uuid } from "uuid";
 import { roleLabels } from "@/constants/labels";
 import { rbacAnnotations } from "@/constants/annotations";
 import YAML from "yaml";
 import cloneDeep from "lodash.clonedeep";
+import { useMagicKeys } from "@vueuse/core";
+import { submitForm } from "@formkit/core";
 
 const props = defineProps({
   visible: {
@@ -82,7 +84,20 @@ const basicRoles = computed(() => {
   );
 });
 
+const { Command_Enter } = useMagicKeys();
+
 watch(props, (newVal) => {
+  let keyboardWatcher;
+  if (newVal.visible) {
+    keyboardWatcher = watch(Command_Enter, (v) => {
+      if (v) {
+        submitForm("user-form");
+      }
+    });
+  } else {
+    keyboardWatcher?.unwatch();
+  }
+
   if (newVal.visible && props.user) {
     formState.value.user = cloneDeep(props.user);
     return;
@@ -148,6 +163,7 @@ const handleRawModeChange = () => {
     formState.value.user = YAML.parse(formState.value.raw);
   }
 };
+
 onMounted(handleFetchRoles);
 </script>
 <template>
@@ -223,16 +239,16 @@ onMounted(handleFetchRoles);
       </FormKit>
     </div>
     <template #footer>
-      <VButton
-        :loading="formState.saving"
-        type="secondary"
-        @click="$formkit.submit('user-form')"
-      >
-        <template #icon>
-          <IconSave class="h-full w-full" />
-        </template>
-        保存
-      </VButton>
+      <VSpace>
+        <VButton
+          :loading="formState.saving"
+          type="secondary"
+          @click="$formkit.submit('user-form')"
+        >
+          保存 ⌘ + ↵
+        </VButton>
+        <VButton @click="handleVisibleChange(false)">取消 Esc</VButton>
+      </VSpace>
     </template>
   </VModal>
 </template>