全屏模式切换

一、全屏模式切换在本项目中的实现说明

1. 全屏模式切换的作用与项目应用场景

全屏模式切换可以让用户专注于内容，常用于数据大屏、后台管理、图表展示等场景。在本项目（如 web-admin），可以在首页、数据统计、产品列表等页面提供全屏按钮，提升用户体验。

2. 项目中全屏切换的实现方法

（1）封装全屏切换工具函数

在 web-admin/src/utils/ 下新建 fullscreen.ts：

// web-admin/src/utils/fullscreen.ts
export function requestFullscreen(element: HTMLElement = document.documentElement) {
  if (element.requestFullscreen) {
    element.requestFullscreen();
  } else if ((element as any).webkitRequestFullscreen) {
    (element as any).webkitRequestFullscreen();
  } else if ((element as any).mozRequestFullScreen) {
    (element as any).mozRequestFullScreen();
  } else if ((element as any).msRequestFullscreen) {
    (element as any).msRequestFullscreen();
  }
}

export function exitFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if ((document as any).webkitExitFullscreen) {
    (document as any).webkitExitFullscreen();
  } else if ((document as any).mozCancelFullScreen) {
    (document as any).mozCancelFullScreen();
  } else if ((document as any).msExitFullscreen) {
    (document as any).msExitFullscreen();
  }
}

export function isFullscreen() {
  return !!(
    document.fullscreenElement ||
    (document as any).webkitFullscreenElement ||
    (document as any).mozFullScreenElement ||
    (document as any).msFullscreenElement
  );
}

（2）在页面或组件中使用

以 web-admin/src/components/TopHeader.vue 为例，添加全屏按钮：

<template>
  <button @click="toggleFullscreen">
    {{ fullscreen ? '退出全屏' : '全屏' }}
  </button>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { requestFullscreen, exitFullscreen, isFullscreen } from '@/utils/fullscreen'

const fullscreen = ref(isFullscreen())

function toggleFullscreen() {
  if (fullscreen.value) {
    exitFullscreen()
  } else {
    requestFullscreen()
  }
  fullscreen.value = !fullscreen.value
}
</script>

---

二、问题

1. 问：你在项目中是如何实现全屏切换功能的？为什么要这样做？

答：
在本项目（如 web-admin），我在 src/utils/fullscreen.ts 封装了全屏切换函数，兼容各主流浏览器。页面上通过按钮调用这些函数，实现一键全屏和退出全屏。这样做可以让用户在查看数据大屏、图表等内容时获得更沉浸的体验。

---

2. 问：全屏 API 在不同浏览器下有兼容性问题吗？你是如何处理的？

答：
全屏 API 在不同浏览器下前缀不同，如 webkit、moz、ms。项目中在工具函数里做了兼容性判断，分别调用对应的 API，保证了在 Chrome、Firefox、Edge 等主流浏览器下都能正常切换全屏。

---

3. 问：全屏切换功能在项目中主要应用在哪些场景？实际效果如何？

答：
全屏切换主要应用在首页、数据统计、产品列表等需要大屏展示的页面。实际效果是用户可以一键进入全屏模式，专注于数据和内容展示，提升了可视化和交互体验。

---

4. 问：你如何判断当前是否处于全屏状态？项目中有用到吗？

答：
通过判断 document.fullscreenElement 或带前缀的属性是否存在来判断是否全屏。项目中用这个方法动态切换按钮文本（如“全屏/退出全屏”），并可根据全屏状态调整页面布局。

---

5. 问：全屏切换功能在实际开发中遇到过哪些问题？你是如何解决的？

答：
遇到过部分浏览器不支持标准 API 或用户未授权全屏导致切换失败。为此，项目中做了兼容性处理，并在切换失败时给出用户提示。此外，监听全屏状态变化事件，保证 UI 状态与实际全屏状态同步，提升了用户体验。