Merge remote-tracking branch 'origin/dev'

.eslintrc.cjs

@@ -14,5 +14,6 @@ module.exports = {
   },
   rules: {
     'vue/multi-word-component-names': 0,
+    'vue/prefer-import-from-vue':0
   }
 }

package.json

@@ -76,6 +76,7 @@
     "async-validator": "^4.2.5",
     "axios": "^1.6.8",
     "csstype": "^3.1.3",
+    "husky": "^9.1.6",
     "lodash-es": "^4.17.21",
     "lodash-unified": "^1.0.3",
     "type-fest": "^4.20.1"

src/hooks/useModal.ts

@@ -0,0 +1,32 @@
+import { watch } from 'vue'
+import { isClient, useEventListener } from '@vueuse/core'
+import { EVENT_CODE } from '@/constants'
+
+import type { Ref } from 'vue'
+
+type ModalInstance = {
+  handleClose: () => void
+}
+
+const modalStack: ModalInstance[] = []
+
+const closeModal = (e: KeyboardEvent) => {
+  if (modalStack.length === 0) return
+  if (e.code === EVENT_CODE.esc) {
+    e.stopPropagation()
+    const topModal = modalStack[modalStack.length - 1]
+    topModal.handleClose()
+  }
+}
+
+export const useModal = (instance: ModalInstance, visibleRef: Ref<boolean>) => {
+  watch(visibleRef, (val) => {
+    if (val) {
+      modalStack.push(instance)
+    } else {
+      modalStack.splice(modalStack.indexOf(instance), 1)
+    }
+  })
+}
+
+if (isClient) useEventListener(document, 'keydown', closeModal)