docs(desktop): 处理标题栏事件

aooiuu · May 19, 2024 · 4502e05 · 4502e05
1 parent 7ef4267
commit 4502e05
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 11 deletions.
diff --git a/packages/web/electron/api.ts b/packages/web/electron/api.ts
@@ -1,3 +1,4 @@
+import { BrowserWindow, app } from 'electron';
 import EasyPostMessage from 'easy-post-message';
 import Adapter from 'easy-post-message/electron-adapter';
 import { readConfig, updateConfig } from './config';
@@ -10,7 +11,7 @@ function success(data: any, msg = '') {
   };
 }
 
-export function createAPI() {
+export function createAPI(win: BrowserWindow) {
   const pm = new EasyPostMessage(Adapter);
   const { api } = require('@any-reader/shared');
 
@@ -31,4 +32,18 @@ export function createAPI() {
 
   pm.answer('get@readConfig', async () => success(await readConfig()));
   pm.answer('post@updateConfig', async (data: any) => success(updateConfig(data)));
+
+  pm.answer('get@minimize', () => {
+    win.minimize();
+    return success(true);
+  });
+  pm.answer('get@maximize', () => {
+    console.log('[maximize]');
+    win.isMaximized() ? win.unmaximize() : win.maximize();
+    return success(true);
+  });
+  pm.answer('get@exit', () => {
+    app.quit();
+    process.exit(0);
+  });
 }
diff --git a/packages/web/electron/main.ts b/packages/web/electron/main.ts
@@ -10,7 +10,7 @@ app.whenReady().then(async () => {
   });
 
   api.init();
-  createAPI();
+  createAPI(win);
 
   // You can use `process.env.VITE_DEV_SERVER_URL` when the vite command is called `serve`
   if (process.env.VITE_DEV_SERVER_URL) {

diff --git a/packages/web/src/api/electron.ts b/packages/web/src/api/electron.ts
@@ -0,0 +1,25 @@
+import { request } from '@/utils/request';
+
+// 窗口最小化
+export function minimize() {
+  return request({
+    method: 'get',
+    url: 'minimize'
+  });
+}
+
+// 窗口最大化
+export function maximize() {
+  return request({
+    method: 'get',
+    url: 'maximize'
+  });
+}
+
+// 结束
+export function exit() {
+  return request({
+    method: 'get',
+    url: 'exit'
+  });
+}
diff --git a/packages/web/src/pages/pc/layout/index.vue b/packages/web/src/pages/pc/layout/index.vue
@@ -15,15 +15,23 @@
         </div>
       </div>
       <div class="w-20% h-full flex gap-4 items-center justify-end text-[--titleBar-inactiveForeground]">
-        <div class="w-40 h-full flex justify-center items-center cursor-pointer hover:bg-[--toolbar-hoverBackground] app-region-none">
-          <span class="codicon codicon-chrome-minimize"></span>
-        </div>
-        <div class="w-40 h-full flex justify-center items-center cursor-pointer hover:bg-[--toolbar-hoverBackground] fullscreen app-region-none">
-          <span class="codicon codicon-chrome-maximize"></span>
-        </div>
-        <div class="w-40 h-full flex justify-center items-center cursor-pointer hover:bg-[--toolbar-hoverBackground] app-region-none">
-          <span class="codicon codicon-chrome-close"></span>
-        </div>
+        <template v-if="PLATFORM === 'electron'">
+          <div
+            class="w-40 h-full flex justify-center items-center cursor-pointer hover:bg-[--toolbar-hoverBackground] app-region-none"
+            @click="minimize"
+          >
+            <span class="codicon codicon-chrome-minimize"></span>
+          </div>
+          <div
+            class="w-40 h-full flex justify-center items-center cursor-pointer hover:bg-[--toolbar-hoverBackground] fullscreen app-region-none"
+            @click="maximize"
+          >
+            <span class="codicon codicon-chrome-maximize"></span>
+          </div>
+          <div class="w-40 h-full flex justify-center items-center cursor-pointer hover:bg-[--toolbar-hoverBackground] app-region-none" @click="exit">
+            <span class="codicon codicon-chrome-close"></span>
+          </div>
+        </template>
       </div>
     </div>
     <div class="flex flex-1 overflow-auto">
@@ -63,6 +71,8 @@
 
 <script setup lang="jsx">
 import { Modal } from '@arco-design/web-vue';
+import { PLATFORM } from '@/constants';
+import { minimize, maximize, exit } from '@/api/electron';
 import Setting from '@/components/Setting/index.vue';
 
 const route = useRoute();