✨ Add update notifications

frontend/bindings/github.com/wailsapp/wails/v3/pkg/services/badge/badgeservice.ts

@@ -0,0 +1,64 @@
+// Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
+// This file is automatically generated. DO NOT EDIT
+
+/**
+ * Service represents the notifications service
+ * @module
+ */
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore: Unused imports
+import {Call as $Call, Create as $Create} from "@wailsio/runtime";
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore: Unused imports
+import * as application$0 from "../../application/models.js";
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore: Unused imports
+import * as $models from "./models.js";
+
+/**
+ * RemoveBadge removes the badge label from the application icon.
+ */
+export function RemoveBadge(): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(2374916939) as any;
+    return $resultPromise;
+}
+
+/**
+ * ServiceName returns the name of the service.
+ */
+export function ServiceName(): Promise<string> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(2428202016) as any;
+    return $resultPromise;
+}
+
+/**
+ * ServiceShutdown is called when the service is unloaded.
+ */
+export function ServiceShutdown(): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(3893755233) as any;
+    return $resultPromise;
+}
+
+/**
+ * ServiceStartup is called when the service is loaded.
+ */
+export function ServiceStartup(options: application$0.ServiceOptions): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(4078800764, options) as any;
+    return $resultPromise;
+}
+
+/**
+ * SetBadge sets the badge label on the application icon.
+ */
+export function SetBadge(label: string): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(784276339, label) as any;
+    return $resultPromise;
+}
+
+export function SetCustomBadge(label: string, options: $models.Options): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(3058653106, label, options) as any;
+    return $resultPromise;
+}

frontend/bindings/github.com/wailsapp/wails/v3/pkg/services/badge/index.ts

@@ -0,0 +1,9 @@
+// Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
+// This file is automatically generated. DO NOT EDIT
+
+import * as BadgeService from "./badgeservice.js";
+export {
+    BadgeService
+};
+
+export * from "./models.js";

frontend/bindings/github.com/wailsapp/wails/v3/pkg/services/badge/models.ts

@@ -0,0 +1,58 @@
+// Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
+// This file is automatically generated. DO NOT EDIT
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore: Unused imports
+import {Create as $Create} from "@wailsio/runtime";
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore: Unused imports
+import * as color$0 from "../../../../../../../image/color/models.js";
+
+export class Options {
+    "TextColour": color$0.RGBA;
+    "BackgroundColour": color$0.RGBA;
+    "FontName": string;
+    "FontSize": number;
+    "SmallFontSize": number;
+
+    /** Creates a new Options instance. */
+    constructor($$source: Partial<Options> = {}) {
+        if (!("TextColour" in $$source)) {
+            this["TextColour"] = (new color$0.RGBA());
+        }
+        if (!("BackgroundColour" in $$source)) {
+            this["BackgroundColour"] = (new color$0.RGBA());
+        }
+        if (!("FontName" in $$source)) {
+            this["FontName"] = "";
+        }
+        if (!("FontSize" in $$source)) {
+            this["FontSize"] = 0;
+        }
+        if (!("SmallFontSize" in $$source)) {
+            this["SmallFontSize"] = 0;
+        }
+
+        Object.assign(this, $$source);
+    }
+
+    /**
+     * Creates a new Options instance from a string or object.
+     */
+    static createFrom($$source: any = {}): Options {
+        const $$createField0_0 = $$createType0;
+        const $$createField1_0 = $$createType0;
+        let $$parsedSource = typeof $$source === 'string' ? JSON.parse($$source) : $$source;
+        if ("TextColour" in $$parsedSource) {
+            $$parsedSource["TextColour"] = $$createField0_0($$parsedSource["TextColour"]);
+        }
+        if ("BackgroundColour" in $$parsedSource) {
+            $$parsedSource["BackgroundColour"] = $$createField1_0($$parsedSource["BackgroundColour"]);
+        }
+        return new Options($$parsedSource as Partial<Options>);
+    }
+}
+
+// Private type creation functions
+const $$createType0 = color$0.RGBA.createFrom;

frontend/bindings/github.com/wailsapp/wails/v3/pkg/services/notifications/index.ts

@@ -0,0 +1,9 @@
+// Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
+// This file is automatically generated. DO NOT EDIT
+
+import * as NotificationService from "./notificationservice.js";
+export {
+    NotificationService
+};
+
+export * from "./models.js";

