Monaco Editor 自适应解决方案

1. 使用 automaticLayout 选项

在你的代码中已经启用了 automaticLayout: true，这是 Monaco Editor 自带的自动布局功能，它会在窗口大小变化时自动调整编辑器尺寸。

2. 处理容器尺寸变化

确保编辑器容器能够响应式变化：

<template>
  <div class="editor-wrapper">
    <div
      class="editor-container"
      ref="editRef"
    ></div>
  </div>
</template>

<style scoped>
.editor-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
}

.editor-container {
  width: 100%;
  height: 100%;
}
</style>

3. 添加 ResizeObserver 监听

在 Vue 组件中添加对容器尺寸变化的监听：

import { onMounted, onUnmounted } from 'vue';

// 在 setup 中
let resizeObserver = null;

onMounted(() => {
  initEditor();
  
  // 添加 ResizeObserver 监听
  resizeObserver = new ResizeObserver(() => {
    if (monacoEditor) {
      monacoEditor.layout();
    }
  });
  
  if (editRef.value) {
    resizeObserver.observe(editRef.value);
  }
});

onUnmounted(() => {
  if (resizeObserver) {
    resizeObserver.disconnect();
  }
  // 其他清理代码...
});

4. 处理父容器尺寸变化

如果编辑器放在一个可能改变尺寸的父容器中（如折叠面板、标签页等），你需要确保父容器尺寸变化时也触发编辑器重新布局：

<template>
  <div class="editor-wrapper">
    <div
      class="editor-container"
      ref="editRef"
      :style="{ width: '100%', height: `${height}px` }"
    ></div>
  </div>
</template>
// 可以添加一个 watch 来监听父容器尺寸变化
watch(
  () => props.height, // 或其他可能影响尺寸的 prop
  () => {
    if (monacoEditor) {
      setTimeout(() => {
        monacoEditor.layout();
      }, 0);
    }
  }
);