Fix router page placeholder and useblock error, switch block render error

packages/canvas/render/src/RenderMain.ts

@@ -10,7 +10,7 @@
  *
  */
 
-import { provide, watch, defineComponent, PropType, ref, inject, onUnmounted } from 'vue'
+import { provide, watch, defineComponent, PropType, ref, inject, onUnmounted, h, Ref } from 'vue'
 
 import { useBroadcastChannel } from '@vueuse/core'
 import { constants } from '@opentiny/tiny-engine-utils'
@@ -22,7 +22,6 @@ import { IPageSchema, useContext, usePageContext, useSchema } from './page-block
 import { api, setCurrentApi } from './canvas-function/canvas-api'
 import { getPageAncestors } from './material-function/page-getter'
 import CanvasEmpty from './canvas-function/CanvasEmpty.vue'
-import { h } from 'vue'
 import { setCurrentPage } from './canvas-function/page-switcher'
 
 const { BROADCAST_CHANNEL } = constants
@@ -138,12 +137,14 @@ export default defineComponent({
   setup(props) {
     const pageAncestors = (inject('page-ancestors') as Ref<any[]>) || ref(null)
     const pageIdFromPath = getController().getBaseInfo().pageId
-    const pageContext = props.active || !pageIdFromPath ? activePageContext : usePageContext()
+    // 顶层使用activePageContext，区块和页面间切换不受影响(短期方案)，因为页面的pageContext目前非响应式（仅刷新画布执行一次），无法动态切换激活态和非激活态
+    const pageContext = props.active || props.entry ? activePageContext : usePageContext()
     provide('pageContext', pageContext)
 
     pageContext.setContextParent(props.parentContext)
+    // 顶层isPage的判断和pageId耦合了，短期先使得顶层和激活页共用pageId，后续需要增加pageContext.isPage
     pageContext.pageId = props.pageId || pageIdFromPath
-    pageContext.active = props.active || pageIdFromPath === pageContext.pageId
+    pageContext.active = props.active || !pageIdFromPath
     pageContext.setCssScopeId(props.cssScopeId || (props.entry ? null : `data-te-page-${pageContext.pageId}`))
     if (props.entry) {
       provide('page-ancestors', pageAncestors)
@@ -153,7 +154,7 @@ export default defineComponent({
       const cancel = getController().addHistoryDataChangedCallback(() => {
         const pageIdFromPath = getController().getBaseInfo().pageId
         pageContext.pageId = props.pageId || pageIdFromPath
-        pageContext.active = props.active || pageIdFromPath === pageContext.pageId
+        pageContext.active = props.active || !pageIdFromPath
         getPageAncestors(pageContext.pageId).then((value) => {
           pageAncestors.value = value
         })
@@ -165,15 +166,22 @@ export default defineComponent({
 
     let schema = activeSchema
     let setCurrentSchema
-    if (pageContext.pageId && !props.active) {
-      const { schema: inActiveSchema, setSchema: setInactiveSchema } = useSchema(pageContext, {
+    let setCurrentMethod = setMethods
+    if (pageContext.pageId && !props.active && !props.entry) {
+      // 注意顶层使用activeSchema和对应的api
+      const {
+        schema: inActiveSchema,
+        setSchema: setInactiveSchema,
+        setMethods: setInactiveMethods
+      } = useSchema(pageContext, {
         utils,
         bridge,
         stores,
         getDataSourceMap
       })
       schema = inActiveSchema
       setCurrentSchema = setInactiveSchema
+      setCurrentMethod = setInactiveMethods
     }
 
     provide('rootSchema', schema)
@@ -190,35 +198,39 @@ export default defineComponent({
     watch(
       () => schema.methods,
       (value) => {
-        setMethods(value, true)
+        setCurrentMethod(value, true)
       },
       {
         deep: true
       }
     )
-    watch(
-      [() => props.active, () => props.renderSchema],
-      ([active, renderSchema]) => {
-        if (active) {
-          setCurrentPage({
-            pageId: pageContext.pageId,
-            schema: schema,
-            pageContext: pageContext
-          })
-        }
-        if (!active && !props.entry) {
-          setCurrentSchema(renderSchema)
+
+    if (!props.entry) {
+      watch(
+        [() => props.active, () => props.renderSchema],
+        ([active, renderSchema]) => {
+          if (active) {
+            setCurrentPage({
+              pageId: pageContext.pageId,
+              schema: schema,
+              pageContext: pageContext
+            })
+          }
+          if (!active && !props.entry) {
+            setCurrentSchema?.(renderSchema, props.pageId)
+          }
+        },
+        {
+          immediate: true
         }
-      },
-      {
-        immediate: true
-      }
-    )
+      )
+    }
+
     const renderer = getRenderer()
     return () =>
       pageAncestors.value === null
         ? h(CanvasEmpty, { placeholderText: '页面分析加载中' })
-        : renderer(schema, refreshKey, props.entry, props.active, !!pageContext.pageId)
+        : renderer(schema, refreshKey, props.entry, pageContext.active, !!pageContext.pageId)
   }
 })
 

packages/canvas/render/src/builtin/CanvasRouterView.vue

@@ -1,5 +1,5 @@
 <template>
-  <canvas-placeholder :placeholder="'路由占位符'"></canvas-placeholder>
+  <canvas-placeholder :placeholder="'路由子页面显示位置占位符'"></canvas-placeholder>
 </template>
 <script>
 import CanvasPlaceholder from './CanvasPlaceholder.vue'

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

@@ -30,7 +30,6 @@ export const wrapPageComponent = (pageId: string) => {
   const updateSchema = () => {
     fetchPageSchema(pageId).then((data) => {
       asyncData.value = data
-      initStyle(key, data?.css)
     })
   }
   updateSchema() // 保证加载一份非编辑态schema，减少页面跳转渲染时间

packages/canvas/render/src/page-block-function/schema.ts

@@ -30,7 +30,7 @@ export function useSchema(
   })
 
   const getSchema = () => schema
-  const setSchema = async (data: IPageSchema) => {
+  const setSchema = async (data: IPageSchema, pageId?: string) => {
     const newSchema = JSON.parse(JSON.stringify(data || schema))
     reset(schema)
     // 页面初始化的时候取消所有状态变量的watchEffect监听
@@ -73,7 +73,7 @@ export function useSchema(
     setState(newSchema.state, true)
     clearNodes()
     await nextTick()
-    setPagecss(data.css)
+    setPagecss(data.css, pageId)
     Object.assign(schema, newSchema)
 
     // 当上下文环境设置完成之后再去处理区块属性访问器的watchEffect

packages/canvas/render/src/render.ts

@@ -10,7 +10,7 @@
  *
  */
 
-import { defineComponent, h, inject, provide } from 'vue'
+import { defineComponent, h, inject, provide, Ref } from 'vue'
 
 import { NODE_UID as DESIGN_UIDKEY, NODE_TAG as DESIGN_TAGKEY, NODE_LOOP as DESIGN_LOOPID } from '../../common'
 import { getDesignMode, DESIGN_MODE } from './canvas-function'
@@ -229,16 +229,16 @@ export const renderer = defineComponent({
   setup(props) {
     provide('schema', props.schema)
     const currentPageContext = props.pageContext || inject('pageContext')
+    const ancestors = inject('page-ancestors') as Ref<any[]>
     return {
-      currentPageContext
+      currentPageContext,
+      ancestors
     }
   },
   render() {
-    const { scope, schema, parent } = this
+    const { scope, schema, parent, ancestors } = this
     const { componentName, loop, loopArgs, condition } = schema
     const pageContext = this.currentPageContext
-    const ancestors = inject('page-ancestors') as Ref<any[]>
-
     // 处理数据源和表格fetchData的映射关系
     generateCollection(schema)
 
@@ -248,11 +248,11 @@ export const renderer = defineComponent({
 
     const isPageStart = schema.componentType === 'PageStart'
     const isRouterView = componentName === 'RouterView'
-    if (ancestors.value.length && (isPageStart || isRouterView)) {
+    if (ancestors.length && (isPageStart || isRouterView)) {
       const renderPageId = getRenderPageId(pageContext.pageId, isPageStart)
       if (renderPageId) {
         return h(getPage(renderPageId), {
-          key: ancestors.value,
+          key: ancestors,
           [DESIGN_TAGKEY]: `${componentName}`
         })
       }

packages/plugins/block/src/composable/useBlock.js

@@ -31,7 +31,7 @@ import {
 } from '@opentiny/tiny-engine-meta-register'
 import { useMessage } from '@opentiny/tiny-engine-meta-register'
 const { publish } = useMessage()
-const postHistoryChanged = (data) => publish({ topic: 'historyChanged', data })
+const postLocationHistoryChanged = (data) => publish({ topic: 'locationHistoryChanged', data })
 
 const { SORT_TYPE, SCHEMA_DATA_TYPE, BLOCK_OPENNESS } = constants
 
@@ -723,7 +723,7 @@ export default function () {
     NODE_TYPE_PAGE,
     DEFAULT_GROUP_ID,
     DEFAULT_GROUP_NAME,
-    postHistoryChanged,
+    postLocationHistoryChanged,
     selectedGroup,
     selectedBlock,
     selectedBlockArray,