From fd0a3a620272edbef7cf87c40e818915412001bb Mon Sep 17 00:00:00 2001
From: hzj <1304805162@qq.com>
Date: Fri, 15 May 2026 16:39:50 +0800
Subject: [PATCH] =?UTF-8?q?style(=E5=8A=A0=E8=BD=BD=E5=8A=A8=E7=94=BB):=20?=
 =?UTF-8?q?=E5=B0=86=E5=8A=A0=E8=BD=BD=E5=8A=A8=E7=94=BB=E7=9A=84=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E6=8A=BD=E8=B1=A1=E6=88=90=E4=B8=80=E4=B8=AA=E6=96=B0?=
 =?UTF-8?q?=E7=9A=84=E5=85=AC=E5=85=B1=E7=BB=84=E4=BB=B6=EF=BC=8C=E7=84=B6?=
 =?UTF-8?q?=E5=90=8E=E5=9C=A8=E9=A1=B5=E9=9D=A2=E4=B8=AD=E4=BD=BF=E7=94=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/LoadingContent.vue             | 41 +++++++++++++++++++
 src/components/LoadingSpinner.vue             | 32 ---------------
 src/main.js                                   |  4 +-
 src/views/Activities/DailyRecharge/index.vue  |  6 +--
 src/views/Activities/LesserBairam/index.vue   |  5 +--
 src/views/Activities/LoginReward/index.vue    |  6 +--
 .../Activities/LuckyDollars/Season3/index.vue |  5 +--
 .../Activities/LuckyDollars/Season4/index.vue |  5 +--
 .../Activities/LuckyDollars/Season5/index.vue |  5 +--
 src/views/Activities/PokerAce/index.vue       |  5 +--
 src/views/Activities/SpringFestival/index.vue |  6 +--
 src/views/AgencyCenter/Message.vue            |  3 +-
 src/views/AgencyCenter/TeamBill.vue           |  3 +-
 src/views/AgencyCenter/TeamMember.vue         |  6 +--
 .../AgencyCenter/components/TeamBillMore.vue  |  3 +-
 src/views/CPReward/index.vue                  |  3 +-
 src/views/GoodID/index.vue                    |  3 +-
 src/views/Invitation/InviteToRegister.vue     |  3 +-
 src/views/Invitation/inviteNewUser.vue        |  3 +-
 src/views/Ranking/Couple/index.vue            |  6 +--
 src/views/Ranking/GamesKing/index.vue         |  6 +--
 src/views/Ranking/KingAndQueen/TopList.vue    |  6 +--
 src/views/Ranking/Overall/Ranking.vue         |  5 +--
 src/views/Ranking/WeeklyStar/WeeklyStar.vue   |  6 +--
 src/views/RechargeAgency/SearchUser.vue       |  3 +-
 .../RechargeAgency/SellerRecordsView.vue      |  7 ++--
 src/views/RechargeAgency/index.vue            |  3 +-
 src/views/Wallet/Detail/HistorySalary.vue     |  3 +-
 .../Wallet/Detail/InformationDetails.vue      |  3 +-
 src/views/Wallet/Transfer/SearchPayee.vue     |  6 +--
 30 files changed, 74 insertions(+), 127 deletions(-)
 create mode 100644 src/components/LoadingContent.vue
 delete mode 100644 src/components/LoadingSpinner.vue

diff --git a/src/components/LoadingContent.vue b/src/components/LoadingContent.vue
new file mode 100644
index 0000000..bd384dd
--- /dev/null
+++ b/src/components/LoadingContent.vue
@@ -0,0 +1,41 @@
+<template>
+  <div class="loading-content">
+    <img
+      :src="loadingImg"
+      alt=""
+      class="loading-spinner-image"
+      :style="{ width: size, height: size, margin: spinnerMargin }"
+    />
+    <p v-if="$slots.default" :style="textStyle">
+      <slot />
+    </p>
+  </div>
+</template>
+
+<script setup>
+import loadingImg from '@/assets/icon/Azizi/loading.webp'
+
+defineProps({
+  size: {
+    type: String,
+    default: '80px',
+  },
+  spinnerMargin: {
+    type: String,
+    default: '0 auto',
+  },
+  textStyle: {
+    type: [String, Object, Array],
+    default: '',
+  },
+})
+</script>
+
+<style scoped>
+.loading-spinner-image {
+  position: relative;
+  z-index: 1;
+  display: block;
+  object-fit: contain;
+}
+</style>
diff --git a/src/components/LoadingSpinner.vue b/src/components/LoadingSpinner.vue
deleted file mode 100644
index 7e84926..0000000
--- a/src/components/LoadingSpinner.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<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: '80px',
-  },
-  margin: {
-    type: String,
-    default: '0 auto',
-  },
-})
-</script>
-
-<style scoped>
-.loading-spinner-image {
-  position: relative;
-  z-index: 1;
-  display: block;
-  object-fit: contain;
-}
-</style>
diff --git a/src/main.js b/src/main.js
index 0d1d142..de08db2 100644
--- a/src/main.js
+++ b/src/main.js
@@ -14,7 +14,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 LoadingContent from './components/LoadingContent.vue'
 import router from './router'
 import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
 
