81 lines
2.8 KiB
TypeScript
81 lines
2.8 KiB
TypeScript
|
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'
|
||
|
|
addIcons(MdClose, MdOpeninfull, MdClosefullscreen)
|
||
|
|
const SearchPage = asyncLoader(() => import('@/layout/header/search/SearchPage'))
|
||
|
|
|
||
|
|
const noFullList: RouteStr[] = ['global-search']
|
||
|
|
|
||
|
|
export default defineComponent(() => {
|
||
|
|
const router = useRouterStore()
|
||
|
|
const show = computed(
|
||
|
|
() =>
|
||
|
|
router.path.startsWith('widget-') ||
|
||
|
|
router.path === 'global-search' ||
|
||
|
|
router.path === 'global-adder'
|
||
|
|
)
|
||
|
|
const full = ref(false)
|
||
|
|
watch(router, () => {
|
||
|
|
full.value = false
|
||
|
|
})
|
||
|
|
return () => (
|
||
|
|
<div class="fixed left-0 top-0 z-20 w-full">
|
||
|
|
{/* 背景遮罩 */}
|
||
|
|
<Transition>
|
||
|
|
{show.value && (
|
||
|
|
<div
|
||
|
|
class="w-full h-screen bg-black/20 backdrop-blur"
|
||
|
|
onClick={() => {
|
||
|
|
router.path = ''
|
||
|
|
}}
|
||
|
|
></div>
|
||
|
|
)}
|
||
|
|
</Transition>
|
||
|
|
{/* 弹框主体 */}
|
||
|
|
<Transition name="modal">
|
||
|
|
{show.value && (
|
||
|
|
<div
|
||
|
|
class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 overflow-hidden transition-all"
|
||
|
|
style={{
|
||
|
|
width: full.value ? '100%' : '900px',
|
||
|
|
height: full.value ? '100vh' : '540px',
|
||
|
|
borderRadius: full.value ? '0' : '1rem'
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{/* 关闭按钮 */}
|
||
|
|
<div
|
||
|
|
class="w-5 h-5 flex justify-center items-center rounded-full overflow-hidden absolute top-2 right-2 bg-red-500/70 hover:bg-red-500 transition-all cursor-pointer z-30"
|
||
|
|
onClick={() => {
|
||
|
|
router.path = ''
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<OhVueIcon name="md-close" scale={0.7} fill="white" />
|
||
|
|
</div>
|
||
|
|
{/* 全屏按钮 */}
|
||
|
|
{noFullList.includes(router.path) ? null : (
|
||
|
|
<div
|
||
|
|
class="w-5 h-5 flex justify-center items-center rounded-full overflow-hidden absolute top-2 right-10 bg-green-500/70 hover:bg-green-500 transition-all cursor-pointer z-30"
|
||
|
|
onClick={() => {
|
||
|
|
full.value = !full.value
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<OhVueIcon
|
||
|
|
name={full.value ? 'md-closefullscreen' : 'md-openinfull'}
|
||
|
|
scale={0.6}
|
||
|
|
fill="white"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
<div class="w-full h-full flex justify-center items-center">
|
||
|
|
<Transition>{router.path === 'global-search' ? <SearchPage /> : null}</Transition>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</Transition>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
})
|