fix: notification not set correctly / 修复: 通知无法正常设置

Author: creamIcec

src/electron/events/event-handlers.ts

@@ -8,6 +8,7 @@ import {
 import getLogger from "../logger.js";
 import { modifyGlobalBringUpWindowShortcut } from "./glabol-event-handlers.js";
 import { LinkTarget } from "../types.js";
+import { showWindow } from "../actions/window-actions.js";
 const logger = getLogger(import.meta.url);
 
 export function registerWindowEventHandlers(window: BrowserWindow) {
@@ -192,10 +193,15 @@ export function registerDataEventHandlers(noteService: NoteService) {
 
 //通知事件处理器
 export function registerNotificationEventHandlers(
+  window: BrowserWindow,
   notificationService: NotificationService
 ) {
   ipcMain.handle("notification:set", async (event, delay, name, content?) => {
     logger.info(`设置的通知延迟: ${delay}`);
-    notificationService.enqueue(new NotificationItem(content, name, delay));
+    notificationService.enqueue(
+      new NotificationItem(content, name, delay, (e) => {
+        showWindow(window);
+      })
+    );
   });
 }

src/electron/io/notification-service.ts

@@ -8,6 +8,7 @@ export class NotificationItem {
   private _title: string;
   private _content: string;
   private _delay: number;
+  private _clickCallback?: (e: Electron.Event) => void;
   public get title() {
     return this._title;
   }
@@ -17,10 +18,19 @@ export class NotificationItem {
   public get delay() {
     return this._delay;
   }
-  public constructor(title: string, source: string, delay: number) {
+  public get clickCallback() {
+    return this._clickCallback;
+  }
+  public constructor(
+    title: string,
+    source: string,
+    delay: number,
+    clickCallback?: (e: Electron.Event) => void
+  ) {
     this._title = title;
     this._content = source;
     this._delay = delay;
+    this._clickCallback = clickCallback;
   }
 }
 

src/electron/main.ts

@@ -74,7 +74,7 @@ app.on("ready", async () => {
   registerDataEventHandlers(noteService);
 
   //注册通知处理事件监听
-  registerNotificationEventHandlers(notificationService);
+  registerNotificationEventHandlers(mainWindow, notificationService);
 
   //注册全局快捷键
   registerGlobalBringUpWindowShortCut(() => {

src/electron/native/notification.ts

@@ -1,10 +1,19 @@
 import { Notification } from "electron";
 import { NotificationItem } from "../io/notification-service.js";
+import GetLogger from "../logger.js";
+const logger = GetLogger(import.meta.url);
 
 export function nativeSendNotification(item: NotificationItem) {
   const notification = new Notification({
     title: item.content,
     body: item.title,
   });
+  if (item.clickCallback) {
+    notification.on("click", (e) => {
+      logger.info("用户点击通知");
+      item.clickCallback!(e);
+      notification.close();
+    });
+  }
   notification.show();
 }

src/ui/components/appBar/appBar.tsx

@@ -226,19 +226,15 @@ export default function AppBar({
     setIsTimePickerOpen(!isTimePickerOpen);
   };
 
-  const handleScheduleNotification = async () => {
-    if (!timePickerRef.current || !contentUseRef.current) {
-      return;
-    }
-    const targetTime = (timePickerRef!.current as HTMLInputElement).value;
+  const handleScheduleNotification = async (
+    targetTime: string,
+    useContent: boolean
+  ) => {
     console.log(targetTime);
-    const useContentAsNotification = (
-      contentUseRef!.current as HTMLInputElement
-    ).checked;
     await scheduleNotification(
       targetTime,
       `来自笔记: ${title}`,
-      useContentAsNotification ? content : "你有新的提醒"
+      useContent ? content : "你有新的提醒"
     );
     setIsTimePickerOpen(false);
   };
@@ -277,9 +273,6 @@ export default function AppBar({
     };
   }, [isDisplay]);
 
-  const timePickerRef = useRef(null);
-  const contentUseRef = useRef(null);
-
   return (
     <header
       className={clsx(isDisplay ? styles.header : styles["header-collapse"])}

src/ui/components/dialogs/NotificationSettingWindow.tsx

@@ -15,7 +15,7 @@ export default function NotificationSettingWindow({
   onSet,
   onCancel,
 }: {
-  onSet: React.MouseEventHandler;
+  onSet: (time: string, useContent: boolean) => void;
   onCancel: React.MouseEventHandler;
 }) {
   const timePickerRef = useRef(null);
@@ -31,6 +31,20 @@ export default function NotificationSettingWindow({
     [onCancel]
   );
 
+  const handleOnSet = useCallback(
+    (e: React.MouseEvent) => {
+      e.preventDefault();
+      const timePickerInput = timePickerRef.current;
+      const useContentInput = contentUseRef.current;
+      if (timePickerInput && useContentInput) {
+        const time = (timePickerInput as HTMLInputElement).value;
+        const useContent = (useContentInput as HTMLInputElement).checked;
+        onSet(time, useContent);
+      }
+    },
+    [onSet]
+  );
+
   useEffect(() => {
     document.addEventListener("keydown", handleOnQuit);
     return () => {
@@ -73,7 +87,7 @@ export default function NotificationSettingWindow({
             </MdOutlinedButton>
             <MdFilledButton
               className={styles["dialog-action-button-small"]}
-              onClick={onSet}
+              onClick={handleOnSet}
             >
               确定
             </MdFilledButton>