From 3a7244371d63dfb87024f0345ac9091125abd69e Mon Sep 17 00:00:00 2001
From: viarotel <viarotel@qq.com>
Date: Fri, 3 Nov 2023 14:48:54 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E2=99=BB=EF=B8=8F=20Optimize=20dir?=
 =?UTF-8?q?ectory=20structure?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .vscode/settings.json                         |   3 +-
 .../ControlBar/AppInstall/index.vue           |   2 +-
 .../ControlBar/Gnirehtet/index.vue            |   2 +-
 .../ControlBar/Screenshot/index.vue           |   2 +-
 .../{ => components}/ControlBar/index.vue     |   0
 .../LoadingIcon/index.vue                     |   0
 .../Device/{ => components}/Remark/index.vue  |   0
 .../Wireless/PairDialog/index.vue             |   0
 .../{ => components}/Wireless/index.vue       |   0
 src/components/Device/index.bak.vue           | 533 ------------------
 src/components/Device/index.vue               |   6 +-
 src/components/Preference/index.vue           |   2 +-
 12 files changed, 9 insertions(+), 541 deletions(-)
 rename src/components/Device/{ => components}/ControlBar/AppInstall/index.vue (97%)
 rename src/components/Device/{ => components}/ControlBar/Gnirehtet/index.vue (93%)
 rename src/components/Device/{ => components}/ControlBar/Screenshot/index.vue (96%)
 rename src/components/Device/{ => components}/ControlBar/index.vue (100%)
 rename src/components/Device/{ControlBar => components}/LoadingIcon/index.vue (100%)
 rename src/components/Device/{ => components}/Remark/index.vue (100%)
 rename src/components/Device/{ => components}/Wireless/PairDialog/index.vue (100%)
 rename src/components/Device/{ => components}/Wireless/index.vue (100%)
 delete mode 100644 src/components/Device/index.bak.vue

diff --git a/.vscode/settings.json b/.vscode/settings.json
index f105df4..11c6c4b 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -56,6 +56,7 @@
     "\r\n\r\n      v{{ version }}\r\n    ",
     "pair ${this.formData.host}:${this.formData.port} ${this.formData.pair}",
     "${item.decoder} & ${item.encoder}",
-    " & "
+    " & ",
+    "${key}=${value}"
   ]
 }
diff --git a/src/components/Device/ControlBar/AppInstall/index.vue b/src/components/Device/components/ControlBar/AppInstall/index.vue
similarity index 97%
rename from src/components/Device/ControlBar/AppInstall/index.vue
rename to src/components/Device/components/ControlBar/AppInstall/index.vue
index ecd5222..644eaf5 100644
--- a/src/components/Device/ControlBar/AppInstall/index.vue
+++ b/src/components/Device/components/ControlBar/AppInstall/index.vue
@@ -5,7 +5,7 @@
 </template>
 
 <script>
