xyyd-fatfox/src/GlobalModal.tsx

import useRouterStore, { type RouteStr } from '@/useRouterStore'
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'
import widgetList from '@/widgets'
addIcons(MdClose, MdOpeninfull, MdClosefullscreen)
const SearchPage = asyncLoader(() => import('@/layout/header/search/SearchPage'))
const AdderPage = asyncLoader(() => import('@/layout/adder/AdderPage'))
const BackgroundSwtich = asyncLoader(() => import('@/layout/background/BackgroundSwtich'))

const fullList: RouteStr[] = []

export default defineComponent(() => {
  const router = useRouterStore()
  const show = computed(
    () =>
      router.path.startsWith('widget-') ||
      router.path === 'global-search' ||
      router.path === 'global-adder' ||
      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()
      }}
    >
      {/* 背景遮罩 */}
      <Transition>
        {show.value && (
          <div
            class="w-full h-screen bg-black/20 backdrop-blur"
            onClick={() => {
              router.back()
            }}
          ></div>
        )}
      </Transition>
      {/* 弹框主体 */}
      <Transition>
        {show.value && (
          <div
            class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 overflow-hidden "
            style={{
              width: full.value ? '100%' : '984px',
              height: full.value ? '100vh' : '580px',
              borderRadius: full.value ? '0' : '1rem'
            }}
          >
            {/* 关闭按钮 */}
            <div
              class={
                'w-[16px] h-[16px] group flex justify-center items-center rounded-full overflow-hidden absolute bg-red-500/70 hover:bg-red-500 transition-all cursor-pointer z-30 ' +
                (router.path === 'global-adder' ? 'top-6 right-8' : 'top-4 right-6')
              }
              onClick={() => {
                router.back()
              }}
            >
              <div class={' items-center justify-center hidden group-hover:flex'}>
                <OhVueIcon name="md-close" scale={0.6} fill="white" />
              </div>
            </div>
            {/* 全屏按钮 */}
            {!fullList.includes(router.path) ? null : (
              <div
                class="w-[16px] group h-[16px] flex justify-center items-center rounded-full overflow-hidden absolute top-4 right-12 bg-green-500/70 hover:bg-green-500 transition-all cursor-pointer z-30"
                onClick={() => {
                  full.value = !full.value
                }}
              >
                <div class={' items-center justify-center hidden group-hover:flex'}>
                  <OhVueIcon
                    name={full.value ? 'md-closefullscreen' : 'md-openinfull'}
                    scale={0.6}
                    fill="white"
                  />
                </div>
              </div>
            )}

            <div class="w-full h-full flex justify-center items-center">
              <Transition>
                {router.path === 'global-search' ? (
                  <SearchPage />
                ) : router.path === 'global-adder' ? (
                  <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}
              </Transition>
            </div>
          </div>
        )}
      </Transition>
    </div>
  )
})