feat: support config previewURL by registry

Author: chilingling

packages/common/js/preview.js

@@ -30,6 +30,9 @@ const { deepClone } = utils
 // 保存预览窗口引用
 let previewWindow = null
 
+// 创建 BroadcastChannel 实例用于通信
+const previewChannel = new BroadcastChannel('tiny-engine-preview-channel')
+
 const getScriptAndStyleDeps = () => {
   const { scripts, styles } = useMaterial().getCanvasDeps()
   const utilsDeps = useResource().getUtilsDeps()
@@ -99,46 +102,29 @@ const sendSchemaUpdate = (data) => {
   )
 }
 
-// 监听来自预览页面的消息
-const setupMessageListener = () => {
-  window.addEventListener('message', async (event) => {
-    // 确保消息来源安全
-    if (event.origin === window.location.origin || event.origin.includes(window.location.hostname)) {
-      const { event: eventType, source } = event.data || {}
-      // 通过 heartbeat 消息来重新建立连接，避免刷新页面后 previewWindow 为 null
-      if (source === 'preview' && eventType === 'heartbeat' && !previewWindow) {
-        previewWindow = event.source
-      }
+let hasSchemaChangeListener = false
 
-      if (source === 'preview' && eventType === 'onMounted' && previewWindow) {
-        const params = await getSchemaParams()
-        sendSchemaUpdate(params)
-      }
-    }
+const cleanupSchemaChangeListener = () => {
+  const { unsubscribe } = useMessage()
+  unsubscribe({
+    topic: 'schemaChange',
+    subscriber: 'preview-communication'
+  })
+  unsubscribe({
+    topic: 'schemaImport',
+    subscriber: 'preview-communication'
+  })
+  unsubscribe({
+    topic: 'pageOrBlockInit',
+    subscriber: 'preview-communication'
   })
+  hasSchemaChangeListener = false
 }
 
-// 初始化消息监听
-setupMessageListener()
-
-let schemaChangeListener = null
 const handleSchemaChange = async () => {
-  const { unsubscribe } = useMessage()
   // 如果预览窗口不存在或已关闭，则取消订阅
   if (!previewWindow || previewWindow.closed) {
-    unsubscribe({
-      topic: 'schemaChange',
-      subscriber: 'preview-communication'
-    })
-    unsubscribe({
-      topic: 'schemaImport',
-      subscriber: 'preview-communication'
-    })
-    unsubscribe({
-      topic: 'pageOrBlockInit',
-      subscriber: 'preview-communication'
-    })
-    schemaChangeListener = null
+    cleanupSchemaChangeListener()
     return
   }
 
@@ -149,13 +135,13 @@ const handleSchemaChange = async () => {
 // 设置监听 schemaChange 事件，自动发送更新到预览页面
 export const setupSchemaChangeListener = () => {
   // 如果已经存在监听，则取消之前的监听
-  if (schemaChangeListener) {
+  if (hasSchemaChangeListener) {
     return
   }
 
   const { subscribe } = useMessage()
 
-  schemaChangeListener = subscribe({
+  subscribe({
     topic: 'schemaChange',
     subscriber: 'preview-communication',
     // 防抖更新，防止因为属性变化频繁触发
@@ -173,8 +159,39 @@ export const setupSchemaChangeListener = () => {
     subscriber: 'preview-communication',
     callback: handleSchemaChange
   })
+
+  hasSchemaChangeListener = true
 }
 
+// 监听来自预览页面的消息
+const setupMessageListener = () => {
+  window.addEventListener('message', async (event) => {
+    // 确保消息来源安全
+    if (event.origin === window.location.origin || event.origin.includes(window.location.hostname)) {
+      const { event: eventType, source } = event.data || {}
+      // 通过 heartbeat 消息来重新建立连接，避免刷新页面后 previewWindow 为 null
+      if (source === 'preview' && eventType === 'connect' && !previewWindow) {
+        previewWindow = event.source
+        setupSchemaChangeListener()
+      }
+
+      if (source === 'preview' && eventType === 'onMounted' && previewWindow) {
+        const params = await getSchemaParams()
+        sendSchemaUpdate(params)
+      }
+    }
+  })
+
+  // 可能是刷新，需要重新建立连接
+  previewChannel.postMessage({
+    event: 'connect',
+    source: 'designer'
+  })
+}
+
+// 初始化消息监听
+setupMessageListener()
+
 const handleHistoryPreview = (params, url) => {
   let historyPreviewWindow = null
   const handlePreviewReady = (event) => {
@@ -241,7 +258,20 @@ const open = (params = {}, isHistory = false) => {
 
   let openUrl = ''
 
-  openUrl = isDevelopEnv ? `./preview.html?${query}` : `${href.endsWith('/') ? href : `${href}/`}preview?${query}`
+  // 从预览组件配置获取自定义URL
+  const customPreviewUrl = getMergeMeta('engine.toolbars.preview')?.options?.previewUrl
+  const defaultPreviewUrl = isDevelopEnv ? `./preview.html` : `${href.endsWith('/') ? href : `${href}/`}preview`
+
+  if (customPreviewUrl) {
+    // 如果配置了自定义预览URL，则使用自定义URL
+    openUrl =
+      typeof customPreviewUrl === 'function'
+        ? customPreviewUrl(defaultPreviewUrl, query)
+        : `${customPreviewUrl}?${query}`
+  } else {
+    // 否则使用默认生成的URL
+    openUrl = `${defaultPreviewUrl}?${query}`
+  }
 
   if (isHistory) {
     handleHistoryPreview({ ...params, scripts, styles }, openUrl)

packages/design-core/src/preview/src/preview/usePreviewCommunication.ts

@@ -4,43 +4,29 @@ interface PreviewCommunicationOptions {
 }
 
 let onSchemaReceivedAction: PreviewCommunicationOptions['onSchemaReceived'] | null = null
+// 创建 BroadcastChannel 实例，与主页面通信
+let previewChannel: BroadcastChannel | null = null
 
 const handleMessage = async (event: MessageEvent) => {
   if (event.origin === window.location.origin || event.origin.includes(window.location.hostname)) {
     const { type, data, source } = event.data || {}
 
-    if (source === 'designer' && type === 'schema' && data) {
-      if (onSchemaReceivedAction) {
-        await onSchemaReceivedAction(data)
-      }
+    if (source === 'designer' && type === 'schema' && data && onSchemaReceivedAction) {
+      await onSchemaReceivedAction(data)
     }
   }
 }
 
-let heartbeatTimer: ReturnType<typeof setTimeout> | undefined = undefined
-let retryTimes = 0
-let loadInitialData: PreviewCommunicationOptions['loadInitialData'] | null = null
-
-// 心跳重连，防止主页面刷新之后，丢失子页面实例
-const heartbeat = () => {
-  const opener = window.opener
-  if (retryTimes > 10) {
-    clearTimeout(heartbeatTimer)
-    return
+const handleBroadcastMessage = async (event: MessageEvent) => {
+  const { event: eventType, source } = event.data || {}
+  // 初始化了，重新建立连接
+  if (source === 'designer' && eventType === 'connect' && window.opener) {
+    window.opener.postMessage({ event: 'connect', source: 'preview' }, '*')
   }
-
-  if (!opener) {
-    retryTimes++
-  }
-
-  if (opener) {
-    retryTimes = 0
-    opener.postMessage({ event: 'heartbeat', source: 'preview' }, '*')
-  }
-
-  heartbeatTimer = setTimeout(heartbeat, 1000)
 }
 
+let loadInitialData: PreviewCommunicationOptions['loadInitialData'] | null = null
+
 const sendReadyMessage = () => {
   // 尝试获取父窗口引用
   const opener = window.opener
@@ -57,7 +43,12 @@ const sendReadyMessage = () => {
 const cleanupCommunication = () => {
   // 移除消息监听器
   window.removeEventListener('message', handleMessage)
-  clearTimeout(heartbeatTimer)
+
+  // 关闭 BroadcastChannel
+  if (previewChannel) {
+    previewChannel.close()
+    previewChannel = null
+  }
 }
 
 const initCommunication = () => {
@@ -70,7 +61,9 @@ const initCommunication = () => {
   const isHistory = new URLSearchParams(location.search).get('history')
 
   if (!isHistory && window.opener) {
-    heartbeatTimer = setTimeout(heartbeat, 1000)
+    // 初始化 BroadcastChannel
+    previewChannel = new BroadcastChannel('tiny-engine-preview-channel')
+    previewChannel.onmessage = handleBroadcastMessage
   }
 }
 

packages/toolbars/preview/meta.js

@@ -6,6 +6,7 @@ export default {
     icon: {
       default: 'preview'
     },
-    renderType: 'icon'
+    renderType: 'icon',
+    previewUrl: ''
   }
 }

packages/toolbars/preview/src/Main.vue

@@ -2,7 +2,7 @@
   <div class="toolbar-save">
     <toolbar-base
       content="预览页面"
-      :icon="options.icon.default || options.icon"
+      :icon="options.icon?.default || options?.icon"
       :options="options"
       @click-api="preview"
     >