@@ -28,7 +28,7 @@ pinia.use(piniaPluginPersistedstate)
 
 const app = createApp(App)
 app.directive('smart-img', smartImage)
-app.component('LoadingSpinner', LoadingSpinner)
+app.component('LoadingContent', LoadingContent)
 
 app.use(router)
 app.use(pinia)
diff --git a/src/views/Activities/DailyRecharge/index.vue b/src/views/Activities/DailyRecharge/index.vue
index c715ba9..1b838f0 100644
--- a/src/views/Activities/DailyRecharge/index.vue
+++ b/src/views/Activities/DailyRecharge/index.vue
@@ -2,11 +2,7 @@
   <div class="fullPage">
     <!-- 预加载状态 -->
     <div v-if="isLoading" class="loading-container">
-      <div class="loading-content">
-        <!-- 加载动画 -->
-        <LoadingSpinner />
-        <p>{{ t('loading') }}...</p>
-      </div>
+      <LoadingContent>{{ t('loading') }}...</LoadingContent>
     </div>
 
     <!-- 主要内容 -->
diff --git a/src/views/Activities/LesserBairam/index.vue b/src/views/Activities/LesserBairam/index.vue
index 8a588d7..d2301f2 100644
--- a/src/views/Activities/LesserBairam/index.vue
+++ b/src/views/Activities/LesserBairam/index.vue
@@ -3,10 +3,7 @@
   <div class="fullPage">
     <!-- 预加载状态 -->
     <div v-if="isLoading" class="loading-container">
-      <div class="loading-content">
-        <LoadingSpinner />
-        <p>{{ $t('loading') }}...</p>
-      </div>
+      <LoadingContent>{{ $t('loading') }}...</LoadingContent>
     </div>
 
     <!-- 主要内容 -->
diff --git a/src/views/Activities/LoginReward/index.vue b/src/views/Activities/LoginReward/index.vue
index 3e88137..1e2a405 100644
--- a/src/views/Activities/LoginReward/index.vue
+++ b/src/views/Activities/LoginReward/index.vue
@@ -2,11 +2,7 @@
   <div class="fullPage">
     <!-- 预加载状态 -->
     <div v-if="isLoading" class="loading-container">
-      <div class="loading-content">
-        <!-- 加载动画 -->
-        <LoadingSpinner />
-        <p>{{ t('loading') }}...</p>
-      </div>
+      <LoadingContent>{{ t('loading') }}...</LoadingContent>
     </div>
 
     <!-- 主要内容 -->
diff --git a/src/views/Activities/LuckyDollars/Season3/index.vue b/src/views/Activities/LuckyDollars/Season3/index.vue
index 5589543..f7f94bb 100644
--- a/src/views/Activities/LuckyDollars/Season3/index.vue
+++ b/src/views/Activities/LuckyDollars/Season3/index.vue
@@ -3,10 +3,7 @@
   <div class="fullPage">
     <!-- 预加载状态 -->
     <div v-if="isLoading" class="loading-container">
-      <div class="loading-content">
-        <LoadingSpinner />
-        <p>{{ $t('loading') }}...</p>
-      </div>
+      <LoadingContent>{{ $t('loading') }}...</LoadingContent>
     </div>
 
     <!-- 主要内容 -->
