refactor:统一和调高系统级 z-index 配置值

Author: build-admin

web/src/api/common.ts

@@ -10,6 +10,7 @@ import type { AxiosRequestConfig } from 'axios'
 import { uuid } from '/@/utils/random'
 import { i18n } from '../lang'
 import { adminBaseRoutePath } from '/@/router/static/adminBase'
+import { SYSTEM_ZINDEX } from '/@/stores/constant/common'
 
 /*
  * 公共请求函数和Url定义
@@ -60,7 +61,7 @@ export function fileUpload(fd: FormData, params: anyObj = {}, forceLocal = false
             ElNotification({
                 type: 'error',
                 message: errorMsg,
-                zIndex: 9999,
+                zIndex: SYSTEM_ZINDEX,
             })
             reject(errorMsg)
         })

web/src/components/clickCaptcha/index.vue

@@ -43,6 +43,7 @@ import { computed, reactive } from 'vue'
 import { Props } from './index'
 import { checkClickCaptcha, getCaptchaData } from '/@/api/common'
 import { i18n } from '/@/lang'
+import { SYSTEM_ZINDEX } from '/@/stores/constant/common'
 
 const props = withDefaults(defineProps<Props>(), {
     uuid: '',
@@ -135,7 +136,7 @@ load()
     border: 1px solid var(--el-border-color-extra-light);
     background-color: var(--el-color-white);
     position: fixed;
-    z-index: 9999991;
+    z-index: v-bind('SYSTEM_ZINDEX');
     left: calc(50% - v-bind('captchaBoxLeft'));
     top: calc(50% - v-bind('captchaBoxTop'));
     border-radius: 10px;

web/src/components/contextmenu/index.vue

@@ -25,6 +25,7 @@
 import { onMounted, reactive, toRaw } from 'vue'
 import { useEventListener } from '@vueuse/core'
 import type { Axis, ContextMenuItemClickEmitArg, Props } from './interface'
+import { SYSTEM_ZINDEX } from '/@/stores/constant/common'
 
 const props = withDefaults(defineProps<Props>(), {
     width: 150,
@@ -115,7 +116,7 @@ onMounted(() => {
 <style scoped lang="scss">
 .ba-contextmenu {
     position: fixed;
-    z-index: 9999;
+    z-index: v-bind('SYSTEM_ZINDEX');
 }
 .el-popper,
 .el-popper.is-light .el-popper__arrow::before {

web/src/layouts/backend/components/aside.vue

@@ -13,6 +13,7 @@ import MenuVertical from '/@/layouts/backend/components/menus/menuVertical.vue'
 import MenuVerticalChildren from '/@/layouts/backend/components/menus/menuVerticalChildren.vue'
 import { useConfig } from '/@/stores/config'
 import { useNavTabs } from '/@/stores/navTabs'
+import { SYSTEM_ZINDEX } from '/@/stores/constant/common'
 
 defineOptions({
     name: 'layout/aside',
@@ -48,6 +49,6 @@ const menuWidth = computed(() => config.menuWidth())
     position: fixed;
     top: 0;
     left: 0;
-    z-index: 9999999;
+    z-index: v-bind('SYSTEM_ZINDEX');
 }
 </style>

web/src/layouts/backend/components/closeFullScreen.vue

@@ -10,6 +10,7 @@
 <script setup lang="ts">
 import { reactive, onMounted } from 'vue'
 import { useNavTabs } from '/@/stores/navTabs'
+import { SYSTEM_ZINDEX } from '/@/stores/constant/common'
 
 const navTabs = useNavTabs()
 
@@ -43,7 +44,7 @@ const onCloseFullScreen = () => {
     justify-content: center;
     position: fixed;
     right: calc(50% - 20px);
-    z-index: 9999999;
+    z-index: v-bind('SYSTEM_ZINDEX');
     height: 40px;
     width: 40px;
     background-color: rgba($color: #000000, $alpha: 0.1);
@@ -63,7 +64,7 @@ const onCloseFullScreen = () => {
 .close-full-screen-on {
     position: fixed;
     top: 0;
-    z-index: 9999998;
+    z-index: v-bind('SYSTEM_ZINDEX');
     height: 60px;
     width: 100px;
     left: calc(50% - 50px);

web/src/stores/constant/common.ts

@@ -0,0 +1,8 @@
+/**
+ * 公共常量定义
+ */
+
+/**
+ * 系统级 z-index 配置，比如全局通知消息的 z-index（浏览器支持的最大值通常为 2147483647）
+ */
+export const SYSTEM_ZINDEX = 2147483600

