fix: 活动页增加loading/个人等级增加loading

open-isle-cli/src/components/ActivityPopup.vue

@@ -45,9 +45,10 @@ export default {
   gap: 10px;
   min-width: 200px;
 }
+
 .activity-popup-icon {
-  width: 80px;
+  width: 100px;
-  height: 80px;
+  height: 100px;
   object-fit: contain;
 }
 .activity-popup-actions {

open-isle-cli/src/components/BasePopup.vue

@@ -41,8 +41,8 @@ export default {
   left: 0;
   right: 0;
   bottom: 0;
-  backdrop-filter: blur(3px);
+  backdrop-filter: blur(2px);
-  -webkit-backdrop-filter: blur(3px);
+  -webkit-backdrop-filter: blur(2px);
 }
 .popup-content {
   position: relative;
@@ -51,5 +51,8 @@ export default {
   padding: 20px;
   border-radius: 8px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+  max-width: 80%;
+  max-height: 80%;
+  overflow-y: auto;
 }
 </style>

open-isle-cli/src/components/MilkTeaActivityComponent.vue

@@ -17,9 +17,16 @@
       <ProgressBar :value="info.level1Count" :max="50" />
       <div class="status-text">当前 {{ info.level1Count }} / 50</div>
     </div>
-      <div v-if="user" class="user-level">
+      <div v-if="isLoadingUser" class="loading-user">
+        <l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
+        <div class="user-level-text">加载当前等级中...</div>
+      </div>
+      <div v-else-if="user" class="user-level">
         <LevelProgress :exp="user.experience" :current-level="user.currentLevel" :next-exp="user.nextLevelExp" />
       </div>
+      <div v-else class="user-level">
+        <div class="user-level-text"><i class="fas fa-user-circle"></i> 请登录查看自身等级</div>
+      </div>
     </div>
     <div v-if="user && user.currentLevel >= 1 && !info.ended" class="redeem-button" @click="openDialog">兑换</div>
     <div v-else class="redeem-button disabled">兑换</div> 
@@ -42,6 +49,8 @@ import BaseInput from './BaseInput.vue'
 import BasePopup from './BasePopup.vue'
 import { API_BASE_URL, toast } from '../main'
 import { getToken, fetchCurrentUser } from '../utils/auth'
+import { hatch } from 'ldrs'
+hatch.register()
 
 export default {
   name: 'MilkTeaActivityComponent',
@@ -52,12 +61,15 @@ export default {
       user: null,
       dialogVisible: false,
       contact: '',
-      loading: false
+      loading: false,
+      isLoadingUser: true,
     }
   },
   async mounted () {
     await this.loadInfo()
+    this.isLoadingUser = true
     this.user = await fetchCurrentUser()
+    this.isLoadingUser = false
   },
   methods: {
     async loadInfo () {
@@ -167,9 +179,6 @@ export default {
   position: relative;
   z-index: 2;
   background-color: var(--background-color);
-  padding: 20px;
-  border-radius: 8px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
   display: flex;
   flex-direction: column;
   gap: 10px;
@@ -210,6 +219,11 @@ export default {
 .redeem-cancel-button:hover {
   text-decoration: underline;
 }
+.user-level-text {
+  opacity: 0.8;
+  font-size: 12px;
+  color: var(--primary-color);
+}
 
 
 @media screen and (max-width: 768px) {

open-isle-cli/src/views/ActivityListPageView.vue

@@ -1,5 +1,9 @@
 <template>
   <div class="activity-list-page">
+    <div v-if="isLoadingActivities" class="loading-activities">
+      <l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
+    </div>
+
     <div class="activity-list-page-card" v-for="a in activities" :key="a.id">
       <div class="activity-list-page-card-normal">
         <div v-if="a.icon" class="activity-card-normal-left">
@@ -29,23 +33,43 @@
 import { API_BASE_URL } from '../main'
 import TimeManager from '../utils/time'
 import MilkTeaActivityComponent from '../components/MilkTeaActivityComponent.vue'
+import { hatch } from 'ldrs'
+hatch.register()
 
 export default {
   name: 'ActivityListPageView',
   components: { MilkTeaActivityComponent },
   data() {
-    return { activities: [], TimeManager }
+    return { 
+      activities: [], 
+      TimeManager, 
+      isLoadingActivities: false 
+    }
   },
   async mounted() {
-    const res = await fetch(`${API_BASE_URL}/api/activities`)
+    this.isLoadingActivities = true
-    if (res.ok) {
+    try {
-      this.activities = await res.json()
+      const res = await fetch(`${API_BASE_URL}/api/activities`)
+      if (res.ok) {
+        this.activities = await res.json()
+      }
+    } catch (e) {
+      console.error(e)
+    } finally {
+      this.isLoadingActivities = false
     }
-  }
+  },
 }
 </script>
 
 <style scoped>
+.loading-activities {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 300px;
+}
+
 .activity-list-page {
   background-color: var(--background-color);
   padding: 20px;

open-isle-cli/src/views/HomePageView.vue

@@ -439,7 +439,7 @@ export default {
 .topic-container {
   position: sticky;
   top: 0;
-  z-index: 100;
+  z-index: 10;
   background-color: var(--background-color);
   display: flex;
   flex-direction: row;