diff --git a/src/components/interactions/RequestLoading.vue b/src/components/interactions/RequestLoading.vue
new file mode 100644
index 0000000..d378ec0
--- /dev/null
+++ b/src/components/interactions/RequestLoading.vue
@@ -0,0 +1,58 @@
+<script lang="ts">
+export default {
+  name: "RequestLoading",
+};
+</script>
+
+<script setup lang="ts">
+import { vuexStore } from "@/store";
+import { computed, defineComponent, reactive, ref, toRefs, watch } from "vue";
+
+let timer = null;
+
+const useLoading = () => {
+  const state = reactive({
+    loadedText: "加载中...",
+    isLoading: computed(() => vuexStore.state.isLoading),
+  });
+  return toRefs(state);
+};
+const { loadedText, isLoading } = useLoading() as any;
+</script>
+
+<template>
+  <div
+    v-if="isLoading"
+    class="requestLoading position-fixed start-0 top-0 w-100 h-100"
+  >
+    <div
+      class="position-absolute start-50 translate-middle loadingBox text-center"
+    >
+      <LoadingIcon width="86" height="86" class="loadingIcon" />
+      <div class="text-white text-center mt-2 fs-4 h-25">{{ loadedText }}</div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.requestLoading {
+  z-index: 99999999;
+  background-color: rgba($color: #000000, $alpha: 0.8);
+  text-align: center;
+  .loadingBox {
+    top: 40%;
+    left: 40%;
+    .loadingIcon {
+      animation: rotateIcon 1s infinite;
+    }
+    @keyframes rotateIcon {
+      from {
+        transform: rotate(0);
+      }
+      to {
+        transform: rotate(360deg);
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file