xyyd-fatfox/src/GlobalModal.tsx

118 lines
4.3 KiB
TypeScript
Raw Normal View History

2024-09-09 17:53:07 +08:00
import useRouterStore, { type RouteStr } from '@/useRouterStore'
import { computed, defineComponent, 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'
2024-09-29 15:18:00 +08:00
import widgetList from '@/widgets'
2024-09-09 17:53:07 +08:00
addIcons(MdClose, MdOpeninfull, MdClosefullscreen)
const SearchPage = asyncLoader(() => import('@/layout/header/search/SearchPage'))
2024-09-11 18:00:15 +08:00
const AdderPage = asyncLoader(() => import('@/layout/adder/AdderPage'))
2024-09-30 18:31:24 +08:00
const BackgroundSwtich = asyncLoader(() => import('@/layout/background/BackgroundSwtich'))
2024-09-09 17:53:07 +08:00
2024-10-15 16:25:01 +08:00
const fullList: RouteStr[] = []
2024-09-09 17:53:07 +08:00
export default defineComponent(() => {
const router = useRouterStore()
const show = computed(
() =>
router.path.startsWith('widget-') ||
router.path === 'global-search' ||
2024-09-30 18:31:24 +08:00
router.path === 'global-adder' ||
router.path === 'global-background'
2024-09-09 17:53:07 +08:00
)
const full = ref(false)
watch(router, () => {
full.value = false
})
2024-11-11 17:22:56 +08:00
2024-09-09 17:53:07 +08:00
return () => (
2024-11-11 11:53:26 +08:00
<div
2024-11-11 17:22:56 +08:00
class="fixed left-0 top-0 z-50 w-full"
2024-11-11 11:53:26 +08:00
onContextmenu={(e) => e.stopPropagation()}
onKeydown={(e) => e.stopPropagation()}
>
2024-09-09 17:53:07 +08:00
{/* 背景遮罩 */}
<Transition>
{show.value && (
<div
class="w-full h-screen bg-black/20 backdrop-blur"
onClick={() => {
2024-09-29 16:16:13 +08:00
router.back()
2024-09-09 17:53:07 +08:00
}}
></div>
)}
</Transition>
{/* 弹框主体 */}
2024-11-11 17:22:56 +08:00
<Transition >
2024-09-09 17:53:07 +08:00
{show.value && (
<div
2024-11-11 17:22:56 +08:00
class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 overflow-hidden "
2024-09-09 17:53:07 +08:00
style={{
2024-10-15 16:25:01 +08:00
width: full.value ? '100%' : '984px',
height: full.value ? '100vh' : '580px',
2024-09-09 17:53:07 +08:00
borderRadius: full.value ? '0' : '1rem'
}}
>
{/* 关闭按钮 */}
<div
2024-09-11 18:00:15 +08:00
class={
2024-10-15 16:25:01 +08:00
'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 ' +
2024-10-18 18:17:45 +08:00
(router.path === 'global-adder' ? 'top-6 right-8' : 'top-4 right-6')
2024-09-11 18:00:15 +08:00
}
2024-09-09 17:53:07 +08:00
onClick={() => {
2024-09-29 16:16:13 +08:00
router.back()
2024-09-09 17:53:07 +08:00
}}
>
2024-10-15 16:25:01 +08:00
<div class={' items-center justify-center hidden group-hover:flex'}>
<OhVueIcon name="md-close" scale={0.6} fill="white" />
</div>
2024-09-09 17:53:07 +08:00
</div>
{/* 全屏按钮 */}
2024-10-15 16:25:01 +08:00
{!fullList.includes(router.path) ? null : (
2024-09-09 17:53:07 +08:00
<div
2024-10-18 18:17:45 +08:00
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"
2024-09-09 17:53:07 +08:00
onClick={() => {
full.value = !full.value
}}
>
2024-10-15 16:25:01 +08:00
<div class={' items-center justify-center hidden group-hover:flex'}>
<OhVueIcon
name={full.value ? 'md-closefullscreen' : 'md-openinfull'}
scale={0.6}
fill="white"
/>
</div>
2024-09-09 17:53:07 +08:00
</div>
)}
<div class="w-full h-full flex justify-center items-center">
2024-09-11 18:00:15 +08:00
<Transition>
{router.path === 'global-search' ? (
<SearchPage />
) : router.path === 'global-adder' ? (
<AdderPage />
2024-09-30 18:31:24 +08:00
) : router.path === 'global-background' ? (
2024-10-15 16:25:01 +08:00
<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}
2024-09-11 18:00:15 +08:00
</Transition>
2024-09-09 17:53:07 +08:00
</div>
</div>
)}
</Transition>
</div>
)
})