fix router page review issue (opentiny#1037)

* fix(canvas): fix misspell, remove require properties

* fix: add type to parentContext and default value to pageId

* style: add type, import type add type prefix, fix misspell

* fix: remove some redundancy usages

* fix(canvas/render): fix style sheet might not accept updated content

* fix(design-core/assets): remove svg comment

* fix: add useBroadcastChannel close

* fix: remove redundancy import, add function parameter type, fix type for method is not consistent

packages/canvas/container/src/components/CanvasRouterJumper.vue

@@ -47,7 +47,7 @@ export default {
     }
 
     watch(
-      [() => props.hoverState, () => props.inactiveHoverState],
+      () => [props.hoverState, props.inactiveHoverState],
       ([hoverState, inactiveHoverState]) => {
         const usedHoverState = [hoverState, inactiveHoverState].find(({ componentName }) =>
           LEGAL_JUMPER_COMPONENT.includes(componentName)

packages/canvas/render/src/RenderMain.ts

@@ -10,7 +10,7 @@
  *
  */
 
-import { provide, watch, defineComponent, PropType, ref, inject, onUnmounted, h, Ref } from 'vue'
+import { provide, watch, defineComponent, ref, inject, onUnmounted, h, type PropType, type Ref } from 'vue'
 import {
   getDesignMode,
   setDesignMode,
@@ -95,29 +95,28 @@ export default defineComponent({
     entry: {
       // 页面入口
       type: Boolean,
-      require: false,
       default: true
     },
     cssScopeId: {
       type: String,
-      require: false,
       default: null
     },
     parentContext: {
-      type: Object,
-      require: false,
+      type: Object as PropTye<ReturnType<typeof useContext>>,
       default: null
     },
     renderSchema: {
       type: Object as PropType<IPageSchema>,
-      require: false,
       default: null
     },
     active: {
       type: Boolean,
       default: false
     },
-    pageId: String
+    pageId: {
+      type: String,
+      default: null
+    }
   },
   setup(props) {
     const pageAncestors = (inject('page-ancestors') as Ref<any[]>) || ref(null)

packages/canvas/render/src/application-function/utils.ts

@@ -1,7 +1,7 @@
 import { ref } from 'vue'
 import TinyVue from '@opentiny/vue'
 import * as TinyVueIcon from '@opentiny/vue-icon'
-import { generateFunction, reset } from '../data-utils'
+import { generateFunction } from '../data-utils'
 
 export interface IUtil {
   name: string

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

@@ -1,7 +1,6 @@
 <template>
   <a
     href="javascript:void(0)"
-    v-bind="$attrs"
     :data-router-target-page-id="to?.name"
     :class="{
       [activeClass]: active,

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/canvas-function/canvas-api.ts

@@ -25,7 +25,7 @@ export type IInnerCanvasAPI = IApplicationFunctionAPI & IPageFunctionAPI & ICanv
 
 let currentApi: IInnerCanvasAPI
 
-export function setCurrentApi(activeApi) {
+export function setCurrentApi(activeApi: IInnerCanvasAPI) {
   currentApi = activeApi
 }
 

packages/canvas/render/src/canvas-function/router-view-setting.ts

@@ -1,4 +1,4 @@
-import { reactive, watch } from 'vue'
+import { onUnmounted, reactive, watch } from 'vue'
 import { useBroadcastChannel } from '@vueuse/core'
 import { constants } from '@opentiny/tiny-engine-utils'
 
@@ -25,14 +25,18 @@ export function useRouterViewSetting() {
     viewMode: getCacheValue()
   })
 
-  const { data } = useBroadcastChannel<IRouterViewSetting, IRouterViewSetting>({
+  const { data, close } = useBroadcastChannel<IRouterViewSetting, IRouterViewSetting>({
     name: BROADCAST_CHANNEL.CanvasRouterViewSetting
   })
 
   watch(data, () => {
     routerViewSetting.viewMode = data.value.viewMode
   })
 
+  onUnmounted(() => {
+    close()
+  })
+
   return {
     routerViewSetting
   }

packages/canvas/render/src/data-function/parser.ts

@@ -166,7 +166,7 @@ export const generateFn = (innerFn, context?) => {
     }
 
     // 这里注意如果innerFn返回的是一个promise则需要捕获异常，重新返回默认一条空数据
-    if (result.then) {
+    if (result.then && typeof result.then === 'function') {
       result = new Promise((resolve) => {
         result.then(resolve).catch((error) => {
           globalNotify({

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

@@ -14,12 +14,15 @@ async function fetchPageSchema(pageId: string) {
 }
 const styleSheetMap = new Map()
 export function initStyle(key: string, content: string) {
-  if (styleSheetMap.get(key) || !content) {
+  if (!content) {
     return
   }
-  const styleSheet = new CSSStyleSheet()
-  styleSheetMap.set(key, styleSheet)
-  document.adoptedStyleSheets.push(styleSheet)
+  let styleSheet = styleSheetMap.get(key)
+  if (!styleSheet) {
+    styleSheet = new CSSStyleSheet()
+    styleSheetMap.set(key, styleSheet)
+    document.adoptedStyleSheets.push(styleSheet)
+  }
   handleScopedCss(key, content).then((scopedCss) => {
     styleSheet.replaceSync(scopedCss)
   })

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

@@ -3,7 +3,7 @@ import { parseData } from '../data-function'
 import type { IFuncType } from '@opentiny/tiny-engine-dsl-vue'
 
 export function useMethods({ getContext, setContext }) {
-  const methods: Record<string, Function> = {}
+  const methods: Record<string, IFuncType> = {}
   const getMethods = () => methods
 
   const setMethods = (data: Record<string, IFuncType> = {}, clear = false) => {

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

@@ -406,13 +406,13 @@ const getFamily = async (id) => {
     await getPageList()
   }
 
-  const familytPages = getAncestorsRecursively(id)
+  const familyPages = getAncestorsRecursively(id)
     .filter((item) => item.isPage)
     .reverse()
 
-  await handlePageDetail(familytPages)
+  await handlePageDetail(familyPages)
 
-  return familytPages
+  return familyPages
 }
 
 export default () => {