From dffe6bb85ce21790e9cd8a9558d22ca103065c71 Mon Sep 17 00:00:00 2001
From: expdsn <18111002318@163.com>
Date: Fri, 15 Nov 2024 18:29:48 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BB=84=E4=BB=B6=E6=98=93=E7=94=A8=E6=80=A7?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96=EF=BC=8C=E6=89=80=E6=9C=89=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E6=89=93=E5=BC=80=E5=90=8E=E6=94=AF=E6=8C=81ESC=E5=85=B3?=
 =?UTF-8?q?=E9=97=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/GlobalModal.tsx | 52 ++++++++++++++++++++++++++++-----------------
 1 file changed, 32 insertions(+), 20 deletions(-)

diff --git a/src/GlobalModal.tsx b/src/GlobalModal.tsx
index 42010f5..0486150 100644
--- a/src/GlobalModal.tsx
+++ b/src/GlobalModal.tsx
@@ -1,5 +1,5 @@
 import useRouterStore, { type RouteStr } from '@/useRouterStore'
-import { computed, defineComponent, ref, Transition, watch } from 'vue'
+import { computed, defineComponent, onMounted, onUnmounted, ref, Transition, watch } from 'vue'
 import { OhVueIcon, addIcons } from 'oh-vue-icons'
 import { MdClose, MdOpeninfull, MdClosefullscreen } from 'oh-vue-icons/icons'
 import asyncLoader from './utils/asyncLoader'
@@ -18,18 +18,31 @@ export default defineComponent(() => {
       router.path.startsWith('widget-') ||
       router.path === 'global-search' ||
       router.path === 'global-adder' ||
-      router.path === 'global-background' 
+      router.path === 'global-background'
   )
   const full = ref(false)
   watch(router, () => {
     full.value = false
   })
-
+  onMounted(() => {
+    window.addEventListener('keydown', handleKeydown)
+  })
+  onUnmounted(() => {
+    // 清理事件监听
+    window.removeEventListener('keydown', handleKeydown)
+  })
+  function handleKeydown(e: any) {
+    if (e.key === 'Escape') {
+      router.back()
+    }
+  }
   return () => (
     <div
       class="fixed left-0 top-0  z-50 w-full"
       onContextmenu={(e) => e.stopPropagation()}
-      onKeydown={(e) => e.stopPropagation()}
+      onKeydown={(e) => {
+        e.stopPropagation()
+      }}
     >
       {/* 背景遮罩 */}
       <Transition>
@@ -43,7 +56,7 @@ export default defineComponent(() => {
         )}
       </Transition>
       {/* 弹框主体 */}
-      <Transition >
+      <Transition>
         {show.value && (
           <div
             class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 overflow-hidden "
@@ -93,21 +106,20 @@ export default defineComponent(() => {
                   <AdderPage />
                 ) : router.path === 'global-background' ? (
                   <BackgroundSwtich />
-                ) :
-                  router.path.startsWith('widget-') ? (
-                    (() => {
-                      const name = router.path.split('-')[1]
-                      const selected = widgetList.find((el) => el.name === name)
-                      if (!selected)
-                        return (
-                          <div class="w-full h-full flex justify-center items-center text-black/80">
-                            组件维护中
-                          </div>
-                        )
-                      const compo = selected.modal
-                      return <compo />
-                    })()
-                  ) : null}
+                ) : router.path.startsWith('widget-') ? (
+                  (() => {
+                    const name = router.path.split('-')[1]
+                    const selected = widgetList.find((el) => el.name === name)
+                    if (!selected)
+                      return (
+                        <div class="w-full h-full flex justify-center items-center text-black/80">
+                          组件维护中
+                        </div>
+                      )
+                    const compo = selected.modal
+                    return <compo />
+                  })()
+                ) : null}
               </Transition>
             </div>
           </div>