组件易用性优化，所有组件打开后支持ESC关闭

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'
@@ -24,12 +24,25 @@ export default defineComponent(() => {
   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-') ? (
-                  router.path.startsWith('widget-') ? (
+                  (() => {
-                    (() => {
+                    const name = router.path.split('-')[1]
-                      const name = router.path.split('-')[1]
+                    const selected = widgetList.find((el) => el.name === name)
-                      const selected = widgetList.find((el) => el.name === name)
+                    if (!selected)
-                      if (!selected)
+                      return (
-                        return (
+                        <div class="w-full h-full flex justify-center items-center text-black/80">
-                          <div class="w-full h-full flex justify-center items-center text-black/80">
+                          组件维护中
-                            组件维护中
+                        </div>
-                          </div>
+                      )
-                        )
+                    const compo = selected.modal
-                      const compo = selected.modal
+                    return <compo />
-                      return <compo />
+                  })()
-                    })()
+                ) : null}
-                  ) : null}
               </Transition>
             </div>
           </div>