♻️ 部分组件ZIndex抽离

src/components/func/dialog.vue

@@ -1,3 +1,4 @@
+<!-- Dialog 组件 -->
 <template>
   <transition name="func-dialog-outer">
     <div v-show="show || showOuter" class="dialog-overlay" @click.self.prevent="handleOuter">
@@ -6,17 +7,17 @@
           <div class="dialog-title">{{ data.title }}</div>
           <div
             v-show="data?.text !== '' && data.mode === 'check'"
-            class="dialog-subtitle"
             :title="data.text"
+            class="dialog-subtitle"
           >
             {{ data.text }}
           </div>
           <div v-show="data?.text !== '' && data.mode === 'input'" class="dialog-input">
             <div class="dialog-input-label">{{ data.text }}</div>
             <input
+              ref="inputRef"
               v-model="inputDefault"
               class="dialog-input-box"
-              ref="inputRef"
               @keydown.enter="handleConfirm"
             />
           </div>
@@ -159,7 +160,7 @@ function handleOuter(): void {
 
 defineExpose({ displayInputBox, displayCheckBox });
 </script>
-<style scoped>
+<style lang="scss" scoped>
 .func-dialog-outer-enter-active,
 .func-dialog-outer-leave-active,
 .func-dialog-inner-enter-active {
@@ -202,7 +203,7 @@ defineExpose({ displayInputBox, displayCheckBox });
   --dialog-bg: var(--tgc-white-1);
 
   position: fixed;
-  z-index: 100;
+  z-index: var(--tgi-dialog);
   top: 0;
   left: 0;
   display: flex;

src/components/func/geetest.vue

@@ -1,3 +1,4 @@
+<!-- 极验验证组件 -->
 <template>
   <transition name="func-geetest-outer">
     <div v-show="show || showOuter" class="geetest-overlay" @click.self.prevent>
@@ -14,7 +15,7 @@
     </div>
   </transition>
 </template>
-<script setup lang="ts">
+<script lang="ts" setup>
 import "https://static.geetest.com/static/js/gt.0.4.9.js";
 import "https://static.geetest.com/v4/gt4.js";
 import { ref, useTemplateRef, watch } from "vue";
@@ -116,7 +117,7 @@ async function displayBox(
 
 defineExpose({ displayBox });
 </script>
-<style lang="css" scoped>
+<style lang="scss" scoped>
 .func-geetest-outer-enter-active,
 .func-geetest-outer-leave-active,
 .func-geetest-inner-enter-active {
@@ -155,7 +156,7 @@ defineExpose({ displayBox });
 
 .geetest-overlay {
   position: fixed;
-  z-index: 100;
+  z-index: var(--tgi-geetest);
   top: 0;
   left: 0;
   display: flex;

src/components/func/loading.vue

@@ -113,7 +113,7 @@ defineExpose({ displayBox });
 
 .loading-overlay {
   position: fixed;
-  z-index: 100;
+  z-index: var(--tgi-loading);
   top: 0;
   left: 0;
   display: flex;

src/components/func/snackbar.vue

@@ -1,6 +1,7 @@
+<!-- Snackbar 组件 -->
 <template>
   <transition name="func-snackbar">
-    <div class="func-snackbar-container" v-show="show">
+    <div v-show="show" class="func-snackbar-container">
       <div class="func-snackbar">
         <slot name="text">
           <span class="func-snackbar-text">{{ data.text }}</span>
@@ -70,7 +71,7 @@ onUnmounted(() => {
 
 defineExpose({ displayBox });
 </script>
-<style lang="css" scoped>
+<style lang="scss" scoped>
 .func-snackbar-enter-active,
 .func-snackbar-leave-active {
   transition: all 0.3s;
@@ -90,7 +91,7 @@ defineExpose({ displayBox });
 
 .func-snackbar-container {
   position: fixed;
-  z-index: 9999;
+  z-index: var(--tgi-snackbar);
   bottom: 0;
   left: 0;
   display: flex;