refactor(editor): 模板改成使用useTemplateRef

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) => {

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 = []) => [
   {

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();

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);

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>

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);

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};

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');

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' }[]>([]);

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;
 

packages/editor/src/fields/DataSourceMocks.vue

@@ -15,7 +15,6 @@
     >
       <template #body>
         <MFormBox
-          ref="addDialog"
           label-width="120px"
           :config="formConfig"
           :values="formValues"

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"

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 () => {

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,
   };
 };

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 => {

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'));

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);
 });

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');

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 ||

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);
 });

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);

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() || []);

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]));

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,

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;
 

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'));

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);

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);

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'));

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;
   }
 }

packages/editor/src/theme/resizer.scss

@@ -20,7 +20,7 @@
     }
   }
 
-  &.m-editor-resizer-draging {
+  &.m-editor-resizer-dragging {
     &::after {
       content: "";
       position: absolute;

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),