Merge branch 'opentiny:develop' into develop

packages/canvas/src/components/builtin/builtin.json

@@ -514,8 +514,7 @@
               "schema": {
                 "componentName": "Img",
                 "props": {
-                  "src": "img/webNova.jpg",
-                  "style": "width: 200px; height: 200px"
+                  "src": "https://tinyengine-assets.obs.cn-north-4.myhuaweicloud.com/files/designer-default-icon.jpg"
                 }
               }
             }

packages/canvas/src/components/container/CanvasResize.vue

@@ -30,13 +30,6 @@ export default {
     const mouseDown = ref(false)
     const resizeDom = ref(null)
 
-    const onMouseMove = (event) => {
-      if (mouseDown.value) {
-        event.preventDefault()
-        calculateSize(event)
-      }
-    }
-
     const calculateSize = ({ movementX }) => {
       const dimension = useLayout().getDimension()
       const { maxWidth, minWidth, width } = dimension
@@ -48,13 +41,10 @@ export default {
       })
     }
 
-    const onMouseDown = () => {
-      const iframe = canvasState.iframe
-
-      if (iframe) {
-        iframe.style['pointer-events'] = 'none'
-        bindEvents()
-        mouseDown.value = true
+    const onMouseMove = (event) => {
+      if (mouseDown.value) {
+        event.preventDefault()
+        calculateSize(event)
       }
     }
 
@@ -64,7 +54,9 @@ export default {
       if (iframe) {
         iframe.style['pointer-events'] = 'auto'
         mouseDown.value = false
-        unbindEvents()
+
+        document.removeEventListener('mousemove', onMouseMove, { passive: false })
+        document.removeEventListener('mouseup', onMouseUp)
       }
     }
 
@@ -73,9 +65,14 @@ export default {
       document.addEventListener('mouseup', onMouseUp)
     }
 
-    const unbindEvents = () => {
-      document.removeEventListener('mousemove', onMouseMove, { passive: false })
-      document.removeEventListener('mouseup', onMouseUp)
+    const onMouseDown = () => {
+      const iframe = canvasState.iframe
+
+      if (iframe) {
+        iframe.style['pointer-events'] = 'none'
+        bindEvents()
+        mouseDown.value = true
+      }
     }
 
     const setScale = () => {
@@ -95,7 +92,13 @@ export default {
 
     watch(
       () => useLayout().getPluginState().render,
-      (value) => !value && setScale(),
+      (value) => {
+        const currentFixed = useLayout().getPluginState().fixedPanels.includes(value)
+
+        if (!value || currentFixed) {
+          setScale()
+        }
+      },
       { flush: 'post' }
     )
 

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?.()
     })

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: ['.']

packages/design-core/canvas.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link href="https://npm.onmicrosoft.cn/@opentiny/[email protected]/index.css" rel="stylesheet" />
+    <link href="%VITE_CDN_DOMAIN%/@opentiny/[email protected]/index.css" rel="stylesheet" />
     <style type="text/css">
       .loading-warp {
         display: flex;

packages/design-core/src/preview/src/preview/srcFiles.js

@@ -1,14 +1,14 @@
 /**
-* Copyright (c) 2023 - present TinyEngine Authors.
-* Copyright (c) 2023 - present Huawei Cloud Computing Technologies Co., Ltd.
-*
-* Use of this source code is governed by an MIT-style license.
-*
-* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
-* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
-* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
-*
-*/
+ * Copyright (c) 2023 - present TinyEngine Authors.
+ * Copyright (c) 2023 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
 
 import appVue from './srcFiles/App.vue?raw'
 import injectGlobalJS from './srcFiles/injectGlobal.js?raw'
@@ -29,7 +29,7 @@ const srcFiles = {}
 srcFiles['App.vue'] = appVue
 srcFiles['Main.vue'] = mainVue
 srcFiles['constant.js'] = constantJS
-srcFiles['app.js'] = appJS
+srcFiles['app.js'] = appJS.replace(/VITE_CDN_DOMAIN/g, import.meta.env.VITE_CDN_DOMAIN)
 srcFiles['injectGlobal.js'] = injectGlobalJS
 srcFiles['lowcode.js'] = lowcodeJS
 srcFiles['dataSourceMap.js'] = dataSourceMapJS

packages/design-core/src/preview/src/preview/srcFiles/app.js

@@ -16,5 +16,5 @@ function addCss(href) {
   link.setAttribute('href', href)
   document.head.appendChild(link)
 }
-addCss('https://npm.onmicrosoft.cn/@opentiny/[email protected]/index.css')
-addCss('https://npm.onmicrosoft.cn/@opentiny/[email protected]/index.css')
+addCss('VITE_CDN_DOMAIN/@opentiny/[email protected]/index.css')
+addCss('VITE_CDN_DOMAIN/@opentiny/[email protected]/index.css')

packages/plugins/bridge/src/BridgeSetting.vue

@@ -205,6 +205,7 @@ export default {
       state.name = state.resource.name
       state.content = state.resource.content || {}
       state.value = state.resource?.content?.value || ''
+      state.type = getCategory()
     })
 
     watch(

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>
@@ -112,10 +117,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 +194,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 +326,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()
@@ -445,6 +470,11 @@ export default {
       margin-top: 8px;
     }
   }
+  .create-content-foot {
+    margin-top: 4px;
+    font-size: 14px;
+    line-height: 22px;
+  }
 }
 
 .create-content-description {

packages/plugins/script/src/Main.vue

@@ -76,13 +76,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?.()
     })

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)

scripts/connection.mjs

@@ -112,6 +112,10 @@ class MysqlConnection {
         return
       }
 
+      if (value === void 0) {
+        return
+      }
+
       if (typeof value === 'string') {
         const formatValue = this.formatSingleQuoteValue(value)
 
@@ -160,8 +164,37 @@ class MysqlConnection {
    * @returns 新增组件的sql语句
    */
   insertComponent(component) {
+    const defaultNpm = {
+      package: '',
+      exportName: '',
+      version: '1.0.0',
+      destructuring: true
+    }
+    const defaultConfigure = {
+      loop: true,
+      condition: true,
+      styles: true,
+      isContainer: true,
+      isModal: false,
+      nestingRule: {
+        childWhiteList: '',
+        parentWhiteList: '',
+        descendantBlacklist: '',
+        ancestorWhitelist: ''
+      },
+      isNullNode: false,
+      isLayout: false,
+      rootSelector: '',
+      shortcuts: {
+        properties: ['value', 'disabled']
+      },
+      contextMenu: {
+        actions: ['create symbol'],
+        disable: ['copy', 'remove']
+      }
+    }
     const {
-      version,
+      version = '1.0.0',
       name,
       component: componentName,
       icon,
@@ -170,14 +203,14 @@ class MysqlConnection {
       screenshot,
       tags,
       keywords,
-      devMode,
-      npm,
+      devMode = 'proCode',
+      npm = defaultNpm,
       group,
-      category,
+      category = 'general',
       priority = 1,
-      snippets,
-      schema,
-      configure,
+      snippets = [{}],
+      schema = {},
+      configure = defaultConfigure,
       public: publicRight = 0,
       framework = 'vue',
       isOfficial = 0,