From db8c404b70175a100baf3ecd4d90a5838f061972 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E5=88=BA=E8=9E=88?= <i@songe.li>
Date: Thu, 21 Nov 2024 22:12:36 +0800
Subject: [PATCH] perf: useZindex

---
 src/components/DraggableCard.vue |  4 ++--
 src/store/zIndex.ts              | 31 -------------------------------
 src/utils/draggable.ts           | 13 +++++++++++++
 3 files changed, 15 insertions(+), 33 deletions(-)
 delete mode 100644 src/store/zIndex.ts

diff --git a/src/components/DraggableCard.vue b/src/components/DraggableCard.vue
index 95f3b52..fd10ca1 100644
--- a/src/components/DraggableCard.vue
+++ b/src/components/DraggableCard.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useDragMove } from '@/utils/draggable';
+import { useDragMove, useZindex } from '@/utils/draggable';
 
 const props = withDefaults(
   defineProps<{
@@ -151,7 +151,7 @@ const updateTarget = (arg: unknown) => {
   }
 };
 
-const { setTop, zIndex } = useZIndexStore().useZindex();
+const { setTop, zIndex } = useZindex();
 watch(
   () => props.show,
   () => {
diff --git a/src/store/zIndex.ts b/src/store/zIndex.ts
deleted file mode 100644
index 0483306..0000000
--- a/src/store/zIndex.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-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,
-  };
-});
diff --git a/src/utils/draggable.ts b/src/utils/draggable.ts
index 100a6ba..efda56f 100644
--- a/src/utils/draggable.ts
+++ b/src/utils/draggable.ts
@@ -77,3 +77,16 @@ export const useDragMove = (xFilter: (x: number) => boolean) => {
     offset,
   };
 };
+
+let initValue = 1000;
+export const useZindex = () => {
+  initValue++;
+  const zIndex = shallowRef(initValue);
+  const setTop = () => {
+    zIndex.value = ++initValue;
+  };
+  return {
+    zIndex,
+    setTop,
+  };
+};