gh_mirrors/1Panel
1
0
Fork 0
mirror of https://github.com/1Panel-dev/1Panel.git synced 2025-01-19 00:09:16 +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>
<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>
</template>
</DrawerHeader>
@ -56,7 +56,7 @@
import { cleanContainerLog, logContainer } from '@/api/modules/container';
import i18n from '@/lang';
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 { javascript } from '@codemirror/lang-javascript';
import { oneDark } from '@codemirror/theme-one-dark';
@ -67,8 +67,10 @@ import screenfull from 'screenfull';
import { GlobalStore } from '@/store';
const extensions = [javascript(), oneDark];
const logVisiable = ref(false);
const mobile = computed(() => {
return globalStore.isMobile();
});
const logInfo = ref();
const view = shallowRef();
@ -110,16 +112,13 @@ function toggleFullscreen() {
screenfull.toggle();
}
}
screenfull.on('change', () => {
globalStore.isFullScreen = screenfull.isFullscreen;
});
const handleClose = async () => {
logVisiable.value = false;
clearInterval(Number(timer));
timer = null;
};
watch(logVisiable, (val) => {
if (screenfull.isEnabled && !val) screenfull.exit();
if (screenfull.isEnabled && !val && !mobile.value) screenfull.exit();
});
const searchLogs = async () => {
const res = await logContainer(logSearch);
@ -172,6 +171,12 @@ const acceptParams = (props: DialogProps): void => {
searchLogs();
}
}, 1000 * 5);
if (!mobile.value) {
screenfull.on('change', () => {
globalStore.isFullScreen = screenfull.isFullscreen;
});
}
};
onBeforeUnmount(() => {

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

@ -123,14 +123,14 @@
></el-empty>
</div>
</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" />
</div>
</template>
<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 HostDialog from '@/views/host/terminal/terminal/host-create.vue';
import type Node from 'element-plus/es/components/tree/src/model/node';
@ -145,15 +145,15 @@ import { GlobalStore } from '@/store';
const dialogRef = ref();
const ctx = getCurrentInstance() as any;
const globalStore = GlobalStore();
const mobile = computed(() => {
return globalStore.isMobile();
});
function toggleFullscreen() {
if (screenfull.isEnabled) {
screenfull.toggle();
}
}
screenfull.on('change', () => {
globalStore.isFullScreen = screenfull.isFullscreen;
});
const localHostID = ref();
@ -209,6 +209,12 @@ const acceptParams = async () => {
}
}
}
if (!mobile.value) {
screenfull.on('change', () => {
globalStore.isFullScreen = screenfull.isFullscreen;
});
}
};
const cleanTimer = () => {
clearInterval(Number(timer));