feat: 隐藏 electron 窗口，添加顶部控制栏

electron/main/index.ts

@@ -2,6 +2,7 @@ import { release } from 'node:os'
 import { join } from 'node:path'
 import { BrowserWindow, app, ipcMain, shell } from 'electron'
 import { chat } from './chat'
+import { windowAction } from './window'
 
 // The built directory structure
 //
@@ -47,8 +48,9 @@ const indexHtml = join(process.env.DIST, 'index.html')
 
 async function createWindow() {
   win = new BrowserWindow({
-    title: 'Main window',
+    title: 'chatgpt tool',
     icon: join(process.env.PUBLIC, 'favicon.ico'),
+    frame: false,
     webPreferences: {
       preload,
       // Warning: Enable nodeIntegration and disable contextIsolation is not secure in production
@@ -81,6 +83,7 @@ async function createWindow() {
   })
 
   chat(win)
+  windowAction(win)
 }
 
 app.whenReady().then(createWindow)

electron/main/window.ts

@@ -0,0 +1,33 @@
+import { BrowserWindow, ipcMain } from 'electron'
+
+export async function windowAction(mainWin: Electron.BrowserWindow) {
+  ipcMain.on('win-min', () => {
+    const win = BrowserWindow.getFocusedWindow()
+    win.minimize()
+  })
+
+  ipcMain.on('win-recover', () => {
+    const win = BrowserWindow.getFocusedWindow()
+    if (win.isMaximized())
+      win.unmaximize()
+    else
+      win.maximize()
+  })
+
+  ipcMain.on('win-close', () => {
+    const win = BrowserWindow.getFocusedWindow()
+    win.close()
+  })
+
+  mainWin.on('maximize', () => {
+    mainWin.webContents.send('maximize-change', {
+      isMax: true,
+    })
+  })
+
+  mainWin.on('unmaximize', () => {
+    mainWin.webContents.send('maximize-change', {
+      isMax: false,
+    })
+  })
+}

src/App.tsx

@@ -1,8 +1,10 @@
 import Chat from '@/views/Chat'
+import Bar from '@/components/Bar'
 
 function App() {
   return (
     <div className='App'>
+        <Bar />
         <Chat />
     </div>
   )

src/components/Bar/index.scss

@@ -0,0 +1,15 @@
+@import "@/style/var";
+.app-bar {
+  height: $barHeight;
+  line-height: $barHeight;
+  display: flex;
+  flex-direction: row;
+  padding: 0 0 0 20px;
+  justify-content: space-between;
+  font-size: var(--td-font-size-body-large);
+  -webkit-app-region: drag;
+
+  .bar-button-groups {
+    -webkit-app-region: no-drag;
+  }
+}

src/components/Bar/index.tsx

@@ -0,0 +1,51 @@
+import { useEffect, useState } from 'react'
+import { Button, Divider, Space } from 'tdesign-react'
+import { CloseIcon, RectangleIcon, RelativityIcon, RemoveIcon } from 'tdesign-icons-react'
+import { ipcRenderer } from 'electron'
+import './index.scss'
+
+const Bar = () => {
+  const [isMax, setIsMax] = useState(false)
+
+  const handleMini = () => {
+    ipcRenderer.send('win-min')
+  }
+
+  const handleRecover = () => {
+    ipcRenderer.send('win-recover')
+  }
+
+  const handleClose = () => {
+    ipcRenderer.send('win-close')
+  }
+
+  useEffect(() => {
+    ipcRenderer.on('maximize-change', (e: unknown, state: { isMax: boolean }) => {
+      setIsMax(state.isMax)
+    })
+    return () => {
+      ipcRenderer.removeAllListeners('maximize-change')
+    }
+  }, [])
+  return (
+        <div className="app-bar">
+            <div className="bar-button-groups">ChatGPT Tool</div>
+            <div className="bar-button-groups">
+                <Space size="0" separator={<Divider layout="vertical" />}>
+                    <Button theme="primary" variant="text" onClick={handleMini}>
+                        <RemoveIcon />
+                    </Button>
+                    <Button theme="warning" variant="text" onClick={handleRecover}>
+                        {
+                            isMax ? <RelativityIcon /> : <RectangleIcon />
+                        }
+                    </Button>
+                    <Button theme="danger" variant="text" onClick={handleClose}>
+                        <CloseIcon />
+                    </Button>
+                </Space>
+            </div>
+        </div>
+  )
+}
+export default Bar

src/index.scss

@@ -1,3 +1,4 @@
+@import "@/style/var";
 html, body, #root, .App {
   height: 100%;
   width: 100%;
@@ -13,3 +14,9 @@ html, body, #root, .App {
   padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-xl);
   margin: var(--td-comp-margin-m) 0;
 }
+
+.App {
+  .chat-container {
+    height: calc(100% - $barHeight);
+  }
+}

src/style/var.scss

@@ -0,0 +1 @@
+$barHeight: var(--td-comp-size-xl);