test/src/App.vue

<template>
  <div class="app-container" ref="appContainer">
    <div class="content-wrapper" ref="contentWrapper">
      <router-view />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'

const appContainer = ref<HTMLElement>()
const contentWrapper = ref<HTMLElement>()

const DESIGN_WIDTH = 3840
const DESIGN_HEIGHT = 2160

const updateScale = () => {
  if (!appContainer.value || !contentWrapper.value) return

  const containerWidth = appContainer.value.clientWidth
  const containerHeight = appContainer.value.clientHeight

  const scaleX = containerWidth / DESIGN_WIDTH
  const scaleY = containerHeight / DESIGN_HEIGHT
  const scale = Math.min(scaleX, scaleY)

  // 计算居中位移
  const offsetX = (containerWidth - DESIGN_WIDTH * scale) / 2
  const offsetY = (containerHeight - DESIGN_HEIGHT * scale) / 2

  contentWrapper.value.style.transform = `translate(${offsetX}px, ${offsetY}px) scale(${scale})`
  contentWrapper.value.style.transformOrigin = 'left top'
  contentWrapper.value.style.width = `${DESIGN_WIDTH}px`
  contentWrapper.value.style.height = `${DESIGN_HEIGHT}px`
}

onMounted(() => {
  updateScale()
  window.addEventListener('resize', updateScale)
})

onUnmounted(() => {
  window.removeEventListener('resize', updateScale)
})
</script>

<style>
/* 全局样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Arial', sans-serif;
  background-color: #000;
  color: #00ff88;
  overflow: hidden;
}

.app-container {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  overflow: hidden;
  background-color: #000;
}

.content-wrapper {
  transition: transform 0.3s ease;
}
</style>