feat: 🚀 添加音视频录制功能以及更多的高级选项

.github/workflows/release-assets.yml

@@ -21,7 +21,7 @@ jobs:
       - name: Install Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 18
 
       - name: Install Dependencies
         run: npm install

.github/workflows/release.yml

@@ -1,4 +1,4 @@
-name: release-please
+name: release
 
 on:
   push:

README.md

@@ -81,10 +81,11 @@
 
 1. 用户界面进行优化，制作合适的 Logo ✅
 2. 内置的软件更新功能 ✅
-3. 添加 macOS 及 linux 操作系统的支持 🚧
-4. 添加外部控制栏 🚧
-5. 支持语言国际化功能 🚧
-6. 添加对游戏的增强功能 如游戏键位映射 🚧
+3. 录制和保存音视频 ✅
+4. 添加 macOS 及 linux 操作系统的支持 🚧
+5. 添加外部控制栏 🚧
+6. 支持语言国际化功能 🚧
+7. 添加对游戏的增强功能 如游戏键位映射 🚧
 
 ## 常见问题
 

package.json

@@ -21,8 +21,12 @@
     "@electron-toolkit/preload": "^2.0.0",
     "@electron-toolkit/utils": "^2.0.0",
     "@viarotel-org/design": "^0.7.0",
+    "dayjs": "^1.11.10",
     "electron-updater": "^6.1.1",
