Feat/layout

designer-demo/registry.js

@@ -40,6 +40,10 @@ import {
   Props,
   Events,
   Styles,
+  Layout,
+  Canvas,
+  CanvasContainer,
+  CanvasFooter
 } from '@opentiny/tiny-engine'
 
 export default {
@@ -50,7 +54,7 @@ export default {
     scripts: [],
     styles: []
   },
-  layout: { id: 'engine.layout' },
+  layout: Layout,
   themes: [
     {
       id: 'engine.theme.light'
@@ -90,10 +94,12 @@ export default {
     Robot
   ],
   dsls: [{ id: 'engine.dsls.dslvue' }],
-  settings: [
-    Props,
-    Styles,
-    Events
-  ],
-  canvas: {}
+  settings: [Props, Styles, Events],
+  canvas: {
+    ...Canvas,
+    component: {
+      CanvasContainer,
+      CanvasFooter
+    }
+  }
 }

packages/controller/src/hooks/mountHooks.js

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

packages/design-core/index.js

@@ -30,7 +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 { default as Layout } from '@opentiny/tiny-engine-layout'
+export { metaData as Canvas, CanvasContainer, CanvasFooter } 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/DesignCanvas.vue → packages/layout/src/DesignCanvas.vue

@@ -1,21 +1,30 @@
 <template>
   <div id="canvas-wrap" ref="canvasRef">
     <div ref="siteCanvas" class="site-canvas" :style="siteCanvasStyle">
-      <canvas-container
+      <component
+        :is="canvas.component.CanvasContainer"
         :controller="controller"
         :materials-panel="materialsPanel"
         :canvas-src="canvasUrl"
         @remove="removeNode"
         @selected="nodeSelected"
-      ></canvas-container>
+      ></component>
+      <!-- <canvas-container
+        :controller="controller"
+        :materials-panel="materialsPanel"
+        :canvas-src="canvasUrl"
+        @remove="removeNode"
+        @selected="nodeSelected"
+      ></canvas-container> -->
     </div>
-    <footer-bar :data="footData" @click="selectFooterNode"></footer-bar>
+    <component :is="canvas.component.CanvasFooter" :data="footData" @click="selectFooterNode"></component>
+    <!-- <footer-bar :data="footData" @click="selectFooterNode"></footer-bar> -->
   </div>
 </template>
 
 <script>
 import { ref, watch, computed, onUnmounted } from 'vue'
-import { CanvasContainer, CanvasFooter } from '@opentiny/tiny-engine-canvas'
+// import { CanvasContainer, CanvasFooter } from '@opentiny/tiny-engine-canvas'
 import {
   useProperties,
   useCanvas,
@@ -44,8 +53,13 @@ const componentType = {
 
 export default {
   components: {
-    CanvasContainer,
-    FooterBar: CanvasFooter
+    // CanvasContainer,
+    // FooterBar: CanvasFooter////
+  },
+  props: {
+    canvas: {
+      type: Object
+    }
   },
   setup() {
     const footData = ref([])

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,7 @@
 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 { getMergeRegistry } from '@opentiny/tiny-engine-entry'
 import { PublicIcon } from '@opentiny/tiny-engine-common'
 
 export default {
@@ -108,11 +108,15 @@ export default {
   props: {
     renderPanel: {
       type: String
+    },
+    plugins: {
+      type: Array,
+      default: () => []
     }
   },
   emits: ['click', 'node-click'],
   setup(props, { emit }) {
-    const plugins = getMergeRegistry('plugins')
+    // const plugins = getMergeRegistry('plugins')
     const components = {}
     const iconComponents = {}
     const pluginRef = ref(null)
@@ -127,7 +131,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 +145,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 +162,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/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>
+            <design-canvas :canvas="registry.canvas"></design-canvas>
           </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>
@@ -60,7 +68,11 @@ export default {
       editor: this
     }
   },
-
+  props: {
+    registry: {
+      type: Object
+    }
+  },
   setup() {
     const state = reactive({
       globalClass: '',