🎨 Refactor code structure

frontend/src/editor/Editor.vue

@@ -10,7 +10,6 @@ import {
   getTabExtensions,
   updateTabConfig,
   createWheelZoomHandler,
-  applyFontSize,
   updateStats
 } from './extensions';
 
@@ -68,7 +67,7 @@ const createEditor = () => {
   editorStore.setEditorView(view);
   
   // 应用初始字体大小
-  applyFontSize(view, configStore.config.fontSize);
+  editorStore.applyFontSize();
   
   // 立即更新统计信息，不等待用户交互
   updateStats(view, editorStore.updateDocumentStats);
@@ -98,9 +97,7 @@ watch(() => configStore.config.tabType, reconfigureTabSettings);
 
 // 监听字体大小变化
 watch(() => configStore.config.fontSize, () => {
-  if (editorStore.editorView) {
+  editorStore.applyFontSize();
-    applyFontSize(editorStore.editorView as EditorView, configStore.config.fontSize);
-  }
 });
 
 onMounted(() => {

frontend/src/editor/extensions/wheelZoomExtension.ts

@@ -1,5 +1,3 @@
-import {EditorView} from '@codemirror/view';
-
 // 处理滚轮缩放字体的事件处理函数
 export const createWheelZoomHandler = (
   increaseFontSize: () => void,
@@ -21,15 +19,4 @@ export const createWheelZoomHandler = (
       }
     }
   };
-};
-
-// 应用字体大小到编辑器
-export const applyFontSize = (view: EditorView, fontSize: number) => {
-  if (!view) return;
-  
-  // 更新编辑器的字体大小
-  const editorDOM = view.dom;
-  if (editorDOM) {
-    editorDOM.style.fontSize = `${fontSize}px`;
-  }
 }; 

frontend/src/stores/configStore.ts

@@ -1,6 +1,6 @@
-import { defineStore } from 'pinia';
+import {defineStore} from 'pinia';
-import { ref } from 'vue';
+import {ref} from 'vue';
-import { EditorConfig, TabType } from '@/types/config';
+import {EditorConfig} from '@/types/config';
 
 // 字体大小范围
 const MIN_FONT_SIZE = 12;
@@ -13,94 +13,94 @@ const MIN_TAB_SIZE = 2;
 const MAX_TAB_SIZE = 8;
 
 export const useConfigStore = defineStore('config', () => {
-  // 配置状态
+    // 配置状态
-  const config = ref<EditorConfig>({
+    const config = ref<EditorConfig>({
-    fontSize: DEFAULT_FONT_SIZE,
+        fontSize: DEFAULT_FONT_SIZE,
-    encoding: 'UTF-8',
+        encoding: 'UTF-8',
-    enableTabIndent: true,
+        enableTabIndent: true,
-    tabSize: DEFAULT_TAB_SIZE,
+        tabSize: DEFAULT_TAB_SIZE,
-    tabType: 'spaces'
+        tabType: 'spaces'
-  });
+    });
 
-  // 字体缩放
+    // 字体缩放
-  function increaseFontSize() {
+    function increaseFontSize() {
-    if (config.value.fontSize < MAX_FONT_SIZE) {
+        if (config.value.fontSize < MAX_FONT_SIZE) {
-      config.value.fontSize += 1;
+            config.value.fontSize += 1;
+        }
     }
-  }
 
-  // 字体缩小
+    // 字体缩小
-  function decreaseFontSize() {
+    function decreaseFontSize() {
-    if (config.value.fontSize > MIN_FONT_SIZE) {
+        if (config.value.fontSize > MIN_FONT_SIZE) {
-      config.value.fontSize -= 1;
+            config.value.fontSize -= 1;
+        }
     }
-  }
 
-  // 重置字体大小
+    // 重置字体大小
-  function resetFontSize() {
+    function resetFontSize() {
-    config.value.fontSize = DEFAULT_FONT_SIZE;
+        config.value.fontSize = DEFAULT_FONT_SIZE;
-  }
-
-  // 设置编码
-  function setEncoding(newEncoding: string) {
-    config.value.encoding = newEncoding;
-  }
-
-  // Tab相关方法
-  function toggleTabIndent() {
-    config.value.enableTabIndent = !config.value.enableTabIndent;
-  }
-
-  // 增加Tab大小
-  function increaseTabSize() {
-    if (config.value.tabSize < MAX_TAB_SIZE) {
-      config.value.tabSize += 1;
     }
-  }
 
-  // 减少Tab大小
+    // 设置编码
-  function decreaseTabSize() {
+    function setEncoding(newEncoding: string) {
-    if (config.value.tabSize > MIN_TAB_SIZE) {
+        config.value.encoding = newEncoding;
-      config.value.tabSize -= 1;
     }
-  }
-  
-  // 切换Tab类型（空格或制表符）
-  function toggleTabType() {
-    config.value.tabType = config.value.tabType === 'spaces' ? 'tab' : 'spaces';
-  }
 
-  // 设置按钮操作
+    // Tab相关方法
-  function openSettings() {
+    function toggleTabIndent() {
-    console.log('打开设置面板');
+        config.value.enableTabIndent = !config.value.enableTabIndent;
-    // 此处可以实现设置面板的逻辑
+    }
-  }
 
-  return {
+    // 增加Tab大小
-    // 状态
+    function increaseTabSize() {
-    config,
+        if (config.value.tabSize < MAX_TAB_SIZE) {
-    
+            config.value.tabSize += 1;
-    // 常量
+        }
-    MIN_FONT_SIZE,
+    }
-    MAX_FONT_SIZE,
+
-    DEFAULT_FONT_SIZE,
+    // 减少Tab大小
-    MIN_TAB_SIZE,
+    function decreaseTabSize() {
-    MAX_TAB_SIZE,
+        if (config.value.tabSize > MIN_TAB_SIZE) {
-    
+            config.value.tabSize -= 1;
-    // 方法
+        }
-    setEncoding,
+    }
-    openSettings,
+
-    increaseFontSize,
+    // 切换Tab类型（空格或制表符）
-    decreaseFontSize,
+    function toggleTabType() {
-    resetFontSize,
+        config.value.tabType = config.value.tabType === 'spaces' ? 'tab' : 'spaces';
-    toggleTabIndent,
+    }
-    increaseTabSize,
+
-    decreaseTabSize,
+    // 设置按钮操作
-    toggleTabType
+    function openSettings() {
-  };
+        console.log('打开设置面板');
+        // 此处可以实现设置面板的逻辑
+    }
+
+    return {
+        // 状态
+        config,
+
+        // 常量
+        MIN_FONT_SIZE,
+        MAX_FONT_SIZE,
+        DEFAULT_FONT_SIZE,
+        MIN_TAB_SIZE,
+        MAX_TAB_SIZE,
+
+        // 方法
+        setEncoding,
+        openSettings,
+        increaseFontSize,
+        decreaseFontSize,
+        resetFontSize,
+        toggleTabIndent,
+        increaseTabSize,
+        decreaseTabSize,
+        toggleTabType
+    };
 }, {
-  persist: {
+    persist: {
-    key: 'editor-config',
+        key: 'editor-config',
-    storage: localStorage
+        storage: localStorage
-  }
+    }
 }); 

frontend/src/stores/editorStore.ts

@@ -34,6 +34,7 @@ export const useEditorStore = defineStore('editor', () => {
         const editorDOM = editorView.value.dom;
         if (editorDOM) {
             editorDOM.style.fontSize = `${configStore.config.fontSize}px`;
+            editorView.value?.requestMeasure();
         }
     }