feat: use login popup announcement on home

web/src/mobile/components/AnnouncementPopup.vue

@@ -35,6 +35,7 @@
     title: string;
     content: string;
     body_html?: string;
+    source_type?: string;
   }
 
   const props = defineProps<{

web/src/mobile/views/HomeView.vue

@@ -1,8 +1,8 @@
 <template>
   <section class="m-home">
     <AnnouncementPopup
-      :show="Boolean(popupNotice)"
-      :notice="popupNotice"
+      :show="popupVisible"
+      :notice="loginPopupNotice"
       @read="markPopupRead"
     />
     <div class="m-home-hero" :style="bannerStyle">
@@ -54,18 +54,18 @@
         </div>
 
         <button
-          v-if="currentNotice"
+          v-if="displayNotice"
           class="m-notice m-card"
           type="button"
-          aria-label="查看全部通知"
-          @click="router.push('/app/content/notices')"
+          :aria-label="`查看公告：${displayNotice.title || '最新公告'}`"
+          @click="openNotice"
         >
           <n-icon :component="MegaphoneOutline" />
-          <span :class="['m-notice-tag', { 'is-activity': currentNotice.source_type === 'operational_simulation' }]">
-            {{ currentNotice.source_type === 'operational_simulation' ? '活动' : '公告' }}
+          <span :class="['m-notice-tag', { 'is-activity': displayNotice.source_type === 'operational_simulation' }]">
+            {{ displayNotice.source_type === 'operational_simulation' ? '活动' : '公告' }}
           </span>
-          <p :key="currentNotice.id" class="m-notice-copy">
-            {{ currentNotice.title || currentNotice.content || '查看最新通知' }}
+          <p :key="displayNotice.id" class="m-notice-copy">
+            {{ displayNotice.title || displayNotice.content || '查看最新通知' }}
           </p>
           <n-icon class="m-notice-arrow" :component="ChevronForwardOutline" />
         </button>
@@ -165,7 +165,9 @@
   const loading = ref(true);
   const error = ref('');
   const leaderboard = ref<LeaderboardEntry[]>([]);
-  const popupNotice = ref<AnnouncementNotice | null>(null);
+  const loginPopupNotice = ref<AnnouncementNotice | null>(null);
+  const popupVisible = ref(false);
+  const homeAnnouncement = ref<AnnouncementNotice | null>(null);
   const activeBannerIndex = ref(0);
   const activeNoticeIndex = ref(0);
   let bannerTimer: number | undefined;
@@ -176,6 +178,7 @@
     );
   const currentBanner = computed(() => home.value?.banners?.[activeBannerIndex.value]);
   const currentNotice = computed(() => home.value?.notices?.[activeNoticeIndex.value]);
+  const displayNotice = computed(() => homeAnnouncement.value || currentNotice.value);
   const bannerStyle = computed(() => {
     const url = safeImage(currentBanner.value?.image_url);
     return {
@@ -271,9 +274,7 @@
     loading.value = true;
     error.value = '';
     try {
-      const noticeRequest = shouldShowLoginNotice()
-        ? request<AnnouncementNotice | null>({ url: '/v1/notices/popup' }).catch(() => null)
-        : Promise.resolve(null);
+      const noticeRequest = request<AnnouncementNotice | null>({ url: '/v1/notices/popup' }).catch(() => null);
       const [homeData, rankData, noticeData] = await Promise.all([
         request<HomeData>({ url: '/v1/home' }),
         request<LeaderboardEntry[]>({ url: '/v1/leaderboard' }).catch(() => []),
@@ -281,7 +282,9 @@
       ]);
       home.value = homeData;
       leaderboard.value = rankData || [];
-      popupNotice.value = noticeData;
+      homeAnnouncement.value = noticeData;
+      loginPopupNotice.value = shouldShowLoginNotice() ? noticeData : null;
+      popupVisible.value = Boolean(loginPopupNotice.value);
     } catch (err) {
       error.value = errorText(err);
     } finally {
@@ -290,14 +293,24 @@
   }
 
   function markPopupRead() {
-    if (!popupNotice.value) return;
-    const noticeId = popupNotice.value.id;
-    popupNotice.value = null;
+    if (!loginPopupNotice.value) return;
+    const noticeId = loginPopupNotice.value.id;
+    popupVisible.value = false;
+    loginPopupNotice.value = null;
     completeLoginNotice();
     if (noticeId > 0) {
       request<void>({ url: `/v1/notices/${noticeId}/read`, method: 'POST' }).catch(() => undefined);
     }
   }
+
+  function openNotice() {
+    if (homeAnnouncement.value) {
+      loginPopupNotice.value = homeAnnouncement.value;
+      popupVisible.value = true;
+      return;
+    }
+    void router.push('/app/content/notices');
+  }
   watch(() => home.value?.banners?.length, () => {
     activeBannerIndex.value = 0;
     restartBannerTimer();