frontend/bindings/github.com/wailsapp/wails/v3/pkg/services/notifications/models.ts

@@ -0,0 +1,107 @@
+// Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
+// This file is automatically generated. DO NOT EDIT
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore: Unused imports
+import {Create as $Create} from "@wailsio/runtime";
+
+/**
+ * NotificationAction represents an action button for a notification.
+ */
+export class NotificationAction {
+    "id"?: string;
+    "title"?: string;
+
+    /**
+     * (macOS-specific)
+     */
+    "destructive"?: boolean;
+
+    /** Creates a new NotificationAction instance. */
+    constructor($$source: Partial<NotificationAction> = {}) {
+
+        Object.assign(this, $$source);
+    }
+
+    /**
+     * Creates a new NotificationAction instance from a string or object.
+     */
+    static createFrom($$source: any = {}): NotificationAction {
+        let $$parsedSource = typeof $$source === 'string' ? JSON.parse($$source) : $$source;
+        return new NotificationAction($$parsedSource as Partial<NotificationAction>);
+    }
+}
+
+/**
+ * NotificationCategory groups actions for notifications.
+ */
+export class NotificationCategory {
+    "id"?: string;
+    "actions"?: NotificationAction[];
+    "hasReplyField"?: boolean;
+    "replyPlaceholder"?: string;
+    "replyButtonTitle"?: string;
+
+    /** Creates a new NotificationCategory instance. */
+    constructor($$source: Partial<NotificationCategory> = {}) {
+
+        Object.assign(this, $$source);
+    }
+
+    /**
+     * Creates a new NotificationCategory instance from a string or object.
+     */
+    static createFrom($$source: any = {}): NotificationCategory {
+        const $$createField1_0 = $$createType1;
+        let $$parsedSource = typeof $$source === 'string' ? JSON.parse($$source) : $$source;
+        if ("actions" in $$parsedSource) {
+            $$parsedSource["actions"] = $$createField1_0($$parsedSource["actions"]);
+        }
+        return new NotificationCategory($$parsedSource as Partial<NotificationCategory>);
+    }
+}
+
+/**
+ * NotificationOptions contains configuration for a notification
+ */
+export class NotificationOptions {
+    "id": string;
+    "title": string;
+
+    /**
+     * (macOS and Linux only)
+     */
+    "subtitle"?: string;
+    "body"?: string;
+    "categoryId"?: string;
+    "data"?: { [_: string]: any };
+
+    /** Creates a new NotificationOptions instance. */
+    constructor($$source: Partial<NotificationOptions> = {}) {
+        if (!("id" in $$source)) {
+            this["id"] = "";
+        }
+        if (!("title" in $$source)) {
+            this["title"] = "";
+        }
+
+        Object.assign(this, $$source);
+    }
+
+    /**
+     * Creates a new NotificationOptions instance from a string or object.
+     */
+    static createFrom($$source: any = {}): NotificationOptions {
+        const $$createField5_0 = $$createType2;
+        let $$parsedSource = typeof $$source === 'string' ? JSON.parse($$source) : $$source;
+        if ("data" in $$parsedSource) {
+            $$parsedSource["data"] = $$createField5_0($$parsedSource["data"]);
+        }
+        return new NotificationOptions($$parsedSource as Partial<NotificationOptions>);
+    }
+}
+
+// Private type creation functions
+const $$createType0 = NotificationAction.createFrom;
+const $$createType1 = $Create.Array($$createType0);
+const $$createType2 = $Create.Map($Create.Any, $Create.Any);

frontend/bindings/github.com/wailsapp/wails/v3/pkg/services/notifications/notificationservice.ts

