feat(editor, stage): 初始化加载runtime loading

packages/editor/src/hooks/use-stage.ts

@@ -51,6 +51,10 @@ export const useStage = (stageOptions: StageOptions) => {
     getGuideLineFromCache(getGuideLineKey(V_GUIDE_LINE_STORAGE_KEY)),
   ]);
 
+  stage.on('page-el-update', () => {
+    editorService.set('stageLoading', false);
+  });
+
   stage.on('select', (el: HTMLElement) => {
     if (`${editorService.get('node')?.id}` === el.id && editorService.get('nodes').length === 1) return;
     editorService.select(el.id);

packages/editor/src/layouts/Framework.vue

@@ -11,6 +11,8 @@
     </slot>
 
     <SplitView
+      v-loading="stageLoading"
+      element-loading-text="Runtime 加载中..."
       v-else
       ref="splitView"
       class="m-editor-content"
@@ -77,6 +79,7 @@ const splitView = ref<InstanceType<typeof SplitView>>();
 const root = computed(() => editorService?.get('root'));
 
 const pageLength = computed(() => editorService?.get('pageLength') || 0);
+const stageLoading = computed(() => editorService?.get('stageLoading') || false);
 const showSrc = computed(() => uiService?.get('showSrc'));
 
 const LEFT_COLUMN_WIDTH_STORAGE_KEY = '$MagicEditorLeftColumnWidthData';

packages/editor/src/layouts/workspace/viewer/Stage.vue

@@ -108,6 +108,7 @@ watch(zoom, (zoom) => {
 
 watch(page, (page) => {
   if (runtime && page) {
+    services?.editorService.set('stageLoading', true);
     runtime.updatePageId?.(page.id);
     nextTick(() => {
       stage?.select(page.id);

packages/editor/src/services/editor.ts

@@ -54,6 +54,7 @@ class Editor extends BaseService {
     node: null,
     nodes: [],
     stage: null,
+    stageLoading: true,
     highlightNode: null,
     modifiedNodeIds: new Map(),
     pageLength: 0,
@@ -111,8 +112,10 @@ class Editor extends BaseService {
 
       if (value && isObject(value) && !(value instanceof StageCore) && !(value instanceof Map)) {
         this.state.pageLength = value.items?.length || 0;
+        this.state.stageLoading = this.state.pageLength !== 0;
       } else {
         this.state.pageLength = 0;
+        this.state.stageLoading = false;
       }
 
       this.emit('root-change', value, preValue);

packages/editor/src/type.ts

@@ -141,6 +141,7 @@ export interface StoreState {
   highlightNode: MNode | null;
   nodes: MNode[];
   stage: StageCore | null;
+  stageLoading: boolean;
   modifiedNodeIds: Map<Id, Id>;
   pageLength: number;
 }

packages/stage/src/StageCore.ts

@@ -279,6 +279,8 @@ export default class StageCore extends EventEmitter {
     this.renderer.on('page-el-update', (el: HTMLElement) => {
       this.mask?.observe(el);
       this.observePageResize(el);
+
+      this.emit('page-el-update', el);
     });
   }