|  | @@ -2,6 +2,13 @@
 | 
	
		
			
				|  |  |  import { ref, onMounted, onBeforeUnmount, watch, nextTick } from "vue";
 | 
	
		
			
				|  |  |  import loader from "@monaco-editor/loader";
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  | +// 添加 config 配置,必须在 loader.init() 之前
 | 
	
		
			
				|  |  | +loader.config({
 | 
	
		
			
				|  |  | +  paths: {
 | 
	
		
			
				|  |  | +    vs: "/monaco-editor/vs", // 对应 node_modules/monaco-editor/min/vs 被映射的URL路径
 | 
	
		
			
				|  |  | +  },
 | 
	
		
			
				|  |  | +});
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  |  const props = defineProps({
 | 
	
		
			
				|  |  |    value: String,
 | 
	
		
			
				|  |  |    language: {
 | 
	
	
		
			
				|  | @@ -15,35 +22,18 @@ const props = defineProps({
 | 
	
		
			
				|  |  |  });
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |  const emit = defineEmits(["update:value"]);
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  |  const editorContainer = ref(null);
 | 
	
		
			
				|  |  |  let editorInstance = null;
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  | -// 调试:打印容器尺寸
 | 
	
		
			
				|  |  | -const logContainerSize = () => {
 | 
	
		
			
				|  |  | -  if (!editorContainer.value) {
 | 
	
		
			
				|  |  | -    // console.log('Editor container not yet mounted');
 | 
	
		
			
				|  |  | -    return;
 | 
	
		
			
				|  |  | -  }
 | 
	
		
			
				|  |  | -  const rect = editorContainer.value.getBoundingClientRect();
 | 
	
		
			
				|  |  | -  // console.log('Container size:', rect.width, 'x', rect.height);
 | 
	
		
			
				|  |  | -};
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  |  // 初始化 Monaco 编辑器
 | 
	
		
			
				|  |  |  const initEditor = async () => {
 | 
	
		
			
				|  |  |    const monaco = await loader.init();
 | 
	
		
			
				|  |  | -  
 | 
	
		
			
				|  |  | -  // 等待容器渲染完成
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  |    await nextTick();
 | 
	
		
			
				|  |  | -  
 | 
	
		
			
				|  |  | -  // 添加额外延迟确保布局完成(仅开发时需要)
 | 
	
		
			
				|  |  | -  if (process.env.NODE_ENV === 'development') {
 | 
	
		
			
				|  |  | -    await new Promise(resolve => setTimeout(resolve, 50));
 | 
	
		
			
				|  |  | -  }
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  | -  // 再次检查尺寸
 | 
	
		
			
				|  |  | -  const rect = editorContainer.value.getBoundingClientRect();
 | 
	
		
			
				|  |  | -  // console.log('Final container size:', rect.width, 'x', rect.height);
 | 
	
		
			
				|  |  | +  if (process.env.NODE_ENV === "development") {
 | 
	
		
			
				|  |  | +    await new Promise((resolve) => setTimeout(resolve, 50));
 | 
	
		
			
				|  |  | +  }
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |    editorInstance = monaco.editor.create(editorContainer.value, {
 | 
	
		
			
				|  |  |      value: props.value || "",
 | 
	
	
		
			
				|  | @@ -53,38 +43,32 @@ const initEditor = async () => {
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |    editorInstance.onDidChangeModelContent(() => {
 | 
	
		
			
				|  |  |      const value = editorInstance.getValue();
 | 
	
		
			
				|  |  | -    emit("update:value", value);  // 触发v-model更新
 | 
	
		
			
				|  |  | +    emit("update:value", value);
 | 
	
		
			
				|  |  |    });
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  | -  // 强制立即布局
 | 
	
		
			
				|  |  |    editorInstance.layout();
 | 
	
		
			
				|  |  |  };
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  | -// 处理窗口大小变化
 | 
	
		
			
				|  |  | -const handleResize = () => {
 | 
	
		
			
				|  |  | -  if (editorInstance) {
 | 
	
		
			
				|  |  | -    // console.log('Window resized, updating editor layout');
 | 
	
		
			
				|  |  | -    editorInstance.layout();
 | 
	
		
			
				|  |  | -  }
 | 
	
		
			
				|  |  | -};
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  |  onMounted(() => {
 | 
	
		
			
				|  |  | -  // console.log('Component mounted, initializing editor...');
 | 
	
		
			
				|  |  |    initEditor();
 | 
	
		
			
				|  |  |  });
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |  onBeforeUnmount(() => {
 | 
	
		
			
				|  |  | -  // console.log('Component unmounting, disposing editor...');
 | 
	
		
			
				|  |  | -  window.removeEventListener('resize', handleResize);
 | 
	
		
			
				|  |  | +  window.removeEventListener("resize", handleResize);
 | 
	
		
			
				|  |  |    editorInstance?.dispose();
 | 
	
		
			
				|  |  |  });
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  | +const handleResize = () => {
 | 
	
		
			
				|  |  | +  if (editorInstance) {
 | 
	
		
			
				|  |  | +    editorInstance.layout();
 | 
	
		
			
				|  |  | +  }
 | 
	
		
			
				|  |  | +};
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  |  // 监听语言变化
 | 
	
		
			
				|  |  |  watch(
 | 
	
		
			
				|  |  |    () => props.language,
 | 
	
		
			
				|  |  |    (newLanguage) => {
 | 
	
		
			
				|  |  |      if (editorInstance) {
 | 
	
		
			
				|  |  | -      console.log('Language changed to:', newLanguage);
 | 
	
		
			
				|  |  |        loader.init().then((monaco) => {
 | 
	
		
			
				|  |  |          monaco.editor.setModelLanguage(editorInstance.getModel(), newLanguage);
 | 
	
		
			
				|  |  |        });
 | 
	
	
		
			
				|  | @@ -92,12 +76,11 @@ watch(
 | 
	
		
			
				|  |  |    }
 | 
	
		
			
				|  |  |  );
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  | -// 监听值变化
 | 
	
		
			
				|  |  | +// 监听 value 变化
 | 
	
		
			
				|  |  |  watch(
 | 
	
		
			
				|  |  |    () => props.value,
 | 
	
		
			
				|  |  |    (newValue) => {
 | 
	
		
			
				|  |  |      if (editorInstance && editorInstance.getValue() !== newValue) {
 | 
	
		
			
				|  |  | -      console.log('Value updated programmatically');
 | 
	
		
			
				|  |  |        editorInstance.setValue(newValue);
 | 
	
		
			
				|  |  |      }
 | 
	
		
			
				|  |  |    }
 |