From 552df3a614eb5b15ff207a770ce5346c1a9322b5 Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Thu, 9 Jan 2025 20:43:54 +0800
Subject: [PATCH] =?UTF-8?q?refactor(editor):=20service=E4=B8=ADstate?=
 =?UTF-8?q?=E6=94=B9=E5=AE=8C=E4=BD=BF=E7=94=A8shallowReactive?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/editor/src/services/componentList.ts | 4 ++--
 packages/editor/src/services/dep.ts           | 4 ++--
 packages/editor/src/services/stageOverlay.ts  | 4 ++--
 packages/editor/src/services/ui.ts            | 4 ++--
 4 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/editor/src/services/componentList.ts b/packages/editor/src/services/componentList.ts
index 5c76bd13..59d39e7a 100644
--- a/packages/editor/src/services/componentList.ts
+++ b/packages/editor/src/services/componentList.ts
@@ -16,14 +16,14 @@
  * limitations under the License.
  */
 
-import { reactive } from 'vue';
+import { shallowReactive } from 'vue';
 
 import type { ComponentGroup, ComponentGroupState } from '@editor/type';
 
 import BaseService from './BaseService';
 
 class ComponentList extends BaseService {
-  private state = reactive<ComponentGroupState>({
+  private state = shallowReactive<ComponentGroupState>({
     list: [],
   });
 
diff --git a/packages/editor/src/services/dep.ts b/packages/editor/src/services/dep.ts
index 6c2d4ec5..966c8acf 100644
--- a/packages/editor/src/services/dep.ts
+++ b/packages/editor/src/services/dep.ts
@@ -15,7 +15,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { reactive } from 'vue';
+import { reactive, shallowReactive } from 'vue';
 
 import type { DepExtendedData, Id, MNode, Target, TargetNode } from '@tmagic/core';
 import { DepTargetType, Watcher } from '@tmagic/core';
@@ -40,7 +40,7 @@ type StateKey = keyof State;
 const idleTask = new IdleTask<{ node: TargetNode; deep: boolean; target: Target }>();
 
 class Dep extends BaseService {
-  private state = reactive<State>({
+  private state = shallowReactive<State>({
     collecting: false,
   });
 
diff --git a/packages/editor/src/services/stageOverlay.ts b/packages/editor/src/services/stageOverlay.ts
index c79f408a..55182b08 100644
--- a/packages/editor/src/services/stageOverlay.ts
+++ b/packages/editor/src/services/stageOverlay.ts
@@ -1,4 +1,4 @@
-import { reactive } from 'vue';
+import { shallowReactive } from 'vue';
 import type { Writable } from 'type-fest';
 
 import StageCore from '@tmagic/stage';
@@ -17,7 +17,7 @@ const canUsePluginMethods = {
 type SyncMethodName = Writable<(typeof canUsePluginMethods)['sync']>;
 
 class StageOverlay extends BaseService {
-  private state: StageOverlayState = reactive({
+  private state: StageOverlayState = shallowReactive({
     wrapDiv: document.createElement('div'),
     sourceEl: null,
     contentEl: null,
diff --git a/packages/editor/src/services/ui.ts b/packages/editor/src/services/ui.ts
index 537d25b2..c37b644a 100644
--- a/packages/editor/src/services/ui.ts
+++ b/packages/editor/src/services/ui.ts
@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import { reactive } from 'vue';
+import { shallowReactive } from 'vue';
 import type { Writable } from 'type-fest';
 
 import { convertToNumber } from '@tmagic/utils';
@@ -26,7 +26,7 @@ import type { AsyncHookPlugin, StageRect, UiState } from '@editor/type';
 
 import BaseService from './BaseService';
 
-const state = reactive<UiState>({
+const state = shallowReactive<UiState>({
   uiSelectMode: false,
   showSrc: false,
   showStylePanel: true,