From 6ca186203472ee4cb5268adff47640a27a0122d0 Mon Sep 17 00:00:00 2001
From: Tim <135014430+nagisa77@users.noreply.github.com>
Date: Tue, 12 Aug 2025 16:29:04 +0800
Subject: [PATCH] feat: allow navigating to notification settings

---
 frontend_nuxt/components/GlobalPopups.vue     | 22 ++++-
 .../components/NotificationSettingPopup.vue   | 81 +++++++++++++++++++
 frontend_nuxt/pages/message.vue               |  7 +-
 3 files changed, 106 insertions(+), 4 deletions(-)
 create mode 100644 frontend_nuxt/components/NotificationSettingPopup.vue

diff --git a/frontend_nuxt/components/GlobalPopups.vue b/frontend_nuxt/components/GlobalPopups.vue
index 64088e203..23de3e76f 100644
--- a/frontend_nuxt/components/GlobalPopups.vue
+++ b/frontend_nuxt/components/GlobalPopups.vue
@@ -6,6 +6,7 @@
       text="建站送奶茶活动火热进行中，快来参与吧！"
       @close="closeMilkTeaPopup"
     />
+    <NotificationSettingPopup :visible="showNotificationPopup" @close="closeNotificationPopup" />
     <MedalPopup :visible="showMedalPopup" :medals="newMedals" @close="closeMedalPopup" />
   </div>
 </template>
@@ -13,16 +14,18 @@
 <script>
 import ActivityPopup from '~/components/ActivityPopup.vue'
 import MedalPopup from '~/components/MedalPopup.vue'
+import NotificationSettingPopup from '~/components/NotificationSettingPopup.vue'
 import { API_BASE_URL } from '~/main'
 import { authState } from '~/utils/auth'
 
 export default {
   name: 'GlobalPopups',
-  components: { ActivityPopup, MedalPopup },
+  components: { ActivityPopup, MedalPopup, NotificationSettingPopup },
   data() {
     return {
       showMilkTeaPopup: false,
       milkTeaIcon: '',
+      showNotificationPopup: false,
       showMedalPopup: false,
       newMedals: [],
     }
@@ -30,7 +33,10 @@ export default {
   async mounted() {
     await this.checkMilkTeaActivity()
     if (!this.showMilkTeaPopup) {
-      await this.checkNewMedals()
+      await this.checkNotificationSetting()
+      if (!this.showNotificationPopup) {
+        await this.checkNewMedals()
+      }
     }
   },
   methods: {
@@ -55,6 +61,18 @@ export default {
       if (!process.client) return
       localStorage.setItem('milkTeaActivityPopupShown', 'true')
       this.showMilkTeaPopup = false
+      this.checkNotificationSetting()
+    },
+    async checkNotificationSetting() {
+      if (!process.client) return
+      if (!authState.loggedIn) return
+      if (localStorage.getItem('notificationSettingPopupShown')) return
+      this.showNotificationPopup = true
+    },
+    closeNotificationPopup() {
+      if (!process.client) return
+      localStorage.setItem('notificationSettingPopupShown', 'true')
+      this.showNotificationPopup = false
       this.checkNewMedals()
     },
     async checkNewMedals() {
diff --git a/frontend_nuxt/components/NotificationSettingPopup.vue b/frontend_nuxt/components/NotificationSettingPopup.vue
new file mode 100644
index 000000000..d606898a5
--- /dev/null
+++ b/frontend_nuxt/components/NotificationSettingPopup.vue
@@ -0,0 +1,81 @@
+<template>
+  <BasePopup :visible="visible" @close="close">
+    <div class="notification-popup">
+      <div class="notification-popup-title">通知设置上线啦</div>
+      <div class="notification-popup-text">现在可以调整通知类型</div>
+      <div class="notification-popup-actions">
+        <div class="notification-popup-close" @click="close">知道了</div>
+        <div class="notification-popup-button" @click="gotoSetting">去看看</div>
+      </div>
+    </div>
+  </BasePopup>
+</template>
+
+<script>
+import BasePopup from '~/components/BasePopup.vue'
+import { useRouter } from 'vue-router'
+
+export default {
+  name: 'NotificationSettingPopup',
+  components: { BasePopup },
+  props: {
+    visible: { type: Boolean, default: false },
+  },
+  emits: ['close'],
+  setup(props, { emit }) {
+    const router = useRouter()
+    const gotoSetting = () => {
+      emit('close')
+      router.push('/message?tab=control')
+    }
+    const close = () => emit('close')
+    return { gotoSetting, close }
+  },
+}
+</script>
+
+<style scoped>
+.notification-popup {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  gap: 10px;
+  min-width: 200px;
+}
+
+.notification-popup-title {
+  font-size: 18px;
+  font-weight: bold;
+}
+
+.notification-popup-actions {
+  margin-top: 10px;
+  display: flex;
+  flex-direction: row;
+  gap: 20px;
+}
+
+.notification-popup-button {
+  background-color: var(--primary-color);
+  color: #fff;
+  padding: 8px 16px;
+  border-radius: 8px;
+  cursor: pointer;
+}
+
+.notification-popup-button:hover {
+  background-color: var(--primary-color-hover);
+}
+
+.notification-popup-close {
+  cursor: pointer;
+  color: var(--primary-color);
+  display: flex;
+  align-items: center;
+}
+
+.notification-popup-close:hover {
+  text-decoration: underline;
+}
+</style>
diff --git a/frontend_nuxt/pages/message.vue b/frontend_nuxt/pages/message.vue
index 366fc9973..3aed2af0d 100644
--- a/frontend_nuxt/pages/message.vue
+++ b/frontend_nuxt/pages/message.vue
@@ -480,7 +480,7 @@
 
 <script>
 import { ref, onMounted, computed } from 'vue'
-import { useRouter } from 'vue-router'
+import { useRouter, useRoute } from 'vue-router'
 import { API_BASE_URL } from '../main'
 import BaseTimeline from '../components/BaseTimeline.vue'
 import BasePlaceholder from '../components/BasePlaceholder.vue'
@@ -503,9 +503,12 @@ export default {
   components: { BaseTimeline, BasePlaceholder, NotificationContainer },
   setup() {
     const router = useRouter()
+    const route = useRoute()
     const notifications = ref([])
     const isLoadingMessage = ref(false)
-    const selectedTab = ref('unread')
+    const selectedTab = ref(
+      ['all', 'unread', 'control'].includes(route.query.tab) ? route.query.tab : 'unread',
+    )
     const notificationPrefs = ref([])
     const filteredNotifications = computed(() =>
       selectedTab.value === 'all'