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/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>
@@ -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 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,
@@ -846,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;
 }