From 81e3d0a18eac05b29838d39ee237000d2120f49d Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Mon, 8 Jan 2024 16:42:45 +0800
Subject: [PATCH] =?UTF-8?q?feat(design,element-plus-adapter):=20=E6=96=B0?=
 =?UTF-8?q?=E5=A2=9E=E8=8E=B7=E5=8F=96=E6=B5=AE=E5=B1=82zIndex=E7=9A=84?=
 =?UTF-8?q?=E6=96=B9=E6=B3=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/design/src/index.ts               | 31 +++++++++++++++++++++-
 packages/design/src/types.ts               |  7 ++++-
 packages/element-plus-adapter/src/index.ts |  2 ++
 3 files changed, 38 insertions(+), 2 deletions(-)

diff --git a/packages/design/src/index.ts b/packages/design/src/index.ts
index 87fffbae..a3bc3165 100644
--- a/packages/design/src/index.ts
+++ b/packages/design/src/index.ts
@@ -1,4 +1,5 @@
-import { App } from 'vue';
+import type { App, Ref } from 'vue';
+import { computed, ref, unref } from 'vue';
 
 import { setConfig } from './config';
 import { PluginOptions, TMagicMessage, TMagicMessageBox } from './types';
@@ -81,6 +82,30 @@ export const tMagicMessageBox = {
   },
 } as unknown as TMagicMessageBox;
 
+const zIndex = ref(0);
+export const DEFAULT_INITIAL_Z_INDEX = 2000;
+
+// eslint-disable-next-line import/no-mutable-exports
+export let useZIndex = (zIndexOverrides?: Ref<number>) => {
+  const zIndexInjection = zIndexOverrides;
+  const initialZIndex = computed(() => {
+    const zIndexFromInjection = unref(zIndexInjection);
+    return zIndexFromInjection ?? DEFAULT_INITIAL_Z_INDEX;
+  });
+  const currentZIndex = computed(() => initialZIndex.value + zIndex.value);
+
+  const nextZIndex = () => {
+    zIndex.value += 1;
+    return currentZIndex.value;
+  };
+
+  return {
+    initialZIndex,
+    currentZIndex,
+    nextZIndex,
+  };
+};
+
 export default {
   install(app: App, options: PluginOptions) {
     if (options.message) {
@@ -102,6 +127,10 @@ export default {
       app.directive('loading', options.loading);
     }
 
+    if (options.useZIndex) {
+      useZIndex = options.useZIndex;
+    }
+
     app.config.globalProperties.$MAGIC_DESIGN = options;
     setConfig(options);
   },
diff --git a/packages/design/src/types.ts b/packages/design/src/types.ts
index 90bd9fe3..f1ee48fa 100644
--- a/packages/design/src/types.ts
+++ b/packages/design/src/types.ts
@@ -1,4 +1,4 @@
-import { DefineComponent, Directive } from 'vue';
+import { ComputedRef, DefineComponent, Directive, Ref } from 'vue';
 
 export type FieldSize = 'large' | 'default' | 'small';
 
@@ -704,5 +704,10 @@ export interface PluginOptions {
   messageBox?: TMagicMessageBox;
   components?: Components;
   loading?: Directive<ElementLoading, LoadingBinding>;
+  useZIndex?: (zIndexOverrides?: Ref<number>) => {
+    initialZIndex: ComputedRef<number>;
+    currentZIndex: ComputedRef<number>;
+    nextZIndex: () => number;
+  };
   [key: string]: any;
 }
diff --git a/packages/element-plus-adapter/src/index.ts b/packages/element-plus-adapter/src/index.ts
index 25aed4fe..e76c9049 100644
--- a/packages/element-plus-adapter/src/index.ts
+++ b/packages/element-plus-adapter/src/index.ts
@@ -46,6 +46,7 @@ import {
   ElTooltip,
   ElTree,
   ElUpload,
+  useZIndex,
 } from 'element-plus';
 
 import type {
@@ -94,6 +95,7 @@ import type {
 } from '@tmagic/design';
 
 const adapter: PluginOptions = {
+  useZIndex,
   message: ElMessage,
   messageBox: ElMessageBox,
   components: {