feat(design,element-plus-adapter): 新增获取浮层zIndex的方法

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

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

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