diff --git a/src/views/Activities/LuckyDollars/Season4/index.vue b/src/views/Activities/LuckyDollars/Season4/index.vue
index 8f4ce2b..8652ec9 100644
--- a/src/views/Activities/LuckyDollars/Season4/index.vue
+++ b/src/views/Activities/LuckyDollars/Season4/index.vue
@@ -2,10 +2,7 @@
   <div class="fullPage">
     <!-- 预加载状态 -->
     <div v-if="isLoading" class="loading-container">
-      <div class="loading-content">
-        <LoadingSpinner />
-        <p>{{ $t('loading') }}...</p>
-      </div>
+      <LoadingContent>{{ $t('loading') }}...</LoadingContent>
     </div>
 
     <!-- 主要内容 -->
diff --git a/src/views/Activities/LuckyDollars/Season5/index.vue b/src/views/Activities/LuckyDollars/Season5/index.vue
index 78eaa45..3ca0c15 100644
--- a/src/views/Activities/LuckyDollars/Season5/index.vue
+++ b/src/views/Activities/LuckyDollars/Season5/index.vue
@@ -2,10 +2,7 @@
   <div class="fullPage">
     <!-- 预加载状态 -->
     <div v-if="isLoading" class="loading-container">
-      <div class="loading-content">
-        <LoadingSpinner />
-        <p>{{ $t('loading') }}...</p>
-      </div>
+      <LoadingContent>{{ $t('loading') }}...</LoadingContent>
     </div>
 
     <!-- 主要内容 -->
diff --git a/src/views/Activities/PokerAce/index.vue b/src/views/Activities/PokerAce/index.vue
index e1ca998..54ef8d7 100644
--- a/src/views/Activities/PokerAce/index.vue
+++ b/src/views/Activities/PokerAce/index.vue
@@ -2,10 +2,7 @@
   <div class="fullPage">
     <!-- 预加载状态 -->
     <div v-if="isLoading" class="loading-container">
-      <div class="loading-content">
-        <LoadingSpinner />
-        <p>{{ t('loading') }}...</p>
-      </div>
+      <LoadingContent>{{ t('loading') }}...</LoadingContent>
     </div>
 
     <!-- 主要内容 -->
diff --git a/src/views/Activities/SpringFestival/index.vue b/src/views/Activities/SpringFestival/index.vue
index 437c692..d68b0b6 100644
--- a/src/views/Activities/SpringFestival/index.vue
+++ b/src/views/Activities/SpringFestival/index.vue
@@ -2,11 +2,7 @@
   <div class="fullPage">
     <!-- 预加载状态 -->
     <div v-if="isLoading" class="loading-container">
-      <div class="loading-content">
-        <!-- 加载动画 -->
-        <LoadingSpinner />
-        <p>{{ $t('loading') }}...</p>
-      </div>
+      <LoadingContent>{{ $t('loading') }}...</LoadingContent>
     </div>
 
     <!-- 主要内容 -->
diff --git a/src/views/AgencyCenter/Message.vue b/src/views/AgencyCenter/Message.vue
index 73d17be..0e81374 100644
--- a/src/views/AgencyCenter/Message.vue
+++ b/src/views/AgencyCenter/Message.vue
@@ -10,8 +10,7 @@
 
     <div style="padding: 16px; position: relative; z-index: 2">
       <div v-if="loading" class="loading-state">
-        <LoadingSpinner margin="0 auto 16px" />
-        <p>{{ t('loading') }}...</p>
+        <LoadingContent spinner-margin="0 auto 16px">{{ t('loading') }}...</LoadingContent>
       </div>
 
       <div v-else style="display: flex; flex-direction: column; gap: 12px">
diff --git a/src/views/AgencyCenter/TeamBill.vue b/src/views/AgencyCenter/TeamBill.vue
index 84c129a..de2c86b 100644
--- a/src/views/AgencyCenter/TeamBill.vue
+++ b/src/views/AgencyCenter/TeamBill.vue
@@ -44,8 +44,7 @@
 
         <!-- 加载状态 -->
         <div v-if="loading" class="loading-container">
-          <LoadingSpinner />
-          <p>{{ t('loading') }}...</p>
+          <LoadingContent>{{ t('loading') }}...</LoadingContent>
         </div>
 
         <!-- 账单列表 -->
