opentiny · hexqi · Jun 8, 2024 · Jun 7, 2024
diff --git a/packages/design-core/.env.alpha → designer-demo/.env.alpha b/packages/design-core/.env.alpha → designer-demo/.env.alpha
diff --git a/packages/design-core/.env.development → designer-demo/.env.development b/packages/design-core/.env.development → designer-demo/.env.development
diff --git a/packages/design-core/.env.prod → designer-demo/.env.prod b/packages/design-core/.env.prod → designer-demo/.env.prod
diff --git a/packages/design-core/preview.html → designer-demo/preview.html b/packages/design-core/preview.html → designer-demo/preview.html
@@ -8,6 +8,6 @@
   </head>
   <body>
     <div id="app"></div>
-    <script type="module" src="./src/preview/src/main.js"></script>
+    <script type="module" src="./src/preview.js"></script>
   </body>
 </html>
diff --git a/designer-demo/src/preview.js b/designer-demo/src/preview.js
@@ -0,0 +1,15 @@
+/**
+ * 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.
+ *
+ */
+
+import { initPreview } from '@opentiny/tiny-engine'
+
+initPreview()
diff --git a/packages/design-core/index.js b/packages/design-core/index.js
@@ -30,3 +30,4 @@ 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 { initPreview } from './src/preview/src/main'
diff --git a/packages/design-core/src/preview/src/Toolbar.vue b/packages/design-core/src/preview/src/Toolbar.vue
@@ -21,9 +21,13 @@ import { Switch as TinySwitch } from '@opentiny/vue'
 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>)
   )
 }
@@ -35,7 +39,11 @@ export default {
   setup() {
     const debugSwitch = injectDebugSwitch()
     const tools = ['breadcrumb', 'lang', 'media']
-    const [Breadcrumb, ChangeLang, ToolbarMedia] = tools.map(getToolbars)
+    const [Breadcrumb, ChangeLang, ToolbarMedia] = [
+      BreadcrumbPlugin.component,
+      LangPlugin.component,
+      MediaPlugin.component
+    ]
 
     const { setBreadcrumbPage } = useBreadcrumb()
     const { pageInfo } = getSearchParams()
@@ -44,8 +52,11 @@ export default {
     const setViewPort = (item) => {
       const iframe = document.getElementsByClassName('iframe-container')[0]
       const app = document.getElementById('app')
-      iframe.style.width = item
-      iframe.style.margin = 'auto'
+
+      if (iframe) {
+        iframe.style.width = item
+        iframe.style.margin = 'auto'
+      }
       app.style.overflow = 'hidden'
     }
 

diff --git a/packages/design-core/src/preview/src/main.js b/packages/design-core/src/preview/src/main.js
@@ -15,8 +15,10 @@ import initSvgs from '@opentiny/tiny-engine-svgs'
 import App from './App.vue'
 import 'virtual:svg-icons-register'
 
-const app = createApp(App)
-
-initSvgs(app)
-
-app.mount('#app')
+export const initPreview = () => {
+  const app = createApp(App)
+
+  initSvgs(app)
+
+  app.mount('#app')
+}