From 1baec3f1d44e4449bea572badecfe6f1f1b32e98 Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Thu, 9 Jan 2025 20:48:35 +0800
Subject: [PATCH] =?UTF-8?q?refactor(editor):=20useTemplateRef=E5=8F=82?=
 =?UTF-8?q?=E6=95=B0=E4=B8=8D=E8=83=BD=E4=B8=8E=E5=8F=98=E9=87=8F=E5=90=8D?=
 =?UTF-8?q?=E4=B8=80=E6=A0=B7=EF=BC=8C=E4=B8=8D=E7=84=B6=E4=BC=9A=E6=9C=89?=
 =?UTF-8?q?=E4=B8=80=E4=B8=AAwarn?=
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     | 26 +++++++++----------
 .../editor/src/components/FloatingBox.vue     | 18 ++++++-------
 packages/editor/src/components/Resizer.vue    |  4 +--
 packages/editor/src/components/ScrollBar.vue  | 13 +++++-----
 .../editor/src/components/ScrollViewer.vue    | 12 ++++-----
 packages/editor/src/components/SplitView.vue  |  4 +--
 .../editor/src/fields/DataSourceInput.vue     |  6 ++---
 .../editor/src/fields/DataSourceMethods.vue   |  8 +++---
 .../editor/src/hooks/use-code-block-edit.ts   | 10 +++----
 packages/editor/src/layouts/CodeEditor.vue    | 12 ++++-----
 packages/editor/src/layouts/Framework.vue     | 10 +++----
 packages/editor/src/layouts/NavMenu.vue       |  9 ++++---
 .../editor/src/layouts/page-bar/PageBar.vue   | 26 +++++++++----------
 .../page-bar/PageBarScrollContainer.vue       | 23 ++++++++--------
 .../src/layouts/props-panel/FormPanel.vue     | 12 ++++-----
 .../sidebar/code-block/CodeBlockListPanel.vue |  6 ++---
 .../src/layouts/sidebar/layer/LayerMenu.vue   |  4 +--
 .../src/layouts/sidebar/layer/LayerPanel.vue  |  9 ++++---
 .../src/layouts/sidebar/layer/use-click.ts    | 10 +++----
 .../layouts/workspace/viewer/NodeListMenu.vue | 10 +++----
 .../src/layouts/workspace/viewer/Stage.vue    | 26 +++++++++----------
 .../layouts/workspace/viewer/StageOverlay.vue |  4 +--
 .../layouts/workspace/viewer/ViewerMenu.vue   |  6 ++---
 25 files changed, 140 insertions(+), 138 deletions(-)

diff --git a/packages/editor/src/components/CodeBlockEditor.vue b/packages/editor/src/components/CodeBlockEditor.vue
index f57109e3e..665a06afd 100644
--- a/packages/editor/src/components/CodeBlockEditor.vue
+++ b/packages/editor/src/components/CodeBlockEditor.vue
@@ -104,14 +104,14 @@ const { height: codeBlockEditorHeight } = useEditorContentHeight();
 const difVisible = ref(false);
 const { rect: windowRect } = useWindowRect();
 
