新增IPC通道相关注释

customTypes/global.d.ts

@@ -1,14 +1,41 @@
 import { ipcRenderer, shell } from "electron";
 import type { IIpcRendererInvoke, IIpcRendererOn } from "../src/ipc/index";
+
+/**
+ * 渲染进程给主进程发送消息
+ */
 type IpcRendererInvoke = {
   [key in keyof IIpcRendererInvoke]: {
+    /**
+     * 渲染进程给主进程发送消息
+     * @param args 参数
+     * @returns 
+     */
     invoke: IIpcRendererInvoke[key];
   };
 };
+
+/**
+ * 渲染进程监听事件
+ */
 type IpcRendererOn = {
   [key in keyof IIpcRendererOn]: {
+    /**
+     * 渲染进程监听事件
+     * @param listener 监听事件
+     * @returns 
+     */
     on: (listener: IIpcRendererOn[key]) => void;
+    /**
+     * 渲染进程监听一次事件
+     * @param listener 
+     * @returns 
+     */
     once: (listener: IIpcRendererOn[key]) => void;
+    /**
+     * 渲染进程移除所有监听
+     * @returns 
+     */
     removeAllListeners: () => void;
   };
 };
@@ -28,6 +55,10 @@ declare global {
     performance: {
       memory: memoryInfo;
     };
+    /**
+     * 渲染进程的IPC通道
+     * 但是只能是给主进程发消息(invoke)和监听主进程的消息(on/once)
+     */
     ipcRendererChannel: IpcRendererInvoke & IpcRendererOn;
     systemInfo: {
       platform: string;

src/ipc/channel.ts

@@ -1,26 +1,55 @@
+/**
+ * 这个文件是定义IPC通道的事件监听
+ * 总的来说，IpcMainEventListener 和 IpcRendererEventListener 无需理解，这俩只是类型
+ * IpcChannelMainClass 和 IpcChannelRendererClass 是主进程和渲染进程的IPC通道事件监听
+ */
+
 import type { ProgressInfo } from "electron-updater";
 
+/**
+ * 主进程的IPC通道事件监听
+ */
 export interface IpcMainEventListener<Send = void, Receive = void> {
+  /**
+   * 主进程监听事件
+   */
   ipcMainHandle: Send extends void
   ? (event: Electron.IpcMainInvokeEvent) => Receive | Promise<Receive>
   : (
     event: Electron.IpcMainInvokeEvent,
     args: Send
   ) => Receive | Promise<Receive>;
+  /**
+   * 渲染进程给主进程发送消息
+   */
   ipcRendererInvoke: Send extends void
   ? () => Promise<Receive>
   : (args: Send) => Promise<Receive>;
 }
 
+/**
+ * 渲染进程的IPC通道事件监听
+ */
 export interface IpcRendererEventListener<Send = void> {
+  /**
+   * 渲染进程监听事件
+   */
   ipcRendererOn: Send extends void
   ? (event: Electron.IpcRendererEvent) => void
   : (event: Electron.IpcRendererEvent, args: Send) => void;
+  /**
+   * 主进程给渲染进程发送消息
+   */
   webContentSend: Send extends void
   ? (webContents: Electron.WebContents) => void
   : (webContents: Electron.WebContents, args: Send) => void;
 }
 
+/**
+ * 主进程的IPC通道事件
+ * 给主进程发消息的事件以及主进程监听的事件都写在这里，但是这里也只是规定了都有什么，并没有具体实现
+ * 具体实现在 src/main/services/ipc-main-handle.ts
+ */
 export class IpcChannelMainClass {
   IsUseSysTitle: IpcMainEventListener<void, boolean> = null;
   /**
@@ -73,6 +102,14 @@ export class IpcChannelMainClass {
     sendData?: unknown;
   }> = null;
 }
+
+/**
+ * 渲染进程的IPC通道事件
+ * 给渲染进程发消息的事件以及渲染进程监听的时间都写在这里，但是这里也只是规定了都有什么，并没有具体实现
+ * 具体实现在 src/main/services/web-content-send.ts，但是是虚拟化的，可以就把这个当个interface来看
+ * 主进程给渲染进程发消息的话，直接就 webContentSend.事件名 就行了
+ * 如 webContentSend.SendDataTest(childWin.webContents, arg.sendData);
+ */
 export class IpcChannelRendererClass {
   // ipcRenderer
   DownloadProgress: IpcRendererEventListener<number> = null;

src/ipc/index.ts

@@ -1,23 +1,47 @@
+/**
+ * 这个文件是用来导出所有的类型定义的
+ * 其实总的来说都不需要理解，毕竟都是类型定义，能用就行
+ */
+
 import {
   IpcChannelMainClass,
   IpcChannelRendererClass,
   IpcMainEventListener,
   IpcRendererEventListener,
 } from "./channel";
 
+/**
+ * 获取事件名及参数
+ * 这里其实不需要理解，只需要知道这个类型是用来获取事件名及参数的
+ */
 type GetChannelType<
   T extends IpcChannelMainClass | IpcChannelRendererClass,
   K extends keyof IpcMainEventListener | keyof IpcRendererEventListener
 > = {
   [Key in keyof T]: K extends keyof T[Key] ? T[Key][K] : never;
 };
 
+/**
+ * 主进程监听事件
+ */
 export interface IIpcMainHandle
   extends GetChannelType<IpcChannelMainClass, "ipcMainHandle"> {}
+
+/**
+ * 渲染进程给主进程发送消息
+ */
 export interface IIpcRendererInvoke
   extends GetChannelType<IpcChannelMainClass, "ipcRendererInvoke"> {}
+
+/**
+ * 渲染进程监听事件
+ */
 export interface IIpcRendererOn
   extends GetChannelType<IpcChannelRendererClass, "ipcRendererOn"> {}
+
+/**
+ * 给渲染进程发消息
+ */
 export interface IWebContentSend
   extends GetChannelType<IpcChannelRendererClass, "webContentSend"> {}
 

src/main/services/web-content-send.ts

@@ -1,5 +1,10 @@
 import { IWebContentSend } from "src/ipc";
 
+/**
+ * 主进程给渲染进程发消息
+ * 这是一个虚拟化的对象，实际上并没有实现任何方法，也不需要任何实现
+ * 主进程给渲染进程发消息的话，直接就 webContentSend.事件名 就行了
+ */
 export const webContentSend: IWebContentSend = new Proxy(
   {},
   {

src/renderer/App.vue

@@ -1,12 +1,19 @@
 <template>
-  <title-bar />
-  <router-view v-slot="{ Component }">
-    <component :is="Component" />
-  </router-view>
+	<title-bar />
+	<div class="main">
+		<router-view v-slot="{ Component }">
+			<component :is="Component" />
+		</router-view>
+	</div>
 </template>
 
 <script setup lang="ts">
 import TitleBar from "@renderer/components/title-bar/title-bar.vue";
 </script>
 
-<style></style>
+<style scoped>
+.main {
+	padding-top: 30px;
+	box-sizing: border-box;
+}
+</style>