From 7109df9deb1af12370e49cc159b5f9509883864e Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Fri, 13 Dec 2024 16:19:44 +0800
Subject: [PATCH] =?UTF-8?q?refactor(editor):=20=E6=A8=A1=E6=9D=BF=E6=94=B9?=
 =?UTF-8?q?=E6=88=90=E4=BD=BF=E7=94=A8useTemplateRef?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../editor/src/components/CodeBlockEditor.vue |  6 +++---
 packages/editor/src/components/CodeParams.vue |  4 ++--
 .../editor/src/components/ContentMenu.vue     |  8 ++++----
 .../editor/src/components/FloatingBox.vue     |  6 +++---
 packages/editor/src/components/Resizer.vue    |  8 ++++----
 packages/editor/src/components/ScrollBar.vue  |  6 +++---
 .../editor/src/components/ScrollViewer.vue    |  6 +++---
 packages/editor/src/components/SplitView.vue  |  4 ++--
 .../editor/src/fields/DataSourceInput.vue     |  4 ++--
 .../editor/src/fields/DataSourceMethods.vue   |  4 ++--
 .../editor/src/fields/DataSourceMocks.vue     |  1 -
 packages/editor/src/fields/EventSelect.vue    |  1 -
 .../editor/src/hooks/use-code-block-edit.ts   |  4 ++--
 packages/editor/src/hooks/use-getso.ts        | 14 +++++++-------
 packages/editor/src/layouts/CodeEditor.vue    |  4 ++--
 packages/editor/src/layouts/Framework.vue     |  6 +++---
 packages/editor/src/layouts/NavMenu.vue       |  4 ++--
 packages/editor/src/layouts/PropsPanel.vue    | 13 +++++++++++--
 .../editor/src/layouts/page-bar/PageBar.vue   |  6 +++---
 .../page-bar/PageBarScrollContainer.vue       |  6 +++---
 .../sidebar/code-block/CodeBlockListPanel.vue |  4 ++--
 .../src/layouts/sidebar/layer/LayerMenu.vue   |  4 ++--
 .../src/layouts/sidebar/layer/LayerPanel.vue  |  4 ++--
 .../src/layouts/sidebar/layer/use-click.ts    |  4 ++--
 .../layouts/sidebar/layer/use-keybinding.ts   |  4 ++--
 .../layouts/workspace/viewer/NodeListMenu.vue |  6 +++---
 .../src/layouts/workspace/viewer/Stage.vue    | 19 +++++++++++++++----
 .../layouts/workspace/viewer/StageOverlay.vue |  4 ++--
 .../layouts/workspace/viewer/ViewerMenu.vue   |  4 ++--
 packages/editor/src/theme/layout.scss         |  2 +-
 packages/editor/src/theme/resizer.scss        |  2 +-
 packages/editor/src/utils/content-menu.ts     |  4 ++--
 32 files changed, 97 insertions(+), 79 deletions(-)

diff --git a/packages/editor/src/components/CodeBlockEditor.vue b/packages/editor/src/components/CodeBlockEditor.vue
index 7aee2fb6..f57109e3 100644
--- a/packages/editor/src/components/CodeBlockEditor.vue
+++ b/packages/editor/src/components/CodeBlockEditor.vue
@@ -59,7 +59,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, Ref, ref } from 'vue';
+import { computed, inject, Ref, ref, useTemplateRef } from 'vue';
 
 import type { CodeBlockContent } from '@tmagic/core';
 import { TMagicButton, TMagicDialog, tMagicMessage, tMagicMessageBox, TMagicTag } from '@tmagic/design';
@@ -104,7 +104,7 @@ const { height: codeBlockEditorHeight } = useEditorContentHeight();
 const difVisible = ref(false);
 const { rect: windowRect } = useWindowRect();
 
