refactor: unify z-index with hope ui css var

Signed-off-by: MadDogOwner <xiaoran@xrgzs.top>

Author: xrgzs

src/components/Base.tsx

@@ -106,7 +106,7 @@ export const BoxWithFullScreen = (props: Parameters<typeof Box>[0]) => {
       h={isOpen() ? "100vh" : props.h}
       top={0}
       left={0}
-      zIndex={1}
+      zIndex="$overlay"
       transition="all 0.2s ease-in-out"
       css={{
         backdropFilter: isOpen() ? "blur(5px)" : undefined,
@@ -122,7 +122,7 @@ export const BoxWithFullScreen = (props: Parameters<typeof Box>[0]) => {
         _hover={{ opacity: "1" }}
         transition="opacity 0.3s ease"
         pointerEvents="auto"
-        zIndex="$sticky"
+        zIndex="$docked"
       >
         <Show when={!isNativeFullscreen()}>
           {/* Full view toggle */}

src/components/EncodingSelect.tsx

@@ -80,7 +80,7 @@ export function EncodingSelect(props: {
       _hover={{
         opacity: 1,
       }}
-      zIndex={1}
+      zIndex="$docked"
     >
       <SelectWrapper
         options={encodingLabels.map((label) => ({

src/components/SwitchLanguage.tsx

@@ -59,7 +59,7 @@ export const SwitchLanguage = <C extends ElementType = "button">(
             pos="fixed"
             top={0}
             bg={useColorModeValue("$blackAlpha4", "$whiteAlpha4")()}
-            zIndex="9000"
+            zIndex="$notification"
           >
             <Spinner
               thickness="4px"

src/pages/home/previews/image.tsx

@@ -305,7 +305,7 @@ const Preview = (props: PreviewProps) => {
           position={isFullscreen() ? "absolute" : "relative"}
           top={isFullscreen() ? "0" : undefined}
           left={isFullscreen() ? "0" : undefined}
-          zIndex="10"
+          zIndex="$docked"
           css={{
             "backdrop-filter": "blur(8px)",
           }}
@@ -451,7 +451,7 @@ const Preview = (props: PreviewProps) => {
               p="$2"
               bg={alphaBgColor()}
               borderRadius="$md"
-              zIndex="10"
+              zIndex="$docked"
               fontSize="$sm"
               css={{
                 "backdrop-filter": "blur(2px)",

src/pages/home/toolbar/Right.tsx

@@ -30,6 +30,7 @@ export const Right = () => {
       pos="fixed"
       right={margin()}
       bottom={margin()}
+      zIndex="$modal"
     >
       <Show
         when={isOpen()}

src/pages/login/LoginBg.tsx

@@ -11,7 +11,7 @@ const LoginBg = () => {
       top="0"
       left="0"
       overflow="hidden"
-      zIndex="-1"
+      zIndex="$hide"
       w="100vw"
       h="100vh"
     >

src/pages/login/index.tsx

@@ -225,7 +225,7 @@ const Login = () => {
   }
 
   return (
-    <Center zIndex="1" w="$full" h="100vh">
+    <Center zIndex="$docked" w="$full" h="100vh">
       <VStack
         bgColor={bgColor()}
         rounded="$xl"