feat：preview multi page structured data transfer and nested display

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

@@ -43,6 +43,8 @@ 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: {
@@ -84,6 +86,43 @@ export default {
       return getInitImportMap()
     }
 
+    const getFamilyPages = (appData) => {
+      const familyPages = []
+      const ancestors = queryParams.ancestors
+
+      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 promiseList = [
       fetchAppSchema(queryParams?.app),
       fetchMetaData(queryParams),
@@ -93,22 +132,12 @@ export default {
     Promise.all(promiseList).then(async ([appData, metaData, _void, importMapData]) => {
       addUtilsImportMap(importMapData, metaData.utils || [])
 
-      const { getAllNestedBlocksSchema, generatePageCode } = getMetaApi('engine.service.generateCode')
-
       const blocks = await getAllNestedBlocksSchema(queryParams.pageInfo?.schema, fetchBlockSchema)
 
       // TODO: 需要验证级联生成 block schema
       // TODO: 物料内置 block 需要如何处理？
       const pageCode = [
-        {
-          panelName: 'Main.vue',
-          panelValue:
-            generatePageCode(queryParams.pageInfo?.schema, appData?.componentsMap || [], {
-              blockRelativePath: './'
-            }) || '',
-          panelType: 'vue',
-          index: true
-        },
+        ...getFamilyPages(appData),
         ...(blocks || []).map((blockSchema) => {
           return {
             panelName: `${blockSchema.fileName}.vue`,
@@ -171,7 +200,6 @@ export default {
       Object.assign(newFiles, metaFiles)
 
       setFiles(newFiles)
-
       return PreviewTips.READY_FOR_PREVIEW
     })
 

packages/plugins/page/src/composable/usePage.js

@@ -211,6 +211,21 @@ const getPageList = async (appId) => {
   return pageSettingState.pages
 }
 
+/**
+ * @param {string | number} id
+ * @param {(string | number)[]} ancestors
+ * @returns {(string | number)[]}
+ */
+const getAncestorsRecursively = (id) => {
+  const pageNode = pageSettingState.treeDataMapping[id]
+
+  if (pageNode.id === pageSettingState.ROOT_ID) {
+    return []
+  }
+
+  return [pageNode].concat(getAncestorsRecursively(pageNode.parentId))
+}
+
 /**
  * @param {string | number} id page Id
  * @param {boolean} withFolders default `false`
@@ -222,30 +237,27 @@ const getAncestors = async (id, withFolders) => {
     await getPageList(appId)
   }
 
-  /**
-   * @param {string | number} id
-   * @param {(string | number)[]} ancestors
-   * @returns {(string | number)[]}
-   */
-  const getAncestorsRecursively = (id) => {
-    const pageNode = pageSettingState.treeDataMapping[id]
-
-    if (pageNode.id === pageSettingState.ROOT_ID) {
-      return []
-    }
-
-    return [pageNode].concat(getAncestorsRecursively(pageNode.parentId))
-  }
-
   const ancestorsWithSelf = getAncestorsRecursively(id)
   const ancestors = ancestorsWithSelf.slice(1).reverse()
 
   if (withFolders) {
     return ancestors.map((item) => item.id)
   }
+
   return ancestors.filter((item) => item.isPage).map((item) => item.id)
 }
 
+const getFamily = async (id) => {
+  if (pageSettingState.pages.length === 0) {
+    const appId = getMetaApi(META_SERVICE.GlobalService).getBaseInfo().id
+    await getPageList(appId)
+  }
+
+  return getAncestorsRecursively(id)
+    .filter((item) => item.isPage)
+    .reverse()
+}
+
 export default () => {
   return {
     DEFAULT_PAGE,
@@ -261,6 +273,7 @@ export default () => {
     isChangePageData,
     getPageList,
     getAncestors,
+    getFamily,
     STATIC_PAGE_GROUP_ID,
     COMMON_PAGE_GROUP_ID
   }

packages/toolbars/preview/src/Main.vue

@@ -12,7 +12,7 @@
 
 <script>
 import { previewPage, previewBlock } from '@opentiny/tiny-engine-common/js/preview'
-import { useBlock, useCanvas, useLayout, useNotify } from '@opentiny/tiny-engine-meta-register'
+import { useBlock, useCanvas, useLayout, useNotify, usePage } from '@opentiny/tiny-engine-meta-register'
 import { getMergeMeta, getOptions } from '@opentiny/tiny-engine-meta-register'
 import meta from '../meta'
 import { ToolbarBase } from '@opentiny/tiny-engine-common'
@@ -30,6 +30,7 @@ export default {
   setup() {
     const { isBlock, getCurrentPage, canvasApi } = useCanvas()
     const { getCurrentBlock } = useBlock()
+    const { getFamily } = usePage()
 
     const preview = async () => {
       const { beforePreview, previewMethod, afterPreview } = getOptions(meta.id)
@@ -79,6 +80,7 @@ export default {
         const page = getCurrentPage()
         params.id = page?.id
         params.pageInfo.name = page?.name
+        params.ancestors = await getFamily(params.id)
         previewPage(params)
       }
 

packages/vue-generator/src/generator/vue/sfc/genSetupSFC.js

@@ -67,7 +67,7 @@ const defaultStyleConfig = {
   lang: ''
 }
 
-const generateSFCFile = (schema, componentsMap, config = {}) => {
+const generateSFCFile = (schema, componentsMap, config = {}, nextPage) => {
   const parsedConfig = parseConfig(config)
   const { blockRelativePath, blockSuffix, scriptConfig: initScriptConfig, styleConfig: initStyleConfig } = parsedConfig
   // 前置动作，对 Schema 进行解析初始化相关配置与变量
@@ -197,18 +197,23 @@ const generateSFCFile = (schema, componentsMap, config = {}) => {
   }
 
   // 解析 template
-  const templateStr = genTemplateByHook(schema, globalHooks, { ...parsedConfig, componentsMap: componentsMap })
+  const templateStr = genTemplateByHook(
+    schema,
+    globalHooks,
+    { ...parsedConfig, componentsMap: componentsMap },
+    nextPage
+  )
 
   // 生成 script
-  const scriptStr = genScriptByHook(schema, globalHooks, { ...parsedConfig, componentsMap: componentsMap })
+  const scriptStr = genScriptByHook(schema, globalHooks, { ...parsedConfig, componentsMap: componentsMap }, nextPage)
 
   // 生成 style
   const styleStr = generateStyleTag(schema, styleConfig)
 
   return `${templateStr}\n${scriptStr}\n${styleStr}`
 }
 
-export const genSFCWithDefaultPlugin = (schema, componentsMap, config = {}) => {
+export const genSFCWithDefaultPlugin = (schema, componentsMap, config = {}, nextPage) => {
   const { templateItemValidate = [], genTemplate = [], parseScript = [], genScript = {} } = config.hooks || {}
   const defaultComponentHooks = [handleComponentNameHook, handleTinyIcon]
 
@@ -265,7 +270,7 @@ export const genSFCWithDefaultPlugin = (schema, componentsMap, config = {}) => {
   // 兼容单独调用的场景，单独调用时，这里会默认加上 builtInComponents
   const compsMapWithBuiltIn = [...componentsMap, ...BUILTIN_COMPONENTS_MAP]
 
-  return generateSFCFile(schema, compsMapWithBuiltIn, newConfig)
+  return generateSFCFile(schema, compsMapWithBuiltIn, newConfig, nextPage)
 }
 
 export default generateSFCFile

packages/vue-generator/src/generator/vue/sfc/generateScript.js

@@ -5,14 +5,17 @@ import { INSERT_POSITION } from '@/constant'
 import { transformObjType } from './generateAttribute'
 import { hasJsx } from '@/utils/hasJsx'
 
-export const defaultGenImportHook = (schema, globalHooks) => {
+export const defaultGenImportHook = (schema, globalHooks, config, nextPage) => {
   const dependenciesMap = globalHooks.getImport() || {}
+  const importContent = Object.entries(dependenciesMap).map(([key, value]) => {
+    return generateImportByPkgName({ pkgName: key, imports: value }) || ''
+  })
 
-  return Object.entries(dependenciesMap)
-    .map(([key, value]) => {
-      return generateImportByPkgName({ pkgName: key, imports: value }) || ''
-    })
-    .join('\n')
+  if (nextPage) {
+    importContent.push(`import ${nextPage} from "./${nextPage}.vue"`)
+  }
+
+  return importContent.join('\n')
 }
 
 export const defaultGenPropsHook = (schema) => {
@@ -162,7 +165,7 @@ export const GEN_SCRIPT_HOOKS = {
   GEN_LIFECYCLE: 'GEN_LIFECYCLE'
 }
 
-export const genScriptByHook = (schema, globalHooks, config) => {
+export const genScriptByHook = (schema, globalHooks, config, nextPage) => {
   const hooks = config.hooks || {}
   const { parseScript = [], genScript = {} } = hooks
 
@@ -206,7 +209,7 @@ export const genScriptByHook = (schema, globalHooks, config) => {
     statementGroupByPosition[AFTER_METHODS].push(statement?.value)
   })
 
-  const importStr = genScript[GEN_SCRIPT_HOOKS.GEN_IMPORT]?.(schema, globalHooks, config) || ''
+  const importStr = genScript[GEN_SCRIPT_HOOKS.GEN_IMPORT]?.(schema, globalHooks, config, nextPage) || ''
   const propsStr = genScript[GEN_SCRIPT_HOOKS.GEN_PROPS]?.(schema, globalHooks, config) || ''
   const emitStr = genScript[GEN_SCRIPT_HOOKS.GEN_EMIT]?.(schema, globalHooks, config) || ''
   const stateStr = genScript[GEN_SCRIPT_HOOKS.GEN_STATE]?.(schema, globalHooks, config) || ''

packages/vue-generator/src/generator/vue/sfc/generateTemplate.js

@@ -172,15 +172,14 @@ export const validEmptyTemplateHook = (schema = {}) => {
 
 // TODO: 支持物料中自定义出码关联片段
 
-export const recursiveGenTemplateByHook = (schemaWithRes, globalHooks, config = {}) => {
+export const recursiveGenTemplateByHook = (schemaWithRes, globalHooks, config = {}, nextPage) => {
   const schemaChildren = schemaWithRes?.schema?.children || []
   const { hooks = {}, isJSX } = config
   // 自定义 hooks
   const { genTemplate: genTemplateHooks, templateItemValidate } = hooks
 
   if (!Array.isArray(schemaChildren)) {
     schemaWithRes.children.push(schemaChildren || '')
-
     return
   }
 
@@ -195,7 +194,11 @@ export const recursiveGenTemplateByHook = (schemaWithRes, globalHooks, config =
       return schemaItem || ''
     }
 
-    const { componentName, component } = schemaItem
+    let { componentName, component } = schemaItem
+
+    if (nextPage) {
+      componentName = componentName === 'RouterView' ? nextPage : componentName
+    }
 
     const optionData = {
       schema: schemaItem,
@@ -208,7 +211,7 @@ export const recursiveGenTemplateByHook = (schemaWithRes, globalHooks, config =
     }
 
     for (const hookItem of [...genTemplateHooks, recursiveGenTemplateByHook]) {
-      hookItem(optionData, globalHooks, config)
+      hookItem(optionData, globalHooks, config, nextPage)
     }
 
     const startTag = generateTag(optionData.componentName, {
@@ -230,13 +233,13 @@ ${optionData.prefix.join('')}${startTag}${optionData.children.join('')}${endTag}
   schemaWithRes.children = schemaWithRes.children.concat(resArr)
 }
 
-export const genTemplateByHook = (schema, globalHooks, config) => {
+export const genTemplateByHook = (schema, globalHooks, config, nextPage) => {
   const parsedSchema = {
     children: [],
     schema: structuredClone({ children: [{ ...schema, componentName: 'div' }] })
   }
 
-  recursiveGenTemplateByHook(parsedSchema, globalHooks, config)
+  recursiveGenTemplateByHook(parsedSchema, globalHooks, config, nextPage)
 
   return `<template>${parsedSchema.children.join('')}</template>`
 }