gh_mirrors/1Panel
1
0
Fork 0
mirror of https://github.com/1Panel-dev/1Panel.git synced 2025-01-19 08:19:15 +08:00
Code

fix: 解决容器、终端界面 ios 适配的问题 (#1385)

Browse Source
This commit is contained in:
ssongliu 2023-06-15 19:32:03 +08:00
parent 47dda4ac9f
commit c8bbfada8c
2 changed files with 23 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
frontend/src/views/container/container/log/index.vue
View File

@ -8,7 +8,7 @@
> >
<template #header> <template #header>
<DrawerHeader :header="$t('commons.button.log')" :resource="logSearch.container" :back="handleClose"> <DrawerHeader :header="$t('commons.button.log')" :resource="logSearch.container" :back="handleClose">
<template #extra> <template #extra v-if="!mobile">
<el-button @click="toggleFullscreen" class="fullScreen" icon="FullScreen" plain></el-button> <el-button @click="toggleFullscreen" class="fullScreen" icon="FullScreen" plain></el-button>
</template> </template>
</DrawerHeader> </DrawerHeader>
@ -56,7 +56,7 @@
import { cleanContainerLog, logContainer } from '@/api/modules/container'; import { cleanContainerLog, logContainer } from '@/api/modules/container';
import i18n from '@/lang'; import i18n from '@/lang';
import { dateFormatForName } from '@/utils/util'; import { dateFormatForName } from '@/utils/util';
import { nextTick, onBeforeUnmount, reactive, ref, shallowRef, watch } from 'vue'; import { computed, nextTick, onBeforeUnmount, reactive, ref, shallowRef, watch } from 'vue';
import { Codemirror } from 'vue-codemirror'; import { Codemirror } from 'vue-codemirror';
import { javascript } from '@codemirror/lang-javascript'; import { javascript } from '@codemirror/lang-javascript';
import { oneDark } from '@codemirror/theme-one-dark'; import { oneDark } from '@codemirror/theme-one-dark';
@ -67,8 +67,10 @@ import screenfull from 'screenfull';
import { GlobalStore } from '@/store'; import { GlobalStore } from '@/store';
const extensions = [javascript(), oneDark]; const extensions = [javascript(), oneDark];
const logVisiable = ref(false); const logVisiable = ref(false);
const mobile = computed(() => {
return globalStore.isMobile();
});
const logInfo = ref(); const logInfo = ref();
const view = shallowRef(); const view = shallowRef();
@ -110,16 +112,13 @@ function toggleFullscreen() {
screenfull.toggle(); screenfull.toggle();
} }
} }
screenfull.on('change', () => {
globalStore.isFullScreen = screenfull.isFullscreen;
});
const handleClose = async () => { const handleClose = async () => {
logVisiable.value = false; logVisiable.value = false;
clearInterval(Number(timer)); clearInterval(Number(timer));
timer = null; timer = null;
}; };
watch(logVisiable, (val) => { watch(logVisiable, (val) => {
if (screenfull.isEnabled && !val) screenfull.exit(); if (screenfull.isEnabled && !val && !mobile.value) screenfull.exit();
}); });
const searchLogs = async () => { const searchLogs = async () => {
const res = await logContainer(logSearch); const res = await logContainer(logSearch);
@ -172,6 +171,12 @@ const acceptParams = (props: DialogProps): void => {
searchLogs(); searchLogs();
} }
}, 1000 * 5); }, 1000 * 5);
if (!mobile.value) {
screenfull.on('change', () => {
globalStore.isFullScreen = screenfull.isFullscreen;
});
}
}; };
onBeforeUnmount(() => { onBeforeUnmount(() => {

16
frontend/src/views/host/terminal/terminal/index.vue
View File

@ -123,14 +123,14 @@
></el-empty> ></el-empty>
</div> </div>
</el-tabs> </el-tabs>
<el-button @click="toggleFullscreen" class="fullScreen" icon="FullScreen"></el-button> <el-button @click="toggleFullscreen" v-if="!mobile" class="fullScreen" icon="FullScreen"></el-button>
<HostDialog ref="dialogRef" @on-conn-terminal="onConnTerminal" @load-host-tree="loadHostTree" /> <HostDialog ref="dialogRef" @on-conn-terminal="onConnTerminal" @load-host-tree="loadHostTree" />
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, getCurrentInstance, watch, nextTick } from 'vue'; import { ref, getCurrentInstance, watch, nextTick, computed } from 'vue';
import Terminal from '@/components/terminal/index.vue'; import Terminal from '@/components/terminal/index.vue';
import HostDialog from '@/views/host/terminal/terminal/host-create.vue'; import HostDialog from '@/views/host/terminal/terminal/host-create.vue';
import type Node from 'element-plus/es/components/tree/src/model/node'; import type Node from 'element-plus/es/components/tree/src/model/node';
@ -145,15 +145,15 @@ import { GlobalStore } from '@/store';
const dialogRef = ref(); const dialogRef = ref();
const ctx = getCurrentInstance() as any; const ctx = getCurrentInstance() as any;
const globalStore = GlobalStore(); const globalStore = GlobalStore();
const mobile = computed(() => {
return globalStore.isMobile();
});
function toggleFullscreen() { function toggleFullscreen() {
if (screenfull.isEnabled) { if (screenfull.isEnabled) {
screenfull.toggle(); screenfull.toggle();
} }
} }
screenfull.on('change', () => {
globalStore.isFullScreen = screenfull.isFullscreen;
});
const localHostID = ref(); const localHostID = ref();
@ -209,6 +209,12 @@ const acceptParams = async () => {
} }
} }
} }
if (!mobile.value) {
screenfull.on('change', () => {
globalStore.isFullScreen = screenfull.isFullscreen;
});
}
}; };
const cleanTimer = () => { const cleanTimer = () => {
clearInterval(Number(timer)); clearInterval(Number(timer));