鸭梨公共文档

主题

Copilot 代码编辑器 ​

HTML 代码 ​

html
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Monaco Editor Copilot Demo</title>
  <style>
    html,
    body,
    #container {
      width: 100%;
      height: 100%;
      margin: 0;
      overflow: hidden;
    }
  </style>
  <!-- 引入 Monaco Editor Loader -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.45.0/min/vs/loader.min.js"></script>
</head>

<body>

  <div id="container"></div>

  <script>
    require.config({ paths: { 'vs': 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.45.0/min/vs' } });

    require(['vs/editor/editor.main'], function () {

      // 1. 注册 Inline Completions Provider (必须在创建编辑器实例之前或之后注册均可)
      monaco.languages.registerInlineCompletionsProvider('javascript', {

        provideInlineCompletions: async function (model, position, context, token) {
          // 获取当前光标前的文本作为 Prompt
          const textUntilPosition = model.getValueInRange({
            startLineNumber: 1,
            startColumn: 1,
            endLineNumber: position.lineNumber,
            endColumn: position.column
          });

          // === 模拟调用 AI API (这里是你要替换成真实后端请求的地方) ===
          // 实际项目中，这里应使用 fetch 调用 OpenAI/自定义 LLM 接口
          // 注意：为了性能，建议加上防抖 (Debounce) 逻辑

          console.log("触发补全，上下文:", textUntilPosition);

          // 模拟网络延迟
          await new Promise(r => setTimeout(r, 300));

          // 检查是否被取消（用户继续输入了）
          if (token.isCancellationRequested) {
            return { items: [] };
          }

          // 简单的模拟逻辑：如果输入 "func"，建议一个函数
          let suggestion = "";
          if (textUntilPosition.trim().endsWith("func")) {
            suggestion = "tion add(a, b) {\n    return a + b;\n}";
          } else if (textUntilPosition.trim().endsWith("console.")) {
            suggestion = "log('Hello Copilot');";
          } else {
            // 默认不显示
            return { items: [] };
          }
          // =======================================================

          return {
            items: [{
              insertText: suggestion,
              // 建议显示的范围通常是光标位置
              range: {
                startLineNumber: position.lineNumber,
                startColumn: position.column,
                endLineNumber: position.lineNumber,
                endColumn: position.column
              }
            }]
          };
        },

        freeInlineCompletions(completions) {
          // 释放资源（如果需要）
        }
      });

      // 2. 创建编辑器实例
      const editor = monaco.editor.create(document.getElementById('container'), {
        value: '// 试着输入 "func" 或 "console." 等待一下...\n',
        language: 'javascript',
        theme: 'vs-dark',
        fontSize: 14,
        // 开启 inlineSuggest 功能
        inlineSuggest: {
          enabled: true,
          showToolbar: 'always' // 鼠标悬停时显示操作栏
        }
      });
    });
  </script>
</body>

</html>