From d30e0898c2174f3bc9e8649feeca3b0516a7ae3f Mon Sep 17 00:00:00 2001
From: qzp <1748141997@qq.com>
Date: Wed, 15 Nov 2023 11:03:50 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4=E8=BF=9C=E7=A8=8B=E4=BB=93?=
 =?UTF-8?q?=E5=BA=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html                        | 275 +++++++++++++-----------------
 src/App.vue                       |  10 +-
 src/layout/components/AppMain.vue |   1 -
 src/views/login.vue               |   2 +-
 vite.config.js                    |   2 +-
 5 files changed, 128 insertions(+), 162 deletions(-)

diff --git a/index.html b/index.html
index 179579b..4557bdb 100644
--- a/index.html
+++ b/index.html
@@ -11,202 +11,169 @@
   <!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
   <style>
     html,
-    body,
-    #app {
+    body {
+      width: 100%;
       height: 100%;
-      margin: 0px;
-      padding: 0px;
+      margin: 0;
     }
 
-    .chromeframe {
-      margin: 0.2em 0;
-      background: #ccc;
-      color: #000;
-      padding: 0.2em 0;
-    }
+    #loading-wrapper {
+      width: 100vw;
+      height: 100vh;
+      background-color: #080915;
 
-    #loader-wrapper {
-      position: fixed;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      z-index: 999999;
     }
 
-    #loader {
-      display: block;
-      position: relative;
+
+
+    .loader {
       left: 50%;
       top: 50%;
-      width: 150px;
-      height: 150px;
-      margin: -75px 0 0 -75px;
+      margin-left: -30px;
+      margin-top: -30px;
+      animation: stars-rotate-reverse 2s ease infinite;
+      position: relative;
+      width: 60px;
+      height: 60px;
       border-radius: 50%;
-      border: 3px solid transparent;
-      border-top-color: #FFF;
-      -webkit-animation: spin 2s linear infinite;
-      -ms-animation: spin 2s linear infinite;
-      -moz-animation: spin 2s linear infinite;
-      -o-animation: spin 2s linear infinite;
-      animation: spin 2s linear infinite;
-      z-index: 1001;
+      display: inline-block;
+      vertical-align: middle;
     }
 
-    #loader:before {
-      content: "";
-      position: absolute;
-      top: 5px;
-      left: 5px;
-      right: 5px;
-      bottom: 5px;
-      border-radius: 50%;
-      border: 3px solid transparent;
-      border-top-color: #FFF;
-      -webkit-animation: spin 3s linear infinite;
-      -moz-animation: spin 3s linear infinite;
-      -o-animation: spin 3s linear infinite;
-      -ms-animation: spin 3s linear infinite;
-      animation: spin 3s linear infinite;
+    .text{
+      text-align: center;
+      position: relative;
+      top: 50%;
+      color: #fff;
     }
 
-    #loader:after {
-      content: "";
+    .loader-star {
       position: absolute;
-      top: 15px;
-      left: 15px;
-      right: 15px;
-      bottom: 15px;
-      border-radius: 50%;
-      border: 3px solid transparent;
-      border-top-color: #FFF;
-      -moz-animation: spin 1.5s linear infinite;
-      -o-animation: spin 1.5s linear infinite;
-      -ms-animation: spin 1.5s linear infinite;
-      -webkit-animation: spin 1.5s linear infinite;
-      animation: spin 1.5s linear infinite;
     }
 
