perf: 加载loading优化

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 {

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()
 

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>