From bd7b46988956a2355f574a3fc669ba217a3e1eb0 Mon Sep 17 00:00:00 2001
From: Baobhan Sith <80159437+Heavrnl@users.noreply.github.com>
Date: Mon, 26 May 2025 23:38:53 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E4=BC=98=E5=8C=96=E4=BB=A3?=
 =?UTF-8?q?=E7=A0=81=E7=BB=93=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/StyleCustomizer.vue        | 1368 +----------------
 .../StyleCustomizerBackgroundTab.vue          |  179 +++
 .../StyleCustomizerOtherTab.vue               |   90 ++
 .../StyleCustomizerTerminalTab.vue            |  632 ++++++++
 .../style-customizer/StyleCustomizerUiTab.vue |  268 ++++
 5 files changed, 1204 insertions(+), 1333 deletions(-)
 create mode 100644 packages/frontend/src/components/style-customizer/StyleCustomizerBackgroundTab.vue
 create mode 100644 packages/frontend/src/components/style-customizer/StyleCustomizerOtherTab.vue
 create mode 100644 packages/frontend/src/components/style-customizer/StyleCustomizerTerminalTab.vue
 create mode 100644 packages/frontend/src/components/style-customizer/StyleCustomizerUiTab.vue

diff --git a/packages/frontend/src/components/StyleCustomizer.vue b/packages/frontend/src/components/StyleCustomizer.vue
index 6bca272..204120c 100644
--- a/packages/frontend/src/components/StyleCustomizer.vue
+++ b/packages/frontend/src/components/StyleCustomizer.vue
@@ -1,1046 +1,54 @@
 <script setup lang="ts">
-import { ref, reactive, onMounted, watch, computed } from 'vue';
+import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useAppearanceStore } from '../stores/appearance.store';
-import { useUiNotificationsStore } from '../stores/uiNotifications.store';
-import { storeToRefs } from 'pinia';
-import type { ITheme } from 'xterm';
-import type { TerminalTheme } from '../types/terminal-theme.types'; 
-import { defaultXtermTheme } from '../features/appearance/config/default-themes'; 
+import type { TerminalTheme } from '../types/terminal-theme.types';
+import StyleCustomizerUiTab from './style-customizer/StyleCustomizerUiTab.vue';
+import StyleCustomizerTerminalTab from './style-customizer/StyleCustomizerTerminalTab.vue';
+import StyleCustomizerBackgroundTab from './style-customizer/StyleCustomizerBackgroundTab.vue';
+import StyleCustomizerOtherTab from './style-customizer/StyleCustomizerOtherTab.vue'; 
 
 const { t } = useI18n();
-const appearanceStore = useAppearanceStore();
-const notificationsStore = useUiNotificationsStore();
-const {
-  appearanceSettings, 
-  currentUiTheme,
-  
-  activeTerminalThemeId, 
-  allTerminalThemes, 
-  currentTerminalFontFamily,
-  currentTerminalFontSize,
-  currentEditorFontSize,
-  currentEditorFontFamily,
-  pageBackgroundImage,
-  
-  terminalBackgroundImage,
-  
-  isTerminalBackgroundEnabled,
-  currentTerminalBackgroundOverlayOpacity, // 从 store 解构
-} = storeToRefs(appearanceStore);
- 
-
-const editableUiTheme = ref<Record<string, string>>({});
-const editableTerminalFontFamily = ref('');
-const editableTerminalFontSize = ref(14);
-const editableEditorFontSize = ref(14);
-const editableEditorFontFamily = ref('');
+const uiTabRef = ref<InstanceType<typeof StyleCustomizerUiTab> | null>(null);
 
 
-const editableUiThemeString = ref('');
-const themeParseError = ref<string | null>(null); 
-const localTerminalBackgroundEnabled = ref(true);
-const editableTerminalBackgroundOverlayOpacity = ref(0.5); // 本地编辑状态，默认 0.5
- 
-// 终端主题管理相关状态
-const isEditingTheme = ref(false); // 是否正在编辑某个主题
-const themeSearchTerm = ref(''); // 主题搜索词
-// 使用 reactive 确保嵌套对象 themeData 的响应性
-// 修正：editingTheme 应该是一个 ref 包含 TerminalTheme 或 null
-const editingTheme = ref<TerminalTheme | null>(null); // 正在编辑的主题数据副本 (完整结构)
-const newThemeName = ref(''); // 新建主题的名称 (不再需要，直接编辑 editingTheme.value.name)
 
-// 文件上传相关
-const pageBgFileInput = ref<HTMLInputElement | null>(null);
-const terminalBgFileInput = ref<HTMLInputElement | null>(null);
-const themeImportInput = ref<HTMLInputElement | null>(null);
-const uploadError = ref<string | null>(null);
-const importError = ref<string | null>(null);
-const saveThemeError = ref<string | null>(null); // 用于显示保存主题时的错误
-const editableTerminalThemeString = ref(''); // 用于终端主题 textarea 绑定
-const terminalThemeParseError = ref<string | null>(null); // 用于显示终端主题 JSON 解析错误
-const terminalThemePlaceholder = `background: #000000
-foreground: #ffffff
-cursor: #ffffff
-selectionBackground: #555555
-black: #000000
-red: #ff0000
-green: #00ff00
-yellow: #ffff00
-blue: #0000ff
-magenta: #ff00ff
-cyan: #00ffff
-white: #ffffff
-brightBlack: #555555
-brightRed: #ff5555
-brightGreen: #55ff55
-brightYellow: #ffff55
-brightBlue: #5555ff
-brightMagenta: #ff55ff
-brightCyan: #55ffff
-brightWhite: #ffffff`; // 终端主题编辑器的 placeholder (key: value 格式)
+const isEditingTheme = ref(false);
+const editingTheme = ref<TerminalTheme | null>(null);
 
-// 初始化本地编辑状态
-import { defaultUiTheme } from '../features/appearance/config/default-themes'; // 确保导入默认主题
-import { safeJsonParse } from '../stores/appearance.store'; // 导入辅助函数
-
-const initializeEditableState = () => {
-  // 获取用户保存的主题或空对象
-  // 注意：直接从 store 的 appearanceSettings 获取原始字符串，避免依赖 currentUiTheme 计算属性可能带来的延迟或缓存问题
-  const userThemeJson = appearanceSettings.value.customUiTheme;
-  const userTheme = safeJsonParse(userThemeJson, {});
-
-  // 合并默认主题和用户主题，确保所有默认键存在，并优先使用用户值
-  const mergedTheme = { ...defaultUiTheme, ...userTheme }; // 用户值覆盖默认值
-
-  // 深拷贝合并后的主题到 editableUiTheme
-  editableUiTheme.value = JSON.parse(JSON.stringify(mergedTheme));
-
-  // --- 其他初始化保持不变 ---
-  editableTerminalFontFamily.value = currentTerminalFontFamily.value;
-  editableTerminalFontSize.value = currentTerminalFontSize.value;
-  editableEditorFontSize.value = currentEditorFontSize.value;
-  editableEditorFontFamily.value = currentEditorFontFamily.value; // 初始化编辑器字体家族
-  localTerminalBackgroundEnabled.value = isTerminalBackgroundEnabled.value; // <-- 重新添加：在此处初始化
-  editableTerminalBackgroundOverlayOpacity.value = currentTerminalBackgroundOverlayOpacity.value; // 初始化蒙版透明度
-  console.log(`[StyleCustomizer initializeEditableState] Initializing localTerminalBackgroundEnabled to: ${localTerminalBackgroundEnabled.value} (from store: ${isTerminalBackgroundEnabled.value})`); 
-  console.log(`[StyleCustomizer initializeEditableState] Initializing editableTerminalBackgroundOverlayOpacity to: ${editableTerminalBackgroundOverlayOpacity.value} (from store: ${currentTerminalBackgroundOverlayOpacity.value})`);
-  uploadError.value = null;
-  importError.value = null;
-  saveThemeError.value = null;
-  themeParseError.value = null; // 初始化解析错误
-
-  // 初始化 textarea 内容 (基于合并后的主题)
-  try {
-      const themeObject = editableUiTheme.value; // 使用合并后的主题
-      if (themeObject && typeof themeObject === 'object' && Object.keys(themeObject).length > 0) {
-          const lines = Object.entries(themeObject).map(([key, value]) => `${key}: ${value}`);
-          editableUiThemeString.value = lines.join('\n');
-      } else {
-          editableUiThemeString.value = '';
-      }
-  } catch (e) {
-      console.error("初始化 UI 主题字符串失败:", e);
-      editableUiThemeString.value = ''; // Fallback to empty
-  }
-};
-
-onMounted(initializeEditableState);
-
-// 监听 store 变化以更新本地状态 (例如重置或外部更改)
-// 只监听不需要编辑的状态或用于初始化的状态
-// 监听 store 中可能影响初始化状态的值
-// 主要监听 appearanceSettings (包含 customUiTheme) 和 activeTerminalThemeId
-// 不再直接监听 currentUiTheme 计算属性，因为 initializeEditableState 现在直接处理合并逻辑
-watch([
-    () => appearanceStore.appearanceSettings, // 监听整个设置对象的变化
-    activeTerminalThemeId
-], (newVals, oldVals) => {
-    // newVals[0] 是新的 appearanceSettings 对象
-    // newVals[1] 是新的 activeTerminalThemeId
-    const newSettings = newVals[0];
-    const oldSettings = oldVals ? oldVals[0] : {}; // 可能没有旧值
-    const newActiveThemeId = newVals[1];
-    const oldActiveThemeId = oldVals ? oldVals[1] : null;
-
-    // 仅当非编辑状态时，或活动终端主题ID变化时，或 UI 主题/终端背景启用状态设置本身发生变化时 (例如重置或外部更改)，才重新初始化
-    const settingsChanged = newSettings?.customUiTheme !== oldSettings?.customUiTheme ||
-                            newSettings?.terminalBackgroundEnabled !== oldSettings?.terminalBackgroundEnabled ||
-                            newSettings?.terminalBackgroundOverlayOpacity !== oldSettings?.terminalBackgroundOverlayOpacity; // 检查相关设置是否变化
-    if (!isEditingTheme.value || newActiveThemeId !== oldActiveThemeId || settingsChanged) {
-        console.log(`[StyleCustomizer Watch] Triggering re-initialization. isEditing: ${isEditingTheme.value}, themeIdChanged: ${newActiveThemeId !== oldActiveThemeId}, settingsChanged: ${settingsChanged}`);
-        initializeEditableState(); // 调用修改后的初始化函数
-    } else {
-        // 如果正在编辑，只更新非编辑相关的部分 (不包括 UI 主题和终端背景开关，因为它们由 initializeEditableState 处理)
-        console.log('[StyleCustomizer] Watch triggered partial update (editing).');
-        // editableUiTheme.value = JSON.parse(JSON.stringify(newVals[0] || {})); // 移除或注释掉，避免覆盖编辑状态
-        // 确保从正确的 newVals 索引获取值，现在 watch 的依赖项变了
-        // 假设 appearanceSettings 是第一个依赖，activeTerminalThemeId 是第二个
-        // 字体等信息需要从 newSettings 中获取
-        editableTerminalFontFamily.value = newSettings?.terminalFontFamily || '';
-        editableTerminalFontSize.value = newSettings?.terminalFontSize || 14;
-        editableEditorFontSize.value = newSettings?.editorFontSize || 14;
-        editableEditorFontFamily.value = newSettings?.editorFontFamily || 'Consolas, "Noto Sans SC", "Microsoft YaHei"'; // 同步编辑器字体家族
-        // localTerminalBackgroundEnabled.value = newSettings?.terminalBackgroundEnabled ?? true; // <-- 移除此行，避免冲突
-        // editableTerminalBackgroundOverlayOpacity.value = newSettings?.terminalBackgroundOverlayOpacity ?? 0.5; // 在 initializeEditableState 中处理
-    }
-}, { deep: true });
- 
-// 监听 store 中 isTerminalBackgroundEnabled 的变化，以同步本地状态
-watch(isTerminalBackgroundEnabled, (newValue) => {
-  // 只有当本地状态与 store 状态不一致时才更新本地状态
-  // 这避免了 handleToggleTerminalBackground 触发的不必要更新
-  if (localTerminalBackgroundEnabled.value !== newValue) {
-    console.log(`[StyleCustomizer Watch isTerminalBackgroundEnabled] Store changed to ${newValue}, updating local state.`); 
-    localTerminalBackgroundEnabled.value = newValue;
-  } else {
-     console.log(`[StyleCustomizer Watch isTerminalBackgroundEnabled] Store changed to ${newValue}, but local state already matches. No update needed.`);
-  }
-});
-// 移除单独监听 isTerminalBackgroundEnabled 的 watcher
-
-// 监听 store 中 currentTerminalBackgroundOverlayOpacity 的变化，以同步本地状态
-watch(currentTerminalBackgroundOverlayOpacity, (newValue) => {
-  if (editableTerminalBackgroundOverlayOpacity.value !== newValue) {
-    console.log(`[StyleCustomizer Watch currentTerminalBackgroundOverlayOpacity] Store changed to ${newValue}, updating local state.`);
-    editableTerminalBackgroundOverlayOpacity.value = newValue;
-  }
-});
- 
 const emit = defineEmits(['close']);
- 
- 
+
 const closeCustomizer = () => {
-  // 如果正在编辑主题，直接关闭并重置状态
-  if (isEditingTheme.value) {
-      isEditingTheme.value = false; // 退出编辑状态
-      editingTheme.value = null;
-      saveThemeError.value = null; // 同时清除可能存在的保存错误
-  }
-  emit('close'); // 总是触发关闭事件
+  isEditingTheme.value = false;
+  editingTheme.value = null;
+  emit('close');
 };
 
-// 当前活动的标签页
-const currentTab = ref<'ui' | 'terminal' | 'background' | 'other'>('ui'); 
+const currentTab = ref<'ui' | 'terminal' | 'background' | 'other'>('ui');
 
-// --- 处理函数 ---
+// --- Processing Functions ---
 
