fix: slot params missing double quote (#605)

* fix: slot params missing double quote

* fix: exclude nodemodule test case

.codecheck/check.yml

@@ -8,4 +8,4 @@ tool_params:
   secsolar:
     source_dir: ./
   cmetrics:
-    exclude: vite.config.js|package.json|index.js|mockServer/assets
+    exclude: vite.config.js|package.json|index.js|mockServer/assets|packages/vue-generator/test

.github/workflows/ai-code-review.yml

@@ -1,23 +0,0 @@
-name: AI Code Review
-
-permissions:
-  contents: read
-  pull-requests: write
-
-on:
-  pull_request:
-    types: [opened, reopened, synchronize]
-
-jobs:
-  review:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: anc95/ChatGPT-CodeReview@main
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
-          LANGUAGE: Chinese
-          OPENAI_API_ENDPOINT: https://api.openai.com/v1
-          MODEL: gpt-3.5-turbo
-          MAX_TOKENS: 4096
-          MAX_PATCH_LENGTH: 10000

.github/workflows/push-check.yml

@@ -24,7 +24,7 @@ jobs:
 
     - name: Get changed files
       id: get_changed_files
-      uses: tj-actions/changed-files@v40
+      uses: tj-actions/changed-files@v41
       with:
         files: |
               **.js

mockServer/src/mock/get/app-center/v1/apps/schema/918.json

@@ -1974,6 +1974,48 @@
         "destructuring": true,
         "version": "0.1.16"
       },
