perf: ✅ Support switching devices on the floating control bar

control/App.vue

@@ -37,7 +37,7 @@
       ></div>
 
       <div class="flex-1 w-0 overflow-hidden h-full">
-        <ControlBar class="!h-full" :device="deviceInfo" />
+        <ControlBar class="!h-full" :device="deviceInfo" floating />
       </div>
 
       <div

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

@@ -6,6 +6,7 @@
 
 <script>
 import { allSettledWrapper } from '$/utils'
+import { adaptiveMessage } from '$/utils/modal/index.js'
 
 export default {
   props: {
@@ -13,6 +14,10 @@ export default {
       type: Object,
       default: () => ({}),
     },
+    floating: {
+      type: Boolean,
+      default: () => false,
+    },
   },
   data() {
     return {}
@@ -41,18 +46,24 @@ export default {
           if (error.message) {
             const message
               = error.message?.match(/Error: (.*)/)?.[1] || error.message
-            this.$message.warning(message)
+
+            adaptiveMessage(message, { type: 'warning', system: this.floating })
           }
+
           return false
         }
       }
 
       let closeLoading = null
       if (!silent) {
-        closeLoading = this.$message.loading(
+        closeLoading = adaptiveMessage(
           this.$t('device.control.install.progress', {
             deviceName: this.$store.device.getLabel(device),
           }),
+          {
+            type: 'loading',
+            system: this.floating,
+          },
         ).close
       }
 
@@ -69,33 +80,44 @@ export default {
         return false
       }
 
-      closeLoading()
+      closeLoading?.()
 
       const totalCount = files.length
       const successCount = totalCount - failCount
 
       if (successCount) {
         if (totalCount > 1) {
-          this.$message.success(
+          adaptiveMessage(
             this.$t('device.control.install.success', {
               deviceName: this.$store.device.getLabel(device),
               totalCount,
               successCount,
               failCount,
             }),
+            {
+              type: 'success',
+              system: this.floating,
+            },
           )
         }
         else {
-          this.$message.success(
+          adaptiveMessage(
             this.$t('device.control.install.success.single', {
               deviceName: this.$store.device.getLabel(device),
             }),
+            {
+              type: 'success',
+              system: this.floating,
+            },
           )
         }
         return false
       }
 
-      this.$message.warning(this.$t('device.control.install.error'))
+      adaptiveMessage(this.$t('device.control.install.error'), {
+        type: 'warning',
+        system: this.floating,
+      })
     },
   },
 }

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

@@ -12,9 +12,15 @@ const props = defineProps({
     type: Object,
     default: () => ({}),
   },
+  floating: {
+    type: Boolean,
+    default: false,
+  },
 })
 
-const { loading, invoke: handleClick } = useScreenshotAction()
+const { loading, invoke: handleClick } = useScreenshotAction({
+  floating: props.floating,
+})
 </script>
 
 <style></style>

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

@@ -21,6 +21,7 @@
         class="flex-none"
         v-bind="{
           device,
