131 lines
4.6 KiB
TypeScript
131 lines
4.6 KiB
TypeScript
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>
|
|
)
|
|
})
|