feat: 添加设置文件编辑器字体大小的功能

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

@@ -16,7 +16,8 @@ const createTableIfNotExists = () => {
       custom_ui_theme TEXT,
       active_terminal_theme_id TEXT,
       terminal_font_family TEXT,
-      terminal_font_size INTEGER, -- 添加字体大小列
+      terminal_font_size INTEGER,
+      editor_font_size INTEGER, -- 新增：编辑器字体大小
       terminal_background_image TEXT,
       page_background_image TEXT,
       updated_at INTEGER NOT NULL
@@ -40,7 +41,8 @@ const mapRowToAppearanceSettings = (row: any): AppearanceSettings => {
         customUiTheme: row.custom_ui_theme,
         activeTerminalThemeId: row.active_terminal_theme_id,
         terminalFontFamily: row.terminal_font_family,
-        terminalFontSize: row.terminal_font_size, // 添加字体大小映射
+        terminalFontSize: row.terminal_font_size,
+        editorFontSize: row.editor_font_size, // 新增：编辑器字体大小映射
         terminalBackgroundImage: row.terminal_background_image,
         // terminalBackgroundOpacity: row.terminal_background_opacity, // Removed
         pageBackgroundImage: row.page_background_image,
@@ -58,7 +60,8 @@ const getDefaultAppearanceSettings = (): AppearanceSettings => {
         customUiTheme: JSON.stringify(defaultUiTheme), // Use default UI theme
         activeTerminalThemeId: undefined, // Needs to be set after querying default theme ID
         terminalFontFamily: 'Consolas, "Courier New", monospace, "Microsoft YaHei", "微软雅黑"', // Default font
-        terminalFontSize: 14, // 添加默认字体大小
+        terminalFontSize: 14,
+        editorFontSize: 14, // 新增：默认编辑器字体大小
         terminalBackgroundImage: undefined,
         // terminalBackgroundOpacity: 1.0, // Removed
         pageBackgroundImage: undefined,
@@ -82,18 +85,19 @@ const ensureDefaultSettingsExist = () => {
         if (!row) {
             const sqlInsert = `
                 INSERT INTO ${TABLE_NAME} (
-                    id, custom_ui_theme, active_terminal_theme_id, terminal_font_family, terminal_font_size, -- 添加列
+                    id, custom_ui_theme, active_terminal_theme_id, terminal_font_family, terminal_font_size, editor_font_size, -- 添加 editor_font_size 列
                     terminal_background_image, -- terminal_background_opacity, -- Removed
                     page_background_image, -- page_background_opacity, -- Removed
                     updated_at
-                ) VALUES (?, ?, ?, ?, ?, ?, ?, ?) -- 调整占位符数量
+                ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?) -- 调整占位符数量
             `;
             db.run(sqlInsert, [
                 SETTINGS_ID,
                 defaults.customUiTheme,
                 defaults.activeTerminalThemeId, // Initially undefined
                 defaults.terminalFontFamily,
-                defaults.terminalFontSize, // 添加默认值参数
+                defaults.terminalFontSize,
+                defaults.editorFontSize, // 添加 editor_font_size 默认值参数
                 defaults.terminalBackgroundImage,
                 // defaults.terminalBackgroundOpacity, // Removed
                 defaults.pageBackgroundImage,
@@ -179,8 +183,8 @@ export const updateAppearanceSettings = async (settingsDto: UpdateAppearanceDto)
   for (const key in settingsDto) {
       if (Object.prototype.hasOwnProperty.call(settingsDto, key)) {
           const dbKey = key.replace(/[A-Z]/g, letter => `_${letter.toLowerCase()}`); // Convert camelCase to snake_case
-          // Ensure only valid keys are updated (Added terminal_font_size)
+          // Ensure only valid keys are updated (Added editor_font_size)
-          if (['custom_ui_theme', 'active_terminal_theme_id', 'terminal_font_family', 'terminal_font_size', 'terminal_background_image', 'page_background_image'].includes(dbKey)) {
+          if (['custom_ui_theme', 'active_terminal_theme_id', 'terminal_font_family', 'terminal_font_size', 'editor_font_size', 'terminal_background_image', 'page_background_image'].includes(dbKey)) {
               updates.push(`${dbKey} = ?`);
               params.push((settingsDto as any)[key]);
           }

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

@@ -48,6 +48,16 @@ export const updateSettings = async (settingsDto: UpdateAppearanceDto): Promise<
       settingsDto.terminalFontSize = size;
   }
 
+  // 验证 editorFontSize (如果提供了)
+  if (settingsDto.editorFontSize !== undefined && settingsDto.editorFontSize !== null) {
+      const size = Number(settingsDto.editorFontSize);
+      if (isNaN(size) || size <= 0) {
+          throw new Error(`无效的编辑器字体大小: ${settingsDto.editorFontSize}。必须是一个正数。`);
+      }
+      // 确保类型正确传递给仓库层
+      settingsDto.editorFontSize = size;
+  }
+
   // TODO: 如果实现了背景图片上传，这里需要处理文件路径或 URL 的验证/保存逻辑
 
   return appearanceRepository.updateAppearanceSettings(settingsDto);

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

@@ -12,6 +12,7 @@ export interface AppearanceSettings {
   terminalFontSize?: number; // 终端字体大小 (px)
   terminalBackgroundImage?: string; // 终端背景图片 URL 或路径
   pageBackgroundImage?: string; // 页面背景图片 URL 或路径
+  editorFontSize?: number; // 编辑器字体大小 (px)
   updatedAt?: number;
 }
 

packages/frontend/src/components/MonacoEditor.vue

@@ -5,9 +5,11 @@
 <script setup lang="ts">
 import { ref, onMounted, onBeforeUnmount, watch } from 'vue';
 import * as monaco from 'monaco-editor';
+import { useAppearanceStore } from '../stores/appearance.store'; // <-- 导入 Store
+import { storeToRefs } from 'pinia'; // <-- 导入 storeToRefs
 
 // Props for the component (will be expanded later)
-const fontSize = ref(14); // 添加字体大小状态，默认 14
+// const fontSize = ref(14); // <-- 移除本地 fontSize ref
 
 const props = defineProps({
   modelValue: { // Use modelValue for v-model support
@@ -34,13 +36,37 @@ const emit = defineEmits(['update:modelValue', 'request-save']);
 const editorContainer = ref<HTMLElement | null>(null);
 let editorInstance: monaco.editor.IStandaloneCodeEditor | null = null;
 
+// --- Appearance Store ---
+const appearanceStore = useAppearanceStore();
+const { currentEditorFontSize } = storeToRefs(appearanceStore); // <-- 获取编辑器字体大小
+
+// --- Debounce function ---
+let debounceTimer: ReturnType<typeof setTimeout> | null = null;
+const debounce = (func: Function, delay: number) => {
+  return (...args: any[]) => {
+    if (debounceTimer) {
+      clearTimeout(debounceTimer);
+    }
+    debounceTimer = setTimeout(() => {
+      func(...args);
+      debounceTimer = null;
+    }, delay);
+  };
+};
+
+// Debounced function to save font size setting
+const debouncedSetEditorFontSize = debounce((size: number) => {
+    console.log(`[MonacoEditor] Debounced save triggered. Saving font size: ${size}`);
+    appearanceStore.setEditorFontSize(size);
+}, 500); // 500ms delay
+
 onMounted(() => {
   if (editorContainer.value) {
     editorInstance = monaco.editor.create(editorContainer.value, {
       value: props.modelValue,
       language: props.language,
       theme: props.theme,
-      fontSize: fontSize.value, // 使用 ref 作为初始字体大小
+      fontSize: currentEditorFontSize.value, // <-- 使用 Store 的字体大小
       automaticLayout: true, // Auto resize editor on container resize
       readOnly: props.readOnly,
       // Add more options as needed
@@ -103,41 +129,51 @@ onMounted(() => {
       },
     });
 
-    // 添加鼠标滚轮缩放功能
+    // --- 添加带防抖的鼠标滚轮缩放功能 ---
-    const editorDomNode = editorInstance?.getDomNode(); // 获取编辑器 DOM 节点
+    const editorDomNode = editorInstance?.getDomNode();
-    if (editorDomNode) { // 确认编辑器 DOM 节点存在
+    if (editorDomNode) {
-      console.log('[MonacoEditor] Adding wheel event listener to editor DOM node.'); // 调试日志
+        console.log('[MonacoEditor] Adding wheel event listener with debounce.');
-      editorDomNode.addEventListener('wheel', (event: WheelEvent) => {
+        editorDomNode.addEventListener('wheel', (event: WheelEvent) => {
-        console.log('[MonacoEditor] Wheel event detected on editor DOM node.'); // 调试日志
+            if (event.ctrlKey) {
-        // 只在按下Ctrl键时才触发缩放
+                event.preventDefault();
-        if (event.ctrlKey) {
-          console.log('[MonacoEditor] Ctrl key pressed during wheel event.'); // 调试日志
-          event.preventDefault(); // 阻止默认的滚动行为
 
-        // 根据滚轮方向调整字体大小
+                // Calculate new font size immediately
-        if (event.deltaY < 0) {
+                const currentSize = editorInstance?.getOption(monaco.editor.EditorOption.fontSize) ?? currentEditorFontSize.value;
-          // 向上滚动，增大字体
+                let newSize: number;
-          fontSize.value = Math.min(fontSize.value + 1, 40); // 设置最大字体大小为40
+                if (event.deltaY < 0) {
-        } else {
+                    newSize = Math.min(currentSize + 1, 40); // Increase size, max 40
-          // 向下滚动，减小字体
+                } else {
-          fontSize.value = Math.max(fontSize.value - 1, 8); // 设置最小字体大小为8
+                    newSize = Math.max(currentSize - 1, 8); // Decrease size, min 8
-        }
+                }
 
-        // 更新编辑器字体大小
+                // Update visual font size immediately
-        if (editorInstance) {
+                if (editorInstance && newSize !== currentSize) {
-          console.log(`[MonacoEditor] Attempting to update font size to: ${fontSize.value}`); // 调试日志
+                    console.log(`[MonacoEditor] Immediate visual update to font size: ${newSize}`);
-          editorInstance.updateOptions({ fontSize: fontSize.value });
+                    editorInstance.updateOptions({ fontSize: newSize });
-          console.log(`[MonacoEditor] Font size changed to: ${fontSize.value}`); // 添加日志
+
-        } else {
+                    // Trigger debounced save
-          console.warn('[MonacoEditor] editorInstance is null, cannot update font size.'); // 调试日志
+                    debouncedSetEditorFontSize(newSize);
-        }
+                }
-      } else {
+            }
-         // console.log('[MonacoEditor] Ctrl key NOT pressed during wheel event.'); // 可选调试日志
+        }, { passive: false }); // passive: false allows preventDefault
-      }
-    }, { passive: false }); // 设置 passive: false 允许 preventDefault
     } else {
-       console.error('[MonacoEditor] editorDomNode is null, cannot add wheel listener.'); // 调试日志
+        console.error('[MonacoEditor] editorDomNode is null, cannot add wheel listener.');
     }
+    // --- End of wheel event listener ---
+
+    // --- 移除鼠标滚轮缩放功能 ---
+    // const editorDomNode = editorInstance?.getDomNode();
+    // if (editorDomNode) {
+    //   editorDomNode.addEventListener('wheel', (event: WheelEvent) => {
+    //     if (event.ctrlKey) {
+    //       event.preventDefault();
+    //       // ... (移除字体大小调整逻辑) ...
+    //       // if (editorInstance) {
+    //       //   editorInstance.updateOptions({ fontSize: fontSize.value }); // 使用本地 fontSize
+    //       // }
+    //     }
+    //   }, { passive: false });
+    // }
 
   }
 });
@@ -171,6 +207,14 @@ watch(() => props.readOnly, (newReadOnly) => {
 });
 
 
+// Watch for changes in the global editor font size setting
+watch(currentEditorFontSize, (newSize) => {
+  if (editorInstance) {
+    console.log(`[MonacoEditor] Global font size changed to: ${newSize}. Updating editor.`);
+    editorInstance.updateOptions({ fontSize: newSize });
+  }
+});
+
 onBeforeUnmount(() => {
   if (editorInstance) {
     editorInstance.dispose();

packages/frontend/src/components/StyleCustomizer.vue

@@ -15,7 +15,8 @@ const {
     activeTerminalThemeId,
     availableTerminalThemes,
     currentTerminalFontFamily,
-    currentTerminalFontSize, // <-- 添加
+    currentTerminalFontSize,
+    currentEditorFontSize, // <-- 新增
     pageBackgroundImage,
     // pageBackgroundOpacity, // Removed
     terminalBackgroundImage,
@@ -25,7 +26,8 @@ const {
 // --- 本地状态用于编辑 ---
 const editableUiTheme = ref<Record<string, string>>({});
 const editableTerminalFontFamily = ref('');
-const editableTerminalFontSize = ref(14); // <-- 添加，默认值 14
+const editableTerminalFontSize = ref(14);
+const editableEditorFontSize = ref(14); // <-- 新增，编辑器字体大小
 // const editablePageBackgroundOpacity = ref(1.0); // Removed
 // const editableTerminalBackgroundOpacity = ref(1.0); // Removed
 
@@ -52,7 +54,8 @@ const initializeEditableState = () => {
   // 深拷贝 UI 主题
   editableUiTheme.value = JSON.parse(JSON.stringify(currentUiTheme.value || {}));
   editableTerminalFontFamily.value = currentTerminalFontFamily.value;
-  editableTerminalFontSize.value = currentTerminalFontSize.value; // <-- 添加
+  editableTerminalFontSize.value = currentTerminalFontSize.value;
+  editableEditorFontSize.value = currentEditorFontSize.value; // <-- 新增
   selectedTerminalThemeId.value = activeTerminalThemeId.value ?? null; // 初始化下拉框
   // editablePageBackgroundOpacity.value = pageBackgroundOpacity.value; // Removed
   // editableTerminalBackgroundOpacity.value = terminalBackgroundOpacity.value; // Removed
@@ -67,20 +70,22 @@ onMounted(initializeEditableState);
 // 监听 store 变化以更新本地状态 (例如重置或外部更改)
 // 只监听不需要编辑的状态或用于初始化的状态
 watch([
-    currentUiTheme, currentTerminalFontFamily, currentTerminalFontSize, activeTerminalThemeId // <-- 添加 currentTerminalFontSize
+    currentUiTheme, currentTerminalFontFamily, currentTerminalFontSize, currentEditorFontSize, activeTerminalThemeId // <-- 添加 currentEditorFontSize
     // pageBackgroundOpacity, terminalBackgroundOpacity // Removed dependencies
 ], (newVals, oldVals) => {
     // 仅当非编辑状态时，或活动主题ID变化时，才同步下拉框和非编辑状态
-    // 注意：索引现在需要调整，因为 newVals 数组长度变了
+    // 注意：索引现在需要调整
-    if (!isEditingTheme.value || newVals[3] !== oldVals[3]) { // <-- 索引从 2 改为 3
+    const activeThemeIdIndex = 4; // activeTerminalThemeId 的新索引
+    if (!isEditingTheme.value || newVals[activeThemeIdIndex] !== oldVals[activeThemeIdIndex]) {
         initializeEditableState();
     } else {
         // 如果正在编辑，只更新非编辑相关的部分
         editableUiTheme.value = JSON.parse(JSON.stringify(newVals[0] || {}));
         editableTerminalFontFamily.value = newVals[1];
-        editableTerminalFontSize.value = newVals[2]; // <-- 添加
+        editableTerminalFontSize.value = newVals[2];
-        // editablePageBackgroundOpacity.value = newVals[4]; // Removed
+        editableEditorFontSize.value = newVals[3]; // <-- 新增同步
-        // editableTerminalBackgroundOpacity.value = newVals[5]; // Removed
+        // editablePageBackgroundOpacity.value = newVals[5]; // Removed
+        // editableTerminalBackgroundOpacity.value = newVals[6]; // Removed
     }
 }, { deep: true });
 
@@ -101,7 +106,7 @@ const closeCustomizer = () => {
 };
 
 // 当前活动的标签页
-const currentTab = ref<'ui' | 'terminal' | 'background'>('ui');
+const currentTab = ref<'ui' | 'terminal' | 'background' | 'other'>('ui'); // <-- 添加 'other'
 
 // --- 处理函数 ---
 
@@ -157,6 +162,22 @@ const handleSaveTerminalFontSize = async () => {
     }
 };
 
+// 保存编辑器字体大小
+const handleSaveEditorFontSize = async () => {
+    try {
+        const size = Number(editableEditorFontSize.value);
+        if (isNaN(size) || size <= 0) {
+            alert(t('styleCustomizer.errorInvalidEditorFontSize')); // 需要添加翻译
+            return;
+        }
+        await appearanceStore.setEditorFontSize(size);
+        alert(t('styleCustomizer.editorFontSizeSaved')); // 需要添加翻译
+    } catch (error: any) {
+        console.error("保存编辑器字体大小失败:", error);
+        alert(t('styleCustomizer.editorFontSizeSaveFailed', { message: error.message })); // 需要添加翻译
+    }
+};
+
 // 更改激活的终端主题
 const handleTerminalThemeChange = async () => {
     try {
@@ -388,6 +409,9 @@ const formatXtermLabel = (key: keyof ITheme): string => {
            <button @click="currentTab = 'background'" :class="{ active: currentTab === 'background' }" :disabled="isEditingTheme">
             {{ t('styleCustomizer.backgroundSettings') }}
           </button>
+          <button @click="currentTab = 'other'" :class="{ active: currentTab === 'other' }" :disabled="isEditingTheme">
+            {{ t('styleCustomizer.otherSettings') }} <!-- 需要添加翻译 -->
+          </button>
         </nav>
         <main class="panel-main">
           <section v-if="currentTab === 'ui'">
@@ -529,6 +553,15 @@ const formatXtermLabel = (key: keyof ITheme): string => {
                  <!-- Removed Opacity Slider -->
 
            </section>
+           <section v-if="currentTab === 'other'">
+             <h3>{{ t('styleCustomizer.otherSettings') }}</h3> <!-- 需要添加翻译 -->
+             <!-- 编辑器字体大小设置 -->
+             <div class="form-group">
+                 <label for="editorFontSize">{{ t('styleCustomizer.editorFontSize') }}:</label> <!-- 需要添加翻译 -->
+                 <input type="number" id="editorFontSize" v-model.number="editableEditorFontSize" class="number-input" min="1" />
+                 <button @click="handleSaveEditorFontSize" class="button-inline">{{ t('common.save') }}</button>
+             </div>
+           </section>
         </main>
       </div>
       <footer class="panel-footer">
@@ -722,6 +755,7 @@ section[v-if*="isEditingTheme"] .form-group {
 /* 输入控件 */
 .form-group input[type="color"],
 .form-group input[type="text"].text-input,
+.form-group input[type="number"].number-input, /* <-- 添加 number-input */
 .form-group select {
     grid-column: 2 / 3;
     border: 1px solid var(--border-color);
@@ -751,6 +785,7 @@ section[v-if*="isEditingTheme"] .form-group {
 /* Input controls (text, color, select) */
 .form-group input[type="color"],
 .form-group input[type="text"].text-input,
+.form-group input[type="number"].number-input, /* <-- 添加 number-input */
 .form-group select {
     grid-column: 2 / 3; /* Place in the second column */
     /* Existing styles below... */
@@ -772,7 +807,11 @@ section[v-if*="isEditingTheme"] .form-group {
     justify-self: start;
     border-radius: 4px; /* 保持圆角一致 */
 }
-.form-group input:focus, .form-group select:focus {
+.form-group input[type="number"].number-input {
+    max-width: 100px; /* 限制数字输入框宽度 */
+    justify-self: start;
+}
+.form-group input:focus, .form-group select:focus, .form-group input[type="number"]:focus { /* <-- 添加 number input focus */
     border-color: var(--link-active-color);
     outline: 0;
     box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.15); /* 调整聚焦阴影 */

packages/frontend/src/locales/en.json

@@ -77,7 +77,12 @@
     "terminalFontSize": "Terminal Font Size",
     "errorInvalidFontSize": "Invalid font size. Please enter a positive number.",
     "terminalFontSizeSaved": "Terminal font size saved.",
-    "terminalFontSizeSaveFailed": "Failed to save terminal font size: {message}"
+    "terminalFontSizeSaveFailed": "Failed to save terminal font size: {message}",
+    "otherSettings": "Other Settings",
+    "editorFontSize": "Editor Font Size",
+    "editorFontSizeSaved": "Editor font size saved.",
+    "editorFontSizeSaveFailed": "Failed to save editor font size: {message}",
+    "errorInvalidEditorFontSize": "Invalid font size. Please enter a positive number."
   },
   "login": {
     "title": "User Login",

packages/frontend/src/locales/zh.json

@@ -77,7 +77,12 @@
     "terminalFontSize": "终端字体大小",
     "errorInvalidFontSize": "无效的字体大小。请输入一个正数。",
     "terminalFontSizeSaved": "终端字体大小已保存。",
-    "terminalFontSizeSaveFailed": "保存终端字体大小失败: {message}"
+    "terminalFontSizeSaveFailed": "保存终端字体大小失败: {message}",
+    "otherSettings": "其他设置",
+    "editorFontSize": "编辑器字体大小",
+    "editorFontSizeSaved": "编辑器字体大小已保存。",
+    "editorFontSizeSaveFailed": "保存编辑器字体大小失败: {message}",
+    "errorInvalidEditorFontSize": "无效的字体大小。请输入一个正数。"
   },
   "login": {
     "title": "用户登录",

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

@@ -64,6 +64,13 @@ export const useAppearanceStore = defineStore('appearance', () => {
     // 终端背景图片 URL
     const terminalBackgroundImage = computed(() => appearanceSettings.value.terminalBackgroundImage);
 
+    // 当前编辑器字体大小
+    const currentEditorFontSize = computed<number>(() => {
+        // 提供默认值 14，如果后端没有设置或设置无效
+        const size = appearanceSettings.value.editorFontSize;
+        return typeof size === 'number' && size > 0 ? size : 14;
+    });
+
     // --- Actions ---
 
     /**
@@ -172,6 +179,14 @@ export const useAppearanceStore = defineStore('appearance', () => {
         await updateAppearanceSettings({ terminalFontSize: size });
     }
 
+    /**
+     * 设置编辑器字体大小
+     * @param size 字体大小 (数字)
+     */
+    async function setEditorFontSize(size: number) {
+        await updateAppearanceSettings({ editorFontSize: size });
+    }
+
     // --- 终端主题列表管理 Actions ---
 
     /**
@@ -421,7 +436,8 @@ export const useAppearanceStore = defineStore('appearance', () => {
         activeTerminalThemeId,
         currentTerminalTheme,
         currentTerminalFontFamily,
-        currentTerminalFontSize, // <-- 添加
+        currentTerminalFontSize,
+        currentEditorFontSize, // <-- 新增
         pageBackgroundImage,
         // pageBackgroundOpacity, // Removed
         terminalBackgroundImage,
@@ -433,7 +449,8 @@ export const useAppearanceStore = defineStore('appearance', () => {
         resetCustomUiTheme,
         setActiveTerminalTheme,
         setTerminalFontFamily,
-        setTerminalFontSize, // <-- 添加
+        setTerminalFontSize,
+        setEditorFontSize, // <-- 新增
         reloadTerminalThemes,
         createTerminalTheme,
         updateTerminalTheme,