feat(script): Add AI code completion with monacopilot integration

SonyLeo · SonyLeo · commit dbee79b3610f · 2026-01-13T05:24:35.000-08:00
diff --git a/packages/plugins/script/package.json b/packages/plugins/script/package.json
@@ -27,7 +27,8 @@
   "dependencies": {
     "@opentiny/tiny-engine-common": "workspace:*",
     "@opentiny/tiny-engine-meta-register": "workspace:*",
-    "@opentiny/tiny-engine-utils": "workspace:*"
+    "@opentiny/tiny-engine-utils": "workspace:*",
+    "monacopilot": "^1.2.12"
   },
   "devDependencies": {
     "@opentiny/tiny-engine-vite-plugin-meta-comments": "workspace:*",
diff --git a/packages/plugins/script/src/Main.vue b/packages/plugins/script/src/Main.vue
@@ -34,11 +34,14 @@
 /* metaService: engine.plugins.pagecontroller.Main */
 import { onBeforeUnmount, reactive, provide } from 'vue'
 import { Button } from '@opentiny/vue'
-import { VueMonaco, PluginPanel } from '@opentiny/tiny-engine-common'
-import { useHelp, useLayout } from '@opentiny/tiny-engine-meta-register'
+import { registerCompletion } from 'monacopilot'
+import { VueMonaco, PluginPanel } from '@opentiny/tiny-engine-common/component'
+import { useHelp, useLayout, useResource, useCanvas } from '@opentiny/tiny-engine-meta-register'
 import { initCompletion } from '@opentiny/tiny-engine-common/js/completion'
 import { initLinter } from '@opentiny/tiny-engine-common/js/linter'
 import useMethod, { saveMethod, highlightMethod, getMethodNameList, getMethods } from './js/method'
+import { requestManager } from './js/requestManager'
+import { shouldTriggerCompletion } from './js/completionTrigger'
 
 export const api = {
   saveMethod,
@@ -59,7 +62,7 @@ export default {
     }
   },
   emits: ['close'],
-  setup(props, { emit }) {
+  setup(_props, { emit }) {
     const docsUrl = useHelp().getDocsUrl('script')
     const docsContent = '同一页面/区块的添加事件会统一保存到对应的页面JS中。'
     const { state, monaco, change, close, saveMethods } = useMethod({ emit })
@@ -101,24 +104,112 @@ export default {
       wordWrapStrategy: 'advanced'
     }
 
-    const editorDidMount = (editor) => {
-      if (!monaco.value) {
-        return
-      }
+    const editorDidMount = (editor: any) => {
+      const monacoRef = monaco as any
+      if (!monacoRef.value) return
+
+      // 保留原有的 Lowcode API 提示
+      state.completionProvider = initCompletion(
+        monacoRef.value.getMonaco(),
+        monacoRef.value.getEditor()?.getModel()
+      ) as any
+
+      // 保留原有的 ESLint
+      state.linterWorker = initLinter(editor, monacoRef.value.getMonaco(), state) as any
+
+      // 🆕 新增: 注册 AI 补全
+      try {
+        const monacoInstance = monacoRef.value.getMonaco()
+        const editorInstance = monacoRef.value.getEditor()
+
+        // 构建低代码上下文
+        const getLowcodeContext = () => {
+          const { dataSource = [], utils = [], globalState = [] } = useResource().appSchemaState || {}
+          const { state: pageState = {}, methods = {} } = useCanvas().getPageSchema() || {}
+          const currentSchema = useCanvas().getCurrentSchema()
+
+          return {
+            dataSource,
+            utils,
+            globalState,
+            state: pageState,
+            methods,
+            currentSchema
+          }
+        }
+
+        // 配置请求管理器
+        requestManager.setEndpoint('http://localhost:3000/code-completion')
+        requestManager.setDebounceDelay(300) // 设置防抖延迟为 300ms
+        requestManager.setDebounceEnabled(true)
 
-      // Lowcode API 提示
-      state.completionProvider = initCompletion(monaco.value.getMonaco(), monaco.value.getEditor()?.getModel())
+        // 创建增强的请求处理器
+        const baseRequestHandler = requestManager.createRequestHandler()
 
-      // 初始化 ESLint worker
-      state.linterWorker = initLinter(editor, monaco.value.getMonaco(), state)
+        registerCompletion(monacoInstance, editorInstance, {
+          language: 'javascript',
+          endpoint: 'http://localhost:3000/code-completion',
+          filename: 'page.js',
+          trigger: 'onTyping',
+          maxContextLines: 50,
+          enableCaching: true,
+          allowFollowUpCompletions: true,
+
+          // 🎯 智能触发判断（在请求前执行，避免不必要的请求）
+          triggerIf: (params) => {
+            const model = editorInstance.getModel()
+            const position = editorInstance.getPosition()
+
+            if (!model || !position) return false
+
+            return shouldTriggerCompletion({
+              text: model.getValue(),
+              position: {
+                lineNumber: position.lineNumber,
+                column: position.column
+              },
+              triggerType: params.triggerType || 'onTyping'
+            })
+          },
+
+          // 🚀 请求处理器：防抖 + 请求取消 + 低代码元数据
+          requestHandler: async (params) => {
+            try {
+              // 添加低代码元数据
+              const lowcodeMetadata = getLowcodeContext()
+              const enhancedParams = {
+                body: {
+                  completionMetadata: {
+                    ...params.body.completionMetadata,
+                    lowcodeMetadata
+                  }
+                }
+              }
+
+              // 使用请求管理器发送请求（带防抖和取消功能）
+              return await baseRequestHandler(enhancedParams)
+            } catch (error: any) {
+              return {
+                completion: null,
+                error: error.message
+              }
+            }
+          }
+        })
+      } catch (error) {
+        // eslint-disable-next-line no-console
+        console.error('❌ AI 补全注册失败:', error)
+      }
     }
 
     onBeforeUnmount(() => {
-      state.completionProvider?.forEach((provider) => {
-        provider.dispose()
+      ;(state.completionProvider as any)?.forEach?.((provider: any) => {
+        provider?.dispose?.()
       })
       // 终止 ESLint worker
-      state.linterWorker?.terminate?.()
+      ;(state.linterWorker as any)?.terminate?.()
+      // 清理请求管理器
+      requestManager.reset()
     })
 
     return {
diff --git a/packages/plugins/script/src/js/completionTrigger.js b/packages/plugins/script/src/js/completionTrigger.js
@@ -0,0 +1,132 @@
+/**
+ * 智能补全触发条件判断（JS/TS 专用）
+ */
+
+/**
+ * 检测是否在注释中
+ */
+function isInComment(beforeCursor, fullText) {
+  const trimmed = beforeCursor.trim()
+
+  // 单行注释
+  if (trimmed.startsWith('//') || trimmed.startsWith('*')) {
+    return true
+  }
+
+  // 块注释
+  const lastBlockStart = fullText.lastIndexOf('/*', fullText.indexOf(beforeCursor))
+  const lastBlockEnd = fullText.lastIndexOf('*/', fullText.indexOf(beforeCursor))
+  if (lastBlockStart > lastBlockEnd) {
+    return true
+  }
+
+  return false
+}
+
+/**
+ * 检测是否在字符串中
+ */
+function isInString(beforeCursor) {
+  const singleQuotes = (beforeCursor.match(/'/g) || []).length
+  const doubleQuotes = (beforeCursor.match(/"/g) || []).length
+  return singleQuotes % 2 === 1 || doubleQuotes % 2 === 1
+}
+
+/**
+ * 检测是否在模板字符串中
+ */
+function isInTemplateString(beforeCursor) {
+  const backticks = (beforeCursor.match(/`/g) || []).length
+  return backticks % 2 === 1
+}
+
+/**
+ * 检测光标是否在语句结束符后（分号后）
+ */
+function isAfterStatementEnd(beforeCursor) {
+  // 检查是否以分号结尾（忽略尾部空格）
+  const trimmedEnd = beforeCursor.trimEnd()
+
+  if (trimmedEnd.endsWith(';')) {
+    // 排除 for 循环中的分号：for (let i = 0; i < 10; i++)
+    // 检查是否在括号内
+    const openParens = (beforeCursor.match(/\(/g) || []).length
+    const closeParens = (beforeCursor.match(/\)/g) || []).length
+
+    // 如果括号未闭合，说明可能在 for 循环中
+    if (openParens > closeParens) {
+      return false
+    }
+
+    return true
+  }
+
+  return false
+}
+
+/**
+ * 检测光标是否在代码块结束符后（右花括号后）
+ */
+function isAfterBlockEnd(beforeCursor) {
+  const trimmedEnd = beforeCursor.trimEnd()
+
+  // 检查是否以右花括号结尾
+  if (trimmedEnd.endsWith('}')) {
+    // 检查后面是否只有空格（没有其他字符）
+    const afterBrace = beforeCursor.substring(trimmedEnd.length)
+    return afterBrace.trim().length === 0
+  }
+
+  return false
+}
+
+/**
+ * 判断是否应该触发代码补全
+ * @param {Object} params - 触发参数
+ * @param {string} params.text - 完整文本
+ * @param {Object} params.position - 光标位置
+ * @param {number} params.position.lineNumber - 行号
+ * @param {number} params.position.column - 列号
+ * @param {string} params.triggerType - 触发类型
+ * @returns {boolean} 是否触发补全
+ */
+export function shouldTriggerCompletion(params) {
+  const { text, position } = params
+  const lines = text.split('\n')
+  const currentLine = lines[position.lineNumber - 1] || ''
+  const beforeCursor = currentLine.substring(0, position.column - 1)
+  const trimmedLine = beforeCursor.trim()
+
+  // 1. 避免在注释中触发
+  if (isInComment(beforeCursor, text)) {
+    return false
+  }
+
+  // 2. 避免在普通字符串中触发（但允许模板字符串）
+  if (isInString(beforeCursor) && !isInTemplateString(beforeCursor)) {
+    return false
+  }
+
+  // 3. 代码太短不触发（降低阈值）
+  if (text.trim().length < 5) {
+    return false
+  }
+
+  // 4. 完全空行不触发
+  if (trimmedLine.length === 0) {
+    return false
+  }
+
+  // 5. 分号后不触发（语句已结束）
+  if (isAfterStatementEnd(beforeCursor)) {
+    return false
+  }
+
+  // 6. 右花括号后不触发（块已结束）
+  if (isAfterBlockEnd(beforeCursor)) {
+    return false
+  }
+
+  // 其他情况都允许触发
+  return true
+}
diff --git a/packages/plugins/script/src/js/requestManager.js b/packages/plugins/script/src/js/requestManager.js
