feat: 添加推送通知功能，支持订阅和发送通知

Web/src/views/SettingView.vue

@@ -23,6 +23,19 @@
         <van-cell title="智能分类" is-link @click="handleSmartClassification" />
         <!-- <van-cell title="自然语言分类" is-link @click="handleNaturalLanguageClassification" /> -->
       </van-cell-group>
+
+      <div class="detail-header" style="padding-bottom: 5px;">
+        <p>通知</p>
+      </div>
+      <van-cell-group inset>
+        <van-cell title="开启消息通知">
+          <template #right-icon>
+            <van-switch v-model="notificationEnabled" @change="handleNotificationToggle" size="24" :loading="notificationLoading" />
+          </template>
+        </van-cell>
+        <van-cell title="测试通知" is-link @click="handleTestNotification" v-if="notificationEnabled" />
+      </van-cell-group>
+
       <div class="detail-header" style="padding-bottom: 5px;">
         <p>开发者</p>
       </div>
@@ -41,16 +54,101 @@
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { showLoadingToast, showSuccessToast, showToast, closeToast, showConfirmDialog } from 'vant'
 import { uploadBillFile } from '@/api/billImport'
 import { useAuthStore } from '@/stores/auth'
+import { getVapidPublicKey, subscribe, testNotification } from '@/api/notification'
 
 const router = useRouter()
 const authStore = useAuthStore()
 const fileInputRef = ref(null)
 const currentType = ref('')
+const notificationEnabled = ref(false)
+const notificationLoading = ref(false)
+
+onMounted(async () => {
+  if ('serviceWorker' in navigator) {
+    const registration = await navigator.serviceWorker.ready
+    const subscription = await registration.pushManager.getSubscription()
+    notificationEnabled.value = !!subscription
+  }
+})
+
+function urlBase64ToUint8Array(base64String) {
+  const padding = '='.repeat((4 - base64String.length % 4) % 4);
+  const base64 = (base64String + padding).replace(/-/g, '+').replace(/_/g, '/');
+  const rawData = window.atob(base64);
+  const outputArray = new Uint8Array(rawData.length);
+  for (let i = 0; i < rawData.length; ++i) {
+    outputArray[i] = rawData.charCodeAt(i);
+  }
+  return outputArray;
+}
+
+const handleNotificationToggle = async (checked) => {
+  if (!('serviceWorker' in navigator)) {
+    showToast('您的浏览器不支持推送通知')
+    notificationEnabled.value = false
+    return
+  }
+
+  notificationLoading.value = true
+  try {
+    const registration = await navigator.serviceWorker.ready
+
+    if (checked) {
+      // 开启通知
+      const permission = await Notification.requestPermission()
+      if (permission !== 'granted') {
+        showToast('请允许通知权限')
+        notificationEnabled.value = false
+        return
+      }
+
+      const { data: { publicKey } } = await getVapidPublicKey()
+      const convertedVapidKey = urlBase64ToUint8Array(publicKey)
+
+      const subscription = await registration.pushManager.subscribe({
+        userVisibleOnly: true,
+        applicationServerKey: convertedVapidKey
+      })
+
+      const subJson = subscription.toJSON()
+      await subscribe({
+        endpoint: subJson.endpoint,
+        p256DH: subJson.keys.p256dh,
+        auth: subJson.keys.auth
+      })
+      
+      showSuccessToast('开启成功')
+    } else {
+      // 关闭通知
+      const subscription = await registration.pushManager.getSubscription()
+      if (subscription) {
+        await subscription.unsubscribe()
+      }
+      showSuccessToast('已关闭')
+    }
+  } catch (error) {
+    console.error(error)
+    showToast('操作失败: ' + (error.message || '未知错误'))
+    notificationEnabled.value = !checked // 回滚状态
+  } finally {
+    notificationLoading.value = false
+  }
+}
+
+const handleTestNotification = async () => {
+  try {
+    await testNotification('这是一条测试消息')
+    showSuccessToast('发送成功，请查看通知栏')
+  } catch (error) {
+    console.error(error)
+    showToast('发送失败')
+  }
+}
 
 /**
  * 处理导入按钮点击