refactor: add reusable switch component

daily bugfix

frontend_nuxt/components/BaseSwitch.vue

@@ -0,0 +1,65 @@
+<template>
+  <label class="switch">
+    <input
+      type="checkbox"
+      :checked="modelValue"
+      @change="$emit('update:modelValue', $event.target.checked)"
+    />
+    <span class="slider"></span>
+  </label>
+</template>
+
+<script setup>
+defineProps({
+  modelValue: { type: Boolean, default: false },
+})
+
+defineEmits(['update:modelValue'])
+</script>
+
+<style scoped>
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 40px;
+  height: 20px;
+}
+
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  transition: 0.2s;
+  border-radius: 20px;
+}
+
+.slider:before {
+  position: absolute;
+  content: '';
+  height: 16px;
+  width: 16px;
+  left: 2px;
+  bottom: 2px;
+  background-color: white;
+  transition: 0.2s;
+  border-radius: 50%;
+}
+
+input:checked + .slider {
+  background-color: var(--primary-color);
+}
+
+input:checked + .slider:before {
+  transform: translateX(20px);
+}
+</style>

frontend_nuxt/components/GlobalPopups.vue

@@ -95,7 +95,6 @@ const closeMilkTeaPopup = () => {
   if (!process.client) return
   localStorage.setItem('milkTeaActivityPopupShown', 'true')
   showMilkTeaPopup.value = false
-  checkNotificationSetting()
 }
 
 const checkNotificationSetting = async () => {
@@ -108,7 +107,6 @@ const closeNotificationPopup = () => {
   if (!process.client) return
   localStorage.setItem('notificationSettingPopupShown', 'true')
   showNotificationPopup.value = false
-  checkNewMedals()
 }
 const checkNewMedals = async () => {
   if (!process.client) return

frontend_nuxt/pages/message.vue

@@ -33,15 +33,13 @@
     <div v-if="selectedTab === 'control'">
       <div class="message-control-container">
         <div class="message-control-title">通知设置</div>
-        <div class="message-control-push-item-container">
-          <div
-            v-for="pref in notificationPrefs"
-            :key="pref.type"
-            class="message-control-push-item"
-            :class="{ select: pref.enabled }"
-            @click="togglePref(pref)"
-          >
-            {{ formatType(pref.type) }}
+        <div class="message-control-item-container">
+          <div v-for="pref in notificationPrefs" :key="pref.type" class="message-control-item">
+            <div class="message-control-item-label">{{ formatType(pref.type) }}</div>
+            <BaseSwitch
+              :model-value="pref.enabled"
+              @update:modelValue="(val) => togglePref(pref, val)"
+            />
           </div>
         </div>
       </div>
@@ -542,7 +540,7 @@ import {
   fetchNotifications,
   fetchUnreadCount,
   isLoadingMessage,
-  markRead,
+  markNotificationRead,
   notifications,
   markAllRead,
   hasMore,
@@ -550,6 +548,7 @@ import {
   updateNotificationPreference,
 } from '~/utils/notification'
 import TimeManager from '~/utils/time'
+import BaseSwitch from '~/components/BaseSwitch.vue'
 
 const config = useRuntimeConfig()
 const API_BASE_URL = config.public.apiBaseUrl
@@ -582,10 +581,10 @@ const fetchPrefs = async () => {
   notificationPrefs.value = await fetchNotificationPreferences()
 }
 
-const togglePref = async (pref) => {
-  const ok = await updateNotificationPreference(pref.type, !pref.enabled)
+const togglePref = async (pref, value) => {
+  const ok = await updateNotificationPreference(pref.type, value)
   if (ok) {
-    pref.enabled = !pref.enabled
+    pref.enabled = value
     await fetchNotifications({
       page: page.value,
       size: pageSize,
@@ -597,6 +596,14 @@ const togglePref = async (pref) => {
   }
 }
 
+const markRead = async (id) => {
+  markNotificationRead(id)
+  if (selectedTab.value === 'unread') {
+    const index = notifications.value.findIndex((n) => n.id === id)
+    if (index !== -1) notifications.value.splice(index, 1)
+  }
+}
+
 const approve = async (id, nid) => {
   const token = getToken()
   if (!token) return
@@ -838,26 +845,21 @@ onActivated(async () => {
   padding: 20px;
 }
 
-.message-control-push-item-container {
+.message-control-item-container {
   display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
+  flex-direction: column;
   gap: 10px;
 }
 
-.message-control-push-item {
-  font-size: 14px;
-  margin-bottom: 5px;
-  padding: 8px 16px;
-  border: 1px solid var(--normal-border-color);
-  border-radius: 10px;
-  cursor: pointer;
-  transition: all 0.3s ease;
+.message-control-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  max-width: 200px;
 }
 
-.message-control-push-item.select {
-  background-color: var(--primary-color);
-  color: white;
+.message-control-item-label {
+  font-size: 14px;
 }
 
 @media (max-width: 768px) {

frontend_nuxt/pages/settings.vue

@@ -38,10 +38,7 @@
         </div>
         <div class="form-row switch-row">
           <div class="setting-title">毛玻璃效果</div>
-          <label class="switch">
-            <input type="checkbox" v-model="frosted" />
-            <span class="slider"></span>
-          </label>
+          <BaseSwitch v-model="frosted" />
         </div>
       </div>
       <div v-if="role === 'ADMIN'" class="admin-section">
@@ -76,6 +73,7 @@ import { ref, onMounted, watch } from 'vue'
 import AvatarCropper from '~/components/AvatarCropper.vue'
 import BaseInput from '~/components/BaseInput.vue'
 import Dropdown from '~/components/Dropdown.vue'
+import BaseSwitch from '~/components/BaseSwitch.vue'
 import { toast } from '~/main'
 import { fetchCurrentUser, getToken, setToken } from '~/utils/auth'
 import { frostedState, setFrosted } from '~/utils/frosted'
@@ -318,51 +316,6 @@ const save = async () => {
   max-width: 200px;
 }
 
-.switch {
-  position: relative;
-  display: inline-block;
-  width: 40px;
-  height: 20px;
-}
-
-.switch input {
-  opacity: 0;
-  width: 0;
-  height: 0;
-}
-
-.slider {
-  position: absolute;
-  cursor: pointer;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: #ccc;
-  transition: 0.2s;
-  border-radius: 20px;
-}
-
-.slider:before {
-  position: absolute;
-  content: '';
-  height: 16px;
-  width: 16px;
-  left: 2px;
-  bottom: 2px;
-  background-color: white;
-  transition: 0.2s;
-  border-radius: 50%;
-}
-
-input:checked + .slider {
-  background-color: var(--primary-color);
-}
-
-input:checked + .slider:before {
-  transform: translateX(20px);
-}
-
 .profile-section {
   margin-bottom: 30px;
 }

frontend_nuxt/utils/notification.js

@@ -159,7 +159,7 @@ function createFetchNotifications() {
             ...n,
             src: n.comment.author.avatar,
             iconClick: () => {
-              markRead(n.id)
+              markNotificationRead(n.id)
               navigateTo(`/users/${n.comment.author.id}`, { replace: true })
             },
           })
@@ -169,7 +169,7 @@ function createFetchNotifications() {
             emoji: reactionEmojiMap[n.reactionType],
             iconClick: () => {
               if (n.fromUser) {
-                markRead(n.id)
+                markNotificationRead(n.id)
                 navigateTo(`/users/${n.fromUser.id}`, { replace: true })
               }
             },
@@ -181,7 +181,7 @@ function createFetchNotifications() {
             icon: n.fromUser ? undefined : iconMap[n.type],
             iconClick: () => {
               if (n.fromUser) {
-                markRead(n.id)
+                markNotificationRead(n.id)
                 navigateTo(`/users/${n.fromUser.id}`, { replace: true })
               }
             },
@@ -193,7 +193,7 @@ function createFetchNotifications() {
             icon: n.fromUser ? undefined : iconMap[n.type],
             iconClick: () => {
               if (n.fromUser) {
-                markRead(n.id)
+                markNotificationRead(n.id)
                 navigateTo(`/users/${n.fromUser.id}`, { replace: true })
               }
             },
@@ -204,7 +204,7 @@ function createFetchNotifications() {
             icon: iconMap[n.type],
             iconClick: () => {
               if (n.post) {
-                markRead(n.id)
+                markNotificationRead(n.id)
                 navigateTo(`/posts/${n.post.id}`)
               }
             },
@@ -214,7 +214,7 @@ function createFetchNotifications() {
             ...n,
             src: n.comment.author.avatar,
             iconClick: () => {
-              markRead(n.id)
+              markNotificationRead(n.id)
               navigateTo(`/users/${n.comment.author.id}`, { replace: true })
             },
           })
@@ -224,7 +224,7 @@ function createFetchNotifications() {
             icon: iconMap[n.type],
             iconClick: () => {
               if (n.fromUser) {
-                markRead(n.id)
+                markNotificationRead(n.id)
                 navigateTo(`/users/${n.fromUser.id}`, { replace: true })
               }
             },
@@ -235,7 +235,7 @@ function createFetchNotifications() {
             icon: iconMap[n.type],
             iconClick: () => {
               if (n.fromUser) {
-                markRead(n.id)
+                markNotificationRead(n.id)
                 navigateTo(`/users/${n.fromUser.id}`, { replace: true })
               }
             },
@@ -250,7 +250,7 @@ function createFetchNotifications() {
             icon: iconMap[n.type],
             iconClick: () => {
               if (n.post) {
-                markRead(n.id)
+                markNotificationRead(n.id)
                 navigateTo(`/posts/${n.post.id}`, { replace: true })
               }
             },
@@ -262,7 +262,7 @@ function createFetchNotifications() {
             icon: n.fromUser ? undefined : iconMap[n.type],
             iconClick: () => {
               if (n.post) {
-                markRead(n.id)
+                markNotificationRead(n.id)
                 navigateTo(`/posts/${n.post.id}`, { replace: true })
               }
             },
@@ -290,7 +290,7 @@ function createFetchNotifications() {
     }
   }
 
-  const markRead = async (id) => {
+  const markNotificationRead = async (id) => {
     if (!id) return
     const n = notifications.value.find((n) => n.id === id)
     if (!n || n.read) return
@@ -332,7 +332,7 @@ function createFetchNotifications() {
   }
   return {
     fetchNotifications,
-    markRead,
+    markNotificationRead,
     notifications,
     isLoadingMessage,
     markAllRead,
@@ -342,7 +342,7 @@ function createFetchNotifications() {
 
 export const {
   fetchNotifications,
-  markRead,
+  markNotificationRead,
   notifications,
   isLoadingMessage,
   markAllRead,