feat: 添加编辑器自定义字体功能

packages/backend/src/repositories/appearance.repository.ts

@@ -58,6 +58,9 @@ const mapRowsToAppearanceSettings = (rows: DbAppearanceSettingsRow[]): Appearanc
                 settings.terminalBackgroundOverlayOpacity = parseFloat(row.value);
                 terminalBackgroundOverlayOpacityFound = true;
                 break;
+            case 'editorFontFamily':
+                settings.editorFontFamily = row.value || null; // 如果为空字符串，则视为 null
+                break;
         }
     }
  
@@ -69,6 +72,7 @@ const mapRowsToAppearanceSettings = (rows: DbAppearanceSettingsRow[]): Appearanc
         terminalFontFamily: settings.terminalFontFamily ?? defaults.terminalFontFamily,
         terminalFontSize: settings.terminalFontSize ?? defaults.terminalFontSize,
         editorFontSize: settings.editorFontSize ?? defaults.editorFontSize,
+        editorFontFamily: settings.editorFontFamily ?? defaults.editorFontFamily,
         terminalBackgroundImage: settings.terminalBackgroundImage ?? defaults.terminalBackgroundImage,
         pageBackgroundImage: settings.pageBackgroundImage ?? defaults.pageBackgroundImage,
         // 修改：只有当数据库中未找到记录时才使用默认值
@@ -91,6 +95,7 @@ const getDefaultAppearanceSettings = (): Omit<AppearanceSettings, '_id'> => {
         terminalFontFamily: 'Consolas, "Courier New", monospace, "Microsoft YaHei", "微软雅黑"',
         terminalFontSize: 14,
         editorFontSize: 14,
+        editorFontFamily: 'Consolas, "Noto Sans SC", "Microsoft YaHei"',
         terminalBackgroundImage: undefined,
         pageBackgroundImage: undefined,
         terminalBackgroundEnabled: true, // 默认启用
@@ -117,6 +122,7 @@ export const ensureDefaultSettingsExist = async (db: sqlite3.Database): Promise<
         { key: 'terminalFontFamily', value: defaults.terminalFontFamily },
         { key: 'terminalFontSize', value: defaults.terminalFontSize },
         { key: 'editorFontSize', value: defaults.editorFontSize },
+        { key: 'editorFontFamily', value: defaults.editorFontFamily },
         { key: 'terminalBackgroundImage', value: defaults.terminalBackgroundImage ?? '' }, // 数据库中使用空字符串
         { key: 'pageBackgroundImage', value: defaults.pageBackgroundImage ?? '' }, // 数据库中使用空字符串
         { key: 'terminalBackgroundEnabled', value: defaults.terminalBackgroundEnabled },

packages/backend/src/services/appearance.service.ts

@@ -69,6 +69,28 @@ export const updateSettings = async (settingsDto: UpdateAppearanceDto): Promise<
       settingsDto.editorFontSize = size;
   }
 
