From c1039fb7f2e6a9332d291f35c816efd3a6f9efeb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E7=91=9E=E6=96=8C?= <bin@fit2cloud.com>
Date: Mon, 10 Nov 2025 09:39:02 +0800
Subject: [PATCH] feat: Add ResizeObserver to dynamically adjust terminal size
 on container resize (#10894)

---
 frontend/src/components/terminal/index.vue | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/frontend/src/components/terminal/index.vue b/frontend/src/components/terminal/index.vue
index a1ce96f2c..1d6450631 100644
--- a/frontend/src/components/terminal/index.vue
+++ b/frontend/src/components/terminal/index.vue
@@ -248,6 +248,21 @@ function sendMsg(data: string) {
 
 // websocket 相关代码 end
 
+const resizeObserver = ref<ResizeObserver>();
+
+onMounted(() => {
+    // 使用 ResizeObserver 监听容器大小变化
+    resizeObserver.value = new ResizeObserver(() => {
+        if (termReady.value && webSocketReady.value) {
+            changeTerminalSize();
+        }
+    });
+
+    if (terminalElement.value) {
+        resizeObserver.value.observe(terminalElement.value);
+    }
+});
+
 defineExpose({
     acceptParams,
     onClose,
@@ -258,6 +273,7 @@ defineExpose({
 
 onBeforeUnmount(() => {
     onClose();
+    resizeObserver.value?.disconnect();
 });
 </script>