+          floating,
           ...(item.command
             ? {
               onClick: () => handleShell(item),
@@ -94,36 +95,48 @@ export default {
       type: Object,
       default: () => ({}),
     },
+    floating: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
-    return {
-      controlModel: [
+    return {}
+  },
+  computed: {
+    controlModel() {
+      const value = [
         {
           label: 'device.control.switch',
           elIcon: 'Switch',
           command: 'input keyevent 187',
+          visibleList: ['floating'],
         },
         {
           label: 'device.control.home',
           svgIcon: 'home',
           command: 'input keyevent 3',
+          visibleList: ['floating'],
         },
         {
           label: 'device.control.return',
           elIcon: 'Back',
           command: 'input keyevent 4',
+          visibleList: ['floating'],
         },
         {
           label: 'device.control.notification',
           elIcon: 'Notification',
           command: 'cmd statusbar expand-notifications',
           tips: 'device.control.notification.tips',
+          visibleList: ['floating'],
         },
         {
           label: 'device.control.power',
           elIcon: 'SwitchButton',
           command: 'input keyevent 26',
           tips: 'device.control.power.tips',
+          visibleList: ['floating'],
         },
         {
           label: 'device.control.rotation.name',
@@ -139,16 +152,19 @@ export default {
           label: 'device.control.capture',
           elIcon: 'Crop',
           component: 'Screenshot',
+          visibleList: ['floating'],
         },
         {
           label: 'device.control.reboot',
           elIcon: 'RefreshLeft',
           command: 'reboot',
+          visibleList: ['floating'],
         },
         {
           label: 'device.control.install',
           svgIcon: 'install',
           component: 'Application',
+          visibleList: ['floating'],
         },
         {
           label: 'device.control.file.name',
@@ -179,10 +195,14 @@ export default {
           component: 'MirrorGroup',
           tips: 'device.control.mirror-group.tips',
         },
-      ],
-    }
+      ]
+
+      return value.filter(
+        item =>
+          !this.floating || (item.visibleList ?? []).includes('floating'),
+      )
+    },
   },
-  computed: {},
   methods: {
     handlePrev() {
       this.$refs.scrollableRef.scrollBackward()

src/composables/useScreenshotAction/index.js

@@ -1,10 +1,11 @@
 import { useDeviceStore, usePreferenceStore } from '$/store'
 
 import { allSettledWrapper } from '$/utils/index.js'
+import { adaptiveMessage } from '$/utils/modal/index.js'
 
 import { ElMessage } from 'element-plus'
 
-export function useScreenshotAction() {
+export function useScreenshotAction({ floating } = {}) {
   const deviceStore = useDeviceStore()
   const preferenceStore = usePreferenceStore()
 
@@ -23,7 +24,7 @@ export function useScreenshotAction() {
   async function singleInvoke(device, { silent = false } = {}) {
     let closeLoading
 
-    if (!silent) {
+    if (!silent && !floating) {
       closeLoading = ElMessage.loading(
         window.t('device.control.capture.progress', {
           deviceName: deviceStore.getLabel(device),
@@ -53,12 +54,15 @@ export function useScreenshotAction() {
       return false
     }
 
-    closeLoading()
+    closeLoading?.()
 
-    ElMessage.success(
-      `${window.t('device.control.capture.success.message.title')}: ${savePath}`,
-    )
+    const successMessage = `${window.t(
+      'device.control.capture.success.message.title',
+    )}: ${savePath}`
+
+    adaptiveMessage(successMessage, { type: 'success', system: floating })
   }
+
   async function multipleInvoke(devices) {
     loading.value = true
 

src/locales/languages/en-US.json

@@ -24,6 +24,9 @@
   "common.delete": "Delete",
   "common.name": "Name",
   "common.size": "Size",
+  "common.warning": "Warning",
+  "common.info": "Message",
+  "common.danger": "Error",
 
   "common.language.name": "Language",
   "common.language.placeholder": "Select language",

src/locales/languages/zh-CN.json

@@ -24,6 +24,9 @@
   "common.delete": "删除",
   "common.name": "名称",
   "common.size": "大小",
+  "common.warning": "警告",
+  "common.info": "消息",
+  "common.danger": "错误",
 
   "common.language.name": "语言",
   "common.language.placeholder": "选择你需要的语言",

src/locales/languages/zh-TW.json

@@ -24,6 +24,9 @@
   "common.delete": "刪除",
   "common.name": "名稱",
   "common.size": "大小",
+  "common.warning": "警告",
+  "common.info": "消息",
+  "common.danger": "錯誤",
 
   "common.language.name": "語言",
   "common.language.placeholder": "選擇你要的語言",

src/utils/modal/index.js

@@ -0,0 +1,17 @@
+import { ElMessage } from 'element-plus'
+import logoPath from '$electron/resources/build/logo.png'
+
+export function adaptiveMessage(content, { type, system } = {}) {
+  if (system) {
+    new Notification(window.t(`common.${type}`), {
+      icon: logoPath,
+      body: content,
+    })
+
+    return {
+      close: () => false,
+    }
+  }
+
+  return ElMessage[type](content)
+}