Feat canvas render add router page preview

packages/canvas/DesignCanvas/src/DesignCanvas.vue

@@ -206,6 +206,35 @@ export default {
       }
     })()
 
+    function updatePreviewId(previewId, replace = false) {
+      const url = new URL(window.location.href)
+      if (previewId) {
+        if (previewId === url.searchParams.get('previewid')) {
+          return
+        }
+        url.searchParams.set('previewid', previewId)
+      } else {
+        url.searchParams.delete('previewid')
+      }
+      if (replace) {
+        window.history.replaceState({}, '', url)
+      } else {
+        window.history.pushState({}, '', url)
+      }
+      usePage().postLocationHistoryChanged({ previewId })
+    }
+
+    // TODO: 待挪到 getBaseInfo
+    const postUrlChanged = () => {
+      usePage().postLocationHistoryChanged(Object.fromEntries(new URLSearchParams(window.location.search)))
+    }
+    onMounted(() => {
+      window.addEventListener('popstate', postUrlChanged)
+    })
+    onUnmounted(() => {
+      window.removeEventListener('popstate', postUrlChanged)
+    })
+
     return {
       removeNode,
       canvasSrc,
@@ -224,6 +253,7 @@ export default {
         getPageAncestors: usePage().getAncestors,
         getBaseInfo: () => getMetaApi(META_SERVICE.GlobalService).getBaseInfo(),
         addHistoryDataChangedCallback,
+        updatePreviewId,
         ast
       },
       isBlock,

packages/canvas/render/src/RenderMain.ts

@@ -23,6 +23,7 @@ import { api, setCurrentApi } from './canvas-function/canvas-api'
 import { getPageAncestors } from './material-function/page-getter'
 import CanvasEmpty from './canvas-function/CanvasEmpty.vue'
 import { setCurrentPage } from './canvas-function/page-switcher'
+import { useRouterPreview } from './canvas-function/router-preview'
 
 const { BROADCAST_CHANNEL } = constants
 
@@ -148,6 +149,7 @@ export default defineComponent({
     pageContext.setCssScopeId(props.cssScopeId || (props.entry ? null : `data-te-page-${pageContext.pageId}`))
     if (props.entry) {
       provide('page-ancestors', pageAncestors)
+      provide('page-preview', useRouterPreview().previewPath)
       getPageAncestors(pageContext.pageId).then((value) => {
         pageAncestors.value = value
       })

packages/canvas/render/src/canvas-function/custom-renderer.ts

@@ -6,6 +6,7 @@ function defaultRenderer(schema, refreshKey, entry, active, isPage = true) {
   // 渲染画布增加根节点，与出码和预览保持一致
   const rootChildrenSchema = {
     componentName: 'div',
+    componentType: 'PageSection',
     // 手动添加一个唯一的属性，后续在画布选中此节点时方便处理额外的逻辑。由于没有修改schema，不会影响出码
     props: { ...schema.props, 'data-id': 'root-container', 'data-page-active': active },
     children: schema.children

packages/canvas/render/src/canvas-function/router-preview.ts

@@ -0,0 +1,79 @@
+import { onUnmounted, ref } from 'vue'
+import { getController } from './controller'
+import { getPageAncestors } from '../material-function/page-getter'
+
+export function useRouterPreview() {
+  const pageId = ref(getController().getBaseInfo().pageId)
+  const previewId = ref(getController().getBaseInfo().previewId)
+  const updatePreviewId = getController().updatePreviewId
+  const previewFullPath = ref([])
+  const previewPath = ref([])
+
+  async function calcNewPreviewFullPath() {
+    if (!pageId.value) {
+      if (previewId.value) {
+        updatePreviewId(undefined, true)
+        return
+      }
+      previewFullPath.value = []
+      previewPath.value = []
+      return
+    }
+    if (!previewId.value) {
+      previewFullPath.value = await getPageAncestors(pageId.value)
+      previewPath.value = []
+      return
+    }
+
+    if (previewFullPath.value[previewFullPath.value.length - 1] !== previewId.value) {
+      // previewId changed
+      const fullPath = await getPageAncestors(previewId.value)
+      if (fullPath.includes(pageId.value)) {
+        previewFullPath.value = fullPath
+      } else {
+        updatePreviewId(pageId.value, true)
+      }
+    }
+
+    if (previewFullPath.value.includes(pageId.value)) {
+      // only pageId changed and fast move
+      const fastJumpIndex = previewFullPath.value.indexOf(pageId.value)
+      if (fastJumpIndex + 1 < previewFullPath.value.length) {
+        previewPath.value = previewFullPath.value.slice(fastJumpIndex + 1)
+      } else {
+        previewPath.value = []
+      }
+    } else {
+      previewFullPath.value = await getPageAncestors(pageId.value)
+      previewPath.value = []
+      updatePreviewId(pageId.value, true)
+    }
+  }
+
+  const cancel = getController().addHistoryDataChangedCallback(() => {
+    const newPageId = getController().getBaseInfo().pageId
+    const newPreviewId = getController().getBaseInfo().previewId
+    const pageIdChanged = newPageId !== pageId.value
+    const previewIdChanged = newPreviewId !== previewId.value
+    if (pageIdChanged) {
+      pageId.value = newPageId
+    }
+    if (previewIdChanged) {
+      previewId.value = newPreviewId
+    }
+    if (previewIdChanged || pageIdChanged) {
+      calcNewPreviewFullPath()
+    }
+  })
+
+  onUnmounted(() => {
+    cancel()
+  })
+
+  calcNewPreviewFullPath()
+
+  return {
+    previewPath,
+    previewFullPath
+  }
+}

packages/canvas/render/src/material-function/page-getter.ts

@@ -84,6 +84,10 @@ export async function getPageAncestors(pageId?: string) {
     // 如果不支持查询祖先 则返回自己
     return [pageId]
   }
-  const pageChain = await getController().getPageAncestors(pageId)
-  return [...pageChain.map((id: number | string) => String(id)), pageId]
+  try {
+    const pageChain = await getController().getPageAncestors(pageId)
+    return [...pageChain.map((id: number | string) => String(id)), pageId]
+  } catch {
+    return []
+  }
 }

packages/canvas/render/src/render.ts

@@ -77,7 +77,7 @@ const checkGroup = (componentName) => configure[componentName]?.nestingRule?.chi
 const clickCapture = (componentName) => configure[componentName]?.clickCapture !== false
 
 const getBindProps = (schema, scope, context, pageContext) => {
-  const { id, componentName } = schema
+  const { id, componentName, componentType } = schema
   const invalidity = configure[componentName]?.invalidity || []
 
   if (componentName === 'CanvasPlaceholder') {
@@ -88,7 +88,7 @@ const getBindProps = (schema, scope, context, pageContext) => {
   const bindProps = {
     ...parseData(schema.props, scope, context),
     ...(cssScopeId ? { [cssScopeId]: '' } : {}),
-    ...(active ? { [DESIGN_UIDKEY]: id } : {}),
+    ...(active && componentType !== 'PageSection' ? { [DESIGN_UIDKEY]: id } : {}),
     [DESIGN_TAGKEY]: componentName
   }
 
@@ -115,7 +115,7 @@ const getBindProps = (schema, scope, context, pageContext) => {
   delete bindProps.className
 
   // 使画布中元素可拖拽
-  if (active) {
+  if (active && componentType !== 'PageSection') {
     bindProps.draggable = true
   }
 
@@ -205,13 +205,16 @@ const getChildren = (schema, mergeScope, pageContext) => {
     return parseData(renderChildren, mergeScope, pageContext.context)
   }
 }
+
 function getRenderPageId(currentPageId, isPageStart) {
   const pagePathFromRoot = (inject('page-ancestors') as Ref<any[]>).value
+  const pagePreviewFromCurrentPageChild = (inject('page-preview') as Ref<any[]>).value
+  const fullPath = [...pagePathFromRoot, ...pagePreviewFromCurrentPageChild]
 
   function getNextChild(currentPageId) {
-    const index = pagePathFromRoot.indexOf(currentPageId)
-    if (index > -1 && index + 1 < pagePathFromRoot.length) {
-      return pagePathFromRoot[index + 1]
+    const index = fullPath.indexOf(currentPageId)
+    if (index > -1 && index + 1 < fullPath.length) {
+      return fullPath[index + 1]
     }
     return null
   }
@@ -251,9 +254,18 @@ export const renderer = defineComponent({
     if (ancestors.length && (isPageStart || isRouterView)) {
       const renderPageId = getRenderPageId(pageContext.pageId, isPageStart)
       if (renderPageId) {
+        if (pageContext.active && !isPageStart) {
+          pageContext.setNode(schema, parent)
+        }
         return h(getPage(renderPageId), {
           key: ancestors,
-          [DESIGN_TAGKEY]: `${componentName}`
+          [DESIGN_TAGKEY]: `${componentName}`,
+          ...(pageContext.active && !isPageStart
+            ? {
+                [DESIGN_UIDKEY]: schema.id,
+                draggable: true
+              }
+            : {})
         })
       }
     }

packages/common/composable/defaultGlobalService.js

@@ -6,13 +6,15 @@ const getBaseInfo = () => {
   const id = paramsMap.get('id')
   const blockId = paramsMap.get('blockid')
   const pageId = paramsMap.get('pageid')
+  const previewId = paramsMap.get('previewid')
   const type = paramsMap.get('type')
   const version = paramsMap.get('version')
 
   return {
     type: type || 'app',
     id,
     pageId,
+    previewId,
     blockId,
     version
   }