以上ts代码写入<script lang="ts" setup></script>标签内，给我一个完整的vue文件代码

以下是将上述TypeScript代码整合到Vue单文件组件（`.vue`）内的完整示例：

<template>
  <div>
    <header>
      <Header :selected="selected" @navSelected="selectNav" />
      <FullscreenToggle @enterFullscreen="handleEnterFullScreen" @exitFullscreen="handleExitFullScreen" />
    </header>
    <nav>
      <Nav :selected="selected" />
    </nav>
    <main ref="main">
      <MianPage :selected="selected" />
    </main>
    <footer>
      <Footer />
    </footer>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref, watchEffect } from 'vue';
import { El } from './el'; // 假设FullscreenToggle是从el.d.ts导出的

const selected = ref<string>('img');
let isFullscreen = ref(false);

onMounted(() => {
  // 如果你有El组件，这里添加初始化或监听全屏事件的代码
  // El.initFullScreen(); 或者 El.addEventListener('fullscreenChange', () => updateIsFullscreen());
});

function selectNav(nav: string) {
  selected.value = nav;
}

function handleEnterFullScreen() {
  document.documentElement.requestFullscreen(); // 全屏请求
  isFullscreen.value = true;
}

function handleExitFullScreen() {
  if (!document.fullscreenElement || !document.mozFullScreenElement || !document.webkitIsFullScreen) return;
  document.exitFullscreen();
  isFullscreen.value = false;
}

watchEffect(() => {
  if (isFullscreen.value) {
    const mainStyle = getComputedStyle(document.querySelector('.main')); // 获取main的样式
    if (mainStyle.height === '666px') {
      // 设置main的临时高度为888px
      setStyle('.main', 'height', '888px');
    }
  } else {
    // 当退出全屏时，还原main的原始高度
    setStyle('.main', 'height', '666px');
  }
});

function setStyle(selector: string, property: string, value: string) {
  document.querySelector(selector)?.style[property] = value;
}

// 假设getComputedStyle和querySelector都已实现
// getComputedStyle从Element对象获取CSS样式信息
// querySelector从文档中查找指定CSS选择器的第一个匹配项

</script>

<style scoped>
header {
  position: fixed;
  top: 0;
  width: 100%;
}

main {
  max-height: 666px;
  max-width: 100%;
  margin-top: 2px;
  overflow: auto;
}

nav {
  margin-top: 56px;
}

footer {
  bottom: 0;
}
</style>

这个例子假设`FullscreenToggle`是从外部导入的，例如从`el.d.ts`文件中。请根据实际项目结构和库来替换相关的导入路径和事件处理。注意，这个示例依赖于`getComputedStyle`和`querySelector`功能，如果你在更现代的环境中工作，可能需要查看Vue的API文档或其他库提供的解决方案来获取和设置CSS样式。