From 38be2a94277a51e2a3f806d82774869fc68eb0cb Mon Sep 17 00:00:00 2001
From: jlzhou <12020042@qq.com>
Date: Wed, 16 Apr 2025 11:47:17 +0800
Subject: [PATCH] =?UTF-8?q?update=20=E5=A4=A7=E5=B1=8F=E8=BF=9B=E5=85=A5?=
 =?UTF-8?q?=E5=8A=A0=E8=BD=BD=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 bi-ui/index.html | 155 +++++++++++++++++++++++++++++++++++++++++++----
 1 file changed, 143 insertions(+), 12 deletions(-)
diff --git a/bi-ui/index.html b/bi-ui/index.html
index eb0d613..0298732 100644
--- a/bi-ui/index.html
+++ b/bi-ui/index.html
@@ -1,13 +1,144 @@
 <!DOCTYPE html>
-<html lang="en" class="dark">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" href="/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title></title>
-  </head>
-  <body style="margin:0;padding:0;user-select: none; overflow: hidden; border:none;">
-    <div id="app"></div>
-    <script type="module" src="/src/main.js"></script>
-  </body>
-</html>
+<html class="dark">
+
+<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, maximum-scale=1, user-scalable=no">
+  <link rel="icon" href="/favicon.ico">
+  <title></title>
+  <!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
+  <style>
+    html,
+    body,
+    #app {
+      min-height: 100vh;
+      background-color: #FFF;
+      margin: 0;
+      padding: 0;
+      user-select: none;
+      overflow: hidden;
+      border: none;
+    }
+
+    .loader {
+      width: 20em;
+      height: 20em;
+      font-size: 1.5vmin;
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .loader .face {
+      position: absolute;
+      border-radius: 50%;
+      border-style: solid;
+      animation: animate 3s linear infinite;
+    }
+
+    .loader .face:nth-child(1) {
+      width: 100%;
+      height: 100%;
+      color: #0d9be0;
+      border-color: currentColor transparent transparent currentColor;
+      border-width: 0.2em 0.2em 0em .2em;
+      --deg: -45deg;
+      animation-direction: normal;
+    }
+
+    .loader .face:nth-child(2) {
+      width: 90%;
+      height: 90%;
+      color: #7bc528;
+      border-color: currentColor currentColor transparent transparent;
+      border-width: 0.2em 0em 0em 0.2em;
+      --deg: -135deg;
+      animation-direction: reverse;
+    }
+
+    .loader .face .circle {
+      position: absolute;
+      width: 50%;
+      height: 0.1em;
+      top: 50%;
+      left: 50%;
+      background-color: #0000;
+      transform: rotate(var(--deg));
+      transform-origin: left;
+    }
+
+    .loader .face .circle::before {
+      position: absolute;
+      top: -.5em;
+      right: -0.45em;
+      content: '';
+      width: .6em;
+      height: .6em;
+      background-color: currentColor;
+      border-radius: 50%;
+      box-shadow: 0 0 .5em .15em currentColor;
+    }
+
+    @keyframes animate {
+      to {
+        transform: rotate(1turn);
+      }
+    }
+
+    .loader-root {
+      position: absolute;
+      inset: 0;
+      user-select: none;
+
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-direction: column;
+      background-color: #00000001;
+      background-image: radial-gradient(#FFF, #ccc);
+    }
+
+    .loader-title {
+      margin: 4vmin 0 10vmin;
+      font-size: 3vmin;
+      color: #666;
+      text-shadow: .2vmin .2vmin 0 #fff;
+      letter-spacing: .3vmin;
+    }
+
+    .loader .logo img {
+      width: 13vmin;
+      height: 13vmin;
+    }
+
+    .loader .logo {
+      background-image: linear-gradient(to bottom, #FFF, #aaa);
+      padding: 3vmin;
+      border-radius: 50%;
+      box-shadow: 0 0 .5vmin #fff inset, 0 0 2vmin #0006;
+    }
+  </style>
+</head>
+
+<body style="margin:0;padding:0;user-select: none; overflow: hidden; border:none;">
+  <div id="app">
+    <div class="loader-root">
+      <div class="loader">
+        <div class="face">
+          <div class="circle"></div>
+        </div>
+        <div class="face">
+          <div class="circle"></div>
+        </div>
+        <div class="logo"><img src="/logo.png" loading="lazy"></div>
+      </div>
+      <div class="loader-title">正在加载系统资源，请耐心等待...</div>
+    </div>
+  </div>
+  <script type="module" src="/src/main.js"></script>
+</body>
+
+</html>
\ No newline at end of file
