From c510a028dbc9357b8f09672255069657291ac86f Mon Sep 17 00:00:00 2001
From: QuentinHsu <xuquentinyang@gmail.com>
Date: Tue, 27 Feb 2024 14:54:57 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E8=A7=A3=E5=86=B3=E9=87=8D=E5=A4=8D?=
 =?UTF-8?q?=E8=AE=BF=E9=97=AE=E5=AE=B9=E5=99=A8=E5=86=85=E9=83=A8=E6=97=B6?=
 =?UTF-8?q?=EF=BC=8C=E7=BB=88=E7=AB=AF=E6=98=BE=E7=A4=BA=E5=AE=BD=E5=BA=A6?=
 =?UTF-8?q?=E5=BC=82=E5=B8=B8=E7=9A=84=E9=97=AE=E9=A2=98=20(#3996)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/container/container/terminal/index.vue     | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/frontend/src/views/container/container/terminal/index.vue b/frontend/src/views/container/container/terminal/index.vue
index 59cdba944..d7a67f249 100644
--- a/frontend/src/views/container/container/terminal/index.vue
+++ b/frontend/src/views/container/container/terminal/index.vue
@@ -44,13 +44,17 @@
                 {{ $t('commons.button.conn') }}
             </el-button>
             <el-button v-else @click="onClose()">{{ $t('commons.button.disconn') }}</el-button>
-            <Terminal style="height: calc(100vh - 302px)" ref="terminalRef"></Terminal>
+            <Terminal
+                style="height: calc(100vh - 302px); margin-top: 18px"
+                ref="terminalRef"
+                v-if="terminalOpen"
+            ></Terminal>
         </el-form>
     </el-drawer>
 </template>
 
 <script lang="ts" setup>
-import { reactive, ref } from 'vue';
+import { reactive, ref, nextTick } from 'vue';
 import { ElForm, FormInstance } from 'element-plus';
 import { Rules } from '@/global/form-rules';
 import Terminal from '@/components/terminal/index.vue';
@@ -91,6 +95,7 @@ const initTerm = (formEl: FormInstance | undefined) => {
     formEl.validate(async (valid) => {
         if (!valid) return;
         terminalOpen.value = true;
+        await nextTick();
         terminalRef.value!.acceptParams({
             endpoint: '/api/v1/containers/exec',
             args: `containerid=${form.containerID}&user=${form.user}&command=${form.command}`,