From fd5dd9e96db8eaa189668f51295e22ae84e07368 Mon Sep 17 00:00:00 2001
From: rhlin <r.h.lin@163.com>
Date: Mon, 25 Dec 2023 10:09:24 -0800
Subject: [PATCH 1/2] =?UTF-8?q?feat(monaco-editor-completion):=20=E9=9A=94?=
 =?UTF-8?q?=E7=A6=BB=E4=B8=8D=E5=90=8C=E4=BB=A3=E7=A0=81=E7=BC=96=E8=BE=91?=
 =?UTF-8?q?=E5=99=A8=E8=87=AA=E5=8A=A8=E8=A1=A5=E5=85=A8=E7=9A=84=E6=B3=A8?=
 =?UTF-8?q?=E5=86=8C=EF=BC=8C=E5=8F=98=E9=87=8F=E5=A3=B0=E6=98=8E=E5=A2=9E?=
 =?UTF-8?q?=E5=8A=A0=E8=87=AA=E5=8A=A8=E8=A1=A5=E5=85=A8=E5=8E=BB=E6=8E=89?=
 =?UTF-8?q?js=E5=87=BD=E6=95=B0=E5=92=8Cstate=E5=8F=98=E9=87=8F=E7=9A=84?=
 =?UTF-8?q?=E8=87=AA=E5=8A=A8=E8=A1=A5=E5=85=A8=E6=8F=90=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/common/component/LifeCycles.vue     |  8 ++++--
 packages/common/js/completion.js             | 14 ++++++++---
 packages/plugins/data/src/CreateVariable.vue | 26 +++++++++++++++++---
 packages/plugins/script/src/Main.vue         |  5 +++-
 packages/plugins/script/src/js/method.js     |  3 ++-
 5 files changed, 45 insertions(+), 11 deletions(-)

