From dca47af92ac7caefc193215022e2f729a543c6a3 Mon Sep 17 00:00:00 2001
From: John Bro <42930107+john1298308460@users.noreply.github.com>
Date: Mon, 17 Jun 2024 22:16:49 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=BF=9B=E7=A8=8B=E5=AE=88=E6=8A=A4?=
 =?UTF-8?q?=E6=97=A5=E5=BF=97=E6=94=AF=E6=8C=81=E5=85=A8=E5=B1=8F=20(#5482?=
 =?UTF-8?q?)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Refs #4136
---
 .../views/toolbox/supervisor/file/index.vue   | 39 +++++++++++++++++--
 1 file changed, 36 insertions(+), 3 deletions(-)

diff --git a/frontend/src/views/toolbox/supervisor/file/index.vue b/frontend/src/views/toolbox/supervisor/file/index.vue
index c8092bcd6..5ba509644 100644
--- a/frontend/src/views/toolbox/supervisor/file/index.vue
+++ b/frontend/src/views/toolbox/supervisor/file/index.vue
@@ -1,7 +1,19 @@
 <template>
-    <el-drawer :close-on-click-modal="false" :close-on-press-escape="false" v-model="open" size="50%">
+    <el-drawer
+        :close-on-click-modal="false"
+        :close-on-press-escape="false"
+        v-model="open"
+        :size="globalStore.isFullScreen ? '100%' : '50%'"
+        :before-close="handleClose"
+    >
         <template #header>
-            <DrawerHeader :header="title" :back="handleClose"></DrawerHeader>
+            <DrawerHeader :header="title" :back="handleClose">
+                <template #extra v-if="!mobile">
+                    <el-tooltip :content="loadTooltip()" placement="top">
+                        <el-button @click="toggleFullscreen" class="fullScreen" icon="FullScreen" plain></el-button>
+                    </el-tooltip>
+                </template>
+            </DrawerHeader>
         </template>
         <div v-if="req.file != 'config'">
             <el-tabs v-model="req.file" type="card" @tab-click="handleChange">
@@ -49,11 +61,13 @@
 import { Codemirror } from 'vue-codemirror';
 import { javascript } from '@codemirror/lang-javascript';
 import { oneDark } from '@codemirror/theme-one-dark';
-import { onUnmounted, reactive, ref, shallowRef } from 'vue';
+import { computed, onUnmounted, reactive, ref, shallowRef } from 'vue';
 import { OperateSupervisorProcessFile } from '@/api/modules/host-tool';
 import i18n from '@/lang';
 import { TabsPaneContext } from 'element-plus';
 import { MsgSuccess } from '@/utils/message';
+import screenfull from 'screenfull';
+import { GlobalStore } from '@/store';
 
 const extensions = [javascript(), oneDark];
 const loading = ref(false);
@@ -68,6 +82,7 @@ const req = reactive({
 });
 const title = ref('');
 const opRef = ref();
+const globalStore = GlobalStore();
 
 const view = shallowRef();
 const handleReady = (payload) => {
@@ -77,6 +92,19 @@ let timer: NodeJS.Timer | null = null;
 
 const em = defineEmits(['search']);
 
+const mobile = computed(() => {
+    return globalStore.isMobile();
+});
+
+function toggleFullscreen() {
+    if (screenfull.isEnabled) {
+        screenfull.toggle();
+    }
+}
+const loadTooltip = () => {
+    return i18n.global.t('commons.button.' + (screenfull.isFullscreen ? 'quitFullscreen' : 'fullscreen'));
+};
+
 const getContent = () => {
     loading.value = true;
     OperateSupervisorProcessFile(req)
@@ -135,6 +163,11 @@ const acceptParams = (name: string, file: string, operate: string) => {
     title.value = file == 'config' ? i18n.global.t('website.source') : i18n.global.t('commons.button.log');
     getContent();
     open.value = true;
+    if (!mobile.value) {
+        screenfull.on('change', () => {
+            globalStore.isFullScreen = screenfull.isFullscreen;
+        });
+    }
 };
 
 const cleanLog = async () => {