feat: 🚀 添加基本的无线连接功能

.eslintrc.cjs

@@ -1,15 +0,0 @@
-/* eslint-env node */
-require('@rushstack/eslint-patch/modern-module-resolution')
-
-module.exports = {
-  extends: [
-    'eslint:recommended',
-    'plugin:vue/vue3-recommended',
-    '@electron-toolkit',
-    '@vue/eslint-config-prettier',
-  ],
-  rules: {
-    'vue/require-default-prop': 'off',
-    'vue/multi-word-component-names': 'off',
-  },
-}

.eslintrc.js

@@ -1,3 +1,6 @@
+/* eslint-env node */
+require('@rushstack/eslint-patch/modern-module-resolution')
+
 module.exports = {
   extends: ['@electron-toolkit', '@viarotel-org'],
   rules: {

src/main/index.js

@@ -3,6 +3,8 @@ import { BrowserWindow, app, shell } from 'electron'
 import { electronApp, is, optimizer } from '@electron-toolkit/utils'
 import icon from '../../resources/icon.png?asset'
 
+import './ipc/index.js'
+
 function createWindow() {
   // Create the browser window.
   const mainWindow = new BrowserWindow({

src/main/ipc/index.js

@@ -0,0 +1,6 @@
+import { app, ipcMain } from 'electron'
+
+ipcMain.on('restart-app', () => {
+  app.relaunch()
+  app.quit()
+})

src/preload/index.js

@@ -22,11 +22,44 @@ addContext('adbkit', () => {
 
   const getDevices = async () => await client.listDevicesWithPaths()
   const shell = async (id, command) => await client.getDevice(id).shell(command)
-  const kill = async () => await client.kill()
+  const kill = async (...params) => await client.kill(...params)
+  const connect = async (...params) => await client.connect(...params)
+  const disconnect = async (...params) => await client.disconnect(...params)
+
+  const watch = async (callback) => {
+    const tracker = await client.trackDevices()
+    tracker.on('add', (device) => {
+      callback(device)
+    })
+
+    tracker.on('remove', (device) => {
+      callback(device)
+    })
+
+    tracker.on('end', (ret) => {
+      callback(ret)
+    })
+
+    tracker.on('error', (err) => {
+      callback(err)
+    })
+
+    const close = () => tracker.end()
+
+    return close
+  }
+
+  // window.addEventListener('beforeunload', () => {
+  //   kill()
+  // })
+
   return {
     getDevices,
     shell,
     kill,
+    connect,
+    disconnect,
+    watch,
   }
 })
 

src/renderer/src/App.vue

@@ -6,6 +6,7 @@
         :key="index"
         :label="item.label"
         :name="item.prop"
+        lazy
       >
         <component :is="item.prop" />
       </el-tab-pane>

src/renderer/src/components/Wired/index.vue

@@ -1,15 +1,18 @@
 <template>
-  <div class="">
-    <div class="flex">
-      <el-button type="primary" @click="handleFind">
+  <div class="h-full flex flex-col">
+    <div class="flex items-center flex-none">
+      <el-button type="primary" @click="getDeviceData">
         刷新设备
       </el-button>
-      <el-button type="warning" :loading="stopLoading" @click="handleReset">
-        {{ stopLoading ? '重置服务中' : '重置服务' }}
+      <el-button type="warning" @click="handleReset">
+        重启服务
       </el-button>
     </div>
-    <div class="pt-4">
-      <el-table v-loading="loading" :data="deviceList" style="width: 100%" border>
+    <div class="pt-4 flex-1 h-0 overflow-hidden">
+      <el-table v-loading="loading" :data="deviceList" style="width: 100%" border height="100%">
+        <template #empty>
+          <el-empty description="设备列表为空" />
+        </template>
         <el-table-column prop="id" label="设备 ID" />
         <el-table-column prop="name" label="设备名称">
           <template #default="{ row }">
@@ -24,7 +27,7 @@
             <span v-else class="">{{ row.name }}</span>
           </template>
         </el-table-column>
-        <el-table-column label="操作" width="200" align="center">
+        <el-table-column label="操作" width="300" align="center">
           <template #default="{ row }">
             <el-button type="primary" :loading="row.$loading" @click="handleStart(row)">
               {{ row.$loading ? '运行中' : '连接设备' }}
@@ -37,27 +40,34 @@
 </template>
 
 <script>
-import { sleep } from '@renderer/utils/index.js'
+import { isIPWithPort, sleep } from '@renderer/utils/index.js'
 
 export default {
   data() {
     return {
       loading: false,
-      stopLoading: false,
       deviceList: [],
     }
   },
   created() {
     this.getDeviceData()
+
+    this.$adb.watch(() => {
+      this.getDeviceData()
+    })
   },
   methods: {
+    handleReset() {
+      this.$electron.ipcRenderer.send('restart-app')
+    },
     async handleStart(row) {
       row.$loading = true
       try {
         await this.$scrcpy.shell(`-s ${row.id}`)
       }
       catch (error) {
-        this.$message.error(`${error.message}`)
+        if (error.message)
+          this.$message.warning(error.message)
       }
       row.$loading = false
     },
@@ -65,36 +75,24 @@ export default {
       this.loading = true
       await sleep(500)
       try {
-        const data = await this.$adb.getDevices().catch(e => console.warn(e))
-        console.log('getDeviceData.data', data)
-        this.deviceList = data.map(item => ({
-          ...item,
-          name: item.model ? item.model.split(':')[1] : '未授权设备',
-          $loading: false,
-          $unauthorized: item.type === 'unauthorized',
-        }))
+        const data = await this.$adb.getDevices()
+        this.deviceList = (data || [])
+          .filter(item => !isIPWithPort(item.id))
+          .map(item => ({
+            ...item,
+            name: item.model ? item.model.split(':')[1] : '未授权设备',
+            $loading: false,
+            $unauthorized: item.type === 'unauthorized',
+          }))
+        console.log('getDeviceData.data', this.deviceList)
       }
       catch (error) {
-        console.warn('error', error.message)
+        if (error.message)
+          this.$message.warning(error.message)
+        this.deviceList = []
       }
       this.loading = false
     },
-    handleFind() {
-      this.getDeviceData()
-    },
-    async handleReset() {
-      this.stopLoading = true
-      try {
-        await this.$adb.kill()
-        await sleep(2000)
-      }
-      catch (error) {
-        console.warn('error', error.message)
-      }
-      this.stopLoading = false
-      this.$message.success('重置服务状态成功')
-      this.handleFind()
-    },
   },
 }
 </script>

src/renderer/src/components/Wireless/index.vue

@@ -1,9 +1,152 @@
 <template>
-  <div class=""></div>
+  <div class="h-full flex flex-col">
+    <div class="flex items-center flex-none space-x-2">
+      <el-input v-model="formData.host" placeholder="192.168.0.1" class="w-72">
+        <template #prepend>
+          无线调试地址
+        </template>
+      </el-input>
+      <div class="text-gray-500 text-sm">
+        :
+      </div>
+      <el-input v-model.number="formData.port" type="number" placeholder="5555" class="w-24">
+      </el-input>
+
+      <el-button type="primary" :loading="connectLoading" @click="handleConnect">
+        开始连接
+      </el-button>
+      <el-button type="primary" :loading="loading" @click="getDeviceData">
+        刷新设备
+      </el-button>
+      <el-button type="warning" @click="handleReset">
+        重启服务
+      </el-button>
+    </div>
+    <div class="pt-4 flex-1 h-0 overflow-hidden">
+      <el-table v-loading="loading" :data="deviceList" style="width: 100%" border height="100%">
+        <template #empty>
+          <el-empty description="设备列表为空" />
+        </template>
+        <el-table-column prop="id" label="设备 ID" />
+        <el-table-column prop="name" label="设备名称">
+          <template #default="{ row }">
+            <div v-if="row.$unauthorized" class="flex items-center">
+              <el-tooltip content="请重新插拔设备并点击允许USB调试" placement="top-start">
+                <el-icon class="mr-1 text-red-600 text-lg">
+                  <WarningFilled />
+                </el-icon>
+              </el-tooltip>
+              设备未授权
+            </div>
+            <span v-else class="">{{ row.name }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="300" align="center">
+          <template #default="{ row }">
+            <el-button type="primary" :loading="row.$loading" @click="handleStart(row)">
+              {{ row.$loading ? '运行中' : '连接设备' }}
+            </el-button>
+            <el-button type="danger" :loading="row.$stopLoading" @click="handleStop(row)">
+              {{ row.$stopLoading ? '断开中' : '断开连接' }}
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+  </div>
 </template>
 
 <script>
-export default {}
+import { isIPWithPort, sleep } from '@renderer/utils/index.js'
+
+export default {
+  data() {
+    return {
+      loading: false,
+      connectLoading: false,
+      deviceList: [],
+      formData: {
+        host: '',
+        port: null,
+      },
+    }
+  },
+  created() {
+    this.getDeviceData()
+
+    this.$adb.watch(() => {
+      this.getDeviceData()
+    })
+  },
+  methods: {
+    handleReset() {
+      this.$electron.ipcRenderer.send('restart-app')
+    },
+    async handleConnect() {
+      if (!this.formData.host) {
+        this.$message.warning('无线调试地址不能为空')
+        return false
+      }
+      this.connectLoading = true
+      try {
+        await this.$adb.connect(this.formData.host, this.formData.port || 5555)
+        this.$message.success('连接设备成功')
+      }
+      catch (error) {
+        if (error.message)
+          this.$message.warning(error.message)
+      }
+      this.connectLoading = false
+    },
+    async handleStop(row) {
+      row.$stopLoading = true
+      const [host, port] = row.id.split(':')
+      try {
+        await this.$adb.disconnect(host, port)
+        await sleep()
+        this.$message.success('断开连接成功')
+      }
+      catch (error) {
+        if (error.message)
+          this.$message.warning(error.message)
+      }
+      row.$stopLoading = false
+    },
+    async handleStart(row) {
+      row.$loading = true
+      try {
+        await this.$scrcpy.shell(`--serial=${row.id}`)
+      }
+      catch (error) {
+        this.$message.warning(error.message)
+      }
+      row.$loading = false
+    },
+    async getDeviceData() {
+      this.loading = true
+      await sleep(500)
+      try {
+        const data = await this.$adb.getDevices()
+        this.deviceList = (data || [])
+          .filter(item => isIPWithPort(item.id))
+          .map(item => ({
+            ...item,
+            name: item.model ? item.model.split(':')[1] : '未授权设备',
+            $loading: false,
+            $stopLoading: false,
+            $unauthorized: item.type === 'unauthorized',
+          }))
+        console.log('getDeviceData.data', this.deviceList)
+      }
+      catch (error) {
+        if (error.message)
+          this.$message.warning(error.message)
+        this.deviceList = []
+      }
+      this.loading = false
+    },
+  },
+}
 </script>
 
 <style></style>

src/renderer/src/main.js

@@ -10,6 +10,7 @@ const app = createApp(App)
 
 app.use(plugins)
 
+app.config.globalProperties.$electron = window.electron
 app.config.globalProperties.$adb = window.adbkit()
 app.config.globalProperties.$scrcpy = window.scrcpy()
 

src/renderer/src/utils/index.js

@@ -7,3 +7,10 @@ export function sleep(time = 1000) {
     setTimeout(() => resolve(true), time)
   })
 }
+
+export function isIPWithPort(ip) {
+  const regex
+    = /^((25[0-5]|2[0-4]\d|1\d{2}|[1-9]\d|\d)\.){3}(25[0-5]|2[0-4]\d|1\d{2}|[1-9]\d|\d):([1-9]|[1-9]\d{1,3}|[1-6][0-5][0-5][0-3][0-5])$/
+
+  return regex.test(ip)
+}