+  // 验证 editorFontFamily (如果提供了)
+  if (settingsDto.hasOwnProperty('editorFontFamily')) {
+    if (settingsDto.editorFontFamily === null) {
+      // 允许用户将字体设置为空 (null)，表示重置或使用默认
+      // 无需额外操作，仓库层会处理 null
+    } else if (typeof settingsDto.editorFontFamily === 'string') {
+      const fontFamily = settingsDto.editorFontFamily;
+      // 校验字体名称格式和长度
+      if (fontFamily.length > 255) {
+        throw new Error('编辑器字体名称过长，最多允许 255 个字符。');
+      }
+
+      if (fontFamily.trim() === '' && fontFamily !== '') {
+  
+      }
+ 
+    } else {
+      // 如果提供了 editorFontFamily 但不是 string 或 null
+      throw new Error('无效的编辑器字体名称类型，应为字符串或 null。');
+    }
+  }
+
   // 验证 terminalBackgroundOverlayOpacity (如果提供了)
   if (settingsDto.terminalBackgroundOverlayOpacity !== undefined && settingsDto.terminalBackgroundOverlayOpacity !== null) {
     const opacity = Number(settingsDto.terminalBackgroundOverlayOpacity);

packages/backend/src/types/appearance.types.ts

@@ -16,6 +16,7 @@ export interface AppearanceSettings {
   terminalBackgroundImage?: string; // 终端背景图片 URL 或路径
   pageBackgroundImage?: string; // 页面背景图片 URL 或路径
   editorFontSize?: number; // 编辑器字体大小 (px)
+  editorFontFamily?: string | null; // Monaco Editor 字体偏好
   terminalBackgroundEnabled?: boolean; // 终端背景是否启用
   terminalBackgroundOverlayOpacity?: number; // 终端背景蒙版透明度 (0-1)
   updatedAt?: number;

packages/frontend/package.json

@@ -1,6 +1,6 @@
 {
    "name": "@nexus-terminal/frontend",
-   "version": "0.7",
+   "version": "0.7.1",
    "private": true,
    "type": "module",
    "scripts": {

packages/frontend/src/components/FileEditorContainer.vue

@@ -5,18 +5,21 @@ import MonacoEditor from './MonacoEditor.vue';
 import FileEditorTabs from './FileEditorTabs.vue';
 import type { FileTab } from '../stores/fileEditor.store'; 
 import { useFocusSwitcherStore } from '../stores/focusSwitcher.store';
-import { useSessionStore } from '../stores/session.store'; 
+import { useSessionStore } from '../stores/session.store';
-import { useSettingsStore } from '../stores/settings.store'; 
+import { useSettingsStore } from '../stores/settings.store';
-import { storeToRefs } from 'pinia'; 
+import { useAppearanceStore } from '../stores/appearance.store'; // +++ 导入外观 Store +++
-import { useWorkspaceEventEmitter } from '../composables/workspaceEvents'; 
+import { storeToRefs } from 'pinia';
+import { useWorkspaceEventEmitter } from '../composables/workspaceEvents';
 
 const { t } = useI18n();
 const emitWorkspaceEvent = useWorkspaceEventEmitter(); // +++ 获取事件发射器 +++
 const focusSwitcherStore = useFocusSwitcherStore(); // +++ 实例化焦点切换 Store +++
 const sessionStore = useSessionStore(); // +++ 实例化会话 Store +++
 const settingsStore = useSettingsStore(); // +++ 实例化设置 Store +++
+const appearanceStore = useAppearanceStore(); // +++ 实例化外观 Store +++
 const { shareFileEditorTabsBoolean } = storeToRefs(settingsStore); // +++ 获取共享设置 +++
-
+const { currentEditorFontFamily } = storeToRefs(appearanceStore); // +++ 获取编辑器字体家族设置 +++
+ 
 // --- Props ---
 const props = defineProps({
   tabs: {
@@ -344,16 +347,17 @@ const handleKeyDown = (event: KeyboardEvent) => {
           v-else-if="activeTab"
           ref="monacoEditorRef"
           :key="activeTab.id"
-          v-model="localEditorContent" 
+          v-model="localEditorContent"
           :language="currentTabLanguage"
+          :font-family="currentEditorFontFamily"
           theme="vs-dark"
           class="editor-instance"
           @request-save="handleSaveRequest"
          :initialScrollTop="activeTab?.scrollTop ?? 0"
          :initialScrollLeft="activeTab?.scrollLeft ?? 0"
          @update:scrollPosition="handleEditorScroll"
-        />
+       />
-        <div v-else class="editor-placeholder">{{ t('fileManager.selectFileToEdit') }}</div>
+       <div v-else class="editor-placeholder">{{ t('fileManager.selectFileToEdit') }}</div>
       </div>
 
   </div>

packages/frontend/src/components/MonacoEditor.vue

@@ -25,17 +25,21 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
-  initialScrollTop: { // 新增 prop
+  fontFamily: {
+    type: String,
+    default: 'Consolas, "Courier New", monospace',
+  },
+  initialScrollTop: { 
     type: Number,
     default: 0,
   },
-  initialScrollLeft: { // 新增 prop
+  initialScrollLeft: { 
     type: Number,
     default: 0,
   },
 });
 
-const emit = defineEmits(['update:modelValue', 'request-save', 'update:scrollPosition']); // 新增 emit
+const emit = defineEmits(['update:modelValue', 'request-save', 'update:scrollPosition']); 
 
 const editorContainer = ref<HTMLElement | null>(null);
 let editorInstance: monaco.editor.IStandaloneCodeEditor | null = null;
@@ -48,7 +52,8 @@ onMounted(() => {
       value: props.modelValue,
       language: props.language,
       theme: props.theme,
-      fontSize: localFontSize.value, 
+      fontSize: localFontSize.value,
+      fontFamily: props.fontFamily, // 使用 prop 的字体家族
       automaticLayout: true,
       readOnly: props.readOnly,
       minimap: { enabled: true },
@@ -211,6 +216,12 @@ watch(() => props.readOnly, (newReadOnly) => {
   }
 });
 
+watch(() => props.fontFamily, (newFontFamily) => {
+  if (editorInstance) {
+    editorInstance.updateOptions({ fontFamily: newFontFamily });
+  }
+});
+ 
 
 // --- 移除对全局字体大小的监听 ---
 onBeforeUnmount(() => {

packages/frontend/src/components/StyleCustomizer.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { ref, reactive, onMounted, watch, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useAppearanceStore } from '../stores/appearance.store'; 
+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'; 
@@ -9,6 +10,7 @@ import { defaultXtermTheme } from '../features/appearance/config/default-themes'
 
 const { t } = useI18n();
 const appearanceStore = useAppearanceStore();
+const notificationsStore = useUiNotificationsStore();
 const {
   appearanceSettings, 
   currentUiTheme,
@@ -17,7 +19,8 @@ const {
   allTerminalThemes, 
   currentTerminalFontFamily,
   currentTerminalFontSize,
-  currentEditorFontSize, 
+  currentEditorFontSize,
+  currentEditorFontFamily,
   pageBackgroundImage,
   
   terminalBackgroundImage,
@@ -30,10 +33,11 @@ const {
 const editableUiTheme = ref<Record<string, string>>({});
 const editableTerminalFontFamily = ref('');
 const editableTerminalFontSize = ref(14);
-const editableEditorFontSize = ref(14); 
+const editableEditorFontSize = ref(14);
+const editableEditorFontFamily = ref('');
 
 
-const editableUiThemeString = ref(''); 
+const editableUiThemeString = ref('');
 const themeParseError = ref<string | null>(null); 
 const localTerminalBackgroundEnabled = ref(true);
 const editableTerminalBackgroundOverlayOpacity = ref(0.5); // 本地编辑状态，默认 0.5
@@ -95,7 +99,8 @@ const initializeEditableState = () => {
   // --- 其他初始化保持不变 ---
   editableTerminalFontFamily.value = currentTerminalFontFamily.value;
   editableTerminalFontSize.value = currentTerminalFontSize.value;
-  editableEditorFontSize.value = currentEditorFontSize.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})`); 
@@ -154,7 +159,8 @@ watch([
         // 字体等信息需要从 newSettings 中获取
         editableTerminalFontFamily.value = newSettings?.terminalFontFamily || '';
         editableTerminalFontSize.value = newSettings?.terminalFontSize || 14;
-        editableEditorFontSize.value = newSettings?.editorFontSize || 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 中处理
     }
@@ -195,7 +201,7 @@ const closeCustomizer = () => {
 };
 
 // 当前活动的标签页
-const currentTab = ref<'ui' | 'terminal' | 'background' | 'other'>('ui'); // <-- 添加 'other'
+const currentTab = ref<'ui' | 'terminal' | 'background' | 'other'>('ui'); 
 
 // --- 处理函数 ---
 
@@ -203,9 +209,10 @@ const currentTab = ref<'ui' | 'terminal' | 'background' | 'other'>('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);
-    alert(t('styleCustomizer.uiThemeSaveFailed', { message: error.message }));
+    notificationsStore.addNotification({ type: 'error', message: t('styleCustomizer.uiThemeSaveFailed', { message: error.message }) }); 
   }
 };
 
@@ -213,9 +220,10 @@ const handleSaveUiTheme = async () => {
 const handleResetUiTheme = async () => {
     try {
         await appearanceStore.resetCustomUiTheme();
+        notificationsStore.addNotification({ type: 'info', message: t('styleCustomizer.uiThemeReset') }); 
     } catch (error: any) {
         console.error("重置 UI 主题失败:", error);
-         alert(t('styleCustomizer.uiThemeResetFailed', { message: error.message }));
+        notificationsStore.addNotification({ type: 'error', message: t('styleCustomizer.uiThemeResetFailed', { message: error.message }) }); 
     }
 };
 
@@ -256,10 +264,10 @@ const applyDarkMode = async () => {
     // 深拷贝覆盖当前编辑的主题
     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);
-    // TODO: 添加 i18n 翻译 'styleCustomizer.darkModeApplyFailed'
+    notificationsStore.addNotification({ type: 'error', message: t('styleCustomizer.darkModeApplyFailed', { message: error.message || '未知错误' }) }); 
-    alert(t('styleCustomizer.darkModeApplyFailed', { message: error.message || '未知错误' }));
   }
 };
 
@@ -382,7 +390,7 @@ const handleUiThemeStringChange = () => {
         // 尝试提供更具体的错误信息
         let errorMessage = error.message || t('styleCustomizer.errorInvalidJsonConfig');
         if (error instanceof SyntaxError) {
-            errorMessage = `${t('styleCustomizer.errorJsonSyntax')}: ${error.message}`; // 需要添加翻译
+            errorMessage = `${t('styleCustomizer.errorJsonSyntax')}: ${error.message}`;
         }
         themeParseError.value = errorMessage;
     }
@@ -393,10 +401,10 @@ const handleUiThemeStringChange = () => {
 const handleSaveTerminalFont = async () => {
     try {
         await appearanceStore.setTerminalFontFamily(editableTerminalFontFamily.value);
-        alert(t('styleCustomizer.terminalFontSaved'));
+        notificationsStore.addNotification({ type: 'success', message: t('styleCustomizer.terminalFontSaved') }); 
     } catch (error: any) {
         console.error("保存终端字体失败:", error);
-        alert(t('styleCustomizer.terminalFontSaveFailed', { message: error.message }));
+        notificationsStore.addNotification({ type: 'error', message: t('styleCustomizer.terminalFontSaveFailed', { message: error.message }) }); 
     }
 };
 
@@ -405,14 +413,14 @@ const handleSaveTerminalFontSize = async () => {
     try {
         const size = Number(editableTerminalFontSize.value);
         if (isNaN(size) || size <= 0) {
-            alert(t('styleCustomizer.errorInvalidFontSize')); // 需要添加翻译
+            notificationsStore.addNotification({ type: 'error', message: t('styleCustomizer.errorInvalidFontSize') }); 
             return;
         }
         await appearanceStore.setTerminalFontSize(size);
-        alert(t('styleCustomizer.terminalFontSizeSaved')); // 需要添加翻译
+        notificationsStore.addNotification({ type: 'success', message: t('styleCustomizer.terminalFontSizeSaved') }); 
     } catch (error: any) {
         console.error("保存终端字体大小失败:", error);
-        alert(t('styleCustomizer.terminalFontSizeSaveFailed', { message: error.message })); // 需要添加翻译
+        notificationsStore.addNotification({ type: 'error', message: t('styleCustomizer.terminalFontSizeSaveFailed', { message: error.message }) }); 
     }
 };
 
@@ -421,17 +429,28 @@ const handleSaveEditorFontSize = async () => {
     try {
         const size = Number(editableEditorFontSize.value);
         if (isNaN(size) || size <= 0) {
-            alert(t('styleCustomizer.errorInvalidEditorFontSize')); // 需要添加翻译
+            notificationsStore.addNotification({ type: 'error', message: t('styleCustomizer.errorInvalidEditorFontSize') }); 
             return;
         }
         await appearanceStore.setEditorFontSize(size);
-        alert(t('styleCustomizer.editorFontSizeSaved')); // 需要添加翻译
+        notificationsStore.addNotification({ type: 'success', message: t('styleCustomizer.editorFontSizeSaved') }); 
     } catch (error: any) {
         console.error("保存编辑器字体大小失败:", error);
-        alert(t('styleCustomizer.editorFontSizeSaveFailed', { message: error.message })); // 需要添加翻译
+        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
@@ -450,10 +469,10 @@ const handleApplyTheme = async (theme: TerminalTheme) => {
     try {
         // setActiveTerminalTheme action 现在需要字符串 ID
         await appearanceStore.setActiveTerminalTheme(theme._id);
-        // 成功后 activeTerminalThemeId 会自动更新
+        notificationsStore.addNotification({ type: 'success', message: t('styleCustomizer.setActiveThemeSuccess', { themeName: theme.name }) }); 
     } catch (error: any) {
         console.error("应用终端主题失败:", error);
-        alert(t('styleCustomizer.setActiveThemeFailed', { message: error.message }));
+        notificationsStore.addNotification({ type: 'error', message: t('styleCustomizer.setActiveThemeFailed', { message: error.message }) }); 
     }
 };
 
@@ -494,7 +513,7 @@ const handleEditTheme = async (theme: TerminalTheme) => {
     // 检查 theme._id 是否存在
     if (!theme._id) {
         console.error("尝试编辑没有 ID 的主题:", theme);
-        alert(t('styleCustomizer.errorEditThemeNoId')); // 需要添加翻译: "无法编辑没有 ID 的主题"
+        notificationsStore.addNotification({ type: 'error', message: t('styleCustomizer.errorEditThemeNoId') }); 
         return;
     }
 
@@ -506,7 +525,7 @@ const handleEditTheme = async (theme: TerminalTheme) => {
         // 1. 加载主题数据
         themeDataToEdit = await appearanceStore.loadTerminalThemeData(theme._id);
         if (!themeDataToEdit) {
-            throw new Error(t('styleCustomizer.errorLoadThemeDataFailed')); // 需要添加翻译: "加载主题数据失败"
+            throw new Error(t('styleCustomizer.errorLoadThemeDataFailed')); 
         }
 
         // 2. 如果是预设主题，准备创建副本
@@ -544,7 +563,7 @@ const handleEditTheme = async (theme: TerminalTheme) => {
 
     } catch (error: any) {
         console.error("编辑主题失败 (加载数据时):", error);
-        saveThemeError.value = error.message || t('styleCustomizer.errorEditThemeFailed'); // 需要添加翻译: "编辑主题失败"
+        saveThemeError.value = error.message || t('styleCustomizer.errorEditThemeFailed'); 
         // 不进入编辑模式
         isEditingTheme.value = false;
         editingTheme.value = null;
@@ -560,7 +579,7 @@ const handleSaveEditingTheme = async () => {
     // 在保存前，确保 themeData 是最新的（以防 textarea 未失去焦点）
     handleTerminalThemeStringChange(); // 先尝试解析 textarea
     if (terminalThemeParseError.value) {
-        saveThemeError.value = t('styleCustomizer.errorFixJsonBeforeSave'); // 需要添加翻译: "请先修复 JSON 格式错误再保存"
+        saveThemeError.value = t('styleCustomizer.errorFixJsonBeforeSave'); 
         return;
     }
 
@@ -578,18 +597,18 @@ const handleSaveEditingTheme = async () => {
                 editingTheme.value._id,
                 updateDto.name,
                 updateDto.themeData
-            );
+           );
-             alert(t('styleCustomizer.themeUpdatedSuccess'));
+           notificationsStore.addNotification({ type: 'success', message: t('styleCustomizer.themeUpdatedSuccess') }); 
-        } else { // 新建
+       } else { // 新建
-             // 确保传递的是 CreateTerminalThemeDto 兼容的格式
+            // 确保传递的是 CreateTerminalThemeDto 兼容的格式
-            const createDto = { name: editingTheme.value.name, themeData: currentThemeData }; // 使用解析后的数据
+           const createDto = { name: editingTheme.value.name, themeData: currentThemeData }; // 使用解析后的数据
-            await appearanceStore.createTerminalTheme(
+           await appearanceStore.createTerminalTheme(
-                createDto.name,
+               createDto.name,
-                createDto.themeData
+               createDto.themeData
-            );
+           );
-             alert(t('styleCustomizer.themeCreatedSuccess'));
+           notificationsStore.addNotification({ type: 'success', message: t('styleCustomizer.themeCreatedSuccess') }); 
-        }
+       }
-        isEditingTheme.value = false; // 关闭编辑
+       isEditingTheme.value = false; // 关闭编辑
         editingTheme.value = null;
         editableTerminalThemeString.value = ''; // 清理
         terminalThemeParseError.value = null; // 清理
@@ -680,10 +699,10 @@ const handleDeleteTheme = async (theme: TerminalTheme) => {
     if (theme.isPreset) return;
     try {
         await appearanceStore.deleteTerminalTheme(theme._id!);
-         alert(t('styleCustomizer.themeDeletedSuccess'));
+        notificationsStore.addNotification({ type: 'success', message: t('styleCustomizer.themeDeletedSuccess') }); 
     } catch (error: any) {
         console.error("删除终端主题失败:", error);
-         alert(t('styleCustomizer.themeDeleteFailed', { message: error.message }));
+        notificationsStore.addNotification({ type: 'error', message: t('styleCustomizer.themeDeleteFailed', { message: error.message }) }); 
     }
 };
 
@@ -702,12 +721,15 @@ const handleImportThemeFile = async (event: Event) => {
             // 可以选择在前端解析文件名作为默认名称传递给后端
             const defaultName = file.name.endsWith('.json') ? file.name.slice(0, -5) : file.name;
             await appearanceStore.importTerminalTheme(file, defaultName); // 传递文件名作为备选名称
-            alert(t('styleCustomizer.importSuccess'));
+            notificationsStore.addNotification({ type: 'success', message: t('styleCustomizer.importSuccess') }); 
             input.value = ''; // 清空文件输入，以便再次选择相同文件
         } catch (error: any) {
             console.error("导入主题失败:", error);
-            importError.value = error.message || t('styleCustomizer.importFailed');
+            const determinedErrorMessage = error.message || t('styleCustomizer.importFailed');
-             input.value = '';
+            importError.value = determinedErrorMessage; // importError.value 的类型是 string | null
+            // 确保传递给 addNotification 的 message 是 string 类型
+            notificationsStore.addNotification({ type: 'error', message: determinedErrorMessage });
+            input.value = '';
         }
     }
 };
@@ -720,13 +742,15 @@ const handleExportActiveTheme = async () => {
         try {
             // exportTerminalTheme action 需要字符串 ID
             await appearanceStore.exportTerminalTheme(currentIdNum.toString());
+            // 导出通常是下载文件，可能不需要显式通知，或者可以有一个信息性通知
+            notificationsStore.addNotification({ type: 'info', message: t('styleCustomizer.exportInitiated') }); 
         } catch (error: any) {
             console.error("导出主题失败:", error);
-             alert(t('styleCustomizer.exportFailed', { message: error.message }));
+            notificationsStore.addNotification({ type: 'error', message: t('styleCustomizer.exportFailed', { message: error.message }) }); 
         }
     } else {
         console.warn("尝试导出主题，但 activeTerminalThemeId 为 null 或 undefined");
-        alert(t('styleCustomizer.noActiveThemeToExport'));
+        notificationsStore.addNotification({ type: 'warning', message: t('styleCustomizer.noActiveThemeToExport') }); 
     }
 };
 
@@ -747,10 +771,12 @@ const handlePageBgUpload = async (event: Event) => {
         const file = input.files[0];
         try {
             await appearanceStore.uploadPageBackground(file);
-            alert(t('styleCustomizer.pageBgUploadSuccess'));
+            notificationsStore.addNotification({ type: 'success', message: t('styleCustomizer.pageBgUploadSuccess') }); 
             input.value = ''; // 清空以便再次选择
         } catch (error: any) {
-            uploadError.value = error.message || t('styleCustomizer.uploadFailed');
+            const determinedErrorMessage = error.message || t('styleCustomizer.uploadFailed');
+            uploadError.value = determinedErrorMessage;
+            notificationsStore.addNotification({ type: 'error', message: determinedErrorMessage }); // 显示错误通知
             input.value = '';
         }
     }
@@ -762,10 +788,12 @@ const handleTerminalBgUpload = async (event: Event) => {
         const file = input.files[0];
         try {
             await appearanceStore.uploadTerminalBackground(file);
-             alert(t('styleCustomizer.terminalBgUploadSuccess'));
+            notificationsStore.addNotification({ type: 'success', message: t('styleCustomizer.terminalBgUploadSuccess') }); 
             input.value = '';
         } catch (error: any) {
-            uploadError.value = error.message || t('styleCustomizer.uploadFailed');
+            const determinedErrorMessage = error.message || t('styleCustomizer.uploadFailed');
+            uploadError.value = determinedErrorMessage;
+            notificationsStore.addNotification({ type: 'error', message: determinedErrorMessage }); // 显示错误通知
             input.value = '';
         }
     }
@@ -774,20 +802,20 @@ const handleTerminalBgUpload = async (event: Event) => {
 const handleRemovePageBg = async () => {
     try {
         await appearanceStore.removePageBackground();
-         alert(t('styleCustomizer.pageBgRemoved'));
+        notificationsStore.addNotification({ type: 'success', message: t('styleCustomizer.pageBgRemoved') }); 
     } catch (error: any) {
          console.error("移除页面背景失败:", error);
-         alert(t('styleCustomizer.removeBgFailed', { message: error.message }));
+         notificationsStore.addNotification({ type: 'error', message: t('styleCustomizer.removeBgFailed', { message: error.message }) }); 
     }
 };
 
 const handleRemoveTerminalBg = async () => {
     try {
         await appearanceStore.removeTerminalBackground();
-         alert(t('styleCustomizer.terminalBgRemoved'));
+        notificationsStore.addNotification({ type: 'success', message: t('styleCustomizer.terminalBgRemoved') }); 
     } catch (error: any) {
          console.error("移除终端背景失败:", error);
-         alert(t('styleCustomizer.removeBgFailed', { message: error.message }));
+         notificationsStore.addNotification({ type: 'error', message: t('styleCustomizer.removeBgFailed', { message: error.message }) }); 
     }
 };
  
@@ -802,7 +830,7 @@ const handleToggleTerminalBackground = async () => {
         console.error("更新终端背景启用状态失败:", error);
         // 失败时回滚本地状态
         localTerminalBackgroundEnabled.value = !newValue;
-        alert(t('styleCustomizer.errorToggleTerminalBg', { message: error.message })); // 需要添加翻译
+        notificationsStore.addNotification({ type: 'error', message: t('styleCustomizer.errorToggleTerminalBg', { message: error.message }) }); 
     }
 };
  
@@ -811,14 +839,14 @@ const handleSaveTerminalBackgroundOverlayOpacity = async () => {
   try {
     const opacity = Number(editableTerminalBackgroundOverlayOpacity.value);
     if (isNaN(opacity) || opacity < 0 || opacity > 1) {
-      alert(t('styleCustomizer.errorInvalidOpacityValue')); // 需要添加翻译 "无效的透明度值，必须在0到1之间"
+      notificationsStore.addNotification({ type: 'error', message: t('styleCustomizer.errorInvalidOpacityValue') }); 
       return;
     }
     await appearanceStore.setTerminalBackgroundOverlayOpacity(opacity);
-    alert(t('styleCustomizer.terminalBgOverlayOpacitySaved')); // 需要添加翻译 "终端背景蒙版透明度已保存"
+    notificationsStore.addNotification({ type: 'success', message: t('styleCustomizer.terminalBgOverlayOpacitySaved') }); 
   } catch (error: any) {
     console.error("保存终端背景蒙版透明度失败:", error);
-    alert(t('styleCustomizer.terminalBgOverlayOpacitySaveFailed', { message: error.message })); // 需要添加翻译 "终端背景蒙版透明度保存失败"
+    notificationsStore.addNotification({ type: 'error', message: t('styleCustomizer.terminalBgOverlayOpacitySaveFailed', { message: error.message }) }); 
   }
 };
 
@@ -1372,8 +1400,16 @@ const handlePreviewButtonMouseDown = async (event: MouseEvent, themeToPreview: T
                  <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>
-        </main>
+       </main>
       </div>
       
       <footer class="flex justify-end p-3 md:p-4 border-t border-border bg-footer flex-shrink-0 flex-wrap gap-2"> 

packages/frontend/src/locales/en-US.json

@@ -70,6 +70,9 @@
     "editorFontSize": "Editor Font Size",
     "editorFontSizeSaved": "Editor font size saved.",
     "editorFontSizeSaveFailed": "Failed to save editor font size: {message}",
+    "editorFontFamily": "Editor Font Family",
+    "editorFontFamilySaved": "Editor font family saved.",
+    "editorFontFamilySaveFailed": "Failed to save editor font family: {message}",
     "errorInvalidEditorFontSize": "Invalid font size. Please enter a positive number.",
     "uiThemeJsonEditorTitle": "UI Theme JSON Editor",
     "uiThemeJsonEditorDesc": "Directly edit the UI theme configuration using JSON. Changes here will reflect in the color pickers above after blurring the textarea.",

packages/frontend/src/locales/ja-JP.json

@@ -1208,6 +1208,9 @@
         "editorFontSize": "エディターフォントサイズ",
         "editorFontSizeSaveFailed": "エディターフォントサイズの保存に失敗しました: {message}",
         "editorFontSizeSaved": "エディターフォントサイズを保存しました。",
+        "editorFontFamily": "エディターフォントファミリー",
+        "editorFontFamilySaved": "エディターフォントファミリーを保存しました。",
+        "editorFontFamilySaveFailed": "エディターフォントファミリーの保存に失敗しました: {message}",
         "errorFixJsonBeforeSave": "保存する前に JSON フォーマットのエラーを修正してください。",
         "errorInvalidEditorFontSize": "無効なフォントサイズです。正数を入力してください。",
         "errorInvalidFontSize": "無効なフォントサイズです。正数を入力してください。",

packages/frontend/src/locales/zh-CN.json

@@ -70,6 +70,9 @@
     "editorFontSize": "编辑器字体大小",
     "editorFontSizeSaved": "编辑器字体大小已保存。",
     "editorFontSizeSaveFailed": "保存编辑器字体大小失败: {message}",
+    "editorFontFamily": "编辑器字体",
+    "editorFontFamilySaved": "编辑器字体已保存。",
+    "editorFontFamilySaveFailed": "保存编辑器字体失败: {message}",
     "errorInvalidEditorFontSize": "无效的字体大小。请输入一个正数。",
     "uiThemeJsonEditorTitle": "界面主题 JSON 编辑器",
     "uiThemeJsonEditorDesc": "直接使用 JSON 编辑界面主题配置。在此处更改并在文本区域失焦后，上面的颜色选择器将同步更新。",

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

@@ -115,6 +115,11 @@ export const useAppearanceStore = defineStore('appearance', () => {
         const size = appearanceSettings.value.editorFontSize;
         return typeof size === 'number' && size > 0 ? size : 14;
     });
+
+    // 当前编辑器字体家族
+    const currentEditorFontFamily = computed<string>(() => {
+        return appearanceSettings.value.editorFontFamily || 'Consolas, "Noto Sans SC", "Microsoft YaHei"'; // 提供默认值
+    });
  
     // 终端背景是否启用
     const isTerminalBackgroundEnabled = computed<boolean>(() => {
@@ -275,6 +280,14 @@ export const useAppearanceStore = defineStore('appearance', () => {
     async function setEditorFontSize(size: number) {
         await updateAppearanceSettings({ editorFontSize: size });
     }
+
+    /**
+     * 设置编辑器字体家族
+     * @param fontFamily 字体列表字符串
+     */
+    async function setEditorFontFamily(fontFamily: string) {
+        await updateAppearanceSettings({ editorFontFamily: fontFamily });
+    }
  
     /**
      * 设置终端背景是否启用
@@ -639,6 +652,7 @@ export const useAppearanceStore = defineStore('appearance', () => {
         terminalFontSizeDesktop, // + 用于在设置中分别显示/设置桌面端字号
         terminalFontSizeMobile,  // + 用于在设置中分别显示/设置移动端字号
         currentEditorFontSize,
+        currentEditorFontFamily, // 新增
         pageBackgroundImage,
         terminalBackgroundImage,
         currentTerminalBackgroundOverlayOpacity,
@@ -651,7 +665,8 @@ export const useAppearanceStore = defineStore('appearance', () => {
         setTerminalFontFamily,
         setTerminalFontSize, // 设置桌面端字体大小
         setTerminalFontSizeMobile, // + 设置移动端字体大小
-        setEditorFontSize, 
+        setEditorFontSize,
+        setEditorFontFamily, // 新增
         setTerminalBackgroundEnabled,
         createTerminalTheme,
         updateTerminalTheme, 

packages/frontend/src/types/appearance.types.ts

@@ -12,6 +12,7 @@ export interface AppearanceSettings {
   terminalBackgroundImage?: string;
   pageBackgroundImage?: string;
   editorFontSize?: number;
+  editorFontFamily?: string | null; // Monaco Editor 字体偏好
   terminalBackgroundEnabled?: boolean; // 终端背景是否启用
   terminalBackgroundOverlayOpacity?: number; // 终端背景蒙版透明度 (0-1)
 }