chore: Upgrade xlsx version to fix security vulnerability

2024-05-14 17:38:36 +08:00
33 changed files with 142 additions and 467 deletions
--- a/.codecheck/check.yml
+++ b/.codecheck/check.yml
@ -8,4 +8,4 @@ tool_params:
  secsolar:
    source_dir: ./
  cmetrics:
-    exclude: vite.config.js|package.json|index.js|mockServer/assets|packages/vue-generator/test
+    exclude: vite.config.js|package.json|index.js|mockServer/assets
--- a/.github/workflows/ai-code-review.yml
+++ b/.github/workflows/ai-code-review.yml
@ -0,0 +1,23 @@
+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
--- a/.github/workflows/push-check.yml
+++ b/.github/workflows/push-check.yml
@ -24,7 +24,7 @@ jobs:

    - name: Get changed files
      id: get_changed_files
-      uses: tj-actions/changed-files@v41
+      uses: tj-actions/changed-files@v40
      with:
        files: |
              **.js
--- a/mockServer/src/mock/get/app-center/v1/apps/schema/918.json
+++ b/mockServer/src/mock/get/app-center/v1/apps/schema/918.json
@ -1974,48 +1974,6 @@
        "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",
--- a/packages/canvas/src/components/container/CanvasAction.vue
+++ b/packages/canvas/src/components/container/CanvasAction.vue
@ -117,7 +117,6 @@ import {
  IconEyeclose
 } from '@opentiny/vue-icon'
 import {
-  canvasState,
  getCurrent,
  removeNodeById,
  selectNode,
@ -380,14 +379,15 @@ export default {
      }
    }

