pref: 调整部分界面的高度问题 (#4534)

backend/app/service/container.go

@@ -656,7 +656,6 @@ func (u *ContainerService) ContainerLogs(wsConn *websocket.Conn, containerType,
 		commandArg = append(commandArg, "-f")
 	}
 	if !follow {
-		commandArg = append(commandArg, "2>&1")
 		cmd := exec.Command(commandName, commandArg...)
 		stdout, _ := cmd.CombinedOutput()
 		if !utf8.Valid(stdout) {

frontend/src/components/container-log/index.vue

@@ -31,7 +31,7 @@
             :placeholder="$t('commons.msg.noneData')"
             :indent-with-tab="true"
             :tabSize="4"
-            style="margin-top: 10px; height: calc(100vh - 375px)"
+            :style="{ height: `calc(100vh - ${loadHeight()})`, 'margin-top': '10px' }"
             :lineWrapping="true"
             :matchBrackets="true"
             theme="cobalt"
@@ -53,6 +53,8 @@ import { Codemirror } from 'vue-codemirror';
 import { javascript } from '@codemirror/lang-javascript';
 import { oneDark } from '@codemirror/theme-one-dark';
 import { MsgError, MsgSuccess } from '@/utils/message';
+import { GlobalStore } from '@/store';
+const globalStore = GlobalStore();
 
 const extensions = [javascript(), oneDark];
 
@@ -63,6 +65,10 @@ const handleReady = (payload) => {
 };
 const terminalSocket = ref<WebSocket>();
 
+const loadHeight = () => {
+    return globalStore.openMenuTabs ? '405px' : '375px';
+};
+
 const logSearch = reactive({
     isWatch: false,
     container: '',

frontend/src/views/container/setting/index.vue

@@ -170,7 +170,7 @@
                         placeholder="# The Docker configuration file does not exist or is empty (/etc/docker/daemon.json)"
                         :indent-with-tab="true"
                         :tabSize="4"
-                        style="margin-top: 10px; height: calc(100vh - 430px)"
+                        :style="{ height: `calc(100vh - ${loadHeight()})`, 'margin-top': '10px' }"
                         :lineWrapping="true"
                         :matchBrackets="true"
                         theme="cobalt"
@@ -264,6 +264,8 @@ import {
 import { getSettingInfo } from '@/api/modules/setting';
 import { MsgSuccess } from '@/utils/message';
 import { checkNumberRange } from '@/global/form-rules';
+import { GlobalStore } from '@/store';
+const globalStore = GlobalStore();
 
 const unset = ref(i18n.global.t('setting.unSetting'));
 const submitInput = ref();
@@ -326,6 +328,10 @@ const onSaveFile = async () => {
     confirmDialogRefFile.value!.acceptParams(params);
 };
 
+const loadHeight = () => {
+    return globalStore.openMenuTabs ? '450px' : '430px';
+};
+
 const onChangeMirrors = () => {
     mirrorRef.value.acceptParams({ mirrors: form.mirrors });
 };

frontend/src/views/database/mysql/setting/index.vue

@@ -57,7 +57,7 @@
                         :placeholder="$t('commons.msg.noneData')"
                         :indent-with-tab="true"
                         :tabSize="4"
-                        style="margin-top: 10px; height: calc(100vh - 375px)"
+                        :style="{ height: `calc(100vh - ${loadHeight()})`, 'margin-top': '10px' }"
                         :lineWrapping="true"
                         :matchBrackets="true"
                         theme="cobalt"
@@ -153,6 +153,8 @@ import { Rules } from '@/global/form-rules';
 import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
 import router from '@/routers';
+import { GlobalStore } from '@/store';
+const globalStore = GlobalStore();
 
 const loading = ref(false);
 
@@ -196,6 +198,10 @@ const jumpToConf = async () => {
     loadMysqlConf();
 };
 
+const loadHeight = () => {
+    return globalStore.openMenuTabs ? '405px' : '375px';
+};
+
 const jumpToSlowlog = async () => {
     activeName.value = 'slowLog';
     loadSlowLogs();

frontend/src/views/database/mysql/setting/slow-log/index.vue

@@ -56,6 +56,8 @@ import { loadDBFile, updateMysqlVariables } from '@/api/modules/database';
 import { dateFormatForName, downloadWithContent } from '@/utils/util';
 import i18n from '@/lang';
 import { MsgError, MsgInfo, MsgSuccess } from '@/utils/message';
+import { GlobalStore } from '@/store';
+const globalStore = GlobalStore();
 
 const extensions = [javascript(), oneDark];
 const slowLogs = ref();
@@ -120,7 +122,18 @@ const handleSlowLogs = async () => {
 };
 
 const getDynamicHeight = () => {
-    return variables.slow_query_log === 'ON' ? `calc(100vh - 437px)` : `calc(100vh - 383px)`;
+    if (variables.slow_query_log === 'ON') {
+        if (globalStore.openMenuTabs) {
+            return `calc(100vh - 467px)`;
+        } else {
+            return `calc(100vh - 437px)`;
+        }
+    }
+    if (globalStore.openMenuTabs) {
+        return `calc(100vh - 413px)`;
+    } else {
+        return `calc(100vh - 383px)`;
+    }
 };
 
 const changeSlowLogs = () => {

frontend/src/views/database/postgresql/setting/index.vue

@@ -33,7 +33,7 @@
                         :placeholder="$t('commons.msg.noneData')"
                         :indent-with-tab="true"
                         :tabSize="8"
-                        style="margin-top: 10px; height: calc(100vh - 375px)"
+                        :style="{ height: `calc(100vh - ${loadHeight()})`, 'margin-top': '10px' }"
                         :lineWrapping="true"
                         :matchBrackets="true"
                         theme="cobalt"
@@ -104,6 +104,8 @@ import { Rules } from '@/global/form-rules';
 import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
 import router from '@/routers';
+import { GlobalStore } from '@/store';
+const globalStore = GlobalStore();
 
 const loading = ref(false);
 
@@ -134,6 +136,10 @@ const props = withDefaults(defineProps<DBProps>(), {
     database: '',
 });
 
+const loadHeight = () => {
+    return globalStore.openMenuTabs ? '405px' : '375px';
+};
+
 const dialogContainerLogRef = ref();
 const jumpToConf = async () => {
     activeName.value = 'conf';

frontend/src/views/database/redis/index.vue

@@ -21,7 +21,7 @@
             </template>
             <template #main v-if="redisIsExist && !isOnSetting">
                 <Terminal
-                    style="height: calc(100vh - 370px)"
+                    :style="{ height: `calc(100vh - ${loadHeight()})` }"
                     :key="isRefresh"
                     ref="terminalRef"
                     v-show="terminalShow"
@@ -68,6 +68,8 @@ import { nextTick, onBeforeUnmount, ref } from 'vue';
 import { App } from '@/api/interface/app';
 import { GetAppPort } from '@/api/modules/app';
 import router from '@/routers';
+import { GlobalStore } from '@/store';
+const globalStore = GlobalStore();
 
 const loading = ref(false);
 const maskShow = ref(true);
@@ -94,6 +96,10 @@ const onSetting = async () => {
     settingRef.value!.acceptParams({ status: redisStatus.value, redisName: redisName.value });
 };
 
+const loadHeight = () => {
+    return globalStore.openMenuTabs ? '400px' : '370px';
+};
+
 const goDashboard = async () => {
     if (redisCommandPort.value === 0) {
         commandVisible.value = true;

frontend/src/views/database/redis/setting/index.vue

@@ -40,7 +40,7 @@
                         :placeholder="$t('commons.msg.noneData')"
                         :indent-with-tab="true"
                         :tabSize="4"
-                        style="margin-top: 10px; height: calc(100vh - 380px)"
+                        :style="{ height: `calc(100vh - ${loadHeight()})`, 'margin-top': '10px' }"
                         :lineWrapping="true"
                         :matchBrackets="true"
                         theme="cobalt"
@@ -140,6 +140,8 @@ import i18n from '@/lang';
 import { checkNumberRange, Rules } from '@/global/form-rules';
 import { ChangePort, GetAppDefaultConfig } from '@/api/modules/app';
 import { MsgSuccess } from '@/utils/message';
+import { GlobalStore } from '@/store';
+const globalStore = GlobalStore();
 
 const extensions = [javascript(), oneDark];
 
@@ -150,6 +152,10 @@ const handleReady = (payload) => {
     view.value = payload.view;
 };
 
+const loadHeight = () => {
+    return globalStore.openMenuTabs ? '410px' : '380px';
+};
+
 const form = reactive({
     name: '',
     port: 6379,

frontend/src/views/host/terminal/terminal/index.vue

@@ -44,7 +44,7 @@
                     </span>
                 </template>
                 <Terminal
-                    style="height: calc(100vh - 229px); background-color: #000"
+                    :style="{ height: `calc(100vh - ${loadHeight()})`, 'background-color': '#000' }"
                     :ref="'t-' + item.index"
                     :key="item.Refresh"
                 ></Terminal>
@@ -121,13 +121,19 @@
             </el-tab-pane>
             <div v-if="terminalTabs.length === 0">
                 <el-empty
-                    style="background-color: #000; height: calc(100vh - 200px)"
+                    :style="{ height: `calc(100vh - ${loadEmptyHeight()})`, 'background-color': '#000' }"
                     :description="$t('terminal.emptyTerminal')"
                 ></el-empty>
             </div>
         </el-tabs>
         <el-tooltip :content="loadTooltip()" placement="top">
-            <el-button @click="toggleFullscreen" v-if="!mobile" class="fullScreen" icon="FullScreen"></el-button>
+            <el-button
+                @click="toggleFullscreen"
+                v-if="!mobile"
+                class="fullScreen"
+                :style="{ top: loadFullScreenHeight() }"
+                icon="FullScreen"
+            ></el-button>
         </el-tooltip>
 
         <HostDialog ref="dialogRef" @on-conn-terminal="onConnTerminal" @load-host-tree="loadHostTree" />
@@ -236,6 +242,16 @@ const cleanTimer = () => {
     }
 };
 
+const loadHeight = () => {
+    return globalStore.openMenuTabs ? '269px' : '229px';
+};
+const loadEmptyHeight = () => {
+    return globalStore.openMenuTabs ? '240px' : '200px';
+};
+const loadFullScreenHeight = () => {
+    return globalStore.openMenuTabs ? '66px' : '90px';
+};
+
 const handleTabsRemove = (targetName: string, action: 'remove' | 'add') => {
     if (action !== 'remove') {
         return;
@@ -436,7 +452,6 @@ onMounted(() => {
     border: none;
     position: absolute;
     right: 50px;
-    top: 90px;
     font-weight: 600;
     font-size: 14px;
 }