diff --git a/docs/README.md b/docs/README.md
index 46f64c6d8..f9c9061ac 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -70,6 +70,7 @@
     - [全局布局API](./api/frontend-api/global-layout-api.md)
     - [物料API](./api/frontend-api/material-api.md)
     - [设置面板API](./api/frontend-api/settings-panel-api.md)
+    - [预览API](./api/frontend-api/preview-api.md)
   - 后端API
     - [AI功能接口](./api/backend-api/ai-function-api.md)
     - [应用管理](./api/backend-api/app-management.md)
diff --git a/docs/api/frontend-api/preview-api.md b/docs/api/frontend-api/preview-api.md
new file mode 100644
index 000000000..600abf2ed
--- /dev/null
+++ b/docs/api/frontend-api/preview-api.md
@@ -0,0 +1,65 @@
+# 页面预览相关配置项
+
+
+## 配置预览页面的跳转 url
+
+默认跳转逻辑（不配置）： 
+- dev 本地开发：跳转到 preview.html。比如跳转到: `http://localhost:8090/preview.html?...`
+- 生产环境：跳转到 /preview，比如跳转到： `https://opentiny.design/preview?...`
+
+如果二次开发平台想要跳转到不同的路由，则可以进行配置：
+
+### 直接配置 url
+
+适用场景：仅修改跳转 url，不修改 query 查询字符串部分，比如：
+
+```javascript
+import { Preview } from '@opentiny/tiny-engine'
+export default {
+   toolbars: [
+     [Preview, { options: { ...Preview.options,  previewUrl:  import.meta.env.MODE.includes('prod') ? 'http://tiny-engine-preview.com/customPreview' : '' } }]
+   ]
+}
+```
+
+配置完成之后，在生产环境，TinyEngine 会增加必要的 query部分，然后跳转到配置的 url，比如：`http://tiny-engine-preview.com/customPreview?tenant=1&id=1&...`。
+
+### 使用配置函数
+
+适用场景：需要增加自定义修改 query。可定制性高
+
+例如：
+```javascript
+import { Preview } from '@opentiny/tiny-engine'
+export default {
+   toolbars: [
+     [
+       Preview,
+       {
+          options: { 
+              ...Preview.options,
+              previewUrl: (originUrl, query) => {
+                // 这里我们增加了自定义的 query： `test=1`
+                return `http://tiny-engine-preview.com/customPreview?test=1&${query}`
+             }
+          }
+       }
+    ]
+   ]
+}
+```
+
+## 热更新可配置开关
+
+我们在 v2.5 版本中增加预览页面自动刷新的支持，如果您的业务中不需要预览页面自动刷新的热更新功能，可以在注册表中配置 `previewHotReload` 关掉：
+
+```javascript
+// preview.js
+
+initPreview({
+  registry: {
+    config: { id: 'engine.config', theme: 'light', previewHotReload: false },
+    // ... other config
+  }
+})
+```
diff --git a/docs/catalog.json b/docs/catalog.json
index 2e73140f4..3d8a3febc 100644
--- a/docs/catalog.json
+++ b/docs/catalog.json
@@ -125,7 +125,8 @@
                 { "title": "画布API", "name": "canvas-api.md" },
                 { "title": "全局布局API", "name": "global-layout-api.md" },
                 { "title": "物料API", "name": "material-api.md" },
-                { "title": "设置面板API", "name": "settings-panel-api.md" }
+                { "title": "设置面板API", "name": "settings-panel-api.md" },
+                { "title": "预览API", "name": "preview-api.md" }
               ]
             },
             {
diff --git a/packages/common/js/preview.js b/packages/common/js/preview.js
index 9b04a081d..6a62a749d 100644
--- a/packages/common/js/preview.js
+++ b/packages/common/js/preview.js
@@ -10,53 +10,295 @@
  *
  */
 
-import { constants } from '@opentiny/tiny-engine-utils'
+import { useThrottleFn } from '@vueuse/core'
+import {
+  useMaterial,
+  useResource,
+  useMessage,
+  useCanvas,
+  usePage,
+  useBlock,
+  getMetaApi,
+  META_SERVICE,
+  getMergeMeta
+} from '@opentiny/tiny-engine-meta-register'
+import { utils } from '@opentiny/tiny-engine-utils'
 import { isDevelopEnv } from './environments'
-import { useMaterial, useResource } from '@opentiny/tiny-engine-meta-register'
-// prefer old unicode hacks for backward compatibility
 
-const { COMPONENT_NAME } = constants
+const { deepClone } = utils
 
-export const utoa = (string) => btoa(unescape(encodeURIComponent(string)))
-
-export const atou = (base64) => decodeURIComponent(escape(atob(base64)))
-
-const open = (params = {}) => {
-  const paramsMap = new URLSearchParams(location.search)
-  params.app = paramsMap.get('id')
-  params.tenant = paramsMap.get('tenant')
+// 保存预览窗口引用
+let previewWindow = null
 
+const getScriptAndStyleDeps = () => {
   const { scripts, styles } = useMaterial().getCanvasDeps()
   const utilsDeps = useResource().getUtilsDeps()
 
-  params.scripts = [...scripts, ...utilsDeps].reduce((res, item) => {
+  const scriptsDeps = [...scripts, ...utilsDeps].reduce((res, item) => {
     res[item.package] = item.script
 
     return res
   }, {})
-  params.styles = [...styles]
+  const stylesDeps = [...styles]
+
+  return {
+    scripts: scriptsDeps,
+    styles: stylesDeps
+  }
+}
+
+const getSchemaParams = async () => {
+  const { isBlock, getPageSchema, getCurrentPage, getSchema } = useCanvas()
+  const isBlockPreview = isBlock()
+  const { scripts, styles } = getScriptAndStyleDeps()
+
+  if (isBlockPreview) {
+    const { getCurrentBlock } = useBlock()
+    const block = getCurrentBlock()
+
+    const latestPage = {
+      ...block,
+      page_content: getSchema()
+    }
+
+    return deepClone({
+      currentPage: latestPage,
+      ancestors: [],
+      scripts,
+      styles
+    })
+  }
+
+  const pageSchema = getPageSchema()
+  const currentPage = getCurrentPage()
+  const { getFamily } = usePage()
+  const latestPage = {
+    ...currentPage,
+    page_content: pageSchema
+  }
+
+  const ancestors = await getFamily(latestPage)
+
+  return deepClone({
+    currentPage: latestPage,
+    ancestors,
+    scripts,
+    styles
+  })
+}
+
+// 当 schema 变化时发送更新
+const sendSchemaUpdate = (data) => {
+  previewWindow.postMessage(
+    {
+      source: 'designer',
+      type: 'schema',
+      data
+    },
+    previewWindow.origin || window.location.origin
+  )
+}
+
+let hasSchemaChangeListener = false
+
+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
+}
+
+const handleSchemaChange = async () => {
+  // 如果预览窗口不存在或已关闭，则取消订阅
+  if (!previewWindow || previewWindow.closed) {
+    cleanupSchemaChangeListener()
+    previewWindow = null
+    return
+  }
+
+  const params = await getSchemaParams()
+  sendSchemaUpdate(params)
+}
+
+// 设置监听 schemaChange 事件，自动发送更新到预览页面
+export const setupSchemaChangeListener = () => {
+  // 如果已经存在监听，则取消之前的监听
+  if (hasSchemaChangeListener) {
+    return
+  }
+
+  const { subscribe } = useMessage()
+
+  subscribe({
+    topic: 'schemaChange',
+    subscriber: 'preview-communication',
+    // 防抖更新，防止因为属性变化频繁触发
+    callback: useThrottleFn(handleSchemaChange, 1000, true)
+  })
+
+  subscribe({
+    topic: 'schemaImport',
+    subscriber: 'preview-communication',
+    callback: useThrottleFn(handleSchemaChange, 1000, true)
+  })
+
+  subscribe({
+    topic: 'pageOrBlockInit',
+    subscriber: 'preview-communication',
+    callback: handleSchemaChange
+  })
+
+  hasSchemaChangeListener = true
+}
 
+// 监听来自预览页面的消息
+const setupMessageListener = () => {
+  window.addEventListener('message', async (event) => {
+    const parsedOrigin = new URL(event.origin)
+    const parsedHost = new URL(window.location.href)
+    // 确保消息来源安全
+    if (parsedOrigin.origin === parsedHost.origin || parsedOrigin.host === parsedHost.host) {
+      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)
+      }
+    }
+  })
+
+  // 创建 BroadcastChannel 实例用于通信
+  const previewChannel = new BroadcastChannel('tiny-engine-preview-channel')
+
+  // 可能是刷新，需要重新建立连接
+  previewChannel.postMessage({
+    event: 'connect',
+    source: 'designer'
+  })
+
+  previewChannel.close()
+}
+
+// 初始化消息监听
+setupMessageListener()
+
+const handleHistoryPreview = (params, url) => {
+  let historyPreviewWindow = null
+  const handlePreviewReady = (event) => {
+    if (event.origin === window.location.origin || event.origin.includes(window.location.hostname)) {
+      const { event: eventType, source } = event.data || {}
+      if (source === 'preview' && eventType === 'onMounted' && historyPreviewWindow) {
+        const { scripts, styles, ancestors = [], ...rest } = params
+
+        historyPreviewWindow.postMessage(
+          {
+            source: 'designer',
+            type: 'schema',
+            data: deepClone({
+              currentPage: rest,
+              ancestors,
+              scripts,
+              styles
+            })
+          },
+          previewWindow.origin || window.location.origin
+        )
+
+        // 历史页面不需要实时更新预览，发送完消息后移除监听
+        window.removeEventListener('message', handlePreviewReady)
+      }
+    }
+  }
+
+  window.addEventListener('message', handlePreviewReady)
+
+  historyPreviewWindow = window.open(url, '_blank')
+}
+
+const getQueryParams = (params = {}, isHistory = false) => {
+  const paramsMap = new URLSearchParams(location.search)
+  const tenant = paramsMap.get('tenant') || ''
+  const pageId = paramsMap.get('pageid')
+  const blockId = paramsMap.get('blockid')
+  const theme = getMetaApi(META_SERVICE.ThemeSwitch)?.getThemeState()?.theme
+  const framework = getMergeMeta('engine.config')?.dslMode
+  const platform = getMergeMeta('engine.config')?.platformId
+  const { scripts, styles } = getScriptAndStyleDeps()
+
+  let query = `tenant=${tenant}&id=${paramsMap.get('id')}&theme=${theme}&framework=${framework}`
+
+  query += `&platform=${platform}&scripts=${JSON.stringify(scripts)}&styles=${JSON.stringify(styles)}`
+
+  if (pageId) {
+    query += `&pageid=${pageId}`
+  }
+
+  if (blockId) {
+    query += `&blockid=${blockId}`
+  }
+
+  if (isHistory) {
+    query += `&history=${params.history}`
+  }
+
+  return query
+}
+
+const open = (params = {}, isHistory = false) => {
   const href = window.location.href.split('?')[0] || './'
-  const tenant = new URLSearchParams(location.search).get('tenant') || ''
+  const { scripts, styles } = getScriptAndStyleDeps()
+  const query = getQueryParams(params, isHistory)
+
   let openUrl = ''
-  const hashString = utoa(JSON.stringify(params))
 
-  openUrl = isDevelopEnv
-    ? `./preview.html?tenant=${tenant}#${hashString}`
-    : `${href.endsWith('/') ? href : `${href}/`}preview?tenant=${tenant}#${hashString}`
+  // 从预览组件配置获取自定义URL
+  const customPreviewUrl = getMergeMeta('engine.toolbars.preview')?.options?.previewUrl
+  const defaultPreviewUrl = isDevelopEnv ? `./preview.html` : `${href.endsWith('/') ? href : `${href}/`}preview`
 