-const magicVsEditor = useTemplateRef<InstanceType<typeof CodeEditor>>('magicVsEditor');
+const magicVsEditorRef = useTemplateRef<InstanceType<typeof CodeEditor>>('magicVsEditor');
 
 const diffChange = () => {
-  if (!magicVsEditor.value || !formBox.value?.form) {
+  if (!magicVsEditorRef.value || !formBox.value?.form) {
     return;
   }
 
-  formBox.value.form.values.content = magicVsEditor.value.getEditorValue();
+  formBox.value.form.values.content = magicVsEditorRef.value.getEditorValue();
 
   difVisible.value = false;
 };
diff --git a/packages/editor/src/components/CodeParams.vue b/packages/editor/src/components/CodeParams.vue
index ddb0552f0..2f095e8aa 100644
--- a/packages/editor/src/components/CodeParams.vue
+++ b/packages/editor/src/components/CodeParams.vue
@@ -32,7 +32,7 @@ const props = defineProps<{
 
 const emit = defineEmits(['change']);
 
-const form = useTemplateRef<InstanceType<typeof MForm>>('form');
+const formRef = useTemplateRef<InstanceType<typeof MForm>>('form');
 
 const getFormConfig = (items: FormConfig = []) => [
   {
@@ -61,7 +61,7 @@ const codeParamsConfig = computed(() =>
  */
 const onParamsChangeHandler = async (v: FormValue, eventData: ContainerChangeEventData) => {
   try {
-    const value = await form.value?.submitForm(true);
+    const value = await formRef.value?.submitForm(true);
     emit('change', value, eventData);
   } catch (e) {
     error(e);
diff --git a/packages/editor/src/components/ContentMenu.vue b/packages/editor/src/components/ContentMenu.vue
index fb0e8726b..ee6bcb7d1 100644
--- a/packages/editor/src/components/ContentMenu.vue
+++ b/packages/editor/src/components/ContentMenu.vue
@@ -69,9 +69,9 @@ const emit = defineEmits<{
   mouseenter: [];
 }>();
 
-const menu = useTemplateRef<HTMLDivElement>('menu');
-const buttons = useTemplateRef<InstanceType<typeof ToolButton>[]>('buttons');
-const subMenu = useTemplateRef<any>('subMenu');
+const menuEl = useTemplateRef<HTMLDivElement>('menu');
+const buttonRefs = useTemplateRef<InstanceType<typeof ToolButton>[]>('buttons');
+const subMenuRef = useTemplateRef<any>('subMenu');
 const visible = ref(false);
 const subMenuData = ref<(MenuButton | MenuComponent)[]>([]);
 const zIndex = useZIndex();
@@ -88,13 +88,13 @@ const menuStyle = computed(() => ({
   zIndex: curZIndex.value,
 }));
 
-const contains = (el: HTMLElement) => menu.value?.contains(el) || subMenu.value?.contains(el);
+const contains = (el: HTMLElement) => menuEl.value?.contains(el) || subMenuRef.value?.contains(el);
 
 const hide = () => {
   if (!visible.value) return;
 
   visible.value = false;
-  subMenu.value?.hide();
+  subMenuRef.value?.hide();
 
   emit('hide');
 };
@@ -121,7 +121,7 @@ const outsideClickHideHandler = (e: MouseEvent) => {
 };
 
 const setPosition = (e: { clientY: number; clientX: number }) => {
-  const menuHeight = menu.value?.clientHeight || 0;
+  const menuHeight = menuEl.value?.clientHeight || 0;
 
   let top = e.clientY;
   if (menuHeight + e.clientY > document.body.clientHeight) {
@@ -158,15 +158,15 @@ const showSubMenu = (item: MenuButton | MenuComponent, index: number) => {
       return;
     }
 
-    if (menu.value) {
+    if (menuEl.value) {
       // 将子菜单放置在按钮右侧，与按钮齐平
-      let y = menu.value.offsetTop;
-      if (buttons.value?.[index].$el) {
-        const rect = buttons.value?.[index].$el.getBoundingClientRect();
+      let y = menuEl.value.offsetTop;
+      if (buttonRefs.value?.[index].$el) {
+        const rect = buttonRefs.value?.[index].$el.getBoundingClientRect();
         y = rect.top;
       }
-      subMenu.value?.show({
-        clientX: menu.value.offsetLeft + menu.value.clientWidth - 2,
+      subMenuRef.value?.show({
+        clientX: menuEl.value.offsetLeft + menuEl.value.clientWidth - 2,
         clientY: y,
       });
     }
@@ -190,7 +190,7 @@ onBeforeUnmount(() => {
 });
 
 defineExpose({
-  menu,
+  menu: menuEl,
   menuPosition,
   hide,
   show,
diff --git a/packages/editor/src/components/FloatingBox.vue b/packages/editor/src/components/FloatingBox.vue
index 0ba95ef36..0afc402dc 100644
--- a/packages/editor/src/components/FloatingBox.vue
+++ b/packages/editor/src/components/FloatingBox.vue
@@ -1,7 +1,7 @@
 <template>
   <Teleport to="body" v-if="visible">
     <div ref="target" class="m-editor-float-box" :style="{ ...style, zIndex: curZIndex }" @mousedown="nextZIndex">
-      <div ref="titleEl" class="m-editor-float-box-title">
+      <div ref="title" class="m-editor-float-box-title">
         <slot name="title">
           <span>{{ title }}</span>
         </slot>
@@ -47,8 +47,8 @@ const props = withDefaults(
   },
 );
 
-const target = useTemplateRef<HTMLDivElement>('target');
-const titleEl = useTemplateRef<HTMLDivElement>('titleEl');
+const targetEl = useTemplateRef<HTMLDivElement>('target');
+const titleEl = useTemplateRef<HTMLDivElement>('title');
 
 const zIndex = useZIndex();
 const curZIndex = ref<number>(0);
@@ -59,8 +59,8 @@ const bodyHeight = computed(() => {
     return height.value - titleHeight.value;
   }
 
-  if (target.value) {
-    return target.value.clientHeight - titleHeight.value;
+  if (targetEl.value) {
+    return targetEl.value.clientHeight - titleHeight.value;
   }
 
   return 'auto';
@@ -87,7 +87,7 @@ let moveable: VanillaMoveable | null = null;
 const initMoveable = () => {
   moveable = new VanillaMoveable(globalThis.document.body, {
     className: 'm-editor-floating-box-moveable',
-    target: target.value,
+    target: targetEl.value,
     draggable: true,
     resizable: true,
     edge: true,
@@ -126,7 +126,7 @@ watch(
       await nextTick();
       curZIndex.value = zIndex.nextZIndex();
 
-      const targetRect = target.value?.getBoundingClientRect();
+      const targetRect = targetEl.value?.getBoundingClientRect();
       if (targetRect) {
         width.value = targetRect.width;
         height.value = targetRect.height;
@@ -168,11 +168,11 @@ const nextZIndex = () => {
   curZIndex.value = zIndex.nextZIndex();
 };
 
-provide('parentFloating', target);
+provide('parentFloating', targetEl);
 
 defineExpose({
   bodyHeight,
-  target,
+  target: targetEl,
   titleEl,
 });
 </script>
diff --git a/packages/editor/src/components/Resizer.vue b/packages/editor/src/components/Resizer.vue
index 1eb1c13ab..9879eb3a0 100644
--- a/packages/editor/src/components/Resizer.vue
+++ b/packages/editor/src/components/Resizer.vue
@@ -18,6 +18,6 @@ const emit = defineEmits<{
   change: [e: OnDrag];
 }>();
 
-const target = useTemplateRef<HTMLSpanElement>('target');
-const { isDragging } = useGetSo(target, emit);
+const targetEl = useTemplateRef<HTMLSpanElement>('target');
+const { isDragging } = useGetSo(targetEl, emit);
 </script>
diff --git a/packages/editor/src/components/ScrollBar.vue b/packages/editor/src/components/ScrollBar.vue
index 40a09ba64..772fcc00b 100644
--- a/packages/editor/src/components/ScrollBar.vue
+++ b/packages/editor/src/components/ScrollBar.vue
@@ -21,8 +21,8 @@ const props = defineProps<{
 
 const emit = defineEmits(['scroll']);
 
-const bar = useTemplateRef<HTMLDivElement>('bar');
-const thumb = useTemplateRef<HTMLDivElement>('thumb');
+const barEl = useTemplateRef<HTMLDivElement>('bar');
+const thumbEl = useTemplateRef<HTMLDivElement>('thumb');
 
 const thumbSize = computed(() => props.size * (props.size / props.scrollSize));
 const thumbPos = computed(() => (props.pos / props.scrollSize) * props.size);
@@ -35,9 +35,8 @@ const thumbStyle = computed(() => ({
 let gesto: Gesto;
 
 onMounted(() => {
-  if (!thumb.value) return;
-  const thumbEl = thumb.value;
-  gesto = new Gesto(thumbEl, {
+  if (!thumbEl.value) return;
+  gesto = new Gesto(thumbEl.value, {
     container: window,
   });
 
@@ -50,12 +49,12 @@ onMounted(() => {
       scrollBy(getDelta(e));
     });
 
-  bar.value?.addEventListener('wheel', wheelHandler, false);
+  barEl.value?.addEventListener('wheel', wheelHandler, false);
 });
 
 onBeforeUnmount(() => {
   if (gesto) gesto.off();
-  bar.value?.removeEventListener('wheel', wheelHandler, false);
+  barEl.value?.removeEventListener('wheel', wheelHandler, false);
 });
 
 const wheelHandler = (e: WheelEvent) => {
diff --git a/packages/editor/src/components/ScrollViewer.vue b/packages/editor/src/components/ScrollViewer.vue
index 8825ccc69..0593fdfc7 100644
--- a/packages/editor/src/components/ScrollViewer.vue
+++ b/packages/editor/src/components/ScrollViewer.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="m-editor-scroll-viewer-container" ref="container">
-    <div ref="el" :style="style">
+    <div ref="target" :style="style">
       <slot></slot>
     </div>
 
@@ -63,8 +63,8 @@ const props = withDefaults(
   },
 );
 
-const container = useTemplateRef<HTMLDivElement>('container');
-const el = useTemplateRef<HTMLDivElement>('el');
+const containerEl = useTemplateRef<HTMLDivElement>('container');
+const el = useTemplateRef<HTMLDivElement>('target');
 const style = computed(
   () => `
         width: ${isNumber(`${props.width}`) ? `${props.width}px` : props.width};
@@ -80,9 +80,9 @@ const scrollHeight = ref(0);
 let scrollViewer: ScrollViewer;
 
 onMounted(() => {
-  if (!container.value || !el.value) return;
+  if (!containerEl.value || !el.value) return;
   scrollViewer = new ScrollViewer({
-    container: container.value,
+    container: containerEl.value,
     target: el.value,
     zoom: props.zoom,
     correctionScrollSize: props.correctionScrollSize,
@@ -123,6 +123,6 @@ const hScrollHandler = (delta: number) => {
 };
 
 defineExpose({
-  container,
+  container: containerEl,
 });
 </script>
diff --git a/packages/editor/src/components/SplitView.vue b/packages/editor/src/components/SplitView.vue
index fe8086e3e..9155d80e8 100644
--- a/packages/editor/src/components/SplitView.vue
+++ b/packages/editor/src/components/SplitView.vue
@@ -1,5 +1,5 @@
 <template>
-  <div ref="el" class="m-editor-layout" :style="`min-width: ${props.minCenter + props.minLeft + props.minRight}px`">
+  <div ref="target" class="m-editor-layout" :style="`min-width: ${props.minCenter + props.minLeft + props.minRight}px`">
     <template v-if="hasLeft && $slots.left">
       <div class="m-editor-layout-left" :class="leftClass" :style="`width: ${left}px`">
         <slot name="left"></slot>
@@ -51,7 +51,7 @@ const props = withDefaults(
   },
 );
 
-const el = useTemplateRef<HTMLElement>('el');
+const el = useTemplateRef<HTMLElement>('target');
 
 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 dda77aa53..df31061dd 100644
--- a/packages/editor/src/fields/DataSourceInput.vue
+++ b/packages/editor/src/fields/DataSourceInput.vue
@@ -83,12 +83,12 @@ const emit = defineEmits<{
 
 const { dataSourceService } = inject<Services>('services') || {};
 
-const autocomplete = useTemplateRef<InstanceType<typeof TMagicAutocomplete>>('autocomplete');
+const autocompleteRef = useTemplateRef<InstanceType<typeof TMagicAutocomplete>>('autocomplete');
 const isFocused = ref(false);
 const state = ref('');
 const displayState = ref<{ value: string; type: 'var' | 'text' }[]>([]);
 
-const input = computed<HTMLInputElement>(() => autocomplete.value?.inputRef?.input);
+const input = computed<HTMLInputElement>(() => autocompleteRef.value?.inputRef?.input);
 const dataSources = computed(() => dataSourceService?.get('dataSources') || []);
 
 const setDisplayState = () => {
@@ -112,7 +112,7 @@ const mouseupHandler = async () => {
 
   isFocused.value = true;
   await nextTick();
-  autocomplete.value?.focus();
+  autocompleteRef.value?.focus();
 
   if (focusOffset && input.value) {
     input.value.setSelectionRange(anchorOffset, focusOffset);
diff --git a/packages/editor/src/fields/DataSourceMethods.vue b/packages/editor/src/fields/DataSourceMethods.vue
index 7c7664d14..d192dd373 100644
--- a/packages/editor/src/fields/DataSourceMethods.vue
+++ b/packages/editor/src/fields/DataSourceMethods.vue
@@ -51,7 +51,7 @@ const props = withDefaults(
 const emit = defineEmits(['change']);
 
 const codeConfig = ref<CodeBlockContent>();
-const codeBlockEditor = useTemplateRef<InstanceType<typeof CodeBlockEditor>>('codeBlockEditor');
+const codeBlockEditorRef = useTemplateRef<InstanceType<typeof CodeBlockEditor>>('codeBlockEditor');
 
 let editIndex = -1;
 
@@ -94,7 +94,7 @@ const methodColumns: ColumnConfig[] = [
           editIndex = index;
 
           nextTick(() => {
-            codeBlockEditor.value?.show();
+            codeBlockEditorRef.value?.show();
           });
         },
       },
@@ -121,7 +121,7 @@ const createCodeHandler = () => {
   editIndex = -1;
 
   nextTick(() => {
-    codeBlockEditor.value?.show();
+    codeBlockEditorRef.value?.show();
   });
 };
 
@@ -157,6 +157,6 @@ const submitCodeHandler = (value: CodeBlockContent, data: ContainerChangeEventDa
   editIndex = -1;
   codeConfig.value = void 0;
 
-  codeBlockEditor.value?.hide();
+  codeBlockEditorRef.value?.hide();
 };
 </script>
diff --git a/packages/editor/src/hooks/use-code-block-edit.ts b/packages/editor/src/hooks/use-code-block-edit.ts
index 2d5e32ac8..a32afb67f 100644
--- a/packages/editor/src/hooks/use-code-block-edit.ts
+++ b/packages/editor/src/hooks/use-code-block-edit.ts
@@ -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 = useTemplateRef<InstanceType<typeof CodeBlockEditor>>('codeBlockEditor');
+  const codeBlockEditorRef = useTemplateRef<InstanceType<typeof CodeBlockEditor>>('codeBlockEditor');
 
   // 新增代码块
   const createCodeBlock = async () => {
@@ -29,7 +29,7 @@ export const useCodeBlockEdit = (codeBlockService?: CodeBlockService) => {
 
     await nextTick();
 
-    codeBlockEditor.value?.show();
+    codeBlockEditorRef.value?.show();
   };
 
   // 编辑代码块
@@ -54,7 +54,7 @@ export const useCodeBlockEdit = (codeBlockService?: CodeBlockService) => {
     codeId.value = id;
 
     await nextTick();
-    codeBlockEditor.value?.show();
+    codeBlockEditorRef.value?.show();
   };
 
   // 删除代码块
@@ -67,13 +67,13 @@ export const useCodeBlockEdit = (codeBlockService?: CodeBlockService) => {
 
     await codeBlockService?.setCodeDslById(codeId.value, values);
 
-    codeBlockEditor.value?.hide();
+    codeBlockEditorRef.value?.hide();
   };
 
   return {
     codeId,
     codeConfig,
-    codeBlockEditor,
+    codeBlockEditor: codeBlockEditorRef,
 
     createCodeBlock,
     editCode,
diff --git a/packages/editor/src/layouts/CodeEditor.vue b/packages/editor/src/layouts/CodeEditor.vue
index 89cf5bc94..d1bd7f371 100644
--- a/packages/editor/src/layouts/CodeEditor.vue
+++ b/packages/editor/src/layouts/CodeEditor.vue
@@ -93,7 +93,7 @@ let vsDiffEditor: monaco.editor.IStandaloneDiffEditor | null = null;
 
 const values = ref('');
 const loading = ref(false);
-const codeEditor = useTemplateRef<HTMLDivElement>('codeEditor');
+const codeEditorEl = useTemplateRef<HTMLDivElement>('codeEditor');
 
 const resizeObserver = new globalThis.ResizeObserver(
   throttle((): void => {
@@ -122,7 +122,7 @@ const getEditorValue = () =>
   (props.type === 'diff' ? vsDiffEditor?.getModifiedEditor().getValue() : vsEditor?.getValue()) || '';
 
 const init = async () => {
-  if (!codeEditor.value) return;
+  if (!codeEditorEl.value) return;
 
   const options = {
     value: values.value,
@@ -132,9 +132,9 @@ const init = async () => {
   };
 
   if (props.type === 'diff') {
-    vsDiffEditor = monaco.editor.createDiffEditor(codeEditor.value, options);
+    vsDiffEditor = monaco.editor.createDiffEditor(codeEditorEl.value, options);
   } else {
-    vsEditor = monaco.editor.create(codeEditor.value, options);
+    vsEditor = monaco.editor.create(codeEditorEl.value, options);
   }
 
   setEditorValue(props.initValues, props.modifiedValues);
@@ -143,7 +143,7 @@ const init = async () => {
 
   emit('initd', vsEditor);
 
-  codeEditor.value.addEventListener('keydown', (e) => {
+  codeEditorEl.value.addEventListener('keydown', (e) => {
     if (e.keyCode === 83 && (navigator.platform.match('Mac') ? e.metaKey : e.ctrlKey)) {
       e.preventDefault();
       e.stopPropagation();
@@ -163,7 +163,7 @@ const init = async () => {
     });
   }
 
-  resizeObserver.observe(codeEditor.value);
+  resizeObserver.observe(codeEditorEl.value);
 };
 
 watch(
diff --git a/packages/editor/src/layouts/Framework.vue b/packages/editor/src/layouts/Framework.vue
index 19ce3e945..b2536fd16 100644
--- a/packages/editor/src/layouts/Framework.vue
+++ b/packages/editor/src/layouts/Framework.vue
@@ -90,8 +90,8 @@ const DEFAULT_RIGHT_COLUMN_WIDTH = 480;
 const codeOptions = inject('codeOptions', {});
 const { editorService, uiService } = inject<Services>('services') || {};
 
-const content = useTemplateRef<HTMLDivElement>('content');
-const splitView = useTemplateRef<InstanceType<typeof SplitView>>('splitView');
+const contentEl = useTemplateRef<HTMLDivElement>('content');
+const splitViewRef = useTemplateRef<InstanceType<typeof SplitView>>('splitView');
 
 const root = computed(() => editorService?.get('root'));
 const page = computed(() => editorService?.get('page'));
@@ -115,7 +115,7 @@ const columnWidth = ref<Partial<GetColumnWidth>>({
 });
 
 watch(pageLength, () => {
-  splitView.value?.updateWidth();
+  splitViewRef.value?.updateWidth();
 });
 
 watch(
@@ -146,8 +146,8 @@ const resizerObserver = new ResizeObserver((entries) => {
 });
 
 onMounted(() => {
-  if (content.value) {
-    resizerObserver.observe(content.value);
+  if (contentEl.value) {
+    resizerObserver.observe(contentEl.value);
   }
 });
 
diff --git a/packages/editor/src/layouts/NavMenu.vue b/packages/editor/src/layouts/NavMenu.vue
index 5bb787010..e5eb1d00f 100644
--- a/packages/editor/src/layouts/NavMenu.vue
+++ b/packages/editor/src/layouts/NavMenu.vue
@@ -179,8 +179,10 @@ const buttons = computed(() => {
   return data;
 });
 
+const navMenuEl = useTemplateRef<HTMLDivElement>('navMenu');
+
 const resizeObserver = new ResizeObserver(() => {
-  const rect = navMenu.value?.getBoundingClientRect();
+  const rect = navMenuEl.value?.getBoundingClientRect();
   if (rect) {
     uiService?.set('navMenuRect', {
       left: rect.left,
@@ -190,10 +192,11 @@ const resizeObserver = new ResizeObserver(() => {
     });
   }
 });
-const navMenu = useTemplateRef<HTMLDivElement>('navMenu');
+
 onMounted(() => {
-  navMenu.value && resizeObserver.observe(navMenu.value);
+  navMenuEl.value && resizeObserver.observe(navMenuEl.value);
 });
+
 onBeforeUnmount(() => {
   resizeObserver.disconnect();
 });
diff --git a/packages/editor/src/layouts/page-bar/PageBar.vue b/packages/editor/src/layouts/page-bar/PageBar.vue
index 4501e399c..c71de7fc7 100644
--- a/packages/editor/src/layouts/page-bar/PageBar.vue
+++ b/packages/editor/src/layouts/page-bar/PageBar.vue
@@ -144,40 +144,40 @@ const remove = (node: MPage | MPageFragment) => {
   editorService?.remove(node);
 };
 
-const pageBarScrollContainer = useTemplateRef<InstanceType<typeof PageBarScrollContainer>>('pageBarScrollContainer');
-const pageBarItems = useTemplateRef<HTMLDivElement[]>('pageBarItems');
+const pageBarScrollContainerRef = useTemplateRef<InstanceType<typeof PageBarScrollContainer>>('pageBarScrollContainer');
+const pageBarItemEls = useTemplateRef<HTMLDivElement[]>('pageBarItems');
 watch(page, (page) => {
   if (
     !page ||
-    !pageBarScrollContainer.value?.itemsContainerWidth ||
-    !pageBarItems.value ||
-    pageBarItems.value.length < 2
+    !pageBarScrollContainerRef.value?.itemsContainerWidth ||
+    !pageBarItemEls.value ||
+    pageBarItemEls.value.length < 2
   ) {
     return;
   }
 
-  const firstItem = pageBarItems.value[0];
-  const lastItem = pageBarItems.value[pageBarItems.value.length - 1];
+  const firstItem = pageBarItemEls.value[0];
+  const lastItem = pageBarItemEls.value[pageBarItemEls.value.length - 1];
 
   if (page.id === firstItem.dataset.pageId) {
-    pageBarScrollContainer.value.scroll('start');
+    pageBarScrollContainerRef.value.scroll('start');
   } else if (page.id === lastItem.dataset.pageId) {
-    pageBarScrollContainer.value.scroll('end');
+    pageBarScrollContainerRef.value.scroll('end');
   } else {
-    const pageItem = pageBarItems.value.find((item) => item.dataset.pageId === page.id);
+    const pageItem = pageBarItemEls.value.find((item) => item.dataset.pageId === page.id);
     if (!pageItem) {
       return;
     }
 
     const pageItemRect = pageItem.getBoundingClientRect();
     const offsetLeft = pageItemRect.left - firstItem.getBoundingClientRect().left;
-    const { itemsContainerWidth } = pageBarScrollContainer.value;
+    const { itemsContainerWidth } = pageBarScrollContainerRef.value;
 
     const left = itemsContainerWidth - offsetLeft - pageItemRect.width;
 
-    const translateLeft = pageBarScrollContainer.value.getTranslateLeft();
+    const translateLeft = pageBarScrollContainerRef.value.getTranslateLeft();
     if (offsetLeft + translateLeft < 0 || offsetLeft + pageItemRect.width > itemsContainerWidth - translateLeft) {
-      pageBarScrollContainer.value.scrollTo(left);
+      pageBarScrollContainerRef.value.scrollTo(left);
     }
   }
 });
diff --git a/packages/editor/src/layouts/page-bar/PageBarScrollContainer.vue b/packages/editor/src/layouts/page-bar/PageBarScrollContainer.vue
index 9c5ef8d53..f9056008e 100644
--- a/packages/editor/src/layouts/page-bar/PageBarScrollContainer.vue
+++ b/packages/editor/src/layouts/page-bar/PageBarScrollContainer.vue
@@ -46,7 +46,7 @@ const services = inject<Services>('services');
 const editorService = services?.editorService;
 const uiService = services?.uiService;
 
-const itemsContainer = useTemplateRef<HTMLElement>('itemsContainer');
+const itemsContainerEl = useTemplateRef<HTMLElement>('itemsContainer');
 const canScroll = ref(false);
 
 const showAddPageButton = computed(() => uiService?.get('showAddPageButton'));
@@ -54,19 +54,21 @@ const showPageListButton = computed(() => uiService?.get('showPageListButton'));
 
 const itemsContainerWidth = ref(0);
 
+const pageBarEl = useTemplateRef<HTMLDivElement>('pageBar');
+
 const setCanScroll = () => {
   // 减去新增、搜索、页面列表、左移、右移5个按钮的宽度
   // 37 = icon width 16 + padding 10 * 2 + border-right 1
   itemsContainerWidth.value =
-    (pageBar.value?.clientWidth || 0) -
+    (pageBarEl.value?.clientWidth || 0) -
     37 * 2 -
     37 -
     (showAddPageButton.value ? 37 : 21) -
     (showPageListButton.value ? 37 : 0);
 
   nextTick(() => {
-    if (itemsContainer.value) {
-      canScroll.value = itemsContainer.value.scrollWidth - itemsContainerWidth.value > 1;
+    if (itemsContainerEl.value) {
+      canScroll.value = itemsContainerEl.value.scrollWidth - itemsContainerWidth.value > 1;
     }
   });
 };
@@ -75,9 +77,8 @@ const resizeObserver = new ResizeObserver(() => {
   setCanScroll();
 });
 
-const pageBar = useTemplateRef<HTMLDivElement>('pageBar');
 onMounted(() => {
-  pageBar.value && resizeObserver.observe(pageBar.value);
+  pageBarEl.value && resizeObserver.observe(pageBarEl.value);
 });
 
 onBeforeUnmount(() => {
@@ -87,9 +88,9 @@ onBeforeUnmount(() => {
 let translateLeft = 0;
 
 const scroll = (type: 'left' | 'right' | 'start' | 'end') => {
-  if (!itemsContainer.value || !canScroll.value) return;
+  if (!itemsContainerEl.value || !canScroll.value) return;
 
-  const maxScrollLeft = itemsContainer.value.scrollWidth - itemsContainerWidth.value;
+  const maxScrollLeft = itemsContainerEl.value.scrollWidth - itemsContainerWidth.value;
 
   if (type === 'left') {
     scrollTo(translateLeft + 200);
@@ -103,8 +104,8 @@ const scroll = (type: 'left' | 'right' | 'start' | 'end') => {
 };
 
 const scrollTo = (value: number) => {
-  if (!itemsContainer.value || !canScroll.value) return;
-  const maxScrollLeft = itemsContainer.value.scrollWidth - itemsContainerWidth.value;
+  if (!itemsContainerEl.value || !canScroll.value) return;
+  const maxScrollLeft = itemsContainerEl.value.scrollWidth - itemsContainerWidth.value;
 
   if (value >= 0) {
     value = 0;
@@ -116,7 +117,7 @@ const scrollTo = (value: number) => {
 
   translateLeft = value;
 
-  itemsContainer.value.style.transform = `translate(${translateLeft}px, 0px)`;
+  itemsContainerEl.value.style.transform = `translate(${translateLeft}px, 0px)`;
 };
 
 watch(
diff --git a/packages/editor/src/layouts/props-panel/FormPanel.vue b/packages/editor/src/layouts/props-panel/FormPanel.vue
index d502a2706..a3f378ab0 100644
--- a/packages/editor/src/layouts/props-panel/FormPanel.vue
+++ b/packages/editor/src/layouts/props-panel/FormPanel.vue
@@ -88,12 +88,12 @@ const propsPanelSize = computed(() => services?.uiService.get('propsPanelSize')
 const { height: editorContentHeight } = useEditorContentHeight();
 const stage = computed(() => services?.editorService.get('stage'));
 
-const configForm = useTemplateRef<InstanceType<typeof MForm>>('configForm');
+const configFormRef = useTemplateRef<InstanceType<typeof MForm>>('configForm');
 
 watchEffect(() => {
-  if (configForm.value) {
-    configForm.value.formState.stage = stage.value;
-    configForm.value.formState.services = services;
+  if (configFormRef.value) {
+    configFormRef.value.formState.stage = stage.value;
+    configFormRef.value.formState.services = services;
   }
 });
 
@@ -104,7 +104,7 @@ onMounted(() => {
 
 const submit = async (v: FormValue, eventData: ContainerChangeEventData) => {
   try {
-    const values = await configForm.value?.submitForm();
+    const values = await configFormRef.value?.submitForm();
     emit('submit', values, eventData);
   } catch (e: any) {
     emit('submit-error', e);
@@ -119,5 +119,5 @@ const saveCode = (values: any) => {
   emit('submit', props.codeValueKey ? { [props.codeValueKey]: values } : values);
 };
 
-defineExpose({ configForm, submit });
+defineExpose({ configForm: configFormRef, submit });
 </script>
diff --git a/packages/editor/src/layouts/sidebar/code-block/CodeBlockListPanel.vue b/packages/editor/src/layouts/sidebar/code-block/CodeBlockListPanel.vue
index 71cb8733b..c87014b7c 100644
--- a/packages/editor/src/layouts/sidebar/code-block/CodeBlockListPanel.vue
+++ b/packages/editor/src/layouts/sidebar/code-block/CodeBlockListPanel.vue
@@ -89,10 +89,10 @@ const editable = computed(() => codeBlockService?.getEditStatus());
 const { codeBlockEditor, codeConfig, editCode, deleteCode, createCodeBlock, submitCodeBlockHandler } =
   useCodeBlockEdit(codeBlockService);
 
-const codeBlockList = useTemplateRef<InstanceType<typeof CodeBlockList>>('codeBlockList');
+const codeBlockListRef = useTemplateRef<InstanceType<typeof CodeBlockList>>('codeBlockList');
 
 const filterTextChangeHandler = (val: string) => {
-  codeBlockList.value?.filter(val);
+  codeBlockListRef.value?.filter(val);
 };
 
 eventBus?.on('edit-code', (id: string) => {
@@ -104,7 +104,7 @@ const {
   menuData: contentMenuData,
   contentMenuHideHandler,
 } = useContentMenu((id: string) => {
-  codeBlockList.value?.deleteCode(id);
+  codeBlockListRef.value?.deleteCode(id);
 });
 const menuData = computed<(MenuButton | MenuComponent)[]>(() => props.customContentMenu(contentMenuData, 'code-block'));
 </script>
diff --git a/packages/editor/src/layouts/sidebar/layer/LayerMenu.vue b/packages/editor/src/layouts/sidebar/layer/LayerMenu.vue
index afb9b9b89..52a1c6f02 100644
--- a/packages/editor/src/layouts/sidebar/layer/LayerMenu.vue
+++ b/packages/editor/src/layouts/sidebar/layer/LayerMenu.vue
@@ -27,7 +27,7 @@ const emit = defineEmits<{
 }>();
 
 const services = inject<Services>('services');
-const menu = useTemplateRef<InstanceType<typeof ContentMenu>>('menu');
+const menuRef = 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() || []);
@@ -113,7 +113,7 @@ const menuData = computed<(MenuButton | MenuComponent)[]>(() =>
 );
 
 const show = (e: MouseEvent) => {
-  menu.value?.show(e);
+  menuRef.value?.show(e);
 };
 
 defineExpose({
diff --git a/packages/editor/src/layouts/sidebar/layer/LayerPanel.vue b/packages/editor/src/layouts/sidebar/layer/LayerPanel.vue
index 74ece6884..d2f208dc8 100644
--- a/packages/editor/src/layouts/sidebar/layer/LayerPanel.vue
+++ b/packages/editor/src/layouts/sidebar/layer/LayerPanel.vue
@@ -87,13 +87,13 @@ defineProps<{
 const services = inject<Services>('services');
 const editorService = services?.editorService;
 
-const tree = useTemplateRef<InstanceType<typeof Tree>>('tree');
+const treeRef = useTemplateRef<InstanceType<typeof Tree>>('tree');
 
 const page = computed(() => editorService?.get('page'));
 const nodeData = computed<TreeNodeData[]>(() => (!page.value ? [] : [page.value]));
 
 const { nodeStatusMap } = useNodeStatus(services);
-const { isCtrlKeyDown } = useKeybinding(services, tree);
+const { isCtrlKeyDown } = useKeybinding(services, treeRef);
 
 const filterNodeMethod = (v: string, data: MNode): boolean => {
   let name = '';
@@ -121,10 +121,11 @@ const collapseAllHandler = () => {
 
 const { handleDragStart, handleDragEnd, handleDragLeave, handleDragOver } = useDrag(services);
 
+// 右键菜单
+const menuRef = useTemplateRef<InstanceType<typeof LayerMenu>>('menu');
 const {
-  menu,
   nodeClickHandler,
   nodeContentMenuHandler,
   highlightHandler: mouseenterHandler,
-} = useClick(services, isCtrlKeyDown, nodeStatusMap);
+} = useClick(services, isCtrlKeyDown, nodeStatusMap, menuRef);
 </script>
diff --git a/packages/editor/src/layouts/sidebar/layer/use-click.ts b/packages/editor/src/layouts/sidebar/layer/use-click.ts
index 3f5db0f22..47fa589b9 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, useTemplateRef } from 'vue';
+import { computed, type ComputedRef, nextTick, type Ref, type ShallowRef } from 'vue';
 import { throttle } from 'lodash-es';
 
 import { Id, MNode } from '@tmagic/core';
@@ -13,6 +13,7 @@ export const useClick = (
   services: Services | undefined,
   isCtrlKeyDown: Ref<boolean>,
   nodeStatusMap: ComputedRef<Map<Id, LayerNodeStatus> | undefined>,
+  menuRef: ShallowRef<InstanceType<typeof LayerMenu> | null>,
 ) => {
   const isMultiSelect = computed(() => isCtrlKeyDown.value && !services?.editorService.get('disabledMultiSelect'));
 
@@ -98,11 +99,8 @@ export const useClick = (
     });
   };
 
-  // 右键菜单
-  const menu = useTemplateRef<InstanceType<typeof LayerMenu>>('menu');
-
   return {
-    menu,
+    menuRef,
 
     nodeClickHandler,
 
@@ -114,7 +112,7 @@ export const useClick = (
         nodeClickHandler(event, data);
       }
 
-      menu.value?.show(event);
+      menuRef.value?.show(event);
     },
 
     highlightHandler,
diff --git a/packages/editor/src/layouts/workspace/viewer/NodeListMenu.vue b/packages/editor/src/layouts/workspace/viewer/NodeListMenu.vue
index d85d3c0cd..917724d23 100644
--- a/packages/editor/src/layouts/workspace/viewer/NodeListMenu.vue
+++ b/packages/editor/src/layouts/workspace/viewer/NodeListMenu.vue
@@ -39,8 +39,8 @@ const editorService = services?.editorService;
 
 const visible = ref(false);
 const buttonVisible = ref(false);
-const button = useTemplateRef<HTMLDivElement>('button');
-const box = useTemplateRef<InstanceType<typeof FloatingBox>>('box');
+const buttonEl = useTemplateRef<HTMLDivElement>('button');
+const boxRef = useTemplateRef<InstanceType<typeof FloatingBox>>('box');
 
 const stage = computed(() => editorService?.get('stage'));
 const page = computed(() => editorService?.get('page'));
@@ -99,14 +99,14 @@ const menuPosition = ref({
 });
 
 watch(visible, async (visible) => {
-  if (!button.value || !visible) {
+  if (!buttonEl.value || !visible) {
     return;
   }
 
   await nextTick();
 
-  const rect = button.value.getBoundingClientRect();
-  const height = box.value?.target?.clientHeight || 0;
+  const rect = buttonEl.value.getBoundingClientRect();
+  const height = boxRef.value?.target?.clientHeight || 0;
 
   menuPosition.value = {
     left: rect.left + rect.width + 5,
diff --git a/packages/editor/src/layouts/workspace/viewer/Stage.vue b/packages/editor/src/layouts/workspace/viewer/Stage.vue
index f04ea64ac..278625402 100644
--- a/packages/editor/src/layouts/workspace/viewer/Stage.vue
+++ b/packages/editor/src/layouts/workspace/viewer/Stage.vue
@@ -14,7 +14,7 @@
       width: 60,
       height: 50,
     }"
-    @click="stageWrap?.container?.focus()"
+    @click="stageWrapRef?.container?.focus()"
   >
     <div
       class="m-editor-stage-container"
@@ -95,9 +95,9 @@ const services = inject<Services>('services');
 
 const stageLoading = computed(() => services?.editorService.get('stageLoading') || false);
 
-const stageWrap = useTemplateRef<InstanceType<typeof ScrollViewer>>('stageWrap');
-const stageContainer = useTemplateRef<HTMLDivElement>('stageContainer');
-const menu = useTemplateRef<InstanceType<typeof ViewerMenu>>('menu');
+const stageWrapRef = useTemplateRef<InstanceType<typeof ScrollViewer>>('stageWrap');
+const stageContainerEl = useTemplateRef<HTMLDivElement>('stageContainer');
+const menuRef = useTemplateRef<InstanceType<typeof ViewerMenu>>('menu');
 
 const nodes = computed(() => services?.editorService.get('nodes') || []);
 const isMultiSelect = computed(() => nodes.value.length > 1);
@@ -111,18 +111,18 @@ const node = computed(() => services?.editorService.get('node'));
 watchEffect(() => {
   if (stage || !page.value) return;
 
-  if (!stageContainer.value) return;
+  if (!stageContainerEl.value) return;
   if (!(props.stageOptions?.runtimeUrl || props.stageOptions?.render) || !root.value) return;
 
   stage = useStage(props.stageOptions);
 
   stage.on('select', () => {
-    stageWrap.value?.container?.focus();
+    stageWrapRef.value?.container?.focus();
   });
 
   services?.editorService.set('stage', markRaw(stage));
 
-  stage.mount(stageContainer.value);
+  stage.mount(stageContainerEl.value);
 
   if (!node.value?.id) {
     return;
@@ -188,9 +188,9 @@ const resizeObserver = new ResizeObserver((entries) => {
 });
 
 onMounted(() => {
-  if (stageWrap.value?.container) {
-    resizeObserver.observe(stageWrap.value.container);
-    services?.keybindingService.registerEl(KeyBindingContainerKey.STAGE, stageWrap.value.container);
+  if (stageWrapRef.value?.container) {
+    resizeObserver.observe(stageWrapRef.value.container);
+    services?.keybindingService.registerEl(KeyBindingContainerKey.STAGE, stageWrapRef.value.container);
   }
 });
 
@@ -206,7 +206,7 @@ const parseDSL = getEditorConfig('parseDSL');
 
 const contextmenuHandler = (e: MouseEvent) => {
   e.preventDefault();
-  menu.value?.show(e);
+  menuRef.value?.show(e);
 };
 
 const dragoverHandler = (e: DragEvent) => {
@@ -239,10 +239,10 @@ const dropHandler = async (e: DragEvent) => {
     parent = services?.editorService.getNodeById(parentId, false) as MContainer;
   }
 
-  if (parent && stageContainer.value && stage) {
+  if (parent && stageContainerEl.value && stage) {
     const layout = await services?.editorService.getLayout(parent);
 
-    const containerRect = stageContainer.value.getBoundingClientRect();
+    const containerRect = stageContainerEl.value.getBoundingClientRect();
     const { scrollTop, scrollLeft } = stage.mask!;
     const { style = {} } = config.data;
 
diff --git a/packages/editor/src/layouts/workspace/viewer/StageOverlay.vue b/packages/editor/src/layouts/workspace/viewer/StageOverlay.vue
index 630825176..e85639e04 100644
--- a/packages/editor/src/layouts/workspace/viewer/StageOverlay.vue
+++ b/packages/editor/src/layouts/workspace/viewer/StageOverlay.vue
@@ -19,7 +19,7 @@ const services = inject<Services>('services');
 
 const stageOptions = inject<StageOptions>('stageOptions');
 
-const stageOverlay = useTemplateRef<HTMLDivElement>('stageOverlay');
+const stageOverlayEl = useTemplateRef<HTMLDivElement>('stageOverlay');
 
 const stageOverlayVisible = computed(() => services?.stageOverlayService.get('stageOverlayVisible'));
 const wrapWidth = computed(() => services?.stageOverlayService.get('wrapWidth') || 0);
@@ -42,7 +42,7 @@ watch(stage, (stage) => {
   }
 });
 
-watch(stageOverlay, (stageOverlay) => {
+watch(stageOverlayEl, (stageOverlay) => {
   if (!services) return;
 
   const subStage = services.stageOverlayService.createStage(stageOptions);
diff --git a/packages/editor/src/layouts/workspace/viewer/ViewerMenu.vue b/packages/editor/src/layouts/workspace/viewer/ViewerMenu.vue
index 31dd80e08..13121e1bf 100644
--- a/packages/editor/src/layouts/workspace/viewer/ViewerMenu.vue
+++ b/packages/editor/src/layouts/workspace/viewer/ViewerMenu.vue
@@ -31,7 +31,7 @@ const props = withDefaults(
 
 const services = inject<Services>('services');
 const editorService = services?.editorService;
-const menu = useTemplateRef<InstanceType<typeof ContentMenu>>('menu');
+const menuRef = useTemplateRef<InstanceType<typeof ContentMenu>>('menu');
 const canCenter = ref(false);
 
 const node = computed(() => editorService?.get('node'));
@@ -52,7 +52,7 @@ const menuData = computed<(MenuButton | MenuComponent)[]>(() =>
         },
       },
       useCopyMenu(),
-      usePasteMenu(menu),
+      usePasteMenu(menuRef),
       {
         type: 'divider',
         direction: 'horizontal',
@@ -136,7 +136,7 @@ watch(
 );
 
 const show = (e: MouseEvent) => {
-  menu.value?.show(e);
+  menuRef.value?.show(e);
 };
 
 defineExpose({ show });