Feat/layout (opentiny#575)

* feat:add layout

* feat: 调整layout导入

* feat: 把DesignCanvas移到canvas

* feat: 暂时不改entry

* fix: 添加注释

designer-demo/registry.js

@@ -40,8 +40,8 @@ import {
   Props,
   Events,
   Styles,
-  CanvasBreadcrumb,
-  CanvasContainer
+  Layout,
+  Canvas
 } from '@opentiny/tiny-engine'
 
 export default {
@@ -52,7 +52,7 @@ export default {
     scripts: [],
     styles: []
   },
-  layout: { id: 'engine.layout' },
+  layout: Layout,
   themes: [
     {
       id: 'engine.theme.light'
@@ -77,28 +77,8 @@ export default {
     Setting,
     Lang
   ],
-  plugins: [
-    Materials,
-    Tree,
-    Page,
-    Block,
-    Datasource,
-    Bridge,
-    I18n,
-    Script,
-    Data,
-    Schema,
-    Help,
-    Robot
-  ],
+  plugins: [Materials, Tree, Page, Block, Datasource, Bridge, I18n, Script, Data, Schema, Help, Robot],
   dsls: [{ id: 'engine.dsls.dslvue' }],
-  settings: [
-    Props,
-    Styles,
-    Events
-  ],
-  canvas: [
-    CanvasContainer,
-    CanvasBreadcrumb
-  ]
+  settings: [Props, Styles, Events],
+  canvas: Canvas
 }

packages/canvas/DesignCanvas/index.js

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

packages/canvas/DesignCanvas/meta.js

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

packages/design-core/src/layout/DesignCanvas.vue → packages/canvas/DesignCanvas/src/DesignCanvas.vue

@@ -45,8 +45,9 @@ const componentType = {
 
 export default {
   setup() {
-    const CanvasContainer = getMergeRegistry('canvas')[0]
-    const CanvasBreadcrumb = getMergeRegistry('canvas')[1]
+    // 暂时这么处理
+    const CanvasContainer = getMergeRegistry('canvas').metas[0]
+    const CanvasBreadcrumb = getMergeRegistry('canvas').metas[1]
     const footData = ref([])
     const showMask = ref(true)
     const canvasRef = ref(null)

packages/canvas/index.js

@@ -15,5 +15,9 @@ export { CanvasDragItem } from './drag-drop'
 // meta app
 import CanvasBreadcrumb from './breadcrumb'
 import CanvasContainer from './container'
+import DesignCanvas from './DesignCanvas'
 
-export { CanvasBreadcrumb, CanvasContainer }
+export default {
+  ...DesignCanvas,
+  metas: [CanvasContainer, CanvasBreadcrumb]
+}

packages/controller/src/hooks/mountHooks.js

@@ -1,4 +1,3 @@
-import './useLayout'
 import './useApp'
 import './useResource'
 import './useHistory'

packages/design-core/index.js

@@ -30,8 +30,8 @@ export { default as Robot } from '@opentiny/tiny-engine-plugin-robot'
 export { default as Props } from '@opentiny/tiny-engine-setting-props'
 export { default as Events } from '@opentiny/tiny-engine-setting-events'
 export { default as Styles } from '@opentiny/tiny-engine-setting-styles'
-export { CanvasBreadcrumb, CanvasContainer } from '@opentiny/tiny-engine-canvas'
-
+export { default as Layout } from '@opentiny/tiny-engine-layout'
+export { default as Canvas } from '@opentiny/tiny-engine-canvas'
 export { initPreview } from './src/preview/src/main'
 
 export { default as defaultRegistry } from './registry'

packages/design-core/src/App.vue

@@ -0,0 +1,16 @@
+<template>
+  <component :is="registry.layout.component" :registry="registry"></component>
+</template>
+
+<script>
+import { getMergeRegistry } from '@opentiny/tiny-engine-entry'
+
+export default {
+  setup() {
+    const registry = getMergeRegistry()
+    return {
+      registry
+    }
+  }
+}
+</script>

packages/design-core/src/init.js

@@ -19,7 +19,7 @@ import { initHttp } from '@opentiny/tiny-engine-http'
 import TinyThemeTool from '@opentiny/vue-theme/theme-tool'
 import { tinySmbTheme } from '@opentiny/vue-theme/theme' // SMB 主题
 import { defineEntry, mergeRegistry } from '@opentiny/tiny-engine-entry'
-import App from './layout/App.vue'
+import App from './App.vue'
 import defaultRegistry from '../registry.js'
 import { registerConfigurators } from './registerConfigurators'
 

packages/layout/index.js

@@ -1,5 +1,6 @@
-import component from './src/index.vue'
+import component from './src/Main.vue'
 import metaData from './meta'
+import './src/hooks/useLayout'
 
 export default {
   ...metaData,

packages/layout/package.json

@@ -12,7 +12,12 @@
   ],
   "dependencies": {
     "@opentiny/tiny-engine-entry": "workspace:*",
-    "vue": "3.2.45"
+    "vue": "3.2.45",
+    "@opentiny/vue": "~3.14.0",
+    "@opentiny/vue-icon": "~3.14.0",
+    "@opentiny/vue-design-smb": "~3.14.0",
+    "@opentiny/vue-renderless": "~3.14.0",
+    "@opentiny/vue-theme": "~3.14.0"
   },
   "devDependencies": {
     "@opentiny/tiny-engine-vite-plugin-meta-comments": "workspace:*",

packages/design-core/src/layout/DesignPlugins.vue → packages/layout/src/DesignPlugins.vue

@@ -58,7 +58,7 @@
       >
         <div>
           <span class="item-icon">
-            <img class="chatgpt-icon" src="../../assets/AI.png" />
+            <img class="chatgpt-icon" src="../assets/AI.png" />
           </span>
         </div>
       </li>
@@ -96,7 +96,6 @@
 import { reactive, ref, watch } from 'vue'
 import { Popover, Tooltip } from '@opentiny/vue'
 import { useLayout, usePage } from '@opentiny/tiny-engine-controller'
-import { getMergeRegistry } from '@opentiny/tiny-engine-entry'
 import { PublicIcon } from '@opentiny/tiny-engine-common'
 
 export default {
@@ -108,11 +107,14 @@ export default {
   props: {
     renderPanel: {
       type: String
+    },
+    plugins: {
+      type: Array,
+      default: () => []
     }
   },
   emits: ['click', 'node-click'],
   setup(props, { emit }) {
-    const plugins = getMergeRegistry('plugins')
     const components = {}
     const iconComponents = {}
     const pluginRef = ref(null)
@@ -127,7 +129,7 @@ export default {
       layoutState: { plugins: pluginsState }
     } = useLayout()
 
-    plugins.forEach(({ id, component, api, icon }) => {
+    props.plugins.forEach(({ id, component, api, icon }) => {
       components[id] = component
       iconComponents[id] = icon
       if (api) {
@@ -141,9 +143,9 @@ export default {
 
     const state = reactive({
       prevIdex: -2,
-      topNavLists: plugins.filter((item) => item.align === 'top'),
-      bottomNavLists: plugins.filter((item) => item.align === 'bottom'),
-      independence: plugins.find((item) => item.align === 'independence')
+      topNavLists: props.plugins.filter((item) => item.align === 'top'),
+      bottomNavLists: props.plugins.filter((item) => item.align === 'bottom'),
+      independence: props.plugins.find((item) => item.align === 'independence')
     })
 
     const doCompleted = () => {
@@ -158,7 +160,7 @@ export default {
       state.prevIdex = index
 
       // 切换插件与关闭插件时确认
-      const lastPlugin = plugins.find((item) => item.id === props.renderPanel)
+      const lastPlugin = props.plugins.find((item) => item.id === props.renderPanel)
       if (props.renderPanel && lastPlugin?.confirm) {
         const confirmCallback = (result) =>
           result &&

packages/design-core/src/layout/DesignSettings.vue → packages/layout/src/DesignSettings.vue

@@ -13,23 +13,25 @@
 import { computed, ref } from 'vue'
 import { Tabs, TabItem } from '@opentiny/vue'
 import { useLayout } from '@opentiny/tiny-engine-controller'
-import { getMergeRegistry } from '@opentiny/tiny-engine-entry'
 
 export default {
   components: {
     TinyTabs: Tabs,
     TinyTabItem: TabItem
   },
-
+  props: {
+    settings: {
+      type: Array,
+      default: () => []
+    }
+  },
   setup() {
     const { layoutState } = useLayout()
-    const settings = getMergeRegistry('settings')
     const activating = computed(() => layoutState.settings.activating)
     const showMask = ref(true)
 
     return {
       showMask,
-      settings,
       activating,
       layoutState
     }

packages/design-core/src/layout/DesignToolbars.vue → packages/layout/src/DesignToolbars.vue

@@ -19,21 +19,26 @@
 import { reactive, nextTick } from 'vue'
 import { useLayout } from '@opentiny/tiny-engine-controller'
 import { ProgressBar } from '@opentiny/tiny-engine-common'
-import { getMergeRegistry } from '@opentiny/tiny-engine-entry'
 
 export default {
   components: {
     ProgressBar
   },
-  setup() {
+  props: {
+    toolbars: {
+      type: Array,
+      default: () => []
+    }
+  },
+  setup(props) {
     const leftBar = []
     const rightBar = []
     const centerBar = []
     const state = reactive({
       showDeployBlock: false
     })
 
-    getMergeRegistry('toolbars').forEach((item) => {
+    props.toolbars.forEach((item) => {
       if (item.align === 'right') {
         rightBar.push(item)
       } else if (item.align === 'center') {

packages/design-core/src/layout/App.vue → packages/layout/src/Main.vue

@@ -1,16 +1,24 @@
 <template>
   <tiny-config-provider :design="designSmbConfig">
     <div id="tiny-engine">
-      <design-toolbars></design-toolbars>
+      <design-toolbars :toolbars="registry.toolbars"></design-toolbars>
       <div class="tiny-engine-main">
         <div class="tiny-engine-left-wrap">
           <div class="tiny-engine-content-wrap">
-            <design-plugins :render-panel="plugins.render" @click="toggleNav"></design-plugins>
-            <design-canvas></design-canvas>
+            <design-plugins
+              :plugins="registry.plugins"
+              :render-panel="plugins.render"
+              @click="toggleNav"
+            ></design-plugins>
+            <component :is="registry.canvas.component"></component>
           </div>
         </div>
         <div class="tiny-engine-right-wrap">
-          <design-settings v-show="layoutState.settings.showDesignSettings" ref="right"></design-settings>
+          <design-settings
+            :settings="registry.settings"
+            v-show="layoutState.settings.showDesignSettings"
+            ref="right"
+          ></design-settings>
         </div>
       </div>
     </div>
@@ -34,7 +42,6 @@ import AppManage from '@opentiny/tiny-engine-plugin-page'
 import { isVsCodeEnv } from '@opentiny/tiny-engine-controller/js/environments'
 import DesignToolbars from './DesignToolbars.vue'
 import DesignPlugins from './DesignPlugins.vue'
-import DesignCanvas from './DesignCanvas.vue'
 import DesignSettings from './DesignSettings.vue'
 import blockPlugin from '@opentiny/tiny-engine-plugin-block'
 import materials from '@opentiny/tiny-engine-plugin-materials'
@@ -51,7 +58,6 @@ export default {
   components: {
     DesignToolbars,
     DesignPlugins,
-    DesignCanvas,
     DesignSettings,
     TinyConfigProvider
   },
@@ -60,7 +66,11 @@ export default {
       editor: this
     }
   },
-
+  props: {
+    registry: {
+      type: Object
+    }
+  },
   setup() {
     const state = reactive({
       globalClass: '',