-    "element-plus": "^2.3.14"
+    "element-plus": "^2.3.14",
+    "lodash-es": "^4.17.21",
+    "pinia": "^2.1.6",
+    "ufo": "^1.3.1"
   },
   "devDependencies": {
     "@electron-toolkit/eslint-config": "^1.0.1",

src/main/index.js

@@ -1,10 +1,13 @@
 import { join } from 'node:path'
+
 import { BrowserWindow, app, shell } from 'electron'
 import { electronApp, is, optimizer } from '@electron-toolkit/utils'
+
 import iconPath from '../../resources/icons/icon.png?asset'
 import winIconPath from '../../resources/icons/icon.ico?asset'
 import macIconPath from '../../resources/icons/icon.icns?asset'
-import ipcEvent from './ipc/index.js'
+
+import ipcManage from './ipcManage/index.js'
 
 function createWindow() {
   let icon = iconPath
@@ -46,7 +49,7 @@ function createWindow() {
     mainWindow.loadFile(join(__dirname, '../renderer/index.html'))
   }
 
-  ipcEvent(mainWindow)
+  ipcManage(mainWindow)
 }
 
 // This method will be called when Electron has finished

src/main/ipcManage/handles/index.js

@@ -0,0 +1,41 @@
+import { dialog, ipcMain, shell } from 'electron'
+
+export default () => {
+  ipcMain.handle('show-open-dialog', async (event, params) => {
+    // console.log('params', params)
+    try {
+      const res = await dialog.showOpenDialog(params)
+      // console.log('showOpenDialog.res', res)
+      if (res.canceled) {
+        return false
+      }
+      return res.filePaths
+    }
+    catch (error) {
+      console.warn(error?.message || error)
+      return false
+    }
+  })
+
+  ipcMain.handle('open-path', async (event, pathValue) => {
+    try {
+      await shell.openPath(pathValue)
+      return true
+    }
+    catch (error) {
+      console.warn(error?.message || error)
+      return false
+    }
+  })
+
+  ipcMain.handle('show-item-in-folder', async (event, filePath) => {
+    try {
+      await shell.showItemInFolder(filePath)
+      return true
+    }
+    catch (error) {
+      console.warn(error?.message || error)
+      return false
+    }
+  })
+}

src/main/ipc/index.js → src/main/ipcManage/index.js

@@ -1,10 +1,14 @@
 import { app, ipcMain } from 'electron'
-import updaterEvents from './updater/index.js'
+
+import updater from './updater/index.js'
+import handles from './handles/index.js'
 
 export default (mainWindow) => {
+  handles(mainWindow)
+  updater(mainWindow)
+
   ipcMain.on('restart-app', () => {
     app.relaunch()
     app.quit()
   })
-  updaterEvents(mainWindow)
 }

src/main/ipc/updater/index.js → src/main/ipcManage/updater/index.js

@@ -1,9 +1,8 @@
+import path from 'node:path'
 import { app, ipcMain } from 'electron'
 import { is } from '@electron-toolkit/utils'
 import { autoUpdater } from 'electron-updater'
 
-const path = require('node:path')
-
 export default (mainWindow) => {
   // dev-start, 这里是为了在本地做应用升级测试使用，正式环境请务必删除
   if (is.dev && process.env.ELECTRON_RENDERER_URL) {

src/preload/plugins/adbkit/index.js

@@ -1,8 +1,9 @@
+import util from 'node:util'
+import child_process from 'node:child_process'
 import { Adb } from '@devicefarmer/adbkit'
 import adbPath from '@resources/core/adb.exe?asset&asarUnpack'
 
-const util = require('node:util')
-const exec = util.promisify(require('node:child_process').exec)
+const exec = util.promisify(child_process.exec)
 
 let client = null
 

src/preload/plugins/index.js

@@ -1,9 +1,12 @@
+import path from 'node:path'
 import electron from './electron/index.js'
 import adbkit from './adbkit/index.js'
 import scrcpy from './scrcpy/index.js'
 
 export default {
   install(expose) {
+    expose('nodePath', path)
+
     expose('electron', electron())
     expose('adbkit', adbkit())
     expose('scrcpy', scrcpy())

src/preload/plugins/scrcpy/index.js

@@ -1,8 +1,9 @@
+import util from 'node:util'
+import child_process from 'node:child_process'
 import adbPath from '@resources/core/adb.exe?asset&asarUnpack'
 import scrcpyPath from '@resources/core/scrcpy.exe?asset&asarUnpack'
 
-const util = require('node:util')
-const exec = util.promisify(require('node:child_process').exec)
+const exec = util.promisify(child_process.exec)
 
 const shell = command =>
   exec(`${scrcpyPath} ${command}`, { env: { ...process.env, ADB: adbPath } })

src/renderer/src/App.vue

@@ -1,14 +1,21 @@
 <template>
   <div class="absolute inset-0 px-4 pb-4 h-full overflow-hidden">
-    <el-tabs v-model="activeTab" class="el-tabs-flex" @tab-click="handleClick">
+    <el-tabs v-model="activeTab" class="el-tabs-flex" @tab-change="onTabChange">
       <el-tab-pane
         v-for="(item, index) of tabsModel"
         :key="index"
         :label="item.label"
         :name="item.prop"
         lazy
       >
-        <component :is="item.prop" ref="component" />
+        <component
+          :is="item.prop"
+          :ref="item.prop"
+          :scrcpy-cache="scrcpyCache"
+          :get-scrcpy-cache="getScrcpyCache"
+          :set-scrcpy-cache="setScrcpyCache"
+          :get-scrcpy-map="getScrcpyMap"
+        />
       </el-tab-pane>
     </el-tabs>
   </div>
@@ -44,8 +51,12 @@ export default {
       activeTab: 'Devices',
     }
   },
-  mounted() {},
-  methods: {},
+  created() {
+    this.$store.scrcpy.init()
+  },
+  methods: {
+    onTabChange(prop) {},
+  },
 }
 </script>
 

src/renderer/src/components/AboutUs/index.vue

@@ -8,7 +8,7 @@
       <a class="hover:underline text-primary-500" :href="escrcpyURL" target="_blank">Scrcpy</a>
       显示和控制您的 Android 设备，由 Electron 驱动
     </div>
-    <div class="pt-16 pb-4">
+    <div class="pt-12 pb-4">
       <el-button :loading="loading" type="primary" size="large" @click="handleUpdate">
         {{ loading && percent ? `正在更新中...（${percent.toFixed(1)}%）` : '版本检测更新' }}
       </el-button>
@@ -41,6 +41,10 @@ export default {
     this.onUpdateError()
   },
   methods: {
+    handleUpdate() {
+      this.loading = true
+      this.$electron.ipcRenderer.send('check-for-update')
+    },
     onUpdateNotAvailable() {
       this.$electron.ipcRenderer.on('update-not-available', () => {
         this.loading = false
@@ -69,10 +73,6 @@ export default {
         }
       })
     },
-    handleUpdate() {
-      this.loading = true
-      this.$electron.ipcRenderer.send('check-for-update')
-    },
     onDownloadProgress() {
       this.$electron.ipcRenderer.on('download-progress', async (event, ret) => {
         console.log('ret', ret)