Add fullscreen minimap context and adjust minimum height in Viewer component

This commit is contained in:
2026-04-22 07:19:55 +08:00
parent b5a4850677
commit 890105302a

View File

@@ -128,6 +128,7 @@ const isFullscreen = ref(false)
// 小地图相关
let minimapCtx = null
let fullscreenMinimapCtx = null
let minimapAnimationFrameId = null
const minimapStyle = ref({
width: '150px',
@@ -567,7 +568,7 @@ const renderMinimap = () => {
// 根据当前模式选择对应的小地图 canvas 和 ref
const canvas = isFullscreen.value ? fullscreenMinimapCanvasRef.value : minimapCanvasRef.value
const minimap = isFullscreen.value ? fullscreenMinimapRef.value : minimapRef.value
const ctx = minimapCtx
const ctx = isFullscreen.value ? fullscreenMinimapCtx : minimapCtx
if (!ctx || !canvas || !minimap) return
@@ -912,14 +913,20 @@ const toggleFullscreen = () => {
fullscreenCtx.setTransform(1, 0, 0, 1, 0, 0)
fullscreenCtx.scale(dpr, dpr)
}
document.body.style.overflow = 'hidden'
}
// 初始化全屏小地图 canvas
if (fullscreenMinimapCanvasRef.value) {
fullscreenMinimapCtx = fullscreenMinimapCanvasRef.value.getContext('2d')
}
document.body.style.overflow = 'hidden'
} else {
// 退出全屏:恢复正常模式
document.body.style.overflow = ''
// 清理全屏 context
fullscreenCtx = null
fullscreenMinimapCtx = null
}
// 重新渲染
@@ -982,6 +989,7 @@ onUnmounted(() => {
ctx = null
fullscreenCtx = null
minimapCtx = null
fullscreenMinimapCtx = null
})
</script>
@@ -995,7 +1003,7 @@ onUnmounted(() => {
position: relative;
width: 100%;
height: 100%;
min-height: 400px;
min-height: 200px;
overflow: hidden;
background: var(--vp-c-bg-soft);
border: 1px solid var(--vp-c-border);