优化代码

electron/main.js

@@ -1,79 +1,86 @@
-const { app, BrowserWindow, Menu, ipcMain, globalShortcut } = require('electron');// 引入electron
+const { app, BrowserWindow, Menu, ipcMain, globalShortcut } = require('electron');
 const path = require('path');
-let win, loadingWin;
-Menu.setApplicationMenu(null) // 去掉菜单栏
-app.commandLine.appendSwitch('wm-window-animations-disabled') // 拖动闪屏
+const HID = require('node-hid');
+const devices = HID.devices();
+const logitech = devices.filter(el => el.manufacturer == 'Logitech');
+const data = new HID.HID(logitech[0].vendorId, logitech[0].productId);
 
+class MainSerivce {
+  constructor() {
+    Menu.setApplicationMenu(null) // 去掉菜单栏
+    app.commandLine.appendSwitch('wm-window-animations-disabled') // 拖动闪屏
+    this.loadingWin = null
+    this.mainWin = null
+    app.on('ready', this.onRead.bind(this))
+    app.on('activate', this.createWindow.bind(this))
+    app.on('window-all-closed',app.quit)
+  }
+
+  createLoading() {
+    this.loadingWin = new BrowserWindow({
+      frame: false, // 无边框（窗口、工具栏等），只包含网页内容
+      width: 200,
+      height: 200,
+      resizable: false,
+      center: true,
+      alwaysOnTop: true,
+      transparent: true // 窗口是否支持透明，如果想做高级效果最好为true
+    })
+    this.loadingWin.loadFile('loading.html')
+    this.loadingWin.on('close', () => {
+      this.loadingWin = null
+    })
+  }
 
-// 创建loading 窗口
-const showLoading = () => {
-  loadingWin = new BrowserWindow({
-    frame: false, // 无边框（窗口、工具栏等），只包含网页内容
-    width: 200,
-    height: 200,
-    resizable: false,
-    center: true,
-    alwaysOnTop: true,
-    transparent: true // 窗口是否支持透明，如果想做高级效果最好为true
-  })
-  loadingWin.loadFile('loading.html')
-  loadingWin.on('close', () => {
-    loadingWin = null
-  })
-}
+  createWindow() {
+    if (!this.mainWin) {
+      this.mainWin = new BrowserWindow({
+        minWidth: 1300,
+        minHeight: 760,
+        width: 1300,
+        height: 760,
+        frame: false,
+        transparent: true,
+        webPreferences: {
+          contextIsolation: true,
+          nodeIntegration: true,
+          webSecurity: false, // 去掉跨越
+          nodeIntegrationInWorker: true,
+          preload: path.join(__dirname, './preload.js')
+        },
+        show: false
+      })// 创建一个窗口
 
-// 创建主程序 窗口
-const createWindow = () => {
-  win = new BrowserWindow({
-    minWidth: 1300,
-    minHeight: 760,
-    width: 1300,
-    height: 760,
-    webPreferences: {
-      contextIsolation: true,
-      nodeIntegration: true,
-      webSecurity: false, // 去掉跨越
-      preload: path.join(__dirname, './preload.js')
-    },
-    show: false
-  })// 创建一个窗口
+      // 不同环境加载不同文件
+      if (app.isPackaged) {
+        this.mainWin.loadFile('dist/index.html')
+      } else {
+        this.mainWin.loadURL('http://localhost:6547/')
+      }
 
-  // 不同环境加载不同文件
-  if (app.isPackaged) {
-    win.loadFile('dist/index.html')
-  } else {
-    win.loadURL('http://localhost:6547/')
+      // 事件监听
+      this.mainWin.on('close', () => {this.mainWin = null})
+    }
   }
 
-  // 事件监听
-  win.on('close', () => {
-    // 回收BrowserWindow对象
-    win = null
-  })
-}
-
-// 事件监听
-app.on('ready', async () => {
-  showLoading()
-  createWindow()
-  // 监听渲染进行
-  ipcMain.once('close-loading', () => {
-    loadingWin?.close()
-    win?.show()
-  })
-  // 在BrowserWindow创建完成后，注册全局快捷键
-  globalShortcut.register('Control+F12', () => {
-    win?.webContents.toggleDevTools()
-  })
+  onRead() {
+    this.createLoading()
+    this.createWindow()
 
-})
+    // 注册调试模式
+    globalShortcut.register('Control+F12', () => {
+      // win.flashFrame(true)
+      this.mainWin.webContents.toggleDevTools()
+    })
 
-app.on('window-all-closed', () => {
-  app.quit()
-})
+    ipcMain.once('close-loading', () => {
+      this.loadingWin.close()
+      this.mainWin.show()
+    })
 
-app.on('activate', () => {
-  if (win == null) {
-    createWindow()
+    data.on('data', (db) => {
+      if(this.mainWin.isEnabled()) this.mainWin?.webContents.send('contrlData',db)
+    })
   }
-})
+};
+new MainSerivce()

electron/preload.js

@@ -1,22 +1,7 @@
 const { contextBridge, ipcRenderer } = require('electron');
-const HID = require('node-hid');
-const devices = HID.devices()
-const logitech = devices.filter(el => el.manufacturer == 'Logitech')
-const data = new HID.HID(logitech[0].vendorId, logitech[0].productId)
-// data.on('data', db => {
-//   // 拨片 2 是右拨片，1是左拨片，0是取消
-//   const bp = db[6] === 2 ? '右拨片' : db[6] === 1 ? "左拨片" : ''
-//   const fx = parseInt(db[44], 10)  // 转10进制
-//   const fxp = fx < 123 ? '左轮' + fx : fx > 132 ? '右轮' + fx : ''
-//   const ym = parseInt(db[46], 10) //油门
-//   console.log(66, bp, fxp, 255 - ym);
-
-// })
-
 
 contextBridge.exposeInMainWorld('$electron', {
   send: (channel, args) => ipcRenderer.send(channel, args),
   once: (channel, listener) => ipcRenderer.once(channel, listener),
-  on: (channel, listener) => ipcRenderer.on(channel, listener),
-  onContrl: (callBack) => data.on('data', (db) => callBack(db))
+  on: (channel, args) => ipcRenderer.on(channel, args)
 })

index.html

@@ -17,6 +17,8 @@
       min-width: 1300px;
       min-height: 760px;
       overflow: hidden;
+      border-radius: 20px;
+      background: none;
     }
   </style>
 </head>

src/assets/icons/close.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1686402246252" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2277" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M548.992 503.744L885.44 167.328a31.968 31.968 0 1 0-45.248-45.248L503.744 458.496 167.328 122.08a31.968 31.968 0 1 0-45.248 45.248l336.416 336.416L122.08 840.16a31.968 31.968 0 1 0 45.248 45.248l336.416-336.416L840.16 885.44a31.968 31.968 0 1 0 45.248-45.248L548.992 503.744z" p-id="2278"></path></svg>

src/assets/icons/min.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1686402233188" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1312" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M98.23 451.003l829.685-1.992 0.154 64-829.685 1.992z" fill="" p-id="1313"></path></svg>

src/components/battery.vue

@@ -39,13 +39,12 @@ const bgClass = computed(() => {
   justify-content: center;
   align-items: center;
   position: relative;
-  z-index: 3;
   color: white;
 
   &-panel {
     box-sizing: border-box;
-    width: 0.17rem;
-    height: 0.10rem;
+    width: 0.25rem;
+    height: 0.18rem;
     position: relative;
     border: 0.02rem solid #ccc;
     padding: 0.01rem;
@@ -55,14 +54,14 @@ const bgClass = computed(() => {
     &::before {
       content: "";
       border-radius: 0 0.01rem 0.01rem 0;
-      height: 0.05rem;
+      height: 0.08rem;
       background: #ccc;
-      width: 0.02rem;
+      width: 0.03rem;
       position: absolute;
       top: 50%;
       right: -0.04rem;
       transform: translateY(-50%);
-
+      overflow: hidden;
     }
 
     &-remainder {
@@ -77,7 +76,7 @@ const bgClass = computed(() => {
   }
 
   &-berText {
-    font-size: 0.09rem;
+    font-size: 0.15rem;
   }
 }
 

src/views/index/index.vue

@@ -238,7 +238,10 @@ function intSoketRtc(host: string) {
 // watch(() => warnAudio.value, (v) => {
 //   if (v && socket.value && socket.value.connected) socket.value.emit('msg', { type: 'warnAudio', warnAudio: v })
 // })
-window.$electron.onContrl((db: Uint8Array) => {
+
+window.$electron?.on('contrlData', (db: Uint8Array) => {
+  console.log(1, db)
+
   // 拨片 2 是右拨片，1是左拨片，0是取消
   const bp = db[6] === 2 ? '右拨片' : db[6] === 1 ? '左拨片' : ''
   const fx = parseInt(db[44].toString(), 10) // 转10进制
@@ -246,6 +249,10 @@ window.$electron.onContrl((db: Uint8Array) => {
   const ym = parseInt(db[46].toString(), 10) // 油门
   console.log(66, bp, fxp, 255 - ym)
 })
+
+function titleEvent(type: string) {
+  window.$electron?.send(type)
+}
 onMounted(() => {
   intSoketRtc(HOST.value)
 })
@@ -262,26 +269,42 @@ onUnmounted(() => {
       muted
     />
     <div class="marke">
-      <!-- 手柄状态 -->
-      <Icon
-        name="gemePad"
-        :size="30"
-        :color="contrlState ? '#00CED1' : 'rgba(0, 0, 0, 0.3)'"
-      />
-      <!-- 音频状态 -->
-      <Record
-        class="marke-audio"
-        :audio-state="audioState"
-        @callBack="sendAudio"
-      />
-      <!-- 喇叭状态 -->
-      <Icon
-        name="audio"
-        :size="25"
-        :color="contrlState ? '#00CED1' : 'rgba(0, 0, 0, 0.3)'"
-      />
-      <!-- 电量状态 -->
-      <Battery :quantity="30" />
+      <div class="marke-left">
+        <!-- 手柄状态 -->
+        <Icon
+          name="gemePad"
+          :size="30"
+          :color="contrlState ? '#00CED1' : 'rgba(0, 0, 0, 0.3)'"
+        />
+        <!-- 音频状态 -->
+        <Record
+          class="marke-audio"
+          :audio-state="audioState"
+          @callBack="sendAudio"
+        />
+        <!-- 喇叭状态 -->
+        <Icon
+          name="audio"
+          :size="25"
+          :color="contrlState ? '#00CED1' : 'rgba(0, 0, 0, 0.3)'"
+        />
+        <!-- 电量状态 -->
+        <Battery :quantity="30" />
+      </div>
+      <div class="marke-right">
+        <Icon
+          name="min"
+          :size="23"
+          color="#fff"
+          @click="titleEvent('minWin')"
+        />
+        <Icon
+          name="close"
+          :size="23"
+          color="#fff"
+          @click="titleEvent('closeWin')"
+        />
+      </div>
     </div>
     <!-- 码数 -->
     <div class="gauge">
@@ -310,16 +333,39 @@ video {
   top: 0;
   left: 0;
   width: 100%;
-  padding: 0.05rem 0;
+  height: 50px;
   z-index: 1;
   background: #666666;
   display: flex;
   align-items: center;
-  justify-content: center;
+  justify-content: space-between;
   overflow: hidden;
+  border-top-left-radius: 20px;
+  border-top-right-radius: 20px;
 
-  &>* {
-    margin: 0 0.18rem;
+  &>div {
+    display: flex;
+    align-items: center;
+  }
+
+  &-left {
+    justify-content: center;
+    flex: 1;
+    -webkit-app-region: drag;
+
+    &>* {
+      margin: 0 0.18rem;
+    }
+  }
+
+  &-right {
+    display: flex;
+    align-items: center;
+    margin-right: 15px;
+
+    &>*:last-child {
+      margin-left: 10px;
+    }
   }
 }