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

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

* fix: 解决code check问题

* fix: 修正引用路径错误

* fix: 解决解决merge过程中文件修改丢失
---
 packages/canvas/DesignCanvas/index.js         |  9 ++++-
 .../canvas/DesignCanvas/src/DesignCanvas.vue  | 38 +++++++------------
 .../src/api/index.js                          |  0
 .../src/api/useCanvas.js                      |  0
 packages/canvas/breadcrumb/index.js           |  2 +-
 ...{CanvasFooter.vue => CanvasBreadcrumb.vue} | 15 ++++++--
 packages/canvas/container/index.js            |  8 +---
 .../canvas/drag-drop/src/CanvasDragItem.vue   |  2 +-
 packages/canvas/index.js                      |  9 ++++-
 packages/canvas/layout/index.js               |  7 ++++
 packages/canvas/layout/meta.js                |  3 ++
 packages/canvas/layout/src/CanvasLayout.vue   | 20 ++++++++++
 packages/controller/js/constants.js           | 22 +++++------
 packages/controller/js/example.js             | 20 +++++-----
 packages/controller/src/composable/index.js   |  1 -
 packages/engine-cli/src/commands/create.js    |  1 +
 .../engine-cli/template/designer/registry.js  |  7 +---
 .../template/designer/src/preview.js          |  2 +-
 packages/layout/index.js                      |  2 +-
 .../plugins/block/src/composable/useBlock.js  |  8 +---
 packages/plugins/datasource/index.js          |  4 +-
 .../src/components/inputs/CodeEditor.vue      |  2 +-
 .../src/components/modal/ModalContent.vue     |  2 +-
 packages/utils/src/utils/index.js             |  2 +-
 24 files changed, 104 insertions(+), 82 deletions(-)
 rename packages/canvas/{container => DesignCanvas}/src/api/index.js (100%)
 rename packages/canvas/{container => DesignCanvas}/src/api/useCanvas.js (100%)
 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 db70c726d..04d2cc3d7 100644
--- a/packages/canvas/DesignCanvas/index.js
+++ b/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
+  }
 }
diff --git a/packages/canvas/DesignCanvas/src/DesignCanvas.vue b/packages/canvas/DesignCanvas/src/DesignCanvas.vue
index 87c8714d9..2ac1eb9d3 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 4d330c414..0d1a629c9 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/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 af7afecd0..3235abc0f 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 455020b06..1cc593046 100644
--- a/packages/canvas/container/index.js
+++ b/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
 }
diff --git a/packages/canvas/drag-drop/src/CanvasDragItem.vue b/packages/canvas/drag-drop/src/CanvasDragItem.vue
index b5859d583..9d5a3f201 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 265c74e15..32a34eb1a 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,
+  components: {
+    CanvasBreadcrumb: CanvasBreadcrumb.entry
+  },
+  layout: CanvasLayout,
   metas: [CanvasContainer, CanvasBreadcrumb]
 }
diff --git a/packages/canvas/layout/index.js b/packages/canvas/layout/index.js
new file mode 100644
index 000000000..9a3382240
--- /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 000000000..5d429a507
--- /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 000000000..9523b1bcd
--- /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>
diff --git a/packages/controller/js/constants.js b/packages/controller/js/constants.js
index 7717f6338..f0e0f3f38 100644
--- a/packages/controller/js/constants.js
+++ b/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'
-}
\ No newline at end of file
+}
diff --git a/packages/controller/js/example.js b/packages/controller/js/example.js
index c9a49717e..3ceeef454 100644
--- a/packages/controller/js/example.js
+++ b/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 = {
diff --git a/packages/controller/src/composable/index.js b/packages/controller/src/composable/index.js
index c5d2174be..5ced9ced6 100644
--- a/packages/controller/src/composable/index.js
+++ b/packages/controller/src/composable/index.js
@@ -20,4 +20,3 @@ export const EditorInfoService = {
     name: HOOK_NAME.useEditorInfo
   }
 }
-
diff --git a/packages/engine-cli/src/commands/create.js b/packages/engine-cli/src/commands/create.js
index b2b2d1d14..6d98cb97d 100644
--- a/packages/engine-cli/src/commands/create.js
+++ b/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`)
   )
diff --git a/packages/engine-cli/template/designer/registry.js b/packages/engine-cli/template/designer/registry.js
index d4554db72..afacc37d5 100644
--- a/packages/engine-cli/template/designer/registry.js
+++ b/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',
diff --git a/packages/engine-cli/template/designer/src/preview.js b/packages/engine-cli/template/designer/src/preview.js
index 3fc45bd53..21d79b799 100644
--- a/packages/engine-cli/template/designer/src/preview.js
+++ b/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
diff --git a/packages/layout/index.js b/packages/layout/index.js
index 4a3ecac87..0fd60be68 100644
--- a/packages/layout/index.js
+++ b/packages/layout/index.js
@@ -5,7 +5,7 @@ import { LayoutService } from './src/composable'
 export default {
   ...metaData,
   component,
-  metas: [LayoutService],
+  metas: [LayoutService]
 }
 
 export { LayoutService }
diff --git a/packages/plugins/block/src/composable/useBlock.js b/packages/plugins/block/src/composable/useBlock.js
index af7714ec6..b530d81c0 100644
--- a/packages/plugins/block/src/composable/useBlock.js
+++ b/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
 
diff --git a/packages/plugins/datasource/index.js b/packages/plugins/datasource/index.js
index 598c9e753..38557ebf4 100644
--- a/packages/plugins/datasource/index.js
+++ b/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 }
diff --git a/packages/settings/props/src/components/inputs/CodeEditor.vue b/packages/settings/props/src/components/inputs/CodeEditor.vue
index 402bbeec6..ac20fc344 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 { 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 1155b3891..6b3d2736e 100644
--- a/packages/settings/props/src/components/modal/ModalContent.vue
+++ b/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(() => {
diff --git a/packages/utils/src/utils/index.js b/packages/utils/src/utils/index.js
index da6e869f5..d7f16ddf2 100644
--- a/packages/utils/src/utils/index.js
+++ b/packages/utils/src/utils/index.js
@@ -380,4 +380,4 @@ export const string2Obj = (string) => {
   }
 
   return obj
-}
\ No newline at end of file
+}