From d518e042fabd51ac3bfb91e41d123d4fdb6642ed Mon Sep 17 00:00:00 2001
From: rhlin <r.h.lin@163.com>
Date: Thu, 20 Jun 2024 01:41:34 -0700
Subject: [PATCH 1/5] =?UTF-8?q?feat:=20canvas=20=E5=85=83=E5=BA=94?=
 =?UTF-8?q?=E7=94=A8=E6=94=B9=E9=80=A02=20=EF=BC=88=E6=8A=BD=E5=8F=96Canva?=
 =?UTF-8?q?sLayout=EF=BC=8C=E9=9D=A2=E5=8C=85=E5=B1=91=E5=AF=BC=E8=88=AA?=
 =?UTF-8?q?=E5=8E=BB=E9=99=A4=E5=85=83=E5=BA=94=E7=94=A8=EF=BC=8Capi?=
 =?UTF-8?q?=E7=A7=BB=E5=8A=A8=E5=88=B0engine.canvas=E9=A1=B6=E5=B1=82=20?=
 =?UTF-8?q?=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/canvas/DesignCanvas/index.js         |  5 ++-
 .../canvas/DesignCanvas/src/DesignCanvas.vue  | 38 +++++++------------
 .../src/api/index.js                          |  0
 .../src/api/useCanvas.js                      |  0
 packages/canvas/breadcrumb/index.js           |  7 +---
 packages/canvas/breadcrumb/meta.js            |  3 --
 ...{CanvasFooter.vue => CanvasBreadcrumb.vue} | 15 ++++++--
 packages/canvas/container/index.js            |  5 +--
 .../canvas/drag-drop/src/CanvasDragItem.vue   |  2 +-
 packages/canvas/index.js                      | 11 +++++-
 packages/canvas/layout/index.js               |  7 ++++
 packages/canvas/layout/meta.js                |  3 ++
 packages/canvas/layout/src/CanvasLayout.vue   | 20 ++++++++++
 13 files changed, 71 insertions(+), 45 deletions(-)
 rename packages/canvas/{container => DesignCanvas}/src/api/index.js (100%)
 rename packages/canvas/{container => DesignCanvas}/src/api/useCanvas.js (100%)
 delete mode 100644 packages/canvas/breadcrumb/meta.js
 rename packages/canvas/breadcrumb/src/{CanvasFooter.vue => CanvasBreadcrumb.vue} (83%)
 create mode 100644 packages/canvas/layout/index.js
 create mode 100644 packages/canvas/layout/meta.js
 create mode 100644 packages/canvas/layout/src/CanvasLayout.vue

diff --git a/packages/canvas/DesignCanvas/index.js b/packages/canvas/DesignCanvas/index.js
index db70c726d7..6ccffa2de8 100644
--- a/packages/canvas/DesignCanvas/index.js
+++ b/packages/canvas/DesignCanvas/index.js
@@ -1,7 +1,8 @@
 import DesignCanvas from './src/DesignCanvas.vue'
 import metaData from './meta'
-
+import api from './src/api'
 export default {
   ...metaData,
-  entry: DesignCanvas
+  entry: DesignCanvas,
+  apis: api()
 }
