shalu-agent-workflow/apps/web/src/components/SetterCommon/Code/CodeEditor.vue

<template>
    <div class="space-y-4">
<!--			<div class="flex items-center justify-between text-gray-800">-->
<!--				<span class="w-[60px] text-sm">语法</span>-->
<!--				<ElSelect v-model="selectedLanguageVal" @change="changeLanguage">-->
<!--					<el-option v-for="li in language" :key="li" :value="li">{{li}}</el-option>-->
<!--				</ElSelect>-->
<!--			</div>-->
			<div ref="editorContainer" style="height: 240px;"></div>
    </div>
</template>

<script setup lang="ts">

import { ref, onMounted, onUnmounted } from 'vue'
import * as monaco from 'monaco-editor'
// const language = ref(['javascript','python']);
// let selectedLanguageVal = ref('javascript')

const editorContainer = ref<HTMLElement | null>(null)
let editor = ref(null) as any;

onMounted(() => {
		try {
				if(!editorContainer.value){
					console.log('编辑器挂载节点没获取到')
					return
				}
				editor.value = monaco.editor.create(editorContainer.value, {
					value: [
						'function x() {',
						'    console.log("Hello world!");',
						'}'
					].join('\n'),
					language: 'javascript',
					theme: 'vs-dark',
					automaticLayout: true,
					fixedOverflowWidgets: true,
				});
				// 防止冒泡
				editor.value.onKeyDown((e:Event) => {
					e.stopPropagation();
				});

		}catch (err){
				console.error("Monaco 创建失败:", err);
		}

});

onUnmounted(() => {
	if (editor.value) {
		editor.dispose();
	}
});

// // 动态设置模型语言
// const changeLanguage = ()=>{
// 		console.log('changeLanguage', selectedLanguageVal.value,editor.value );
// 		if(editor.value){
// 			const model = editor.value.getModel()
// 			if (model) {
// 				monaco.editor.setModelLanguage(model, selectedLanguageVal.value)
// 			}
// 		}
// }


</script>