feat: canvas 元应用改造2 （抽取CanvasLayout，面包屑导航去除元应用，api移动到engine.canvas顶层 ）

packages/canvas/DesignCanvas/index.js

@@ -1,7 +1,12 @@
+import { HOOK_NAME } from '@opentiny/tiny-engine-entry'
 import DesignCanvas from './src/DesignCanvas.vue'
 import metaData from './meta'
-
+import api from './src/api'
 export default {
   ...metaData,
-  entry: DesignCanvas
+  entry: DesignCanvas,
+  apis: api(),
+  composable: {
+    name: HOOK_NAME.useCanvas
+  }
 }

packages/canvas/DesignCanvas/src/DesignCanvas.vue

@@ -1,6 +1,6 @@
 <template>
-  <div id="canvas-wrap" ref="canvasRef">
-    <div ref="siteCanvas" class="site-canvas" :style="siteCanvasStyle">
+  <component :is="CanvasLayout">
+    <template #container>
       <component
         :is="CanvasContainer.entry"
         :controller="controller"
@@ -9,13 +9,15 @@
         @remove="removeNode"
         @selected="nodeSelected"
       ></component>
-    </div>
-    <component :is="CanvasBreadcrumb.entry" :data="footData" @click="selectFooterNode"></component>
-  </div>
+    </template>
+    <template #footer>
+      <component :is="CanvasBreadcrumb" :data="footData" @click="selectFooterNode"></component>
+    </template>
+  </component>
 </template>
 
 <script>
