update

packages/frontend/src/components/Terminal.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, onBeforeUnmount, watch, nextTick } from 'vue';
+import { ref, onMounted, onBeforeUnmount, watch, nextTick, watchEffect } from 'vue';
 import { Terminal, ITerminalAddon, IDisposable } from 'xterm';
 import { useDeviceDetection } from '../composables/useDeviceDetection';
 import { useAppearanceStore } from '../stores/appearance.store';
@@ -60,8 +60,11 @@ const {
   terminalTextShadowOffsetY,
   terminalTextShadowBlur,
   terminalTextShadowColor,
+  initialAppearanceDataLoaded, 
 } = storeToRefs(appearanceStore);
  
+const isTerminalDomReady = ref(false); 
+ 
 // --- Settings Store ---
 const settingsStore = useSettingsStore(); // +++ 实例化设置 store +++
 const {
@@ -255,6 +258,9 @@ onMounted(() => {
 
     // 将终端附加到 DOM
     terminal.open(terminalRef.value);
+    // terminal.open() 同步执行完毕后，可以认为 Xterm 已尝试附加到 DOM
+    isTerminalDomReady.value = true; // +++ 直接在此处设置 DOM 准备就绪状态 +++
+    console.log(`[Terminal ${props.sessionId}] Xterm open() called, considering DOM ready for initial style checks.`);
  
     // 适应容器大小
     fitAddon.fit();
@@ -663,11 +669,27 @@ watch(
   ],
   () => {
     // console.log('[Terminal] Text style settings changed, applying new styles.');
+    // 这个 watch 现在主要负责响应运行时的更改
+    // 初始加载由下面的 watchEffect 处理
+    if (isTerminalDomReady.value && initialAppearanceDataLoaded.value) {
+      nextTick(() => {
         applyTerminalTextStyles();
+      });
+    }
   },
-  { deep: true, immediate: true } // immediate: true 确保挂载时应用初始设置
+  { deep: true }
 );
  
+// watchEffect 用于处理初始样式应用 +++
+watchEffect(() => {
+  if (isTerminalDomReady.value && initialAppearanceDataLoaded.value && terminalRef.value && terminal?.element) {
+    console.log(`[Terminal ${props.sessionId}] Initial style application: DOM ready and appearance data loaded. Applying text styles.`);
+    nextTick(() => {
+      applyTerminalTextStyles();
+    });
+  }
+});
+ 
 // --- 应用终端背景 ---
 const applyTerminalBackground = () => {
     // 背景应用到 terminalOuterWrapperRef

packages/frontend/src/stores/appearance.store.ts

@@ -28,6 +28,7 @@ export const useAppearanceStore = defineStore('appearance', () => {
 
     // Appearance Settings State
     const appearanceSettings = ref<Partial<AppearanceSettings>>({}); // 从 API 获取的原始设置
+    const initialAppearanceDataLoaded = ref(false); // 跟踪初始数据是否加载完成
     const allTerminalThemes = ref<TerminalTheme[]>([]); // 重命名: 存储从后端获取的所有主题
   
     // HTML Presets State
@@ -189,6 +190,7 @@ export const useAppearanceStore = defineStore('appearance', () => {
             ]);
             appearanceSettings.value = settingsResponse.data;
             allTerminalThemes.value = themesResponse.data; // 更新 allTerminalThemes
+            initialAppearanceDataLoaded.value = true; // +++ 设置为 true 表示数据加载成功
  
             // Initialize remoteHtmlPresetsRepositoryUrl from loaded settings
             // Assuming backend returns it as part of AppearanceSettings
@@ -206,6 +208,7 @@ export const useAppearanceStore = defineStore('appearance', () => {
             // 出错时应用默认值
             appearanceSettings.value = {}; // 清空可能不完整的设置
             allTerminalThemes.value = []; // 清空 allTerminalThemes
+            initialAppearanceDataLoaded.value = false; // +++ 设置为 false 表示数据加载失败
             applyUiTheme(defaultUiTheme);
             applyPageBackground(); // 应用默认背景（可能为空）
         } finally {
@@ -872,6 +875,7 @@ export const useAppearanceStore = defineStore('appearance', () => {
     return {
         isLoading,
         error,
+        initialAppearanceDataLoaded,
         // State refs (原始数据)
         appearanceSettings,
         allTerminalThemes, // 导出重命名后的 ref