fix: terminal overflow

app/src/components/game/TerminalPart.vue

@@ -1,23 +1,34 @@
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
+import { onMounted, onUnmounted, ref } from 'vue'
 import { useTerminal } from '../../store/session'
 
 const terminal = ref<HTMLElement | null>(null)
+const term = useTerminal()
 
 onMounted(() => {
-  const term = useTerminal()
   if (!terminal.value) return
   term.mount(terminal.value)
-  window.addEventListener('resize', () => term.resizeScreen())
+
+  const handleResize = () => term.resizeScreen()
+  window.addEventListener('resize', handleResize)
+
+  onUnmounted(() => {
+    window.removeEventListener('resize', handleResize)
+  })
 })
 </script>
 
 <template>
-  <font-awesome-icon :icon="['fas', 'terminal']" class="text-text p-1" />
-  <button id="Terminal" class="text-text h-[5%]">終端機</button>
-  <div
-    id="terminal"
-    ref="terminal"
-    class="bg-bg-secondary h-[calc(100%-5%)] p-0.5"
-  ></div>
+  <div class="flex flex-col h-full">
+    <div class="flex items-center gap-2 p-1">
+      <font-awesome-icon :icon="['fas', 'terminal']" class="text-text" />
+      <button id="Terminal" class="text-text">終端機</button>
+    </div>
+    <div
+      id="terminal"
+      ref="terminal"
+      class="bg-bg-secondary flex-grow overflow-hidden px-2"
+      style="height: calc(100vh - 40px)"
+    ></div>
+  </div>
 </template>

app/src/store/session.ts

@@ -11,7 +11,7 @@ import type { Session } from '../types'
 import { trpc } from '../utils/trpc'
 
 const socket = new Socket()
-const term = new SocketTerminal(40, 80)
+const term = new SocketTerminal()
 let hasSetup = false
 
 interface QuestDetailResponse {

app/src/utils/terminal.ts

@@ -6,33 +6,39 @@ class SocketTerminal {
   private term: Terminal
   private fitAddon: FitAddon
 
-  constructor(rows: number, cols: number) {
+  constructor() {
     this.term = new Terminal({
-      rows, // 行数
-      cols, // 不指定行数，自动回车后光标从下一行开始
-      convertEol: true, // 启用时，光标将设置为下一行的开头
-      // scrollback: 50, //终端中的回滚量
-      disableStdin: false, // 是否应禁用输入
-      // cursorStyle: "underline", //光标样式
-      cursorBlink: true, // 光标闪烁
+      convertEol: true,
+      scrollback: 1000,
+      fontSize: 16,
       theme: {
-        foreground: '#ECECEC', // 字体
-        background: '#000000', // 背景色
-        cursor: 'help', // 设置光标
+        foreground: '#ECECEC',
+        background: '#000000',
+        cursor: 'help',
       },
-      fontSize: 18,
-      fontWeight: 'normal',
     })
     this.fitAddon = new FitAddon()
     this.term.loadAddon(this.fitAddon)
-    this.fitAddon.fit()
+  }
+
+  resizeScreen(): void {
+    try {
+      this.fitAddon.fit()
+    } catch (e) {
+      console.error('Failed to resize terminal:', e)
+    }
+  }
+
+  mount(reference: HTMLElement): void {
+    this.term.open(reference)
+    this.resizeScreen()
   }
 
   write(message: string): void {
     this.term.write(message)
   }
 
-  onData(callback: any): void {
+  onData(callback: (data: string) => void): void {
     this.term.onData(callback)
   }
 
@@ -40,15 +46,6 @@ class SocketTerminal {
     this.term.focus()
   }
 
-  resizeScreen(): void {
-    this.fitAddon.fit()
-  }
-
-  mount(reference: HTMLElement): void {
-    this.term.open(reference)
-    this.resizeScreen()
-  }
-
   reset(): void {
     this.term.reset()
   }