feat: implement auto-z-index directive and update z-index values across components

Author: purocean

src/renderer/Main.vue

@@ -145,7 +145,7 @@ export default defineComponent({
 
 .presentation-exit {
   position: fixed;
-  z-index: 99999;
+  z-index: 210000000;
   bottom: 6px;
   left: 6px;
   padding: 10px;

src/renderer/components/ContextMenu.vue

@@ -1,5 +1,5 @@
 <template>
-  <XMask transparent :show="items && items.length > 0" @close="hide" :style="{ zIndex: 2147483646 }">
+  <XMask transparent :show="items && items.length > 0" @close="hide" layer="context-menu">
     <ul :class="{menu: true, 'item-focus': itemFocus}" ref="refMenu" @contextmenu.prevent tabindex="-1" v-auto-focus>
       <template v-for="(item, i) in items">
         <li v-if="item.type === 'separator'" v-show="!item.hidden" :key="i" :class="item.type" />
@@ -175,7 +175,7 @@ export default defineComponent({
   border: 1px var(--g-color-84) solid;
   border-left: 0;
   border-top: 0;
-  z-index: 2147483647;
+  z-index: 1000;
   color: var(--g-foreground-color);
   min-width: 9em;
   cursor: default;

src/renderer/components/ControlCenter.vue

@@ -1,6 +1,6 @@
 <template>
   <teleport to="body">
-    <div v-if="visible && schema" class="control-center" v-fixed-float="{ onClose: (byClickSelf: any) => !byClickSelf && toggle(false) }">
+    <div v-if="visible && schema" class="control-center" v-fixed-float="{ onClose: (byClickSelf: any) => !byClickSelf && toggle(false) }" v-auto-z-index="{ layer: 'popup' }">
       <div v-for="(row, category) in schema" :key="category" class="row">
         <template v-for="(item, i) in row?.items" :key="i">
           <div
@@ -82,7 +82,6 @@ onBeforeUnmount(() => {
   position: fixed;
   right: 14px;
   top: 36px;
-  z-index: 1000;
   outline: none;
   background: var(--g-color-backdrop);
   backdrop-filter: var(--g-backdrop-filter);

src/renderer/components/FixedFloat.vue

@@ -7,6 +7,7 @@
         onBlur: (byClickSelf: any) => emits('blur', byClickSelf),
         disableAutoFocus: props.disableAutoFocus
       }"
+      v-auto-z-index="{ layer: 'popup' }"
       @click.stop
       v-bind="$attrs"
       :style="{
@@ -56,6 +57,5 @@ const emits = defineEmits<{
   border-radius: var(--g-border-radius);
   overflow: hidden;
   backdrop-filter: var(--g-backdrop-filter);
-  z-index: 9999999;
 }
 </style>

src/renderer/components/KeyboardShortcuts.vue

@@ -534,7 +534,7 @@ table {
   height: 100%;
   top: 0;
   left: 0;
-  z-index: 900000;
+  z-index: 210000000;
   display: flex;
   flex-direction: column;
   align-items: center;

src/renderer/components/Mask.vue

@@ -1,7 +1,7 @@
 <template>
   <teleport to="body">
     <transition name="fade">
-      <div v-if="show" :class="{'mask-wrapper': true, transparent}" :style="wrapperStyle">
+      <div v-if="show" :class="{'mask-wrapper': true, transparent}" :style="style" v-auto-z-index="{ layer, onEsc }">
         <div class="mask" @click="() => maskCloseable && $emit('close')" @contextmenu.prevent.stop="$emit('close')" />
         <div class="content">
           <slot></slot>
@@ -12,11 +12,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, onBeforeUnmount, onMounted, ref, watch } from 'vue'
-import { registerHook, removeHook } from '@fe/core/hook'
-
-let zIndex = 199998
-const maskStack: number[] = []
+import { defineComponent } from 'vue'
 
 export default defineComponent({
   name: 'x-mask',
@@ -38,50 +34,20 @@ export default defineComponent({
       type: [Object, String],
       default: () => ({}),
     },
+    layer: {
+      type: String as () => 'popup' | 'context-menu' | 'max',
+      default: 'popup'
+    },
   },
   emits: ['close'],
   setup (props, { emit }) {
-    const zIndexRef = ref(zIndex++)
-
-    function keydownHandler (e: KeyboardEvent) {
-      if (e.key === 'Escape' && props.show) {
-        // close top mask
-        if (!maskStack.includes(zIndexRef.value) || Math.max(...maskStack) !== zIndexRef.value) {
-          return
-        }
-
+    function onEsc () {
+      if (props.show) {
         props.escCloseable && emit('close')
-        e.stopPropagation()
       }
     }
 
-    watch(() => props.show, (val) => {
-      if (val) {
-        maskStack.push(zIndexRef.value)
-      } else {
-        maskStack.splice(maskStack.indexOf(zIndexRef.value), 1)
-      }
-    }, { immediate: true, flush: 'post' })
-
-    watch(() => props.show, (val) => {
-      if (val) {
-        zIndex++
-        zIndexRef.value = zIndex
-      }
-    })
-
-    const wrapperStyle = computed(() => (typeof props.style === 'string' ? props.style : { zIndex: zIndexRef.value, ...props.style }))
-
-    onMounted(() => {
-      registerHook('GLOBAL_KEYDOWN', keydownHandler)
-    })
-
-    onBeforeUnmount(() => {
-      removeHook('GLOBAL_KEYDOWN', keydownHandler)
-      maskStack.splice(maskStack.indexOf(zIndexRef.value), 1)
-    })
-
-    return { wrapperStyle }
+    return { onEsc }
   },
 })
 </script>
@@ -93,7 +59,6 @@ export default defineComponent({
   left: 0;
   width: 100%;
   height: 100%;
-  z-index: 199998;
   padding-top: 6em;
 }
 

src/renderer/components/Premium.vue

@@ -283,7 +283,7 @@ export default defineComponent({
           particleCount: 150,
           spread: 100,
           origin: { y: 0.6 },
-          zIndex: Number.MAX_SAFE_INTEGER,
+          zIndex: 2.1e8,
         })
       }
     }

src/renderer/components/StatusBarMenu.vue

@@ -103,7 +103,7 @@ export default defineComponent({
 .status-bar-menu {
   cursor: pointer;
   user-select: none;
-  z-index: 99999999;
+  z-index: 300000;
   position: relative;
   overflow-x: hidden;
   font-variant-numeric: tabular-nums;

src/renderer/components/TitleBar.vue

@@ -252,7 +252,7 @@ export default defineComponent({
   -webkit-user-select: none;
   -webkit-app-region: drag;
   position: relative;
-  z-index: 199999;
+  z-index: 8000000;
 }
 
 .resizer {

src/renderer/components/Toast.vue

@@ -61,7 +61,7 @@ export default defineComponent({
   left: 0;
   top: 100px;
   padding: 10px 20px;
-  z-index: 999999;
+  z-index: 200000000;
   right: 0;
   margin: auto;
   border-radius: 50px;