feat(editor): 缓存可选组件菜单置于顶层状态

Tencent · Nov 3, 2023 · 263533f · 263533f
1 parent 1c3f8ab
commit 263533f
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 8 deletions.
diff --git a/packages/editor/src/components/ContentMenu.vue b/packages/editor/src/components/ContentMenu.vue
@@ -126,17 +126,13 @@ const setPosition = (e: { clientY: number; clientX: number }) => {
   };
 };
 
-const show = (e?: MouseEvent) => {
+const show = (e?: { clientY: number; clientX: number }) => {
   // 加settimeout是以为，如果菜单中的按钮监听的是mouseup，那么菜单显示出来时鼠标如果正好在菜单上就会马上触发按钮的mouseup
   setTimeout(() => {
     visible.value = true;
 
-    if (!e) {
-      return;
-    }
-
     nextTick(() => {
-      setPosition(e);
+      e && setPosition(e);
 
       emit('show');
     });

diff --git a/packages/editor/src/layouts/workspace/viewer/NodeListMenu.vue b/packages/editor/src/layouts/workspace/viewer/NodeListMenu.vue
@@ -26,11 +26,15 @@ import ContentMenu from '@editor/components/ContentMenu.vue';
 import type { ComponentItem, MenuButton, Services } from '@editor/type';
 
 import NodeListMenuTitle from './NodeListMenuTitle.vue';
+
+const PINNED_STATUE_CACHE_KEY = 'tmagic-pinned-node-list-pinned-status';
+
 const props = defineProps<{ isMultiSelect?: boolean }>();
 
 const menu = ref<InstanceType<typeof ContentMenu>>();
 const nodeList = ref<MNode[]>([]);
-const pinned = ref(false);
+const pinned = ref(Boolean(globalThis.localStorage.getItem(PINNED_STATUE_CACHE_KEY)));
+const firstShow = ref(true);
 
 const services = inject<Services>('services');
 const editorService = services?.editorService;
@@ -94,7 +98,8 @@ const unWatch = watch(
         nodeList.value = nodes;
 
         if (nodeList.value.length > 1) {
-          menu.value?.show(pinned.value ? undefined : event);
+          menu.value?.show(pinned.value && !firstShow.value ? undefined : event);
+          firstShow.value = false;
         }
       }, 1500);
     });
@@ -163,4 +168,8 @@ const dragMenuHandler = ({ deltaY, deltaX }: OnDrag) => {
 const closeHandler = () => {
   menu.value?.hide();
 };
+
+watch(pinned, () => {
+  globalThis.localStorage.setItem(PINNED_STATUE_CACHE_KEY, pinned.value.toString());
+});
 </script>