@@ -0,0 +1,110 @@
+// Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
+// This file is automatically generated. DO NOT EDIT
+
+/**
+ * Service represents the notifications service
+ * @module
+ */
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore: Unused imports
+import {Call as $Call, Create as $Create} from "@wailsio/runtime";
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore: Unused imports
+import * as application$0 from "../../application/models.js";
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore: Unused imports
+import * as $models from "./models.js";
+
+export function CheckNotificationAuthorization(): Promise<boolean> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(2216952893) as any;
+    return $resultPromise;
+}
+
+/**
+ * OnNotificationResponse registers a callback function that will be called when
+ * a notification response is received from the user.
+ */
+export function OnNotificationResponse(callback: any): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(1642697808, callback) as any;
+    return $resultPromise;
+}
+
+export function RegisterNotificationCategory(category: $models.NotificationCategory): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(2917562919, category) as any;
+    return $resultPromise;
+}
+
+export function RemoveAllDeliveredNotifications(): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(3956282340) as any;
+    return $resultPromise;
+}
+
+export function RemoveAllPendingNotifications(): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(108821341) as any;
+    return $resultPromise;
+}
+
+export function RemoveDeliveredNotification(identifier: string): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(975691940, identifier) as any;
+    return $resultPromise;
+}
+
+export function RemoveNotification(identifier: string): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(3966653866, identifier) as any;
+    return $resultPromise;
+}
+
+export function RemoveNotificationCategory(categoryID: string): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(2032615554, categoryID) as any;
+    return $resultPromise;
+}
+
+export function RemovePendingNotification(identifier: string): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(3729049703, identifier) as any;
+    return $resultPromise;
+}
+
+/**
+ * Public methods that delegate to the implementation.
+ */
+export function RequestNotificationAuthorization(): Promise<boolean> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(3933442950) as any;
+    return $resultPromise;
+}
+
+export function SendNotification(options: $models.NotificationOptions): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(3968228732, options) as any;
+    return $resultPromise;
+}
+
+export function SendNotificationWithActions(options: $models.NotificationOptions): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(1886542847, options) as any;
+    return $resultPromise;
+}
+
+/**
+ * ServiceName returns the name of the service.
+ */
+export function ServiceName(): Promise<string> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(2704532675) as any;
+    return $resultPromise;
+}
+
+/**
+ * ServiceShutdown is called when the service is unloaded.
+ */
+export function ServiceShutdown(): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(2550195434) as any;
+    return $resultPromise;
+}
+
+/**
+ * ServiceStartup is called when the service is loaded.
+ */
+export function ServiceStartup(options: application$0.ServiceOptions): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(4047820929, options) as any;
+    return $resultPromise;
+}

frontend/bindings/image/color/index.ts

@@ -0,0 +1,4 @@
+// Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
+// This file is automatically generated. DO NOT EDIT
+
+export * from "./models.js";

frontend/bindings/image/color/models.ts

@@ -0,0 +1,46 @@
+// Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
+// This file is automatically generated. DO NOT EDIT
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore: Unused imports
+import {Create as $Create} from "@wailsio/runtime";
+
+/**
+ * RGBA represents a traditional 32-bit alpha-premultiplied color, having 8
+ * bits for each of red, green, blue and alpha.
+ * 
+ * An alpha-premultiplied color component C has been scaled by alpha (A), so
+ * has valid values 0 <= C <= A.
+ */
+export class RGBA {
+    "R": number;
+    "G": number;
+    "B": number;
+    "A": number;
+
+    /** Creates a new RGBA instance. */
+    constructor($$source: Partial<RGBA> = {}) {
+        if (!("R" in $$source)) {
+            this["R"] = 0;
+        }
+        if (!("G" in $$source)) {
+            this["G"] = 0;
+        }
+        if (!("B" in $$source)) {
+            this["B"] = 0;
+        }
+        if (!("A" in $$source)) {
+            this["A"] = 0;
+        }
+
+        Object.assign(this, $$source);
+    }
+
+    /**
+     * Creates a new RGBA instance from a string or object.
+     */
+    static createFrom($$source: any = {}): RGBA {
+        let $$parsedSource = typeof $$source === 'string' ? JSON.parse($$source) : $$source;
+        return new RGBA($$parsedSource as Partial<RGBA>);
+    }
+}

frontend/bindings/voidraft/internal/services/index.ts

@@ -13,6 +13,7 @@ import * as MigrationService from "./migrationservice.js";
 import * as SelfUpdateService from "./selfupdateservice.js";
 import * as StartupService from "./startupservice.js";
 import * as SystemService from "./systemservice.js";
+import * as TestService from "./testservice.js";
 import * as ThemeService from "./themeservice.js";
 import * as TranslationService from "./translationservice.js";
 import * as TrayService from "./trayservice.js";