-import LoadingIcon from '@/components/Device/ControlBar/LoadingIcon/index.vue'
+import LoadingIcon from '@/components/Device/components/LoadingIcon/index.vue'
 
 export default {
   props: {
diff --git a/src/components/Device/ControlBar/Gnirehtet/index.vue b/src/components/Device/components/ControlBar/Gnirehtet/index.vue
similarity index 93%
rename from src/components/Device/ControlBar/Gnirehtet/index.vue
rename to src/components/Device/components/ControlBar/Gnirehtet/index.vue
index ac377fd..e0387e3 100644
--- a/src/components/Device/ControlBar/Gnirehtet/index.vue
+++ b/src/components/Device/components/ControlBar/Gnirehtet/index.vue
@@ -5,7 +5,7 @@
 </template>
 
 <script>
-import LoadingIcon from '@/components/Device/ControlBar/LoadingIcon/index.vue'
+import LoadingIcon from '@/components/Device/components/LoadingIcon/index.vue'
 
 export default {
   props: {
diff --git a/src/components/Device/ControlBar/Screenshot/index.vue b/src/components/Device/components/ControlBar/Screenshot/index.vue
similarity index 96%
rename from src/components/Device/ControlBar/Screenshot/index.vue
rename to src/components/Device/components/ControlBar/Screenshot/index.vue
index ef84c62..c84a28c 100644
--- a/src/components/Device/ControlBar/Screenshot/index.vue
+++ b/src/components/Device/components/ControlBar/Screenshot/index.vue
@@ -6,7 +6,7 @@
 
 <script>
 import dayjs from 'dayjs'
-import LoadingIcon from '@/components/Device/ControlBar/LoadingIcon/index.vue'
+import LoadingIcon from '@/components/Device/components/LoadingIcon/index.vue'
 
 export default {
   props: {
diff --git a/src/components/Device/ControlBar/index.vue b/src/components/Device/components/ControlBar/index.vue
similarity index 100%
rename from src/components/Device/ControlBar/index.vue
rename to src/components/Device/components/ControlBar/index.vue
diff --git a/src/components/Device/ControlBar/LoadingIcon/index.vue b/src/components/Device/components/LoadingIcon/index.vue
similarity index 100%
rename from src/components/Device/ControlBar/LoadingIcon/index.vue
rename to src/components/Device/components/LoadingIcon/index.vue
diff --git a/src/components/Device/Remark/index.vue b/src/components/Device/components/Remark/index.vue
similarity index 100%
rename from src/components/Device/Remark/index.vue
rename to src/components/Device/components/Remark/index.vue
diff --git a/src/components/Device/Wireless/PairDialog/index.vue b/src/components/Device/components/Wireless/PairDialog/index.vue
similarity index 100%
rename from src/components/Device/Wireless/PairDialog/index.vue
rename to src/components/Device/components/Wireless/PairDialog/index.vue
diff --git a/src/components/Device/Wireless/index.vue b/src/components/Device/components/Wireless/index.vue
similarity index 100%
rename from src/components/Device/Wireless/index.vue
rename to src/components/Device/components/Wireless/index.vue
diff --git a/src/components/Device/index.bak.vue b/src/components/Device/index.bak.vue
deleted file mode 100644
index 857515f..0000000
--- a/src/components/Device/index.bak.vue
+++ /dev/null
@@ -1,533 +0,0 @@
-<template>
-  <div class="h-full flex flex-col">
-    <div class="flex items-center flex-none space-x-2">
-      <el-autocomplete
-        v-model="formData.host"
-        placeholder="192.168.0.1"
-        clearable
-        :fetch-suggestions="fetchSuggestions"
-        class="!w-86 flex-none"
-        value-key="host"
-        @select="onSelect"
-      >
-        <template #prepend>
-          {{ $t("device.wireless.name") }}
-        </template>
-      </el-autocomplete>
-      <div class="text-gray-500 text-sm">
-        :
-      </div>
-      <el-input
-        v-model.number="formData.port"
-        type="number"
-        placeholder="5555"
-        :min="0"
-        clearable
-        class="!w-32 flex-none"
-      >
-      </el-input>
-
-      <el-button
-        type="primary"
-        :icon="connectLoading ? '' : 'Connection'"
-        :loading="connectLoading"
-        @click="handleConnect"
-      >
-        {{ $t("device.wireless.connect.name") }}
-      </el-button>
-
-      <el-button
-        type="primary"
-        :icon="loading ? '' : 'Refresh'"
-        :loading="loading"
-        @click="handleRefresh"
-      >
-        {{ $t("device.refresh.name") }}
-      </el-button>
-
-      <el-button type="warning" icon="RefreshRight" @click="handleRestart">
-        {{ $t("device.restart.name") }}
-      </el-button>
-
-      <el-button icon="View" @click="handleLog">
-        {{ $t("device.log.name") }}
-      </el-button>
-    </div>
-    <div class="pt-4 flex-1 h-0 overflow-hidden">
-      <el-table
-        ref="elTable"
-        v-loading="loading"
-        :element-loading-text="loadingText"
-        :data="deviceList"
-        style="width: 100%"
-        border
-        height="100%"
-        row-key="id"
-      >
-        <template #empty>
-          <el-empty :description="$t('device.list.empty')" />
-        </template>
-        <el-table-column
-          prop="id"
-          :label="$t('device.id')"
-          show-overflow-tooltip
-          align="left"
-          width="200"
-        />
-        <el-table-column
-          :label="$t('device.name')"
-          show-overflow-tooltip
-          align="left"
-        >
-          <template #default="{ row }">
-            <div class="flex items-center">
-              <el-tooltip
-                v-if="row.$unauthorized"
-                :content="$t('device.permission.error')"
-                placement="top-start"
-              >
-                <el-icon class="mr-1 text-red-600 text-lg">
-                  <WarningFilled />
-                </el-icon>
-              </el-tooltip>
-
-              {{ row.$name }}
-
-              <div class="ml-2">
-                <Remark :device="row" class="" />
-              </div>
-
-              <el-tag v-if="row.$wifi" effect="light" class="ml-2">
-                WIFI
-              </el-tag>
-            </div>
-          </template>
-        </el-table-column>
-        <el-table-column
-          :label="$t('device.control.name')"
-          width="450"
-          align="left"
-        >
-          <template #default="{ row }">
-            <el-button
-              type="primary"
-              text
-              :loading="row.$loading"
-              :disabled="row.$unauthorized"
-              :icon="row.$loading ? '' : 'Monitor'"
-              @click="handleMirror(row)"
-            >
-              {{
-                row.$loading
-                  ? $t("device.mirror.progress")
-                  : $t("device.mirror.start")
-              }}
-            </el-button>
-
-            <el-button
-              type="primary"
-              text
-              :loading="row.$recordLoading"
-              :disabled="row.$unauthorized"
-              :icon="row.$recordLoading ? '' : 'VideoCamera'"
-              @click="handleRecord(row)"
-            >
-              {{
-                row.$recordLoading
-                  ? $t("device.record.progress")
-                  : $t("device.record.start")
-              }}
-            </el-button>
-
-            <el-button
-              v-if="!row.$wifi"
-              type="primary"
-              text
-              :disabled="
-                row.$unauthorized || row.$loading || row.$recordLoading
-              "
-              @click="handleWifi(row)"
-            >
-              <template #icon>
-                <svg-icon name="wifi"></svg-icon>
-              </template>
-              {{ $t("device.wireless.mode") }}
-            </el-button>
-
-            <el-button
-              v-if="row.$wifi"
-              type="danger"
-              text
-              :loading="row.$stopLoading"
-              :disabled="row.$unauthorized"
-              :icon="row.$stopLoading ? '' : 'CircleClose'"
-              @click="handleStop(row)"
-            >
-              {{
-                row.$stopLoading
-                  ? $t("device.wireless.disconnect.progress")
-                  : $t("device.wireless.disconnect.start")
-              }}
-            </el-button>
-          </template>
-        </el-table-column>
-        <el-table-column type="expand">
-          <template #header>
-            <el-icon class="" :title="$t('device.control.more')">
-              <Operation class="" />
-            </el-icon>
-          </template>
-          <template #default="{ row }">
-            <ControlBar :device="row" />
-          </template>
-        </el-table-column>
-      </el-table>
-    </div>
-    <PairDialog ref="pairDialog" @success="onPairSuccess" />
-  </div>
-</template>
-
-<script>
-import dayjs from 'dayjs'
-import PairDialog from './PairDialog/index.vue'
-import ControlBar from './ControlBar/index.vue'
-import Remark from './Remark/index.vue'
-import storage from '@/utils/storages'
-import { isIPWithPort, sleep } from '@/utils/index.js'
-
-export default {
-  components: {
-    PairDialog,
-    ControlBar,
-    Remark,
-  },
-  data() {
-    const adbCache = storage.get('adbCache') || {}
-    return {
-      loading: false,
-      loadingText: this.$t('device.list.loading'),
-      connectLoading: false,
-      deviceList: [],
-      formData: {
-        host: adbCache.host,
-        port: adbCache.port,
-      },
-      wirelessList: this.$appStore.get('history.wireless') || [],
-    }
-  },
-  computed: {},
-  async created() {
-    this.getDeviceData()
-
-    this.unAdbWatch = await this.$adb.watch(async (type, ret) => {
-      console.log('adb.watch.ret', ret)
-
-      if (ret && ret.id) {
-        this.getDeviceData()
-      }
-
-      if (type === 'add' && !isIPWithPort(ret.id) && ret.$host) {
-        this.formData = {
-          ...this.formData,
-          host: ret.$host,
-        }
-      }
-    })
-  },
-  beforeUnmount() {
-    this?.unAdbWatch()
-  },
-  methods: {
-    onSelect({ host, port }) {
-      // console.log('onSelect.value', value)
-
-      Object.assign(this.formData, {
-        host,
-        port,
-      })
-    },
-    fetchSuggestions(value, callback) {
-      // console.log('fetchSuggestions.value', value)
-
-      let results = []
-
-      if (value) {
-        results = this.wirelessList.filter(
-          item => item.host.toLowerCase().indexOf(value.toLowerCase()) === 0,
-        )
-      }
-      else {
-        results = this.wirelessList
-      }
-
-      callback(results)
-    },
-    preferenceData(...args) {
-      return this.$store.preference.getData(...args)
-    },
-    scrcpyArgs(...args) {
-      return this.$store.preference.getScrcpyArgs(...args)
-    },
-    handleRefresh() {
-      this.getDeviceData({ resetResolve: true })
-    },
-    async handleReset(depType = 'scrcpy') {
-      try {
-        await this.$confirm(
-          `
-          <div>${this.$t('device.reset.reasons[0]')}</div>
-          <div class="text-red-500">${this.$t('device.reset.reasons[1]')}</div>
-          `,
-          this.$t('device.reset.title'),
-          {
-            dangerouslyUseHTMLString: true,
-            confirmButtonText: this.$t('device.reset.confirm'),
-            cancelButtonText: this.$t('device.reset.cancel'),
-            closeOnClickModal: false,
-            type: 'warning',
-          },
-        )
-
-        this.$store.preference.resetDeps(depType)
-
-        this.$root.reRender('Preference')
-
-        this.$message.success(this.$t('device.reset.success'))
-      }
-      catch (error) {
-        if (error.message) {
-          console.warn(error.message)
-        }
-      }
-    },
-    onStdout() {},
-    toggleRowExpansion(...params) {
-      this.$refs.elTable.toggleRowExpansion(...params)
-    },
-    getRecordPath(row) {
-      const rowConfig = this.preferenceData(row.id)
-      const basePath = rowConfig.savePath
-
-      const fileName = `${row.$remark ? `${row.$remark}-` : ''}${
-        row.$name
-      }-${this.$replaceIP(row.id)}-recording-${dayjs().format(
-        'YYYY-MM-DD-HH-mm-ss',
-      )}`
-
-      const joinValue = this.$path.join(basePath, fileName)
-      const value = this.$path.normalize(joinValue)
-
-      return value
-    },
-    async handleRecord(row) {
-      row.$recordLoading = true
-
-      this.toggleRowExpansion(row, true)
-
-      const savePath = this.getRecordPath(row)
-
-      try {
-        await this.$scrcpy.record(row.id, {
-          title: `${row.$remark ? `${row.$remark}-` : ''}${row.$name}-${
-            row.id
-          }-🎥${this.$t('device.record.progress')}...`,
-          savePath,
-          args: this.scrcpyArgs(row.id, { isRecord: true }),
-          stdout: this.onStdout,
-        })
-
-        await this.$confirm(
-          this.$t('device.record.success.message'),
-          this.$t('device.record.success.title'),
-          {
-            confirmButtonText: this.$t('common.confirm'),
-            cancelButtonText: this.$t('common.cancel'),
-            closeOnClickModal: false,
-            type: 'success',
-          },
-        )
-
-        await this.$electron.ipcRenderer.invoke(
-          'show-item-in-folder',
-          savePath,
-        )
-      }
-      catch (error) {
-        if (error.message) {
-          this.$message.warning(error.message)
-        }
-      }
-      row.$recordLoading = false
-    },
-    async handleMirror(row) {
-      row.$loading = true
-
-      this.toggleRowExpansion(row, true)
-
-      try {
-        await this.$scrcpy.mirror(row.id, {
-          title: `${row.$remark ? `${row.$remark}-` : ''}${row.$name}-${
-            row.id
-          }`,
-          args: this.scrcpyArgs(row.id),
-          stdout: this.onStdout,
-        })
-      }
-      catch (error) {
-        if (error.message) {
-          this.$message.warning(error.message)
-        }
-        this.handleReset()
-      }
-      row.$loading = false
-    },
-    async handleWifi(row) {
-      try {
-        const host = await this.$adb.getDeviceIP(row.id)
-
-        if (!host) {
-          throw new Error(this.$t('device.wireless.mode.error'))
-        }
-
-        this.formData.host = host
-
-        const port = await this.$adb.tcpip(row.id, 5555)
-
-        this.formData.port = port
-
-        console.log('host:port', `${host}:${port}`)
-
-        await sleep()
-
-        this.handleConnect()
-      }
-      catch (error) {
-        console.warn(error.message)
-        if (error?.message || error?.cause?.message) {
-          this.$message.warning(error?.message || error?.cause?.message)
-        }
-      }
-    },
-    onPairSuccess() {
-      this.handleConnect()
-    },
-    handleRestart() {
-      this.$electron.ipcRenderer.send('restart-app')
-    },
-    handleLog() {
-      this.$appLog.openInEditor()
-    },
-    async handleConnect() {
-      if (!this.formData.host) {
-        this.$message.warning(
-          this.$t('device.wireless.connect.error.no-address'),
-        )
-        return false
-      }
-
-      this.connectLoading = true
-      try {
-        await this.$adb.connect(this.formData.host, this.formData.port || 5555)
-        this.$message.success(this.$t('device.wireless.connect.success'))
-
-        this.handleSave()
-      }
-      catch (error) {
-        this.handleError(error?.message || error?.cause?.message || error)
-      }
-      this.connectLoading = false
-    },
-    handleSave() {
-      const someValue = this.wirelessList.some(
-        item => item.host === this.formData.host,
-      )
-
-      if (someValue) {
-        return false
-      }
-
-      this.wirelessList.push({
-        host: this.formData.host,
-        port: this.formData.port,
-      })
-
-      this.$appStore.set('history.wireless', this.$toRaw(this.wirelessList))
-    },
-    async handleError(message) {
-      try {
-        await this.$confirm(
-          `
-        <div class="pb-4 text-sm text-red-500">${this.$t(
-          'device.wireless.connect.error.detail',
-        )}：${message}</div>
-        <div>${this.$t('device.wireless.connect.error.reasons[0]')}：</div>
-        <div>1. ${this.$t('device.wireless.connect.error.reasons[1]')} </div>
-        <div>2. ${this.$t('device.wireless.connect.error.reasons[2]')} </div>
-        <div>3. ${this.$t('device.wireless.connect.error.reasons[3]')} </div>
-        <div>4. ${this.$t('device.wireless.connect.error.reasons[4]')} </div>
-        <div>5. ${this.$t('device.wireless.connect.error.reasons[5]')} </div>
-        `,
-          this.$t('device.wireless.connect.error.title'),
-          {
-            dangerouslyUseHTMLString: true,
-            closeOnClickModal: false,
-            confirmButtonText: this.$t('device.wireless.pair'),
-            cancelButtonText: this.$t('common.cancel'),
-            type: 'warning',
-          },
-        )
-        this.$refs.pairDialog.show({ params: { ...this.formData } })
-      }
-      catch (error) {
-        console.warn(error.message)
-      }
-    },
-    async handleStop(row) {
-      row.$stopLoading = true
-      const [host, port] = row.id.split(':')
-      try {
-        await this.$adb.disconnect(host, port)
-        await sleep()
-        this.$message.success(this.$t('device.wireless.disconnect.success'))
-      }
-      catch (error) {
-        if (error.message)
-          this.$message.warning(error.message)
-      }
-      row.$stopLoading = false
-    },
-
-    async getDeviceData({ resetResolve = false } = {}) {
-      this.loading = true
-      await sleep(500)
-      try {
-        const data = await this.$store.device.getList()
-        this.deviceList
-          = data?.map(item => ({
-            ...item,
-            $loading: false,
-            $recordLoading: false,
-            $stopLoading: false,
-          })) || []
-
-        console.log('getDeviceData.data', this.deviceList)
-      }
-      catch (error) {
-        console.warn(error)
-        if (error?.message || error?.cause?.message) {
-          this.$message.warning(error?.message || error?.cause?.message)
-        }
-        this.deviceList = []
-
-        if (resetResolve) {
-          this.handleReset('adb')
-        }
-      }
-      this.loading = false
-      this.loadingText = ''
-    },
-  },
-}
-</script>
-
-<style></style>
diff --git a/src/components/Device/index.vue b/src/components/Device/index.vue
index ac32f5f..6c12265 100644
--- a/src/components/Device/index.vue
+++ b/src/components/Device/index.vue
@@ -155,9 +155,9 @@
 
 <script>
 import dayjs from 'dayjs'
-import ControlBar from './ControlBar/index.vue'
-import Remark from './Remark/index.vue'
-import Wireless from './Wireless/index.vue'
+import ControlBar from './components/ControlBar/index.vue'
+import Remark from './components/Remark/index.vue'
+import Wireless from './components/Wireless/index.vue'
 import { isIPWithPort, sleep } from '@/utils/index.js'
 
 export default {
diff --git a/src/components/Preference/index.vue b/src/components/Preference/index.vue
index e71b9dd..03dbfad 100644
--- a/src/components/Preference/index.vue
+++ b/src/components/Preference/index.vue
@@ -199,7 +199,7 @@ import PathInput from './components/PathInput/index.vue'
 import VideoCodecSelect from './components/VideoCodecSelect/index.vue'
 import AudioCodecSelect from './components/AudioCodecSelect/index.vue'
 import DisplaySelect from './components/DisplaySelect/index.vue'
-import LoadingIcon from '@/components/Device/ControlBar/LoadingIcon/index.vue'
+import LoadingIcon from '@/components/Device/components/LoadingIcon/index.vue'
 import { usePreferenceStore } from '@/store/index.js'
 
 export default {