-  const aTag = document.createElement('a')
-  aTag.href = openUrl
-  aTag.target = '_blank'
-  aTag.click()
-}
+  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)
+    return
+  }
+
+  if (previewWindow && !previewWindow.closed) {
+    // 如果预览窗口存在，则聚焦预览窗口
+    previewWindow.focus()
+    return
+  }
+
+  // 打开新窗口并保存引用
+  previewWindow = window.open(openUrl, '_blank')
 
-export const previewPage = (params = {}) => {
-  params.type = COMPONENT_NAME.Page
-  open(params)
+  // 设置 schemaChange 事件监听
+  setupSchemaChangeListener()
 }
 
-export const previewBlock = (params = {}) => {
-  params.type = COMPONENT_NAME.Block
-  open(params)
+export const previewPage = (params = {}, isHistory = false) => {
+  open(params, isHistory)
 }
diff --git a/packages/common/package.json b/packages/common/package.json
index 6985ae98e..c8b795e9b 100644
--- a/packages/common/package.json
+++ b/packages/common/package.json
@@ -39,6 +39,7 @@
     "@opentiny/tiny-engine-meta-register": "workspace:*",
     "@opentiny/tiny-engine-utils": "workspace:*",
     "@vue/shared": "^3.3.4",
+    "@vueuse/core": "^9.6.0",
     "axios": "~0.28.0",
     "css-tree": "^2.3.1",
     "eslint-linter-browserify": "8.57.0",
@@ -50,7 +51,6 @@
     "@opentiny/tiny-engine-vite-plugin-meta-comments": "workspace:*",
     "@vitejs/plugin-vue": "^5.1.2",
     "@vitejs/plugin-vue-jsx": "^4.0.1",
-    "@vueuse/core": "^9.6.0",
     "glob": "^10.3.4",
     "vite": "^5.4.2"
   },