-    const getStyleValues = (selectState, canvasSize, labelWidth, optionWidth) => {
+    const getStyleValues = (selectState, siteCanvasWidth, siteCanvasHeight) => {
      const { left, top, width, height, doc } = selectState
-      const { width: canvasWidth, height: canvasHeight } = canvasSize
+      const labelRect = labelRef.value.getBoundingClientRect()
+      const optionRect = optionRef.value.getBoundingClientRect()
      // 标签宽度和工具操作条宽度之和加上间距
-      const fullRectWidth = labelWidth + optionWidth + OPTION_SPACE
+      const fullRectWidth = labelRect.width + optionRect.width + 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 = canvasHeight - top - height >= OPTION_BAR_HEIGHT
+      const isOptionAtBottom = siteCanvasHeight - top - height > OPTION_BAR_HEIGHT
      const optionAlign = new Align({
        alignLeft: false,
        horizontalValue: 0,
@ -410,13 +410,13 @@ export default {
        // 选中框宽度小于标签宽度和工具操作条宽度之和加上间距

        // 如果labe宽度大于选中框宽度，并且label右侧已经超出画布，则label对齐右侧
-        const isLabelAlignRight = labelWidth > width && left + labelWidth + scrollBarWidth > canvasWidth
+        const isLabelAlignRight = labelRect.width > width && left + labelRect.width + scrollBarWidth > siteCanvasWidth
        if (isLabelAlignRight) {
          labelAlign.align(positions.RIGHT)
        }

        // 如果option宽度大于选中框宽度，并且option左侧已经超出画布，则option对齐左侧
-        const isOptionAlignLeft = optionWidth > width && left + width - optionWidth < 0
+        const isOptionAlignLeft = optionRect.width > width && left + width - optionRect.width < 0
        if (isOptionAlignLeft) {
          optionAlign.align(positions.LEFT)
        }
@ -424,14 +424,14 @@ export default {
        if (isLabelAtBottom === isOptionAtBottom) {
          // 标签框和工具操作框都在顶部或者都在底部

-          if (left + fullRectWidth < canvasWidth) {
+          if (left + fullRectWidth < siteCanvasWidth) {
            // 都放在左侧
            labelAlign.align(positions.LEFT)
-            optionAlign.align(positions.LEFT, labelWidth + OPTION_SPACE)
+            optionAlign.align(positions.LEFT, labelRect.width + OPTION_SPACE)
          } else {
            // 都放在右侧
            optionAlign.align(positions.RIGHT)
-            labelAlign.align(positions.RIGHT, optionWidth + OPTION_SPACE)
+            labelAlign.align(positions.RIGHT, optionRect.width + OPTION_SPACE)
          }
        }
      } else {
@ -439,10 +439,10 @@ export default {
          labelAlign.align(positions.LEFT, Math.min(-left, width - fullRectWidth))
        }

-        if (left + width + scrollBarWidth > canvasWidth) {
+        if (left + width + scrollBarWidth > siteCanvasWidth) {
          optionAlign.align(
            positions.RIGHT,
-            Math.min(left + width + scrollBarWidth - canvasWidth, width - fullRectWidth)
+            Math.min(left + width + scrollBarWidth - siteCanvasWidth, width - fullRectWidth)
          )
        }
      }
@ -454,7 +454,8 @@ export default {
    }

    watchPostEffect(async () => {
-      const { left, top, width, height, doc } = props.selectState
+      let { left } = props.selectState
+      const { top, width, height, doc } = props.selectState

      // nextTick后ref才能获取到元素。需要把监听的依赖放在await之前，否则无法监听变化
      await nextTick()
@ -469,17 +470,15 @@ 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()

-      // canvas容器中，iframe以及iframe之外的元素clientRect的尺寸都是缩放过的，除以scale得到原始大小
+      left -= ((1 - scale) / 2) * siteCanvasRect.width
+
      const { labelStyleValue, optionStyleValue } = getStyleValues(
        { left, top, width, height, doc },
-        { width: canvasRect.width / scale, height: canvasRect.height / scale },
-        labelWidth / scale,
-        optionWidth / scale
+        siteCanvasRect.width * scale,
+        siteCanvasRect.height
      )

      labelStyle.value = labelStyleValue
--- a/packages/canvas/src/components/container/CanvasContainer.vue
+++ b/packages/canvas/src/components/container/CanvasContainer.vue
@ -50,6 +50,7 @@ import {
  updateRect,
  getElement,
  dragStart,
+  getOffset,
  selectNode,
  initCanvas,
  clearLineState,
@ -100,7 +101,7 @@ export default {

        // 如果是点击右键则打开右键菜单
        if (event.button === 2) {
-          openMenu(event)
+          openMenu(getOffset(event.target), event)
        }
      }
    }
--- a/packages/canvas/src/components/container/CanvasDivider.vue
+++ b/packages/canvas/src/components/container/CanvasDivider.vue
@ -43,8 +43,7 @@ const ROW_SNIPPET = {
        grow: true,
        shrink: true,
        widthType: 'auto'
-      },
-      children: []
+      }
    }
  ]
 }
@ -104,7 +103,16 @@ export default {
      if (schema.componentName === 'CanvasCol') {
        // 当前组件为空组件，直接切成两行
        if (!schema.children?.length) {
-          schema.children = [extend(true, {}, ROW_SNIPPET), extend(true, {}, ROW_SNIPPET)]
+          schema.children = [
+            {
+              ...extend(true, {}, ROW_SNIPPET),
+              children: [{ ...extend(true, {}, COL_SNIPPET) }]
+            },
+            {
+              ...extend(true, {}, ROW_SNIPPET),
+              children: [{ ...extend(true, {}, COL_SNIPPET) }]
+            }
+          ]
        } else if (schema.children[0].componentName !== 'CanvasRow') {
          // 当前组件不为空组件且第一个孩子不为 row，则是第一次切割，切割成两行，需要将原来有的 children 放置到第一个 row 的 col
          schema.children = [
@ -121,7 +129,7 @@ export default {
          ]
        } else {
          // 已经切割过了，直接加一行
-          schema.children.push(extend(true, {}, ROW_SNIPPET))
+          schema.children.push(...extend(true, {}, ROW_SNIPPET))
        }
      }

@ -194,7 +202,7 @@ export default {

 <style lang="less" scoped>
 .divider-wrapper {
-  position: absolute;
+  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
@ -231,7 +239,7 @@ export default {
 }

 .divider-line {
-  position: absolute;
+  position: fixed;
  border: 1px dashed var(--ti-lowcode-common-primary-color);
  z-index: 2;
 }
--- a/packages/canvas/src/components/container/CanvasMenu.vue
+++ b/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" :style="subMenuStyles">
+        <ul v-if="item.items && current === item" class="sub-menu menu-item">
          <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 { canvasState, getConfigure, getController, getCurrent, copyNode, removeNodeById } from './container'
+import { getConfigure, getController, getCurrent, copyNode, removeNodeById } from './container'
 import { useLayout, useModal, useCanvas } from '@opentiny/tiny-engine-controller'
 import { iconRight } from '@opentiny/vue-icon'

@ -45,35 +45,27 @@ 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 = (event) => {
+export const openMenu = (offset, event) => {
+  const { x, y } = offset
+  const { getScale } = useLayout()
  menuState.position = {
-    left: event.clientX + 2 + 'px',
-    top: event.clientY + 'px'
+    // 位置处于画布右侧边缘时需要调整显示方向 TODO
+    left: event.clientX * getScale() + x + 2 + 'px',
+    top: event.clientY * getScale() + y + 'px'
  }
  menuState.show = sessionStorage.getItem('pageInfo') ? true : false

  nextTick(() => {
    if (menuDom.value) {
-      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' }
+      const { bottom, height, top } = menuDom.value.getBoundingClientRect()
+      if (bottom > document.body?.clientHeight) {
+        menuState.position.top = top - height + 'px'
      }
    }
  })
@ -234,7 +226,6 @@ export default {
      close,
      current,
      menuDom,
-      subMenuStyles,
      actionDisabled,
      onShowChildrenMenu
    }
@ -244,7 +235,7 @@ export default {

 <style lang="less" scoped>
 .context-menu {
-  position: absolute;
+  position: fixed;
  z-index: 10;
 }
 .menu-item {
@ -285,6 +276,7 @@ export default {
  &.sub-menu {
    width: 100px;
    position: absolute;
+    right: -100px;
    top: -2px;
  }
 }
--- a/packages/canvas/src/components/container/CanvasResize.vue
+++ b/packages/canvas/src/components/container/CanvasResize.vue
@ -17,12 +17,13 @@ import { canvasState } from './container'
 export default {
  setup() {
    const sizeStyle = computed(() => {
-      const { width, height, maxWidth, minWidth } = useLayout().getDimension()
+      const { width, maxWidth, minWidth, scale } = useLayout().getDimension()
      return {
        width,
-        height,
        maxWidth,
-        minWidth
+        minWidth,
+        height: `${100 / scale}%`,
+        transform: `scale(${scale}) translateY(-${(100 / scale - 100) / 2}%)`
      }
    })

--- a/packages/canvas/src/components/container/CanvasResizeBorder.vue
+++ b/packages/canvas/src/components/container/CanvasResizeBorder.vue
@ -8,7 +8,6 @@

 <script>
 import { reactive, watch } from 'vue'
-import { useLayout } from '@opentiny/tiny-engine-controller'
 import { getCurrent, updateRect, selectState, querySelectById } from './container'

 export default {
@ -39,17 +38,12 @@ export default {
    }

    const handleResize = (event, type) => {
-      if (!props.iframe) {
-        return
-      }
-
      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
+      if (type === 'iframe' && props.iframe) {
+        const iframeRect = props.iframe.getBoundingClientRect()
+        clientX += iframeRect.left
+        clientY += iframeRect.top
      }

      const { parent, schema } = getCurrent()
@ -71,9 +65,14 @@ export default {
        const parentWidth = parseInt(window.getComputedStyle(parentDomNode).width, 10)

        // 最大宽度不能大于父组件宽度
-        newWidth = Math.min(newWidth, parentWidth)
+        if (newWidth >= parentWidth) {
+          newWidth = parentWidth
+        }
+
        // 最小宽度32
-        newWidth = Math.max(newWidth, 32)
+        if (newWidth <= 32) {
+          newWidth = 32
+        }

        schema.props.flexBasis = `${newWidth}px`
        schema.props.widthType = 'fixed'
@ -187,7 +186,7 @@ export default {

 <style lang="less" scoped>
 .resize-border {
-  position: absolute;
+  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
--- a/packages/canvas/src/components/container/container.js
+++ b/packages/canvas/src/components/container/container.js
@ -348,13 +348,16 @@ 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,
-    height,
-    top,
-    left,
+    width: width * scale,
+    height: height * scale,
+    top: top * scale + y - siteCanvasRect.y,
+    left: left * scale + x - siteCanvasRect.x,
    componentName,
    doc: getDocument()
  })
@ -478,6 +481,9 @@ 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

@ -506,22 +512,23 @@ 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,
-        height,
-        top,
-        left,
+        width: width * scale,
+        height: height * scale,
+        top: top * scale + y - siteCanvasRect.y,
+        left: left * scale + x - siteCanvasRect.x,
        position: canvasState.type === 'absolute' || posLine.type,
        forbidden: posLine.forbidden
      })
    } else {
      const posLine = getPosLine(rect, configure)
      Object.assign(lineState, {
-        width,
-        height,
-        top,
-        left,
+        width: width * scale,
+        height: height * scale,
+        top: top * scale + y - siteCanvasRect.y,
+        left: left * scale + x - siteCanvasRect.x,
        position: canvasState.type === 'absolute' || posLine.type,
        forbidden: posLine.forbidden
      })
@ -532,10 +539,10 @@ const setHoverRect = (element, data) => {

  // 设置元素hover状态
  Object.assign(hoverState, {
-    width,
-    height,
-    top,
-    left,
+    width: width * scale,
+    height: height * scale,
+    top: top * scale + y - siteCanvasRect.y,
+    left: left * scale + x - siteCanvasRect.x,
    componentName
  })
  return undefined
--- a/packages/common/component/MetaHtmlText.vue
+++ b/packages/common/component/MetaHtmlText.vue
@ -10,7 +10,7 @@
    </div>
  </div>
  <div class="head-content">
-    <meta-input v-model="state.text" type="textarea" @update:modelValue="change"></meta-input>
+    <meta-input v-model="state.text" type="textarea" @change="change"></meta-input>
  </div>
 </template>
 <script>
--- a/packages/controller/package.json
+++ b/packages/controller/package.json
@ -31,9 +31,9 @@
  "license": "MIT",
  "homepage": "https://opentiny.design/tiny-engine",
  "dependencies": {
-    "@babel/generator": "~7.23.2",
-    "@babel/parser": "~7.23.2",
-    "@babel/traverse": "~7.23.2",
+    "@babel/generator": "7.18.13",
+    "@babel/parser": "7.18.13",
+    "@babel/traverse": "7.18.13",
    "@opentiny/tiny-engine-builtin-component": "workspace:*",
    "@opentiny/tiny-engine-http": "workspace:*",
    "@opentiny/tiny-engine-i18n-host": "workspace:*",
--- a/packages/design-core/package.json
+++ b/packages/design-core/package.json
@ -30,10 +30,10 @@
  "author": "OpenTiny Team",
  "license": "MIT",
  "dependencies": {
-    "@babel/core": "~7.23.2",
-    "@babel/generator": "~7.23.2",
-    "@babel/parser": "~7.23.2",
-    "@babel/traverse": "~7.23.2",
+    "@babel/core": "7.18.13",
+    "@babel/generator": "7.18.13",
+    "@babel/parser": "7.18.13",
+    "@babel/traverse": "7.18.13",
    "@opentiny/tiny-engine-canvas": "workspace:*",
    "@opentiny/tiny-engine-common": "workspace:*",
    "@opentiny/tiny-engine-controller": "workspace:*",
--- a/packages/design-core/src/DesignCanvas.vue
+++ b/packages/design-core/src/DesignCanvas.vue
@ -1,6 +1,6 @@
 <template>
  <div id="canvas-wrap" ref="canvasRef">
-    <div ref="siteCanvas" class="site-canvas" :style="siteCanvasStyle">
+    <div ref="siteCanvas" class="site-canvas">
      <canvas-container
        :controller="controller"
        :materials-panel="materialsPanel"
@ -14,7 +14,7 @@
 </template>

 <script>
-import { ref, watch, computed, onUnmounted } from 'vue'
+import { ref, watch, onUnmounted } from 'vue'
 import { CanvasContainer, CanvasFooter } from '@opentiny/tiny-engine-canvas'
 import {
  useProperties,
@ -60,14 +60,6 @@ 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]) => {
@ -188,7 +180,6 @@ export default {
        request: useHttp(),
        ast
      },
-      siteCanvasStyle,
      canvasRef
    }
  }
@ -205,11 +196,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>
--- a/packages/http/package.json
+++ b/packages/http/package.json
@ -26,7 +26,7 @@
  "dependencies": {
    "@opentiny/tiny-engine-utils": "workspace:*",
    "@vueuse/core": "^9.6.0",
-    "axios": "~0.28.0",
+    "axios": "^0.27.2",
    "axios-mock-adapter": "^1.21.5"
  },
  "devDependencies": {
--- a/packages/plugins/datasource/package.json
+++ b/packages/plugins/datasource/package.json
@ -30,9 +30,9 @@
    "@opentiny/tiny-engine-http": "workspace:*",
    "@opentiny/tiny-engine-utils": "workspace:*",
    "@vue/shared": "^3.3.4",
-    "axios": "~0.28.0",
+    "axios": "^0.27.2",
    "vue-clipboard3": "^2.0.0",
-    "xlsx": "^0.18.5"
+    "xlsx": "file:./xlsx/xlsx-0.20.2.tgz"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.2.3",
--- a/packages/plugins/datasource/xlsx/xlsx-0.20.2.tgz
+++ b/packages/plugins/datasource/xlsx/xlsx-0.20.2.tgz
--- a/packages/settings/events/src/components/BindEventsDialog.vue
+++ b/packages/settings/events/src/components/BindEventsDialog.vue
@ -352,8 +352,8 @@ export default {
      saveMethod?.({
        name: state.bindMethodInfo.name,
        content: state.enableExtraParams
-          ? `function ${state.bindMethodInfo.name}(eventArgs,${formatParams}) ${functionBody}`
-          : `function ${state.bindMethodInfo.name}(${formatParams})  ${functionBody}`
+          ? `function (eventArgs,${formatParams}) ${functionBody}`
+          : `function (${formatParams})  ${functionBody}`
      })

      activePagePlugin()
--- a/packages/settings/styles/src/Main.vue
+++ b/packages/settings/styles/src/Main.vue
@ -69,6 +69,7 @@ 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,
@ -127,7 +128,7 @@ export default {
      const { getSchema: getCanvasPageSchema, updateRect } = useCanvas().canvasApi.value
      const pageSchema = getCanvasPageSchema()
      const schema = getSchema() || pageSchema
-      const styleString = styleStrRemoveRoot(content)
+      const styleString = formatString(styleStrRemoveRoot(content), 'css')
      const currentSchema = getCurrentSchema() || pageSchema

      state.styleContent = content
--- a/packages/vue-generator/package.json
+++ b/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": "^0.16.0",
+    "vite-plugin-static-copy": "^1.0.4",
    "vitest": "^1.4.0",
    "winston": "^3.10.0"
  },
--- a/packages/vue-generator/src/generator/vue/sfc/generateAttribute.js
+++ b/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}"`
  }
--- a/packages/vue-generator/src/plugins/genGlobalState.js
+++ b/packages/vue-generator/src/plugins/genGlobalState.js
@ -44,8 +44,8 @@ function genDependenciesPlugin(options = {}) {
          .map((item) => {
            let [key, value] = item

-            if (typeof value === 'string') {
-              value = `'${value}'`
+            if (value === '') {
+              value = "''"
            }

            if (value && typeof value === 'object') {
@ -57,19 +57,19 @@ function genDependenciesPlugin(options = {}) {
          .join(',')} })`

        const getterExpression = Object.entries(getters)
-          .filter((item) => item[1]?.type === 'JSFunction')
+          .filter((item) => item.value?.type === 'JSFunction')
          .map(([key, value]) => `${key}: ${value.value}`)
          .join(',')

        const actionExpressions = Object.entries(actions)
-          .filter((item) => item[1]?.type === 'JSFunction')
+          .filter((item) => item.value?.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} }
--- a/packages/vue-generator/test/testcases/generator/expected/appdemo01/src/stores/index.js
+++ b/packages/vue-generator/test/testcases/generator/expected/appdemo01/src/stores/index.js
@ -1 +0,0 @@
-export { testState } from './testState'
--- a/packages/vue-generator/test/testcases/generator/expected/appdemo01/src/stores/testState.js
+++ b/packages/vue-generator/test/testcases/generator/expected/appdemo01/src/stores/testState.js
@ -1,27 +0,0 @@
-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
-    }
-  }
-})
--- a/packages/vue-generator/test/testcases/generator/mockData.js
+++ b/packages/vue-generator/test/testcases/generator/mockData.js
@ -676,43 +676,7 @@ export const appSchemaDemo01 = {
      value: 'function dataHanlder(res){\n return res;\n}'
    }
  },
-  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}'
-        }
-      }
-    }
-  ],
+  globalState: [],
  utils: [
    {
      name: 'axios',
--- a/packages/vue-generator/test/testcases/sfc/case06/case06.test.js
+++ b/packages/vue-generator/test/testcases/sfc/case06/case06.test.js
@ -1,12 +0,0 @@
-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')
-})
--- a/packages/vue-generator/test/testcases/sfc/case06/components-map.json
+++ b/packages/vue-generator/test/testcases/sfc/case06/components-map.json
@ -1,9 +0,0 @@
-[
-  {
-    "componentName": "TinyTree",
-    "exportName": "Tree",
-    "package": "@opentiny/vue",
-    "version": "^3.10.0",
-    "destructuring": true
-  }
-]
--- a/packages/vue-generator/test/testcases/sfc/case06/expected/slotTest.vue
+++ b/packages/vue-generator/test/testcases/sfc/case06/expected/slotTest.vue
@ -1,54 +0,0 @@
-<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>
--- a/packages/vue-generator/test/testcases/sfc/case06/page.schema.json
+++ b/packages/vue-generator/test/testcases/sfc/case06/page.schema.json
@ -1,143 +0,0 @@
-{
-  "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"
-        }
-      ]
-    }
-  ]
-}
--- a/packages/vue-generator/vite.config.mjs
+++ b/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/**', 'node_modules'],
+    exclude: ['**/result/**'],
    watchExclude: ['**/result/**']
  },
  resolve: {
--- a/scripts/buildMaterials.mjs
+++ b/scripts/buildMaterials.mjs
@ -12,10 +12,7 @@ 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()

@ -25,7 +22,6 @@ 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 })
 }

 /**
@ -99,7 +95,6 @@ const generateComponents = () => {
      }
      const { components = [], snippets = [], blocks = [] } = bundle.data.materials
      const componentsMap = []
-      const packagesMap = []
      const appInfoBlocksLabels = appInfo.blockHistories.map((item) => item.label)

      files.forEach((file) => {
@ -156,26 +151,8 @@ const generateComponents = () => {

        appInfo.materialHistory.components = componentsMap

-        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)
-        }
+        write(bundle)
      })
-
-      appSchema.data.componentsMap = packagesMap
-      write(bundle)
    })

    logger.success('物料资产包构建成功')
--- a/scripts/setup.js
+++ b/scripts/setup.js
@ -1,3 +1,3 @@
 const { exec } = require('child_process')

-exec('pnpm -F @opentiny/tiny-engine-controller -F @opentiny/tiny-engine-dsl-vue build')
+exec('pnpm -F @opentiny/tiny-engine-dsl-vue build')