-import { ref, watch, computed, onUnmounted } from 'vue'
+import { ref, watch, onUnmounted } from 'vue'
 import {
   useProperties,
   useCanvas,
@@ -45,9 +47,10 @@ const componentType = {
 
 export default {
   setup() {
-    // 暂时这么处理
-    const CanvasContainer = getMergeRegistry('canvas').metas[0]
-    const CanvasBreadcrumb = getMergeRegistry('canvas').metas[1]
+    const registry = getMergeRegistry('canvas')
+    const { CanvasBreadcrumb } = registry.components
+    const CanvasLayout = registry.layout.entry
+    const [CanvasContainer] = registry.metas
     const footData = ref([])
     const showMask = ref(true)
     const canvasRef = ref(null)
@@ -60,14 +63,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]) => {
@@ -144,12 +139,6 @@ export default {
       toolbars.visiblePopover = false
     }
 
-    const selectFooterNode = ({ node }) => {
-      const { selectNode } = useCanvas().canvasApi.value
-
-      selectNode(node)
-    }
-
     let canvasResizeObserver = null
     watch(
       () => [useCanvas().isCanvasApiReady.value, canvasRef.value],
@@ -176,7 +165,6 @@ export default {
       removeNode,
       canvasUrl,
       nodeSelected,
-      selectFooterNode,
       footData,
       materialsPanel: materials.entry,
       showMask,
@@ -188,7 +176,7 @@ export default {
         request: useHttp(),
         ast
       },
-      siteCanvasStyle,
+      CanvasLayout,
       canvasRef,
       CanvasContainer,
       CanvasBreadcrumb

packages/canvas/breadcrumb/src/CanvasFooter.vue → packages/canvas/breadcrumb/src/CanvasBreadcrumb.vue

@@ -1,27 +1,36 @@
 <template>
   <div id="tiny-bottom-panel">
     <div class="content">
-      <tiny-steps v-show="data.length > 0" :data="data" @click="(index, node) => $emit('click', node)"></tiny-steps>
+      <tiny-steps v-show="data.length > 0" :data="data" @click="(_index, node) => selectFooterNode(node)"></tiny-steps>
       <div v-show="data.length <= 0" class="tip">没有选中的节点</div>
     </div>
   </div>
 </template>
 
 <script>
+import { getPluginApi } from '@opentiny/tiny-engine-entry'
 import { Steps } from '@opentiny/vue'
 
 export default {
   components: {
     TinySteps: Steps
   },
   props: {
-    // TODO: 待整改为自己去api获取信息， 元应用只应该支持配置项不应该支持获取动态数据
     data: {
       type: Array,
       default: () => []
     }
   },
-  emits: ['click']
+  emits: ['click'],
+  setup() {
+    const { selectNode } = getPluginApi('engine.canvas').canvasApi.value
+    const selectFooterNode = ({ node }) => {
+      selectNode(node)
+    }
+    return {
+      selectFooterNode
+    }
+  }
 }
 </script>
 

packages/canvas/container/index.js

@@ -1,13 +1,7 @@
-import { HOOK_NAME } from '@opentiny/tiny-engine-entry'
 import CanvasContainer from './src/CanvasContainer.vue'
 import metaData from './meta'
-import api from './src/api'
 
 export default {
   ...metaData,
-  entry: CanvasContainer,
-  apis: api(),
-  composable: {
-    name: HOOK_NAME.useCanvas
-  }
+  entry: CanvasContainer
 }

packages/canvas/drag-drop/src/CanvasDragItem.vue

@@ -16,7 +16,7 @@ export default {
   },
   emits: ['click'],
   setup(props, { emit }) {
-    const canvasApi = getPluginApi('engine.canvas.container').canvasApi
+    const canvasApi = getPluginApi('engine.canvas').canvasApi
     const dragstart = (e) => {
       if (props.data && canvasApi.value?.dragStart) {
         const data = deepClone(props.data)

packages/canvas/index.js

@@ -9,15 +9,22 @@
  * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
  *
  */
+import { CanvasBreadcrumb } from './breadcrumb'
 export { createRender } from './render'
 export { CanvasDragItem } from './drag-drop'
 
 // meta app
-import CanvasBreadcrumb from './breadcrumb'
 import CanvasContainer from './container'
+import CanvasLayout from './layout'
 import DesignCanvas from './DesignCanvas'
 
+export { CanvasContainer, CanvasLayout, DesignCanvas }
+
 export default {
   ...DesignCanvas,
-  metas: [CanvasContainer, CanvasBreadcrumb]
+  components: {
+    CanvasBreadcrumb
+  },
+  layout: CanvasLayout,
+  metas: [CanvasContainer]
 }

packages/canvas/layout/index.js

@@ -0,0 +1,7 @@
+import CanvasLayout from './src/CanvasLayout.vue'
+import metaData from './meta'
+
+export default {
+  ...metaData,
+  entry: CanvasLayout
+}

packages/canvas/layout/meta.js

@@ -0,0 +1,3 @@
+export default {
+  id: 'engine.canvas.layout'
+}

packages/canvas/layout/src/CanvasLayout.vue

@@ -0,0 +1,20 @@
+<template>
+  <div id="canvas-wrap" ref="canvasRef">
+    <div ref="siteCanvas" class="site-canvas" :style="siteCanvasStyle">
+      <slot name="container"></slot>
+    </div>
+    <slot name="footer"></slot>
+  </div>
+</template>
+<script setup>
+import { computed } from 'vue'
+import { useLayout } from '@opentiny/tiny-engine-controller'
+
+const siteCanvasStyle = computed(() => {
+  const { scale } = useLayout().getDimension()
+  return {
+    height: `calc((100% - var(--base-bottom-panel-height, 30px) - 36px) / ${scale})`,
+    transform: `scale(${scale})`
+  }
+})
+</script>

packages/controller/js/constants.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.
+ *
+ */
 
 export const COMPONENT_NAME = {
   Page: 'Page',
@@ -94,4 +94,4 @@ export const PROP_DATA_TYPE = {
   JSEXPRESSION: 'JSExpression',
   JSRESOURCE: 'JSResource',
   JSSLOT: 'JSSlot'
-}
+}

packages/controller/js/example.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.
+ *
+ */
 
 // 编辑器输入示例
 const exampleMap = {

packages/controller/src/composable/index.js

@@ -20,4 +20,3 @@ export const EditorInfoService = {
     name: HOOK_NAME.useEditorInfo
   }
 }
-

packages/engine-cli/src/commands/create.js

@@ -19,6 +19,7 @@ export default function (name) {
   const sourcePath = path.join(__dirname, '../template/designer/')
   const destPath = path.join(cwd(), name)
   fs.copySync(sourcePath, destPath)
+  // eslint-disable-next-line no-console
   console.log(
     chalk.green(`create finish, run the follow command to start project: \ncd ${name} && npm install && npm run dev`)
   )

packages/engine-cli/template/designer/registry.js

@@ -43,16 +43,13 @@ import {
   Layout,
   Canvas,
   EditorInfoService,
-  AppService,
+  AppService
 } from '@opentiny/tiny-engine'
 
 export default {
   root: {
     id: 'engine.root',
-    metas: [
-      EditorInfoService,
-      AppService
-    ]
+    metas: [EditorInfoService, AppService]
   },
   config: {
     id: 'engine.config',

packages/engine-cli/template/designer/src/preview.js

@@ -21,7 +21,7 @@ const beforeAppCreate = () => {
 
 initPreview({
   registry: {
-    config: { id : 'engine.config', theme: 'light' },
+    config: { id: 'engine.config', theme: 'light' }
   },
   lifeCycles: {
     beforeAppCreate

packages/entry/src/common.js

@@ -10,7 +10,7 @@
  *
  */
 
-import { initHook } from "./hooks"
+import { initHook } from './hooks'
 
 const vueLifeHook = [
   'onMounted',

packages/layout/index.js

@@ -5,7 +5,7 @@ import { LayoutService } from './src/composable'
 export default {
   ...metaData,
   component,
-  metas: [LayoutService],
+  metas: [LayoutService]
 }
 
 export { LayoutService }

packages/plugins/block/src/composable/useBlock.js

@@ -20,13 +20,7 @@ import { getMergeMeta } from '@opentiny/tiny-engine-entry'
 import { getCanvasStatus } from '@opentiny/tiny-engine-controller/js/canvas'
 import { ast2String, parseExpression } from '@opentiny/tiny-engine-controller/js/ast'
 import { getCssObjectFromStyleStr } from '@opentiny/tiny-engine-controller/js/css'
-import {
-  useCanvas,
-  useTranslate,
-  useEditorInfo,
-  useBreadcrumb,
-  useLayout
-} from '@opentiny/tiny-engine-entry'
+import { useCanvas, useTranslate, useEditorInfo, useBreadcrumb, useLayout } from '@opentiny/tiny-engine-entry'
 
 const { SORT_TYPE, SCHEMA_DATA_TYPE, BLOCK_OPENNESS } = constants
 

packages/plugins/datasource/index.js

@@ -18,9 +18,7 @@ import { DataSourceService } from './src/composable'
 export default {
   ...metaData,
   entry,
-  metas: [
-    DataSourceService
-  ]
+  metas: [DataSourceService]
 }
 
 export { fetchDataSourceList, fetchDataSourceDetail, DataSourceService }

packages/settings/props/src/components/inputs/CodeEditor.vue

@@ -34,7 +34,7 @@
 </template>
 
 <script>
-import { reactive, getCurrentInstance, h, ref, computed } from 'vue'
+import { reactive, getCurrentInstance, ref, computed } from 'vue'
 import { VueMonaco } from '@opentiny/tiny-engine-common'
 import { Button, Collapse, CollapseItem, DialogBox } from '@opentiny/vue'
 import { useCanvas, useProperties } from '@opentiny/tiny-engine-controller'

packages/settings/props/src/components/modal/ModalContent.vue

@@ -44,7 +44,7 @@ export default {
       default: 0
     }
   },
-  setup(props, { emit }) {
+  setup(props) {
     const { resState } = useResource()
 
     const propertyList = computed(() => {