update

packages/frontend/src/components/MonacoEditor.vue

@@ -5,24 +5,21 @@
 <script setup lang="ts">
 import { ref, onMounted, onBeforeUnmount, watch, defineExpose } 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 localFontSize = ref(14); // <-- 添加本地字体大小状态，默认 14
 
 const props = defineProps({
-  modelValue: { // Use modelValue for v-model support
+  modelValue: { 
     type: String,
     default: '',
   },
   language: {
     type: String,
-    default: 'plaintext', // Default language
+    default: 'plaintext', 
   },
   theme: {
     type: String,
-    default: 'vs-dark', // Default theme (can be 'vs', 'vs-dark', 'hc-black')
+    default: 'vs-dark', 
   },
   readOnly: {
     type: Boolean,
@@ -30,20 +27,12 @@ const props = defineProps({
   }
 });
 
-// Emits for v-model update and save request
 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);
 
-// --- 移除防抖函数和相关调用 ---
-// let debounceTimer: ReturnType<typeof setTimeout> | null = null;
-// const debounce = (func: Function, delay: number) => { ... };
-// const debouncedSetEditorFontSize = debounce((size: number) => { ... });
 
 onMounted(() => {
   if (editorContainer.value) {
@@ -51,16 +40,15 @@ onMounted(() => {
       value: props.modelValue,
       language: props.language,
       theme: props.theme,
-      fontSize: localFontSize.value, // <-- 使用本地字体大小
-      automaticLayout: true, // Auto resize editor on container resize
+      fontSize: localFontSize.value, 
+      automaticLayout: true,
       readOnly: props.readOnly,
-      // Add more options as needed
       minimap: { enabled: true },
       lineNumbers: 'on',
       scrollBeyondLastLine: false,
     });
 
-    // Listen for content changes and emit update event for v-model
+
     editorInstance.onDidChangeModelContent(() => {
       if (editorInstance) {
         const currentValue = editorInstance.getValue();
@@ -70,24 +58,24 @@ onMounted(() => {
       }
     });
 
-    // Add Ctrl+S / Cmd+S keybinding for saving
+    // Ctrl+S / Cmd+S
     editorInstance.addAction({
       id: 'save-file',
       label: 'Save File',
       keybindings: [
         monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS,
       ],
-      precondition: undefined, // Fix: Use undefined instead of null
-      keybindingContext: undefined, // Fix: Use undefined instead of null
-      contextMenuGroupId: 'navigation', // Optional: where to show in context menu
-      contextMenuOrder: 1.5, // Optional: order in context menu
+      precondition: undefined, 
+      keybindingContext: undefined, 
+      contextMenuGroupId: 'navigation', 
+      contextMenuOrder: 1.5,
       run: () => {
         console.log('[MonacoEditor] Save action triggered (Ctrl+S / Cmd+S)');
         emit('request-save');
       },
     });
 
-    // Listen for content changes and emit update event for v-model
+   
     editorInstance.onDidChangeModelContent(() => {
       if (editorInstance) {
         const currentValue = editorInstance.getValue();
@@ -97,17 +85,17 @@ onMounted(() => {
       }
     });
 
-    // Add Ctrl+S / Cmd+S keybinding for saving
+    //Ctrl+S / Cmd+S
     editorInstance.addAction({
       id: 'save-file',
       label: 'Save File',
       keybindings: [
         monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS,
       ],
-      precondition: undefined, // Fix: Use undefined instead of null
-      keybindingContext: undefined, // Fix: Use undefined instead of null
-      contextMenuGroupId: 'navigation', // Optional: where to show in context menu
-      contextMenuOrder: 1.5, // Optional: order in context menu
+      precondition: undefined, 
+      keybindingContext: undefined, 
+      contextMenuGroupId: 'navigation', 
+      contextMenuOrder: 1.5, 
       run: () => {
         console.log('[MonacoEditor] Save action triggered (Ctrl+S / Cmd+S)');
         emit('request-save');
@@ -122,13 +110,13 @@ onMounted(() => {
             if (event.ctrlKey) {
                 event.preventDefault();
 
-                // Calculate new font size immediately based on local state
+                
                 const currentSize = localFontSize.value; // 使用本地状态
                 let newSize: number;
                 if (event.deltaY < 0) {
-                    newSize = Math.min(currentSize + 1, 40); // Increase size, max 40
+                    newSize = Math.min(currentSize + 1, 40);
                 } else {
-                    newSize = Math.max(currentSize - 1, 8); // Decrease size, min 8
+                    newSize = Math.max(currentSize - 1, 8);
                 }
 
                 // Update visual font size and local state immediately
@@ -141,11 +129,11 @@ onMounted(() => {
                     // debouncedSetEditorFontSize(newSize);
                 }
             }
-        }, { passive: false }); // passive: false allows preventDefault
+        }, { passive: false }); 
     } else {
         console.error('[MonacoEditor] editorDomNode is null, cannot add wheel listener.');
     }
-    // --- End of wheel event listener ---
+
 
     // --- 移除鼠标滚轮缩放功能 ---
     // const editorDomNode = editorInstance?.getDomNode();
@@ -164,28 +152,28 @@ onMounted(() => {
   }
 });
 
-// Update editor content if modelValue prop changes from outside
+
 watch(() => props.modelValue, (newValue) => {
   if (editorInstance && editorInstance.getValue() !== newValue) {
     editorInstance.setValue(newValue);
   }
 });
 
-// Update language if prop changes
+
 watch(() => props.language, (newLanguage) => {
   if (editorInstance && editorInstance.getModel()) {
     monaco.editor.setModelLanguage(editorInstance.getModel()!, newLanguage);
   }
 });
 
-// Update theme if prop changes
+
 watch(() => props.theme, (newTheme) => {
   if (editorInstance) {
     monaco.editor.setTheme(newTheme);
   }
 });
 
-// Update readOnly status if prop changes
+
 watch(() => props.readOnly, (newReadOnly) => {
   if (editorInstance) {
     editorInstance.updateOptions({ readOnly: newReadOnly });
@@ -194,8 +182,6 @@ watch(() => props.readOnly, (newReadOnly) => {
 
 
 // --- 移除对全局字体大小的监听 ---
-// watch(currentEditorFontSize, (newSize) => { ... });
-
 onBeforeUnmount(() => {
   if (editorInstance) {
     editorInstance.dispose();
@@ -203,12 +189,6 @@ onBeforeUnmount(() => {
   }
 });
 
-// Expose a method to get the current value if needed (optional)
-// defineExpose({
-//   getValue: () => editorInstance?.getValue()
-// });
-
-// Expose the focus method
 defineExpose({
   focus: () => editorInstance?.focus()
 });
@@ -218,8 +198,8 @@ defineExpose({
 <style scoped>
 .monaco-editor-container {
   width: 100%;
-  height: 100%; /* Ensure the container has height */
-  min-height: 300px; /* Example minimum height */
-  text-align: left; /* Ensure editor content aligns left */
+  height: 100%; 
+  min-height: 300px;
+  text-align: left; 
 }
 </style>