lis8.0-vue3/src/App.vue

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

<script setup>
import useSettingsStore from '@/store/modules/settings'
import { handleThemeStyle } from '@/utils/theme'
import { ref, onMounted, onUnmounted, nextTick } from 'vue';

const appContainer = ref(null);
const appContent = ref(null);

// 设计稿基准尺寸
const baseWidth = 1920;
const baseHeight = 1080;

// 计算缩放比例并应用
const calcScale = () => {
  if (!appContent.value) return;

  // 当前窗口尺寸
  const clientWidth = window.innerWidth;
  const clientHeight = window.innerHeight;

  // 计算宽高方向的缩放比例（取最小值，避免内容溢出）
  const scaleX = clientWidth / baseWidth;
  const scaleY = clientHeight / baseHeight;
  const scale = Math.min(scaleX, scaleY);

  // 应用缩放
  appContent.value.style.transform = `scale(${scale})`;
};
onMounted(() => {
  calcScale(); // 初始化
  window.addEventListener('resize', calcScale);
  nextTick(() => {
    // 初始化主题样式
    handleThemeStyle(useSettingsStore().theme)
  })
})

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

<style lang="scss" scoped>
.app-container {
  /* 占满整个窗口 */
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  /* 避免缩放后出现滚动条 */
}

.app-content {
  /* 设计稿基准尺寸 */
  width: 1920px;
  height: 1080px;
  margin: 0 auto;
  /* 水平居中 */
  transform-origin: top center;
  /* 缩放原点（避免偏移） */
}
</style>