From b6fcbc6e735cbfc12d8af7ed8533fc99c9b32829 Mon Sep 17 00:00:00 2001
From: xingyuv <xingyu4j@vip.qq.com>
Date: Fri, 14 Apr 2023 15:44:24 +0800
Subject: [PATCH] fix: dark

---
 index.html | 123 +++++++++++++++++++++++++++++++----------------------
 1 file changed, 72 insertions(+), 51 deletions(-)
diff --git a/index.html b/index.html
index 1ceb150..09e0d2c 100644
--- a/index.html
+++ b/index.html
@@ -1,20 +1,25 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" id="htmlRoot">
   <head>
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
     <meta name="renderer" content="webkit" />
-    <meta
-      name="viewport"
-      content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0"
-    />
-    <!-- 由 vite 注入 VITE_GLOB_APP_TITLE 变量，在 .env 内配置 -->
-    <title><%= VITE_GLOB_APP_TITLE %></title>
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <title>%VITE_GLOB_APP_TITLE%</title>
     <link rel="icon" href="/favicon.ico" />
   </head>
   <body>
+    <script>
+      (() => {
+        var htmlRoot = document.getElementById('htmlRoot');
+        var theme = window.localStorage.getItem('__APP__DARK__MODE__');
+        if (htmlRoot && theme) {
+          htmlRoot.setAttribute('data-theme', theme);
+          theme = htmlRoot = null;
+        }
+      })();
+    </script>
     <div id="app">
-      <!-- 页面加载后会删除 loading 节点，所以无需担心污染 -->
       <style>
         html[data-theme='dark'] .app-loading {
           background-color: #2c344a;
@@ -24,109 +29,125 @@
           color: rgb(255 255 255 / 85%);
         }
 
-        .loading {
+        .app-loading {
           display: flex;
-          position: fixed;
+          width: 100%;
+          height: 100%;
+          justify-content: center;
+          align-items: center;
+          flex-direction: column;
+          background-color: #f4f7f9;
+        }
+
+        .app-loading .app-loading-wrap {
+          position: absolute;
           top: 50%;
           left: 50%;
-          flex-direction: column;
-          align-items: center;
-          justify-content: center;
+          display: flex;
           transform: translate3d(-50%, -50%, 0);
+          justify-content: center;
+          align-items: center;
+          flex-direction: column;
         }
 
-        .logo {
-          display: block;
-          width: 100px;
-          margin: 0 auto;
-          margin-bottom: 10px;
+        .app-loading .dots {
+          display: flex;
+          padding: 98px;
+          justify-content: center;
+          align-items: center;
         }
 
-        .title {
+        .app-loading .app-loading-title {
           display: flex;
-          align-items: center;
-          justify-content: center;
           margin-top: 30px;
-          color: rgb(0 0 0 / 85%);
           font-size: 30px;
+          color: rgb(0 0 0 / 85%);
+          justify-content: center;
+          align-items: center;
         }
 
-        .dots {
-          display: inline-block;
+        .app-loading .app-loading-logo {
+          display: block;
+          width: 90px;
+          margin: 0 auto 20px;
+        }
+
+        .dot {
           position: relative;
-          box-sizing: border-box;
+          display: inline-block;
           width: 48px;
           height: 48px;
           margin-top: 30px;
-          transform: rotate(45deg);
-          animation: rotate 1s infinite linear;
           font-size: 32px;
+          transform: rotate(45deg);
+          box-sizing: border-box;
+          animation: antRotate 1.2s infinite linear;
         }
 
-        .dots i {
-          display: block;
+        .dot i {
           position: absolute;
+          display: block;
           width: 20px;
           height: 20px;
+          background-color: #0065cc;
+          border-radius: 100%;
+          opacity: 30%;
           transform: scale(0.75);
+          animation: antSpinMove 1s infinite linear alternate;
           transform-origin: 50% 50%;
-          animation: spin-move 1s infinite linear alternate;
-          border-radius: 100%;
-          opacity: 0.3;
-          background-color: #0065cc;
         }
 
-        .dots i:nth-child(1) {
+        .dot i:nth-child(1) {
           top: 0;
           left: 0;
         }
 
-        .dots i:nth-child(2) {
+        .dot i:nth-child(2) {
           top: 0;
           right: 0;
           animation-delay: 0.4s;
         }
 
-        .dots i:nth-child(3) {
+        .dot i:nth-child(3) {
           right: 0;
           bottom: 0;
           animation-delay: 0.8s;
         }
 
-        .dots i:nth-child(4) {
+        .dot i:nth-child(4) {
           bottom: 0;
           left: 0;
           animation-delay: 1.2s;
         }
-
-        @keyframes rotate {
+        @keyframes antRotate {
           to {
             transform: rotate(405deg);
           }
         }
-
-        @keyframes rotate {
+        @keyframes antRotate {
           to {
             transform: rotate(405deg);
           }
         }
-
-        @keyframes spin-move {
+        @keyframes antSpinMove {
           to {
-            opacity: 1;
+            opacity: 100%;
           }
         }
-
-        @keyframes spin-move {
+        @keyframes antSpinMove {
           to {
-            opacity: 1;
+            opacity: 100%;
           }
         }
       </style>
-      <div class="loading">
-        <img src="/resource/img//logo.png" class="logo" alt="Logo" />
-        <span class="dots"><i></i><i></i><i></i><i></i></span>
-        <div class="title"><%= VITE_GLOB_APP_TITLE %></div>
+      <div class="app-loading">
+        <div class="app-loading-wrap">
+          <img src="/resource/img/logo.png" class="app-loading-logo" alt="Logo" />
+          <div class="app-loading-dots">
+            <span class="dot dot-spin"><i></i><i></i><i></i><i></i></span>
+          </div>
+          <div class="app-loading-title">%VITE_GLOB_APP_TITLE%</div>
+        </div>
       </div>
     </div>
     <script type="module" src="/src/main.ts"></script>
