perf: ♻️ Supports retrieving a list of applications

package.json

@@ -53,6 +53,7 @@
     "husky": "9.0.11",
     "lodash-es": "4.17.21",
     "pinia": "2.1.7",
+    "pinyin-pro": "^3.26.0",
     "postcss": "8.4.38",
     "postcss-nested": "6.0.1",
     "postcss-scss": "4.0.9",

src/components/Device/components/ControlBar/ApplicationStart/index.vue

@@ -3,12 +3,16 @@
     :hide-on-click="false"
     :disabled="loading || floating"
     max-height="300px"
-    @mouseenter="getAppData"
+    trigger="click"
+    @visible-change="onVisibleChange"
   >
     <slot :loading :trigger="handleTrigger" />
 
     <template #dropdown>
       <el-dropdown-menu>
+        <el-dropdown-item command="search" @click.stop>
+          <el-input v-model="keyword" class="!w-[calc(100%+18px)] !-mx-[9px] !-mt-1" :placeholder="$t('common.search')" prefix-icon="Search"></el-input>
+        </el-dropdown-item>
         <el-dropdown-item
           v-for="item of options"
           :key="item.value"
@@ -27,6 +31,9 @@
 <script>
 import { openFloatControl } from '$/utils/device/index.js'
 
+import { pinyin } from 'pinyin-pro'
+import { sleep } from '$/utils'
+
 export default {
   props: {
     device: {
@@ -42,6 +49,7 @@ export default {
     return {
       loading: false,
       appList: [],
+      keyword: '',
     }
   },
   computed: {
@@ -58,8 +66,13 @@ export default {
         icon: 'HomeFilled',
       })
 
-      if (value[1]) {
+      value[0].divided = true
-        value[1].divided = true
+
+      if (this.keyword) {
+        return value.filter((item) => {
+          const pinyinLabel = pinyin(item.label, { toneType: 'none' })
+          return (item.label + pinyinLabel).includes(this.keyword)
+        })
       }
 
       return value
@@ -69,6 +82,12 @@ export default {
     this.getAppData()
   },
   methods: {
+    async onVisibleChange(val) {
+      if (!val) {
+        await sleep()
+        this.keyword = ''
+      }
+    },
     async getAppData() {
       const data = await window.scrcpy.getAppList(this.device.id)