feat: add activity popup for milk tea

open-isle-cli/src/App.vue

@@ -14,23 +14,60 @@
         <router-view />
       </div>
     </div>
+    <ActivityPopup
+      :visible="showMilkTeaPopup"
+      :icon="milkTeaIcon"
+      text="建站送奶茶活动火热进行中，快来参与吧！"
+      @close="closeMilkTeaPopup"
+    />
   </div>
 </template>
 
 <script>
 import HeaderComponent from './components/HeaderComponent.vue'
 import MenuComponent from './components/MenuComponent.vue'
+import ActivityPopup from './components/ActivityPopup.vue'
+import { API_BASE_URL } from './main'
 
 export default {
   name: 'App',
-  components: { HeaderComponent, MenuComponent },
+  components: { HeaderComponent, MenuComponent, ActivityPopup },
   data() {
-    return { menuVisible: window.innerWidth > 768 }
+    return {
+      menuVisible: window.innerWidth > 768,
+      showMilkTeaPopup: false,
+      milkTeaIcon: ''
+    }
   },
   computed: {
     hideMenu() {
       return ['/login', '/signup', '/404', '/signup-reason', '/github-callback', '/twitter-callback', '/discord-callback', '/forgot-password'].includes(this.$route.path)
     }
+  },
+  async mounted() {
+    await this.checkMilkTeaActivity()
+  },
+  methods: {
+    async checkMilkTeaActivity() {
+      if (localStorage.getItem('milkTeaActivityPopupShown')) 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 === 'MILK_TEA' && !i.ended)
+          if (a) {
+            this.milkTeaIcon = a.icon
+            this.showMilkTeaPopup = true
+          }
+        }
+      } catch (e) {
+        // ignore network errors
+      }
+    },
+    closeMilkTeaPopup() {
+      localStorage.setItem('milkTeaActivityPopupShown', 'true')
+      this.showMilkTeaPopup = false
+    }
   }
 }
 </script>

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

@@ -0,0 +1,78 @@
+<template>
+  <BasePopup :visible="visible" @close="close">
+    <div class="activity-popup">
+      <img v-if="icon" :src="icon" class="activity-popup-icon" />
+      <div class="activity-popup-text">{{ text }}</div>
+      <div class="activity-popup-actions">
+        <div class="activity-popup-button" @click="gotoActivity">立即前往</div>
+        <div class="activity-popup-close" @click="close">稍后再说</div>
+      </div>
+    </div>
+  </BasePopup>
+</template>
+
+<script>
+import BasePopup from './BasePopup.vue'
+import { useRouter } from 'vue-router'
+
+export default {
+  name: 'ActivityPopup',
+  components: { BasePopup },
+  props: {
+    visible: { type: Boolean, default: false },
+    icon: String,
+    text: String
+  },
+  emits: ['close'],
+  setup (props, { emit }) {
+    const router = useRouter()
+    const gotoActivity = () => {
+      emit('close')
+      router.push('/activities')
+    }
+    const close = () => emit('close')
+    return { gotoActivity, close }
+  }
+}
+</script>
+
+<style scoped>
+.activity-popup {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  gap: 10px;
+  min-width: 200px;
+}
+.activity-popup-icon {
+  width: 80px;
+  height: 80px;
+  object-fit: contain;
+}
+.activity-popup-actions {
+  margin-top: 10px;
+  display: flex;
+  flex-direction: row;
+  gap: 20px;
+}
+.activity-popup-button {
+  background-color: var(--primary-color);
+  color: #fff;
+  padding: 8px 16px;
+  border-radius: 8px;
+  cursor: pointer;
+}
+.activity-popup-button:hover {
+  background-color: var(--primary-color-hover);
+}
+.activity-popup-close {
+  cursor: pointer;
+  color: var(--primary-color);
+  display: flex;
+  align-items: center;
+}
+.activity-popup-close:hover {
+  text-decoration: underline;
+}
+</style>

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

@@ -0,0 +1,55 @@
+<template>
+  <div v-if="visible" class="popup">
+    <div class="popup-overlay" @click="onOverlayClick"></div>
+    <div class="popup-content">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'BasePopup',
+  props: {
+    visible: { type: Boolean, default: false },
+    closeOnOverlay: { type: Boolean, default: true }
+  },
+  emits: ['close'],
+  methods: {
+    onOverlayClick () {
+      if (this.closeOnOverlay) this.$emit('close')
+    }
+  }
+}
+</script>
+
+<style scoped>
+.popup {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 20;
+}
+.popup-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  backdrop-filter: blur(3px);
+  -webkit-backdrop-filter: blur(3px);
+}
+.popup-content {
+  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);
+}
+</style>

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

@@ -23,16 +23,15 @@
     </div>
     <div v-if="user && user.currentLevel >= 1 && !info.ended" class="redeem-button" @click="openDialog">兑换</div>
     <div v-else class="redeem-button disabled">兑换</div> 
-    <div v-if="dialogVisible" class="redeem-dialog">
+    <BasePopup :visible="dialogVisible" @close="closeDialog">
-      <div class="redeem-dialog-overlay" @click="closeDialog"></div>
+        <div class="redeem-dialog-content">
-      <div class="redeem-dialog-content">
+          <BaseInput textarea="" rows="5" v-model="contact" placeholder="联系方式 (手机号/Email/微信/instagram/telegram等, 务必注明来源)" />
-        <BaseInput textarea="" rows="5" v-model="contact" placeholder="联系方式 (手机号/Email/微信/instagram/telegram等, 务必注明来源)" />
+          <div class="redeem-actions">
-        <div class="redeem-actions">
+            <div class="redeem-submit-button" @click="submitRedeem" :disabled="loading">提交</div>
-          <div class="redeem-submit-button" @click="submitRedeem" :disabled="loading">提交</div>
+            <div class="redeem-cancel-button" @click="closeDialog">取消</div>
-          <div class="redeem-cancel-button" @click="closeDialog">取消</div>
+          </div>
         </div>
-      </div>
+      </BasePopup>
-    </div>
   </div>
 </template>
 
@@ -40,12 +39,13 @@
 import ProgressBar from '../components/ProgressBar.vue'
 import LevelProgress from '../components/LevelProgress.vue'
 import BaseInput from './BaseInput.vue'
+import BasePopup from './BasePopup.vue'
 import { API_BASE_URL, toast } from '../main'
 import { getToken, fetchCurrentUser } from '../utils/auth'
 
 export default {
   name: 'MilkTeaActivityComponent',
-  components: { ProgressBar, LevelProgress, BaseInput },
+  components: { ProgressBar, LevelProgress, BaseInput, BasePopup },
   data () {
     return {
       info: { level1Count: 0, ended: false },
@@ -146,27 +146,6 @@ export default {
   background-color: var(--primary-color-disabled);
 }
 
-.redeem-dialog {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 20;
-}
-
-.redeem-dialog-overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  backdrop-filter: blur(3px);
-  -webkit-backdrop-filter: blur(3px);
-}
 
 .milk-tea-status-container {
   display: flex;