-// 保存 UI 主题更改
 const handleSaveUiTheme = async () => {
-  try {
-    await appearanceStore.saveCustomUiTheme(editableUiTheme.value);
-    notificationsStore.addNotification({ type: 'success', message: t('styleCustomizer.uiThemeSaved') }); 
-  } catch (error: any) {
-    console.error("保存 UI 主题失败:", error);
-    notificationsStore.addNotification({ type: 'error', message: t('styleCustomizer.uiThemeSaveFailed', { message: error.message }) }); 
+  if (uiTabRef.value) {
+    await uiTabRef.value.handleSaveUiTheme();
   }
 };
 
-// 重置 UI 主题
 const handleResetUiTheme = async () => {
-    try {
-        await appearanceStore.resetCustomUiTheme();
-        notificationsStore.addNotification({ type: 'info', message: t('styleCustomizer.uiThemeReset') }); 
-    } catch (error: any) {
-        console.error("重置 UI 主题失败:", error);
-        notificationsStore.addNotification({ type: 'error', message: t('styleCustomizer.uiThemeResetFailed', { message: error.message }) }); 
-    }
-};
-
-// 定义黑暗模式主题变量
-const darkModeTheme = {
-  '--app-bg-color': '#212529',
-  '--text-color': '#e9ecef',
-  '--text-color-secondary': '#adb5bd',
-  '--border-color': '#495057',
-  '--link-color': '#BB86FC', // 现代紫色 - 亮 (Material Design Purple 200)
-  '--link-hover-color': '#D1A9FF', // 现代紫色 - 悬停 (更亮)
-  '--link-active-color': '#A06CD5', // 现代紫色 - 激活 (与默认主题一致)
-  '--link-active-bg-color': 'rgba(160, 108, 213, 0.2)', /* 现代紫色 - 激活背景 (暗模式) */
-  '--nav-item-active-bg-color': 'var(--link-active-bg-color)',
-  '--header-bg-color': '#343a40',
-  '--footer-bg-color': '#343a40',
-  '--button-bg-color': 'var(--link-active-color)', // 自动更新
-  '--button-text-color': '#ffffff',
-  '--button-hover-bg-color': '#8E44AD', // 现代紫色 - 悬停 (与默认主题一致)
-  '--icon-color': 'var(--text-color-secondary)',
-  '--icon-hover-color': 'var(--link-hover-color)', // 自动更新
-  '--split-line-color': 'var(--border-color)',
-  '--split-line-hover-color': 'var(--border-color)',
-  '--input-focus-border-color': 'var(--link-active-color)', // 自动更新
-  '--input-focus-glow': 'var(--link-active-color)', // 自动更新
-  '--overlay-bg-color': 'rgba(0, 0, 0, 0.8)',
-  '--color-success': '#5cb85c',
-  '--color-error': '#d9534f',
-  '--color-warning': '#f0ad4e',
-  '--font-family-sans-serif': 'sans-serif',
-  '--base-padding': '1rem',
-  '--base-margin': '0.5rem'
-};
-
-// 应用黑暗模式
-const applyDarkMode = async () => {
-  try {
-    // 深拷贝覆盖当前编辑的主题
-    editableUiTheme.value = JSON.parse(JSON.stringify(darkModeTheme));
-    await appearanceStore.saveCustomUiTheme(editableUiTheme.value);
-    notificationsStore.addNotification({ type: 'success', message: t('styleCustomizer.darkModeApplied') }); 
-  } catch (error: any) {
-    console.error("应用黑暗模式失败:", error);
-    notificationsStore.addNotification({ type: 'error', message: t('styleCustomizer.darkModeApplyFailed', { message: error.message || '未知错误' }) }); 
+  if (uiTabRef.value) {
+    await uiTabRef.value.handleResetUiTheme();
   }
 };
 
-// --- Textarea 和 Color Picker 同步 ---
 
-// 计算属性：将本地编辑的 UI 主题对象格式化为内部键值对字符串（无大括号，无行尾逗号）
-const formattedEditableUiThemeJson = computed(() => {
-    try {
-        const themeObject = editableUiTheme.value;
-        if (!themeObject || typeof themeObject !== 'object' || Object.keys(themeObject).length === 0) {
-            return ''; // Return empty string if no theme or empty
-        }
-        // Generate key-value pairs, indented, one per line
-        // Generate key-value pairs, indented, one per line, without quotes for easier editing
-        const lines = Object.entries(themeObject).map(([key, value]) => {
-            // Output key and value directly without leading spaces
-            return `${key}: ${value}`;
-        });
-        // Join with newline
-        return lines.join('\n');
-    } catch (e) {
-        console.error("序列化可编辑 UI 主题键值对失败:", e);
-        return ''; // 回退为空字符串
-    }
-});
-
-// 监听计算属性的变化（通常由颜色选择器引起），更新 textarea 的内容
-watch(formattedEditableUiThemeJson, (newJson) => {
-    // 只有在 textarea 没有聚焦时才更新，避免覆盖用户输入
-    // 或者，如果解析错误存在，也允许更新以显示正确格式
-    if (document.activeElement?.id !== 'uiThemeTextarea' || themeParseError.value) {
-        editableUiThemeString.value = newJson;
-        if (themeParseError.value && document.activeElement?.id !== 'uiThemeTextarea') {
-             themeParseError.value = null; // 如果外部更改修复了错误，清除错误提示
-        }
-    }
-});
-
-// 处理 textarea 内容变化（失去焦点时）
-// 处理 textarea 内容变化（失去焦点时）
-// 处理 textarea 内容变化（失去焦点时）
-// 处理 textarea 内容变化（失去焦点时）
-// 处理 textarea 内容变化（失去焦点时）
-// 处理 textarea 内容变化（失去焦点时）
-// 处理 textarea 内容变化（失去焦点时）
-const handleUiThemeStringChange = () => {
-    themeParseError.value = null; // 清除之前的错误
-    let inputText = editableUiThemeString.value.trim();
-
-    // 如果内容为空，则视为空对象
-    if (!inputText) {
-        editableUiTheme.value = {};
-        return;
-    }
-
-    // 准备构建 JSON 字符串
-    let jsonStringToParse = inputText
-        .split('\n') // 按行分割
-        .map(line => line.trim()) // 去除每行首尾空格
-        .filter(line => line && line.includes(':')) // 过滤空行和不包含冒号的行
-        .map(line => {
-            // 尝试为 key 和 value 添加引号（如果缺少）
-            const parts = line.split(/:(.*)/s); // 按第一个冒号分割，保留后面的所有内容
-            if (parts.length < 2) return null; // 无效行
-
-            let key = parts[0].trim();
-            let value = parts[1].trim();
-
-            // 为 key 添加引号（如果需要）
-            // 移除 key 可能存在的引号再用 stringify 包裹
-            if (key.startsWith('"') && key.endsWith('"')) {
-                key = key.slice(1, -1);
-            }
-             if (key.startsWith("'") && key.endsWith("'")) {
-                key = key.slice(1, -1);
-            }
-            key = JSON.stringify(key); // 使用 JSON.stringify 保证正确转义
-
-            // 为 value 添加引号（如果需要，且不是数字/布尔值/null）
-            // 移除可能的尾随逗号
-            if (value.endsWith(',')) {
-                value = value.slice(0, -1).trim();
-            }
-            // 移除 value 可能存在的引号再判断
-            let originalValue = value;
-             if (value.startsWith('"') && value.endsWith('"')) {
-                originalValue = value.slice(1, -1);
-            } else if (value.startsWith("'") && value.endsWith("'")) {
-                 originalValue = value.slice(1, -1);
-            }
-
-            // 判断是否需要加引号
-            if (isNaN(Number(originalValue)) && originalValue !== 'true' && originalValue !== 'false' && originalValue !== 'null') {
-                 value = JSON.stringify(originalValue); // 使用原始未加引号的值进行 stringify
-            } else {
-                // 对于数字、布尔值、null，不需要加引号
-                value = originalValue;
-            }
-
-
-            return `  ${key}: ${value}`; // 返回带缩进的键值对
-        })
-        .filter(line => line !== null) // 过滤掉处理失败的行
-        .join(',\n'); // 用逗号和换行符连接
-
-    // 添加外层大括号
-    const fullJsonString = `{\n${jsonStringToParse}\n}`;
-
-    try {
-        const parsedTheme = JSON.parse(fullJsonString);
-        // 基础验证：确保是对象
-        if (typeof parsedTheme !== 'object' || parsedTheme === null || Array.isArray(parsedTheme)) {
-            throw new Error(t('styleCustomizer.errorInvalidJsonObject'));
-        }
-        // 更新本地的 editableUiTheme ref，这将触发颜色选择器的更新
-        editableUiTheme.value = parsedTheme;
-        // 注意：此时尚未保存到后端，用户需要点击“保存 UI 主题”按钮
-    } catch (error: any) {
-        console.error('解析 UI 主题配置失败:', error);
-        // 尝试提供更具体的错误信息
-        let errorMessage = error.message || t('styleCustomizer.errorInvalidJsonConfig');
-        if (error instanceof SyntaxError) {
-            errorMessage = `${t('styleCustomizer.errorJsonSyntax')}: ${error.message}`;
-        }
-        themeParseError.value = errorMessage;
-    }
-};
-
-
-// 保存终端字体
-const handleSaveTerminalFont = async () => {
-    try {
-        await appearanceStore.setTerminalFontFamily(editableTerminalFontFamily.value);
-        notificationsStore.addNotification({ type: 'success', message: t('styleCustomizer.terminalFontSaved') }); 
-    } catch (error: any) {
-        console.error("保存终端字体失败:", error);
-        notificationsStore.addNotification({ type: 'error', message: t('styleCustomizer.terminalFontSaveFailed', { message: error.message }) }); 
-    }
-};
-
-// 保存终端字体大小
-const handleSaveTerminalFontSize = async () => {
-    try {
-        const size = Number(editableTerminalFontSize.value);
-        if (isNaN(size) || size <= 0) {
-            notificationsStore.addNotification({ type: 'error', message: t('styleCustomizer.errorInvalidFontSize') }); 
-            return;
-        }
-        await appearanceStore.setTerminalFontSize(size);
-        notificationsStore.addNotification({ type: 'success', message: t('styleCustomizer.terminalFontSizeSaved') }); 
-    } catch (error: any) {
-        console.error("保存终端字体大小失败:", error);
-        notificationsStore.addNotification({ type: 'error', message: t('styleCustomizer.terminalFontSizeSaveFailed', { message: error.message }) }); 
-    }
-};
-
-// 保存编辑器字体大小
-const handleSaveEditorFontSize = async () => {
-    try {
-        const size = Number(editableEditorFontSize.value);
-        if (isNaN(size) || size <= 0) {
-            notificationsStore.addNotification({ type: 'error', message: t('styleCustomizer.errorInvalidEditorFontSize') }); 
-            return;
-        }
-        await appearanceStore.setEditorFontSize(size);
-        notificationsStore.addNotification({ type: 'success', message: t('styleCustomizer.editorFontSizeSaved') }); 
-    } catch (error: any) {
-        console.error("保存编辑器字体大小失败:", error);
-        notificationsStore.addNotification({ type: 'error', message: t('styleCustomizer.editorFontSizeSaveFailed', { message: error.message }) }); 
-    }
-};
- 
-// 保存编辑器字体家族
-const handleSaveEditorFontFamily = async () => {
-    try {
-        await appearanceStore.setEditorFontFamily(editableEditorFontFamily.value);
-        notificationsStore.addNotification({ type: 'success', message: t('styleCustomizer.editorFontFamilySaved') });
-    } catch (error: any) {
-        console.error("保存编辑器字体失败:", error);
-        notificationsStore.addNotification({ type: 'error', message: t('styleCustomizer.editorFontFamilySaveFailed', { message: error.message }) });
-    }
-};
- 
-// 应用选定的终端主题
-const handleApplyTheme = async (theme: TerminalTheme) => {
-    // theme._id 是字符串 ID
-    if (!theme._id) return; // 防御性检查
-
-    // 将字符串 ID 转换为数字进行比较
-    const themeIdNum = parseInt(theme._id, 10);
-    if (isNaN(themeIdNum)) {
-        console.error(`无效的主题 ID 格式: ${theme._id}`);
-        return;
-    }
-
-    // activeTerminalThemeId.value 是 number | null
-    if (themeIdNum === activeTerminalThemeId.value) return; // 如果已经是激活的，则不操作
-
-    try {
-        // setActiveTerminalTheme action 现在需要字符串 ID
-        await appearanceStore.setActiveTerminalTheme(theme._id);
-        notificationsStore.addNotification({ type: 'success', message: t('styleCustomizer.setActiveThemeSuccess', { themeName: theme.name }) }); 
-    } catch (error: any) {
-        console.error("应用终端主题失败:", error);
-        notificationsStore.addNotification({ type: 'error', message: t('styleCustomizer.setActiveThemeFailed', { message: error.message }) }); 
-    }
-};
-
-// --- 终端主题管理 ---
-// 开始新建主题
-const handleAddNewTheme = () => {
-    saveThemeError.value = null; // 清除旧错误
-    terminalThemeParseError.value = null; // 清除旧错误
-    // 创建一个全新的默认主题结构用于编辑
-    editingTheme.value = {
-        _id: undefined, // 清除 ID 表示是新建
-        name: t('styleCustomizer.newThemeDefaultName'),
-        themeData: JSON.parse(JSON.stringify(defaultXtermTheme)), // 使用默认 xterm 主题作为基础
-        isPreset: false, // 明确不是预设
-    };
-    // 初始化 textarea (key: value 格式)
-    try {
-        const themeObject = editingTheme.value.themeData;
-        if (themeObject && typeof themeObject === 'object' && Object.keys(themeObject).length > 0) {
-            const lines = Object.entries(themeObject).map(([key, value]) => `${key}: ${value}`);
-            editableTerminalThemeString.value = lines.join('\n');
-        } else {
-            editableTerminalThemeString.value = '';
-        }
-    } catch (e) {
-        console.error("格式化新终端主题字符串失败:", e);
-        editableTerminalThemeString.value = ''; // Fallback
-    }
-    isEditingTheme.value = true;
-};
-
-
-// 开始编辑主题 (用户主题或基于预设创建副本) - 改为异步加载数据
-const handleEditTheme = async (theme: TerminalTheme) => {
-    saveThemeError.value = null; // 清除旧错误
-    terminalThemeParseError.value = null; // 清除旧错误
-
-    // 检查 theme._id 是否存在
-    if (!theme._id) {
-        console.error("尝试编辑没有 ID 的主题:", theme);
-        notificationsStore.addNotification({ type: 'error', message: t('styleCustomizer.errorEditThemeNoId') }); 
-        return;
-    }
-
-    let themeDataToEdit: ITheme | null = null;
-    let themeNameToEdit = theme.name;
-    let themeIdToEdit: string | undefined = theme._id; // 保留原始 ID 用于更新，如果是预设副本则为 undefined
-
-    try {
-        // 1. 加载主题数据
-        themeDataToEdit = await appearanceStore.loadTerminalThemeData(theme._id);
-        if (!themeDataToEdit) {
-            throw new Error(t('styleCustomizer.errorLoadThemeDataFailed')); 
-        }
-
-        // 2. 如果是预设主题，准备创建副本
-        if (theme.isPreset) {
-            themeNameToEdit = `${theme.name} (Copy)`;
-            themeIdToEdit = undefined; // 清除 ID，表示是新建
-            console.log('基于预设主题加载数据并创建副本进行编辑:', themeNameToEdit);
-        } else {
-            console.log('加载用户主题数据进行编辑:', themeNameToEdit);
-        }
-
-        // 3. 设置编辑状态
-        editingTheme.value = {
-            _id: themeIdToEdit, // 可能是 undefined (新建副本) 或原始 ID (编辑现有)
-            name: themeNameToEdit,
-            themeData: JSON.parse(JSON.stringify(themeDataToEdit)), // 深拷贝加载的数据
-            isPreset: false, // 编辑状态下总是不是预设
-        };
-
-        // 4. 初始化 textarea (key: value 格式)
-        try {
-            const themeObject = editingTheme.value.themeData;
-            if (themeObject && typeof themeObject === 'object' && Object.keys(themeObject).length > 0) {
-                const lines = Object.entries(themeObject).map(([key, value]) => `${key}: ${value}`);
-                editableTerminalThemeString.value = lines.join('\n');
-            } else {
-                editableTerminalThemeString.value = '';
-            }
-        } catch (e) {
-            console.error("格式化编辑终端主题字符串失败:", e);
-            editableTerminalThemeString.value = ''; // Fallback
-        }
-
-        isEditingTheme.value = true; // 进入编辑模式
-
-    } catch (error: any) {
-        console.error("编辑主题失败 (加载数据时):", error);
-        saveThemeError.value = error.message || t('styleCustomizer.errorEditThemeFailed'); 
-        // 不进入编辑模式
-        isEditingTheme.value = false;
-        editingTheme.value = null;
-    }
-};
-
-// 保存主题编辑 (新建或更新)
-const handleSaveEditingTheme = async () => {
-    if (!editingTheme.value || !editingTheme.value.name) {
-        saveThemeError.value = t('styleCustomizer.errorThemeNameRequired');
-        return;
-    }
-    // 在保存前，确保 themeData 是最新的（以防 textarea 未失去焦点）
-    handleTerminalThemeStringChange(); // 先尝试解析 textarea
-    if (terminalThemeParseError.value) {
-        saveThemeError.value = t('styleCustomizer.errorFixJsonBeforeSave'); 
-        return;
-    }
-
-    saveThemeError.value = null; // 清除错误
-    try {
-        // 确保 themeData 是最新的（以防万一解析没触发 watch 更新）
-        if (!editingTheme.value) return; // 防御
-        // 直接使用已经由 handleTerminalThemeStringChange 解析好的 themeData 对象
-        const currentThemeData = editingTheme.value.themeData;
-
-        if (editingTheme.value._id) { // 更新
-            // 确保传递的是 UpdateTerminalThemeDto 兼容的格式
-            const updateDto = { name: editingTheme.value.name, themeData: currentThemeData }; // 使用解析后的数据
-            await appearanceStore.updateTerminalTheme(
-                editingTheme.value._id,
-                updateDto.name,
-                updateDto.themeData
-           );
-           notificationsStore.addNotification({ type: 'success', message: t('styleCustomizer.themeUpdatedSuccess') }); 
-       } else { // 新建
-            // 确保传递的是 CreateTerminalThemeDto 兼容的格式
-           const createDto = { name: editingTheme.value.name, themeData: currentThemeData }; // 使用解析后的数据
-           await appearanceStore.createTerminalTheme(
-               createDto.name,
-               createDto.themeData
-           );
-           notificationsStore.addNotification({ type: 'success', message: t('styleCustomizer.themeCreatedSuccess') }); 
-       }
-       isEditingTheme.value = false; // 关闭编辑
-        editingTheme.value = null;
-        editableTerminalThemeString.value = ''; // 清理
-        terminalThemeParseError.value = null; // 清理
-    } catch (error: any) {
-        console.error("保存终端主题失败:", error);
-        saveThemeError.value = error.message || t('styleCustomizer.themeSaveFailed');
-    }
-};
-
-// 取消编辑
-const handleCancelEditingTheme = () => {
-    isEditingTheme.value = false;
-    editingTheme.value = null;
-    saveThemeError.value = null;
-    terminalThemeParseError.value = null; // 清理
-    editableTerminalThemeString.value = ''; // 清理
-};
-
-// --- 处理终端主题 Textarea (解析 key: value 格式) ---
-const handleTerminalThemeStringChange = () => {
-    terminalThemeParseError.value = null; // 清除之前的错误
-    if (!editingTheme.value) return; // 防御性检查
-
-    let inputText = editableTerminalThemeString.value.trim();
-
-    // 如果内容为空，则视为空对象
-    if (!inputText) {
-        editingTheme.value.themeData = {};
-        return;
-    }
-
-    // 准备构建 JSON 字符串 (参考 handleUiThemeStringChange)
-    let jsonStringToParse = inputText
-        .split('\n') // 按行分割
-        .map(line => line.trim()) // 去除每行首尾空格
-        .filter(line => line && line.includes(':')) // 过滤空行和不包含冒号的行
-        .map(line => {
-            const parts = line.split(/:(.*)/s); // 按第一个冒号分割
-            if (parts.length < 2) return null;
-
-            let key = parts[0].trim();
-            let value = parts[1].trim();
-
-            // 为 key 添加引号
-            if (key.startsWith('"') && key.endsWith('"')) key = key.slice(1, -1);
-            if (key.startsWith("'") && key.endsWith("'")) key = key.slice(1, -1);
-            key = JSON.stringify(key);
-
-            // 为 value 添加引号（如果需要）
-            if (value.endsWith(',')) value = value.slice(0, -1).trim();
-            let originalValue = value;
-            if (value.startsWith('"') && value.endsWith('"')) originalValue = value.slice(1, -1);
-            else if (value.startsWith("'") && value.endsWith("'")) originalValue = value.slice(1, -1);
-
-            if (isNaN(Number(originalValue)) && originalValue !== 'true' && originalValue !== 'false' && originalValue !== 'null') {
-                 value = JSON.stringify(originalValue);
-            } else {
-                value = originalValue; // 数字、布尔值、null 不需要引号
-            }
-
-            return `  ${key}: ${value}`;
-        })
-        .filter(line => line !== null)
-        .join(',\n');
-
-    const fullJsonString = `{\n${jsonStringToParse}\n}`;
-
-    try {
-        const parsedThemeData = JSON.parse(fullJsonString);
-        // 基础验证：确保是对象且不是数组
-        if (typeof parsedThemeData !== 'object' || parsedThemeData === null || Array.isArray(parsedThemeData)) {
-            throw new Error(t('styleCustomizer.errorInvalidJsonObject'));
-        }
-        // 更新 editingTheme.value.themeData
-        editingTheme.value.themeData = parsedThemeData;
-    } catch (error: any) {
-        console.error('解析终端主题配置失败:', error);
-        let errorMessage = error.message || t('styleCustomizer.errorInvalidJsonConfig');
-        if (error instanceof SyntaxError) {
-            errorMessage = `${t('styleCustomizer.errorJsonSyntax')}: ${error.message}`;
-        }
-        terminalThemeParseError.value = errorMessage;
-    }
-};
-
-// 删除主题
-const handleDeleteTheme = async (theme: TerminalTheme) => {
-    if (theme.isPreset) return;
-    try {
-        await appearanceStore.deleteTerminalTheme(theme._id!);
-        notificationsStore.addNotification({ type: 'success', message: t('styleCustomizer.themeDeletedSuccess') }); 
-    } catch (error: any) {
-        console.error("删除终端主题失败:", error);
-        notificationsStore.addNotification({ type: 'error', message: t('styleCustomizer.themeDeleteFailed', { message: error.message }) }); 
-    }
-};
-
-// 触发主题导入文件选择
-const handleTriggerImport = () => {
-    importError.value = null;
-    themeImportInput.value?.click();
-};
-
-// 处理主题导入
-const handleImportThemeFile = async (event: Event) => {
-    const input = event.target as HTMLInputElement;
-    if (input.files && input.files[0]) {
-        const file = input.files[0];
-        try {
-            // 可以选择在前端解析文件名作为默认名称传递给后端
-            const defaultName = file.name.endsWith('.json') ? file.name.slice(0, -5) : file.name;
-            await appearanceStore.importTerminalTheme(file, defaultName); // 传递文件名作为备选名称
-            notificationsStore.addNotification({ type: 'success', message: t('styleCustomizer.importSuccess') }); 
-            input.value = ''; // 清空文件输入，以便再次选择相同文件
-        } catch (error: any) {
-            console.error("导入主题失败:", error);
-            const determinedErrorMessage = error.message || t('styleCustomizer.importFailed');
-            importError.value = determinedErrorMessage; // importError.value 的类型是 string | null
-            // 确保传递给 addNotification 的 message 是 string 类型
-            notificationsStore.addNotification({ type: 'error', message: determinedErrorMessage });
-            input.value = '';
-        }
-    }
-};
-
-// 处理主题导出 (导出当前激活的主题)
-const handleExportActiveTheme = async () => {
-    const currentIdNum = activeTerminalThemeId.value; // 现在是 number | null | undefined
-    // 必须同时检查 null 和 undefined
-    if (currentIdNum !== null && currentIdNum !== undefined) {
-        try {
-            // exportTerminalTheme action 需要字符串 ID
-            await appearanceStore.exportTerminalTheme(currentIdNum.toString());
-            // 导出通常是下载文件，可能不需要显式通知，或者可以有一个信息性通知
-            notificationsStore.addNotification({ type: 'info', message: t('styleCustomizer.exportInitiated') }); 
-        } catch (error: any) {
-            console.error("导出主题失败:", error);
-            notificationsStore.addNotification({ type: 'error', message: t('styleCustomizer.exportFailed', { message: error.message }) }); 
-        }
-    } else {
-        console.warn("尝试导出主题，但 activeTerminalThemeId 为 null 或 undefined");
-        notificationsStore.addNotification({ type: 'warning', message: t('styleCustomizer.noActiveThemeToExport') }); 
-    }
-};
-
-
-// --- 背景处理 ---
-const handleTriggerPageBgUpload = () => {
-    uploadError.value = null;
-    pageBgFileInput.value?.click();
-};
-const handleTriggerTerminalBgUpload = () => {
-    uploadError.value = null;
-    terminalBgFileInput.value?.click();
-};
-
-const handlePageBgUpload = async (event: Event) => {
-    const input = event.target as HTMLInputElement;
-    if (input.files && input.files[0]) {
-        const file = input.files[0];
-        try {
-            await appearanceStore.uploadPageBackground(file);
-            notificationsStore.addNotification({ type: 'success', message: t('styleCustomizer.pageBgUploadSuccess') }); 
-            input.value = ''; // 清空以便再次选择
-        } catch (error: any) {
-            const determinedErrorMessage = error.message || t('styleCustomizer.uploadFailed');
-            uploadError.value = determinedErrorMessage;
-            notificationsStore.addNotification({ type: 'error', message: determinedErrorMessage }); // 显示错误通知
-            input.value = '';
-        }
-    }
-};
-
-const handleTerminalBgUpload = async (event: Event) => {
-     const input = event.target as HTMLInputElement;
-    if (input.files && input.files[0]) {
-        const file = input.files[0];
-        try {
-            await appearanceStore.uploadTerminalBackground(file);
-            notificationsStore.addNotification({ type: 'success', message: t('styleCustomizer.terminalBgUploadSuccess') }); 
-            input.value = '';
-        } catch (error: any) {
-            const determinedErrorMessage = error.message || t('styleCustomizer.uploadFailed');
-            uploadError.value = determinedErrorMessage;
-            notificationsStore.addNotification({ type: 'error', message: determinedErrorMessage }); // 显示错误通知
-            input.value = '';
-        }
-    }
-};
-
-const handleRemovePageBg = async () => {
-    try {
-        await appearanceStore.removePageBackground();
-        notificationsStore.addNotification({ type: 'success', message: t('styleCustomizer.pageBgRemoved') }); 
-    } catch (error: any) {
-         console.error("移除页面背景失败:", error);
-         notificationsStore.addNotification({ type: 'error', message: t('styleCustomizer.removeBgFailed', { message: error.message }) }); 
-    }
-};
-
-const handleRemoveTerminalBg = async () => {
-    try {
-        await appearanceStore.removeTerminalBackground();
-        notificationsStore.addNotification({ type: 'success', message: t('styleCustomizer.terminalBgRemoved') }); 
-    } catch (error: any) {
-         console.error("移除终端背景失败:", error);
-         notificationsStore.addNotification({ type: 'error', message: t('styleCustomizer.removeBgFailed', { message: error.message }) }); 
-    }
-};
- 
-// 处理终端背景启用/禁用切换
-const handleToggleTerminalBackground = async () => {
-    const newValue = !localTerminalBackgroundEnabled.value; // 先计算新值
-    localTerminalBackgroundEnabled.value = newValue; // 立即更新本地 UI
-    try {
-        await appearanceStore.setTerminalBackgroundEnabled(newValue);
-        // 成功后不需要提示，UI 已更新
-    } catch (error: any) {
-        console.error("更新终端背景启用状态失败:", error);
-        // 失败时回滚本地状态
-        localTerminalBackgroundEnabled.value = !newValue;
-        notificationsStore.addNotification({ type: 'error', message: t('styleCustomizer.errorToggleTerminalBg', { message: error.message }) }); 
-    }
-};
- 
-// 保存终端背景蒙版透明度
-const handleSaveTerminalBackgroundOverlayOpacity = async () => {
-  try {
-    const opacity = Number(editableTerminalBackgroundOverlayOpacity.value);
-    if (isNaN(opacity) || opacity < 0 || opacity > 1) {
-      notificationsStore.addNotification({ type: 'error', message: t('styleCustomizer.errorInvalidOpacityValue') }); 
-      return;
-    }
-    await appearanceStore.setTerminalBackgroundOverlayOpacity(opacity);
-    notificationsStore.addNotification({ type: 'success', message: t('styleCustomizer.terminalBgOverlayOpacitySaved') }); 
-  } catch (error: any) {
-    console.error("保存终端背景蒙版透明度失败:", error);
-    notificationsStore.addNotification({ type: 'error', message: t('styleCustomizer.terminalBgOverlayOpacitySaveFailed', { message: error.message }) }); 
-  }
-};
-
-// Removed handlePageOpacityChange and handleTerminalOpacityChange functions
- 
-// --- 辅助函数 ---
-// 格式化 UI 主题标签
-const formatLabel = (key: string): string => {
-  // 简单的转换逻辑，可以根据需要优化
-  return key
-    .replace(/^--/, '') // 移除前缀 '--'
-    .replace(/-/g, ' ') // 替换 '-' 为空格
-    .replace(/([A-Z])/g, ' $1') // 在大写字母前加空格
-    .replace(/^./, (str) => str.toUpperCase()); // 首字母大写
-};
-
-// 格式化 xterm 主题属性标签
-const formatXtermLabel = (key: keyof ITheme): string => {
-  // 简单的转换逻辑
-  return key.replace(/([A-Z])/g, ' $1').replace(/^./, (str) => str.toUpperCase());
-};
-
-// --- 计算属性 ---
-
-// 获取当前激活主题的名称
-const activeThemeName = computed(() => {
-  const currentIdNum = activeTerminalThemeId.value; // number | null | undefined
-  // 同时检查 null 和 undefined
-  if (currentIdNum === null || currentIdNum === undefined) {
-      return '未选择主题'; // 或者返回默认主题名称？
-  }
-  // 在 allTerminalThemes 中查找
-  // 将数字 ID 转为字符串进行比较
-  const theme = allTerminalThemes.value.find((t: TerminalTheme) => t._id === currentIdNum.toString());
-  return theme ? theme.name : '未知主题';
-});
-
-// 过滤和排序主题列表 (使用 allTerminalThemes)
-const filteredAndSortedThemes = computed(() => {
-  const searchTerm = themeSearchTerm.value.toLowerCase().trim();
-  // 使用 allTerminalThemes
-  let themes = [...allTerminalThemes.value];
-
-  // 过滤
-  if (searchTerm) {
-    // 显式指定 theme 类型
-    themes = themes.filter((theme: TerminalTheme) => theme.name.toLowerCase().includes(searchTerm));
-  }
-
-  // 按名称升序排序
-  themes.sort((a: TerminalTheme, b: TerminalTheme) => a.name.localeCompare(b.name));
-
-  return themes;
-});
-
-// 排序切换函数已移除
-// --- 监听 themeData 变化以更新 textarea (格式化为 key: value) ---
-watch(() => editingTheme.value?.themeData, (newThemeData) => {
-    // 只有在 textarea 没有聚焦时才更新，避免覆盖用户输入
-    // 或者，如果解析错误存在，也允许更新以显示正确格式
-    if (newThemeData && (document.activeElement?.id !== 'terminalThemeTextarea' || terminalThemeParseError.value)) {
-        try {
-            // 格式化为 key: value 字符串
-            let newStringValue = '';
-            if (typeof newThemeData === 'object' && Object.keys(newThemeData).length > 0) {
-                const lines = Object.entries(newThemeData).map(([key, value]) => `${key}: ${value}`);
-                newStringValue = lines.join('\n');
-            }
-
-            // 只有当字符串实际不同时才更新
-            if (newStringValue !== editableTerminalThemeString.value) {
-                 editableTerminalThemeString.value = newStringValue;
-            }
-            // 如果外部更改（如颜色选择器）修复了错误，清除错误提示
-            if (terminalThemeParseError.value && document.activeElement?.id !== 'terminalThemeTextarea') {
-                 terminalThemeParseError.value = null;
-            }
-        } catch (e) {
-            console.error("格式化终端主题字符串失败:", e);
-        }
-    }
-}, { deep: true }); // 需要 deep watch 来监听 themeData 内部的变化
-
-// Helper function to safely select text in an input on focus
-const handleFocusAndSelect = (event: FocusEvent) => {
-  const target = event.target;
-  if (target instanceof HTMLInputElement) {
-    target.select();
-  }
-};
 
 const modalRootRef = ref<HTMLDivElement | null>(null);
 
-// Store original styles to revert back
-let originalModalRootBackgroundColor: string | null = null;
-let originalModalContentOpacity: string | null = null;
-let originalModalRootTransition: string | null = null;
-let originalModalContentTransition: string | null = null;
-
-const handlePreviewButtonMouseDown = async (event: MouseEvent, themeToPreview: TerminalTheme) => {
-  // 阻止可能的文本选择等默认行为
-  event.preventDefault();
-
-  if (modalRootRef.value && themeToPreview._id) {
-    const modalContentElement = modalRootRef.value.firstElementChild as HTMLElement;
-    try {
-      // 1. 加载要预览的主题数据
-      const themeData = await appearanceStore.loadTerminalThemeData(themeToPreview._id);
-      if (!themeData) {
-        console.error('Preview failed: Could not load theme data for', themeToPreview.name);
-        return;
-      }
-
-      // 2. 通知 store 开始预览 (假设 store 有此 action)
-      // 这个 action 内部会保存当前主题ID/数据，并设置一个临时预览主题
-      appearanceStore.startTerminalThemePreview(themeData); // 期望参数类型为 ITheme
-
-      // 3. 使模态框和背景透明
-      if (originalModalRootBackgroundColor === null && modalContentElement) { // 保存原始样式
-        originalModalRootBackgroundColor = window.getComputedStyle(modalRootRef.value).backgroundColor;
-        originalModalRootTransition = modalRootRef.value.style.transition;
-        originalModalContentOpacity = window.getComputedStyle(modalContentElement).opacity;
-        originalModalContentTransition = modalContentElement.style.transition;
-      }
-
-      modalRootRef.value.style.transition = 'background-color 0.05s ease-out, opacity 0.05s ease-out';
-      modalRootRef.value.style.backgroundColor = 'transparent';
-      // modalRootRef.value.style.opacity = '0'; // 如果背景遮罩就是 modalRootRef
-
-      if (modalContentElement) {
-        modalContentElement.style.transition = 'opacity 0.05s ease-out';
-        modalContentElement.style.opacity = '0';
-      }
-
-      // 4. 设置 mouseup 监听器以恢复
-      const restoreOnMouseUp = () => {
-        // 4a. 通知 store 停止预览
-        appearanceStore.stopTerminalThemePreview(); // 这个 action 会恢复原始主题
-
-        // 4b. 恢复模态框可见性
-        if (modalRootRef.value) {
-          modalRootRef.value.style.backgroundColor = originalModalRootBackgroundColor || '';
-          // modalRootRef.value.style.opacity = '1'; // Or original opacity if it wasn't 1
-          modalRootRef.value.style.transition = originalModalRootTransition || '';
-        }
-        if (modalContentElement) {
-          modalContentElement.style.opacity = originalModalContentOpacity || '1';
-          modalContentElement.style.transition = originalModalContentTransition || '';
-        }
-
-        // 重置保存的原始样式
-        originalModalRootBackgroundColor = null;
-        originalModalContentOpacity = null;
-        originalModalRootTransition = null;
-        originalModalContentTransition = null;
-
-        document.removeEventListener('mouseup', restoreOnMouseUp);
-        const currentTargetButton = event.currentTarget as HTMLElement | null;
-        if (currentTargetButton) {
-            currentTargetButton.removeEventListener('mouseleave', restoreOnMouseUp);
-        }
-      };
-
-      document.addEventListener('mouseup', restoreOnMouseUp, { once: true });
-      const currentTargetButton = event.currentTarget as HTMLElement | null;
-      if (currentTargetButton) {
-          currentTargetButton.addEventListener('mouseleave', restoreOnMouseUp, { once: true });
-      }
-
-    } catch (error) {
-      console.error('Error during theme preview:', error);
-      appearanceStore.stopTerminalThemePreview(); // 尝试停止预览
-      // 可选：恢复模态框样式，如果需要更复杂的错误处理
-        if (modalRootRef.value && modalContentElement) {
-            modalRootRef.value.style.backgroundColor = originalModalRootBackgroundColor || '';
-            modalRootRef.value.style.transition = originalModalRootTransition || '';
-            modalContentElement.style.opacity = originalModalContentOpacity || '1';
-            modalContentElement.style.transition = originalModalContentTransition || '';
-            originalModalRootBackgroundColor = null;
-            originalModalContentOpacity = null;
-            originalModalRootTransition = null;
-            originalModalContentTransition = null;
-        }
-    }
-  }
-};
 
 </script>
 
 
 <template>
-  <!-- 添加 md: 前缀以应用到中等及以上屏幕，小屏幕默认全屏 -->
   <div ref="modalRootRef" class="fixed inset-0 bg-black/60 flex justify-center items-center z-[1000] p-2 md:p-4" @click.self="closeCustomizer">
-    <!-- 小屏幕默认 w-full h-full，md 及以上恢复原状 -->
     <div class="bg-background text-foreground rounded-lg shadow-lg w-full h-full md:w-[90%] md:max-w-[800px] md:h-[85vh] md:max-h-[700px] flex flex-col overflow-hidden">
       <header class="flex justify-between items-center px-4 py-3 border-b border-border bg-header flex-shrink-0">
         <h2 class="m-0 text-lg md:text-xl text-foreground">{{ t('styleCustomizer.title') }}</h2>
@@ -1053,7 +61,7 @@ const handlePreviewButtonMouseDown = async (event: MouseEvent, themeToPreview: T
             @click="currentTab = 'ui'"
             :class="[
               'block w-auto md:w-full px-3 py-2 md:py-[0.7rem] mb-0 md:mb-2 mx-1 md:mx-0 text-center md:text-left bg-transparent border border-transparent rounded cursor-pointer text-foreground text-sm md:text-[0.95rem] transition-colors duration-200 ease-in-out hover:bg-black/5 disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-transparent disabled:text-text-secondary',
-              { '!bg-button !text-button-text !font-bold': currentTab === 'ui' } /* Added !important */
+              { '!bg-button !text-button-text !font-bold': currentTab === 'ui' }
             ]"
           >
             {{ t('styleCustomizer.uiStyles') }}
@@ -1062,7 +70,7 @@ const handlePreviewButtonMouseDown = async (event: MouseEvent, themeToPreview: T
             @click="currentTab = 'terminal'"
             :class="[
               'block w-auto md:w-full px-3 py-2 md:py-[0.7rem] mb-0 md:mb-2 mx-1 md:mx-0 text-center md:text-left bg-transparent border border-transparent rounded cursor-pointer text-foreground text-sm md:text-[0.95rem] transition-colors duration-200 ease-in-out hover:bg-black/5 disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-transparent disabled:text-text-secondary',
-              { '!bg-button !text-button-text !font-bold': currentTab === 'terminal' && !isEditingTheme } /* Added !important */
+              { '!bg-button !text-button-text !font-bold': currentTab === 'terminal' && !isEditingTheme } 
             ]"
             :disabled="isEditingTheme"
           >
@@ -1072,7 +80,7 @@ const handlePreviewButtonMouseDown = async (event: MouseEvent, themeToPreview: T
             @click="currentTab = 'background'"
             :class="[
               'block w-auto md:w-full px-3 py-2 md:py-[0.7rem] mb-0 md:mb-2 mx-1 md:mx-0 text-center md:text-left bg-transparent border border-transparent rounded cursor-pointer text-foreground text-sm md:text-[0.95rem] transition-colors duration-200 ease-in-out hover:bg-black/5 disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-transparent disabled:text-text-secondary',
-              { '!bg-button !text-button-text !font-bold': currentTab === 'background' } /* Added !important */
+              { '!bg-button !text-button-text !font-bold': currentTab === 'background' }
             ]"
             :disabled="isEditingTheme"
           >
@@ -1082,333 +90,27 @@ const handlePreviewButtonMouseDown = async (event: MouseEvent, themeToPreview: T
             @click="currentTab = 'other'"
             :class="[
               'block w-auto md:w-full px-3 py-2 md:py-[0.7rem] mb-0 md:mb-2 mx-1 md:mx-0 text-center md:text-left bg-transparent border border-transparent rounded cursor-pointer text-foreground text-sm md:text-[0.95rem] transition-colors duration-200 ease-in-out hover:bg-black/5 disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-transparent disabled:text-text-secondary',
-              { '!bg-button !text-button-text !font-bold': currentTab === 'other' } /* Added !important */
+              { '!bg-button !text-button-text !font-bold': currentTab === 'other' } 
             ]"
             :disabled="isEditingTheme"
           >
-            {{ t('styleCustomizer.otherSettings') }} <!-- 需要添加翻译 -->
+            {{ t('styleCustomizer.otherSettings') }}
           </button>
         </nav>
         
         <main class="flex-grow p-3 md:p-4 md:px-6 overflow-y-auto min-h-0">
-          <section v-if="currentTab === 'ui'">
-            <h3 class="mt-0 border-b border-border pb-2 mb-4 text-lg font-semibold text-foreground">{{ t('styleCustomizer.uiStyles') }}</h3>
-            <!-- 主题模式选择 - 小屏幕堆叠 -->
-            <div class="grid grid-cols-1 md:grid-cols-[auto_1fr] items-start md:items-center gap-2 md:gap-3 mb-6">
-                <label class="text-left text-foreground text-sm font-medium mb-1 md:mb-0">{{ t('styleCustomizer.themeModeLabel', '主题模式:') }}</label> <!-- TODO: 添加翻译 -->
-                <div class="flex gap-2 justify-start flex-wrap"> 
-                    <button @click="handleResetUiTheme" class="px-3 py-1.5 text-sm border border-border rounded bg-header hover:bg-border transition duration-200 ease-in-out whitespace-nowrap">{{ t('styleCustomizer.defaultMode', '默认模式') }}</button> <!-- TODO: 添加翻译 -->
-                    <button @click="applyDarkMode" class="px-3 py-1.5 text-sm border border-border rounded bg-header hover:bg-border transition duration-200 ease-in-out whitespace-nowrap">{{ t('styleCustomizer.darkMode', '黑暗模式') }}</button> <!-- TODO: 添加翻译 -->
-                </div>
-            </div>
-            <p class="text-text-secondary text-sm leading-relaxed mb-3">{{ t('styleCustomizer.uiDescription') }}</p>
-            <!-- 动态生成 UI 样式编辑控件 - 小屏幕堆叠 -->
-            <div v-for="(value, key) in editableUiTheme" :key="key" class="grid grid-cols-1 md:grid-cols-[auto_1fr] items-start md:items-center gap-x-3 gap-y-1 mb-3">
-              <label :for="`ui-${key}`" class="text-left text-foreground text-sm font-medium overflow-hidden text-ellipsis block w-full mb-1 md:mb-0">{{ formatLabel(key) }}:</label>
-              <!-- Container for color picker and text display -->
-              <div class="flex items-center gap-2 w-full">
-                <!-- Color Picker -->
-                <input
-                  v-if="typeof value === 'string' && (value.startsWith('#') || value.startsWith('rgb') || value.startsWith('hsl'))"
-                  type="color"
-                  :id="`ui-${key}`"
-                  v-model="editableUiTheme[key]"
-                  class="p-0.5 h-[34px] min-w-[40px] max-w-[50px] rounded border border-border flex-shrink-0 focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary"
-                />
-                <!-- Readonly text input to display and copy color value -->
-                <input
-                  v-if="typeof value === 'string' && (value.startsWith('#') || value.startsWith('rgb') || value.startsWith('hsl'))"
-                  type="text"
-                  :value="editableUiTheme[key]"
-                  class="flex-grow min-w-[80px] bg-background cursor-text border border-border px-[0.7rem] py-2 rounded text-sm text-foreground w-full box-border transition duration-200 ease-in-out focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary"
-                  @focus="handleFocusAndSelect"
-                  @input="editableUiTheme[key] = ($event.target as HTMLInputElement).value"
-                />
-                <!-- Fallback for non-color values -->
-                <input
-                  v-else
-                  type="text"
-                  :id="`ui-${key}`"
-                  v-model="editableUiTheme[key]"
-                  class="col-span-full border border-border px-[0.7rem] py-2 rounded text-sm bg-background text-foreground w-full box-border transition duration-200 ease-in-out focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary"
-                />
-              </div>
-            </div>
-            <!-- UI Theme Textarea -->
-            <hr style="margin-top: calc(var(--base-padding) * 2); margin-bottom: calc(var(--base-padding) * 2);">
-            <h4 class="mt-6 mb-2 text-base font-semibold text-foreground">{{ t('styleCustomizer.uiThemeJsonEditorTitle') }}</h4> <!-- TODO: Add translation -->
-            <p class="text-text-secondary text-sm leading-relaxed mb-3">{{ t('styleCustomizer.uiThemeJsonEditorDesc') }}</p> <!-- TODO: Add translation -->
-            <div class="mt-4"> <!-- Removed form-group, added margin -->
-               <label for="uiThemeTextarea" class="sr-only">{{ t('styleCustomizer.uiThemeJsonEditorTitle') }}</label> <!-- Screen reader only label -->
-               <textarea
-                 id="uiThemeTextarea"
-                 v-model="editableUiThemeString"
-                 @blur="handleUiThemeStringChange"
-                 rows="15"
-                 :placeholder="'--app-bg-color: #ffffff\n--text-color: #333333\n...'"
-                 spellcheck="false"
-                 class="w-full font-mono text-sm leading-snug border border-border rounded p-3 bg-background text-foreground resize-y min-h-[200px] box-border whitespace-pre-wrap break-words transition duration-200 ease-in-out focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary"
-               ></textarea>
-            </div>
-             <p v-if="themeParseError" class="text-error-text bg-error/10 border border-error/30 px-3 py-2 rounded text-sm mt-2">{{ themeParseError }}</p> <!-- Adjusted error styles -->
-         </section>
-          <section v-if="currentTab === 'terminal' && !isEditingTheme">
-            <h3 class="mt-0 border-b border-border pb-2 mb-4 text-lg font-semibold text-foreground">{{ t('styleCustomizer.terminalStyles') }}</h3>
-            
-            <div class="grid grid-cols-1 md:grid-cols-[auto_1fr_auto] items-start md:items-center gap-2 md:gap-3 mb-3">
-                <label for="terminalFontFamily" class="text-left text-foreground text-sm font-medium overflow-hidden text-ellipsis block w-full mb-1 md:mb-0">{{ t('styleCustomizer.terminalFontFamily') }}:</label>
-                <input type="text" id="terminalFontFamily" v-model="editableTerminalFontFamily" class="border border-border px-[0.7rem] py-2 rounded text-sm bg-background text-foreground w-full box-border transition duration-200 ease-in-out focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary" :placeholder="t('styleCustomizer.terminalFontPlaceholder')"/>
-                <button @click="handleSaveTerminalFont" class="px-3 py-1.5 text-sm border border-border rounded bg-header hover:bg-border transition duration-200 ease-in-out whitespace-nowrap justify-self-start mt-1 md:mt-0">{{ t('common.save') }}</button>
-            </div>
-            <p class="text-xs text-text-secondary -mt-1 mb-2">{{ t('styleCustomizer.terminalFontDescription') }}</p>
+          <StyleCustomizerUiTab v-if="currentTab === 'ui'" ref="uiTabRef" />
+          <StyleCustomizerTerminalTab
+            v-if="currentTab === 'terminal'"
+            :modal-root-ref="modalRootRef"
+            :is-editing-theme="isEditingTheme"
+            :editing-theme="editingTheme"
+            @update:is-editing-theme="val => isEditingTheme = val"
+            @update:editing-theme="val => editingTheme = val"
+          />
 
-            
-            <div class="grid grid-cols-1 md:grid-cols-[auto_1fr_auto] items-start md:items-center gap-2 md:gap-3 mb-3">
-                <label for="terminalFontSize" class="text-left text-foreground text-sm font-medium overflow-hidden text-ellipsis block w-full mb-1 md:mb-0">{{ t('styleCustomizer.terminalFontSize') }}:</label>
-                <input type="number" id="terminalFontSize" v-model.number="editableTerminalFontSize" class="border border-border px-[0.7rem] py-2 rounded text-sm bg-background text-foreground max-w-[100px] justify-self-start box-border transition duration-200 ease-in-out focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary" min="1" />
-                <button @click="handleSaveTerminalFontSize" class="px-3 py-1.5 text-sm border border-border rounded bg-header hover:bg-border transition duration-200 ease-in-out whitespace-nowrap justify-self-start mt-1 md:mt-0">{{ t('common.save') }}</button>
-            </div>
-
-            <hr class="my-4 md:my-6"> 
-
-            
-            <h4 class="mt-6 mb-2 text-base font-semibold text-foreground">{{ t('styleCustomizer.terminalThemeSelection') }}</h4>
-             
-             <div class="mb-4 py-2 text-sm md:text-[0.95rem] flex flex-col md:flex-row items-start md:items-center gap-1 md:gap-3"> 
-                 <span class="text-text-secondary">{{ t('styleCustomizer.activeTheme') }}:</span>
-                 <strong class="text-foreground font-semibold">{{ activeThemeName }}</strong>
-             </div>
-
-             
-             <div class="mt-4 mb-6 flex gap-2 flex-wrap items-center pb-4 border-b border-dashed border-border">
-                 <button @click="handleAddNewTheme" class="px-3 py-1.5 text-sm border border-border rounded bg-header hover:bg-border transition duration-200 ease-in-out whitespace-nowrap disabled:opacity-60 disabled:cursor-not-allowed">{{ t('styleCustomizer.addNewTheme') }}</button>
-                 <button @click="handleTriggerImport" class="px-3 py-1.5 text-sm border border-border rounded bg-header hover:bg-border transition duration-200 ease-in-out whitespace-nowrap disabled:opacity-60 disabled:cursor-not-allowed">{{ t('styleCustomizer.importTheme') }}</button>
-                 <input type="file" ref="themeImportInput" @change="handleImportThemeFile" accept=".json" class="hidden" />
-                 <p v-if="importError" class="text-error-text bg-error/10 border border-error/30 px-3 py-2 rounded text-sm w-full flex-grow m-0 text-left">{{ importError }}</p>
-             </div>
-
-
-             
-             <div class="mb-4">
-                  <input
-                      type="text"
-                      v-model="themeSearchTerm"
-                      :placeholder="t('styleCustomizer.searchThemePlaceholder', '搜索主题名称...')"
-                      class="border border-border px-[0.7rem] py-2 rounded text-sm bg-background text-foreground w-full box-border transition duration-200 ease-in-out focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary"
-                  />
-             </div>
-
-             
-             <ul class="list-none p-0 mt-4 max-h-[200px] md:max-h-[280px] overflow-y-auto border border-border rounded bg-background"> 
-                 <li v-if="filteredAndSortedThemes.length === 0" class="text-center text-text-secondary p-4 italic">
-                     {{ t('styleCustomizer.noThemesFound', 'No matching themes found') }}
-                 </li>
-                 <li v-else v-for="(theme, index) in filteredAndSortedThemes" :key="theme._id"
-                    :class="[
-                      'block md:grid md:grid-cols-[1fr_auto] items-center px-3 py-2.5 text-sm md:text-[0.95rem] transition-colors duration-200 ease-in-out gap-2', /* 小屏幕块状显示 */
-                      index < filteredAndSortedThemes.length - 1 ? 'border-b border-border' : '',
-                      { 'bg-button text-button-text': theme._id === activeTerminalThemeId?.toString() },
-                      { 'hover:bg-header': theme._id !== activeTerminalThemeId?.toString() }
-                    ]"
-                 >
-                     <span class="block md:col-start-1 md:col-end-2 overflow-hidden text-ellipsis whitespace-nowrap mb-2 md:mb-0" :class="theme._id === activeTerminalThemeId?.toString() ? 'font-bold text-button-text' : 'text-foreground'" :title="theme.name">{{ theme.name }}</span>
-                     <div class="flex md:col-start-2 md:col-end-3 flex-shrink-0 gap-2 justify-start md:justify-end flex-wrap"> 
-                          <button
-                              @click="handleApplyTheme(theme)"
-                              :disabled="theme._id === activeTerminalThemeId?.toString()"
-                              :title="t('styleCustomizer.applyThemeTooltip', 'Apply this theme')"
-                              :class="[
-                                'px-3 py-1.5 text-xs md:text-sm border rounded transition-colors duration-200 ease-in-out whitespace-nowrap disabled:opacity-60 disabled:cursor-not-allowed', /* 调整字体大小 */
-                                theme._id === activeTerminalThemeId?.toString() ? 'text-button-text border-white/30 bg-white/10 hover:bg-white/20 hover:border-white/50 disabled:opacity-50 disabled:cursor-default disabled:bg-transparent disabled:border-transparent' : 'border-border bg-header text-foreground hover:bg-border hover:border-text-secondary'
-                              ]"
-                          >
-                              {{ t('styleCustomizer.applyButton', 'Apply') }}
-                         </button>
-                         <button
-                             @mousedown="(event) => handlePreviewButtonMouseDown(event, theme)"
-                              :title="t('styleCustomizer.previewThemeTooltip', 'Hold to preview theme and hide modal')"
-                             :class="[
-                               'px-3 py-1.5 text-xs md:text-sm border rounded transition-colors duration-200 ease-in-out whitespace-nowrap',
-                               theme._id === activeTerminalThemeId?.toString() ? 'text-button-text border-white/30 bg-white/10 hover:bg-white/20 hover:border-white/50' : 'border-border bg-header text-foreground hover:bg-border hover:border-text-secondary'
-                             ]"
-                         >
-                              {{ t('styleCustomizer.previewButton', 'Preview') }}
-                         </button>
-                        <button @click="handleEditTheme(theme)" :title="theme.isPreset ? t('styleCustomizer.editAsCopy', 'Edit as Copy') : t('common.edit')"
-                           :class="[
-                             'px-3 py-1.5 text-xs md:text-sm border rounded transition-colors duration-200 ease-in-out whitespace-nowrap disabled:opacity-60 disabled:cursor-not-allowed', /* 调整字体大小 */
-                             theme._id === activeTerminalThemeId?.toString() ? 'text-button-text border-white/30 bg-white/10 hover:bg-white/20 hover:border-white/50' : 'border-border bg-header text-foreground hover:bg-border hover:border-text-secondary'
-                           ]"
-                        >{{ t('common.edit') }}</button>
-                        <button @click="handleDeleteTheme(theme)" :disabled="theme.isPreset" :title="theme.isPreset ? t('styleCustomizer.cannotDeletePreset', 'Cannot delete preset theme') : t('common.delete')"
-                           :class="[
-                             'px-3 py-1.5 text-xs md:text-sm border rounded transition-colors duration-200 ease-in-out whitespace-nowrap disabled:opacity-60 disabled:cursor-not-allowed', /* 调整字体大小 */
-                             theme._id === activeTerminalThemeId?.toString() ? 'text-button-text border-white/30 bg-white/10 hover:bg-white/20 hover:border-white/50' : 'bg-error/10 text-error border-error/30 hover:bg-error/20'
-                           ]"
-                        >{{ t('common.delete') }}</button>
-                     </div>
-                 </li>
-             </ul>
-
-           </section>
-
-            
-            <section v-if="isEditingTheme && editingTheme">
-                <h3 class="mt-0 border-b border-border pb-2 mb-4 text-lg font-semibold text-foreground">{{ editingTheme._id ? t('styleCustomizer.editThemeTitle') : t('styleCustomizer.newThemeTitle') }}</h3>
-                 <p v-if="saveThemeError" class="text-error-text bg-error/10 border border-error/30 px-3 py-2 rounded text-sm mb-3">{{ saveThemeError }}</p>
-                <div class="grid grid-cols-1 md:grid-cols-[auto_1fr] items-start md:items-center gap-2 mb-2">
-                    <label for="editingThemeName" class="text-left text-foreground text-sm font-medium overflow-hidden text-ellipsis block w-full mb-1 md:mb-0">{{ t('styleCustomizer.themeName') }}:</label>
-                    <input type="text" id="editingThemeName" v-model="editingTheme.name" required class="border border-border px-[0.7rem] py-2 rounded text-sm bg-background text-foreground w-full box-border transition duration-200 ease-in-out focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary"/>
-                </div>
-
-                 <hr class="my-4 md:my-8 border-border">
-                 <h4 class="mt-6 mb-2 text-base font-semibold text-foreground">{{ t('styleCustomizer.terminalThemeColorEditorTitle') }}</h4>
-
-                 
-              <div v-for="(value, key) in editingTheme.themeData" :key="key" class="grid grid-cols-1 md:grid-cols-[auto_1fr] items-start md:items-center gap-2 mb-2">
-                <label :for="`xterm-${key}`" class="text-left text-foreground text-sm font-medium overflow-hidden text-ellipsis block w-full mb-1 md:mb-0">{{ formatXtermLabel(key as keyof ITheme) }}:</label>
-                <div class="flex items-center gap-2 w-full">
-                  
-                  <input
-                    v-if="typeof value === 'string' && value.startsWith('#')"
-                    type="color"
-                    :id="`xterm-${key}`"
-                    v-model="(editingTheme.themeData as any)[key]"
-                    class="p-0.5 h-[34px] min-w-[40px] max-w-[50px] rounded border border-border flex-shrink-0 focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary"
-                  />
-                  
-                  <input
-                    v-if="typeof value === 'string' && value.startsWith('#')"
-                    type="text"
-                    :value="(editingTheme.themeData as any)[key]"
-                    readonly
-                    class="flex-grow min-w-[80px] bg-header cursor-text border border-border px-[0.7rem] py-2 rounded text-sm text-foreground w-full box-border transition duration-200 ease-in-out focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary"
-                    @focus="handleFocusAndSelect"
-                  />
-                  
-                  <input
-                    v-else
-                    type="text"
-                    :id="`xterm-${key}`"
-                    v-model="(editingTheme.themeData as any)[key]"
-                    class="border border-border px-[0.7rem] py-2 rounded text-sm bg-background text-foreground w-full box-border transition duration-200 ease-in-out focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary"
-                  />
-                </div>
-             </div>
-
-                
-                <hr class="my-4 md:my-8 border-border">
-                <h4 class="mt-6 mb-2 text-base font-semibold text-foreground">{{ t('styleCustomizer.terminalThemeJsonEditorTitle') }}</h4>
-                <p class="text-text-secondary text-sm leading-relaxed mb-3">{{ t('styleCustomizer.terminalThemeJsonEditorDesc') }}</p>
-                <div class="mt-4">
-                   <label for="terminalThemeTextarea" class="sr-only">{{ t('styleCustomizer.terminalThemeJsonEditorTitle') }}</label>
-                   <textarea
-                     id="terminalThemeTextarea"
-                     v-model="editableTerminalThemeString"
-                     @blur="handleTerminalThemeStringChange"
-                     rows="10"
-                     :placeholder="terminalThemePlaceholder"
-                     spellcheck="false"
-                     class="w-full font-mono text-sm leading-snug border border-border rounded p-3 bg-background text-foreground resize-y min-h-[150px] md:min-h-[200px] box-border whitespace-pre-wrap break-words transition duration-200 ease-in-out focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary"
-                   ></textarea>
-                </div>
-                 <p v-if="terminalThemeParseError" class="text-error-text bg-error/10 border border-error/30 px-3 py-2 rounded text-sm mt-2">{{ terminalThemeParseError }}</p>
-            <div class="mt-4 flex justify-end gap-2 pt-4 border-t border-border">
-                 <button @click="handleCancelEditingTheme" class="px-4 md:px-5 py-2 rounded font-bold border border-border bg-header text-foreground hover:bg-border disabled:opacity-60 disabled:cursor-not-allowed text-sm md:text-base">{{ t('common.cancel') }}</button> 
-                 <button @click="handleSaveEditingTheme" class="px-4 md:px-5 py-2 rounded font-bold border border-button bg-button text-button-text hover:bg-button-hover hover:border-button-hover disabled:opacity-60 disabled:cursor-not-allowed text-sm md:text-base">{{ t('common.save') }}</button> 
-             </div>
-           </section>
-
-           <section v-if="currentTab === 'background'">
-                <h3 class="mt-0 border-b border-border pb-2 mb-4 text-lg font-semibold text-foreground">{{ t('styleCustomizer.backgroundSettings') }}</h3>
-
-                
-                
-
-                <hr class="my-4 md:my-8 border-border">
-
-                
-                <div class="flex items-center justify-between mb-3">
-                  <h4 class="m-0 text-base font-semibold text-foreground">{{ t('styleCustomizer.terminalBackground') }}</h4>
-                  
-                  <button
-                    type="button"
-                    @click="handleToggleTerminalBackground"
-                    :class="[
-                      'relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary',
-                      localTerminalBackgroundEnabled ? 'bg-primary' : 'bg-gray-300 dark:bg-gray-600'
-                    ]"
-                    role="switch"
-                    :aria-checked="localTerminalBackgroundEnabled"
-                  >
-                    <span
-                      aria-hidden="true"
-                      :class="[
-                        'pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200',
-                        localTerminalBackgroundEnabled ? 'translate-x-5' : 'translate-x-0'
-                      ]"
-                    ></span>
-                  </button>
-                </div>
-
-                 
-                 <div v-if="localTerminalBackgroundEnabled">
-                   <div class="w-full h-[100px] md:h-[150px] border border-dashed border-border mb-2 flex justify-center items-center text-text-secondary bg-cover bg-center bg-no-repeat rounded bg-header relative overflow-hidden" :style="{ backgroundImage: terminalBackgroundImage ? `url(${terminalBackgroundImage})` : 'none' }">
-                       <!-- 实时预览蒙版 -->
-                       <div
-                         v-if="terminalBackgroundImage"
-                         class="absolute inset-0"
-                         :style="{ backgroundColor: `rgba(0, 0, 0, ${editableTerminalBackgroundOverlayOpacity})` }"
-                       ></div>
-                       <span v-if="!terminalBackgroundImage" class="bg-white/80 px-3 py-1.5 rounded text-sm font-medium text-foreground shadow-sm relative z-10">{{ t('styleCustomizer.noBackground') }}</span>
-                   </div>
-                 <div class="flex gap-2 mb-4 flex-wrap items-center">
-                    <button @click="handleTriggerTerminalBgUpload" class="px-3 py-1.5 text-sm border border-border rounded bg-header hover:bg-border transition duration-200 ease-in-out whitespace-nowrap disabled:opacity-60 disabled:cursor-not-allowed">{{ t('styleCustomizer.uploadTerminalBg') }}</button>
-                    <button @click="handleRemoveTerminalBg" :disabled="!terminalBackgroundImage" class="px-3 py-1.5 text-sm border rounded transition duration-200 ease-in-out whitespace-nowrap bg-error/10 text-error border-error/30 hover:bg-error/20 disabled:opacity-60 disabled:cursor-not-allowed">{{ t('styleCustomizer.removeTerminalBg') }}</button>
-                    <input type="file" ref="terminalBgFileInput" @change="handleTerminalBgUpload" accept="image/*" class="hidden" />
-                 </div>
-
-                 <!-- 终端背景蒙版透明度控制 -->
-                 <div class="mt-4 pt-4 border-t border-border/50">
-                    <label for="terminalBgOverlayOpacity" class="block text-sm font-medium text-foreground mb-1">{{ t('styleCustomizer.terminalBgOverlayOpacity', '终端背景蒙版透明度:') }}</label>
-                    <div class="flex items-center gap-3">
-                        <input
-                          type="range"
-                          id="terminalBgOverlayOpacity"
-                          v-model.number="editableTerminalBackgroundOverlayOpacity"
-                          min="0"
-                          max="1"
-                          step="0.01"
-                          class="w-full cursor-pointer accent-primary"
-                        />
-                        <span class="text-sm text-foreground min-w-[3em] text-right">{{ editableTerminalBackgroundOverlayOpacity.toFixed(2) }}</span>
-                        <button @click="handleSaveTerminalBackgroundOverlayOpacity" class="px-3 py-1.5 text-sm border border-border rounded bg-header hover:bg-border transition duration-200 ease-in-out whitespace-nowrap">{{ t('common.save') }}</button>
-                    </div>
-                    <!-- <p class="text-xs text-text-secondary mt-1">{{ t('styleCustomizer.terminalBgOverlayOpacityDesc', '控制背景图片上方黑色蒙版的透明度。0为完全透明，1为完全不透明。') }}</p> -->
-                 </div>
-                </div>
-                <div v-else class="p-4 text-center text-text-secondary italic border border-dashed border-border/50 rounded-md">
-                   {{ t('styleCustomizer.terminalBgDisabled', '终端背景功能已禁用。') }}
-                </div>
-
-           </section>
-           <section v-if="currentTab === 'other'">
-             <h3 class="mt-0 border-b border-border pb-2 mb-4 text-lg font-semibold text-foreground">{{ t('styleCustomizer.otherSettings') }}</h3>
-             
-             <div class="grid grid-cols-1 md:grid-cols-[auto_1fr_auto] items-start md:items-center gap-2 md:gap-3 mb-3">
-                 <label for="editorFontSize" class="text-left text-foreground text-sm font-medium overflow-hidden text-ellipsis block w-full mb-1 md:mb-0">{{ t('styleCustomizer.editorFontSize') }}:</label>
-                 <input type="number" id="editorFontSize" v-model.number="editableEditorFontSize" class="border border-border px-[0.7rem] py-2 rounded text-sm bg-background text-foreground max-w-[100px] justify-self-start box-border transition duration-200 ease-in-out focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary" min="1" />
-                 <button @click="handleSaveEditorFontSize" class="px-3 py-1.5 text-sm border border-border rounded bg-header hover:bg-border transition duration-200 ease-in-out whitespace-nowrap justify-self-start mt-1 md:mt-0">{{ t('common.save') }}</button>
-             </div>
-
-             <hr class="my-4 md:my-6">
-
-             <div class="grid grid-cols-1 md:grid-cols-[auto_1fr_auto] items-start md:items-center gap-2 md:gap-3 mb-3">
-                 <label for="editorFontFamily" class="text-left text-foreground text-sm font-medium overflow-hidden text-ellipsis block w-full mb-1 md:mb-0">{{ t('styleCustomizer.editorFontFamily') }}:</label> 
-                 <input type="text" id="editorFontFamily" v-model="editableEditorFontFamily" class="border border-border px-[0.7rem] py-2 rounded text-sm bg-background text-foreground w-full box-border transition duration-200 ease-in-out focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary"> 
-                 <button @click="handleSaveEditorFontFamily" class="px-3 py-1.5 text-sm border border-border rounded bg-header hover:bg-border transition duration-200 ease-in-out whitespace-nowrap justify-self-start mt-1 md:mt-0">{{ t('common.save') }}</button>
-             </div>
-           </section>
+          <StyleCustomizerBackgroundTab v-if="currentTab === 'background'" />
+          <StyleCustomizerOtherTab v-if="currentTab === 'other'" />
        </main>
       </div>
       
