fix(Loading): add theme prop, The repair background prop does not tak… (#1271)

* fix(Loading): add theme prop, The repair background prop does not take effect

* fix(AppLogo): fix title line height

src/components/Application/src/AppLogo.vue

@@ -87,6 +87,7 @@
       font-size: 16px;
       font-weight: 700;
       transition: all 0.5s;
+      line-height: normal;
     }
   }
 </style>

src/components/Loading/src/Loading.vue

@@ -1,5 +1,10 @@
 <template>
-  <section class="full-loading" :class="{ absolute }" v-show="loading">
+  <section
+    class="full-loading"
+    :class="{ absolute, [theme]: !!theme }"
+    :style="[background ? `background-color: ${background}` : '']"
+    v-show="loading"
+  >
     <Spin v-bind="$attrs" :tip="tip" :size="size" :spinning="loading" />
   </section>
 </template>
@@ -35,6 +40,9 @@
       background: {
         type: String as PropType<string>,
       },
+      theme: {
+        type: String as PropType<'dark' | 'light'>,
+      },
     },
   });
 </script>
@@ -60,8 +68,12 @@
   }
 
   html[data-theme='dark'] {
-    .full-loading {
+    .full-loading:not(.light) {
       background-color: @modal-mask-bg;
     }
   }
+
+  .full-loading.dark {
+    background-color: @modal-mask-bg;
+  }
 </style>

src/views/demo/comp/loading/index.vue

@@ -6,7 +6,13 @@
         全屏 Loading
       </a-button>
       <a-button class="my-4" type="primary" @click="openCompAbsolute"> 容器内 Loading </a-button>
-      <Loading :loading="loading" :absolute="absolute" :tip="tip" />
+      <Loading
+        :loading="loading"
+        :absolute="absolute"
+        :theme="theme"
+        :background="background"
+        :tip="tip"
+      />
 
       <a-alert message="函数方式" />
 
@@ -37,6 +43,8 @@
       const compState = reactive({
         absolute: false,
         loading: false,
+        theme: 'dark',
+        background: 'rgba(111,111,111,.7)',
         tip: '加载中...',
       });
       const [openFullLoading, closeFullLoading] = useLoading({