From 0f17d514419d72ca58372f230eb34d79935363b1 Mon Sep 17 00:00:00 2001
From: Baobhan Sith <80159437+Heavrnl@users.noreply.github.com>
Date: Sat, 24 May 2025 00:19:50 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E7=BC=96=E8=BE=91?=
 =?UTF-8?q?=E5=99=A8=E5=AD=97=E4=BD=93=E5=A4=A7=E5=B0=8F=E4=BF=9D=E5=AD=98?=
 =?UTF-8?q?=E5=A4=B1=E6=95=88=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/FileEditorContainer.vue    |  9 ++-
 .../src/components/FileEditorOverlay.vue      | 12 +++
 .../frontend/src/components/MonacoEditor.vue  | 81 +++++++++++++------
 3 files changed, 76 insertions(+), 26 deletions(-)

diff --git a/packages/frontend/src/components/FileEditorContainer.vue b/packages/frontend/src/components/FileEditorContainer.vue
index 5f5f3db..c06df91 100644
--- a/packages/frontend/src/components/FileEditorContainer.vue
+++ b/packages/frontend/src/components/FileEditorContainer.vue
@@ -18,7 +18,7 @@ const sessionStore = useSessionStore(); // +++ 实例化会话 Store +++
 const settingsStore = useSettingsStore(); // +++ 实例化设置 Store +++
 const appearanceStore = useAppearanceStore(); // +++ 实例化外观 Store +++
 const { shareFileEditorTabsBoolean } = storeToRefs(settingsStore); // +++ 获取共享设置 +++