diff --git a/packages/common/component/LifeCycles.vue b/packages/common/component/LifeCycles.vue
index 967efa02bc..7965f950fe 100644
--- a/packages/common/component/LifeCycles.vue
+++ b/packages/common/component/LifeCycles.vue
@@ -125,7 +125,8 @@ export default {
       bindLifeCycles: {},
       editorValue: '{}',
       hasError: false,
-      linterWorker: null
+      linterWorker: null,
+      completionProvider: null
     })
 
     watchEffect(() => {
@@ -210,7 +211,7 @@ export default {
         return
       }
       // Lowcode API 提示
-      initCompletion(editorRef.value.getMonaco())
+      state.completionProvider = initCompletion(editorRef.value.getMonaco(), editorRef.value.getEditor()?.getModel())
 
       // 初始化 ESLint worker
       state.linterWorker = initLinter(editor, editorRef.value.getMonaco(), state)
@@ -226,6 +227,9 @@ export default {
     }
 
     onBeforeUnmount(() => {
+      state.completionProvider.forEach((provider) => {
+        provider.dispose()
+      })
       // 终止 ESLint worker
       state.linterWorker?.terminate?.()
     })
diff --git a/packages/common/js/completion.js b/packages/common/js/completion.js
index c51858cacc..3705232a9b 100644
--- a/packages/common/js/completion.js
+++ b/packages/common/js/completion.js
@@ -157,7 +157,7 @@ const getWords = (model, position) => {
     const lastWord = model.getWordUntilPosition(lastPosition).word
       ? model.getWordUntilPosition(lastPosition)
       : getCurrentChar(model, lastPosition)
-    if (!/[\w\.]/.test(lastWord.word)) break
+    if (!/[\w.]/.test(lastWord.word)) break
     words.push(lastWord)
     lastPosition.column = lastWord.startColumn
   }
@@ -172,9 +172,14 @@ const getRange = (position, words) => ({
   endColumn: words[words.length - 1].endColumn
 })
 
-export const initCompletion = (monacoInstance) => {
+export const initCompletion = (monacoInstance, editorModel, conditionFn) => {
   const completionItemProvider = {
     provideCompletionItems(model, position, _context, _token) {
+      if (editorModel && model.id !== editorModel.id) {
+        return {
+          suggestions: []
+        }
+      }
       const words = getWords(model, position)
       const wordContent = words.map((item) => item.word).join('')
       const range = getRange(position, words)
@@ -185,9 +190,10 @@ export const initCompletion = (monacoInstance) => {
       const snippetSuggestions = getSnippetsSuggestions(monacoInstance, range, wordContent)
       // 用户变量数据提示 e.g. this.dataSourceMap.xxx.load()
       const userSuggestions = getUserSuggestions(monacoInstance, range, wordContent)
-
       return {
-        suggestions: [...apiSuggestions, ...snippetSuggestions, ...userSuggestions]
+        suggestions: [...apiSuggestions, ...snippetSuggestions, ...userSuggestions].filter((item) =>
+          conditionFn ? conditionFn(item) : true
+        )
       }
     },
     triggerCharacters: ['.']
diff --git a/packages/plugins/data/src/CreateVariable.vue b/packages/plugins/data/src/CreateVariable.vue
index c91597f473..5d74c757bf 100644
--- a/packages/plugins/data/src/CreateVariable.vue
+++ b/packages/plugins/data/src/CreateVariable.vue
@@ -112,10 +112,11 @@
 </template>
 
 <script>
-import { reactive, ref, computed, watch } from 'vue'
+import { reactive, ref, computed, watch, onBeforeUnmount } from 'vue'
 import { Popover, Form, FormItem, Input, ButtonGroup } from '@opentiny/vue'
 import { MonacoEditor } from '@opentiny/tiny-engine-common'
 import { verifyJsVarName } from '@opentiny/tiny-engine-common/js/verification'
+import { initCompletion } from '@opentiny/tiny-engine-common/js/completion'
 import * as Monaco from 'monaco-editor'
 import { validateMonacoEditorData } from './js/common'
 import EditorI18nTool from './EditorI18nTool.vue'
@@ -188,8 +189,14 @@ export default {
         lineNumbers: true,
         // 禁用滚动条边边一直显示的边框
         overviewRulerBorder: false,
-        renderLineHighlightOnlyWhenFocus: true
-      }
+        renderLineHighlightOnlyWhenFocus: true,
+        quickSuggestions: false, // 快速提示禁用，避免调用其他模块提供的函数，因为变量是最先初始化
+        suggest: {
+          showFields: false,
+          showFunctions: false
+        }
+      },
+      completionProvider: null
     })
 
     const changeLanguage = (language) => {
@@ -314,8 +321,21 @@ export default {
         noSyntaxValidation: true,
         noSemanticValidation: true
       })
+      if (variableEditor.value) {
+        state.completionProvider = initCompletion(
+          variableEditor.value.editor.getMonaco(),
+          variableEditor.value.editor.getEditor()?.getModel(),
+          (item) => item.label !== 'this.state' && !item.label.startsWith('this.state.')
+        )
+      }
     }
 
+    onBeforeUnmount(() => {
+      state.completionProvider?.forEach((provider) => {
+        provider.dispose()
+      })
+    })
+
     const insertContent = (insertText = '') => {
       const monacoEditor = getEditor().editor.getEditor()
       const selection = monacoEditor.getSelection()
diff --git a/packages/plugins/script/src/Main.vue b/packages/plugins/script/src/Main.vue
index f5a282dc03..99e99b5c6e 100644
--- a/packages/plugins/script/src/Main.vue
+++ b/packages/plugins/script/src/Main.vue
@@ -72,13 +72,16 @@ export default {
       }
 
       // Lowcode API 提示
-      initCompletion(monaco.value.getMonaco())
+      state.completionProvider = initCompletion(monaco.value.getMonaco(), monaco.value.getEditor()?.getModel())
 
       // 初始化 ESLint worker
       state.linterWorker = initLinter(editor, monaco.value.getMonaco(), state)
     }
 
     onBeforeUnmount(() => {
+      state.completionProvider?.forEach((provider) => {
+        provider.dispose()
+      })
       // 终止 ESLint worker
       state.linterWorker?.terminate?.()
     })
diff --git a/packages/plugins/script/src/js/method.js b/packages/plugins/script/src/js/method.js
index c9bafaa2bf..6c9d6a9758 100644
--- a/packages/plugins/script/src/js/method.js
+++ b/packages/plugins/script/src/js/method.js
@@ -26,7 +26,8 @@ const state = reactive({
   script: '',
   isChanged: false,
   hasError: false,
-  editorSelection: null
+  editorSelection: null,
+  completionProvider: null
 })
 
 const monaco = ref(null)

From 5d685b3606cd2cffa703717be7f4de326f917587 Mon Sep 17 00:00:00 2001
From: rhlin <r.h.lin@163.com>
Date: Mon, 25 Dec 2023 10:52:07 -0800
Subject: [PATCH 2/2] =?UTF-8?q?feat(state):=20=E7=8A=B6=E6=80=81=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=E4=BD=BF=E7=94=A8JS=E8=A1=A8=E8=BE=BE=E5=BC=8F?=
 =?UTF-8?q?=E5=88=9B=E5=BB=BA=E5=8F=98=E9=87=8F=E7=9A=84=E6=97=B6=E5=80=99?=
 =?UTF-8?q?=E6=8F=90=E7=A4=BA=E4=B8=8D=E5=8F=AF=E4=BD=BF=E7=94=A8=E5=85=B6?=
 =?UTF-8?q?=E4=BB=96=E5=8F=98=E9=87=8F=E4=BB=A5=E5=8F=8AJS=E5=87=BD?=
 =?UTF-8?q?=E6=95=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/plugins/data/src/CreateVariable.vue | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/packages/plugins/data/src/CreateVariable.vue b/packages/plugins/data/src/CreateVariable.vue
index 5d74c757bf..b04b59cf24 100644
--- a/packages/plugins/data/src/CreateVariable.vue
+++ b/packages/plugins/data/src/CreateVariable.vue
@@ -46,6 +46,11 @@
                   <li class="ml20">示例2： function fnName() {}</li>
                   <li class="ml20">示例3： { getValue: () => {} }</li>
                 </ul>
+                <div class="create-content-foot">
+                  <div class="create-content-tip">
+                    注意：使用JS表达式定义state变量的时候无法调用state其他变量定义，<br />另由于JS函数定义在变量之后，也无法调用JS面板定义的函数
+                  </div>
+                </div>
               </div>
             </div>
             <template #reference>
@@ -465,6 +470,11 @@ export default {
       margin-top: 8px;
     }
   }
+  .create-content-foot {
+    margin-top: 4px;
+    font-size: 14px;
+    line-height: 22px;
+  }
 }
 
 .create-content-description {