-
-    @-webkit-keyframes spin {
-      0% {
-        -webkit-transform: rotate(0deg);
-        -ms-transform: rotate(0deg);
-        transform: rotate(0deg);
-      }
-
-      100% {
-        -webkit-transform: rotate(360deg);
-        -ms-transform: rotate(360deg);
-        transform: rotate(360deg);
-      }
+    .loader-star polygon {
+      fill: #d500f9 !important;
     }
 
-    @keyframes spin {
-      0% {
-        -webkit-transform: rotate(0deg);
-        -ms-transform: rotate(0deg);
-        transform: rotate(0deg);
-      }
-
-      100% {
-        -webkit-transform: rotate(360deg);
-        -ms-transform: rotate(360deg);
-        transform: rotate(360deg);
-      }
+    .loader .star1 {
+      top: 0px;
+      right: -7px;
     }
 
-
-    #loader-wrapper .loader-section {
-      position: fixed;
-      top: 0;
-      width: 51%;
-      height: 100%;
-      background: #7171C6;
-      z-index: 1000;
-      -webkit-transform: translateX(0);
-      -ms-transform: translateX(0);
-      transform: translateX(0);
+    .loader .star2 {
+      right: 9px;
+      top: -12px;
+      position: absolute;
+      transform: scale(0.8);
+      animation: stars-catch 2s 0.1s ease infinite;
     }
 
-    #loader-wrapper .loader-section.section-left {
-      left: 0;
+    .loader .star3 {
+      right: 27px;
+      top: -11px;
+      position: absolute;
+      transform: scale(0.7);
+      animation: stars-catch 2s 0.15s ease infinite;
     }
 
-    #loader-wrapper .loader-section.section-right {
-      right: 0;
+    .loader .star4 {
+      right: 41px;
+      top: -2px;
+      position: absolute;
+      transform: scale(0.6);
+      animation: stars-catch 2s 0.2s ease infinite;
     }
 
 
-    .loaded #loader-wrapper .loader-section.section-left {
-      -webkit-transform: translateX(-100%);
-      -ms-transform: translateX(-100%);
-      transform: translateX(-100%);
-      -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
-      transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
-    }
-
-    .loaded #loader-wrapper .loader-section.section-right {
-      -webkit-transform: translateX(100%);
-      -ms-transform: translateX(100%);
-      transform: translateX(100%);
-      -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
-      transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
-    }
 
-    .loaded #loader {
-      opacity: 0;
-      -webkit-transition: all 0.3s ease-out;
-      transition: all 0.3s ease-out;
+    .loader .star5 {
+      right: 47px;
+      top: 10px;
+      position: absolute;
+      transform: scale(0.5);
+      -webkit-animation: stars-catch 2s 0.25s ease infinite;
+      animation: stars-catch 2s 0.25s ease infinite;
     }
 
-    .loaded #loader-wrapper {
-      visibility: hidden;
-      -webkit-transform: translateY(-100%);
-      -ms-transform: translateY(-100%);
-      transform: translateY(-100%);
-      -webkit-transition: all 0.3s 1s ease-out;
-      transition: all 0.3s 1s ease-out;
-    }
 
-    .no-js #loader-wrapper {
-      display: none;
+    .loader .star6 {
+      right: 47px;
+      top: 21px;
+      position: absolute;
+      transform: scale(0.4);
+      animation: stars-catch 2s 0.3s ease infinite;
     }
 
-    .no-js h1 {
-      color: #222222;
+    @keyframes stars-catch {
+      75% {
+        top: -2px;
+        right: -11px;
+        opacity: 0;
+      }
     }
 
-    #loader-wrapper .load_title {
-      font-family: 'Open Sans';
-      color: #FFF;
-      font-size: 19px;
-      width: 100%;
-      text-align: center;
-      z-index: 9999999999999;
-      position: absolute;
-      top: 60%;
-      opacity: 1;
-      line-height: 30px;
-    }
+    @keyframes stars-rotate-reverse {
+      0% {
+        transform: rotate(0deg);
+      }
 
-    #loader-wrapper .load_title span {
-      font-weight: normal;
-      font-style: italic;
-      font-size: 13px;
-      color: #FFF;
-      opacity: 0.5;
+      100% {
+        transform: rotate(360deg);
+      }
     }
   </style>
 </head>
 
 <body>
   <div id="app">
