chore: bug fix #20

web/src/components/XTerminal.vue

@@ -36,6 +36,13 @@ let historyIndex = -1
 
 const statusMessage = ref<{ text: string; type: 'success' | 'error' | 'info' } | null>(null)
 
+watch(() => props.fontSize, (newVal) => {
+  if (terminal && newVal) {
+    terminal.options.fontSize = newVal
+    handleResize()
+  }
+})
+
 watch(statusMessage, (newVal) => {
   emit('status-change', newVal)
 })
@@ -65,7 +72,8 @@ function initTerminal(forceConnect = false) {
   terminal = new Terminal({
     cursorBlink: true,
     fontSize: props.fontSize,
-    fontFamily: 'Consolas, Monaco, monospace',
+    lineHeight: 1.15,
+    fontFamily: 'Consolas, Monaco, "Courier New", monospace',
     theme: {
       background: '#1e1e1e',
       foreground: '#d4d4d4',

web/src/components/ui/tabs/TabsTrigger.vue

@@ -16,7 +16,7 @@ const forwardedProps = useForwardProps(delegatedProps)
   <TabsTrigger
     data-slot="tabs-trigger"
     :class="cn(
-      'data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+      'data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-full flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 text-sm font-medium leading-none whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
       props.class,
     )"
     v-bind="forwardedProps"

web/src/views/terminal/Terminal.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, computed, onUnmounted } from 'vue'
 import { Button } from '@/components/ui/button'
 import { RefreshCw, Info } from 'lucide-vue-next'
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
@@ -8,8 +8,11 @@ import { api } from '@/api'
 
 const terminalRef = ref<InstanceType<typeof XTerminal> | null>(null)
 const cmds = ref<{ name: string, description: string }[]>([])
+const windowWidth = ref(window.innerWidth)
+const updateWidth = () => { windowWidth.value = window.innerWidth }
 
 onMounted(async () => {
+  window.addEventListener('resize', updateWidth)
   try {
     const res = await api.terminal.cmds()
     cmds.value = res
@@ -18,6 +21,16 @@ onMounted(async () => {
   }
 })
 
+onUnmounted(() => {
+  window.removeEventListener('resize', updateWidth)
+})
+
+const terminalFontSize = computed(() => {
+  if (windowWidth.value < 640) return 11
+  if (windowWidth.value < 1024) return 12
+  return 13
+})
+
 const isReconnecting = ref(false)
 
 function reconnect() {
@@ -89,7 +102,7 @@ function handleStatusChange(status: any) {
       </div>
     </div>
     <div class="flex-1 border border-[#3c3c3c] border-t-0 rounded-b-md overflow-hidden bg-[#1e1e1e]">
-      <XTerminal ref="terminalRef" :font-size="13" @status-change="handleStatusChange" />
+      <XTerminal ref="terminalRef" :font-size="terminalFontSize" @status-change="handleStatusChange" />
     </div>
   </div>
 </template>