From b4df7f5eea5724b8c3d656f6885bfc3b78910f0a Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Wed, 28 Feb 2024 16:08:32 +0800
Subject: [PATCH] =?UTF-8?q?fix(editor):=20=E5=A4=8D=E5=88=B6=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E5=90=8E=EF=BC=8C=E7=BB=84=E4=BB=B6=E6=A0=91=E9=80=89?=
 =?UTF-8?q?=E4=B8=AD=E7=8A=B6=E6=80=81=E4=B8=8D=E5=AF=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../editor/src/layouts/sidebar/layer/LayerPanel.vue |  4 ++--
 .../editor/src/layouts/sidebar/layer/use-click.ts   |  2 +-
 .../src/layouts/sidebar/layer/use-node-status.ts    | 13 ++++++++-----
 3 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/packages/editor/src/layouts/sidebar/layer/LayerPanel.vue b/packages/editor/src/layouts/sidebar/layer/LayerPanel.vue
index 9c16afdc..e46af841 100644
--- a/packages/editor/src/layouts/sidebar/layer/LayerPanel.vue
+++ b/packages/editor/src/layouts/sidebar/layer/LayerPanel.vue
@@ -14,7 +14,7 @@
       @node-dragstart="handleDragStart"
       @node-dragleave="handleDragLeave"
       @node-dragend="handleDragEnd"
-      @node-contextmenu="nodeContentmenuHandler"
+      @node-contextmenu="nodeContentMenuHandler"
       @node-mouseenter="mouseenterHandler"
       @node-click="nodeClickHandler"
     >
@@ -113,7 +113,7 @@ const { handleDragStart, handleDragEnd, handleDragLeave, handleDragOver } = useD
 const {
   menu,
   nodeClickHandler,
-  nodeContentmenuHandler,
+  nodeContentMenuHandler,
   highlightHandler: mouseenterHandler,
 } = useClick(services, isCtrlKeyDown, nodeStatusMap);
 </script>
diff --git a/packages/editor/src/layouts/sidebar/layer/use-click.ts b/packages/editor/src/layouts/sidebar/layer/use-click.ts
index 5af1a918..48069044 100644
--- a/packages/editor/src/layouts/sidebar/layer/use-click.ts
+++ b/packages/editor/src/layouts/sidebar/layer/use-click.ts
@@ -94,7 +94,7 @@ export const useClick = (
 
     nodeClickHandler,
 
-    nodeContentmenuHandler(event: MouseEvent, data: TreeNodeData) {
+    nodeContentMenuHandler(event: MouseEvent, data: TreeNodeData) {
       event.preventDefault();
 
       const nodes = services?.editorService.get('nodes') || [];
diff --git a/packages/editor/src/layouts/sidebar/layer/use-node-status.ts b/packages/editor/src/layouts/sidebar/layer/use-node-status.ts
index fadc6c69..2d10d053 100644
--- a/packages/editor/src/layouts/sidebar/layer/use-node-status.ts
+++ b/packages/editor/src/layouts/sidebar/layer/use-node-status.ts
@@ -1,7 +1,7 @@
 import { computed, ref, watch } from 'vue';
 
 import type { Id, MNode, MPage, MPageFragment } from '@tmagic/schema';
-import { getNodePath } from '@tmagic/utils';
+import { getNodePath, isPage, isPageFragment } from '@tmagic/utils';
 
 import { LayerNodeStatus, Services } from '@editor/type';
 import { traverseNode } from '@editor/utils';
@@ -48,13 +48,14 @@ export const useNodeStatus = (services: Services | undefined) => {
 
   // 切换页面或者新增页面，重新生成节点状态
   watch(
-    page,
-    (page) => {
-      if (!page) {
+    () => page.value?.id,
+    (pageId) => {
+      if (!pageId) {
         return;
       }
+
       // 生成节点状态
-      nodeStatusMaps.value.set(page.id, createPageNodeStatus(page, nodeStatusMaps.value.get(page.id)));
+      nodeStatusMaps.value.set(pageId, createPageNodeStatus(page.value!, nodeStatusMaps.value.get(pageId)));
     },
     {
       immediate: true,
@@ -85,6 +86,8 @@ export const useNodeStatus = (services: Services | undefined) => {
 
   services?.editorService.on('add', (newNodes: MNode[]) => {
     newNodes.forEach((node) => {
+      if (isPage(node) || isPageFragment(node)) return;
+
       traverseNode(node, (node: MNode) => {
         nodeStatusMap.value?.set(node.id, {
           visible: true,