-const magicVsEditor = ref<InstanceType<typeof CodeEditor>>();
+const magicVsEditor = useTemplateRef<InstanceType<typeof CodeEditor>>('magicVsEditor');
 
 const diffChange = () => {
   if (!magicVsEditor.value || !formBox.value?.form) {
@@ -224,7 +224,7 @@ const errorHandler = (error: any) => {
   tMagicMessage.error(error.message);
 };
 
-const formBox = ref<InstanceType<typeof MFormBox>>();
+const formBox = useTemplateRef<InstanceType<typeof MFormBox>>('formBox');
 
 const changedValue = ref<CodeBlockContent>();
 const changeHandler = (values: CodeBlockContent) => {
diff --git a/packages/editor/src/components/CodeParams.vue b/packages/editor/src/components/CodeParams.vue
index be4778de..ddb0552f 100644
--- a/packages/editor/src/components/CodeParams.vue
+++ b/packages/editor/src/components/CodeParams.vue
@@ -11,7 +11,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, ref } from 'vue';
+import { computed, useTemplateRef } from 'vue';
 
 import { type ContainerChangeEventData, type FormConfig, type FormValue, MForm } from '@tmagic/form';
 
@@ -32,7 +32,7 @@ const props = defineProps<{
 
 const emit = defineEmits(['change']);
 
-const form = ref<InstanceType<typeof MForm>>();
+const form = useTemplateRef<InstanceType<typeof MForm>>('form');
 
 const getFormConfig = (items: FormConfig = []) => [
   {
diff --git a/packages/editor/src/components/ContentMenu.vue b/packages/editor/src/components/ContentMenu.vue
index abc692c0..3bf2bc4e 100644
--- a/packages/editor/src/components/ContentMenu.vue
+++ b/packages/editor/src/components/ContentMenu.vue
@@ -36,7 +36,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, nextTick, onBeforeUnmount, onMounted, ref } from 'vue';
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, useTemplateRef } from 'vue';
 
 import { useZIndex } from '@tmagic/design';
 
@@ -68,9 +68,9 @@ const emit = defineEmits<{
   mouseenter: [];
 }>();
 
-const menu = ref<HTMLDivElement>();
-const buttons = ref<InstanceType<typeof ToolButton>[]>();
-const subMenu = ref<any>();
+const menu = useTemplateRef<HTMLDivElement>('menu');
+const buttons = useTemplateRef<InstanceType<typeof ToolButton>[]>('buttons');
+const subMenu = useTemplateRef<any>('subMenu');
 const visible = ref(false);
 const subMenuData = ref<(MenuButton | MenuComponent)[]>([]);
 const zIndex = useZIndex();
diff --git a/packages/editor/src/components/FloatingBox.vue b/packages/editor/src/components/FloatingBox.vue
index a08489e6..0ba95ef3 100644
--- a/packages/editor/src/components/FloatingBox.vue
+++ b/packages/editor/src/components/FloatingBox.vue
@@ -17,7 +17,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, inject, nextTick, onBeforeUnmount, provide, ref, watch } from 'vue';
+import { computed, inject, nextTick, onBeforeUnmount, provide, ref, useTemplateRef, watch } from 'vue';
 import { Close } from '@element-plus/icons-vue';
 import VanillaMoveable from 'moveable';
 
@@ -47,8 +47,8 @@ const props = withDefaults(
   },
 );
 
-const target = ref<HTMLDivElement>();
-const titleEl = ref<HTMLDivElement>();
+const target = useTemplateRef<HTMLDivElement>('target');
+const titleEl = useTemplateRef<HTMLDivElement>('titleEl');
 
 const zIndex = useZIndex();
 const curZIndex = ref<number>(0);
diff --git a/packages/editor/src/components/Resizer.vue b/packages/editor/src/components/Resizer.vue
index dd17d88c..1eb1c13a 100644
--- a/packages/editor/src/components/Resizer.vue
+++ b/packages/editor/src/components/Resizer.vue
@@ -1,11 +1,11 @@
 <template>
-  <span ref="target" class="m-editor-resizer" :class="{ 'm-editor-resizer-draging': isDraging }">
+  <span ref="target" class="m-editor-resizer" :class="{ 'm-editor-resizer-dragging': isDragging }">
     <slot></slot>
   </span>
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
+import { useTemplateRef } from 'vue';
 import type { OnDrag } from 'gesto';
 
 import { useGetSo } from '@editor/hooks/use-getso';
@@ -18,6 +18,6 @@ const emit = defineEmits<{
   change: [e: OnDrag];
 }>();
 
-const target = ref<HTMLSpanElement>();
-const { isDraging } = useGetSo(target, emit);
+const target = useTemplateRef<HTMLSpanElement>('target');
+const { isDragging } = useGetSo(target, emit);
 </script>
diff --git a/packages/editor/src/components/ScrollBar.vue b/packages/editor/src/components/ScrollBar.vue
index 3a934fca..40a09ba6 100644
--- a/packages/editor/src/components/ScrollBar.vue
+++ b/packages/editor/src/components/ScrollBar.vue
@@ -5,7 +5,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
+import { computed, onBeforeUnmount, onMounted, useTemplateRef } from 'vue';
 import Gesto from 'gesto';
 
 defineOptions({
@@ -21,8 +21,8 @@ const props = defineProps<{
 
 const emit = defineEmits(['scroll']);
 
-const bar = ref<HTMLDivElement>();
-const thumb = ref<HTMLDivElement>();
+const bar = useTemplateRef<HTMLDivElement>('bar');
+const thumb = useTemplateRef<HTMLDivElement>('thumb');
 
 const thumbSize = computed(() => props.size * (props.size / props.scrollSize));
 const thumbPos = computed(() => (props.pos / props.scrollSize) * props.size);
diff --git a/packages/editor/src/components/ScrollViewer.vue b/packages/editor/src/components/ScrollViewer.vue
index f886560c..8825ccc6 100644
--- a/packages/editor/src/components/ScrollViewer.vue
+++ b/packages/editor/src/components/ScrollViewer.vue
@@ -25,7 +25,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import { computed, onBeforeUnmount, onMounted, ref, useTemplateRef, watch } from 'vue';
 
 import { isNumber } from '@tmagic/utils';
 
@@ -63,8 +63,8 @@ const props = withDefaults(
   },
 );
 
-const container = ref<HTMLDivElement>();
-const el = ref<HTMLDivElement>();
+const container = useTemplateRef<HTMLDivElement>('container');
+const el = useTemplateRef<HTMLDivElement>('el');
 const style = computed(
   () => `
         width: ${isNumber(`${props.width}`) ? `${props.width}px` : props.width};
diff --git a/packages/editor/src/components/SplitView.vue b/packages/editor/src/components/SplitView.vue
index 9e2676be..1d733454 100644
--- a/packages/editor/src/components/SplitView.vue
+++ b/packages/editor/src/components/SplitView.vue
@@ -21,7 +21,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, onBeforeUnmount, onMounted, ref, watchEffect } from 'vue';
+import { computed, onBeforeUnmount, onMounted, ref, useTemplateRef, watchEffect } from 'vue';
 import { OnDrag } from 'gesto';
 
 import Resizer from './Resizer.vue';
@@ -51,7 +51,7 @@ const props = withDefaults(
   },
 );
 
-const el = ref<HTMLElement>();
+const el = useTemplateRef<HTMLElement>('el');
 
 const hasLeft = computed(() => typeof props.left !== 'undefined');
 const hasRight = computed(() => typeof props.right !== 'undefined');
diff --git a/packages/editor/src/fields/DataSourceInput.vue b/packages/editor/src/fields/DataSourceInput.vue
index daa9ccdf..dda77aa5 100644
--- a/packages/editor/src/fields/DataSourceInput.vue
+++ b/packages/editor/src/fields/DataSourceInput.vue
@@ -48,7 +48,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, inject, nextTick, ref, watch } from 'vue';
+import { computed, inject, nextTick, ref, useTemplateRef, watch } from 'vue';
 import { Coin } from '@element-plus/icons-vue';
 
 import type { DataSchema, DataSourceSchema } from '@tmagic/core';
@@ -83,7 +83,7 @@ const emit = defineEmits<{
 
 const { dataSourceService } = inject<Services>('services') || {};
 
-const autocomplete = ref<InstanceType<typeof TMagicAutocomplete>>();
+const autocomplete = useTemplateRef<InstanceType<typeof TMagicAutocomplete>>('autocomplete');
 const isFocused = ref(false);
 const state = ref('');
 const displayState = ref<{ value: string; type: 'var' | 'text' }[]>([]);
diff --git a/packages/editor/src/fields/DataSourceMethods.vue b/packages/editor/src/fields/DataSourceMethods.vue
index b5b564db..7c7664d1 100644
--- a/packages/editor/src/fields/DataSourceMethods.vue
+++ b/packages/editor/src/fields/DataSourceMethods.vue
@@ -21,7 +21,7 @@
 </template>
 
 <script setup lang="ts">
-import { nextTick, ref } from 'vue';
+import { nextTick, ref, useTemplateRef } from 'vue';
 import { cloneDeep } from 'lodash-es';
 
 import type { CodeBlockContent } from '@tmagic/core';
@@ -51,7 +51,7 @@ const props = withDefaults(
 const emit = defineEmits(['change']);
 
 const codeConfig = ref<CodeBlockContent>();
-const codeBlockEditor = ref<InstanceType<typeof CodeBlockEditor>>();
+const codeBlockEditor = useTemplateRef<InstanceType<typeof CodeBlockEditor>>('codeBlockEditor');
 
 let editIndex = -1;
 
diff --git a/packages/editor/src/fields/DataSourceMocks.vue b/packages/editor/src/fields/DataSourceMocks.vue
index e80daf07..e5b12ff3 100644
--- a/packages/editor/src/fields/DataSourceMocks.vue
+++ b/packages/editor/src/fields/DataSourceMocks.vue
@@ -15,7 +15,6 @@
     >
       <template #body>
         <MFormBox
-          ref="addDialog"
           label-width="120px"
           :config="formConfig"
           :values="formValues"
diff --git a/packages/editor/src/fields/EventSelect.vue b/packages/editor/src/fields/EventSelect.vue
index 6e9bef63..fae970aa 100644
--- a/packages/editor/src/fields/EventSelect.vue
+++ b/packages/editor/src/fields/EventSelect.vue
@@ -2,7 +2,6 @@
   <div class="m-fields-event-select">
     <m-form-table
       v-if="isOldVersion"
-      ref="eventForm"
       name="events"
       :size="size"
       :disabled="disabled"
diff --git a/packages/editor/src/hooks/use-code-block-edit.ts b/packages/editor/src/hooks/use-code-block-edit.ts
index f7ce077d..2d5e32ac 100644
--- a/packages/editor/src/hooks/use-code-block-edit.ts
+++ b/packages/editor/src/hooks/use-code-block-edit.ts
@@ -1,4 +1,4 @@
-import { nextTick, ref } from 'vue';
+import { nextTick, ref, useTemplateRef } from 'vue';
 import { cloneDeep } from 'lodash-es';
 
 import type { CodeBlockContent } from '@tmagic/core';
@@ -10,7 +10,7 @@ import type { CodeBlockService } from '@editor/services/codeBlock';
 export const useCodeBlockEdit = (codeBlockService?: CodeBlockService) => {
   const codeConfig = ref<CodeBlockContent>();
   const codeId = ref<string>();
-  const codeBlockEditor = ref<InstanceType<typeof CodeBlockEditor>>();
+  const codeBlockEditor = useTemplateRef<InstanceType<typeof CodeBlockEditor>>('codeBlockEditor');
 
   // 新增代码块
   const createCodeBlock = async () => {
diff --git a/packages/editor/src/hooks/use-getso.ts b/packages/editor/src/hooks/use-getso.ts
index e71bb5e9..36ad0318 100644
--- a/packages/editor/src/hooks/use-getso.ts
+++ b/packages/editor/src/hooks/use-getso.ts
@@ -1,9 +1,9 @@
-import { onBeforeUnmount, onMounted, type Ref, ref } from 'vue';
+import { onBeforeUnmount, onMounted, ref, type ShallowRef } from 'vue';
 import Gesto, { type OnDrag } from 'gesto';
 
-export const useGetSo = (target: Ref<HTMLElement | undefined>, emit: (evt: 'change', e: OnDrag<Gesto>) => void) => {
+export const useGetSo = (target: ShallowRef<HTMLElement | null>, emit: (evt: 'change', e: OnDrag<Gesto>) => void) => {
   let getso: Gesto;
-  const isDraging = ref(false);
+  const isDragging = ref(false);
 
   onMounted(() => {
     if (!target.value) return;
@@ -17,19 +17,19 @@ export const useGetSo = (target: Ref<HTMLElement | undefined>, emit: (evt: 'chan
         emit('change', e);
       })
       .on('dragStart', () => {
-        isDraging.value = true;
+        isDragging.value = true;
       })
       .on('dragEnd', () => {
-        isDraging.value = false;
+        isDragging.value = false;
       });
   });
 
   onBeforeUnmount(() => {
     getso?.unset();
-    isDraging.value = false;
+    isDragging.value = false;
   });
 
   return {
-    isDraging,
+    isDragging,
   };
 };
diff --git a/packages/editor/src/layouts/CodeEditor.vue b/packages/editor/src/layouts/CodeEditor.vue
index cfb6d31b..89cf5bc9 100644
--- a/packages/editor/src/layouts/CodeEditor.vue
+++ b/packages/editor/src/layouts/CodeEditor.vue
@@ -15,7 +15,7 @@
 </template>
 
 <script lang="ts" setup>
-import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import { onBeforeUnmount, onMounted, ref, useTemplateRef, watch } from 'vue';
 import { FullScreen } from '@element-plus/icons-vue';
 import { throttle } from 'lodash-es';
 import serialize from 'serialize-javascript';
@@ -93,7 +93,7 @@ let vsDiffEditor: monaco.editor.IStandaloneDiffEditor | null = null;
 
 const values = ref('');
 const loading = ref(false);
-const codeEditor = ref<HTMLDivElement>();
+const codeEditor = useTemplateRef<HTMLDivElement>('codeEditor');
 
 const resizeObserver = new globalThis.ResizeObserver(
   throttle((): void => {
diff --git a/packages/editor/src/layouts/Framework.vue b/packages/editor/src/layouts/Framework.vue
index 01dc62f1..7a4aa641 100644
--- a/packages/editor/src/layouts/Framework.vue
+++ b/packages/editor/src/layouts/Framework.vue
@@ -62,7 +62,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import { computed, inject, onBeforeUnmount, onMounted, ref, useTemplateRef, watch } from 'vue';
 
 import type { MPage, MPageFragment } from '@tmagic/core';
 import { TMagicScrollbar } from '@tmagic/design';
@@ -93,8 +93,8 @@ const DEFAULT_RIGHT_COLUMN_WIDTH = 480;
 const codeOptions = inject('codeOptions', {});
 const { editorService, uiService } = inject<Services>('services') || {};
 
-const content = ref<HTMLDivElement>();
-const splitView = ref<InstanceType<typeof SplitView>>();
+const content = useTemplateRef<HTMLDivElement>('content');
+const splitView = useTemplateRef<InstanceType<typeof SplitView>>('splitView');
 
 const root = computed(() => editorService?.get('root'));
 const page = computed(() => editorService?.get('page'));
diff --git a/packages/editor/src/layouts/NavMenu.vue b/packages/editor/src/layouts/NavMenu.vue
index 56f90969..5bb78701 100644
--- a/packages/editor/src/layouts/NavMenu.vue
+++ b/packages/editor/src/layouts/NavMenu.vue
@@ -7,7 +7,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, markRaw, onBeforeUnmount, onMounted, ref } from 'vue';
+import { computed, inject, markRaw, onBeforeUnmount, onMounted, useTemplateRef } from 'vue';
 import { Back, Delete, FullScreen, Grid, Memo, Right, ScaleToOriginal, ZoomIn, ZoomOut } from '@element-plus/icons-vue';
 
 import { NodeType } from '@tmagic/core';
@@ -190,7 +190,7 @@ const resizeObserver = new ResizeObserver(() => {
     });
   }
 });
-const navMenu = ref<HTMLDivElement>();
+const navMenu = useTemplateRef<HTMLDivElement>('navMenu');
 onMounted(() => {
   navMenu.value && resizeObserver.observe(navMenu.value);
 });
diff --git a/packages/editor/src/layouts/PropsPanel.vue b/packages/editor/src/layouts/PropsPanel.vue
index 67438f5f..18b94881 100644
--- a/packages/editor/src/layouts/PropsPanel.vue
+++ b/packages/editor/src/layouts/PropsPanel.vue
@@ -38,7 +38,16 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, getCurrentInstance, inject, onBeforeUnmount, onMounted, ref, watchEffect } from 'vue';
+import {
+  computed,
+  getCurrentInstance,
+  inject,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  useTemplateRef,
+  watchEffect,
+} from 'vue';
 import { Document as DocumentIcon } from '@element-plus/icons-vue';
 
 import type { MNode } from '@tmagic/core';
@@ -71,7 +80,7 @@ const showSrc = ref(false);
 
 const internalInstance = getCurrentInstance();
 const values = ref<FormValue>({});
-const configForm = ref<InstanceType<typeof MForm>>();
+const configForm = useTemplateRef<InstanceType<typeof MForm>>('configForm');
 // ts类型应该是FormConfig， 但是打包时会出错，所以暂时用any
 const curFormConfig = ref<any>([]);
 const services = inject<Services>('services');
diff --git a/packages/editor/src/layouts/page-bar/PageBar.vue b/packages/editor/src/layouts/page-bar/PageBar.vue
index 26976389..4501e399 100644
--- a/packages/editor/src/layouts/page-bar/PageBar.vue
+++ b/packages/editor/src/layouts/page-bar/PageBar.vue
@@ -68,7 +68,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, ref, watch } from 'vue';
+import { computed, inject, ref, useTemplateRef, watch } from 'vue';
 import { CaretBottom, Delete, DocumentCopy } from '@element-plus/icons-vue';
 
 import { type Id, type MPage, type MPageFragment, NodeType } from '@tmagic/core';
@@ -144,8 +144,8 @@ const remove = (node: MPage | MPageFragment) => {
   editorService?.remove(node);
 };
 
-const pageBarScrollContainer = ref<InstanceType<typeof PageBarScrollContainer>>();
-const pageBarItems = ref<HTMLDivElement[]>();
+const pageBarScrollContainer = useTemplateRef<InstanceType<typeof PageBarScrollContainer>>('pageBarScrollContainer');
+const pageBarItems = useTemplateRef<HTMLDivElement[]>('pageBarItems');
 watch(page, (page) => {
   if (
     !page ||
diff --git a/packages/editor/src/layouts/page-bar/PageBarScrollContainer.vue b/packages/editor/src/layouts/page-bar/PageBarScrollContainer.vue
index 97999edd..9c5ef8d5 100644
--- a/packages/editor/src/layouts/page-bar/PageBarScrollContainer.vue
+++ b/packages/editor/src/layouts/page-bar/PageBarScrollContainer.vue
@@ -24,7 +24,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, inject, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import { computed, inject, nextTick, onBeforeUnmount, onMounted, ref, useTemplateRef, watch } from 'vue';
 import { ArrowLeftBold, ArrowRightBold } from '@element-plus/icons-vue';
 import Sortable, { type SortableEvent } from 'sortablejs';
 
@@ -46,7 +46,7 @@ const services = inject<Services>('services');
 const editorService = services?.editorService;
 const uiService = services?.uiService;
 
-const itemsContainer = ref<HTMLElement>();
+const itemsContainer = useTemplateRef<HTMLElement>('itemsContainer');
 const canScroll = ref(false);
 
 const showAddPageButton = computed(() => uiService?.get('showAddPageButton'));
@@ -75,7 +75,7 @@ const resizeObserver = new ResizeObserver(() => {
   setCanScroll();
 });
 
-const pageBar = ref<HTMLDivElement>();
+const pageBar = useTemplateRef<HTMLDivElement>('pageBar');
 onMounted(() => {
   pageBar.value && resizeObserver.observe(pageBar.value);
 });
diff --git a/packages/editor/src/layouts/sidebar/code-block/CodeBlockListPanel.vue b/packages/editor/src/layouts/sidebar/code-block/CodeBlockListPanel.vue
index 524df0a7..b0d35e59 100644
--- a/packages/editor/src/layouts/sidebar/code-block/CodeBlockListPanel.vue
+++ b/packages/editor/src/layouts/sidebar/code-block/CodeBlockListPanel.vue
@@ -35,7 +35,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, inject, ref } from 'vue';
+import { computed, inject, useTemplateRef } from 'vue';
 
 import type { Id } from '@tmagic/core';
 import { TMagicButton, TMagicScrollbar } from '@tmagic/design';
@@ -67,7 +67,7 @@ const editable = computed(() => codeBlockService?.getEditStatus());
 const { codeBlockEditor, codeConfig, editCode, deleteCode, createCodeBlock, submitCodeBlockHandler } =
   useCodeBlockEdit(codeBlockService);
 
-const codeBlockList = ref<InstanceType<typeof CodeBlockList>>();
+const codeBlockList = useTemplateRef<InstanceType<typeof CodeBlockList>>('codeBlockList');
 
 const filterTextChangeHandler = (val: string) => {
   codeBlockList.value?.filter(val);
diff --git a/packages/editor/src/layouts/sidebar/layer/LayerMenu.vue b/packages/editor/src/layouts/sidebar/layer/LayerMenu.vue
index 14a8a2ae..71f37746 100644
--- a/packages/editor/src/layouts/sidebar/layer/LayerMenu.vue
+++ b/packages/editor/src/layouts/sidebar/layer/LayerMenu.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, markRaw, ref } from 'vue';
+import { computed, inject, markRaw, useTemplateRef } from 'vue';
 import { Files, Plus } from '@element-plus/icons-vue';
 
 import { isPage, isPageFragment } from '@tmagic/utils';
@@ -33,7 +33,7 @@ const emit = defineEmits<{
 }>();
 
 const services = inject<Services>('services');
-const menu = ref<InstanceType<typeof ContentMenu>>();
+const menu = useTemplateRef<InstanceType<typeof ContentMenu>>('menu');
 const node = computed(() => services?.editorService.get('node'));
 const nodes = computed(() => services?.editorService.get('nodes'));
 const componentList = computed(() => services?.componentListService.getList() || []);
diff --git a/packages/editor/src/layouts/sidebar/layer/LayerPanel.vue b/packages/editor/src/layouts/sidebar/layer/LayerPanel.vue
index 2bab38de..c9533210 100644
--- a/packages/editor/src/layouts/sidebar/layer/LayerPanel.vue
+++ b/packages/editor/src/layouts/sidebar/layer/LayerPanel.vue
@@ -47,7 +47,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, inject, ref } from 'vue';
+import { computed, inject, useTemplateRef } from 'vue';
 
 import type { MNode } from '@tmagic/core';
 import { TMagicScrollbar } from '@tmagic/design';
@@ -80,7 +80,7 @@ defineProps<{
 const services = inject<Services>('services');
 const editorService = services?.editorService;
 
-const tree = ref<InstanceType<typeof Tree>>();
+const tree = useTemplateRef<InstanceType<typeof Tree>>('tree');
 
 const page = computed(() => editorService?.get('page'));
 const nodeData = computed<TreeNodeData[]>(() => (!page.value ? [] : [page.value]));
diff --git a/packages/editor/src/layouts/sidebar/layer/use-click.ts b/packages/editor/src/layouts/sidebar/layer/use-click.ts
index f6a4824a..3f5db0f2 100644
--- a/packages/editor/src/layouts/sidebar/layer/use-click.ts
+++ b/packages/editor/src/layouts/sidebar/layer/use-click.ts
@@ -1,4 +1,4 @@
-import { computed, type ComputedRef, nextTick, type Ref, ref } from 'vue';
+import { computed, type ComputedRef, nextTick, type Ref, useTemplateRef } from 'vue';
 import { throttle } from 'lodash-es';
 
 import { Id, MNode } from '@tmagic/core';
@@ -99,7 +99,7 @@ export const useClick = (
   };
 
   // 右键菜单
-  const menu = ref<InstanceType<typeof LayerMenu>>();
+  const menu = useTemplateRef<InstanceType<typeof LayerMenu>>('menu');
 
   return {
     menu,
diff --git a/packages/editor/src/layouts/sidebar/layer/use-keybinding.ts b/packages/editor/src/layouts/sidebar/layer/use-keybinding.ts
index e4b94278..6b745230 100644
--- a/packages/editor/src/layouts/sidebar/layer/use-keybinding.ts
+++ b/packages/editor/src/layouts/sidebar/layer/use-keybinding.ts
@@ -1,4 +1,4 @@
-import { type Ref, ref, watchEffect } from 'vue';
+import { ref, type ShallowRef, watchEffect } from 'vue';
 
 import Tree from '@editor/components/Tree.vue';
 import type { Services } from '@editor/type';
@@ -6,7 +6,7 @@ import { KeyBindingContainerKey } from '@editor/utils/keybinding-config';
 
 export const useKeybinding = (
   services: Services | undefined,
-  container: Ref<InstanceType<typeof Tree> | undefined>,
+  container: ShallowRef<InstanceType<typeof Tree> | null>,
 ) => {
   const keybindingService = services?.keybindingService;
 
diff --git a/packages/editor/src/layouts/workspace/viewer/NodeListMenu.vue b/packages/editor/src/layouts/workspace/viewer/NodeListMenu.vue
index 7f0e8b50..d85d3c0c 100644
--- a/packages/editor/src/layouts/workspace/viewer/NodeListMenu.vue
+++ b/packages/editor/src/layouts/workspace/viewer/NodeListMenu.vue
@@ -22,7 +22,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, nextTick, ref, watch } from 'vue';
+import { computed, inject, nextTick, ref, useTemplateRef, watch } from 'vue';
 
 import type { MNode } from '@tmagic/core';
 import { TMagicTooltip } from '@tmagic/design';
@@ -39,8 +39,8 @@ const editorService = services?.editorService;
 
 const visible = ref(false);
 const buttonVisible = ref(false);
-const button = ref<HTMLDivElement>();
-const box = ref<InstanceType<typeof FloatingBox>>();
+const button = useTemplateRef<HTMLDivElement>('button');
+const box = useTemplateRef<InstanceType<typeof FloatingBox>>('box');
 
 const stage = computed(() => editorService?.get('stage'));
 const page = computed(() => editorService?.get('page'));
diff --git a/packages/editor/src/layouts/workspace/viewer/Stage.vue b/packages/editor/src/layouts/workspace/viewer/Stage.vue
index 29d9455a..d4e97773 100644
--- a/packages/editor/src/layouts/workspace/viewer/Stage.vue
+++ b/packages/editor/src/layouts/workspace/viewer/Stage.vue
@@ -43,7 +43,18 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, markRaw, nextTick, onBeforeUnmount, onMounted, ref, toRaw, watch, watchEffect } from 'vue';
+import {
+  computed,
+  inject,
+  markRaw,
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  toRaw,
+  useTemplateRef,
+  watch,
+  watchEffect,
+} from 'vue';
 import { cloneDeep } from 'lodash-es';
 
 import type { MApp, MContainer } from '@tmagic/core';
@@ -83,9 +94,9 @@ const services = inject<Services>('services');
 
 const stageLoading = computed(() => services?.editorService.get('stageLoading') || false);
 
-const stageWrap = ref<InstanceType<typeof ScrollViewer>>();
-const stageContainer = ref<HTMLDivElement>();
-const menu = ref<InstanceType<typeof ViewerMenu>>();
+const stageWrap = useTemplateRef<InstanceType<typeof ScrollViewer>>('stageWrap');
+const stageContainer = useTemplateRef<HTMLDivElement>('stageContainer');
+const menu = useTemplateRef<InstanceType<typeof ViewerMenu>>('menu');
 
 const nodes = computed(() => services?.editorService.get('nodes') || []);
 const isMultiSelect = computed(() => nodes.value.length > 1);
diff --git a/packages/editor/src/layouts/workspace/viewer/StageOverlay.vue b/packages/editor/src/layouts/workspace/viewer/StageOverlay.vue
index b1fd74aa..63082517 100644
--- a/packages/editor/src/layouts/workspace/viewer/StageOverlay.vue
+++ b/packages/editor/src/layouts/workspace/viewer/StageOverlay.vue
@@ -8,7 +8,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, inject, onBeforeUnmount, ref, watch } from 'vue';
+import { computed, inject, onBeforeUnmount, useTemplateRef, watch } from 'vue';
 import { CloseBold } from '@element-plus/icons-vue';
 
 import { TMagicIcon } from '@tmagic/design';
@@ -19,7 +19,7 @@ const services = inject<Services>('services');
 
 const stageOptions = inject<StageOptions>('stageOptions');
 
-const stageOverlay = ref<HTMLDivElement>();
+const stageOverlay = useTemplateRef<HTMLDivElement>('stageOverlay');
 
 const stageOverlayVisible = computed(() => services?.stageOverlayService.get('stageOverlayVisible'));
 const wrapWidth = computed(() => services?.stageOverlayService.get('wrapWidth') || 0);
diff --git a/packages/editor/src/layouts/workspace/viewer/ViewerMenu.vue b/packages/editor/src/layouts/workspace/viewer/ViewerMenu.vue
index c2ecad47..6658601d 100644
--- a/packages/editor/src/layouts/workspace/viewer/ViewerMenu.vue
+++ b/packages/editor/src/layouts/workspace/viewer/ViewerMenu.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, markRaw, ref, watch } from 'vue';
+import { computed, inject, markRaw, ref, useTemplateRef, watch } from 'vue';
 import { Bottom, Top } from '@element-plus/icons-vue';
 
 import { NodeType } from '@tmagic/core';
@@ -33,7 +33,7 @@ const props = withDefaults(
 
 const services = inject<Services>('services');
 const editorService = services?.editorService;
-const menu = ref<InstanceType<typeof ContentMenu>>();
+const menu = useTemplateRef<InstanceType<typeof ContentMenu>>('menu');
 const canCenter = ref(false);
 
 const node = computed(() => editorService?.get('node'));
diff --git a/packages/editor/src/theme/layout.scss b/packages/editor/src/theme/layout.scss
index 265f2ca8..296cad82 100644
--- a/packages/editor/src/theme/layout.scss
+++ b/packages/editor/src/theme/layout.scss
@@ -3,7 +3,7 @@
   display: flex;
   justify-self: space-between;
 
-  &:has(.m-editor-resizer-draging) {
+  &:has(.m-editor-resizer-dragging) {
     overflow: hidden;
   }
 }
diff --git a/packages/editor/src/theme/resizer.scss b/packages/editor/src/theme/resizer.scss
index 6f199b61..795736e4 100644
--- a/packages/editor/src/theme/resizer.scss
+++ b/packages/editor/src/theme/resizer.scss
@@ -20,7 +20,7 @@
     }
   }
 
-  &.m-editor-resizer-draging {
+  &.m-editor-resizer-dragging {
     &::after {
       content: "";
       position: absolute;
diff --git a/packages/editor/src/utils/content-menu.ts b/packages/editor/src/utils/content-menu.ts
index d422a31b..5df9b6ea 100644
--- a/packages/editor/src/utils/content-menu.ts
+++ b/packages/editor/src/utils/content-menu.ts
@@ -1,4 +1,4 @@
-import { computed, markRaw, Ref } from 'vue';
+import { computed, markRaw, type ShallowRef } from 'vue';
 import { CopyDocument, Delete, DocumentCopy } from '@element-plus/icons-vue';
 
 import { Id, MContainer, NodeType } from '@tmagic/core';
@@ -33,7 +33,7 @@ export const useCopyMenu = (): MenuButton => ({
   },
 });
 
-export const usePasteMenu = (menu?: Ref<InstanceType<typeof ContentMenu> | undefined>): MenuButton => ({
+export const usePasteMenu = (menu?: ShallowRef<InstanceType<typeof ContentMenu> | null>): MenuButton => ({
   type: 'button',
   text: '粘贴',
   icon: markRaw(DocumentCopy),