-    <div id="loader-wrapper">
-      <div id="loader"></div>
-      <div class="loader-section section-left"></div>
-      <div class="loader-section section-right"></div>
-      <div class="load_title">正在加载系统资源，请耐心等待</div>
+    <div id="loading-wrapper">
+      <div class="loader">
+        <svg class="loader-star star1" version="1.1" xmlns="http://www.w3.org/2000/svg"
+          xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="35px" height="35px"
+          viewBox="0 0 23.172 23.346" xml:space="preserve">
+          <polygon
+            points="11.586,0 8.864,8.9 0,8.9 7.193,14.447 4.471,23.346 11.586,17.84 18.739,23.346 16.77,14.985 23.172,8.9 14.306,8.9">
+          </polygon>
+        </svg>
+        <svg class="loader-star star2" version="1.1" xmlns="http://www.w3.org/2000/svg"
+          xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="35px" height="35px"
+          viewBox="0 0 23.172 23.346" xml:space="preserve">
+          <polygon
+            points="11.586,0 8.864,8.9 0,8.9 7.193,14.447 4.471,23.346 11.586,17.84 18.739,23.346 16.77,14.985 23.172,8.9 14.306,8.9">
+          </polygon>
+        </svg>
+        <svg class="loader-star star3" version="1.1" xmlns="http://www.w3.org/2000/svg"
+          xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="35px" height="35px"
+          viewBox="0 0 23.172 23.346" xml:space="preserve">
+          <polygon
+            points="11.586,0 8.864,8.9 0,8.9 7.193,14.447 4.471,23.346 11.586,17.84 18.739,23.346 16.77,14.985 23.172,8.9 14.306,8.9">
+          </polygon>
+        </svg>
+        <svg class="loader-star star4" version="1.1" xmlns="http://www.w3.org/2000/svg"
+          xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="35px" height="35px"
+          viewBox="0 0 23.172 23.346" xml:space="preserve">
+          <polygon
+            points="11.586,0 8.864,8.9 0,8.9 7.193,14.447 4.471,23.346 11.586,17.84 18.739,23.346 16.77,14.985 23.172,8.9 14.306,8.9">
+          </polygon>
+        </svg>
+        <svg class="loader-star star5" version="1.1" xmlns="http://www.w3.org/2000/svg"
+          xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="35px" height="35px"
+          viewBox="0 0 23.172 23.346" xml:space="preserve">
+          <polygon
+            points="11.586,0 8.864,8.9 0,8.9 7.193,14.447 4.471,23.346 11.586,17.84 18.739,23.346 16.77,14.985 23.172,8.9 14.306,8.9">
+          </polygon>
+        </svg>
+        <svg class="loader-star star6" version="1.1" xmlns="http://www.w3.org/2000/svg"
+          xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="35px" height="35px"
+          viewBox="0 0 23.172 23.346" xml:space="preserve">
+          <polygon
+            points="11.586,0 8.864,8.9 0,8.9 7.193,14.447 4.471,23.346 11.586,17.84 18.739,23.346 16.77,14.985 23.172,8.9 14.306,8.9">
+          </polygon>
+        </svg>
+      </div>
+      <div class="text">
+        玩命加载中……
+      </div>
     </div>
   </div>
   <script type="module" src="/src/main.js"></script>
diff --git a/src/App.vue b/src/App.vue
index fd2b3d5..9532929 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -3,13 +3,13 @@
 </template>
 
 <script setup>
-import useSettingsStore from '@/store/modules/settings'
-import { handleThemeStyle } from '@/utils/theme'
+import useSettingsStore from "@/store/modules/settings";
+import { handleThemeStyle } from "@/utils/theme";
 
 onMounted(() => {
   nextTick(() => {
     // 初始化主题样式
-    handleThemeStyle(useSettingsStore().theme)
-  })
-})
+    handleThemeStyle(useSettingsStore().theme);
+  });
+});
 </script>
diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
index 8d3a136..ab5490c 100644
--- a/src/layout/components/AppMain.vue
+++ b/src/layout/components/AppMain.vue
@@ -14,7 +14,6 @@
 <script setup>
 import iframeToggle from "./IframeToggle/index"
 import useTagsViewStore from '@/store/modules/tagsView'
-
 const tagsViewStore = useTagsViewStore()
 </script>
 
diff --git a/src/views/login.vue b/src/views/login.vue
index cadd789..7858c32 100644
--- a/src/views/login.vue
+++ b/src/views/login.vue
@@ -93,7 +93,7 @@ const codeUrl = ref("");
 const loading = ref(false);
 // 验证码开关
 const captchaEnabled = ref(true);
-// 注册开关
+// 注册开关            
 const register = ref(false);
 const redirect = ref(undefined);
 
diff --git a/vite.config.js b/vite.config.js
index 0567692..57188f5 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -31,7 +31,7 @@ export default defineConfig(({ mode, command }) => {
       proxy: {
         // https://cn.vitejs.dev/config/#server-proxy
         '/dev-api': {
-          target: 'http://localhost:8080',
+          target: 'http://120.78.220.29:8888',
           changeOrigin: true,
           rewrite: (p) => p.replace(/^\/dev-api/, '')
         }