diff --git a/src/views/AgencyCenter/TeamMember.vue b/src/views/AgencyCenter/TeamMember.vue
index 3861457..3ec213d 100644
--- a/src/views/AgencyCenter/TeamMember.vue
+++ b/src/views/AgencyCenter/TeamMember.vue
@@ -84,8 +84,7 @@
 
       <!-- 加载状态 -->
       <div v-if="loading" class="loading-container">
-        <LoadingSpinner />
-        <p>{{ t('loading') }}...</p>
+        <LoadingContent>{{ t('loading') }}...</LoadingContent>
       </div>
 
       <!-- 成员列表 -->
@@ -204,8 +203,7 @@
         <div>
           <!-- 加载更多状态 -->
           <div v-if="loadingMore" class="loading-more">
-            <LoadingSpinner size="20px" margin="0 auto 8px" />
-            <p>{{ t('loading') }}...</p>
+            <LoadingContent size="20px" spinner-margin="0 auto 8px">{{ t('loading') }}...</LoadingContent>
           </div>
 
           <!-- 没有更多数据提示 -->
diff --git a/src/views/AgencyCenter/components/TeamBillMore.vue b/src/views/AgencyCenter/components/TeamBillMore.vue
index 7ee4e4a..efe4d65 100644
--- a/src/views/AgencyCenter/components/TeamBillMore.vue
+++ b/src/views/AgencyCenter/components/TeamBillMore.vue
@@ -77,8 +77,7 @@
 
     <!-- 加载成员 -->
     <div v-if="loading" class="loading-container">
-      <LoadingSpinner />
-      <p>{{ t('loading') }}...</p>
+      <LoadingContent>{{ t('loading') }}...</LoadingContent>
     </div>
 
     <!-- 成员列表 -->
diff --git a/src/views/CPReward/index.vue b/src/views/CPReward/index.vue
index f033ac9..8d75238 100644
--- a/src/views/CPReward/index.vue
+++ b/src/views/CPReward/index.vue
@@ -3,8 +3,7 @@
     <GeneralHeader :title="t('cp_reward')" :isHomePage="true" color="black" class="page-header" />
 
     <div v-if="isLoading" class="loading-container">
-      <LoadingSpinner />
-      <p>{{ t('loading') }}...</p>
+      <LoadingContent>{{ t('loading') }}...</LoadingContent>
     </div>
 
     <div v-show="!isLoading" class="reward-content">
diff --git a/src/views/GoodID/index.vue b/src/views/GoodID/index.vue
index 5880703..bcc9a74 100644
--- a/src/views/GoodID/index.vue
+++ b/src/views/GoodID/index.vue
@@ -3,8 +3,7 @@
   <div class="fullPage">
     <!-- 预加载状态 -->
     <div v-if="isLoading" class="loading-container">
-      <LoadingSpinner />
-      <p>{{ $t('loading') }}...</p>
+      <LoadingContent>{{ $t('loading') }}...</LoadingContent>
     </div>
 
     <!-- 主要内容 -->
diff --git a/src/views/Invitation/InviteToRegister.vue b/src/views/Invitation/InviteToRegister.vue
index 9a9cb6e..1b94ad1 100644
--- a/src/views/Invitation/InviteToRegister.vue
+++ b/src/views/Invitation/InviteToRegister.vue
@@ -7,8 +7,7 @@
       <BackgroundLayer :backgroundImages="[imageUrl('bg')]" />
 
       <!-- 加载动画 -->
-      <LoadingSpinner />
-      <p>{{ $t('loading') }}...</p>
+      <LoadingContent>{{ $t('loading') }}...</LoadingContent>
     </div>
 
     <!-- 主要内容 -->
diff --git a/src/views/Invitation/inviteNewUser.vue b/src/views/Invitation/inviteNewUser.vue
index 3dc26b4..4561a5b 100644
--- a/src/views/Invitation/inviteNewUser.vue
+++ b/src/views/Invitation/inviteNewUser.vue
@@ -7,8 +7,7 @@
       <BackgroundLayer :backgroundImages="[imageUrl('bg1New'), imageUrl('bg2'), imageUrl('bg3')]" />
 
       <!-- 加载动画 -->
-      <LoadingSpinner />
-      <p>{{ $t('loading') }}...</p>
+      <LoadingContent>{{ $t('loading') }}...</LoadingContent>
     </div>
 
     <!-- 主要内容 -->
