feat: ui 优化+弹窗

frontend_nuxt/components/GlobalPopups.vue

@@ -8,6 +8,13 @@
     />
     <NotificationSettingPopup :visible="showNotificationPopup" @close="closeNotificationPopup" />
     <MedalPopup :visible="showMedalPopup" :medals="newMedals" @close="closeMedalPopup" />
+
+    <ActivityPopup
+      :visible="showInviteCodePopup"
+      :icon="inviteCodeIcon"
+      text="邀请码活动开始了，速来参与大伙们🔥🔥🔥"
+      @close="closeInviteCodePopup"
+    />
   </div>
 </template>
 
@@ -21,7 +28,10 @@ const config = useRuntimeConfig()
 const API_BASE_URL = config.public.apiBaseUrl
 
 const showMilkTeaPopup = ref(false)
+const showInviteCodePopup = ref(false)
 const milkTeaIcon = ref('')
+const inviteCodeIcon = ref('')
+
 const showNotificationPopup = ref(false)
 const showMedalPopup = ref(false)
 const newMedals = ref([])
@@ -30,6 +40,9 @@ onMounted(async () => {
   await checkMilkTeaActivity()
   if (showMilkTeaPopup.value) return
 
+  await checkInviteCodeActivity()
+  if (showInviteCodePopup.value) return
+
   await checkNotificationSetting()
   if (showNotificationPopup.value) return
 
@@ -53,12 +66,38 @@ const checkMilkTeaActivity = async () => {
     // ignore network errors
   }
 }
+
+const checkInviteCodeActivity = async () => {
+  if (!process.client) return
+  if (localStorage.getItem('inviteCodeActivityPopupShown')) return
+  try {
+    const res = await fetch(`${API_BASE_URL}/api/activities`)
+    if (res.ok) {
+      const list = await res.json()
+      const a = list.find((i) => i.type === 'INVITE_POINTS' && !i.ended)
+      if (a) {
+        inviteCodeIcon.value = a.icon
+        showInviteCodePopup.value = true
+      }
+    }
+  } catch (e) {
+    // ignore network errors
+  }
+}
+
+const closeInviteCodePopup = () => {
+  if (!process.client) return
+  localStorage.setItem('inviteCodeActivityPopupShown', 'true')
+  showInviteCodePopup.value = false
+}
+
 const closeMilkTeaPopup = () => {
   if (!process.client) return
   localStorage.setItem('milkTeaActivityPopupShown', 'true')
   showMilkTeaPopup.value = false
   checkNotificationSetting()
 }
+
 const checkNotificationSetting = async () => {
   if (!process.client) return
   if (!authState.loggedIn) return

frontend_nuxt/components/InviteCodeActivityComponent.vue

@@ -6,11 +6,11 @@
         <span class="invite-code-description-title-text">邀请规则说明</span>
       </div>
       <div class="invite-code-description-content">
-        <p>邀请好友注册并登录，每次可以获得500积分</p>
+        <p>⚠️邀请好友注册并登录，每次可以获得500积分🎉🎉🎉</p>
         <p>邀请链接的有效期为1个月</p>
         <p>每一个邀请链接的邀请人数上限为3人</p>
         <p>通过邀请链接注册，无需注册审核</p>
-        <p>每人每天仅能生产3个邀请链接</p>
+        <p>每人每天仅能生产1个邀请链接</p>
       </div>
     </div>
 

frontend_nuxt/pages/activities.vue

@@ -145,7 +145,7 @@ onMounted(async () => {
 }
 
 .activity-card-normal-right {
-  width: calc(100% - 150px);
+  width: 100%;
 }
 
 @media screen and (max-width: 768px) {