-const { currentEditorFontFamily } = storeToRefs(appearanceStore); // +++ 获取编辑器字体家族设置 +++
+const { currentEditorFontFamily, currentEditorFontSize } = storeToRefs(appearanceStore);
  
 // --- Props ---
 const props = defineProps({
@@ -214,6 +214,11 @@ const handleEditorScroll = ({ scrollTop, scrollLeft }: { scrollTop: number; scro
   }
 };
 
+// +++ 处理编辑器字体大小更新事件 +++
+const handleEditorFontSizeUpdate = (newSize: number) => {
+    appearanceStore.setEditorFontSize(newSize);
+};
+
 
 // 注意：关闭/最小化按钮现在应该在 WorkspaceView 控制 Pane，而不是这里
 // const handleCloseContainer = () => { ... };
@@ -350,9 +355,11 @@ const handleKeyDown = (event: KeyboardEvent) => {
           v-model="localEditorContent"
           :language="currentTabLanguage"
           :font-family="currentEditorFontFamily"
+          :font-size="currentEditorFontSize"
           theme="vs-dark"
           class="editor-instance"
           @request-save="handleSaveRequest"
+          @update:fontSize="handleEditorFontSizeUpdate"
          :initialScrollTop="activeTab?.scrollTop ?? 0"
          :initialScrollLeft="activeTab?.scrollLeft ?? 0"
          @update:scrollPosition="handleEditorScroll"
diff --git a/packages/frontend/src/components/FileEditorOverlay.vue b/packages/frontend/src/components/FileEditorOverlay.vue
index 3bd6f95..7c6f193 100644
--- a/packages/frontend/src/components/FileEditorOverlay.vue
+++ b/packages/frontend/src/components/FileEditorOverlay.vue
@@ -7,12 +7,14 @@ import FileEditorTabs from './FileEditorTabs.vue';
 import { useFileEditorStore, type FileTab } from '../stores/fileEditor.store';
 import { useSettingsStore } from '../stores/settings.store';
 import { useSessionStore } from '../stores/session.store';
+import { useAppearanceStore } from '../stores/appearance.store';
 
 
 const { t } = useI18n();
 const fileEditorStore = useFileEditorStore();
 const settingsStore = useSettingsStore();
 const sessionStore = useSessionStore();
+const appearanceStore = useAppearanceStore(); 
 
 // --- 本地状态控制弹窗显示 ---
 const isVisible = ref(false);
@@ -34,6 +36,9 @@ const {
 // 设置 Store (用于判断模式)
 const { showPopupFileEditorBoolean, shareFileEditorTabsBoolean } = storeToRefs(settingsStore);
 
+// 从 Appearance Store 获取编辑器字体大小
+const { currentEditorFontSize } = storeToRefs(appearanceStore);
+
 // --- 从 Store 获取方法 ---
 // 全局 Store Actions (用于共享模式)
 const {
@@ -411,6 +416,11 @@ const handleEditorScroll = ({ scrollTop, scrollLeft }: { scrollTop: number; scro
         }
     }
 };
+
+// +++ 处理编辑器字体大小更新事件 +++
+const handleEditorFontSizeUpdate = (newSize: number) => {
+    appearanceStore.setEditorFontSize(newSize);
+};
  
 // 关闭弹窗 (保持不变)
 const handleCloseContainer = () => {
@@ -572,7 +582,9 @@ onBeforeUnmount(() => {
           :language="currentTabLanguage"
           theme="vs-dark"
           class="editor-instance"
+          :font-size="currentEditorFontSize"
           @request-save="handleSaveRequest"
+          @update:fontSize="handleEditorFontSizeUpdate"
          :initialScrollTop="activeTab?.scrollTop ?? 0"
          :initialScrollLeft="activeTab?.scrollLeft ?? 0"
          @update:scrollPosition="handleEditorScroll"
diff --git a/packages/frontend/src/components/MonacoEditor.vue b/packages/frontend/src/components/MonacoEditor.vue
index 60494d8..dc93240 100644
--- a/packages/frontend/src/components/MonacoEditor.vue
+++ b/packages/frontend/src/components/MonacoEditor.vue
@@ -3,10 +3,10 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onBeforeUnmount, watch, defineExpose } from 'vue';
+import { ref, onMounted, onBeforeUnmount, watch, defineExpose, defineProps, defineEmits } from 'vue';
 import * as monaco from 'monaco-editor';
 
-const localFontSize = ref(14); // 本地字体大小状态，默认 14
+const FONT_SIZE_STORAGE_KEY = 'monacoEditorFontSize'; // localStorage key
 
 const props = defineProps({
   modelValue: {
@@ -29,30 +29,54 @@ const props = defineProps({
     type: String,
     default: 'Consolas, "Courier New", monospace',
   },
-  initialScrollTop: { 
+  fontSize: { // 新增 prop
+    type: Number,
+    default: 14, // 默认字体大小
+  },
+  initialScrollTop: {
     type: Number,
     default: 0,
   },
-  initialScrollLeft: { 
+  initialScrollLeft: {
     type: Number,
     default: 0,
   },
 });
 
-const emit = defineEmits(['update:modelValue', 'request-save', 'update:scrollPosition']); 
+const emit = defineEmits(['update:modelValue', 'request-save', 'update:scrollPosition', 'update:fontSize']); // 添加 'update:fontSize'
 
 const editorContainer = ref<HTMLElement | null>(null);
 let editorInstance: monaco.editor.IStandaloneCodeEditor | null = null;
 
+// 用于驱动编辑器实例的 ref，并与 localStorage 和 props.fontSize 同步
+const internalEditorFontSize = ref(props.fontSize);
+
 
 
 onMounted(() => {
+  // 优先使用 props.fontSize 初始化 internalEditorFontSize
+  internalEditorFontSize.value = props.fontSize;
+
+  // 检查 localStorage 中是否有用户通过滚轮操作留下的偏好
+  const storedUserPreference = localStorage.getItem(FONT_SIZE_STORAGE_KEY);
+  if (storedUserPreference) {
+    const parsedSize = parseInt(storedUserPreference, 10);
+    if (!isNaN(parsedSize) && parsedSize >= 8 && parsedSize <= 40) {
+      // 如果 localStorage 的值与当前的 internalEditorFontSize (来自 prop) 不同，
+      // 表明用户可能通过滚轮调整过，此时以 localStorage 为准，并通知更新全局状态
+      if (parsedSize !== internalEditorFontSize.value) {
+        emit('update:fontSize', parsedSize);
+      }
+      internalEditorFontSize.value = parsedSize;
+    }
+  }
+
   if (editorContainer.value) {
     editorInstance = monaco.editor.create(editorContainer.value, {
       value: props.modelValue,
       language: props.language,
       theme: props.theme,
-      fontSize: localFontSize.value,
+      fontSize: internalEditorFontSize.value, // 使用 internalEditorFontSize
       fontFamily: props.fontFamily, // 使用 prop 的字体家族
       automaticLayout: true,
       readOnly: props.readOnly,
@@ -140,34 +164,32 @@ onMounted(() => {
 
     // --- 添加带防抖的鼠标滚轮缩放功能 ---
     const editorDomNode = editorInstance?.getDomNode();
-    if (editorDomNode) {
-        console.log('[MonacoEditor] Adding wheel event listener with debounce.');
+    if (editorDomNode && editorInstance) {
+        // console.log('[MonacoEditor] Adding wheel event listener.');
         editorDomNode.addEventListener('wheel', (event: WheelEvent) => {
-            if (event.ctrlKey) {
+            if (event.ctrlKey && editorInstance) {
                 event.preventDefault();
+                const currentSizeOpt = editorInstance.getOption(monaco.editor.EditorOption.fontSize);
+                const currentSize = typeof currentSizeOpt === 'number' ? currentSizeOpt : internalEditorFontSize.value;
 
-                
-                const currentSize = localFontSize.value; // 使用本地状态
                 let newSize: number;
                 if (event.deltaY < 0) {
-                    newSize = Math.min(currentSize + 1, 40);
+                    newSize = Math.min(currentSize + 1, 40); // 字体上限 40
                 } else {
-                    newSize = Math.max(currentSize - 1, 8);
+                    newSize = Math.max(currentSize - 1, 8);  // 字体下限 8
                 }
 
-                // Update visual font size and local state immediately
-                if (editorInstance && newSize !== currentSize) {
-                    console.log(`[MonacoEditor] Updating local font size to: ${newSize}`);
-                    localFontSize.value = newSize; // 更新本地状态
-                    editorInstance.updateOptions({ fontSize: newSize }); // 更新编辑器视觉效果
-
-                    // --- 移除触发防抖保存的逻辑 ---
-                    // debouncedSetEditorFontSize(newSize);
+                if (newSize !== currentSize) {
+                    // console.log(`[MonacoEditor] Updating font size to: ${newSize}`);
+                    editorInstance.updateOptions({ fontSize: newSize });
+                    localStorage.setItem(FONT_SIZE_STORAGE_KEY, newSize.toString());
+                    internalEditorFontSize.value = newSize; // 更新 internal ref
+                    emit('update:fontSize', newSize); // 发出事件以更新 store
                 }
             }
-        }, { passive: false }); 
+        }, { passive: false });
     } else {
-        console.error('[MonacoEditor] editorDomNode is null, cannot add wheel listener.');
+        // console.error('[MonacoEditor] editorDomNode or editorInstance is null, cannot add wheel listener.');
     }
 
 
@@ -219,11 +241,20 @@ watch(() => props.readOnly, (newReadOnly) => {
 watch(() => props.fontFamily, (newFontFamily) => {
   if (editorInstance) {
     editorInstance.updateOptions({ fontFamily: newFontFamily });
-  }
+  };
 });
  
+// 监听来自父组件 (全局设置) 的 fontSize 变化
+watch(() => props.fontSize, (newGlobalSize) => {
+  // 只有当全局设置的 fontSize (通过 prop) 改变时，并且与 internalEditorFontSize (编辑器当前实际或本地调整后) 不同时才更新
+  if (editorInstance && newGlobalSize !== internalEditorFontSize.value) {
+    // console.log(`[MonacoEditor] Global font size changed to: ${newGlobalSize}, updating editor.`);
+    editorInstance.updateOptions({ fontSize: newGlobalSize });
+    localStorage.setItem(FONT_SIZE_STORAGE_KEY, newGlobalSize.toString()); // 保持 localStorage 同步
+    internalEditorFontSize.value = newGlobalSize;
+  }
+});
 
-// --- 移除对全局字体大小的监听 ---
 onBeforeUnmount(() => {
   if (editorInstance) {
     editorInstance.dispose();