feat(新组件): 抽离加载动画作为组件，方便统一处理

src/components/LoadingSpinner.vue

@@ -0,0 +1,30 @@
+<template>
+  <img
+    :src="loadingImg"
+    alt=""
+    class="loading-spinner-image"
+    :style="{ width: size, height: size, margin }"
+  />
+</template>
+
+<script setup>
+import loadingImg from '@/assets/icon/Azizi/loading.webp'
+
+defineProps({
+  size: {
+    type: String,
+    default: '32px',
+  },
+  margin: {
+    type: String,
+    default: '0 auto 12px',
+  },
+})
+</script>
+
+<style scoped>
+.loading-spinner-image {
+  display: block;
+  object-fit: contain;
+}
+</style>

src/main.js

@@ -12,6 +12,7 @@ import { useLangStore } from '@/stores/lang'
 import i18n, { initI18n, setLocale } from './locales/i18n'
 
 import App from './App.vue'
+import LoadingSpinner from './components/LoadingSpinner.vue'
 import router from './router'
 import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
 
@@ -32,6 +33,7 @@ const app = createApp(App)
 
 // 注册智能图片指令
 app.directive('smart-img', smartImage)
+app.component('LoadingSpinner', LoadingSpinner)
 
 app.use(router)
 app.use(pinia)