web/src/stores/terminal.ts

@@ -4,6 +4,7 @@ import { nextTick, reactive } from 'vue'
 import { buildTerminalUrl } from '/@/api/common'
 import { i18n } from '/@/lang/index'
 import { STORE_TERMINAL } from '/@/stores/constant/cacheKey'
+import { SYSTEM_ZINDEX } from '/@/stores/constant/common'
 import { taskStatus } from '/@/stores/constant/terminalTaskStatus'
 import type { Terminal } from '/@/stores/interface/index'
 import { timeFormat } from '/@/utils/common'
@@ -124,7 +125,7 @@ export const useTerminal = defineStore(
                         ElNotification({
                             type: 'error',
                             message: i18n.global.t('terminal.Newly added tasks will never start because they are blocked by failed tasks'),
-                            zIndex: 9999,
+                            zIndex: SYSTEM_ZINDEX,
                         })
                         break
                     }

web/src/styles/app.scss

@@ -94,7 +94,7 @@ body,
     transform: translateY(-4px) scale(1.02);
     -webkit-box-shadow: 0 14px 24px rgba(0, 0, 0, 0.2);
     box-shadow: 0 14px 24px rgba(0, 0, 0, 0.2);
-    z-index: 999;
+    z-index: 2147483600;
     border-radius: 6px;
 }
 /* 鼠标置入浮动效果-e */
@@ -148,7 +148,7 @@ body,
     height: 100vh;
     width: 100vw;
     background-color: rgba(0, 0, 0, 0.5);
-    z-index: 9999990;
+    z-index: 2147483599;
 }
 /* 全局遮罩-e */
 
@@ -216,7 +216,7 @@ body,
 #nprogress {
     .bar,
     .spinner {
-        z-index: 999999;
+        z-index: 2147483600;
     }
 }
 /* NProgress-e */

web/src/styles/loading.scss

@@ -2,7 +2,7 @@
     width: 100%;
     height: 100%;
     position: fixed;
-    z-index: 9990;
+    z-index: 2147483600;
     background-color: var(--ba-bg-color);
 }
 .block-loading .block-loading-box {

web/src/utils/axios.ts

@@ -8,6 +8,7 @@ import adminBaseRoute from '/@/router/static/adminBase'
 import { memberCenterBaseRoutePath } from '/@/router/static/memberCenterBase'
 import { useAdminInfo } from '/@/stores/adminInfo'
 import { useConfig } from '/@/stores/config'
+import { SYSTEM_ZINDEX } from '/@/stores/constant/common'
 import { useUserInfo } from '/@/stores/userInfo'
 import { isAdminApp } from '/@/utils/common'
 
@@ -173,7 +174,7 @@ function createAxios<Data = any, T = ApiPromise<Data>>(axiosConfig: AxiosRequest
                         ElNotification({
                             type: 'error',
                             message: response.data.msg,
-                            zIndex: 9999,
+                            zIndex: SYSTEM_ZINDEX,
                         })
                     }
                     // 自动跳转到路由name或path
@@ -201,7 +202,7 @@ function createAxios<Data = any, T = ApiPromise<Data>>(axiosConfig: AxiosRequest
                     ElNotification({
                         message: response.data.msg ? response.data.msg : i18n.global.t('axios.Operation successful'),
                         type: 'success',
-                        zIndex: 9999,
+                        zIndex: SYSTEM_ZINDEX,
                     })
                 }
             }
@@ -281,7 +282,7 @@ function httpErrorStatusHandle(error: any) {
     ElNotification({
         type: 'error',
         message,
-        zIndex: 9999,
+        zIndex: SYSTEM_ZINDEX,
     })
 }