feat: DraggableCard z-index

src/components/DraggableCard.vue

@@ -150,10 +150,28 @@ const updateTarget = (arg: unknown) => {
     target.value = void 0;
   }
 };
+
+const { setTop, zIndex } = useZIndexStore().useZindex();
+watch(
+  () => props.show,
+  () => {
+    if (props.show) {
+      setTop();
+    }
+  },
+);
 </script>
 <template>
   <Teleport to="#app">
-    <div v-if="show" fixed ref="box" :style="currentStyle" :class="props.class">
+    <div
+      v-if="show"
+      fixed
+      ref="box"
+      :style="[currentStyle, { zIndex }]"
+      :class="props.class"
+      class="DraggableCard"
+      @mousedown="setTop"
+    >
       <slot :onRef="updateTarget" :moved="moved"></slot>
 
       <template v-if="sizeDraggable">

src/store/zIndex.ts

@@ -0,0 +1,31 @@
+export const useZIndexStore = defineStore('zIndex', () => {
+  const globalZIndex = shallowRef(1000);
+  const zIndexMap = new Map<number, Ref<number>>();
+
+  let size = 0;
+  const useZindex = () => {
+    size++;
+    const key = size;
+    if (!zIndexMap.has(key)) {
+      zIndexMap.set(key, shallowRef(++globalZIndex.value));
+    }
+    const zIndex = zIndexMap.get(key)!;
+
+    const setTop = () => {
+      zIndex.value = ++globalZIndex.value;
+    };
+
+    onUnmounted(() => {
+      zIndexMap.delete(key);
+    });
+
+    return {
+      zIndex,
+      setTop,
+    };
+  };
+
+  return {
+    useZindex,
+  };
+});

src/views/snapshot/OverlapCard.vue

@@ -11,7 +11,7 @@ const left = _1vw * 25.5;
   <DraggableCard
     :initialValue="{ top: 215, left }"
     v-slot="{ onRef }"
-    class="z-2 box-shadow-dim w-420px"
+    class="box-shadow-dim w-420px"
     :show="Boolean(overlapNodes && focusPosition)"
   >
     <NCard

src/views/snapshot/RuleCard.vue

@@ -149,7 +149,7 @@ const targetNode = computed(() => {
     :minWidth="300"
     sizeDraggable
     v-slot="{ onRef }"
-    class="z-2 box-shadow-dim"
+    class="box-shadow-dim"
     :show="show"
   >
     <div bg-white b-1px b-solid b-gray-200 rounded-4px p-8px>

src/views/snapshot/SearchCard.vue

@@ -219,7 +219,7 @@ const shareResult = (result: SearchResult) => {
     :minWidth="300"
     sizeDraggable
     v-slot="{ onRef }"
-    class="z-1 box-shadow-dim"
+    class="box-shadow-dim"
     :show="show"
   >
     <div bg-white b-1px b-solid b-gray-200 rounded-4px p-8px>