From f6f584a346001f405126f2079bb31f518282e303 Mon Sep 17 00:00:00 2001
From: pipipi-pikachu <pipipi_pikachu@163.com>
Date: Thu, 2 Jan 2025 23:10:40 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E5=8A=A0=E8=BD=BDloading=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html                 |  5 ++--
 src/App.vue                |  2 ++
 src/components/Loading.vue | 51 ++++++++++++++++++++++++++++++++++++++
 3 files changed, 56 insertions(+), 2 deletions(-)
 create mode 100644 src/components/Loading.vue

diff --git a/index.html b/index.html
index 03fa8d85..b8fc5b90 100644
--- a/index.html
+++ b/index.html
@@ -25,11 +25,12 @@
         align-items: center;
       }
       .first-screen-loading-spinner {
-        width: 36px;
-        height: 36px;
+        width: 42px;
+        height: 42px;
         border: 3px solid #d14424;
         border-top-color: transparent;
         border-radius: 50%;
+        box-sizing: border-box;
         animation: spinner .8s linear infinite;
       }
       .first-screen-loading-text {
diff --git a/src/App.vue b/src/App.vue
index 49e687b2..2bd02032 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,6 +4,7 @@
     <Editor v-else-if="_isPC" />
     <Mobile v-else />
   </template>
+  <Loading text="数据初始化中，请稍等 ..." v-else />
 </template>
 
 
@@ -21,6 +22,7 @@ import api from '@/services'
 import Editor from './views/Editor/index.vue'
 import Screen from './views/Screen/index.vue'
 import Mobile from './views/Mobile/index.vue'
+import Loading from './components/Loading.vue'
 
 const _isPC = isPC()
 
diff --git a/src/components/Loading.vue b/src/components/Loading.vue
new file mode 100644
index 00000000..0d91d468
--- /dev/null
+++ b/src/components/Loading.vue
@@ -0,0 +1,51 @@
+<template>
+  <div class="loading">
+    <div class="loading-spinner"></div>
+    <div class="loading-text">{{ text }}</div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+withDefaults(defineProps<{
+  text?: string
+}>(), {
+  text: '正在加载中，请稍等 ...',
+})
+</script>
+
+<style lang="scss" scoped>
+.loading {
+  width: 200px;
+  height: 200px;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  margin-top: -100px;
+  margin-left: -100px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  .loading-spinner {
+    width: 42px;
+    height: 42px;
+    border: 3px solid #d14424;
+    border-top-color: transparent;
+    border-radius: 50%;
+    animation: spinner .8s linear infinite;
+  }
+  .loading-text {
+    margin-top: 20px;
+    color: #d14424;
+  }
+}
+@keyframes spinner {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+</style>
\ No newline at end of file