@@ -31,6 +32,7 @@ export {
     SelfUpdateService,
     StartupService,
     SystemService,
+    TestService,
     ThemeService,
     TranslationService,
     TrayService,

frontend/bindings/voidraft/internal/services/testservice.ts

@@ -0,0 +1,55 @@
+// Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
+// This file is automatically generated. DO NOT EDIT
+
+/**
+ * TestService 测试服务 - 仅在开发环境使用
+ * @module
+ */
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore: Unused imports
+import {Call as $Call, Create as $Create} from "@wailsio/runtime";
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore: Unused imports
+import * as application$0 from "../../../github.com/wailsapp/wails/v3/pkg/application/models.js";
+
+/**
+ * ClearAll 清除所有测试状态
+ */
+export function ClearAll(): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(2179720854) as any;
+    return $resultPromise;
+}
+
+/**
+ * ServiceStartup 服务启动时调用
+ */
+export function ServiceStartup(options: application$0.ServiceOptions): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(617408198, options) as any;
+    return $resultPromise;
+}
+
+/**
+ * TestBadge 测试Badge功能
+ */
+export function TestBadge(text: string): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(4242952145, text) as any;
+    return $resultPromise;
+}
+
+/**
+ * TestNotification 测试通知功能
+ */
+export function TestNotification(title: string, subtitle: string, body: string): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(1697553289, title, subtitle, body) as any;
+    return $resultPromise;
+}
+
+/**
+ * TestUpdateNotification 测试更新通知
+ */
+export function TestUpdateNotification(): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(3091730060) as any;
+    return $resultPromise;
+}

frontend/src/router/index.ts

@@ -8,6 +8,56 @@ import KeyBindingsPage from '@/views/settings/pages/KeyBindingsPage.vue';
 import UpdatesPage from '@/views/settings/pages/UpdatesPage.vue';
 import ExtensionsPage from '@/views/settings/pages/ExtensionsPage.vue';
 import BackupPage from '@/views/settings/pages/BackupPage.vue';