diff --git a/packages/frontend/src/components/style-customizer/StyleCustomizerBackgroundTab.vue b/packages/frontend/src/components/style-customizer/StyleCustomizerBackgroundTab.vue
new file mode 100644
index 0000000..b00e337
--- /dev/null
+++ b/packages/frontend/src/components/style-customizer/StyleCustomizerBackgroundTab.vue
@@ -0,0 +1,179 @@
+<script setup lang="ts">
+import { ref, onMounted, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useAppearanceStore } from '../../stores/appearance.store';
+import { useUiNotificationsStore } from '../../stores/uiNotifications.store';
+import { storeToRefs } from 'pinia';
+
+const { t } = useI18n();
+const appearanceStore = useAppearanceStore();
+const notificationsStore = useUiNotificationsStore();
+const {
+  terminalBackgroundImage,
+  isTerminalBackgroundEnabled,
+  currentTerminalBackgroundOverlayOpacity,
+} = storeToRefs(appearanceStore);
+
+const localTerminalBackgroundEnabled = ref(true);
+const editableTerminalBackgroundOverlayOpacity = ref(0.5);
+
+const terminalBgFileInput = ref<HTMLInputElement | null>(null);
+const uploadError = ref<string | null>(null);
+
+const initializeEditableState = () => {
+  localTerminalBackgroundEnabled.value = isTerminalBackgroundEnabled.value;
+  editableTerminalBackgroundOverlayOpacity.value = currentTerminalBackgroundOverlayOpacity.value;
+  uploadError.value = null;
+};
+
+onMounted(initializeEditableState);
+
+watch(isTerminalBackgroundEnabled, (newValue) => {
+  if (localTerminalBackgroundEnabled.value !== newValue) {
+    localTerminalBackgroundEnabled.value = newValue;
+  }
+});
+
+watch(currentTerminalBackgroundOverlayOpacity, (newValue) => {
+  if (editableTerminalBackgroundOverlayOpacity.value !== newValue) {
+    editableTerminalBackgroundOverlayOpacity.value = newValue;
+  }
+});
+
+const handleTriggerTerminalBgUpload = () => {
+    uploadError.value = null;
+    terminalBgFileInput.value?.click();
+};
+
+
+const handleTerminalBgUpload = async (event: Event) => {
+     const input = event.target as HTMLInputElement;
+    if (input.files && input.files[0]) {
+        const file = input.files[0];
+        try {
+            await appearanceStore.uploadTerminalBackground(file);
+            notificationsStore.addNotification({ type: 'success', message: t('styleCustomizer.terminalBgUploadSuccess') });
+            input.value = '';
+        } catch (error: any) {
+            const determinedErrorMessage = error.message || t('styleCustomizer.uploadFailed');
+            uploadError.value = determinedErrorMessage;
+            notificationsStore.addNotification({ type: 'error', message: determinedErrorMessage }); // 显示错误通知
+            input.value = '';
+        }
+    }
+};
+
+const handleRemoveTerminalBg = async () => {
+    try {
+        await appearanceStore.removeTerminalBackground();
+        notificationsStore.addNotification({ type: 'success', message: t('styleCustomizer.terminalBgRemoved') });
+    } catch (error: any) {
+         console.error("移除终端背景失败:", error);
+         notificationsStore.addNotification({ type: 'error', message: t('styleCustomizer.removeBgFailed', { message: error.message }) });
+    }
+};
+
+// 处理终端背景启用/禁用切换
+const handleToggleTerminalBackground = async () => {
+    const newValue = !localTerminalBackgroundEnabled.value; // 先计算新值
+    localTerminalBackgroundEnabled.value = newValue; // 立即更新本地 UI
+    try {
+        await appearanceStore.setTerminalBackgroundEnabled(newValue);
+        // 成功后不需要提示，UI 已更新
+    } catch (error: any) {
+        console.error("更新终端背景启用状态失败:", error);
+        // 失败时回滚本地状态
+        localTerminalBackgroundEnabled.value = !newValue;
+        notificationsStore.addNotification({ type: 'error', message: t('styleCustomizer.errorToggleTerminalBg', { message: error.message }) });
+    }
+};
+
+// 保存终端背景蒙版透明度
+const handleSaveTerminalBackgroundOverlayOpacity = async () => {
+  try {
+    const opacity = Number(editableTerminalBackgroundOverlayOpacity.value);
+    if (isNaN(opacity) || opacity < 0 || opacity > 1) {
+      notificationsStore.addNotification({ type: 'error', message: t('styleCustomizer.errorInvalidOpacityValue') });
+      return;
+    }
+    await appearanceStore.setTerminalBackgroundOverlayOpacity(opacity);
+    notificationsStore.addNotification({ type: 'success', message: t('styleCustomizer.terminalBgOverlayOpacitySaved') });
+  } catch (error: any) {
+    console.error("保存终端背景蒙版透明度失败:", error);
+    notificationsStore.addNotification({ type: 'error', message: t('styleCustomizer.terminalBgOverlayOpacitySaveFailed', { message: error.message }) });
+  }
+};
+
+</script>
+
+<template>
+  <section>
+    <h3 class="mt-0 border-b border-border pb-2 mb-4 text-lg font-semibold text-foreground">{{ t('styleCustomizer.backgroundSettings') }}</h3>
+
+
+    <hr class="my-4 md:my-8 border-border">
+
+    <!-- 终端背景 -->
+    <div class="flex items-center justify-between mb-3">
+      <h4 class="m-0 text-base font-semibold text-foreground">{{ t('styleCustomizer.terminalBackground') }}</h4>
+      
+      <button
+        type="button"
+        @click="handleToggleTerminalBackground"
+        :class="[
+          'relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary',
+          localTerminalBackgroundEnabled ? 'bg-primary' : 'bg-gray-300 dark:bg-gray-600'
+        ]"
+        role="switch"
+        :aria-checked="localTerminalBackgroundEnabled"
+      >
+        <span
+          aria-hidden="true"
+          :class="[
+            'pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200',
+            localTerminalBackgroundEnabled ? 'translate-x-5' : 'translate-x-0'
+          ]"
+        ></span>
+      </button>
+    </div>
+
+     
+     <div v-if="localTerminalBackgroundEnabled">
+       <div class="w-full h-[100px] md:h-[150px] border border-dashed border-border mb-2 flex justify-center items-center text-text-secondary bg-cover bg-center bg-no-repeat rounded bg-header relative overflow-hidden" :style="{ backgroundImage: terminalBackgroundImage ? `url(${terminalBackgroundImage})` : 'none' }">
+           <!-- 实时预览蒙版 -->
+           <div
+             v-if="terminalBackgroundImage"
+             class="absolute inset-0"
+             :style="{ backgroundColor: `rgba(0, 0, 0, ${editableTerminalBackgroundOverlayOpacity})` }"
+           ></div>
+           <span v-if="!terminalBackgroundImage" class="bg-white/80 px-3 py-1.5 rounded text-sm font-medium text-foreground shadow-sm relative z-10">{{ t('styleCustomizer.noBackground') }}</span>
+       </div>
+     <div class="flex gap-2 mb-4 flex-wrap items-center">
+        <button @click="handleTriggerTerminalBgUpload" class="px-3 py-1.5 text-sm border border-border rounded bg-header hover:bg-border transition duration-200 ease-in-out whitespace-nowrap disabled:opacity-60 disabled:cursor-not-allowed">{{ t('styleCustomizer.uploadTerminalBg') }}</button>
+        <button @click="handleRemoveTerminalBg" :disabled="!terminalBackgroundImage" class="px-3 py-1.5 text-sm border rounded transition duration-200 ease-in-out whitespace-nowrap bg-error/10 text-error border-error/30 hover:bg-error/20 disabled:opacity-60 disabled:cursor-not-allowed">{{ t('styleCustomizer.removeTerminalBg') }}</button>
+        <input type="file" ref="terminalBgFileInput" @change="handleTerminalBgUpload" accept="image/*" class="hidden" />
+     </div>
+
+     <!-- 终端背景蒙版透明度控制 -->
+     <div class="mt-4 pt-4 border-t border-border/50">
+        <label for="terminalBgOverlayOpacity" class="block text-sm font-medium text-foreground mb-1">{{ t('styleCustomizer.terminalBgOverlayOpacity', '终端背景蒙版透明度:') }}</label>
+        <div class="flex items-center gap-3">
+            <input
+              type="range"
+              id="terminalBgOverlayOpacity"
+              v-model.number="editableTerminalBackgroundOverlayOpacity"
+              min="0"
+              max="1"
+              step="0.01"
+              class="w-full cursor-pointer accent-primary"
+            />
+            <span class="text-sm text-foreground min-w-[3em] text-right">{{ editableTerminalBackgroundOverlayOpacity.toFixed(2) }}</span>
+            <button @click="handleSaveTerminalBackgroundOverlayOpacity" class="px-3 py-1.5 text-sm border border-border rounded bg-header hover:bg-border transition duration-200 ease-in-out whitespace-nowrap">{{ t('common.save') }}</button>
+        </div>
+     </div>
+    </div>
+    <div v-else class="p-4 text-center text-text-secondary italic border border-dashed border-border/50 rounded-md">
+      {{ t('styleCustomizer.terminalBgDisabled', '终端背景功能已禁用。') }}
+    </div>
+  </section>
+</template>
\ No newline at end of file
diff --git a/packages/frontend/src/components/style-customizer/StyleCustomizerOtherTab.vue b/packages/frontend/src/components/style-customizer/StyleCustomizerOtherTab.vue
new file mode 100644
index 0000000..6015bf1
--- /dev/null
+++ b/packages/frontend/src/components/style-customizer/StyleCustomizerOtherTab.vue
@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import { ref, onMounted, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useAppearanceStore } from '../../stores/appearance.store';
+import { useUiNotificationsStore } from '../../stores/uiNotifications.store';
+import { storeToRefs } from 'pinia';
+
+const { t } = useI18n();
+const appearanceStore = useAppearanceStore();
+const notificationsStore = useUiNotificationsStore();
+const {
+  appearanceSettings, // for watcher
+  currentEditorFontSize,
+  currentEditorFontFamily,
+} = storeToRefs(appearanceStore);
+
+const editableEditorFontSize = ref(14);
+const editableEditorFontFamily = ref('');
+
+const initializeEditableState = () => {
+  editableEditorFontSize.value = currentEditorFontSize.value;
+  editableEditorFontFamily.value = currentEditorFontFamily.value;
+};
+
+onMounted(initializeEditableState);
+
+watch(
+  () => appearanceSettings.value,
+  (newSettings, oldSettings) => {
+    // Check if the specific properties we care about have changed
+    const fontSizeChanged = newSettings?.editorFontSize !== oldSettings?.editorFontSize;
+    const fontFamilyChanged = newSettings?.editorFontFamily !== oldSettings?.editorFontFamily;
+
+    if (fontSizeChanged) {
+      editableEditorFontSize.value = newSettings?.editorFontSize || 14;
+    }
+    if (fontFamilyChanged) {
+      editableEditorFontFamily.value = newSettings?.editorFontFamily || 'Consolas, "Noto Sans SC", "Microsoft YaHei"';
+    }
+  },
+  { deep: true }
+);
+
+// 保存编辑器字体大小
+const handleSaveEditorFontSize = async () => {
+    try {
+        const size = Number(editableEditorFontSize.value);
+        if (isNaN(size) || size <= 0) {
+            notificationsStore.addNotification({ type: 'error', message: t('styleCustomizer.errorInvalidEditorFontSize') });
+            return;
+        }
+        await appearanceStore.setEditorFontSize(size);
+        notificationsStore.addNotification({ type: 'success', message: t('styleCustomizer.editorFontSizeSaved') });
+    } catch (error: any) {
+        console.error("保存编辑器字体大小失败:", error);
+        notificationsStore.addNotification({ type: 'error', message: t('styleCustomizer.editorFontSizeSaveFailed', { message: error.message }) });
+    }
+};
+
+// 保存编辑器字体家族
+const handleSaveEditorFontFamily = async () => {
+    try {
+        await appearanceStore.setEditorFontFamily(editableEditorFontFamily.value);
+        notificationsStore.addNotification({ type: 'success', message: t('styleCustomizer.editorFontFamilySaved') });
+    } catch (error: any) {
+        console.error("保存编辑器字体失败:", error);
+        notificationsStore.addNotification({ type: 'error', message: t('styleCustomizer.editorFontFamilySaveFailed', { message: error.message }) });
+    }
+};
+</script>
+
+<template>
+  <section>
+    <h3 class="mt-0 border-b border-border pb-2 mb-4 text-lg font-semibold text-foreground">{{ t('styleCustomizer.otherSettings') }}</h3>
+
+    <div class="grid grid-cols-1 md:grid-cols-[auto_1fr_auto] items-start md:items-center gap-2 md:gap-3 mb-3">
+        <label for="editorFontSizeOther" class="text-left text-foreground text-sm font-medium overflow-hidden text-ellipsis block w-full mb-1 md:mb-0">{{ t('styleCustomizer.editorFontSize') }}:</label>
+        <input type="number" id="editorFontSizeOther" v-model.number="editableEditorFontSize" class="border border-border px-[0.7rem] py-2 rounded text-sm bg-background text-foreground max-w-[100px] justify-self-start box-border transition duration-200 ease-in-out focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary" min="1" />
+        <button @click="handleSaveEditorFontSize" class="px-3 py-1.5 text-sm border border-border rounded bg-header hover:bg-border transition duration-200 ease-in-out whitespace-nowrap justify-self-start mt-1 md:mt-0">{{ t('common.save') }}</button>
+    </div>
+
+    <hr class="my-4 md:my-6">
+
+    <div class="grid grid-cols-1 md:grid-cols-[auto_1fr_auto] items-start md:items-center gap-2 md:gap-3 mb-3">
+        <label for="editorFontFamilyOther" class="text-left text-foreground text-sm font-medium overflow-hidden text-ellipsis block w-full mb-1 md:mb-0">{{ t('styleCustomizer.editorFontFamily') }}:</label>
+        <input type="text" id="editorFontFamilyOther" v-model="editableEditorFontFamily" class="border border-border px-[0.7rem] py-2 rounded text-sm bg-background text-foreground w-full box-border transition duration-200 ease-in-out focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary">
+        <button @click="handleSaveEditorFontFamily" class="px-3 py-1.5 text-sm border border-border rounded bg-header hover:bg-border transition duration-200 ease-in-out whitespace-nowrap justify-self-start mt-1 md:mt-0">{{ t('common.save') }}</button>
+    </div>
+  </section>
+</template>
\ No newline at end of file
diff --git a/packages/frontend/src/components/style-customizer/StyleCustomizerTerminalTab.vue b/packages/frontend/src/components/style-customizer/StyleCustomizerTerminalTab.vue
new file mode 100644
index 0000000..b696935
--- /dev/null
+++ b/packages/frontend/src/components/style-customizer/StyleCustomizerTerminalTab.vue
@@ -0,0 +1,632 @@
+<script setup lang="ts">
+import { ref, reactive, watch, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useAppearanceStore } from '../../stores/appearance.store';
+import { useUiNotificationsStore } from '../../stores/uiNotifications.store';
+import { storeToRefs } from 'pinia';
+import type { ITheme } from 'xterm';
+import type { TerminalTheme } from '../../types/terminal-theme.types';
+import { defaultXtermTheme } from '../../features/appearance/config/default-themes';
+
+const { t } = useI18n();
+const appearanceStore = useAppearanceStore();
+const notificationsStore = useUiNotificationsStore();
+
+const props = defineProps<{
+  isEditingTheme: boolean;
+  editingTheme: TerminalTheme | null;
+  modalRootRef: HTMLDivElement | null;
+}>();
+
+const emit = defineEmits<{
+  (e: 'update:isEditingTheme', value: boolean): void;
+  (e: 'update:editingTheme', value: TerminalTheme | null): void;
+}>();
+
+const {
+  allTerminalThemes,
+  activeTerminalThemeId,
+  currentTerminalFontFamily,
+  currentTerminalFontSize,
+} = storeToRefs(appearanceStore);
+
+const editableTerminalFontFamily = ref('');
+const editableTerminalFontSize = ref(14);
+const themeSearchTerm = ref('');
+const saveThemeError = ref<string | null>(null);
+const editableTerminalThemeString = ref('');
+const terminalThemeParseError = ref<string | null>(null);
+const terminalThemePlaceholder = `background: #000000
+foreground: #ffffff
+cursor: #ffffff
+selectionBackground: #555555
+black: #000000
+red: #ff0000
+green: #00ff00
+yellow: #ffff00
+blue: #0000ff
+magenta: #ff00ff
+cyan: #00ffff
+white: #ffffff
+brightBlack: #555555
+brightRed: #ff5555
+brightGreen: #55ff55
+brightYellow: #ffff55
+brightBlue: #5555ff
+brightMagenta: #ff55ff
+brightCyan: #55ffff
+brightWhite: #ffffff`;
+// Theme preview refs
+const originalModalRootBackgroundColor = ref<string | null>(null);
+const originalModalContentOpacity = ref<string | null>(null);
+const originalModalRootTransition = ref<string | null>(null);
+const originalModalContentTransition = ref<string | null>(null);
+
+const initializeEditableState = () => {
+  editableTerminalFontFamily.value = currentTerminalFontFamily.value;
+  editableTerminalFontSize.value = currentTerminalFontSize.value;
+  saveThemeError.value = null;
+  terminalThemeParseError.value = null;
+};
+
+// Watch for external changes to current font settings
+watch(currentTerminalFontFamily, (newValue) => {
+  if (!props.isEditingTheme) { // Only update if not actively editing a theme (to avoid overriding user input during theme edit)
+    editableTerminalFontFamily.value = newValue;
+  }
+});
+
+watch(currentTerminalFontSize, (newValue) => {
+  if (!props.isEditingTheme) {
+    editableTerminalFontSize.value = newValue;
+  }
+});
+
+// Initialize on mount and when relevant props change
+watch(() => [currentTerminalFontFamily.value, currentTerminalFontSize.value], () => {
+    // Re-initialize only if not in the middle of editing a theme,
+    // as editing a theme might involve temporary font changes or different contexts.
+    if (!props.isEditingTheme) {
+        initializeEditableState();
+    }
+}, { immediate: true });
+
+
+// Methods
+const handleSaveTerminalFont = async () => {
+  try {
+    await appearanceStore.setTerminalFontFamily(editableTerminalFontFamily.value);
+    notificationsStore.addNotification({ type: 'success', message: t('styleCustomizer.terminalFontSaved') });
+  } catch (error: any) {
+    console.error("保存终端字体失败:", error);
+    notificationsStore.addNotification({ type: 'error', message: t('styleCustomizer.terminalFontSaveFailed', { message: error.message }) });
+  }
+};
+
+const handleSaveTerminalFontSize = async () => {
+  try {
+    const size = Number(editableTerminalFontSize.value);
+    if (isNaN(size) || size <= 0) {
+      notificationsStore.addNotification({ type: 'error', message: t('styleCustomizer.errorInvalidFontSize') });
+      return;
+    }
+    await appearanceStore.setTerminalFontSize(size);
+    notificationsStore.addNotification({ type: 'success', message: t('styleCustomizer.terminalFontSizeSaved') });
+  } catch (error: any) {
+    console.error("保存终端字体大小失败:", error);
+    notificationsStore.addNotification({ type: 'error', message: t('styleCustomizer.terminalFontSizeSaveFailed', { message: error.message }) });
+  }
+};
+
+const handleApplyTheme = async (theme: TerminalTheme) => {
+  if (!theme._id) return;
+  const themeIdNum = parseInt(theme._id, 10);
+  if (isNaN(themeIdNum)) {
+    console.error(`无效的主题 ID 格式: ${theme._id}`);
+    return;
+  }
+  if (themeIdNum === activeTerminalThemeId.value) return;
+  try {
+    await appearanceStore.setActiveTerminalTheme(theme._id);
+    notificationsStore.addNotification({ type: 'success', message: t('styleCustomizer.setActiveThemeSuccess', { themeName: theme.name }) });
+  } catch (error: any) {
+    console.error("应用终端主题失败:", error);
+    notificationsStore.addNotification({ type: 'error', message: t('styleCustomizer.setActiveThemeFailed', { message: error.message }) });
+  }
+};
+
+const handleAddNewTheme = () => {
+  saveThemeError.value = null;
+  terminalThemeParseError.value = null;
+  const newTheme: TerminalTheme = {
+    _id: undefined,
+    name: t('styleCustomizer.newThemeDefaultName'),
+    themeData: JSON.parse(JSON.stringify(defaultXtermTheme)),
+    isPreset: false,
+  };
+  emit('update:editingTheme', newTheme);
+  try {
+    const themeObject = newTheme.themeData;
+    if (themeObject && typeof themeObject === 'object' && Object.keys(themeObject).length > 0) {
+      const lines = Object.entries(themeObject).map(([key, value]) => `${key}: ${value}`);
+      editableTerminalThemeString.value = lines.join('\n');
+    } else {
+      editableTerminalThemeString.value = '';
+    }
+  } catch (e) {
+    console.error("格式化新终端主题字符串失败:", e);
+    editableTerminalThemeString.value = '';
+  }
+  emit('update:isEditingTheme', true);
+};
+
+const handleEditTheme = async (theme: TerminalTheme) => {
+  saveThemeError.value = null;
+  terminalThemeParseError.value = null;
+  if (!theme._id) {
+    console.error("尝试编辑没有 ID 的主题:", theme);
+    notificationsStore.addNotification({ type: 'error', message: t('styleCustomizer.errorEditThemeNoId') });
+    return;
+  }
+
+  let themeDataToEdit: ITheme | null = null;
+  let themeNameToEdit = theme.name;
+  let themeIdToEdit: string | undefined = theme._id;
+
+  try {
+    themeDataToEdit = await appearanceStore.loadTerminalThemeData(theme._id);
+    if (!themeDataToEdit) {
+      throw new Error(t('styleCustomizer.errorLoadThemeDataFailed'));
+    }
+
+    if (theme.isPreset) {
+      themeNameToEdit = `${theme.name} (Copy)`;
+      themeIdToEdit = undefined;
+    }
+    
+    const themeToEdit: TerminalTheme = {
+      _id: themeIdToEdit,
+      name: themeNameToEdit,
+      themeData: JSON.parse(JSON.stringify(themeDataToEdit)),
+      isPreset: false,
+    };
+    emit('update:editingTheme', themeToEdit);
+
+    try {
+      const themeObject = themeToEdit.themeData;
+      if (themeObject && typeof themeObject === 'object' && Object.keys(themeObject).length > 0) {
+        const lines = Object.entries(themeObject).map(([key, value]) => `${key}: ${value}`);
+        editableTerminalThemeString.value = lines.join('\n');
+      } else {
+        editableTerminalThemeString.value = '';
+      }
+    } catch (e) {
+      console.error("格式化编辑终端主题字符串失败:", e);
+      editableTerminalThemeString.value = '';
+    }
+    emit('update:isEditingTheme', true);
+  } catch (error: any) {
+    console.error("编辑主题失败 (加载数据时):", error);
+    saveThemeError.value = error.message || t('styleCustomizer.errorEditThemeFailed');
+    emit('update:isEditingTheme', false);
+    emit('update:editingTheme', null);
+  }
+};
+
+const handleSaveEditingTheme = async () => {
+  if (!props.editingTheme || !props.editingTheme.name) {
+    saveThemeError.value = t('styleCustomizer.errorThemeNameRequired');
+    return;
+  }
+  handleTerminalThemeStringChange();
+  if (terminalThemeParseError.value) {
+    saveThemeError.value = t('styleCustomizer.errorFixJsonBeforeSave');
+    return;
+  }
+
+  saveThemeError.value = null;
+  try {
+    if (!props.editingTheme) return; // Should not happen due to above check
+    const currentThemeData = props.editingTheme.themeData;
+
+    if (props.editingTheme._id) {
+      const updateDto = { name: props.editingTheme.name, themeData: currentThemeData };
+      await appearanceStore.updateTerminalTheme(
+        props.editingTheme._id,
+        updateDto.name,
+        updateDto.themeData
+      );
+      notificationsStore.addNotification({ type: 'success', message: t('styleCustomizer.themeUpdatedSuccess') });
+    } else {
+      const createDto = { name: props.editingTheme.name, themeData: currentThemeData };
+      await appearanceStore.createTerminalTheme(
+        createDto.name,
+        createDto.themeData
+      );
+      notificationsStore.addNotification({ type: 'success', message: t('styleCustomizer.themeCreatedSuccess') });
+    }
+    emit('update:isEditingTheme', false);
+    emit('update:editingTheme', null);
+    editableTerminalThemeString.value = '';
+    terminalThemeParseError.value = null;
+  } catch (error: any) {
+    console.error("保存终端主题失败:", error);
+    saveThemeError.value = error.message || t('styleCustomizer.themeSaveFailed');
+  }
+};
+
+const handleCancelEditingTheme = () => {
+  emit('update:isEditingTheme', false);
+  emit('update:editingTheme', null);
+  saveThemeError.value = null;
+  terminalThemeParseError.value = null;
+  editableTerminalThemeString.value = '';
+};
+
+const handleTerminalThemeStringChange = () => {
+  terminalThemeParseError.value = null;
+  if (!props.editingTheme) return;
+
+  let inputText = editableTerminalThemeString.value.trim();
+  if (!inputText) {
+    const updatedTheme = { ...props.editingTheme, themeData: {} };
+    emit('update:editingTheme', updatedTheme);
+    return;
+  }
+
+  let jsonStringToParse = inputText
+    .split('\n')
+    .map(line => line.trim())
+    .filter(line => line && line.includes(':'))
+    .map(line => {
+      const parts = line.split(/:(.*)/s);
+      if (parts.length < 2) return null;
+      let key = parts[0].trim();
+      let value = parts[1].trim();
+      if (key.startsWith('"') && key.endsWith('"')) key = key.slice(1, -1);
+      if (key.startsWith("'") && key.endsWith("'")) key = key.slice(1, -1);
+      key = JSON.stringify(key);
+      if (value.endsWith(',')) value = value.slice(0, -1).trim();
+      let originalValue = value;
+      if (value.startsWith('"') && value.endsWith('"')) originalValue = value.slice(1, -1);
+      else if (value.startsWith("'") && value.endsWith("'")) originalValue = value.slice(1, -1);
+      if (isNaN(Number(originalValue)) && originalValue !== 'true' && originalValue !== 'false' && originalValue !== 'null') {
+        value = JSON.stringify(originalValue);
+      } else {
+        value = originalValue;
+      }
+      return `  ${key}: ${value}`;
+    })
+    .filter(line => line !== null)
+    .join(',\n');
+
+  const fullJsonString = `{\n${jsonStringToParse}\n}`;
+
+  try {
+    const parsedThemeData = JSON.parse(fullJsonString);
+    if (typeof parsedThemeData !== 'object' || parsedThemeData === null || Array.isArray(parsedThemeData)) {
+      throw new Error(t('styleCustomizer.errorInvalidJsonObject'));
+    }
+    const updatedTheme = { ...props.editingTheme, themeData: parsedThemeData };
+    emit('update:editingTheme', updatedTheme);
+  } catch (error: any) {
+    console.error('解析终端主题配置失败:', error);
+    let errorMessage = error.message || t('styleCustomizer.errorInvalidJsonConfig');
+    if (error instanceof SyntaxError) {
+      errorMessage = `${t('styleCustomizer.errorJsonSyntax')}: ${error.message}`;
+    }
+    terminalThemeParseError.value = errorMessage;
+  }
+};
+
+const handleDeleteTheme = async (theme: TerminalTheme) => {
+  if (theme.isPreset || !theme._id) return;
+  try {
+    await appearanceStore.deleteTerminalTheme(theme._id);
+    notificationsStore.addNotification({ type: 'success', message: t('styleCustomizer.themeDeletedSuccess') });
+  } catch (error: any) {
+    console.error("删除终端主题失败:", error);
+    notificationsStore.addNotification({ type: 'error', message: t('styleCustomizer.themeDeleteFailed', { message: error.message }) });
+  }
+};
+
+const formatXtermLabel = (key: keyof ITheme): string => {
+  return key.replace(/([A-Z])/g, ' $1').replace(/^./, (str) => str.toUpperCase());
+};
+
+const handleFocusAndSelect = (event: FocusEvent) => {
+  const target = event.target;
+  if (target instanceof HTMLInputElement) {
+    target.select();
+  }
+};
+
+const handlePreviewButtonMouseDown = async (event: MouseEvent, themeToPreview: TerminalTheme) => {
+  event.preventDefault();
+  if (props.modalRootRef && themeToPreview._id) {
+    const modalContentElement = props.modalRootRef.firstElementChild as HTMLElement;
+    try {
+      const themeData = await appearanceStore.loadTerminalThemeData(themeToPreview._id);
+      if (!themeData) {
+        console.error('Preview failed: Could not load theme data for', themeToPreview.name);
+        return;
+      }
+      appearanceStore.startTerminalThemePreview(themeData);
+
+      if (originalModalRootBackgroundColor.value === null && modalContentElement) {
+        originalModalRootBackgroundColor.value = window.getComputedStyle(props.modalRootRef).backgroundColor;
+        originalModalRootTransition.value = props.modalRootRef.style.transition;
+        originalModalContentOpacity.value = window.getComputedStyle(modalContentElement).opacity;
+        originalModalContentTransition.value = modalContentElement.style.transition;
+      }
+
+      props.modalRootRef.style.transition = 'background-color 0.05s ease-out, opacity 0.05s ease-out';
+      props.modalRootRef.style.backgroundColor = 'transparent';
+      if (modalContentElement) {
+        modalContentElement.style.transition = 'opacity 0.05s ease-out';
+        modalContentElement.style.opacity = '0';
+      }
+
+      const restoreOnMouseUp = () => {
+        appearanceStore.stopTerminalThemePreview();
+        if (props.modalRootRef) {
+          props.modalRootRef.style.backgroundColor = originalModalRootBackgroundColor.value || '';
+          props.modalRootRef.style.transition = originalModalRootTransition.value || '';
+        }
+        if (modalContentElement) {
+          modalContentElement.style.opacity = originalModalContentOpacity.value || '1';
+          modalContentElement.style.transition = originalModalContentTransition.value || '';
+        }
+        originalModalRootBackgroundColor.value = null;
+        originalModalContentOpacity.value = null;
+        originalModalRootTransition.value = null;
+        originalModalContentTransition.value = null;
+        document.removeEventListener('mouseup', restoreOnMouseUp);
+        const currentTargetButton = event.currentTarget as HTMLElement | null;
+        if (currentTargetButton) {
+            currentTargetButton.removeEventListener('mouseleave', restoreOnMouseUp);
+        }
+      };
+      document.addEventListener('mouseup', restoreOnMouseUp, { once: true });
+      const currentTargetButton = event.currentTarget as HTMLElement | null;
+      if (currentTargetButton) {
+          currentTargetButton.addEventListener('mouseleave', restoreOnMouseUp, { once: true });
+      }
+    } catch (error) {
+      console.error('Error during theme preview:', error);
+      appearanceStore.stopTerminalThemePreview();
+      if (props.modalRootRef && modalContentElement) {
+          props.modalRootRef.style.backgroundColor = originalModalRootBackgroundColor.value || '';
+          props.modalRootRef.style.transition = originalModalRootTransition.value || '';
+          modalContentElement.style.opacity = originalModalContentOpacity.value || '1';
+          modalContentElement.style.transition = originalModalContentTransition.value || '';
+          originalModalRootBackgroundColor.value = null;
+          originalModalContentOpacity.value = null;
+          originalModalRootTransition.value = null;
+          originalModalContentTransition.value = null;
+      }
+    }
+  }
+};
+
+// Computed Properties
+const activeThemeName = computed(() => {
+  const currentIdNum = activeTerminalThemeId.value;
+  if (currentIdNum === null || currentIdNum === undefined) {
+    return t('styleCustomizer.noThemeSelected');
+  }
+  const theme = allTerminalThemes.value.find((t: TerminalTheme) => t._id === currentIdNum.toString());
+  return theme ? theme.name : t('styleCustomizer.unknownTheme');
+});
+
+const filteredAndSortedThemes = computed(() => {
+  const searchTerm = themeSearchTerm.value.toLowerCase().trim();
+  let themes = [...allTerminalThemes.value];
+  if (searchTerm) {
+    themes = themes.filter((theme: TerminalTheme) => theme.name.toLowerCase().includes(searchTerm));
+  }
+  themes.sort((a: TerminalTheme, b: TerminalTheme) => a.name.localeCompare(b.name));
+  return themes;
+});
+
+// Watchers
+watch(() => props.editingTheme?.themeData, (newThemeData) => {
+  if (newThemeData && (document.activeElement?.id !== 'terminalThemeTextarea' || terminalThemeParseError.value)) {
+    try {
+      let newStringValue = '';
+      if (typeof newThemeData === 'object' && Object.keys(newThemeData).length > 0) {
+        const lines = Object.entries(newThemeData).map(([key, value]) => `${key}: ${value}`);
+        newStringValue = lines.join('\n');
+      }
+      if (newStringValue !== editableTerminalThemeString.value) {
+        editableTerminalThemeString.value = newStringValue;
+      }
+      if (terminalThemeParseError.value && document.activeElement?.id !== 'terminalThemeTextarea') {
+        terminalThemeParseError.value = null;
+      }
+    } catch (e) {
+      console.error("格式化终端主题字符串失败 (watcher):", e);
+    }
+  }
+}, { deep: true });
+
+watch(() => props.isEditingTheme, (isEditing) => {
+    if (isEditing && props.editingTheme) {
+        // Sync editableTerminalThemeString when editing starts
+        try {
+            const themeObject = props.editingTheme.themeData;
+            if (themeObject && typeof themeObject === 'object' && Object.keys(themeObject).length > 0) {
+                const lines = Object.entries(themeObject).map(([key, value]) => `${key}: ${value}`);
+                editableTerminalThemeString.value = lines.join('\n');
+            } else {
+                editableTerminalThemeString.value = terminalThemePlaceholder; // Or empty
+            }
+        } catch (e) {
+            console.error("初始化编辑终端主题字符串失败:", e);
+            editableTerminalThemeString.value = terminalThemePlaceholder; // Or empty
+        }
+        terminalThemeParseError.value = null; // Clear parse error when starting to edit
+    } else if (!isEditing) {
+        // Clear fields when not editing
+        editableTerminalThemeString.value = '';
+        terminalThemeParseError.value = null;
+        saveThemeError.value = null;
+        // Re-initialize font settings from store if not editing
+        initializeEditableState();
+    }
+}, { immediate: true });
+
+
+</script>
+
+<template>
+  <section v-if="!isEditingTheme">
+    <h3 class="mt-0 border-b border-border pb-2 mb-4 text-lg font-semibold text-foreground">{{ t('styleCustomizer.terminalStyles') }}</h3>
+    
+    <div class="grid grid-cols-1 md:grid-cols-[auto_1fr_auto] items-start md:items-center gap-2 md:gap-3 mb-3">
+        <label for="terminalFontFamily" class="text-left text-foreground text-sm font-medium overflow-hidden text-ellipsis block w-full mb-1 md:mb-0">{{ t('styleCustomizer.terminalFontFamily') }}:</label>
+        <input type="text" id="terminalFontFamily" v-model="editableTerminalFontFamily" class="border border-border px-[0.7rem] py-2 rounded text-sm bg-background text-foreground w-full box-border transition duration-200 ease-in-out focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary" :placeholder="t('styleCustomizer.terminalFontPlaceholder')" />
+        <button @click="handleSaveTerminalFont" class="px-3 py-1.5 text-sm border border-border rounded bg-header hover:bg-border transition duration-200 ease-in-out whitespace-nowrap justify-self-start mt-1 md:mt-0">{{ t('common.save') }}</button>
+    </div>
+    <p class="text-xs text-text-secondary -mt-1 mb-2">{{ t('styleCustomizer.terminalFontDescription') }}</p>
+
+    <div class="grid grid-cols-1 md:grid-cols-[auto_1fr_auto] items-start md:items-center gap-2 md:gap-3 mb-3">
+        <label for="terminalFontSize" class="text-left text-foreground text-sm font-medium overflow-hidden text-ellipsis block w-full mb-1 md:mb-0">{{ t('styleCustomizer.terminalFontSize') }}:</label>
+        <input type="number" id="terminalFontSize" v-model.number="editableTerminalFontSize" class="border border-border px-[0.7rem] py-2 rounded text-sm bg-background text-foreground max-w-[100px] justify-self-start box-border transition duration-200 ease-in-out focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary" min="1" />
+        <button @click="handleSaveTerminalFontSize" class="px-3 py-1.5 text-sm border border-border rounded bg-header hover:bg-border transition duration-200 ease-in-out whitespace-nowrap justify-self-start mt-1 md:mt-0">{{ t('common.save') }}</button>
+    </div>
+
+    <hr class="my-4 md:my-6"> 
+
+    <h4 class="mt-6 mb-2 text-base font-semibold text-foreground">{{ t('styleCustomizer.terminalThemeSelection') }}</h4>
+     
+     <div class="mb-4 py-2 text-sm md:text-[0.95rem] flex flex-col md:flex-row items-start md:items-center gap-1 md:gap-3"> 
+         <span class="text-text-secondary">{{ t('styleCustomizer.activeTheme') }}:</span>
+         <strong class="text-foreground font-semibold">{{ activeThemeName }}</strong>
+    </div>
+
+    <div class="mt-4 mb-6 flex gap-2 flex-wrap items-center pb-4 border-b border-dashed border-border">
+        <button @click="handleAddNewTheme" class="px-3 py-1.5 text-sm border border-border rounded bg-header hover:bg-border transition duration-200 ease-in-out whitespace-nowrap disabled:opacity-60 disabled:cursor-not-allowed">{{ t('styleCustomizer.addNewTheme') }}</button>
+    </div>
+     
+     <div class="mb-4">
+          <input
+              type="text"
+              v-model="themeSearchTerm"
+              :placeholder="t('styleCustomizer.searchThemePlaceholder', '搜索主题名称...')"
+              class="border border-border px-[0.7rem] py-2 rounded text-sm bg-background text-foreground w-full box-border transition duration-200 ease-in-out focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary"
+          />
+     </div>
+
+     <ul class="list-none p-0 mt-4 max-h-[200px] md:max-h-[280px] overflow-y-auto border border-border rounded bg-background"> 
+         <li v-if="filteredAndSortedThemes.length === 0" class="text-center text-text-secondary p-4 italic">
+             {{ t('styleCustomizer.noThemesFound', 'No matching themes found') }}
+         </li>
+         <li v-else v-for="(theme, index) in filteredAndSortedThemes" :key="theme._id"
+            :class="[
+              'block md:grid md:grid-cols-[1fr_auto] items-center px-3 py-2.5 text-sm md:text-[0.95rem] transition-colors duration-200 ease-in-out gap-2',
+              index < filteredAndSortedThemes.length - 1 ? 'border-b border-border' : '',
+              { 'bg-button text-button-text': theme._id === activeTerminalThemeId?.toString() },
+              { 'hover:bg-header': theme._id !== activeTerminalThemeId?.toString() }
+            ]"
+         >
+             <span class="block md:col-start-1 md:col-end-2 overflow-hidden text-ellipsis whitespace-nowrap mb-2 md:mb-0" :class="theme._id === activeTerminalThemeId?.toString() ? 'font-bold text-button-text' : 'text-foreground'" :title="theme.name">{{ theme.name }}</span>
+             <div class="flex md:col-start-2 md:col-end-3 flex-shrink-0 gap-2 justify-start md:justify-end flex-wrap"> 
+                  <button
+                      @click="handleApplyTheme(theme)"
+                      :disabled="theme._id === activeTerminalThemeId?.toString()"
+                      :title="t('styleCustomizer.applyThemeTooltip', 'Apply this theme')"
+                      :class="[
+                        'px-3 py-1.5 text-xs md:text-sm border rounded transition-colors duration-200 ease-in-out whitespace-nowrap disabled:opacity-60 disabled:cursor-not-allowed',
+                        theme._id === activeTerminalThemeId?.toString() ? 'text-button-text border-white/30 bg-white/10 hover:bg-white/20 hover:border-white/50 disabled:opacity-50 disabled:cursor-default disabled:bg-transparent disabled:border-transparent' : 'border-border bg-header text-foreground hover:bg-border hover:border-text-secondary'
+                      ]"
+                  >
+                      {{ t('styleCustomizer.applyButton', 'Apply') }}
+                 </button>
+                 <button
+                     @mousedown="(event) => handlePreviewButtonMouseDown(event, theme)"
+                     :class="[
+                       'px-3 py-1.5 text-xs md:text-sm border rounded transition-colors duration-200 ease-in-out whitespace-nowrap',
+                       theme._id === activeTerminalThemeId?.toString() ? 'text-button-text border-white/30 bg-white/10 hover:bg-white/20 hover:border-white/50' : 'border-border bg-header text-foreground hover:bg-border hover:border-text-secondary'
+                     ]"
+                 >
+                      {{ t('styleCustomizer.previewButton', 'Preview') }}
+                 </button>
+                <button @click="handleEditTheme(theme)" :title="theme.isPreset ? t('styleCustomizer.editAsCopy', 'Edit as Copy') : t('common.edit')"
+                   :class="[
+                     'px-3 py-1.5 text-xs md:text-sm border rounded transition-colors duration-200 ease-in-out whitespace-nowrap disabled:opacity-60 disabled:cursor-not-allowed',
+                     theme._id === activeTerminalThemeId?.toString() ? 'text-button-text border-white/30 bg-white/10 hover:bg-white/20 hover:border-white/50' : 'border-border bg-header text-foreground hover:bg-border hover:border-text-secondary'
+                   ]"
+                >{{ t('common.edit') }}</button>
+                <button @click="handleDeleteTheme(theme)" :disabled="theme.isPreset" :title="theme.isPreset ? t('styleCustomizer.cannotDeletePreset', 'Cannot delete preset theme') : t('common.delete')"
+                   :class="[
+                     'px-3 py-1.5 text-xs md:text-sm border rounded transition-colors duration-200 ease-in-out whitespace-nowrap disabled:opacity-60 disabled:cursor-not-allowed',
+                     theme._id === activeTerminalThemeId?.toString() ? 'text-button-text border-white/30 bg-white/10 hover:bg-white/20 hover:border-white/50' : 'bg-error/10 text-error border-error/30 hover:bg-error/20'
+                   ]"
+                >{{ t('common.delete') }}</button>
+             </div>
+         </li>
+     </ul>
+  </section>
+
+  <section v-if="isEditingTheme && editingTheme">
+      <h3 class="mt-0 border-b border-border pb-2 mb-4 text-lg font-semibold text-foreground">{{ editingTheme._id ? t('styleCustomizer.editThemeTitle') : t('styleCustomizer.newThemeTitle') }}</h3>
+       <p v-if="saveThemeError" class="text-error-text bg-error/10 border border-error/30 px-3 py-2 rounded text-sm mb-3">{{ saveThemeError }}</p>
+      <div class="grid grid-cols-1 md:grid-cols-[auto_1fr] items-start md:items-center gap-2 mb-2">
+          <label for="editingThemeName" class="text-left text-foreground text-sm font-medium overflow-hidden text-ellipsis block w-full mb-1 md:mb-0">{{ t('styleCustomizer.themeName') }}:</label>
+          <input type="text" id="editingThemeName" v-model="editingTheme.name" required class="border border-border px-[0.7rem] py-2 rounded text-sm bg-background text-foreground w-full box-border transition duration-200 ease-in-out focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary" />
+      </div>
+
+       <hr class="my-4 md:my-8 border-border">
+       <h4 class="mt-6 mb-2 text-base font-semibold text-foreground">{{ t('styleCustomizer.terminalThemeColorEditorTitle') }}</h4>
+
+    <div v-for="(value, key) in editingTheme.themeData" :key="key" class="grid grid-cols-1 md:grid-cols-[auto_1fr] items-start md:items-center gap-2 mb-2">
+      <label :for="`xterm-${key}`" class="text-left text-foreground text-sm font-medium overflow-hidden text-ellipsis block w-full mb-1 md:mb-0">{{ formatXtermLabel(key as keyof ITheme) }}:</label>
+      <div class="flex items-center gap-2 w-full">
+        <input
+          v-if="typeof value === 'string' && value.startsWith('#')"
+          type="color"
+          :id="`xterm-${key}`"
+          v-model="(editingTheme.themeData as any)[key]"
+          class="p-0.5 h-[34px] min-w-[40px] max-w-[50px] rounded border border-border flex-shrink-0 focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary"
+        />
+        <input
+          v-if="typeof value === 'string' && value.startsWith('#')"
+          type="text"
+          :value="(editingTheme.themeData as any)[key]"
+          readonly
+          class="flex-grow min-w-[80px] bg-header cursor-text border border-border px-[0.7rem] py-2 rounded text-sm text-foreground w-full box-border transition duration-200 ease-in-out focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary"
+          @focus="handleFocusAndSelect"
+        />
+        <input
+          v-else
+          type="text"
+          :id="`xterm-${key}`"
+          v-model="(editingTheme.themeData as any)[key]"
+          class="border border-border px-[0.7rem] py-2 rounded text-sm bg-background text-foreground w-full box-border transition duration-200 ease-in-out focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary"
+        />
+      </div>
+   </div>
+
+      <hr class="my-4 md:my-8 border-border">
+      <h4 class="mt-6 mb-2 text-base font-semibold text-foreground">{{ t('styleCustomizer.terminalThemeJsonEditorTitle') }}</h4>
+      <p class="text-text-secondary text-sm leading-relaxed mb-3">{{ t('styleCustomizer.terminalThemeJsonEditorDesc') }}</p>
+      <div class="mt-4">
+         <label for="terminalThemeTextarea" class="sr-only">{{ t('styleCustomizer.terminalThemeJsonEditorTitle') }}</label>
+         <textarea
+           id="terminalThemeTextarea"
+           v-model="editableTerminalThemeString"
+           @blur="handleTerminalThemeStringChange"
+           rows="10"
+           :placeholder="terminalThemePlaceholder"
+           spellcheck="false"
+           class="w-full font-mono text-sm leading-snug border border-border rounded p-3 bg-background text-foreground resize-y min-h-[150px] md:min-h-[200px] box-border whitespace-pre-wrap break-words transition duration-200 ease-in-out focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary"
+         ></textarea>
+      </div>
+       <p v-if="terminalThemeParseError" class="text-error-text bg-error/10 border border-error/30 px-3 py-2 rounded text-sm mt-2">{{ terminalThemeParseError }}</p>
+  <div class="mt-4 flex justify-end gap-2 pt-4 border-t border-border">
+       <button @click="handleCancelEditingTheme" class="px-4 md:px-5 py-2 rounded font-bold border border-border bg-header text-foreground hover:bg-border disabled:opacity-60 disabled:cursor-not-allowed text-sm md:text-base">{{ t('common.cancel') }}</button> 
+       <button @click="handleSaveEditingTheme" class="px-4 md:px-5 py-2 rounded font-bold border border-button bg-button text-button-text hover:bg-button-hover hover:border-button-hover disabled:opacity-60 disabled:cursor-not-allowed text-sm md:text-base">{{ t('common.save') }}</button> 
+   </div>
+  </section>
+</template>
\ No newline at end of file
diff --git a/packages/frontend/src/components/style-customizer/StyleCustomizerUiTab.vue b/packages/frontend/src/components/style-customizer/StyleCustomizerUiTab.vue
new file mode 100644
index 0000000..82fd747
--- /dev/null
+++ b/packages/frontend/src/components/style-customizer/StyleCustomizerUiTab.vue
@@ -0,0 +1,268 @@
+<script setup lang="ts">
+import { ref, watch, computed, onMounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useAppearanceStore } from '../../stores/appearance.store';
+import { useUiNotificationsStore } from '../../stores/uiNotifications.store';
+import { storeToRefs } from 'pinia';
+import { defaultUiTheme } from '../../features/appearance/config/default-themes';
+import { safeJsonParse } from '../../stores/appearance.store';
+
+const { t } = useI18n();
+const appearanceStore = useAppearanceStore();
+const notificationsStore = useUiNotificationsStore();
+const { appearanceSettings } = storeToRefs(appearanceStore);
+
+const editableUiTheme = ref<Record<string, string>>({});
+const editableUiThemeString = ref('');
+const themeParseError = ref<string | null>(null);
+
+// 定义黑暗模式主题变量
+const darkModeTheme = {
+  '--app-bg-color': '#212529',
+  '--text-color': '#e9ecef',
+  '--text-color-secondary': '#adb5bd',
+  '--border-color': '#495057',
+  '--link-color': '#BB86FC',
+  '--link-hover-color': '#D1A9FF',
+  '--link-active-color': '#A06CD5',
+  '--link-active-bg-color': 'rgba(160, 108, 213, 0.2)',
+  '--nav-item-active-bg-color': 'var(--link-active-bg-color)',
+  '--header-bg-color': '#343a40',
+  '--footer-bg-color': '#343a40',
+  '--button-bg-color': 'var(--link-active-color)',
+  '--button-text-color': '#ffffff',
+  '--button-hover-bg-color': '#8E44AD',
+  '--icon-color': 'var(--text-color-secondary)',
+  '--icon-hover-color': 'var(--link-hover-color)',
+  '--split-line-color': 'var(--border-color)',
+  '--split-line-hover-color': 'var(--border-color)',
+  '--input-focus-border-color': 'var(--link-active-color)',
+  '--input-focus-glow': 'var(--link-active-color)',
+  '--overlay-bg-color': 'rgba(0, 0, 0, 0.8)',
+  '--color-success': '#5cb85c',
+  '--color-error': '#d9534f',
+  '--color-warning': '#f0ad4e',
+  '--font-family-sans-serif': 'sans-serif',
+  '--base-padding': '1rem',
+  '--base-margin': '0.5rem'
+};
+
+const initializeEditableState = () => {
+  const userThemeJson = appearanceSettings.value.customUiTheme;
+  const userTheme = safeJsonParse(userThemeJson, {});
+  const mergedTheme = { ...defaultUiTheme, ...userTheme };
+  editableUiTheme.value = JSON.parse(JSON.stringify(mergedTheme));
+  themeParseError.value = null;
+  try {
+      const themeObject = editableUiTheme.value;
+      if (themeObject && typeof themeObject === 'object' && Object.keys(themeObject).length > 0) {
+          const lines = Object.entries(themeObject).map(([key, value]) => `${key}: ${value}`);
+          editableUiThemeString.value = lines.join('\n');
+      } else {
+          editableUiThemeString.value = '';
+      }
+  } catch (e) {
+      console.error("初始化 UI 主题字符串失败:", e);
+      editableUiThemeString.value = '';
+  }
+};
+
+onMounted(initializeEditableState);
+
+watch(() => appearanceSettings.value.customUiTheme, () => {
+    console.log('[StyleCustomizerUiTab Watch] customUiTheme changed, re-initializing.');
+    initializeEditableState();
+}, { deep: true });
+
+
+const handleSaveUiTheme = async () => {
+  try {
+    await appearanceStore.saveCustomUiTheme(editableUiTheme.value);
+    notificationsStore.addNotification({ type: 'success', message: t('styleCustomizer.uiThemeSaved') });
+  } catch (error: any) {
+    console.error("保存 UI 主题失败:", error);
+    notificationsStore.addNotification({ type: 'error', message: t('styleCustomizer.uiThemeSaveFailed', { message: error.message }) });
+  }
+};
+
+const handleResetUiTheme = async () => {
+    try {
+        await appearanceStore.resetCustomUiTheme();
+        notificationsStore.addNotification({ type: 'info', message: t('styleCustomizer.uiThemeReset') });
+    } catch (error: any) {
+        console.error("重置 UI 主题失败:", error);
+        notificationsStore.addNotification({ type: 'error', message: t('styleCustomizer.uiThemeResetFailed', { message: error.message }) });
+    }
+};
+
+const applyDarkMode = async () => {
+  try {
+    editableUiTheme.value = JSON.parse(JSON.stringify(darkModeTheme));
+    await appearanceStore.saveCustomUiTheme(editableUiTheme.value);
+    notificationsStore.addNotification({ type: 'success', message: t('styleCustomizer.darkModeApplied') });
+  } catch (error: any) {
+    console.error("应用黑暗模式失败:", error);
+    notificationsStore.addNotification({ type: 'error', message: t('styleCustomizer.darkModeApplyFailed', { message: error.message || '未知错误' }) });
+  }
+};
+
+const formattedEditableUiThemeJson = computed(() => {
+    try {
+        const themeObject = editableUiTheme.value;
+        if (!themeObject || typeof themeObject !== 'object' || Object.keys(themeObject).length === 0) {
+            return '';
+        }
+        const lines = Object.entries(themeObject).map(([key, value]) => {
+            return `${key}: ${value}`;
+        });
+        return lines.join('\n');
+    } catch (e) {
+        console.error("序列化可编辑 UI 主题键值对失败:", e);
+        return '';
+    }
+});
+
+watch(formattedEditableUiThemeJson, (newJson) => {
+    if (document.activeElement?.id !== 'uiThemeTextarea' || themeParseError.value) {
+        editableUiThemeString.value = newJson;
+        if (themeParseError.value && document.activeElement?.id !== 'uiThemeTextarea') {
+             themeParseError.value = null;
+        }
+    }
+});
+
+const handleUiThemeStringChange = () => {
+    themeParseError.value = null;
+    let inputText = editableUiThemeString.value.trim();
+
+    if (!inputText) {
+        editableUiTheme.value = {};
+        return;
+    }
+
+    let jsonStringToParse = inputText
+        .split('\n')
+        .map(line => line.trim())
+        .filter(line => line && line.includes(':'))
+        .map(line => {
+            const parts = line.split(/:(.*)/s);
+            if (parts.length < 2) return null;
+
+            let key = parts[0].trim();
+            let value = parts[1].trim();
+
+            if (key.startsWith('"') && key.endsWith('"')) key = key.slice(1, -1);
+            if (key.startsWith("'") && key.endsWith("'")) key = key.slice(1, -1);
+            key = JSON.stringify(key);
+
+            if (value.endsWith(',')) value = value.slice(0, -1).trim();
+            let originalValue = value;
+            if (value.startsWith('"') && value.endsWith('"')) originalValue = value.slice(1, -1);
+            else if (value.startsWith("'") && value.endsWith("'")) originalValue = value.slice(1, -1);
+
+            if (isNaN(Number(originalValue)) && originalValue !== 'true' && originalValue !== 'false' && originalValue !== 'null') {
+                 value = JSON.stringify(originalValue);
+            } else {
+                value = originalValue;
+            }
+            return `  ${key}: ${value}`;
+        })
+        .filter(line => line !== null)
+        .join(',\n');
+
+    const fullJsonString = `{\n${jsonStringToParse}\n}`;
+
+    try {
+        const parsedTheme = JSON.parse(fullJsonString);
+        if (typeof parsedTheme !== 'object' || parsedTheme === null || Array.isArray(parsedTheme)) {
+            throw new Error(t('styleCustomizer.errorInvalidJsonObject'));
+        }
+        editableUiTheme.value = parsedTheme;
+    } catch (error: any) {
+        console.error('解析 UI 主题配置失败:', error);
+        let errorMessage = error.message || t('styleCustomizer.errorInvalidJsonConfig');
+        if (error instanceof SyntaxError) {
+            errorMessage = `${t('styleCustomizer.errorJsonSyntax')}: ${error.message}`;
+        }
+        themeParseError.value = errorMessage;
+    }
+};
+
+const formatLabel = (key: string): string => {
+  return key
+    .replace(/^--/, '')
+    .replace(/-/g, ' ')
+    .replace(/([A-Z])/g, ' $1')
+    .replace(/^./, (str) => str.toUpperCase());
+};
+
+const handleFocusAndSelect = (event: FocusEvent) => {
+  const target = event.target;
+  if (target instanceof HTMLInputElement) {
+    target.select();
+  }
+};
+
+defineExpose({
+  handleSaveUiTheme,
+  handleResetUiTheme
+});
+
+</script>
+
+<template>
+  <section>
+    <h3 class="mt-0 border-b border-border pb-2 mb-4 text-lg font-semibold text-foreground">{{ t('styleCustomizer.uiStyles') }}</h3>
+    <div class="grid grid-cols-1 md:grid-cols-[auto_1fr] items-start md:items-center gap-2 md:gap-3 mb-6">
+        <label class="text-left text-foreground text-sm font-medium mb-1 md:mb-0">{{ t('styleCustomizer.themeModeLabel', '主题模式:') }}</label>
+        <div class="flex gap-2 justify-start flex-wrap">
+            <button @click="handleResetUiTheme" class="px-3 py-1.5 text-sm border border-border rounded bg-header hover:bg-border transition duration-200 ease-in-out whitespace-nowrap">{{ t('styleCustomizer.defaultMode', '默认模式') }}</button>
+            <button @click="applyDarkMode" class="px-3 py-1.5 text-sm border border-border rounded bg-header hover:bg-border transition duration-200 ease-in-out whitespace-nowrap">{{ t('styleCustomizer.darkMode', '黑暗模式') }}</button>
+        </div>
+    </div>
+    <p class="text-text-secondary text-sm leading-relaxed mb-3">{{ t('styleCustomizer.uiDescription') }}</p>
+    <div v-for="(value, key) in editableUiTheme" :key="key" class="grid grid-cols-1 md:grid-cols-[auto_1fr] items-start md:items-center gap-x-3 gap-y-1 mb-3">
+      <label :for="`ui-${key}`" class="text-left text-foreground text-sm font-medium overflow-hidden text-ellipsis block w-full mb-1 md:mb-0">{{ formatLabel(key) }}:</label>
+      <div class="flex items-center gap-2 w-full">
+        <input
+          v-if="typeof value === 'string' && (value.startsWith('#') || value.startsWith('rgb') || value.startsWith('hsl'))"
+          type="color"
+          :id="`ui-${key}`"
+          v-model="editableUiTheme[key]"
+          class="p-0.5 h-[34px] min-w-[40px] max-w-[50px] rounded border border-border flex-shrink-0 focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary"
+        />
+        <input
+          v-if="typeof value === 'string' && (value.startsWith('#') || value.startsWith('rgb') || value.startsWith('hsl'))"
+          type="text"
+          :value="editableUiTheme[key]"
+          class="flex-grow min-w-[80px] bg-background cursor-text border border-border px-[0.7rem] py-2 rounded text-sm text-foreground w-full box-border transition duration-200 ease-in-out focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary"
+          @focus="handleFocusAndSelect"
+          @input="editableUiTheme[key] = ($event.target as HTMLInputElement).value"
+        />
+        <input
+          v-else
+          type="text"
+          :id="`ui-${key}`"
+          v-model="editableUiTheme[key]"
+          class="col-span-full border border-border px-[0.7rem] py-2 rounded text-sm bg-background text-foreground w-full box-border transition duration-200 ease-in-out focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary"
+        />
+      </div>
+    </div>
+    <hr style="margin-top: calc(var(--base-padding) * 2); margin-bottom: calc(var(--base-padding) * 2);">
+    <h4 class="mt-6 mb-2 text-base font-semibold text-foreground">{{ t('styleCustomizer.uiThemeJsonEditorTitle') }}</h4>
+    <p class="text-text-secondary text-sm leading-relaxed mb-3">{{ t('styleCustomizer.uiThemeJsonEditorDesc') }}</p>
+    <div class="mt-4">
+       <label for="uiThemeTextarea" class="sr-only">{{ t('styleCustomizer.uiThemeJsonEditorTitle') }}</label>
+       <textarea
+         id="uiThemeTextarea"
+         v-model="editableUiThemeString"
+         @blur="handleUiThemeStringChange"
+         rows="15"
+         :placeholder="'--app-bg-color: #ffffff\n--text-color: #333333\n...'"
+         spellcheck="false"
+         class="w-full font-mono text-sm leading-snug border border-border rounded p-3 bg-background text-foreground resize-y min-h-[200px] box-border whitespace-pre-wrap break-words transition duration-200 ease-in-out focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary"
+       ></textarea>
+    </div>
+     <p v-if="themeParseError" class="text-error-text bg-error/10 border border-error/30 px-3 py-2 rounded text-sm mt-2">{{ themeParseError }}</p>
+  </section>
+</template>
\ No newline at end of file