diff --git a/packages/canvas/DesignCanvas/src/DesignCanvas.vue b/packages/canvas/DesignCanvas/src/DesignCanvas.vue
index 87c8714d9f..2ac1eb9d3d 100644
--- a/packages/canvas/DesignCanvas/src/DesignCanvas.vue
+++ b/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
diff --git a/packages/canvas/container/src/api/index.js b/packages/canvas/DesignCanvas/src/api/index.js
similarity index 100%
rename from packages/canvas/container/src/api/index.js
rename to packages/canvas/DesignCanvas/src/api/index.js
diff --git a/packages/canvas/container/src/api/useCanvas.js b/packages/canvas/DesignCanvas/src/api/useCanvas.js
similarity index 100%
rename from packages/canvas/container/src/api/useCanvas.js
rename to packages/canvas/DesignCanvas/src/api/useCanvas.js
diff --git a/packages/canvas/breadcrumb/index.js b/packages/canvas/breadcrumb/index.js
index 062f0f28c3..914ab8f14e 100644
--- a/packages/canvas/breadcrumb/index.js
+++ b/packages/canvas/breadcrumb/index.js
@@ -1,6 +1 @@
-import CanvasBreadcrumb from './src/CanvasFooter.vue'
-import metaData from './meta'
-export default {
-  ...metaData,
-  entry: CanvasBreadcrumb
-}
+export { default as CanvasBreadcrumb } from './src/CanvasBreadcrumb.vue'
diff --git a/packages/canvas/breadcrumb/meta.js b/packages/canvas/breadcrumb/meta.js
deleted file mode 100644
index 0f554d5c28..0000000000
--- a/packages/canvas/breadcrumb/meta.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export default {
-  id: 'engine.canvas.breadcrumb'
-}
diff --git a/packages/canvas/breadcrumb/src/CanvasFooter.vue b/packages/canvas/breadcrumb/src/CanvasBreadcrumb.vue
similarity index 83%
rename from packages/canvas/breadcrumb/src/CanvasFooter.vue
rename to packages/canvas/breadcrumb/src/CanvasBreadcrumb.vue
index af7afecd09..3235abc0ff 100644
--- a/packages/canvas/breadcrumb/src/CanvasFooter.vue
+++ b/packages/canvas/breadcrumb/src/CanvasBreadcrumb.vue
@@ -1,13 +1,14 @@
 <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 {
@@ -15,13 +16,21 @@ export default {
     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>
 
diff --git a/packages/canvas/container/index.js b/packages/canvas/container/index.js
index a799ecc99b..1cc5930465 100644
--- a/packages/canvas/container/index.js
+++ b/packages/canvas/container/index.js
@@ -1,8 +1,7 @@
 import CanvasContainer from './src/CanvasContainer.vue'
 import metaData from './meta'
-import api from './src/api'
+
 export default {
   ...metaData,
-  entry: CanvasContainer,
-  apis: api()
+  entry: CanvasContainer
 }
diff --git a/packages/canvas/drag-drop/src/CanvasDragItem.vue b/packages/canvas/drag-drop/src/CanvasDragItem.vue
index b5859d583e..9d5a3f201a 100644
--- a/packages/canvas/drag-drop/src/CanvasDragItem.vue
+++ b/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)
diff --git a/packages/canvas/index.js b/packages/canvas/index.js
index 265c74e15c..0ec3200f5d 100644
--- a/packages/canvas/index.js
+++ b/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]
 }
diff --git a/packages/canvas/layout/index.js b/packages/canvas/layout/index.js
new file mode 100644
index 0000000000..9a3382240d
--- /dev/null
+++ b/packages/canvas/layout/index.js
@@ -0,0 +1,7 @@
+import CanvasLayout from './src/CanvasLayout.vue'
+import metaData from './meta'
+
+export default {
+  ...metaData,
+  entry: CanvasLayout
+}
diff --git a/packages/canvas/layout/meta.js b/packages/canvas/layout/meta.js
new file mode 100644
index 0000000000..5d429a5074
--- /dev/null
+++ b/packages/canvas/layout/meta.js
@@ -0,0 +1,3 @@
+export default {
+  id: 'engine.canvas.layout'
+}
diff --git a/packages/canvas/layout/src/CanvasLayout.vue b/packages/canvas/layout/src/CanvasLayout.vue
new file mode 100644
index 0000000000..9523b1bcd1
--- /dev/null
+++ b/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>

From 453ef78a4a7590448776e25a52a7e2d10e72102b Mon Sep 17 00:00:00 2001
From: rhlin <r.h.lin@163.com>
Date: Fri, 21 Jun 2024 01:16:06 -0700
Subject: [PATCH 2/5] =?UTF-8?q?fix:=20=E8=A7=A3=E5=86=B3code=20check?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/engine-cli/src/commands/create.js                    | 1 +
 packages/settings/props/src/components/inputs/CodeEditor.vue  | 2 +-
 packages/settings/props/src/components/modal/ModalContent.vue | 2 +-
 3 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/engine-cli/src/commands/create.js b/packages/engine-cli/src/commands/create.js
