feat: 完成移动端集成CodeMirror

packages/frontend/src/components/CodeMirrorMobileEditor.vue

@@ -3,8 +3,9 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onBeforeUnmount, watch, shallowRef } from 'vue';
+import { ref, onMounted, onBeforeUnmount, watch, shallowRef, computed } from 'vue';
 import { EditorState, Compartment } from '@codemirror/state';
+import { useAppearanceStore } from '../stores/appearance.store';
 import { EditorView, keymap } from '@codemirror/view';
 import { basicSetup } from 'codemirror'; // Use basicSetup from the main 'codemirror' package
 
@@ -21,14 +22,18 @@ const props = defineProps({
 
 const emit = defineEmits(['update:modelValue', 'request-save']);
 
+const appearanceStore = useAppearanceStore();
 const editorRef = ref<HTMLDivElement | null>(null);
 const view = shallowRef<EditorView | null>(null);
 const languageCompartment = new Compartment(); // For dynamic language switching
 // Pinch to zoom state and handlers
-const currentFontSize = ref(16); // Initial font size in pixels
+// Initialize with a default, will be overwritten by store value in onMounted
+const currentFontSize = ref(appearanceStore.currentMobileEditorFontSize);
 const MIN_FONT_SIZE = 8;
 const MAX_FONT_SIZE = 40;
 let lastPinchDistance = 0;
+const debounceTimeout = ref<number | null>(null);
+const DEBOUNCE_DELAY = 500; // 500ms 防抖延迟
 
 const getDistance = (touches: TouchList): number => {
   if (touches.length < 2) return 0;
@@ -49,6 +54,15 @@ const onTouchStart = (event: TouchEvent) => {
   }
 };
 
+const debouncedSetMobileEditorFontSize = (size: number) => {
+  if (debounceTimeout.value !== null) {
+    clearTimeout(debounceTimeout.value);
+  }
+  debounceTimeout.value = window.setTimeout(() => {
+    appearanceStore.setMobileEditorFontSize(size);
+  }, DEBOUNCE_DELAY);
+};
+
 const onTouchMove = (event: TouchEvent) => {
   if (editorRef.value && editorRef.value.contains(event.target as Node)) {
     if (event.touches.length === 2) {
@@ -60,7 +74,9 @@ const onTouchMove = (event: TouchEvent) => {
         newFontSize = Math.max(MIN_FONT_SIZE, Math.min(MAX_FONT_SIZE, newFontSize));
         
         if (Math.abs(currentFontSize.value - newFontSize) > 0.1) { // Only update if change is meaningful
-             currentFontSize.value = newFontSize;
+            currentFontSize.value = newFontSize;
+            // Persist the new font size to the store with debounce
+            debouncedSetMobileEditorFontSize(newFontSize);
         }
       }
       if (newPinchDistance > 0) {
@@ -114,6 +130,9 @@ const getLanguageExtension = async (lang: string) => {
 
 
 onMounted(async () => {
+  // Initialize font size from store
+  currentFontSize.value = appearanceStore.currentMobileEditorFontSize;
+
   if (editorRef.value) {
     const langExt = await getLanguageExtension(props.language);
     const startState = createEditorState(props.modelValue, langExt);
@@ -140,6 +159,10 @@ onBeforeUnmount(() => {
     editorRef.value.removeEventListener('touchmove', onTouchMove);
     editorRef.value.removeEventListener('touchend', onTouchEnd);
   }
+  // Clear debounce timeout if it exists
+  if (debounceTimeout.value !== null) {
+    clearTimeout(debounceTimeout.value);
+  }
 });
 
 watch(() => props.modelValue, (newValue) => {
@@ -160,6 +183,13 @@ watch(() => props.language, async (newLanguage, oldLanguage) => {
   }
 });
 
+// Watch for changes from the store (e.g., if changed in settings panel)
+watch(() => appearanceStore.currentMobileEditorFontSize, (newSize) => {
+  if (newSize !== currentFontSize.value) {
+    currentFontSize.value = newSize;
+  }
+});
+
 defineExpose({
   focus: () => view.value?.focus(),
 });

packages/frontend/src/components/MonacoEditor.vue

@@ -29,7 +29,7 @@ const props = defineProps({
     type: String,
     default: 'Consolas, "Courier New", monospace',
   },
-  fontSize: { // 新增 prop
+  fontSize: { 
     type: Number,
     default: 14, // 默认字体大小
   },

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

@@ -129,6 +129,12 @@ export const useAppearanceStore = defineStore('appearance', () => {
     const currentEditorFontFamily = computed<string>(() => {
         return appearanceSettings.value.editorFontFamily || 'Consolas, "Noto Sans SC", "Microsoft YaHei"'; // 提供默认值
     });
+
+    // 当前移动端编辑器字体大小
+    const currentMobileEditorFontSize = computed<number>(() => {
+        const size = appearanceSettings.value.mobileEditorFontSize;
+        return typeof size === 'number' && size > 0 ? size : 16; // 默认 16
+    });
  
     // 终端背景是否启用
     const isTerminalBackgroundEnabled = computed<boolean>(() => {
@@ -342,6 +348,14 @@ export const useAppearanceStore = defineStore('appearance', () => {
     async function setEditorFontFamily(fontFamily: string) {
         await updateAppearanceSettings({ editorFontFamily: fontFamily });
     }
+
+    /**
+     * 设置移动端编辑器字体大小
+     * @param size 字体大小 (数字)
+     */
+    async function setMobileEditorFontSize(size: number) {
+        await updateAppearanceSettings({ mobileEditorFontSize: size });
+    }
  
     /**
      * 设置终端背景是否启用
@@ -890,7 +904,8 @@ export const useAppearanceStore = defineStore('appearance', () => {
         terminalFontSizeDesktop, // + 用于在设置中分别显示/设置桌面端字号
         terminalFontSizeMobile,  // + 用于在设置中分别显示/设置移动端字号
         currentEditorFontSize,
-        currentEditorFontFamily, // 新增
+        currentMobileEditorFontSize, // 移动端编辑器字号 getter
+        currentEditorFontFamily, 
         pageBackgroundImage,
         terminalBackgroundImage,
         currentTerminalBackgroundOverlayOpacity,
@@ -904,7 +919,8 @@ export const useAppearanceStore = defineStore('appearance', () => {
         setTerminalFontSize, // 设置桌面端字体大小
         setTerminalFontSizeMobile, // + 设置移动端字体大小
         setEditorFontSize,
-        setEditorFontFamily, // 新增
+        setMobileEditorFontSize, // 设置移动端编辑器字号 action
+        setEditorFontFamily, 
         setTerminalBackgroundEnabled,
         createTerminalTheme,
         updateTerminalTheme, 

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

@@ -11,7 +11,8 @@ export interface AppearanceSettings {
   terminalFontSizeMobile?: number; // 移动端字体大小
   terminalBackgroundImage?: string;
   pageBackgroundImage?: string;
-  editorFontSize?: number;
+  editorFontSize?: number; // 桌面端编辑器字号
+  mobileEditorFontSize?: number; // 移动端编辑器字号
   editorFontFamily?: string | null; // Monaco Editor 字体偏好
   terminalBackgroundEnabled?: boolean; // 终端背景是否启用
   terminalBackgroundOverlayOpacity?: number; // 终端背景蒙版透明度 (0-1)