Electron-React19-WinChat聊天系统|react+electron客户端聊天程序Exe

<div className='ra__container flex-c'>
  <div className='ra__layout flexbox flex-col'>
    <div className='ra__layout-body flex1 flexbox'>
      {/* 菜单栏 */}
      <Menubar />

      {/* 侧边栏 */}
      <Sidebar />
      
      {/* 主内容区 */}
      <div className='ra__layout-main flex1 flexbox flex-col'>
        <Toolbar />
        { Lazyload(<Outlet />) }
      </div>
    </div>
  </div>
</div>

import '@arco-design/web-react/es/_util/react-19-adapter'
import { createRoot } from 'react-dom/client'
import './style.scss'
import App from './App.jsx'
import '@arco-design/web-react/dist/css/arco.css'

import { launchApp } from '@/windows/actions'

launchApp().then(config => {
  if(config) {
    // 存储窗口配置
    window.config = config
  }

  createRoot(document.getElementById('root')).render(
    <App />
  )
})

/**
 * electron主进程配置
 * @author andy
 */

import { app, BrowserWindow } from 'electron'

import { WindowManager } from '../src/windows/index.js'

// 忽略安全警告提示 Electron Security Warning (Insecure Content-Security-Policy)
process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = true

const createWindow = () => {
  let win = new WindowManager()
  win.create({isMajor: true})
  // 系统托盘管理
  win.trayManager()
  // 监听ipcMain事件
  win.ipcManager()
}

app.whenReady().then(() => {
  createWindow()

  app.on('activate', () => {
    if(BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

app.on('window-all-closed', () => {
  if(process.platform !== 'darwin') app.quit()
})

/**
 * electron预加载文件
 * @author andy
 */

const { contextBridge, ipcRenderer } = require('electron')
// MaxListenersExceededWarning: Possible EventEmitter memory leak detected.
ipcRenderer.setMaxListeners(0)

contextBridge.exposeInMainWorld(
  'electron',
  {
    // 通过 channel 向主进程发送异步消息。主进程使用 ipcMain.on() 监听 channel
    send: (channel, args) => {
      ipcRenderer.send(channel, args)
    },

    // 通过 channel 向主进程发送消息，并异步等待结果。主进程应该使用 ipcMain.handle() 监听 channel
    invoke: (channel, args) => {
      return new Promise(resolve => ipcRenderer.invoke(channel, args).then(data => resolve(data)).catch(e => console.log(e)))
    },

    // 监听 channel 事件
    on: (channel, func) => {
      console.log('receive event')
      ipcRenderer.on(channel, (event, ...args) => func(event, ...args))
    },

    // 一次性监听事件
    once: (channel, func) => {
      ipcRenderer.once(channel, (event, ...args) => func(event, ...args))
    },

    // 浏览器打开链接
    openExternal: (url) => ipcRenderer.send('open-external', url)
  }
)

function Winbtns(props) {
  const {
    color,
    // 窗口是否可以最小化
    minimizable = true,
    // 窗口是否可以最大化
    maximizable = true,
    // 窗口是否可关闭
    closable = true,
    // 设置层叠
    zIndex = 2026,
    style,
    ...rest
  } = props

  const appState = appStore()

  const [hasMaximized, setHasMaximized] = useState(false)
  const [isResizable, setIsResizable] = useState(true)
  const [isMaximizable, setIsMaximizable] = useState(true)

  useEffect(() => {
    // 用户是否可以手动调整窗口大小
    window.electron.invoke('win-isResizable').then(res => {
      setIsResizable(res)
    })

    // 窗口是否可以最大化
    window.electron.invoke('win-isMaximizable').then(res => {
      setIsMaximizable(res)
    })

    // 初始窗口是否最大化
    window.electron.invoke('win-isMaximized').then(res => {
      setHasMaximized(res)
    })

    // 实时监听窗口是否最大化
    window.electron.on('win-maximized', (e, data) => {
      setHasMaximized(data)
    })
  }, [])

  // 最小化
  const handleWinMin = () => {
    window.electron.invoke('win-min')
  }
  // 最大化/还原
  const handleWinMax2Min = () => {
    window.electron.invoke('win-toggle').then(res => {
      setHasMaximized(res)
    })
  }
  // 关闭
  const handleWinClose = () => {
    if(window.config.isMajor) {
      const modal = Modal.confirm({
        icon: null,
        content: <div style={{fontSize: 15}}>是否最小化到托盘，不退出程序?</div>,
        focusLock: false,
        style: {width: 275, borderRadius: 12, padding: '10px 25px 20px'},
        footer: <div style={{textAlign: 'right'}}>
          <Button type='text' shape='round' size='small' onClick={() => {
            modal.close()
            setTimeout(() => {
              winSet('hide', window.config.id)
            }, 150)
          }}>最小化至托盘</Button>
          <Button type='text' status='danger' shape='round' size='small' onClick={() => {
            appState.logout()
            winSet('close')
          }}>退出</Button>
        </div>
      })
    } else {
      winSet('close', window.config.id)
    }
  }

  return (
    <>
      <div {...rest} className="ra__winbtns flexbox flex-alignc" style={{ zIndex: zIndex, ...style }}>
        <div className="ra__winbtns-actions flexbox flex-alignc" style={{ color: color }}>
          {isTrue(minimizable) && <a className="min" title="最小化" onClick={handleWinMin}><i className="elec-icon elec-icon-min"></i></a>}
          {(isTrue(maximizable) && isResizable && isMaximizable) &&
            <a className="max" title={hasMaximized ? '向下还原' : '最大化'} onClick={handleWinMax2Min}>
              {hasMaximized ? <i className="wicon elec-icon elec-icon-restore"></i> : <i className="elec-icon elec-icon-max"></i>}
            </a>
          }
          {isTrue(closable) && <a className="close" title="关闭" onClick={handleWinClose}><i className="elec-icon elec-icon-quit"></i></a>}
        </div>
      </div>
    </>
  )
}

// 登录窗口
export function loginWindow() {
  winCreate({
    url: '/login',
    title: '登录',
    width: 320,
    height: 380,
    isMajor: true,
    resizable: false,
    maximizable: false,
    alwaysOnTop: true
  })
}

// 关于窗口
export function aboutWindow() {
  winCreate({
    url: '/win/about',
    title: '关于',
    width: 375,
    height: 300,
    minWidth: 375,
    minHeight: 300,
    maximizable: false,
    alwaysOnTop: true,
  })
}

// 设置窗口
export function settingWindow() {
  winCreate({
    url: '/win/setting',
    title: '设置',
    width: 550,
    height: 470,
    resizable: false,
    maximizable: false,
  })
}