一个简单的Vue组件，封装了常见的ADB工具类操作，并结合ElementUI实现可视化操作界面，代码中含有中文注释

一个简单的Vue组件，封装了常见的ADB工具类操作，并结合ElementUI实现可视化操作界面。代码中含有中文注释：

<template>
  <div class="adb-tools">
    <el-row :gutter="20">
      <el-col :span="8">
        <h3>设备列表</h3>
        <el-select v-model="selectedDevice" placeholder="请选择设备" filterable>
          <el-option v-for="device in devices" :key="device.serial" :label="device.name" :value="device.serial"></el-option>
        </el-select>
        <el-button @click="refreshDevices">刷新设备</el-button>
      </el-col>
      <el-col :span="16">
        <h3>文件传输</h3>
        <el-upload
          ref="adbUpload"
          :action="'/api/upload?serial=' + selectedDevice"
          :on-success="handleUploadSuccess"
          :before-remove="beforeUploadRemove"
          list-type="text"
          :file-list="uploadFiles">
          <el-button slot="trigger">选择文件</el-button>
        </el-upload>
        <el-table :data="fileList" style="margin-top: 10px;">
          <el-table-column label="文件名" prop="name"></el-table-column>
          <el-table-column label="大小（字节）" prop="size"></el-table-column>
          <el-table-column label="操作">
            <template #default="{ row }">
              <a :href="row.path" target="_blank">下载</a>
              <el-divider direction="vertical"></el-divider>
              <el-link @click.prevent="deleteFile(row.path)">删除</el-link>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      devices: [],
      selectedDevice: null,
      fileList: [],
      uploadFiles: []
    }
  },
  mounted() {
    // 初始化设备列表
    this.refreshDevices()
  },
  methods: {
    refreshDevices() {
      // 刷新设备列表
      axios.get('/api/devices').then(res => {
        this.devices = res.data.devices
        if (this.devices.length > 0) {
          this.selectedDevice = this.devices[0].serial
        }
      })
    },
    handleUploadSuccess(response, file, fileList) {
      // 文件上传成功后更新文件列表
      let fileInfo = response.fileInfo
      this.fileList.push(fileInfo)
    },
    beforeUploadRemove(file, fileList) {
      // 删除上传文件前的处理逻辑
      this.deleteFile(file.path, false)
      return true
    },
    deleteFile(path, refreshList = true) {
      // 删除指定路径下的文件
      axios.post('/api/delete', { serial: this.selectedDevice, path }).then(res => {
        if (res.data.success && refreshList) {
          this.refreshFileList()
        }
      })
    },
    refreshFileList() {
      // 刷新当前选中设备的文件列表
      axios.get(`/api/list?serial=${this.selectedDevice}`).then(res => {
        this.fileList = res.data.fileList
      })
    }
  }
}
</script>

<style scoped>

.adb-tools {
  margin: 20px;
}

</style>

这个组件实现了ADB工具常见的文件传输操作，包括设备列表展示、设备切换、文件上传、文件下载和文件删除等功能。其中，通过封装 axios 库来发送异步请求，以获取设备列表、上传/下载/删除文件等操作的结果。同时，服务器端也需要相应的接口支持。在组件中，需要调用以下API：

• /api/devices：获取已连接设备列表；
• /api/upload：向指定设备上传文件；
• /api/delete：从指定设备中删除文件；
• /api/list：获取指定设备中所有文件的列表。

在使用该组件之前，需要先在服务端运行相应的ADB命令，启动ADB服务，确保可以正常连接到相关设备。