index 4fe7885a74..d51718878c 100644
--- a/packages/engine-cli/src/commands/create.js
+++ b/packages/engine-cli/src/commands/create.js
@@ -24,6 +24,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`)
   )
diff --git a/packages/settings/props/src/components/inputs/CodeEditor.vue b/packages/settings/props/src/components/inputs/CodeEditor.vue
index b495131c7b..26797093f4 100644
--- a/packages/settings/props/src/components/inputs/CodeEditor.vue
+++ b/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 { getExample, useCanvas, useProperties } from '@opentiny/tiny-engine-controller'
diff --git a/packages/settings/props/src/components/modal/ModalContent.vue b/packages/settings/props/src/components/modal/ModalContent.vue
index ca839fc67d..c3cf88970c 100644
--- a/packages/settings/props/src/components/modal/ModalContent.vue
+++ b/packages/settings/props/src/components/modal/ModalContent.vue
@@ -42,7 +42,7 @@ export default {
       default: 0
     }
   },
-  setup(props, { emit }) {
+  setup(props) {
     const { resState } = useResource()
 
     const propertyList = computed(() => {

From b13aff330e01645be31a7056e1be8217feb908ff Mon Sep 17 00:00:00 2001
From: rhlin <r.h.lin@163.com>
Date: Mon, 24 Jun 2024 23:49:42 -0700
Subject: [PATCH 3/5] =?UTF-8?q?fix:=20=E4=BF=AE=E6=AD=A3=E5=BC=95=E7=94=A8?=
 =?UTF-8?q?=E8=B7=AF=E5=BE=84=E9=94=99=E8=AF=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/canvas/breadcrumb/index.js | 2 +-
 packages/canvas/breadcrumb/meta.js  | 3 +++
 packages/canvas/index.js            | 4 ++--
 3 files changed, 6 insertions(+), 3 deletions(-)
 create mode 100644 packages/canvas/breadcrumb/meta.js

diff --git a/packages/canvas/breadcrumb/index.js b/packages/canvas/breadcrumb/index.js
index 4d330c4146..0d1a629c99 100644
--- a/packages/canvas/breadcrumb/index.js
+++ b/packages/canvas/breadcrumb/index.js
@@ -1,5 +1,5 @@
 import { HOOK_NAME } from '@opentiny/tiny-engine-entry'
-import CanvasBreadcrumb from './src/CanvasFooter.vue'
+import CanvasBreadcrumb from './src/CanvasBreadcrumb.vue'
 import metaData from './meta'
 import useBreadcrumb from './src/useBreadcrumb'
 
diff --git a/packages/canvas/breadcrumb/meta.js b/packages/canvas/breadcrumb/meta.js
new file mode 100644
index 0000000000..0f554d5c28
--- /dev/null
+++ b/packages/canvas/breadcrumb/meta.js
@@ -0,0 +1,3 @@
+export default {
+  id: 'engine.canvas.breadcrumb'
+}
diff --git a/packages/canvas/index.js b/packages/canvas/index.js
index 0ec3200f5d..2d2d5f5cd0 100644
--- a/packages/canvas/index.js
+++ b/packages/canvas/index.js
@@ -9,7 +9,7 @@
  * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
  *
  */
-import { CanvasBreadcrumb } from './breadcrumb'
+import CanvasBreadcrumb from './breadcrumb'
 export { createRender } from './render'
 export { CanvasDragItem } from './drag-drop'
 
@@ -26,5 +26,5 @@ export default {
     CanvasBreadcrumb
   },
   layout: CanvasLayout,
-  metas: [CanvasContainer]
+  metas: [CanvasContainer, CanvasBreadcrumb]
 }

From b7523ce0f0a420197b036fad27605f72c3bd8ee3 Mon Sep 17 00:00:00 2001
From: rhlin <r.h.lin@163.com>
Date: Tue, 25 Jun 2024 03:01:33 -0700
Subject: [PATCH 4/5] =?UTF-8?q?fix:=20=E8=A7=A3=E5=86=B3=E8=A7=A3=E5=86=B3?=
 =?UTF-8?q?merge=E8=BF=87=E7=A8=8B=E4=B8=AD=E6=96=87=E4=BB=B6=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9=E4=B8=A2=E5=A4=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/canvas/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/canvas/index.js b/packages/canvas/index.js
index 2d2d5f5cd0..32a34eb1af 100644
--- a/packages/canvas/index.js
+++ b/packages/canvas/index.js
@@ -23,7 +23,7 @@ export { CanvasContainer, CanvasLayout, DesignCanvas }
 export default {
   ...DesignCanvas,
   components: {
-    CanvasBreadcrumb
+    CanvasBreadcrumb: CanvasBreadcrumb.entry
   },
   layout: CanvasLayout,
   metas: [CanvasContainer, CanvasBreadcrumb]

From 4722d1a814622b486dd0ce2eabaaf0cee025bbf2 Mon Sep 17 00:00:00 2001
From: rhlin <r.h.lin@163.com>
Date: Thu, 27 Jun 2024 22:08:31 -0700
Subject: [PATCH 5/5] =?UTF-8?q?fix(canvas):=20=E4=BF=AE=E5=A4=8D=E5=85=83?=
 =?UTF-8?q?=E5=BA=94=E7=94=A8=E6=94=B9=E9=80=A02=E9=81=97=E7=95=99?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../canvas/DesignCanvas/src/DesignCanvas.vue  | 21 +------------------
 packages/canvas/layout/src/CanvasLayout.vue   | 19 +++++++++++++++++
 2 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/packages/canvas/DesignCanvas/src/DesignCanvas.vue b/packages/canvas/DesignCanvas/src/DesignCanvas.vue
index 2ac1eb9d3d..9e5adb4334 100644
--- a/packages/canvas/DesignCanvas/src/DesignCanvas.vue
+++ b/packages/canvas/DesignCanvas/src/DesignCanvas.vue
@@ -11,7 +11,7 @@
       ></component>
     </template>
     <template #footer>
-      <component :is="CanvasBreadcrumb" :data="footData" @click="selectFooterNode"></component>
+      <component :is="CanvasBreadcrumb" :data="footData"></component>
     </template>
   </component>
 </template>
@@ -184,22 +184,3 @@ export default {
   }
 }
 </script>
-
-<style lang="less" scoped>
-#canvas-wrap {
-  background: var(--ti-lowcode-canvas-wrap-bg);
-  flex: 1 1 0;
-  border: none;
-  display: flex;
-  justify-content: center;
-  position: relative;
-
-  .site-canvas {
-    background: var(--ti-lowcode-breadcrumb-hover-bg);
-    position: absolute;
-    overflow: hidden;
-    margin: 18px 0;
-    transform-origin: top;
-  }
-}
-</style>
diff --git a/packages/canvas/layout/src/CanvasLayout.vue b/packages/canvas/layout/src/CanvasLayout.vue
index 9523b1bcd1..ff407552de 100644
--- a/packages/canvas/layout/src/CanvasLayout.vue
+++ b/packages/canvas/layout/src/CanvasLayout.vue
@@ -18,3 +18,22 @@ const siteCanvasStyle = computed(() => {
   }
 })
 </script>
+
+<style lang="less" scoped>
+#canvas-wrap {
+  background: var(--ti-lowcode-canvas-wrap-bg);
+  flex: 1 1 0;
+  border: none;
+  display: flex;
+  justify-content: center;
+  position: relative;
+
+  .site-canvas {
+    background: var(--ti-lowcode-breadcrumb-hover-bg);
+    position: absolute;
+    overflow: hidden;
+    margin: 18px 0;
+    transform-origin: top;
+  }
+}
+</style>