xyyd
/
xyyd-fatfox
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

This commit is contained in:
expdsn 2024-11-15 18:29:48 +08:00
parent 5fbe526e2e
commit dffe6bb85c
1 changed files with 32 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
src/GlobalModal.tsx
View File

@ -1,5 +1,5 @@
import useRouterStore, { type RouteStr } from '@/useRouterStore' 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 { OhVueIcon, addIcons } from 'oh-vue-icons'
import { MdClose, MdOpeninfull, MdClosefullscreen } from 'oh-vue-icons/icons' import { MdClose, MdOpeninfull, MdClosefullscreen } from 'oh-vue-icons/icons'
import asyncLoader from './utils/asyncLoader' import asyncLoader from './utils/asyncLoader'
@ -18,18 +18,31 @@ export default defineComponent(() => {
router.path.startsWith('widget-') || router.path.startsWith('widget-') ||
router.path === 'global-search' || router.path === 'global-search' ||
router.path === 'global-adder' || router.path === 'global-adder' ||
router.path === 'global-background' router.path === 'global-background'
) )
const full = ref(false) const full = ref(false)
watch(router, () => { watch(router, () => {
full.value = false full.value = false
}) })
onMounted(() => {
window.addEventListener('keydown', handleKeydown)
})
onUnmounted(() => {
// 清理事件监听
window.removeEventListener('keydown', handleKeydown)
})
function handleKeydown(e: any) {
if (e.key === 'Escape') {
router.back()
}
}
return () => ( return () => (
<div <div
class="fixed left-0 top-0 z-50 w-full" class="fixed left-0 top-0 z-50 w-full"
onContextmenu={(e) => e.stopPropagation()} onContextmenu={(e) => e.stopPropagation()}
onKeydown={(e) => e.stopPropagation()} onKeydown={(e) => {
e.stopPropagation()
}}
> >
{/* 背景遮罩 */} {/* 背景遮罩 */}
<Transition> <Transition>
@ -43,7 +56,7 @@ export default defineComponent(() => {
)} )}
</Transition> </Transition>
{/* 弹框主体 */} {/* 弹框主体 */}
<Transition > <Transition>
{show.value && ( {show.value && (
<div <div
class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 overflow-hidden " 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 /> <AdderPage />
) : router.path === 'global-background' ? ( ) : router.path === 'global-background' ? (
<BackgroundSwtich /> <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> </Transition>
</div> </div>
</div> </div>