refactor(Debug.vue): integrate fullscreen functionality using @vueuse/core and clean up unused fullscreen logic

Author: feynmx

packages/business/src/views/data-server/Debug.vue

@@ -6,7 +6,7 @@ import VCodeEditor from '@tap/component/src/base/VCodeEditor.vue'
 import { IconButton } from '@tap/component/src/icon-button'
 import { useI18n } from '@tap/i18n'
 import { copyToClipboard } from '@tap/shared/src/util'
-import { useDark } from '@vueuse/core'
+import { useDark, useFullscreen } from '@vueuse/core'
 import {
   computed,
   inject,
@@ -46,11 +46,13 @@ const debugHttpInfo = ref<Record<string, any>>({})
 const templates = ref<Record<string, string>>({})
 const intervalId = ref()
 const loading = ref(false)
-const isFullscreen = ref(false)
+// const isFullscreen = ref(false)
 const resultRef = ref<HTMLElement | null>(null)
 const titleRef = ref<HTMLElement | null>(null)
 const jsonPrettyHeight = ref(280)
 
+const { isFullscreen, toggle: toggleFullscreen } = useFullscreen(resultRef)
+
 const urlsMap = computed(() => {
   return props.urlList.reduce((acc: Record<string, string>, item) => {
     acc[item.method] = item.url + (item.last || '')
@@ -273,22 +275,6 @@ function enterFullscreen(element: HTMLElement) {
   }
 }
 
-function exitFullscreen() {
-  if (document.exitFullscreen) {
-    document.exitFullscreen()
-  }
-}
-
-const toggleFullscreen = () => {
-  if (isFullscreen.value) {
-    exitFullscreen()
-  } else {
-    enterFullscreen(resultRef.value!)
-  }
-
-  isFullscreen.value = !isFullscreen.value
-}
-
 const handleCopy = () => {
   copyToClipboard(JSON.stringify(debugResult.value, null, 2))
   ElMessage.success(t('public_message_copy_success'))