diff --git a/src/views/Ranking/Couple/index.vue b/src/views/Ranking/Couple/index.vue
index 09521fb..af66f74 100644
--- a/src/views/Ranking/Couple/index.vue
+++ b/src/views/Ranking/Couple/index.vue
@@ -2,11 +2,7 @@
   <div class="fullPage">
     <!-- 预加载状态 -->
     <div v-if="isLoading" class="loading-container">
-      <div class="loading-content">
-        <!-- 加载动画 -->
-        <LoadingSpinner />
-        <p>{{ $t('loading') }}...</p>
-      </div>
+      <LoadingContent>{{ $t('loading') }}...</LoadingContent>
     </div>
 
     <!-- 主要内容 -->
diff --git a/src/views/Ranking/GamesKing/index.vue b/src/views/Ranking/GamesKing/index.vue
index 41b153a..adca544 100644
--- a/src/views/Ranking/GamesKing/index.vue
+++ b/src/views/Ranking/GamesKing/index.vue
@@ -3,11 +3,7 @@
   <div class="fullPage">
     <!-- 预加载状态 -->
     <div v-if="isLoading" class="loading-container">
-      <div class="loading-content">
-        <!-- 加载动画 -->
-        <LoadingSpinner />
-        <p>{{ $t('loading') }}...</p>
-      </div>
+      <LoadingContent>{{ $t('loading') }}...</LoadingContent>
     </div>
 
     <!-- 主要内容 -->
diff --git a/src/views/Ranking/KingAndQueen/TopList.vue b/src/views/Ranking/KingAndQueen/TopList.vue
index f0b2c5f..5cd5a61 100644
--- a/src/views/Ranking/KingAndQueen/TopList.vue
+++ b/src/views/Ranking/KingAndQueen/TopList.vue
@@ -3,11 +3,7 @@
   <div class="fullPage">
     <!-- 预加载状态 -->
     <div v-if="isLoading" class="loading-container">
-      <div class="loading-content">
-        <!-- 加载动画 -->
-        <LoadingSpinner />
-        <p style="color: #fff">{{ $t('loading') }}...</p>
-      </div>
+      <LoadingContent :text-style="{ color: '#fff' }">{{ $t('loading') }}...</LoadingContent>
     </div>
 
     <!-- 主要内容 -->
diff --git a/src/views/Ranking/Overall/Ranking.vue b/src/views/Ranking/Overall/Ranking.vue
index 74fde18..27a183e 100644
--- a/src/views/Ranking/Overall/Ranking.vue
+++ b/src/views/Ranking/Overall/Ranking.vue
@@ -5,10 +5,7 @@
     :style="{ backgroundColor: currentRankingConfig.backgroundColor }"
   >
     <div v-if="isLoading" class="loading-container">
-      <div class="loading-content">
-        <LoadingSpinner />
-        <p>{{ t('loading') }}...</p>
-      </div>
+      <LoadingContent>{{ t('loading') }}...</LoadingContent>
     </div>
 
     <div v-else style="position: relative; z-index: 4">
diff --git a/src/views/Ranking/WeeklyStar/WeeklyStar.vue b/src/views/Ranking/WeeklyStar/WeeklyStar.vue
index 5020111..c799863 100644
--- a/src/views/Ranking/WeeklyStar/WeeklyStar.vue
+++ b/src/views/Ranking/WeeklyStar/WeeklyStar.vue
@@ -3,11 +3,7 @@
   <div class="fullPage">
     <!-- 预加载状态 -->
     <div v-if="isLoading" class="loading-container">
-      <div class="loading-content">
-        <!-- 加载动画 -->
-        <LoadingSpinner />
-        <p>{{ $t('loading') }}...</p>
-      </div>
+      <LoadingContent>{{ $t('loading') }}...</LoadingContent>
     </div>
 
     <!-- 主要内容 -->
diff --git a/src/views/RechargeAgency/SearchUser.vue b/src/views/RechargeAgency/SearchUser.vue
index dab7737..3e965cf 100644
--- a/src/views/RechargeAgency/SearchUser.vue
+++ b/src/views/RechargeAgency/SearchUser.vue
@@ -112,8 +112,7 @@
 
       <!-- 加载状态 -->
       <div v-if="isSearching" class="loading-state">
