From cb6d5a725825f145931433ecbb8f5e033004fc32 Mon Sep 17 00:00:00 2001
From: Baobhan Sith <80159437+Heavrnl@users.noreply.github.com>
Date: Tue, 27 May 2025 20:22:41 +0800
Subject: [PATCH] update

---
 packages/frontend/src/components/Terminal.vue | 32 ++++++++++++++++---
 .../frontend/src/stores/appearance.store.ts   |  6 +++-
 2 files changed, 32 insertions(+), 6 deletions(-)

diff --git a/packages/frontend/src/components/Terminal.vue b/packages/frontend/src/components/Terminal.vue
index 2f127b2..3829221 100644
--- a/packages/frontend/src/components/Terminal.vue
+++ b/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,7 +258,10 @@ 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();
     emitWorkspaceEvent('terminal:resize', { sessionId: props.sessionId, dims: { cols: terminal.cols, rows: terminal.rows } }); // 触发初始 resize 事件
@@ -663,11 +669,27 @@ watch(
   ],
   () => {
     // console.log('[Terminal] Text style settings changed, applying new styles.');
-    applyTerminalTextStyles();
+    // 这个 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
diff --git a/packages/frontend/src/stores/appearance.store.ts b/packages/frontend/src/stores/appearance.store.ts
index db695c3..37f5646 100644
--- a/packages/frontend/src/stores/appearance.store.ts
+++ b/packages/frontend/src/stores/appearance.store.ts
@@ -28,8 +28,9 @@ 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
     const localHtmlPresets = ref<Array<{ name: string, type: 'preset' | 'custom' }>>([]); // Updated type
     const remoteHtmlPresets = ref<Array<{ name: string, downloadUrl?: string }>>([]);
@@ -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