From cc9d697f9c572888c08ef38c33d49faa0383f0cc Mon Sep 17 00:00:00 2001
From: Putoo <290555932@qq.com>
Date: Tue, 28 Apr 2026 14:49:43 +0800
Subject: [PATCH] 111

---
 Web/src/components/PageLoading.vue    | 82 +++++++++++++++++++++++++++
 Web/src/composables/usePageLoading.ts | 14 +++++
 Web/src/middleware/page-loading.ts    |  3 +
 3 files changed, 99 insertions(+)
 create mode 100644 Web/src/components/PageLoading.vue
 create mode 100644 Web/src/composables/usePageLoading.ts
 create mode 100644 Web/src/middleware/page-loading.ts

diff --git a/Web/src/components/PageLoading.vue b/Web/src/components/PageLoading.vue
new file mode 100644
index 0000000..4653bd1
--- /dev/null
+++ b/Web/src/components/PageLoading.vue
@@ -0,0 +1,82 @@
+<template>
+  <Transition name="page-loading-fade">
+    <div v-if="appStore.isLoading" class="page-loading" role="status" aria-live="polite" aria-busy="true">
+      <van-loading vertical>
+        <template #icon>
+          <van-icon name="star-o" size="30" />
+        </template>
+        <div>
+          加载中...
+        </div>        
+      </van-loading>
+
+    </div>
+  </Transition>
+</template>
+
+<script setup lang="ts">
+const appStore = useAppStore()
+const defaultImage = '/images/page-loading-cover.png'
+const fallbackImage = '/images/logo.png'
+const loadingImage = ref(defaultImage)
+
+const handleImageError = (): void => {
+  if (loadingImage.value !== fallbackImage) {
+    loadingImage.value = fallbackImage
+  }
+}
+</script>
+
+<style scoped>
+.page-loading {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+  background: #ffffff;
+}
+
+.page-loading__panel {
+  width: min(100%, 280px);
+  text-align: center;
+}
+
+.page-loading__image {
+  display: block;
+  width: 100%;
+  aspect-ratio: 1 / 1;
+  object-fit: cover;
+  border-radius: 18px;
+  box-shadow: 0 16px 48px rgba(12, 40, 74, 0.18);
+  margin-bottom: 18px;
+}
+
+.page-loading__title {
+  color: #103b63;
+  font-size: 24px;
+  font-weight: 700;
+  line-height: 1.3;
+  letter-spacing: 0.08em;
+  margin-bottom: 8px;
+}
+
+.page-loading__text {
+  color: #4f6476;
+  font-size: 16px;
+  line-height: 1.6;
+  letter-spacing: 0.04em;
+}
+
+.page-loading-fade-enter-active,
+.page-loading-fade-leave-active {
+  transition: opacity 0.2s ease;
+}
+
+.page-loading-fade-enter-from,
+.page-loading-fade-leave-to {
+  opacity: 0;
+}
+</style>
diff --git a/Web/src/composables/usePageLoading.ts b/Web/src/composables/usePageLoading.ts
new file mode 100644
index 0000000..3c5fa12
--- /dev/null
+++ b/Web/src/composables/usePageLoading.ts
@@ -0,0 +1,14 @@
+export class PageLoading{
+
+  private static get PageLoading() {
+        return useAppStore()
+    }
+    public static Loading(): void {
+        this.PageLoading.startLoading("加载中...");
+    }
+    public static Close(): void {
+
+        this.PageLoading.endLoading();
+    }
+}
+
diff --git a/Web/src/middleware/page-loading.ts b/Web/src/middleware/page-loading.ts
new file mode 100644
index 0000000..bf0ae82
--- /dev/null
+++ b/Web/src/middleware/page-loading.ts
@@ -0,0 +1,3 @@
+export default defineNuxtRouteMiddleware(() => {
+  PageLoading.Loading()
+})