-        <LoadingSpinner margin="0 auto 16px" />
-        <p>{{ t('searching') }}...</p>
+        <LoadingContent spinner-margin="0 auto 16px">{{ t('searching') }}...</LoadingContent>
       </div>
 
       <!-- 空状态 -->
diff --git a/src/views/RechargeAgency/SellerRecordsView.vue b/src/views/RechargeAgency/SellerRecordsView.vue
index f48a148..591ede3 100644
--- a/src/views/RechargeAgency/SellerRecordsView.vue
+++ b/src/views/RechargeAgency/SellerRecordsView.vue
@@ -91,10 +91,9 @@
         "
       >
         <!-- 加载动画 -->
-        <LoadingSpinner margin="0 auto 16px" />
-
-        <!-- 提示文本 -->
-        <p style="margin: 0; font-size: 14px">{{ t('loading') }}...</p>
+        <LoadingContent spinner-margin="0 auto 16px" :text-style="{ fontSize: '14px' }">
+          {{ t('loading') }}...
+        </LoadingContent>
       </div>
 
       <!-- 用户列表(加载完...) -->
diff --git a/src/views/RechargeAgency/index.vue b/src/views/RechargeAgency/index.vue
index 925e0a6..f033d79 100644
--- a/src/views/RechargeAgency/index.vue
+++ b/src/views/RechargeAgency/index.vue
@@ -11,8 +11,7 @@
 
     <!-- 权限校验加载状态 -->
     <div v-if="checkingAccess" class="loading-container">
-      <LoadingSpinner />
-      <p>{{ t('checking_permissions') }}...</p>
+      <LoadingContent>{{ t('checking_permissions') }}...</LoadingContent>
     </div>
 
     <!-- 主要内容 -->
diff --git a/src/views/Wallet/Detail/HistorySalary.vue b/src/views/Wallet/Detail/HistorySalary.vue
index 7184958..70ed8b6 100644
--- a/src/views/Wallet/Detail/HistorySalary.vue
+++ b/src/views/Wallet/Detail/HistorySalary.vue
@@ -44,8 +44,7 @@
 
         <!-- 加载状态 -->
         <div v-if="loading" class="loading-container">
-          <LoadingSpinner />
-          <p>{{ t('loading') }}...</p>
+          <LoadingContent>{{ t('loading') }}...</LoadingContent>
         </div>
 
         <!-- 报告列表 -->
diff --git a/src/views/Wallet/Detail/InformationDetails.vue b/src/views/Wallet/Detail/InformationDetails.vue
index 5253a90..493ad76 100644
--- a/src/views/Wallet/Detail/InformationDetails.vue
+++ b/src/views/Wallet/Detail/InformationDetails.vue
@@ -11,8 +11,7 @@
     <div class="content">
       <!-- 加载状态 -->
       <div v-if="loading" class="loading-state">
-        <LoadingSpinner margin="0 auto 16px" />
-        <p>{{ t('loading') }}...</p>
+        <LoadingContent spinner-margin="0 auto 16px">{{ t('loading') }}...</LoadingContent>
       </div>
 
       <!-- 错误状态 -->
diff --git a/src/views/Wallet/Transfer/SearchPayee.vue b/src/views/Wallet/Transfer/SearchPayee.vue
index e20c6ad..aad50a6 100644
--- a/src/views/Wallet/Transfer/SearchPayee.vue
+++ b/src/views/Wallet/Transfer/SearchPayee.vue
@@ -71,8 +71,7 @@
 
       <!-- 角色检查加载状态 -->
       <div v-if="isLoadingRole" class="loading-state">
-        <LoadingSpinner margin="0 auto 16px" />
-        <p>{{ t('checking_permissions') }}...</p>
+        <LoadingContent spinner-margin="0 auto 16px">{{ t('checking_permissions') }}...</LoadingContent>
       </div>
 
       <!-- 搜索结果 -->
@@ -179,8 +178,7 @@
 
       <!-- 加载状态 -->
       <div v-if="isSearching" class="loading-state">
-        <LoadingSpinner margin="0 auto 16px" />
-        <p>{{ t('searching') }}...</p>
+        <LoadingContent spinner-margin="0 auto 16px">{{ t('searching') }}...</LoadingContent>
       </div>
     </div>