perf: ♻️ Optimize design and code

.eslintignore

@@ -1,5 +1,6 @@
 .github
 .gitignore
+.vscode
 node_modules
 dist
 dist-electron

.eslintrc.js

@@ -21,5 +21,6 @@ module.exports = {
     'n/prefer-global/process': 'off',
 
     '@typescript-eslint/no-invalid-this': 'off',
+    '@typescript-eslint/ban-ts-comment': 'off',
   },
 }

.vscode/settings.json

@@ -34,12 +34,6 @@
   "i18n-ally.keystyle": "nested",
   "i18n-ally.extract.ignored": [
     "Switch",
-    "${item.id}（${item.$name}${\r\n          item.$remark ? `，${item.$remark}` : ''\r\n        }）",
-    "，${item.$remark}",
-    "${row.$remark ? `${row.$remark}-` : ''}${\r\n        row.$name\r\n      }-${this.$replaceIP(row.id)}-recording-${dayjs().format(\r\n        'YYYY-MM-DD-HH-mm-ss',\r\n      )}.${recordFormat}",
-    "--serial=${row.id} --window-title=${\r\n          row.$remark ? `${row.$remark}-` : ''\r\n        }${row.$name}-${\r\n          row.id\r\n        }-🎥录制中... --record=${savePath} ${this.scrcpyArgs(row.id)}",
-    "--serial=${row.id} --window-title=${\r\n            row.$remark ? `${row.$remark}-` : ''\r\n          }${row.$name}-${row.id} ${this.scrcpyArgs(row.id)}",
-    "${device.$remark ? `${device.$remark}-` : ''}${\r\n        device.$name\r\n      }-${this.$replaceIP(device.id)}-screencap-${dayjs().format(\r\n        'YYYY-MM-DD-HH-mm-ss',\r\n      )}.png",
     "input keyevent KEYCODE_APP_SWITCH",
     "input keyevent KEYCODE_HOME",
     "input keyevent KEYCODE_BACK",
@@ -48,12 +42,6 @@
     "cmd statusbar expand-notifications",
     "input keyevent KEYCODE_POWER",
     "Crop",
-    "&",
-    "\r\n        {{\r\n          loading ",
-    "& percent\r\n            ? `${$t(\"about.update.progress\")}...（${percent.toFixed(1)}%）`\r\n            : $t(\"about.update\")\r\n        }}\r\n      ",
-    "\r\n      Supported by\r\n\r\n      ",
-    "Viarotel",
-    "\r\n\r\n      v{{ version }}\r\n    ",
     "pair ${this.formData.host}:${this.formData.port} ${this.formData.pair}",
     "${item.decoder} & ${item.encoder}",
     " & ",

src/components/Device/components/MirrorAction/index.vue

@@ -53,7 +53,8 @@ export default {
         this.loading = false
 
         await mirroring
-      } catch (error) {
+      }
+      catch (error) {
         console.warn(error)
         if (error.message) {
           this.$message.warning(error.message)

src/components/Device/components/MoreDropdown/components/Camera/index.vue

@@ -34,7 +34,7 @@ export default {
         {
           excludes: ['--video-source', '--mouse', '--keyboard'],
           isCamera: true,
-        }
+        },
       )}`
 
       try {
@@ -50,7 +50,8 @@ export default {
         this.loading = false
 
         await mirroring
-      } catch (error) {
+      }
+      catch (error) {
         console.warn(error)
 
         if (error.message) {

src/components/Device/components/MoreDropdown/components/Otg/index.vue

@@ -47,7 +47,8 @@ export default {
         this.loading = false
 
         await mirroring
-      } catch (error) {
+      }
+      catch (error) {
         console.warn(error)
 
         if (error.message) {

src/components/Device/components/MoreDropdown/components/Record/index.vue

@@ -52,7 +52,8 @@ export default {
         await recording
 
         this.onRecordSuccess(savePath)
-      } catch (error) {
+      }
+      catch (error) {
         console.warn(error)
 
         if (error.message) {
@@ -69,7 +70,7 @@ export default {
 
       const fileName = this.$store.device.getLabel(
         row,
-        ({ time }) => `record-${time}.${extension}`
+        ({ time }) => `record-${time}.${extension}`,
       )
 
       const joinValue = this.$path.join(basePath, fileName)
@@ -87,11 +88,12 @@ export default {
             cancelButtonText: this.$t('common.cancel'),
             closeOnClickModal: false,
             type: 'success',
-          }
+          },
         )
 
         await this.$electron.ipcRenderer.invoke('show-item-in-folder', savePath)
-      } catch (error) {
+      }
+      catch (error) {
         console.warn(error)
       }
     },

src/components/Device/components/TerminalAction/index.vue

@@ -1,6 +1,12 @@
 <template>
   <div class="">
-    <slot :show="show" />
+    <el-button plain @click="handleShow">
+      <template #icon>
+        <svg-icon name="command"></svg-icon>
+      </template>
+      {{ $t('device.terminal.name') }}
+    </el-button>
+
     <TerminalDialog ref="terminalDialog" />
   </div>
 </template>
@@ -13,7 +19,7 @@ export default {
     TerminalDialog,
   },
   methods: {
-    show() {
+    handleShow() {
       this.$refs.terminalDialog.show()
     },
   },

src/components/Device/components/Wireless/index.vue

@@ -10,7 +10,7 @@
       @select="onSelect"
     >
       <template #prepend>
-        {{ $t("device.wireless.name") }}
+        {{ $t('device.wireless.name') }}
       </template>
 
       <template #default="{ item }">
@@ -29,9 +29,11 @@
         </template>
       </template>
     </el-autocomplete>
+
     <div class="text-gray-500 text-sm">
       :
     </div>
+
     <el-input
       v-model.number="formData.port"
       type="number"
@@ -48,8 +50,9 @@
       :loading="loading"
       @click="handleConnect()"
     >
-      {{ $t("device.wireless.connect.name") }}
+      {{ $t('device.wireless.connect.name') }}
     </el-button>
+
     <PairDialog ref="pairDialog" @success="onPairSuccess" />
   </div>
 </template>

src/components/Device/index.vue

@@ -3,8 +3,11 @@
     <div class="flex items-center flex-none space-x-2 pt-1">
       <Wireless ref="wireless" :reload="getDeviceData" />
 
+      <div class="w-px h-7 !ml-4 !mr-2 bg-gray-200"></div>
+
       <el-button
         type="primary"
+        plain
         :icon="loading ? '' : 'Refresh'"
         :loading="loading"
         @click="handleRefresh"
@@ -12,30 +15,26 @@
         {{ $t('device.refresh.name') }}
       </el-button>
 
-      <el-button type="warning" icon="RefreshRight" @click="handleRestart">
+      <el-button
+        type="warning"
+        plain
+        icon="RefreshRight"
+        @click="handleRestart"
+      >
         {{ $t('device.restart.name') }}
       </el-button>
 
-      <el-button icon="View" @click="handleLog">
+      <el-button plain icon="View" @click="handleLog">
         {{ $t('device.log.name') }}
       </el-button>
 
-      <Terminal>
+      <TerminalAction />
-        <template #default="{ show }">
-          <el-button @click="show">
-            <template #icon>
-              <svg-icon name="command"></svg-icon>
-            </template>
-            {{ $t('device.terminal.name') }}
-          </el-button>
-        </template>
-      </Terminal>
     </div>
     <div class="pt-4 flex-1 h-0 overflow-hidden">
       <el-table
         ref="elTable"
         v-loading="loading"
-        :element-loading-text="loadingText"
+        :element-loading-text="$t('common.loading')"
         :data="deviceList"
         style="width: 100%"
         border
@@ -113,7 +112,7 @@
 import ControlBar from './components/ControlBar/index.vue'
 import Remark from './components/Remark/index.vue'
 import Wireless from './components/Wireless/index.vue'
-import Terminal from './components/Terminal/index.vue'
+import TerminalAction from './components/TerminalAction/index.vue'
 import MirrorAction from './components/MirrorAction/index.vue'
 import MoreDropdown from './components/MoreDropdown/index.vue'
 import WirelessAction from './components/WirelessAction/index.vue'
@@ -125,7 +124,7 @@ export default {
     Wireless,
     ControlBar,
     Remark,
-    Terminal,
+    TerminalAction,
     MirrorAction,
     MoreDropdown,
     WirelessAction,
@@ -133,7 +132,6 @@ export default {
   data() {
     return {
       loading: false,
-      loadingText: this.$t('device.list.loading'),
       deviceList: [],
     }
   },
@@ -237,7 +235,6 @@ export default {
         }
       }
       this.loading = false
-      this.loadingText = ''
     },
   },
 }

src/locales/languages/en_US.json

@@ -11,6 +11,7 @@
   "common.input.placeholder": "Please input",
   "common.success": "Operation successful",
   "common.progress": "Starting",
+  "common.loading": "Loading",
 
   "close.quit": "Quit",
   "close.quit.cancel": "Cancel quit",
@@ -19,7 +20,6 @@
   "close.remember": "Remember this choice?",
 
   "device.list": "Devices",
-  "device.list.loading": "Loading...",
   "device.list.empty": "No devices detected",
   "device.id": "Device ID",
   "device.name": "Device Name",

src/locales/languages/zh_CN.json

@@ -11,6 +11,7 @@
   "common.input.placeholder": "请填写",
   "common.success": "操作成功",
   "common.progress": "启动中",
+  "common.loading": "加载中",
 
   "close.quit": "退出",
   "close.quit.cancel": "取消退出",
@@ -19,7 +20,6 @@
   "close.remember": "是否记住选择？",
 
   "device.list": "设备列表",
-  "device.list.loading": "努力加载中...",
   "device.list.empty": "没有检测到设备",
   "device.id": "设备 ID",
   "device.name": "设备名称",

unocss.config.js

@@ -1,4 +1,4 @@
-import { presetWind, defineConfig } from 'unocss'
+import { defineConfig, presetWind } from 'unocss'
 import transformerDirectives from '@unocss/transformer-directives'
 import { presetShades } from '@viarotel-org/unocss-preset-shades'
 
@@ -7,12 +7,16 @@ const presetMain = presetWind()
 const presets = [presetMain, presetShades('#028d71')]
 
 export default defineConfig({
-  // @ts-ignore
+  // @ts-expect-error
   presets,
   transformers: [transformerDirectives()],
   theme: {
+    colors: {
+      // @ts-expect-error
+      gray: presetMain?.theme?.colors?.neutral,
+    },
     boxShadow: {
-      el: 'var(--el-box-shadow)',
+      'el': 'var(--el-box-shadow)',
       'el-light': 'var(--el-box-shadow-light)',
       'el-lighter': 'var(--el-box-shadow-lighter)',
       'el-dark': 'var(--el-box-shadow-dark)',