From 0542f26d15ac637c1f845886fc9b4c9950160231 Mon Sep 17 00:00:00 2001
From: YangQi <yangfong2022@qq.com>
Date: Tue, 9 Aug 2022 10:31:23 +0800
Subject: [PATCH] perf: simplified RunLoading structure (#177)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 减少 HTML 结构
- 适配夜间模式
---
 src/components/RunLoading.vue | 70 ++++++++++++++++++-----------------
 1 file changed, 37 insertions(+), 33 deletions(-)

diff --git a/src/components/RunLoading.vue b/src/components/RunLoading.vue
index 2399cc4..2437059 100644
--- a/src/components/RunLoading.vue
+++ b/src/components/RunLoading.vue
@@ -1,15 +1,19 @@
 <template>
   <transition name="fade" v-if="loading">
-    <div class="loading">
-      <div class="loading-wrapper">
-        <div class="loading-anim"></div>
-        <div class="loading-text">致力于让 Markdown 编辑更简单</div>
-      </div>
+    <div
+      class="loading"
+      :class="{
+        loading_night: nightMode,
+      }"
+    >
+      <strong>致力于让 Markdown 编辑更简单</strong>
     </div>
   </transition>
 </template>
 
 <script>
+import { mapState } from 'vuex'
+
 export default {
   name: `RunLoading`,
   data() {
@@ -22,44 +26,44 @@ export default {
       this.loading = false
     }, 100)
   },
+  computed: {
+    ...mapState({
+      nightMode: ({ nightMode }) => nightMode,
+    }),
+  },
 }
 </script>
 
 <style lang="less" scoped>
+@light-color: #303133;
+@light-background-color: #f2f2f2;
+@night-color: #bbbbbb;
+@night-background-color: #303133;
+
 .loading {
   position: fixed;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
   z-index: 99999;
-  background-color: #f2f2f2;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100vw;
+  height: 100vh;
+  font-size: 18px;
+  color: @light-color;
+  background-color: @light-background-color;
+
+  &::before {
+    content: url('../assets/images/favicon.png');
+    width: 100px;
+    height: 100px;
+    margin-bottom: 26px;
+  }
 }
 
 .loading_night {
-  background-color: #303133;
-}
-
-.loading-wrapper {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translateX(-50%) translateY(-50%);
-  text-align: center;
-}
-
-.loading-anim {
-  display: inline-block;
-  width: 100px;
-  height: 100px;
-  background: url('../assets/images/favicon.png') no-repeat;
-  background-size: cover;
-}
-
-.loading-text {
-  font-size: 18px;
-  font-weight: bold;
-  margin-top: 26px;
-  color: #303133;
+  color: @night-color;
+  background-color: @night-background-color;
 }
 
 .fade-enter,