+// 测试页面
+import TestPage from '@/views/settings/pages/TestPage.vue';
+
+// 基础设置子路由
+const settingsChildren: RouteRecordRaw[] = [
+  {
+    path: 'general',
+    name: 'SettingsGeneral',
+    component: GeneralPage
+  },
+  {
+    path: 'editing',
+    name: 'SettingsEditing',
+    component: EditingPage
+  },
+  {
+    path: 'appearance',
+    name: 'SettingsAppearance',
+    component: AppearancePage
+  },
+  {
+    path: 'extensions',
+    name: 'SettingsExtensions',
+    component: ExtensionsPage
+  },
+  {
+    path: 'key-bindings',
+    name: 'SettingsKeyBindings',
+    component: KeyBindingsPage
+  },
+  {
+    path: 'updates',
+    name: 'SettingsUpdates',
+    component: UpdatesPage
+  },
+  {
+    path: 'backup',
+    name: 'SettingsBackup',
+    component: BackupPage
+  }
+];
+
+// 仅在开发环境添加测试页面路由
+if (import.meta.env.DEV) {
+  settingsChildren.push({
+    path: 'test',
+    name: 'SettingsTest',
+    component: TestPage
+  });
+}
 
 const routes: RouteRecordRaw[] = [
   {
@@ -20,43 +70,7 @@ const routes: RouteRecordRaw[] = [
     name: 'Settings',
     redirect: '/settings/general',
     component: Settings,
-    children: [
-      {
-        path: 'general',
-        name: 'SettingsGeneral',
-        component: GeneralPage
-      },
-      {
-        path: 'editing',
-        name: 'SettingsEditing',
-        component: EditingPage
-      },
-      {
-        path: 'appearance',
-        name: 'SettingsAppearance',
-        component: AppearancePage
-      },
-      {
-        path: 'extensions',
-        name: 'SettingsExtensions',
-        component: ExtensionsPage
-      },
-      {
-        path: 'key-bindings',
-        name: 'SettingsKeyBindings',
-        component: KeyBindingsPage
-      },
-      {
-        path: 'updates',
-        name: 'SettingsUpdates',
-        component: UpdatesPage
-      },
-      {
-        path: 'backup',
-        name: 'SettingsBackup',
-        component: BackupPage
-      }
-    ]
+    children: settingsChildren
   }
 ];
 

frontend/src/views/settings/Settings.vue

@@ -19,6 +19,11 @@ const navItems = [
   { id: 'updates', icon: '🔄', route: '/settings/updates' }
 ];
 
+// 仅在开发环境添加测试页面导航
+if (import.meta.env.DEV) {
+  navItems.push({ id: 'test', icon: '🧪', route: '/settings/test' });
+}
+
 const activeNavItem = ref(route.path.split('/').pop() || 'general');
 
 // 处理导航点击
@@ -56,7 +61,7 @@ const goBackToEditor = async () => {
           @click="handleNavClick(item)"
         >
           <span class="nav-icon">{{ item.icon }}</span>
-          <span class="nav-text">{{ t(`settings.${item.id}`) }}</span>
+          <span class="nav-text">{{ item.id === 'test' ? 'Test' : t(`settings.${item.id}`) }}</span>
         </div>
       </div>
       <div class="settings-footer">

frontend/src/views/settings/pages/TestPage.vue

@@ -0,0 +1,274 @@
+<template>
+  <div class="settings-page">
+    <SettingSection title="Development Test Page">
+      <div class="dev-description">
+        This page is only available in development environment for testing notification and badge services.
+      </div>
+    </SettingSection>
+
+    <!-- Badge测试区域 -->
+    <SettingSection title="Badge Service Test">
+      <SettingItem title="Badge Text">
+        <input
+          v-model="badgeText"
+          type="text"
+          placeholder="Enter badge text (empty to remove)"
+          class="select-input"
+        />
+      </SettingItem>
+      <SettingItem title="Actions">
+        <div class="button-group">
+          <button @click="testBadge" class="test-button primary">
+            Set Badge
+          </button>
+          <button @click="clearBadge" class="test-button">
+            Clear Badge
+          </button>
+        </div>
+      </SettingItem>
+      <div v-if="badgeStatus" class="test-status" :class="badgeStatus.type">
+        {{ badgeStatus.message }}
+      </div>
+    </SettingSection>
+
+    <!-- 通知测试区域 -->
+    <SettingSection title="Notification Service Test">
+      <SettingItem title="Title">
+        <input
+          v-model="notificationTitle"
+          type="text"
+          placeholder="Notification title"
+          class="select-input"
+        />
+      </SettingItem>
+      <SettingItem title="Subtitle">
+        <input
+          v-model="notificationSubtitle"
+          type="text"
+          placeholder="Notification subtitle"
+          class="select-input"
+        />
+      </SettingItem>
+      <SettingItem title="Body">
+        <textarea
+          v-model="notificationBody"
+          placeholder="Notification body text"
+          class="select-input textarea-input"
+          rows="3"
+        ></textarea>
+      </SettingItem>
+      <SettingItem title="Actions">
+        <div class="button-group">
+          <button @click="testNotification" class="test-button primary">
+            Send Test Notification
+          </button>
+          <button @click="testUpdateNotification" class="test-button">
+            Test Update Notification
+          </button>
+        </div>
+      </SettingItem>
+      <div v-if="notificationStatus" class="test-status" :class="notificationStatus.type">
+        {{ notificationStatus.message }}
+      </div>
+    </SettingSection>
+
+    <!-- 清除所有测试状态 -->
+    <SettingSection title="Cleanup">
+      <SettingItem title="Clear All">
+        <button @click="clearAll" class="test-button danger">
+          Clear All Test States
+        </button>
+      </SettingItem>
+      <div v-if="clearStatus" class="test-status" :class="clearStatus.type">
+        {{ clearStatus.message }}
+      </div>
+    </SettingSection>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import * as TestService from '@/../bindings/voidraft/internal/services/testservice'
+import SettingSection from '../components/SettingSection.vue'
+import SettingItem from '../components/SettingItem.vue'
+
+// Badge测试状态
+const badgeText = ref('')
+const badgeStatus = ref<{ type: string; message: string } | null>(null)
+
+// 通知测试状态
+const notificationTitle = ref('')
+const notificationSubtitle = ref('')
+const notificationBody = ref('')
+const notificationStatus = ref<{ type: string; message: string } | null>(null)
+
+// 清除状态
+const clearStatus = ref<{ type: string; message: string } | null>(null)
+
+// 显示状态消息的辅助函数
+const showStatus = (statusRef: any, type: 'success' | 'error', message: string) => {
+  statusRef.value = { type, message }
+  setTimeout(() => {
+    statusRef.value = null
+  }, 5000)
+}
+
+// 测试Badge功能
+const testBadge = async () => {
+  try {
+    await TestService.TestBadge(badgeText.value)
+    showStatus(badgeStatus, 'success', `Badge ${badgeText.value ? 'set to: ' + badgeText.value : 'cleared'} successfully`)
+  } catch (error: any) {
+    showStatus(badgeStatus, 'error', `Failed to set badge: ${error.message || error}`)
+  }
+}
+
+// 清除Badge
+const clearBadge = async () => {
+  try {
+    await TestService.TestBadge('')
+    badgeText.value = ''
+    showStatus(badgeStatus, 'success', 'Badge cleared successfully')
+  } catch (error: any) {
+    showStatus(badgeStatus, 'error', `Failed to clear badge: ${error.message || error}`)
+  }
+}
+
+// 测试通知功能
+const testNotification = async () => {
+  try {
+    await TestService.TestNotification(
+      notificationTitle.value,
+      notificationSubtitle.value,
+      notificationBody.value
+    )
+    showStatus(notificationStatus, 'success', 'Notification sent successfully')
+  } catch (error: any) {
+    showStatus(notificationStatus, 'error', `Failed to send notification: ${error.message || error}`)
+  }
+}
+
+// 测试更新通知
+const testUpdateNotification = async () => {
+  try {
+    await TestService.TestUpdateNotification()
+    showStatus(notificationStatus, 'success', 'Update notification sent successfully (badge + notification)')
+  } catch (error: any) {
+    showStatus(notificationStatus, 'error', `Failed to send update notification: ${error.message || error}`)
+  }
+}
+
+// 清除所有测试状态
+const clearAll = async () => {
+  try {
+    await TestService.ClearAll()
+    // 清空表单
+    badgeText.value = ''
+    notificationTitle.value = ''
+    notificationSubtitle.value = ''
+    notificationBody.value = ''
+    showStatus(clearStatus, 'success', 'All test states cleared successfully')
+  } catch (error: any) {
+    showStatus(clearStatus, 'error', `Failed to clear test states: ${error.message || error}`)
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.settings-page {
+  padding: 20px 0 20px 0;
+}
+
+.dev-description {
+  color: var(--settings-text-secondary);
+  font-size: 12px;
+  line-height: 1.4;
+  padding: 8px 0;
+}
+
+.select-input {
+  padding: 6px 8px;
+  border: 1px solid var(--settings-input-border);
+  border-radius: 4px;
+  background-color: var(--settings-input-bg);
+  color: var(--settings-text);
+  font-size: 12px;
+  width: 180px;
+  
+  &:focus {
+    outline: none;
+    border-color: #4a9eff;
+    box-shadow: 0 0 0 2px rgba(74, 158, 255, 0.2);
+  }
+  
+  &.textarea-input {
+    min-height: 60px;
+    resize: vertical;
+    font-family: inherit;
+    line-height: 1.4;
+  }
+}
+
+.button-group {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.test-button {
+  padding: 6px 12px;
+  border: 1px solid var(--settings-border);
+  border-radius: 4px;
+  background-color: var(--settings-card-bg);
+  color: var(--settings-text);
+  cursor: pointer;
+  font-size: 12px;
+  transition: all 0.2s ease;
+  
+  &:hover {
+    background-color: var(--settings-hover);
+  }
+  
+  &.primary {
+    background-color: #4a9eff;
+    color: white;
+    border-color: #4a9eff;
+    
+    &:hover {
+      background-color: #3a8eef;
+      border-color: #3a8eef;
+    }
+  }
+  
+  &.danger {
+    background-color: var(--text-danger);
+    color: white;
+    border-color: var(--text-danger);
+    
+    &:hover {
+      opacity: 0.9;
+    }
+  }
+}
+
+.test-status {
+  margin-top: 12px;
+  padding: 8px 12px;
+  border-radius: 4px;
+  font-size: 11px;
+  font-weight: 500;
+  border: 1px solid;
+  
+  &.success {
+    background-color: rgba(34, 197, 94, 0.1);
+    color: #16a34a;
+    border-color: rgba(34, 197, 94, 0.2);
+  }
+  
+  &.error {
+    background-color: rgba(239, 68, 68, 0.1);
+    color: #dc2626;
+    border-color: rgba(239, 68, 68, 0.2);
+  }
+}
+</style>