fix: breadcrumb plugin cannot work in preview mode (#612)

* fix: move useBreadcrumb to correct dir

designer-demo/src/preview.js

@@ -10,7 +10,7 @@
  *
  */
 
-import { initHook, HOOK_NAME, GenerateCodeService } from '@opentiny/tiny-engine'
+import { initHook, HOOK_NAME, GenerateCodeService, Breadcrumb, Media, Lang } from '@opentiny/tiny-engine'
 import { initPreview } from '@opentiny/tiny-engine'
 import 'virtual:svg-icons-register'
 import '@opentiny/tiny-engine-theme'
@@ -23,11 +23,10 @@ initPreview({
   registry: {
     root: {
       id: 'engine.root',
-      metas: [
-        GenerateCodeService
-      ]
+      metas: [GenerateCodeService]
     },
-    config: { id : 'engine.config', theme: 'light' },
+    config: { id: 'engine.config', theme: 'light' },
+    toolbars: [Breadcrumb, Media, Lang]
   },
   lifeCycles: {
     beforeAppCreate

packages/canvas/breadcrumb/index.js

@@ -1,13 +1 @@
-import { HOOK_NAME } from '@opentiny/tiny-engine-meta-register'
-import CanvasBreadcrumb from './src/CanvasBreadcrumb.vue'
-import metaData from './meta'
-import useBreadcrumb from './src/useBreadcrumb'
-
-export default {
-  ...metaData,
-  apis: useBreadcrumb(),
-  entry: CanvasBreadcrumb,
-  composable: {
-    name: HOOK_NAME.useBreadcrumb
-  }
-}
+export { default as CanvasBreadcrumb } from './src/CanvasBreadcrumb.vue'

packages/canvas/breadcrumb/meta.js

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

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'
 
@@ -23,8 +23,8 @@ export { CanvasContainer, CanvasLayout, DesignCanvas }
 export default {
   ...DesignCanvas,
   components: {
-    CanvasBreadcrumb: CanvasBreadcrumb.entry
+    CanvasBreadcrumb
   },
   layout: CanvasLayout,
-  metas: [CanvasContainer, CanvasBreadcrumb]
+  metas: [CanvasContainer]
 }

packages/design-core/index.js

@@ -1,7 +1,7 @@
 export { init } from './src/init'
 
 // reexport all plugin, user can import ondemand
-export { default as Breadcrumb } from '@opentiny/tiny-engine-toolbar-breadcrumb'
+export { default as Breadcrumb, BreadcrumbService } from '@opentiny/tiny-engine-toolbar-breadcrumb'
 export { default as Fullscreen } from '@opentiny/tiny-engine-toolbar-fullscreen'
 export { default as Lang } from '@opentiny/tiny-engine-toolbar-lang'
 export { default as Checkinout } from '@opentiny/tiny-engine-toolbar-checkinout'
@@ -30,7 +30,7 @@ export { default as Robot } from '@opentiny/tiny-engine-plugin-robot'
 export { default as Props, PropertiesService, PropertyService } 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 { default as Layout, LayoutService } from '@opentiny/tiny-engine-layout'
 export { default as Canvas } from '@opentiny/tiny-engine-canvas'
 export { initPreview } from './src/preview/src/main'
 export { GenerateCodeService } from '@opentiny/tiny-engine-common'

packages/design-core/src/preview/src/Toolbar.vue

@@ -14,23 +14,11 @@
 </template>
 
 <script lang="jsx">
-import { defineAsyncComponent } from 'vue'
-// import { useBreadcrumb } from '@opentiny/tiny-engine-meta-register'
-import { getMergeRegistry } from '@opentiny/tiny-engine-meta-register'
+import { useBreadcrumb, getMergeRegistry } from '@opentiny/tiny-engine-meta-register'
 import { Switch as TinySwitch } from '@opentiny/vue'
-// import { getSearchParams } from './preview/http'
+import { getSearchParams } from './preview/http'
 import { BROADCAST_CHANNEL } from '../src/preview/srcFiles/constant'
 import { injectDebugSwitch } from './preview/debugSwitch'
-import BreadcrumbPlugin from '@opentiny/tiny-engine-toolbar-breadcrumb'
-import LangPlugin from '@opentiny/tiny-engine-toolbar-lang'
-import MediaPlugin from '@opentiny/tiny-engine-toolbar-media'
-
-const _getToolbars = (pluginId) => {
-  return defineAsyncComponent(() =>
-    // FIXME: preview 这里其实有单独的入口，拿到的注册表是空的
-    Promise.resolve(getMergeRegistry('toolbars')?.find((t) => t.id === pluginId)?.component || <span></span>)
-  )
-}
 
 export default {
   components: {
@@ -38,17 +26,13 @@ export default {
   },
   setup() {
     const debugSwitch = injectDebugSwitch()
-    const _tools = ['breadcrumb', 'lang', 'media']
-    const [Breadcrumb, ChangeLang, ToolbarMedia] = [
-      BreadcrumbPlugin.component,
-      LangPlugin.component,
-      MediaPlugin.component
-    ]
+    const Breadcrumb = getMergeRegistry('toolbars', 'engine.toolbars.breadcrumb')?.entry
+    const ChangeLang = getMergeRegistry('toolbars', 'engine.toolbars.lang')?.entry
+    const ToolbarMedia = null // TODO: Media plugin rely on layout/canvas. Further processing is required.
 
-    // FIXME: 这里 breadcrumb 改错了，移动到了 canvas 里面，实际属于 toolbar/breadcrumb
-    // const { setBreadcrumbPage } = useBreadcrumb()
-    // const { pageInfo } = getSearchParams()
-    // setBreadcrumbPage([pageInfo?.name])
+    const { setBreadcrumbPage } = useBreadcrumb()
+    const { pageInfo } = getSearchParams()
+    setBreadcrumbPage([pageInfo?.name])
 
     const setViewPort = (item) => {
       const iframe = document.getElementsByClassName('iframe-container')[0]

packages/toolbars/breadcrumb/index.js

@@ -12,8 +12,12 @@
 
 import entry from './src/Main.vue'
 import metaData from './meta'
+import { BreadcrumbService } from './src/composable'
 
 export default {
   ...metaData,
-  entry
+  entry,
+  metas: [BreadcrumbService]
 }
+
+export { BreadcrumbService }

packages/toolbars/breadcrumb/src/composable/index.js

@@ -0,0 +1,11 @@
+import { HOOK_NAME } from '@opentiny/tiny-engine-meta-register'
+import useBreadcrumb from './useBreadcrumb'
+
+export const BreadcrumbService = {
+  id: 'engine.service.breadcrumb',
+  type: 'MetaService',
+  apis: useBreadcrumb(),
+  composable: {
+    name: HOOK_NAME.useBreadcrumb
+  }
+}