diff --git a/packages/design-core/package.json b/packages/design-core/package.json
index f8ca8ee27..98e296d95 100644
--- a/packages/design-core/package.json
+++ b/packages/design-core/package.json
@@ -103,6 +103,7 @@
   "devDependencies": {
     "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
     "@esbuild-plugins/node-modules-polyfill": "^0.2.2",
+    "@types/babel__core": "^7.20.5",
     "@types/node": "^18.0.0",
     "@vitejs/plugin-vue": "^5.1.2",
     "@vitejs/plugin-vue-jsx": "^4.0.1",
diff --git a/packages/design-core/src/preview/src/Toolbar.vue b/packages/design-core/src/preview/src/Toolbar.vue
index 3c5c7c105..b6d1e95c9 100644
--- a/packages/design-core/src/preview/src/Toolbar.vue
+++ b/packages/design-core/src/preview/src/Toolbar.vue
@@ -14,11 +14,13 @@
 </template>
 
 <script lang="jsx">
+import { watch } from 'vue'
 import { useBreadcrumb, getMergeRegistry, getMergeMeta } from '@opentiny/tiny-engine-meta-register'
 import { Switch as TinySwitch } from '@opentiny/vue'
-import { getSearchParams } from './preview/http'
+import { constants } from '@opentiny/tiny-engine-utils'
 import { BROADCAST_CHANNEL } from '../src/preview/srcFiles/constant'
 import { injectDebugSwitch } from './preview/debugSwitch'
+import { previewState } from './preview/usePreviewData'
 
 export default {
   components: {
@@ -30,10 +32,18 @@ export default {
     const ChangeLang = getMergeRegistry('toolbars', 'engine.toolbars.lang')?.entry
     const langOptions = getMergeMeta('engine.toolbars.lang').options
     const ToolbarMedia = null // TODO: Media plugin rely on layout/canvas. Further processing is required.
+    const { setBreadcrumbPage, setBreadcrumbBlock } = useBreadcrumb()
 
-    const { setBreadcrumbPage } = useBreadcrumb()
-    const { pageInfo } = getSearchParams()
-    setBreadcrumbPage([pageInfo?.name])
+    watch(
+      () => previewState.currentPage,
+      (newVal) => {
+        if (newVal?.page_content?.componentName === constants.COMPONENT_NAME.Block) {
+          setBreadcrumbBlock([newVal?.name_cn || newVal?.page_content?.fileName])
+        } else {
+          setBreadcrumbPage([newVal?.name])
+        }
+      }
+    )
 
     const setViewPort = (item) => {
       const iframe = document.getElementsByClassName('iframe-container')[0]
diff --git a/packages/design-core/src/preview/src/preview/Preview.vue b/packages/design-core/src/preview/src/preview/Preview.vue
index 1df8775a6..6cb735512 100644
--- a/packages/design-core/src/preview/src/preview/Preview.vue
+++ b/packages/design-core/src/preview/src/preview/Preview.vue
@@ -14,17 +14,12 @@
 </template>
 
 <script>
-import { defineComponent, computed, defineAsyncComponent } from 'vue'
+import { defineComponent, computed, defineAsyncComponent, onMounted, onBeforeUnmount } from 'vue'
 import { Repl, ReplStore } from '@vue/repl'
-import vueJsx from '@vue/babel-plugin-jsx'
-import { transformSync } from '@babel/core'
-import { getMetaApi } from '@opentiny/tiny-engine-meta-register'
-import { getImportMap as getInitImportMap } from './importMap'
-import srcFiles from './srcFiles'
-import generateMetaFiles, { processAppJsCode } from './generate'
-import { getSearchParams, fetchMetaData, fetchImportMap, fetchAppSchema, fetchBlockSchema } from './http'
-import { PanelType, PreviewTips } from '../constant'
+import { getMergeMeta } from '@opentiny/tiny-engine-meta-register'
 import { injectDebugSwitch } from './debugSwitch'
+import { usePreviewCommunication } from './usePreviewCommunication'
+import { usePreviewData } from './usePreviewData'
 import '@vue/repl/style.css'
 
 const Monaco = defineAsyncComponent(() => import('@vue/repl/monaco-editor')) // 异步组件实现懒加载，打开debug后再加载
@@ -43,9 +38,6 @@ export default {
     const debugSwitch = injectDebugSwitch()
     const editorComponent = computed(() => (debugSwitch?.value ? Monaco : EmptyEditor))
     const store = new ReplStore()
-    const { getAllNestedBlocksSchema, generatePageCode } = getMetaApi('engine.service.generateCode')
-    const ROOT_ID = '0'
-
     const sfcOptions = {
       script: {
         // scirpt setup 编译后注入 import { * } from "vue"
@@ -61,162 +53,33 @@ export default {
       store['initTsConfig']() // 触发获取组件d.ts方便调试
     }
 
-    const queryParams = getSearchParams()
-    document.documentElement?.setAttribute?.('data-theme', queryParams.theme || 'light')
-
-    const getImportMap = async () => {
-      if (import.meta.env.VITE_LOCAL_BUNDLE_DEPS === 'true') {
-        const mapJSON = await fetchImportMap()
-        return {
-          imports: {
-            ...mapJSON.imports,
-            ...getSearchParams().scripts
-          }
-        }
-      }
-      return getInitImportMap()
-    }
-
-    const getFamilyPages = (appData) => {
-      const familyPages = []
-      const ancestors = queryParams.ancestors
-
-      if (queryParams.type === 'Block') {
-        familyPages.push({
-          panelName: 'Main.vue',
-          panelValue:
-            generatePageCode(queryParams.pageInfo?.schema, appData?.componentsMap || [], {
-              blockRelativePath: './'
-            }) || '',
-          panelType: 'vue',
-          index: true
-        })
-
-        return familyPages
-      }
-
-      if (!ancestors?.length || !appData?.componentsMap) {
-        return familyPages
-      }
+    const queryParams = new URLSearchParams(location.search)
+    document.documentElement?.setAttribute?.('data-theme', queryParams.get('theme') || 'light')
 
-      for (let i = 0; i < ancestors.length; i++) {
-        const nextPage = i < ancestors.length - 1 ? ancestors[i + 1].name : null
-        const panelValueAndType = {
-          panelValue:
-            generatePageCode(
-              ancestors[i].page_content,
-              appData?.componentsMap || [],
-              {
-                blockRelativePath: './'
-              },
-              nextPage
-            ) || '',
-          panelType: 'vue'
-        }
+    const { loadInitialData, updateUrl, updatePreview } = usePreviewData({ setFiles, store })
 
-        if (ancestors[i]?.parentId === ROOT_ID) {
-          familyPages.push({
-            ...panelValueAndType,
-            panelName: 'Main.vue',
-            index: true
-          })
-        } else {
-          familyPages.push({
-            ...panelValueAndType,
-            panelName: `${ancestors[i].name}.vue`,
-            index: false
-          })
-        }
+    let cleanupCommunicationAction = null
+    const onSchemaReceivedAction = async (data) => {
+      updateUrl(data.currentPage, { scripts: data.scripts, styles: data.styles })
+      const isHistory = new URLSearchParams(location.search).get('history')
+      const previewHotReload = getMergeMeta('engine.config').previewHotReload
+      // 如果是历史预览，则不需要实时预览，接收到消息之后直接取消监听(需要监听到第一次消息接受页面信息)
+      // 如果预览热更新关闭，则不需要实时预览
+      if (isHistory || previewHotReload === false) {
+        cleanupCommunicationAction()
       }
-
-      return familyPages
+      await updatePreview(data)
     }
 
-    const genAllBlocks = async (ancestors) => {
-      // blockSet 是为了防止重复出码同样的区块，同名区块只出码一遍
-      const blockSet = new Set()
-      const promises = ancestors.map((item) => getAllNestedBlocksSchema(item.page_content, fetchBlockSchema, blockSet))
-      const blocks = (await Promise.all(promises)).flat()
-      return blocks
-    }
-
-    const promiseList = [
-      fetchAppSchema(queryParams?.app),
-      fetchMetaData(queryParams),
-      genAllBlocks(queryParams.ancestors),
-      setFiles(srcFiles, 'src/Main.vue'),
-      getImportMap()
-    ]
-    Promise.all(promiseList).then(async ([appData, metaData, blocks, _void, importMapData]) => {
-      store.setImportMap(importMapData)
-
-      // TODO: 需要验证级联生成 block schema
-      // TODO: 物料内置 block 需要如何处理？
-      const pageCode = [
-        ...getFamilyPages(appData),
-        ...(blocks || []).map((blockSchema) => {
-          return {
-            panelName: `${blockSchema.fileName}.vue`,
-            panelValue: generatePageCode(blockSchema, appData?.componentsMap || [], { blockRelativePath: './' }) || '',
-            panelType: 'vue'
-          }
-        })
-      ]
-
-      // [@vue/repl] `Only lang="ts" is supported for <script> blocks.`
-      const langReg = /lang="jsx"/
-      const fixScriptLang = (generatedCode) => {
-        const fixedCode = { ...generatedCode }
-
-        if (generatedCode.panelType === PanelType.VUE) {
-          fixedCode.panelValue = generatedCode.panelValue.replace(langReg, '')
-        }
-
-        return fixedCode
-      }
-
-      const newFiles = store.getFiles()
-
-      const assignFiles = ({ panelName, panelValue, index }) => {
-        if (index) {
-          panelName = 'Main.vue'
-        }
-
-        const newPanelValue = panelValue.replace(/<script\s*setup\s*>([\s\S]*)<\/script>/, (match, p1) => {
-          if (!p1) {
-            // eslint-disable-next-line no-useless-escape
-            return '<script setup><\/script>'
-          }
-
-          const transformedScript = transformSync(p1, {
-            babelrc: false,
-            plugins: [[vueJsx, { pragma: 'h' }]],
-            sourceMaps: false,
-            configFile: false
-          })
-
-          const res = `<script setup>${transformedScript.code}`
-          // eslint-disable-next-line no-useless-escape
-          const endTag = '<\/script>'
-
-          return `${res}${endTag}`
-        })
-
-        newFiles[panelName] = newPanelValue
-      }
-
-      const appJsCode = processAppJsCode(newFiles['app.js'], queryParams.styles)
-
-      newFiles['app.js'] = appJsCode
-
-      pageCode.map(fixScriptLang).forEach(assignFiles)
+    const { initCommunication, cleanupCommunication } = usePreviewCommunication({
+      onSchemaReceived: onSchemaReceivedAction,
+      loadInitialData
+    })
 
-      const metaFiles = generateMetaFiles(metaData)
-      Object.assign(newFiles, metaFiles)
+    cleanupCommunicationAction = cleanupCommunication
 
-      setFiles(newFiles)
-      return PreviewTips.READY_FOR_PREVIEW
-    })
+    onMounted(initCommunication)
+    onBeforeUnmount(cleanupCommunication)
 
     return {
       store,
diff --git a/packages/design-core/src/preview/src/preview/generate.js b/packages/design-core/src/preview/src/preview/generate.js
index e2db5a967..5a3fa4694 100644
--- a/packages/design-core/src/preview/src/preview/generate.js
+++ b/packages/design-core/src/preview/src/preview/generate.js
@@ -151,7 +151,19 @@ const compatibleI18n = (i18n) => {
  * @returns
  */
 export const processAppJsCode = (code, cssList) => {
-  return `${code}${cssList.map((css) => `addCss('${css}')`).join('\n')}`
+  if (!Array.isArray(cssList) || !cssList.length) {
+    return code
+  }
+
+  let res = `${code}\n`
+
+  cssList.forEach((css) => {
+    if (!code.includes(`addCss('${css}')`)) {
+      res += `addCss('${css}')\n`
+    }
+  })
+
+  return res
 }
 
 export default (data) => {
diff --git a/packages/design-core/src/preview/src/preview/http.js b/packages/design-core/src/preview/src/preview/http.js
index a54810f16..d354fa4ae 100644
--- a/packages/design-core/src/preview/src/preview/http.js
+++ b/packages/design-core/src/preview/src/preview/http.js
@@ -10,23 +10,10 @@
  *
  */
 
-import { atou } from '@opentiny/tiny-engine-common/js/preview'
 import { getMetaApi, META_SERVICE } from '@opentiny/tiny-engine-meta-register'
 
 const HEADER_LOWCODE_ORG = 'x-lowcode-org'
 
-export const getSearchParams = () => {
-  let params
-
-  try {
-    params = JSON.parse(atou(location.hash.slice(1)))
-  } catch (error) {
-    params = {}
-  }
-
-  return params
-}
-
 export const fetchCode = async ({ platform, app, type, id, history, pageInfo, tenant } = {}) =>
   pageInfo
     ? getMetaApi(META_SERVICE.Http).post(
@@ -57,3 +44,8 @@ export const fetchImportMap = async () => {
 export const fetchAppSchema = async (id) => getMetaApi(META_SERVICE.Http).get(`/app-center/v1/api/apps/schema/${id}`)
 export const fetchBlockSchema = async (blockName) =>
   getMetaApi(META_SERVICE.Http).get(`/material-center/api/block?label=${blockName}`)
+
+export const getPageById = async (id) => getMetaApi(META_SERVICE.Http).get(`/app-center/api/pages/detail/${id}`)
+export const getBlockById = async (id) => getMetaApi(META_SERVICE.Http).get(`/material-center/api/block/detail/${id}`)
+export const fetchPageHistory = (pageId) =>
+  getMetaApi(META_SERVICE.Http).get(`/app-center/api/pages/histories?page=${pageId}`)
diff --git a/packages/design-core/src/preview/src/preview/importMap.js b/packages/design-core/src/preview/src/preview/importMap.js
index bb34c213f..11e0d70a8 100644
--- a/packages/design-core/src/preview/src/preview/importMap.js
+++ b/packages/design-core/src/preview/src/preview/importMap.js
@@ -11,7 +11,6 @@
  */
 
 import { useEnv } from '@opentiny/tiny-engine-meta-register'
-import { getSearchParams } from './http'
 import importMapJSON from './importMap.json'
 
 const importMap = {}
@@ -29,10 +28,10 @@ function replacePlaceholder(v) {
     .replace('${fileDelimiter}', fileDelimiter)
 }
 
-export const getImportMap = () => {
+export const getImportMap = (scripts = {}) => {
   importMap.imports = {
     ...Object.fromEntries(Object.entries(importMapJSON.imports).map(([k, v]) => [k, replacePlaceholder(v)])),
-    ...getSearchParams().scripts
+    ...scripts
   }
 
   return importMap
diff --git a/packages/design-core/src/preview/src/preview/usePreviewCommunication.ts b/packages/design-core/src/preview/src/preview/usePreviewCommunication.ts
new file mode 100644
index 000000000..789b97d8c
--- /dev/null
+++ b/packages/design-core/src/preview/src/preview/usePreviewCommunication.ts
@@ -0,0 +1,93 @@
+interface PreviewCommunicationOptions {
+  onSchemaReceived: (data: any) => Promise<void>
+  loadInitialData: () => Promise<void>
+}
+
+let onSchemaReceivedAction: PreviewCommunicationOptions['onSchemaReceived'] | null = null
+// 创建 BroadcastChannel 实例，与主页面通信
+let previewChannel: BroadcastChannel | null = null
+
+const handleMessage = async (event: MessageEvent) => {
+  const parsedOrigin = new URL(event.origin)
+  const parsedHost = new URL(window.location.href)
+
+  if (parsedOrigin.origin === parsedHost.origin || parsedOrigin.host === parsedHost.host) {
+    const { type, data, source } = event.data || {}
+
+    if (source === 'designer' && type === 'schema' && data && onSchemaReceivedAction) {
+      await onSchemaReceivedAction(data)
+    }
+  }
+}
+
+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' }, window.opener.origin || window.location.origin)
+  }
+}
+
+let loadInitialData: PreviewCommunicationOptions['loadInitialData'] | null = null
+
+const sendReadyMessage = () => {
+  // 尝试获取父窗口引用
+  const opener = window.opener
+
+  const fallbackHandler = () => {
+    const logger = console
+    logger.warn('无法获取主窗口引用，将使用 URL 参数初始化预览')
+    loadInitialData?.()
+  }
+
+  if (opener) {
+    try {
+      opener.postMessage({ event: 'onMounted', source: 'preview' }, opener.origin || window.location.origin)
+    } catch (error) {
+      fallbackHandler()
+    }
+    return
+  }
+
+  fallbackHandler()
+}
+
+const cleanupCommunication = () => {
+  // 移除消息监听器
+  window.removeEventListener('message', handleMessage)
+
+  // 关闭 BroadcastChannel
+  if (previewChannel) {
+    previewChannel.close()
+    previewChannel = null
+  }
+}
+
+const initCommunication = () => {
+  // 注册消息监听器
+  window.addEventListener('message', handleMessage)
+
+  // 发送就绪消息给主页面
+  sendReadyMessage()
+
+  const isHistory = new URLSearchParams(location.search).get('history')
+
+  if (!isHistory && window.opener) {
+    // 初始化 BroadcastChannel
+    previewChannel = new BroadcastChannel('tiny-engine-preview-channel')
+    previewChannel.onmessage = handleBroadcastMessage
+  }
+}
+
+export const usePreviewCommunication = ({
+  onSchemaReceived,
+  loadInitialData: loadInitialDataFn
+}: PreviewCommunicationOptions) => {
+  onSchemaReceivedAction = onSchemaReceived
+  loadInitialData = loadInitialDataFn
+
+  return {
+    initCommunication,
+    cleanupCommunication
+  }
+}
diff --git a/packages/design-core/src/preview/src/preview/usePreviewData.ts b/packages/design-core/src/preview/src/preview/usePreviewData.ts
new file mode 100644
index 000000000..081920e0a
--- /dev/null
+++ b/packages/design-core/src/preview/src/preview/usePreviewData.ts
@@ -0,0 +1,400 @@
+import { reactive } from 'vue'
+import { transformSync } from '@babel/core'
+import vueJsx from '@vue/babel-plugin-jsx'
+import { constants } from '@opentiny/tiny-engine-utils'
+import { getImportMap as getInitImportMap } from './importMap'
+import { getMetaApi } from '@opentiny/tiny-engine-meta-register'
+import {
+  fetchMetaData,
+  fetchImportMap,
+  fetchAppSchema,
+  fetchBlockSchema,
+  getPageById,
+  getBlockById,
+  fetchPageHistory
+} from './http'
+import { PanelType } from '../constant'
+import generateMetaFiles, { processAppJsCode } from './generate'
+import srcFiles from './srcFiles'
+
+const { COMPONENT_NAME } = constants
+const ROOT_ID = '0'
+
+// TODO： 后面可以是否可以抽取公共的 ts 类型定义
+interface IPage {
+  id: number
+  name: string
+  parentId: number | string
+  page_content: {
+    [key: string]: any
+    componentName: string
+  }
+}
+
+export const previewState: {
+  currentPage: IPage | null
+  ancestors: IPage[]
+  importMap: Record<string, string>
+} = reactive({
+  currentPage: null,
+  ancestors: [],
+  importMap: {}
+})
+
+interface IDeps {
+  scripts: Record<string, string>
+  styles: string[]
+}
+
+const updateUrl = (params: IPage, deps: IDeps) => {
+  const searchParams = new URLSearchParams(location.search)
+  const pageId = searchParams.get('pageid')
+  const blockId = searchParams.get('blockid')
+  const scripts = searchParams.get('scripts')
+  const styles = searchParams.get('styles')
+  let shouldUpdate = false
+
+  if (deps.scripts && JSON.stringify(deps.scripts) !== scripts) {
+    searchParams.set('scripts', JSON.stringify(deps.scripts))
+    shouldUpdate = true
+  }
+
+  if (deps.styles && JSON.stringify(deps.styles) !== styles) {
+    searchParams.set('styles', JSON.stringify(deps.styles))
+    shouldUpdate = true
+  }
+
+  if (
+    !shouldUpdate &&
+    // 如果当前页面是区块，且没有pageid，且blockid与当前区块id相同，则不更新url
+    ((params.page_content.componentName === COMPONENT_NAME.Block && !pageId && Number(blockId) === params.id) ||
+      // 如果当前页面是页面，且没有blockid，且pageid与当前页面id相同，则不更新url
+      (params.page_content.componentName === COMPONENT_NAME.Page && !blockId && Number(pageId) === params.id))
+  ) {
+    return
+  }
+
+  if (params.page_content.componentName === COMPONENT_NAME.Block) {
+    searchParams.delete('pageid')
+    searchParams.set('blockid', String(params.id))
+  }
+
+  if (params.page_content.componentName === COMPONENT_NAME.Page) {
+    searchParams.delete('blockid')
+    searchParams.set('pageid', String(params.id))
+  }
+
+  window.history.replaceState({}, '', `?${searchParams.toString()}`)
+}
+
+const getPageRecursively = async (id: string): Promise<IPage[]> => {
+  const page = await getPageById(id)
+
+  if (page.parentId === '0') {
+    return [page]
+  }
+
+  return [page, ...(await getPageRecursively(page.parentId))]
+}
+
+const getPageOrBlockByApi = async (): Promise<{ currentPage: IPage | null; ancestors: IPage[] }> => {
+  const searchParams = new URLSearchParams(location.search)
+  const pageId = searchParams.get('pageid')
+  const blockId = searchParams.get('blockid')
+  const history = searchParams.get('history')
+
+  if (pageId) {
+    let ancestors = (await getPageRecursively(pageId)).reverse()
+    let currentPage = await getPageById(pageId)
+    if (history) {
+      const historyList: IPage[] = await fetchPageHistory(pageId)
+      currentPage = historyList.find((item) => item.id === Number(history))
+
+      ancestors = ancestors.map((item) => {
+        if (item.id === Number(pageId)) {
+          return {
+            ...item,
+            page_content: currentPage.page_content
+          }
+        }
+        return item
+      })
+    }
+
+    return {
+      currentPage,
+      ancestors
+    }
+  }
+
+  if (blockId) {
+    const block = await getBlockById(blockId)
+    let pageContent = block.content
+    let name = block.name || block.name_cn || block.label
+
+    if (history) {
+      const historyContent = (block.histories || []).find((item: { id: number }) => item.id === Number(history))
+      pageContent = historyContent?.content || pageContent
+      name = historyContent?.name || name
+    }
+
+    return {
+      currentPage: {
+        ...block,
+        page_content: pageContent,
+        name
+      },
+      ancestors: []
+    }
+  }
+
+  return {
+    currentPage: null,
+    ancestors: []
+  }
+}
+const getImportMap = async (scripts = {}) => {
+  if (import.meta.env.VITE_LOCAL_BUNDLE_DEPS === 'true') {
+    const mapJSON = await fetchImportMap()
+
+    return {
+      imports: {
+        ...mapJSON.imports,
+        ...scripts
+      }
+    }
+  }
+  return getInitImportMap(scripts || {})
+}
+
+interface IPanelType {
+  panelName: string
+  panelValue: string
+  panelType: string
+  index?: boolean
+}
+
+interface IGetPageAncestryFilesParams {
+  appData: { componentsMap: Array<Record<string, string>> }
+  params: { currentPage: IPage; ancestors: IPage[] }
+}
+
+// 获取页面祖先区块的出码文件
+const getPageAncestryFiles = (
+  appData: IGetPageAncestryFilesParams['appData'],
+  params: IGetPageAncestryFilesParams['params']
+) => {
+  const familyPages: IPanelType[] = []
+  const ancestors = params.ancestors
+  const { generatePageCode } = getMetaApi('engine.service.generateCode')
+
+  // 区块预览，没有祖先
+  if (params.currentPage.page_content.componentName === COMPONENT_NAME.Block) {
+    familyPages.push({
+      panelName: 'Main.vue',
+      panelValue:
+        generatePageCode(params.currentPage.page_content, appData?.componentsMap || [], {
+          blockRelativePath: './'
+        }) || '',
+      panelType: 'vue',
+      index: true
+    })
+
+    return familyPages
+  }
+
+  if (!ancestors?.length || !appData?.componentsMap) {
+    return familyPages
+  }
+
+  for (let i = 0; i < ancestors.length; i++) {
+    const nextPage = i < ancestors.length - 1 ? ancestors[i + 1].name : null
+    const panelValueAndType = {
+      panelValue:
+        generatePageCode(
+          ancestors[i].page_content,
+          appData?.componentsMap || [],
+          {
+            blockRelativePath: './'
+          },
+          nextPage
+        ) || '',
+      panelType: 'vue'
+    }
+
+    if (ancestors[i]?.parentId === ROOT_ID) {
+      familyPages.push({
+        ...panelValueAndType,
+        panelName: 'Main.vue',
+        index: true
+      })
+    } else {
+      familyPages.push({
+        ...panelValueAndType,
+        panelName: `${ancestors[i].name}.vue`,
+        index: false
+      })
+    }
+  }
+
+  return familyPages
+}
+
+const getBasicData = async (basicFilesPromise: Promise<any>) => {
+  const searchParams = new URLSearchParams(location.search)
+  const pageId = searchParams.get('pageid')
+  const blockId = searchParams.get('blockid')
+
+  const metaDataParams: IMetaDataParams = {
+    platform: searchParams.get('platform') || '',
+    app: searchParams.get('id') || '',
+    type: pageId ? 'Page' : 'Block',
+    id: pageId || blockId || '',
+    tenant: searchParams.get('tenant') || ''
+  }
+
+  if (searchParams.get('history')) {
+    metaDataParams.history = searchParams.get('history') || ''
+  }
+
+  const promises = [
+    fetchAppSchema(searchParams.get('id')),
+    fetchMetaData(metaDataParams),
+    getImportMap(JSON.parse(searchParams.get('scripts') || '{}')),
+    basicFilesPromise
+  ]
+  const [appData, metaData, importMapData] = await Promise.all(promises)
+
+  return { appData, metaData, importMapData }
+}
+
+// [@vue/repl] `Only lang="ts" is supported for <script> blocks.`
+const langReg = /lang="jsx"/
+const fixScriptLang = (generatedCode: IPanelType) => {
+  const fixedCode = { ...generatedCode }
+
+  if (generatedCode.panelType === PanelType.VUE) {
+    fixedCode.panelValue = generatedCode.panelValue.replace(langReg, '')
+  }
+
+  return fixedCode
+}
+
+interface IMetaDataParams {
+  platform: string
+  app: string
+  type: string
+  id: string
+  tenant: string
+  history?: string
+}
+
+interface IUsePreviewData {
+  setFiles: (files: Record<string, string>, mainFileName?: string) => Promise<void>
+  store: any
+}
+
+export const usePreviewData = ({ setFiles, store }: IUsePreviewData) => {
+  const basicFiles = setFiles(srcFiles, 'src/Main.vue')
+
+  const assignFiles = ({ panelName, panelValue, index }: IPanelType, newFiles: Record<string, string>) => {
+    if (index) {
+      panelName = 'Main.vue'
+    }
+
+    const newPanelValue = panelValue.replace(/<script\s*setup\s*>([\s\S]*)<\/script>/, (match, p1) => {
+      if (!p1) {
+        // eslint-disable-next-line no-useless-escape
+        return '<script setup></script>'
+      }
+
+      const transformedScript = transformSync(p1, {
+        babelrc: false,
+        plugins: [[vueJsx, { pragma: 'h' }]],
+        sourceMaps: false,
+        configFile: false
+      })
+
+      const res = `<script setup>${transformedScript?.code || ''}`
+      // eslint-disable-next-line no-useless-escape
+      const endTag = '</script>'
+
+      return `${res}${endTag}`
+    })
+
+    newFiles[panelName] = newPanelValue
+  }
+
+  // 根据新的参数更新预览
+  const updatePreview = async (params: { currentPage: IPage; ancestors: IPage[] }) => {
+    const { appData, metaData, importMapData } = await getBasicData(basicFiles)
+
+    previewState.currentPage = params.currentPage
+    previewState.ancestors = params.ancestors
+
+    // importMap 发生变化才更新 importMap
+    if (JSON.stringify(previewState.importMap) !== JSON.stringify(importMapData)) {
+      store.setImportMap(importMapData)
+      previewState.importMap = importMapData
+    }
+
+    const blockSet = new Set()
+
+    let blocks = []
+    const { getAllNestedBlocksSchema, generatePageCode } = getMetaApi('engine.service.generateCode')
+
+    if (params.ancestors?.length) {
+      const promises = params.ancestors.map((item) =>
+        getAllNestedBlocksSchema(item.page_content, fetchBlockSchema, blockSet)
+      )
+      blocks = (await Promise.all(promises)).flat()
+    }
+
+    const currentPageBlocks = await getAllNestedBlocksSchema(
+      params.currentPage?.page_content || {},
+      fetchBlockSchema,
+      blockSet
+    )
+    blocks = blocks.concat(currentPageBlocks)
+
+    const pageCode = [
+      ...getPageAncestryFiles(appData, params),
+      ...(blocks || []).map((blockSchema) => {
+        return {
+          panelName: `${blockSchema.fileName}.vue`,
+          panelValue: generatePageCode(blockSchema, appData?.componentsMap || [], { blockRelativePath: './' }) || '',
+          panelType: 'vue'
+        }
+      })
+    ]
+
+    const newFiles = store.getFiles()
+    const searchParams = new URLSearchParams(location.search)
+    const appJsCode = processAppJsCode(newFiles['app.js'], JSON.parse(searchParams.get('styles') || '[]'))
+
+    newFiles['app.js'] = appJsCode
+
+    pageCode.map(fixScriptLang).forEach((item) => assignFiles(item, newFiles))
+
+    const metaFiles = generateMetaFiles(metaData)
+    Object.assign(newFiles, metaFiles)
+
+    setFiles(newFiles)
+  }
+
+  const loadInitialData = async () => {
+    const { currentPage, ancestors } = await getPageOrBlockByApi()
+    previewState.currentPage = currentPage
+    previewState.ancestors = ancestors
+
+    if (currentPage) {
+      updatePreview({ currentPage, ancestors })
+    }
+  }
+
+  return {
+    loadInitialData,
+    updateUrl,
+    updatePreview
+  }
+}
diff --git a/packages/plugins/block/src/BlockSetting.vue b/packages/plugins/block/src/BlockSetting.vue
index c8dc7d382..2a022ecbe 100644
--- a/packages/plugins/block/src/BlockSetting.vue
+++ b/packages/plugins/block/src/BlockSetting.vue
@@ -87,16 +87,9 @@
 <script lang="tsx">
 import { reactive, ref, watch, watchEffect, computed } from 'vue'
 import { Button as TinyButton, Collapse as TinyCollapse, CollapseItem as TinyCollapseItem } from '@opentiny/vue'
-import {
-  useLayout,
-  useModal,
-  getMergeMeta,
-  useBlock,
-  getMetaApi,
-  META_SERVICE
-} from '@opentiny/tiny-engine-meta-register'
+import { useLayout, useModal, getMergeMeta, useBlock } from '@opentiny/tiny-engine-meta-register'
 import { BlockHistoryList, PluginSetting, CloseIcon, SvgButton, ButtonGroup } from '@opentiny/tiny-engine-common'
-import { previewBlock } from '@opentiny/tiny-engine-common/js/preview'
+import { previewPage } from '@opentiny/tiny-engine-common/js/preview'
 import { LifeCycles } from '@opentiny/tiny-engine-common'
 import BlockEvent from './BlockEvent.vue'
 import BlockConfig from './BlockConfig.vue'
@@ -252,19 +245,16 @@ export default {
     }
 
     const previewHistory = (item) => {
-      const theme = getMetaApi(META_SERVICE.ThemeSwitch)?.getThemeState()?.theme
       if (item) {
-        previewBlock({
-          id: item.blockId,
-          history: item.id,
-          framework: getMergeMeta('engine.config')?.dslMode,
-          platform: getMergeMeta('engine.config')?.platformId,
-          theme,
-          pageInfo: {
-            name: item.label,
-            schema: item.content
-          }
-        })
+        previewPage(
+          {
+            page_content: item.content,
+            id: item.blockId || item.block_id,
+            history: item.id,
+            name: item.label
+          },
+          true
+        )
       }
     }
 
diff --git a/packages/plugins/page/src/PageHistory.vue b/packages/plugins/page/src/PageHistory.vue
index 3e2112140..60e92305d 100644
--- a/packages/plugins/page/src/PageHistory.vue
+++ b/packages/plugins/page/src/PageHistory.vue
@@ -7,7 +7,6 @@ import { ref, watchEffect } from 'vue'
 import { BlockHistoryList } from '@opentiny/tiny-engine-common'
 import { previewPage } from '@opentiny/tiny-engine-common/js/preview'
 import { usePage, useBlock, useModal, getMetaApi, META_SERVICE } from '@opentiny/tiny-engine-meta-register'
-import { getMergeMeta } from '@opentiny/tiny-engine-meta-register'
 import { fetchPageHistory } from './http'
 
 export default {
@@ -54,20 +53,13 @@ export default {
 
     const previewHistory = async (item) => {
       if (item) {
-        const theme = getMetaApi(META_SERVICE.ThemeSwitch)?.getThemeState()?.theme
         const params = {
+          ...item,
           id: Number(item.page),
-          history: item.id,
-          framework: getMergeMeta('engine.config')?.dslMode,
-          platform: getMergeMeta('engine.config')?.platformId,
-          pageInfo: {
-            name: item.name,
-            schema: item.page_content
-          },
-          theme
+          history: item.id
         }
         params.ancestors = await getFamily(params)
-        previewPage(params)
+        previewPage(params, true)
       }
     }
 
diff --git a/packages/plugins/page/src/composable/usePage.ts b/packages/plugins/page/src/composable/usePage.ts
index 77b891e60..851ee4cf9 100644
--- a/packages/plugins/page/src/composable/usePage.ts
+++ b/packages/plugins/page/src/composable/usePage.ts
@@ -463,9 +463,11 @@ const switchPageWithConfirm = (pageId: string, clearPreview = false) => {
   })
 }
 
-const updatePageContent = (page: { id: any; page_content: any }, currentPage: { id: string; pageInfo?: any }) => {
-  if (currentPage.id && currentPage.pageInfo?.schema && page.id === currentPage.id) {
-    page.page_content = currentPage.pageInfo?.schema
+const updatePageContent = (familyPages: { id: any; page_content: any }[], currentPage: { id: string; page_content?: any }) => {
+  const currentPageSchema = familyPages.find((item) => item.id === currentPage.id)
+  // 替换为当前页面最新的 schema
+  if (currentPageSchema) {
+    currentPageSchema.page_content = currentPage.page_content
   }
 }
 
@@ -487,13 +489,12 @@ const updateParentId = (page: { parentId: any }, pages: any[], index: number, RO
   }
 }
 
-const handlePageDetail = async (pages: any[], currentPage: { id: string }) => {
+const handlePageDetail = async (pages: any[]) => {
   const { ROOT_ID } = pageSettingState
 
   if (pages.length > 0) {
     await Promise.all(
       pages.map(async (page, index) => {
-        updatePageContent(page, currentPage)
         await fetchPageDetailIfNeeded(page)
         updateParentId(page, pages, index, ROOT_ID)
       })
@@ -501,16 +502,31 @@ const handlePageDetail = async (pages: any[], currentPage: { id: string }) => {
   }
 }
 
-const getFamily = async (previewParams: { id: string }) => {
+const getFamily = async (currentPage: { id: string }) => {
   if (pageSettingState.pages.length === 0) {
     await getPageList()
   }
 
-  const familyPages = getAncestorsRecursively(previewParams.id)
+  const familyPages = getAncestorsRecursively(currentPage.id)
     .filter((item) => item.isPage)
     .reverse()
-
-  await handlePageDetail(familyPages, previewParams)
+    .map((item) => ({
+      id: item.id,
+      page_content: item.page_content,
+      name: item.name,
+      parentId: item.parentId,
+      route: item.route,
+      isPage: item.isPage,
+      isBody: item.isBody,
+      isHome: item.isHome,
+      group: item.group,
+      isDefault: item.isDefault,
+      depth: item.depth
+    }))
+
+  await handlePageDetail(familyPages)
+
+  updatePageContent(familyPages, currentPage)
 
   return familyPages
 }
diff --git a/packages/toolbars/preview/meta.js b/packages/toolbars/preview/meta.js
index c89537345..32c4d20f4 100644
--- a/packages/toolbars/preview/meta.js
+++ b/packages/toolbars/preview/meta.js
@@ -6,6 +6,7 @@ export default {
     icon: {
       default: 'preview'
     },
-    renderType: 'icon'
+    renderType: 'icon',
+    previewUrl: ''
   }
 }
diff --git a/packages/toolbars/preview/src/Main.vue b/packages/toolbars/preview/src/Main.vue
index a321c2a03..0f6e11ca1 100644
--- a/packages/toolbars/preview/src/Main.vue
+++ b/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"
     >
@@ -11,18 +11,8 @@
 </template>
 
 <script lang="ts">
-import { previewPage, previewBlock } from '@opentiny/tiny-engine-common/js/preview'
-import {
-  useBlock,
-  useCanvas,
-  useLayout,
-  useNotify,
-  usePage,
-  getMergeMeta,
-  getOptions,
-  META_SERVICE,
-  getMetaApi
-} from '@opentiny/tiny-engine-meta-register'
+import { previewPage } from '@opentiny/tiny-engine-common/js/preview'
+import { useLayout, useNotify, getOptions } from '@opentiny/tiny-engine-meta-register'
 import meta from '../meta'
 import { ToolbarBase } from '@opentiny/tiny-engine-common'
 
@@ -37,10 +27,6 @@ export default {
     }
   },
   setup() {
-    const { isBlock, getCurrentPage, getSchema } = useCanvas()
-    const { getCurrentBlock } = useBlock()
-    const { getFamily } = usePage()
-
     const preview = async () => {
       const { beforePreview, previewMethod, afterPreview } = getOptions(meta.id)
 
@@ -72,28 +58,7 @@ export default {
         return
       }
 
-      const theme = getMetaApi(META_SERVICE.ThemeSwitch)?.getThemeState()?.theme
-      const params = {
-        framework: getMergeMeta('engine.config')?.dslMode,
-        platform: getMergeMeta('engine.config')?.platformId,
-        pageInfo: {
-          schema: getSchema?.()
-        },
-        theme
-      }
-
-      if (isBlock()) {
-        const block = getCurrentBlock()
-        params.id = block?.id
-        params.pageInfo.name = block?.label
-        previewBlock(params)
-      } else {
-        const page = getCurrentPage()
-        params.id = page?.id
-        params.pageInfo.name = page?.name
-        params.ancestors = await getFamily(params)
-        previewPage(params)
-      }
+      previewPage()
 
       if (typeof afterPreview === 'function') {
         try {