11<template >
22 <component :is =" CanvasLayout"
3+ <template #header >
4+ <component v-if =" !isBlock()" :is =" CanvasRouteBar" component >
5+ </template >
36 <template #container >
47 <component
58 :is =" CanvasContainer.entry"
912 :canvas-src-doc =" canvasSrcDoc"
1013 @remove =" removeNode"
1114 @selected =" nodeSelected"
12- ></component >
15+ >
16+ </component >
1317 </template >
1418 <template #footer >
1519 <component :is =" CanvasBreadcrumb" :data =" footData" component >
1822</template >
1923
2024<script >
21- import { ref , watch , onUnmounted } from ' vue'
25+ import { ref , watch , onUnmounted , onMounted } from ' vue'
2226import {
2327 useProperties ,
2428 useCanvas ,
2529 useLayout ,
2630 useMaterial ,
2731 useHistory ,
2832 useModal ,
33+ usePage ,
34+ useMessage ,
2935 getMergeRegistry ,
3036 getMergeMeta ,
3137 getOptions ,
3238 getMetaApi ,
3339 META_SERVICE ,
34- useMessage ,
40+ META_APP ,
3541 useNotify
3642} from ' @opentiny/tiny-engine-meta-register'
3743import { constants } from ' @opentiny/tiny-engine-utils'
@@ -51,20 +57,29 @@ export default {
5157 setup () {
5258 const registry = getMergeRegistry (' canvas'
5359 const materialsPanel = getMergeMeta (' engine.plugins.materials' ? .entry
54- const { CanvasBreadcrumb } = registry .components
60+ const { CanvasRouteBar , CanvasBreadcrumb } = registry .components
5561 const CanvasLayout = registry .layout .entry
5662 const [CanvasContainer ] = registry .metas
5763 const footData = ref ([])
5864 const showMask = ref (true )
5965 const canvasRef = ref (null )
6066 let showModal = false // 弹窗标识
6167 const { canvasSrc = ' ' = getOptions (meta .id ) || {}
62- let canvasSrcDoc = ' '
68+ const canvasSrcDoc = ref ( ' ' )
6369
64- if (! canvasSrc) {
65- const { importMap , importStyles } = getImportMapData (getMergeMeta (' engine.config' ? .importMapVersion )
66- canvasSrcDoc = initCanvas (importMap, importStyles).html
67- }
70+ useMessage ().subscribe ({
71+ topic: ' init_canvas_deps'
72+ subscriber: ' canvas_design_canvas'
73+ callback : (deps ) => {
74+ if (canvasSrc) {
75+ return
76+ }
77+
78+ const { importMap , importStyles } = getImportMapData (getMergeMeta (' engine.config' ? .importMapVersion , deps)
79+
80+ canvasSrcDoc .value = initCanvas (importMap, importStyles).html
81+ }
82+ })
6883
6984 const removeNode = (node ) => {
7085 const { pageState } = useCanvas ()
@@ -73,6 +88,8 @@ export default {
7388 pageState .properties = null
7489 }
7590
91+ const isBlock = useCanvas ().isBlock
92+
7693 watch (
7794 [() => useCanvas ().isSaved (), () => useLayout ().layoutState .pageStatus , () => useCanvas ().getPageSchema ()],
7895 ([isSaved , pageStatus , pageSchema ], [oldIsSaved , _oldPageStatus , oldPageSchema ]) => {
@@ -173,6 +190,63 @@ export default {
173190 canvasResizeObserver?.disconnect?.()
174191 })
175192
193+ const { addToCallbackFns: addHistoryDataChangedCallback } = (function () {
194+ const callbackFns = new Set()
195+
196+ const { subscribe, unsubscribe } = useMessage()
197+ let sub
198+
199+ onMounted(() => {
200+ sub = subscribe({
201+ topic: 'locationHistoryChanged',
202+ subscriber: 'canvas_design_canvas_controller',
203+ callback: (value) => callbackFns.forEach((cb) => cb(value))
204+ })
205+ })
206+
207+ onUnmounted(() => {
208+ if (sub) {
209+ unsubscribe(sub)
210+ }
211+ })
212+
213+ function addToCallbackFns(cb) {
214+ callbackFns.add(cb)
215+ return () => callbackFns.delete(cb)
216+ }
217+ return {
218+ addToCallbackFns
219+ }
220+ })()
221+
222+ // TODO: 待挪到 getBaseInfo
223+ const baseInfoKeys = Object.keys(getMetaApi(META_SERVICE.GlobalService).getBaseInfo())
224+ function replaceKey(key) {
225+ const existingKey = baseInfoKeys.find((eKey) => eKey.toLowerCase() === key.toLowerCase())
226+ if (existingKey) {
227+ return existingKey
228+ }
229+ return key
230+ }
231+ const postUrlChanged = () => {
232+ usePage().postLocationHistoryChanged(
233+ Object.fromEntries(
234+ Array.from(new URLSearchParams(window.location.search)).map(([key, value]) => [replaceKey(key), value])
235+ )
236+ )
237+ }
238+ onMounted(() => {
239+ window.addEventListener('popstate', postUrlChanged)
240+ })
241+ onUnmounted(() => {
242+ window.removeEventListener('popstate', postUrlChanged)
243+
244+ useMessage().unsubscribe({
245+ topic: 'init_canvas_deps',
246+ subscriber: 'canvas_design_canvas'
247+ })
248+ })
249+
176250 return {
177251 removeNode,
178252 canvasSrc,
@@ -186,15 +260,21 @@ export default {
186260 getMaterial: useMaterial().getMaterial,
187261 addHistory: useHistory().addHistory,
188262 request: getMetaApi(META_SERVICE.Http).getHttp(),
263+ getPageById: getMetaApi(META_APP.AppManage).getPageById,
264+ getPageAncestors: usePage().getAncestors,
265+ getBaseInfo: () => getMetaApi(META_SERVICE.GlobalService).getBaseInfo(),
266+ addHistoryDataChangedCallback,
189267 ast,
190268 getBlockByName: useMaterial().getBlockByName,
191269 useModal,
192270 useMessage,
193271 useNotify
194272 },
273+ isBlock,
195274 CanvasLayout,
196275 canvasRef,
197276 CanvasContainer,
277+ CanvasRouteBar,
198278 CanvasBreadcrumb
199279 }
200280 }
0 commit comments