+      {
+        "componentName": "ElInput",
+        "package": "element-plus",
+        "exportName": "ElInput",
+        "destructuring": true,
+        "version": "2.4.2"
+      },
+      {
+        "componentName": "ElButton",
+        "package": "element-plus",
+        "exportName": "ElButton",
+        "destructuring": true,
+        "version": "2.4.2"
+      },
+      {
+        "componentName": "ElForm",
+        "package": "element-plus",
+        "exportName": "ElForm",
+        "destructuring": true,
+        "version": "2.4.2"
+      },
+      {
+        "componentName": "ElFormItem",
+        "package": "element-plus",
+        "exportName": "ElFormItem",
+        "destructuring": true,
+        "version": "2.4.2"
+      },
+      {
+        "componentName": "ElTable",
+        "package": "element-plus",
+        "exportName": "ElTable",
+        "destructuring": true,
+        "version": "2.4.2"
+      },
+      {
+        "componentName": "ElTableColumn",
+        "package": "element-plus",
+        "exportName": "ElTableColumn",
+        "destructuring": true,
+        "version": "2.4.2"
+      },
       {
         "componentName": "PortalHome",
         "main": "common/components/home",

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

@@ -117,6 +117,7 @@ import {
   IconEyeclose
 } from '@opentiny/vue-icon'
 import {
+  canvasState,
   getCurrent,
   removeNodeById,
   selectNode,
@@ -379,15 +380,14 @@ export default {
       }
     }
 
-    const getStyleValues = (selectState, siteCanvasWidth, siteCanvasHeight) => {
+    const getStyleValues = (selectState, canvasSize, labelWidth, optionWidth) => {
       const { left, top, width, height, doc } = selectState
-      const labelRect = labelRef.value.getBoundingClientRect()
-      const optionRect = optionRef.value.getBoundingClientRect()
+      const { width: canvasWidth, height: canvasHeight } = canvasSize
       // 标签宽度和工具操作条宽度之和加上间距
-      const fullRectWidth = labelRect.width + optionRect.width + OPTION_SPACE
+      const fullRectWidth = labelWidth + optionWidth + OPTION_SPACE
 
       // 是否 将label 标签放置到底部，判断 top 距离
-      const isLabelAtBottom = top <= LABEL_HEIGHT
+      const isLabelAtBottom = top < LABEL_HEIGHT
       const labelAlign = new Align({
         alignLeft: true,
         horizontalValue: 0,
@@ -396,7 +396,7 @@ export default {
       })
 
       // 是否将操作栏放置到底部，判断当前选中组件底部与页面底部的距离。
-      const isOptionAtBottom = siteCanvasHeight - top - height > OPTION_BAR_HEIGHT
+      const isOptionAtBottom = canvasHeight - top - height >= OPTION_BAR_HEIGHT
       const optionAlign = new Align({
         alignLeft: false,
         horizontalValue: 0,
@@ -410,13 +410,13 @@ export default {
         // 选中框宽度小于标签宽度和工具操作条宽度之和加上间距
 
         // 如果labe宽度大于选中框宽度，并且label右侧已经超出画布，则label对齐右侧
-        const isLabelAlignRight = labelRect.width > width && left + labelRect.width + scrollBarWidth > siteCanvasWidth
+        const isLabelAlignRight = labelWidth > width && left + labelWidth + scrollBarWidth > canvasWidth
         if (isLabelAlignRight) {
           labelAlign.align(positions.RIGHT)
         }
 
         // 如果option宽度大于选中框宽度，并且option左侧已经超出画布，则option对齐左侧
-        const isOptionAlignLeft = optionRect.width > width && left + width - optionRect.width < 0
+        const isOptionAlignLeft = optionWidth > width && left + width - optionWidth < 0
         if (isOptionAlignLeft) {
           optionAlign.align(positions.LEFT)
         }
@@ -424,14 +424,14 @@ export default {
         if (isLabelAtBottom === isOptionAtBottom) {
           // 标签框和工具操作框都在顶部或者都在底部
 
-          if (left + fullRectWidth < siteCanvasWidth) {
+          if (left + fullRectWidth < canvasWidth) {
             // 都放在左侧
             labelAlign.align(positions.LEFT)
-            optionAlign.align(positions.LEFT, labelRect.width + OPTION_SPACE)
+            optionAlign.align(positions.LEFT, labelWidth + OPTION_SPACE)
           } else {
             // 都放在右侧
             optionAlign.align(positions.RIGHT)
-            labelAlign.align(positions.RIGHT, optionRect.width + OPTION_SPACE)
+            labelAlign.align(positions.RIGHT, optionWidth + OPTION_SPACE)
           }
         }
       } else {
@@ -439,10 +439,10 @@ export default {
           labelAlign.align(positions.LEFT, Math.min(-left, width - fullRectWidth))
         }
 
-        if (left + width + scrollBarWidth > siteCanvasWidth) {
+        if (left + width + scrollBarWidth > canvasWidth) {
           optionAlign.align(
             positions.RIGHT,
-            Math.min(left + width + scrollBarWidth - siteCanvasWidth, width - fullRectWidth)
+            Math.min(left + width + scrollBarWidth - canvasWidth, width - fullRectWidth)
           )
         }
       }
@@ -454,8 +454,7 @@ export default {
     }
 
     watchPostEffect(async () => {
-      let { left } = props.selectState
-      const { top, width, height, doc } = props.selectState
+      const { left, top, width, height, doc } = props.selectState
 
       // nextTick后ref才能获取到元素。需要把监听的依赖放在await之前，否则无法监听变化
       await nextTick()
@@ -470,15 +469,17 @@ export default {
         return
       }
 
-      const siteCanvasRect = document.querySelector('.site-canvas').getBoundingClientRect()
       const scale = useLayout().getScale()
+      const canvasRect = canvasState.iframe.getBoundingClientRect()
+      const { width: labelWidth } = labelRef.value.getBoundingClientRect()
+      const { width: optionWidth } = optionRef.value.getBoundingClientRect()
 
-      left -= ((1 - scale) / 2) * siteCanvasRect.width
-
+      // canvas容器中，iframe以及iframe之外的元素clientRect的尺寸都是缩放过的，除以scale得到原始大小
       const { labelStyleValue, optionStyleValue } = getStyleValues(
         { left, top, width, height, doc },
-        siteCanvasRect.width * scale,
-        siteCanvasRect.height
+        { width: canvasRect.width / scale, height: canvasRect.height / scale },
+        labelWidth / scale,
+        optionWidth / scale
       )
 
       labelStyle.value = labelStyleValue

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

@@ -50,7 +50,6 @@ import {
   updateRect,
   getElement,
   dragStart,
-  getOffset,
   selectNode,
   initCanvas,
   clearLineState,
@@ -101,7 +100,7 @@ export default {
 
         // 如果是点击右键则打开右键菜单
         if (event.button === 2) {
-          openMenu(getOffset(event.target), event)
+          openMenu(event)
         }
       }
     }

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

@@ -43,7 +43,8 @@ const ROW_SNIPPET = {
         grow: true,
         shrink: true,
         widthType: 'auto'
-      }
+      },
+      children: []
     }
   ]
 }
@@ -103,16 +104,7 @@ export default {
       if (schema.componentName === 'CanvasCol') {
         // 当前组件为空组件，直接切成两行
         if (!schema.children?.length) {
-          schema.children = [
-            {
-              ...extend(true, {}, ROW_SNIPPET),
-              children: [{ ...extend(true, {}, COL_SNIPPET) }]
-            },
-            {
-              ...extend(true, {}, ROW_SNIPPET),
-              children: [{ ...extend(true, {}, COL_SNIPPET) }]
-            }
-          ]
+          schema.children = [extend(true, {}, ROW_SNIPPET), extend(true, {}, ROW_SNIPPET)]
         } else if (schema.children[0].componentName !== 'CanvasRow') {
           // 当前组件不为空组件且第一个孩子不为 row，则是第一次切割，切割成两行，需要将原来有的 children 放置到第一个 row 的 col
           schema.children = [
@@ -129,7 +121,7 @@ export default {
           ]
         } else {
           // 已经切割过了，直接加一行
-          schema.children.push(...extend(true, {}, ROW_SNIPPET))
+          schema.children.push(extend(true, {}, ROW_SNIPPET))
         }
       }
 
@@ -202,7 +194,7 @@ export default {
 
 <style lang="less" scoped>
 .divider-wrapper {
-  position: fixed;
+  position: absolute;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -239,7 +231,7 @@ export default {
 }
 
 .divider-line {
-  position: fixed;
+  position: absolute;
   border: 1px dashed var(--ti-lowcode-common-primary-color);
   z-index: 2;
 }

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

@@ -15,7 +15,7 @@
           <span>{{ item.name }}</span>
           <span v-if="item.items"><icon-right></icon-right></span>
         </div>
-        <ul v-if="item.items && current === item" class="sub-menu menu-item">
+        <ul v-if="item.items && current === item" class="sub-menu menu-item" :style="subMenuStyles">
           <template v-for="(subItem, subIndex) in item.items" :key="subIndex">
             <li
               :class="[{ 'menu-item-disabled': subItem.check && !subItem.check?.() }]"
@@ -33,7 +33,7 @@
 
 <script lang="jsx">
 import { ref, reactive, nextTick } from 'vue'
-import { getConfigure, getController, getCurrent, copyNode, removeNodeById } from './container'
+import { canvasState, getConfigure, getController, getCurrent, copyNode, removeNodeById } from './container'
 import { useLayout, useModal, useCanvas } from '@opentiny/tiny-engine-controller'
 import { iconRight } from '@opentiny/vue-icon'
 
@@ -45,27 +45,35 @@ const menuState = reactive({
 
 const current = ref(null)
 const menuDom = ref(null)
+const subMenuStyles = ref(null)
 
 export const closeMenu = () => {
   menuState.show = false
   current.value = null
 }
 
-export const openMenu = (offset, event) => {
-  const { x, y } = offset
-  const { getScale } = useLayout()
+export const openMenu = (event) => {
   menuState.position = {
-    // 位置处于画布右侧边缘时需要调整显示方向 TODO
-    left: event.clientX * getScale() + x + 2 + 'px',
-    top: event.clientY * getScale() + y + 'px'
+    left: event.clientX + 2 + 'px',
+    top: event.clientY + 'px'
   }
   menuState.show = sessionStorage.getItem('pageInfo') ? true : false
 
   nextTick(() => {
     if (menuDom.value) {
-      const { bottom, height, top } = menuDom.value.getBoundingClientRect()
-      if (bottom > document.body?.clientHeight) {
-        menuState.position.top = top - height + 'px'
+      const { right, bottom, width, height } = menuDom.value.getBoundingClientRect()
+      const canvasRect = canvasState.iframe.getBoundingClientRect()
+      if (bottom > canvasRect.bottom) {
+        menuState.position.top = `${parseInt(menuState.position.top) - height}px`
+      }
+      if (right > canvasRect.right) {
+        menuState.position.left = `${parseInt(menuState.position.left) - width - 2}px`
+      }
+      // sub-menu样式width为100px，少于100宽度的空白区域则放置到左侧
+      if (right + 100 < canvasRect.right) {
+        subMenuStyles.value = { right: '-100px' }
+      } else {
+        subMenuStyles.value = { left: '-100px' }
       }
     }
   })
@@ -226,6 +234,7 @@ export default {
       close,
       current,
       menuDom,
+      subMenuStyles,
       actionDisabled,
       onShowChildrenMenu
     }
@@ -235,7 +244,7 @@ export default {
 
 <style lang="less" scoped>
 .context-menu {
-  position: fixed;
+  position: absolute;
   z-index: 10;
 }
 .menu-item {
@@ -276,7 +285,6 @@ export default {
   &.sub-menu {
     width: 100px;
     position: absolute;
-    right: -100px;
     top: -2px;
   }
 }

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

@@ -17,13 +17,12 @@ import { canvasState } from './container'
 export default {
   setup() {
     const sizeStyle = computed(() => {
-      const { width, maxWidth, minWidth, scale } = useLayout().getDimension()
+      const { width, height, maxWidth, minWidth } = useLayout().getDimension()
       return {
         width,
+        height,
         maxWidth,
-        minWidth,
-        height: `${100 / scale}%`,
-        transform: `scale(${scale}) translateY(-${(100 / scale - 100) / 2}%)`
+        minWidth
       }
     })
 

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

@@ -8,6 +8,7 @@
 
 <script>
 import { reactive, watch } from 'vue'
+import { useLayout } from '@opentiny/tiny-engine-controller'
 import { getCurrent, updateRect, selectState, querySelectById } from './container'
 
 export default {
@@ -38,12 +39,17 @@ export default {
     }
 
     const handleResize = (event, type) => {
-      let { clientX, clientY } = event
+      if (!props.iframe) {
+        return
+      }
 
-      if (type === 'iframe' && props.iframe) {
-        const iframeRect = props.iframe.getBoundingClientRect()
-        clientX += iframeRect.left
-        clientY += iframeRect.top
+      let { clientX, clientY } = event
+      const iframeRect = props.iframe.getBoundingClientRect()
+      const scale = useLayout().getScale()
+
+      if (type !== 'iframe') {
+        clientX = (clientX - iframeRect.left) / scale
+        clientY = (clientY - iframeRect.top) / scale
       }
 
       const { parent, schema } = getCurrent()
@@ -65,14 +71,9 @@ export default {
         const parentWidth = parseInt(window.getComputedStyle(parentDomNode).width, 10)
 
         // 最大宽度不能大于父组件宽度
-        if (newWidth >= parentWidth) {
-          newWidth = parentWidth
-        }
-
+        newWidth = Math.min(newWidth, parentWidth)
         // 最小宽度32
-        if (newWidth <= 32) {
-          newWidth = 32
-        }
+        newWidth = Math.max(newWidth, 32)
 
         schema.props.flexBasis = `${newWidth}px`
         schema.props.widthType = 'fixed'
@@ -186,7 +187,7 @@ export default {
 
 <style lang="less" scoped>
 .resize-border {
-  position: fixed;
+  position: absolute;
   display: flex;
   justify-content: center;
   align-items: center;

packages/canvas/src/components/container/container.js

@@ -348,16 +348,13 @@ const setSelectRect = (element) => {
   element = element || getDocument().body
 
   const { left, height, top, width } = getRect(element)
-  const { x, y } = getOffset(element)
-  const siteCanvasRect = document.querySelector('.site-canvas').getBoundingClientRect()
   const componentName = getCurrent().schema?.componentName || ''
-  const scale = useLayout().getScale()
   clearHover()
   Object.assign(selectState, {
-    width: width * scale,
-    height: height * scale,
-    top: top * scale + y - siteCanvasRect.y,
-    left: left * scale + x - siteCanvasRect.x,
+    width,
+    height,
+    top,
+    left,
     componentName,
     doc: getDocument()
   })
@@ -481,9 +478,6 @@ const setHoverRect = (element, data) => {
   const configure = getConfigure(componentName)
   const rect = getRect(element)
   const { left, height, top, width } = rect
-  const { x, y } = getOffset(element)
-  const siteCanvasRect = document.querySelector('.site-canvas').getBoundingClientRect()
-  const scale = useLayout().getScale()
 
   hoverState.configure = configure
 
@@ -512,23 +506,22 @@ const setHoverRect = (element, data) => {
     if (childEle) {
       const childRect = getRect(childEle)
       const { left, height, top, width } = childRect
-      const { x, y } = getOffset(childEle)
       const posLine = getPosLine(childRect, lineState.configure)
       Object.assign(lineState, {
-        width: width * scale,
-        height: height * scale,
-        top: top * scale + y - siteCanvasRect.y,
-        left: left * scale + x - siteCanvasRect.x,
+        width,
+        height,
+        top,
+        left,
         position: canvasState.type === 'absolute' || posLine.type,
         forbidden: posLine.forbidden
       })
     } else {
       const posLine = getPosLine(rect, configure)
       Object.assign(lineState, {
-        width: width * scale,
-        height: height * scale,
-        top: top * scale + y - siteCanvasRect.y,
-        left: left * scale + x - siteCanvasRect.x,
+        width,
+        height,
+        top,
+        left,
         position: canvasState.type === 'absolute' || posLine.type,
         forbidden: posLine.forbidden
       })
@@ -539,10 +532,10 @@ const setHoverRect = (element, data) => {
 
   // 设置元素hover状态
   Object.assign(hoverState, {
-    width: width * scale,
-    height: height * scale,
-    top: top * scale + y - siteCanvasRect.y,
-    left: left * scale + x - siteCanvasRect.x,
+    width,
+    height,
+    top,
+    left,
     componentName
   })
   return undefined

packages/common/component/MetaHtmlText.vue

@@ -10,7 +10,7 @@
     </div>
   </div>
   <div class="head-content">
-    <meta-input v-model="state.text" type="textarea" @change="change"></meta-input>
+    <meta-input v-model="state.text" type="textarea" @update:modelValue="change"></meta-input>
   </div>
 </template>
 <script>

packages/controller/package.json

@@ -31,9 +31,9 @@
   "license": "MIT",
   "homepage": "https://opentiny.design/tiny-engine",
   "dependencies": {
-    "@babel/generator": "7.18.13",
-    "@babel/parser": "7.18.13",
-    "@babel/traverse": "7.18.13",
+    "@babel/generator": "~7.23.2",
+    "@babel/parser": "~7.23.2",
+    "@babel/traverse": "~7.23.2",
     "@opentiny/tiny-engine-builtin-component": "workspace:*",
     "@opentiny/tiny-engine-http": "workspace:*",
     "@opentiny/tiny-engine-i18n-host": "workspace:*",

packages/design-core/package.json

@@ -30,10 +30,10 @@
   "author": "OpenTiny Team",
   "license": "MIT",
   "dependencies": {
-    "@babel/core": "7.18.13",
-    "@babel/generator": "7.18.13",
-    "@babel/parser": "7.18.13",
-    "@babel/traverse": "7.18.13",
+    "@babel/core": "~7.23.2",
+    "@babel/generator": "~7.23.2",
+    "@babel/parser": "~7.23.2",
+    "@babel/traverse": "~7.23.2",
     "@opentiny/tiny-engine-canvas": "workspace:*",
     "@opentiny/tiny-engine-common": "workspace:*",
     "@opentiny/tiny-engine-controller": "workspace:*",

packages/design-core/src/DesignCanvas.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="canvas-wrap" ref="canvasRef">
-    <div ref="siteCanvas" class="site-canvas">
+    <div ref="siteCanvas" class="site-canvas" :style="siteCanvasStyle">
       <canvas-container
         :controller="controller"
         :materials-panel="materialsPanel"
@@ -14,7 +14,7 @@
 </template>
 
 <script>
-import { ref, watch, onUnmounted } from 'vue'
+import { ref, watch, computed, onUnmounted } from 'vue'
 import { CanvasContainer, CanvasFooter } from '@opentiny/tiny-engine-canvas'
 import {
   useProperties,
@@ -60,6 +60,14 @@ export default {
       pageState.properties = null
     }
 
+    const siteCanvasStyle = computed(() => {
+      const { scale } = useLayout().getDimension()
+      return {
+        height: `calc((100% - var(--base-bottom-panel-height, 30px) - 36px) / ${scale})`,
+        transform: `scale(${scale})`
+      }
+    })
+
     watch(
       [() => useCanvas().isSaved(), () => useLayout().layoutState.pageStatus, () => useCanvas().getPageSchema()],
       ([isSaved, pageStatus, pageSchema], [oldIsSaved, _oldPageStatus, oldPageSchema]) => {
@@ -180,6 +188,7 @@ export default {
         request: useHttp(),
         ast
       },
+      siteCanvasStyle,
       canvasRef
     }
   }
@@ -196,11 +205,11 @@ export default {
   position: relative;
 
   .site-canvas {
-    height: calc(100% - var(--base-bottom-panel-height, 30px) - 36px);
     background: var(--ti-lowcode-breadcrumb-hover-bg);
     position: absolute;
     overflow: hidden;
     margin: 18px 0;
+    transform-origin: top;
   }
 }
 </style>

packages/http/package.json

@@ -26,7 +26,7 @@
   "dependencies": {
     "@opentiny/tiny-engine-utils": "workspace:*",
     "@vueuse/core": "^9.6.0",
-    "axios": "^0.27.2",
+    "axios": "~0.28.0",
     "axios-mock-adapter": "^1.21.5"
   },
   "devDependencies": {

packages/plugins/datasource/package.json

@@ -30,7 +30,7 @@
     "@opentiny/tiny-engine-http": "workspace:*",
     "@opentiny/tiny-engine-utils": "workspace:*",
     "@vue/shared": "^3.3.4",
-    "axios": "^0.27.2",
+    "axios": "~0.28.0",
     "vue-clipboard3": "^2.0.0",
     "xlsx": "^0.18.5"
   },

packages/settings/events/src/components/BindEventsDialog.vue

@@ -352,8 +352,8 @@ export default {
       saveMethod?.({
         name: state.bindMethodInfo.name,
         content: state.enableExtraParams
-          ? `function (eventArgs,${formatParams}) ${functionBody}`
-          : `function (${formatParams})  ${functionBody}`
+          ? `function ${state.bindMethodInfo.name}(eventArgs,${formatParams}) ${functionBody}`
+          : `function ${state.bindMethodInfo.name}(${formatParams})  ${functionBody}`
       })
 
       activePagePlugin()

packages/settings/styles/src/Main.vue

@@ -69,7 +69,6 @@ import { ref, watch } from 'vue'
 import { Collapse, CollapseItem, Input } from '@opentiny/vue'
 import { useHistory, useCanvas, useProperties } from '@opentiny/tiny-engine-controller'
 import { MetaCodeEditor, MetaBindVariable } from '@opentiny/tiny-engine-common'
-import { formatString } from '@opentiny/tiny-engine-controller/js/ast'
 import {
   SizeGroup,
   LayoutGroup,
@@ -128,7 +127,7 @@ export default {
       const { getSchema: getCanvasPageSchema, updateRect } = useCanvas().canvasApi.value
       const pageSchema = getCanvasPageSchema()
       const schema = getSchema() || pageSchema
-      const styleString = formatString(styleStrRemoveRoot(content), 'css')
+      const styleString = styleStrRemoveRoot(content)
       const currentSchema = getCurrentSchema() || pageSchema
 
       state.styleContent = content

packages/vue-generator/package.json

@@ -47,7 +47,7 @@
     "fs-extra": "^10.0.1",
     "prettier": "^2.6.1",
     "vite": "^4.3.7",
-    "vite-plugin-static-copy": "^1.0.4",
+    "vite-plugin-static-copy": "^0.16.0",
     "vitest": "^1.4.0",
     "winston": "^3.10.0"
   },

packages/vue-generator/src/generator/vue/sfc/generateAttribute.js

@@ -229,7 +229,7 @@ export const handleSlotBindAttrHook = (schemaData) => {
   let paramsValue = ''
 
   if (Array.isArray(params)) {
-    paramsValue = `={ ${params.join(',')} }`
+    paramsValue = `="{ ${params.join(',')} }"`
   } else if (typeof params === 'string') {
     paramsValue = `="${params}"`
   }

packages/vue-generator/src/plugins/genGlobalState.js

@@ -44,8 +44,8 @@ function genDependenciesPlugin(options = {}) {
           .map((item) => {
             let [key, value] = item
 
-            if (value === '') {
-              value = "''"
+            if (typeof value === 'string') {
+              value = `'${value}'`
             }
 
             if (value && typeof value === 'object') {
@@ -57,19 +57,19 @@ function genDependenciesPlugin(options = {}) {
           .join(',')} })`
 
         const getterExpression = Object.entries(getters)
-          .filter((item) => item.value?.type === 'JSFunction')
+          .filter((item) => item[1]?.type === 'JSFunction')
           .map(([key, value]) => `${key}: ${value.value}`)
           .join(',')
 
         const actionExpressions = Object.entries(actions)
-          .filter((item) => item.value?.type === 'JSFunction')
+          .filter((item) => item[1]?.type === 'JSFunction')
           .map(([key, value]) => `${key}: ${value.value}`)
           .join(',')
 
         const storeFiles = `
          ${importStatement}
          export const ${id} = defineStore({
-           id: ${id},
+           id: '${id}',
            state: ${stateExpression},
            getters: { ${getterExpression} },
            actions: { ${actionExpressions} }

packages/vue-generator/test/testcases/generator/expected/appdemo01/src/stores/index.js

@@ -0,0 +1 @@
+export { testState } from './testState'

packages/vue-generator/test/testcases/generator/expected/appdemo01/src/stores/testState.js

@@ -0,0 +1,27 @@
+import { defineStore } from 'pinia'
+export const testState = defineStore({
+  id: 'testState',
+  state: () => ({
+    name: 'testName',
+    license: '',
+    age: 18,
+    food: ['apple', 'orange', 'banana', 19],
+    desc: { description: 'hello world', money: 100, other: '', rest: ['a', 'b', 'c', 20] }
+  }),
+  getters: {
+    getAge: function getAge() {
+      return this.age
+    },
+    getName: function getName() {
+      return this.name
+    }
+  },
+  actions: {
+    setAge: function setAge(age) {
+      this.age = age
+    },
+    setName: function setName(name) {
+      this.name = name
+    }
+  }
+})

packages/vue-generator/test/testcases/generator/mockData.js

@@ -676,7 +676,43 @@ export const appSchemaDemo01 = {
       value: 'function dataHanlder(res){\n return res;\n}'
     }
   },
-  globalState: [],
+  globalState: [
+    {
+      id: 'testState',
+      state: {
+        name: 'testName',
+        license: '',
+        age: 18,
+        food: ['apple', 'orange', 'banana', 19],
+        desc: {
+          description: 'hello world',
+          money: 100,
+          other: '',
+          rest: ['a', 'b', 'c', 20]
+        }
+      },
+      getters: {
+        getAge: {
+          type: 'JSFunction',
+          value: 'function getAge() {\n return this.age \n}'
+        },
+        getName: {
+          type: 'JSFunction',
+          value: 'function getName() {\n return this.name \n}'
+        }
+      },
+      actions: {
+        setAge: {
+          type: 'JSFunction',
+          value: 'function setAge(age) {\n this.age = age; \n}'
+        },
+        setName: {
+          type: 'JSFunction',
+          value: 'function setName(name) {\n this.name = name; \n}'
+        }
+      }
+    }
+  ],
   utils: [
     {
       name: 'axios',

packages/vue-generator/test/testcases/sfc/case06/case06.test.js

@@ -0,0 +1,12 @@
+import { expect, test } from 'vitest'
+import { genSFCWithDefaultPlugin } from '@/generator/vue/sfc'
+import schema from './page.schema.json'
+import componentsMap from './components-map.json'
+import { formatCode } from '@/utils/formatCode'
+
+test('should generate slot declaration correctly', async () => {
+  const res = genSFCWithDefaultPlugin(schema, componentsMap)
+  const formattedCode = formatCode(res, 'vue')
+
+  await expect(formattedCode).toMatchFileSnapshot('./expected/slotTest.vue')
+})

packages/vue-generator/test/testcases/sfc/case06/components-map.json

@@ -0,0 +1,9 @@
+[
+  {
+    "componentName": "TinyTree",
+    "exportName": "Tree",
+    "package": "@opentiny/vue",
+    "version": "^3.10.0",
+    "destructuring": true
+  }
+]

packages/vue-generator/test/testcases/sfc/case06/expected/slotTest.vue

@@ -0,0 +1,54 @@
+<template>
+  <div>
+    <tiny-tree
+      :data="[
+        { label: '一级 1', children: [{ label: '二级 1-1', children: [{ label: '三级 1-1-1' }] }] },
+        {
+          label: '一级 2',
+          children: [
+            { label: '二级 2-1', children: [{ label: '三级 2-1-1' }] },
+            { label: '二级 2-2', children: [{ label: '三级 2-2-1' }] }
+          ]
+        }
+      ]"
+    >
+      <template #default="{ data }">
+        <span>{{ data.label }}</span></template
+      ></tiny-tree
+    >
+    <tiny-tree
+      :data="[
+        { label: '一级 1', children: [{ label: '二级 1-1', children: [{ label: '三级 1-1-1' }] }] },
+        {
+          label: '一级 2',
+          children: [
+            { label: '二级 2-1', children: [{ label: '三级 2-1-1' }] },
+            { label: '二级 2-2', children: [{ label: '三级 2-2-1' }] }
+          ]
+        }
+      ]"
+    >
+      <template #default="data">
+        <span>{{ data.label }}</span></template
+      ></tiny-tree
+    >
+  </div>
+</template>
+
+<script setup>
+import { Tree as TinyTree } from '@opentiny/vue'
+import * as vue from 'vue'
+import { defineProps, defineEmits } from 'vue'
+import { I18nInjectionKey } from 'vue-i18n'
+
+const props = defineProps({})
+
+const emit = defineEmits([])
+const { t, lowcodeWrap, stores } = vue.inject(I18nInjectionKey).lowcode()
+const wrap = lowcodeWrap(props, { emit })
+wrap({ stores })
+
+const state = vue.reactive({})
+wrap({ state })
+</script>
+<style scoped></style>

packages/vue-generator/test/testcases/sfc/case06/page.schema.json

@@ -0,0 +1,143 @@
+{
+  "state": {},
+  "methods": {},
+  "componentName": "Page",
+  "fileName": "createVm",
+  "css": "",
+  "props": {},
+  "lifeCycles": {},
+  "children": [
+    {
+      "componentName": "TinyTree",
+      "props": {
+        "data": [
+          {
+            "label": "一级 1",
+            "children": [
+              {
+                "label": "二级 1-1",
+                "children": [
+                  {
+                    "label": "三级 1-1-1"
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            "label": "一级 2",
+            "children": [
+              {
+                "label": "二级 2-1",
+                "children": [
+                  {
+                    "label": "三级 2-1-1"
+                  }
+                ]
+              },
+              {
+                "label": "二级 2-2",
+                "children": [
+                  {
+                    "label": "三级 2-2-1"
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      },
+      "id": "33f52342",
+      "children": [
+        {
+          "componentName": "Template",
+          "props": {
+            "slot": {
+              "name": "default",
+              "params": ["data"]
+            }
+          },
+          "children": [
+            {
+              "componentName": "Text",
+              "props": {
+                "text": {
+                  "type": "JSExpression",
+                  "value": "data.label"
+                }
+              },
+              "id": "c225d165"
+            }
+          ],
+          "id": "415d5f65"
+        }
+      ]
+    },
+    {
+      "componentName": "TinyTree",
+      "props": {
+        "data": [
+          {
+            "label": "一级 1",
+            "children": [
+              {
+                "label": "二级 1-1",
+                "children": [
+                  {
+                    "label": "三级 1-1-1"
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            "label": "一级 2",
+            "children": [
+              {
+                "label": "二级 2-1",
+                "children": [
+                  {
+                    "label": "三级 2-1-1"
+                  }
+                ]
+              },
+              {
+                "label": "二级 2-2",
+                "children": [
+                  {
+                    "label": "三级 2-2-1"
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      },
+      "id": "33f52342",
+      "children": [
+        {
+          "componentName": "Template",
+          "props": {
+            "slot": {
+              "name": "default",
+              "params": "data"
+            }
+          },
+          "children": [
+            {
+              "componentName": "Text",
+              "props": {
+                "text": {
+                  "type": "JSExpression",
+                  "value": "data.label"
+                }
+              },
+              "id": "c225d165"
+            }
+          ],
+          "id": "415d5f65"
+        }
+      ]
+    }
+  ]
+}

packages/vue-generator/vite.config.mjs

@@ -17,7 +17,7 @@ import { viteStaticCopy } from 'vite-plugin-static-copy'
 // https://vitejs.dev/config/
 export default defineConfig({
   test: {
-    exclude: ['**/result/**'],
+    exclude: ['**/result/**', 'node_modules'],
     watchExclude: ['**/result/**']
   },
   resolve: {

scripts/buildMaterials.mjs

@@ -12,7 +12,10 @@ const materialsDir = 'materials'
 const bundlePath = path.join(process.cwd(), '/packages/design-core/public/mock/bundle.json')
 // mockServer应用数据
 const appInfoPath = path.join(process.cwd(), '/mockServer/src/services/appinfo.json')
+const appSchemaPath = path.join(process.cwd(), 'mockServer/src/mock/get/app-center/v1/apps/schema/918.json')
+
 const appInfo = fsExtra.readJSONSync(appInfoPath)
+const appSchema = fsExtra.readJSONSync(appSchemaPath)
 
 const connection = new MysqlConnection()
 
@@ -22,6 +25,7 @@ const connection = new MysqlConnection()
 const write = (bundle) => {
   fsExtra.outputJSONSync(bundlePath, bundle, { spaces: 2 })
   fsExtra.outputJSONSync(appInfoPath, appInfo, { spaces: 2 })
+  fsExtra.outputJSONSync(appSchemaPath, appSchema, { spaces: 2 })
 }
 
 /**
@@ -95,6 +99,7 @@ const generateComponents = () => {
       }
       const { components = [], snippets = [], blocks = [] } = bundle.data.materials
       const componentsMap = []
+      const packagesMap = []
       const appInfoBlocksLabels = appInfo.blockHistories.map((item) => item.label)
 
       files.forEach((file) => {
@@ -151,8 +156,26 @@ const generateComponents = () => {
 
         appInfo.materialHistory.components = componentsMap
 
-        write(bundle)
+        const { package: packageName = '', version = '', exportName = '' } = npm || {}
+
+        const mapItem = {
+          componentName: component,
+          package: packageName,
+          version,
+          exportName
+        }
+
+        if (typeof npm.destructuring === 'boolean') {
+          mapItem.destructuring = npm.destructuring
+        }
+
+        if (npm.package) {
+          packagesMap.push(mapItem)
+        }
       })
+
+      appSchema.data.componentsMap = packagesMap
+      write(bundle)
     })
 
     logger.success('物料资产包构建成功')

scripts/setup.js

@@ -1,3 +1,3 @@
 const { exec } = require('child_process')
 
-exec('pnpm -F @opentiny/tiny-engine-dsl-vue build')
+exec('pnpm -F @opentiny/tiny-engine-controller -F @opentiny/tiny-engine-dsl-vue build')