refactor: add reusable switch component

daily bugfix

backend/src/main/java/com/openisle/model/NotificationType.java

@@ -14,6 +14,8 @@ public enum NotificationType {
     POST_REVIEW_REQUEST,
     /** Your post under review was approved or rejected */
     POST_REVIEWED,
+    /** An administrator deleted your post */
+    POST_DELETED,
     /** A subscribed post received a new comment */
     POST_UPDATED,
     /** Someone subscribed to your post */

backend/src/main/java/com/openisle/service/PostService.java

@@ -579,7 +579,9 @@ public class PostService {
                 .orElseThrow(() -> new com.openisle.exception.NotFoundException("Post not found"));
         User user = userRepository.findByUsername(username)
                 .orElseThrow(() -> new com.openisle.exception.NotFoundException("User not found"));
-        if (!user.getId().equals(post.getAuthor().getId()) && user.getRole() != Role.ADMIN) {
+        User author = post.getAuthor();
+        boolean adminDeleting = !user.getId().equals(author.getId()) && user.getRole() == Role.ADMIN;
+        if (!user.getId().equals(author.getId()) && user.getRole() != Role.ADMIN) {
             throw new IllegalArgumentException("Unauthorized");
         }
         for (Comment c : commentRepository.findByPostAndParentIsNullOrderByCreatedAtAsc(post)) {
@@ -596,7 +598,12 @@ public class PostService {
                 future.cancel(false);
             }
         }
+        String title = post.getTitle();
         postRepository.delete(post);
+        if (adminDeleting) {
+            notificationService.createNotification(author, NotificationType.POST_DELETED,
+                    null, null, null, user, null, title);
+        }
     }
 
     public java.util.List<Post> getPostsByIds(java.util.List<Long> ids) {

backend/src/test/java/com/openisle/service/PostServiceTest.java

@@ -61,6 +61,58 @@ class PostServiceTest {
         verify(postRepo).delete(post);
     }
 
+    @Test
+    void deletePostByAdminNotifiesAuthor() {
+        PostRepository postRepo = mock(PostRepository.class);
+        UserRepository userRepo = mock(UserRepository.class);
+        CategoryRepository catRepo = mock(CategoryRepository.class);
+        TagRepository tagRepo = mock(TagRepository.class);
+        LotteryPostRepository lotteryRepo = mock(LotteryPostRepository.class);
+        NotificationService notifService = mock(NotificationService.class);
+        SubscriptionService subService = mock(SubscriptionService.class);
+        CommentService commentService = mock(CommentService.class);
+        CommentRepository commentRepo = mock(CommentRepository.class);
+        ReactionRepository reactionRepo = mock(ReactionRepository.class);
+        PostSubscriptionRepository subRepo = mock(PostSubscriptionRepository.class);
+        NotificationRepository notificationRepo = mock(NotificationRepository.class);
+        PostReadService postReadService = mock(PostReadService.class);
+        ImageUploader imageUploader = mock(ImageUploader.class);
+        TaskScheduler taskScheduler = mock(TaskScheduler.class);
+        EmailSender emailSender = mock(EmailSender.class);
+        ApplicationContext context = mock(ApplicationContext.class);
+
+        PostService service = new PostService(postRepo, userRepo, catRepo, tagRepo, lotteryRepo,
+                notifService, subService, commentService, commentRepo,
+                reactionRepo, subRepo, notificationRepo, postReadService,
+                imageUploader, taskScheduler, emailSender, context, PublishMode.DIRECT);
+        when(context.getBean(PostService.class)).thenReturn(service);
+
+        Post post = new Post();
+        post.setId(1L);
+        post.setTitle("T");
+        post.setContent("");
+        User author = new User();
+        author.setId(2L);
+        author.setRole(Role.USER);
+        post.setAuthor(author);
+
+        User admin = new User();
+        admin.setId(1L);
+        admin.setRole(Role.ADMIN);
+
+        when(postRepo.findById(1L)).thenReturn(Optional.of(post));
+        when(userRepo.findByUsername("admin")).thenReturn(Optional.of(admin));
+        when(commentRepo.findByPostAndParentIsNullOrderByCreatedAtAsc(post)).thenReturn(List.of());
+        when(reactionRepo.findByPost(post)).thenReturn(List.of());
+        when(subRepo.findByPost(post)).thenReturn(List.of());
+        when(notificationRepo.findByPost(post)).thenReturn(List.of());
+
+        service.deletePost(1L, "admin");
+
+        verify(notifService).createNotification(eq(author), eq(NotificationType.POST_DELETED), isNull(),
+                isNull(), isNull(), eq(admin), isNull(), eq("T"));
+    }
+
     @Test
     void createPostRespectsRateLimit() {
         PostRepository postRepo = mock(PostRepository.class);

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 class="message-control-item-container">
-          <div
+          <div v-for="pref in notificationPrefs" :key="pref.type" class="message-control-item">
-            v-for="pref in notificationPrefs"
+            <div class="message-control-item-label">{{ formatType(pref.type) }}</div>
-            :key="pref.type"
+            <BaseSwitch
-            class="message-control-push-item"
+              :model-value="pref.enabled"
-            :class="{ select: pref.enabled }"
+              @update:modelValue="(val) => togglePref(pref, val)"
-            @click="togglePref(pref)"
+            />
-          >
-            {{ formatType(pref.type) }}
           </div>
         </div>
       </div>
@@ -495,6 +493,24 @@
                     已被管理员拒绝
                   </NotificationContainer>
                 </template>
+                <template v-else-if="item.type === 'POST_DELETED'">
+                  <NotificationContainer :item="item" :markRead="markRead">
+                    管理员
+                    <template v-if="item.fromUser">
+                      <NuxtLink
+                        class="notif-content-text"
+                        @click="markRead(item.id)"
+                        :to="`/users/${item.fromUser.id}`"
+                      >
+                        {{ item.fromUser.username }}
+                      </NuxtLink>
+                    </template>
+                    删除了您的帖子
+                    <span class="notif-content-text">
+                      {{ stripMarkdownLength(item.content, 100) }}
+                    </span>
+                  </NotificationContainer>
+                </template>
                 <template v-else>
                   <NotificationContainer :item="item" :markRead="markRead">
                     {{ formatType(item.type) }}
@@ -524,7 +540,7 @@ import {
   fetchNotifications,
   fetchUnreadCount,
   isLoadingMessage,
-  markRead as markNotificationRead,
+  markNotificationRead,
   notifications,
   markAllRead,
   hasMore,
@@ -532,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
@@ -564,10 +581,10 @@ const fetchPrefs = async () => {
   notificationPrefs.value = await fetchNotificationPreferences()
 }
 
-const togglePref = async (pref) => {
+const togglePref = async (pref, value) => {
-  const ok = await updateNotificationPreference(pref.type, !pref.enabled)
+  const ok = await updateNotificationPreference(pref.type, value)
   if (ok) {
-    pref.enabled = !pref.enabled
+    pref.enabled = value
     await fetchNotifications({
       page: page.value,
       size: pageSize,
@@ -580,7 +597,7 @@ const togglePref = async (pref) => {
 }
 
 const markRead = async (id) => {
-  await markNotificationRead(id)
+  markNotificationRead(id)
   if (selectedTab.value === 'unread') {
     const index = notifications.value.findIndex((n) => n.id === id)
     if (index !== -1) notifications.value.splice(index, 1)
@@ -655,6 +672,8 @@ const formatType = (t) => {
       return '抽奖中奖了'
     case 'LOTTERY_DRAW':
       return '抽奖已开奖'
+    case 'POST_DELETED':
+      return '帖子被删除'
     default:
       return t
   }
@@ -826,26 +845,21 @@ onActivated(async () => {
   padding: 20px;
 }
 
-.message-control-push-item-container {
+.message-control-item-container {
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
-  flex-wrap: wrap;
   gap: 10px;
 }
 
-.message-control-push-item {
+.message-control-item {
-  font-size: 14px;
+  display: flex;
-  margin-bottom: 5px;
+  align-items: center;
-  padding: 8px 16px;
+  justify-content: space-between;
-  border: 1px solid var(--normal-border-color);
+  max-width: 200px;
-  border-radius: 10px;
-  cursor: pointer;
-  transition: all 0.3s ease;
 }
 
-.message-control-push-item.select {
+.message-control-item-label {
-  background-color: var(--primary-color);
+  font-size: 14px;
-  color: white;
 }
 
 @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">
+          <BaseSwitch v-model="frosted" />
-            <input type="checkbox" v-model="frosted" />
-            <span class="slider"></span>
-          </label>
         </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

@@ -26,6 +26,7 @@ const iconMap = {
   LOTTERY_WIN: 'fas fa-trophy',
   LOTTERY_DRAW: 'fas fa-bullhorn',
   MENTION: 'fas fa-at',
+  POST_DELETED: 'fas fa-trash',
 }
 
 export async function fetchUnreadCount() {
@@ -158,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 })
             },
           })
@@ -168,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 })
               }
             },
@@ -180,7 +181,19 @@ 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 })
+              }
+            },
+          })
+        } else if (n.type === 'POST_DELETED') {
+          arr.push({
+            ...n,
+            src: n.fromUser ? n.fromUser.avatar : null,
+            icon: n.fromUser ? undefined : iconMap[n.type],
+            iconClick: () => {
+              if (n.fromUser) {
+                markNotificationRead(n.id)
                 navigateTo(`/users/${n.fromUser.id}`, { replace: true })
               }
             },
@@ -191,7 +204,7 @@ function createFetchNotifications() {
             icon: iconMap[n.type],
             iconClick: () => {
               if (n.post) {
-                markRead(n.id)
+                markNotificationRead(n.id)
                 navigateTo(`/posts/${n.post.id}`)
               }
             },
@@ -201,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 })
             },
           })
@@ -211,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 })
               }
             },
@@ -222,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 })
               }
             },
@@ -237,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 })
               }
             },
@@ -249,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 })
               }
             },
@@ -277,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
@@ -319,7 +332,7 @@ function createFetchNotifications() {
   }
   return {
     fetchNotifications,
-    markRead,
+    markNotificationRead,
     notifications,
     isLoadingMessage,
     markAllRead,
@@ -329,7 +342,7 @@ function createFetchNotifications() {
 
 export const {
   fetchNotifications,
-  markRead,
+  markNotificationRead,
   notifications,
   isLoadingMessage,
   markAllRead,