From 16f953538b819b9cfaad59e9c8f3eb9d32d0f5b1 Mon Sep 17 00:00:00 2001
From: viarotel <viarotel@qq.com>
Date: Tue, 23 Jul 2024 19:41:48 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=F0=9F=92=84=20Optimized=20operation=20?=
 =?UTF-8?q?button=20layout?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                                   |  6 +-
 .../PairDialog/index.vue                      |  0
 .../{Wireless => WirelessGroup}/index.vue     |  0
 src/components/Device/index.vue               | 37 ++--------
 src/components/Quick/components/Log/index.vue | 13 ++++
 .../Quick/components/Restart/index.vue        | 13 ++++
 .../{ => Quick/components}/Search/index.vue   | 16 +---
 .../TerminalDialog/composables/adb-async.js   |  0
 .../TerminalDialog/composables/adb.js         |  0
 .../TerminalDialog/composables/gnirehtet.js   |  0
 .../TerminalDialog/composables/helper.js      |  0
 .../TerminalDialog/composables/scrcpy.js      |  0
 .../components/TerminalDialog/index.vue       |  3 +-
 .../components/Terminal}/index.vue            | 11 +--
 src/components/Quick/index.vue                | 73 +++++++++++++++++++
 15 files changed, 118 insertions(+), 54 deletions(-)
 rename src/components/Device/components/{Wireless => WirelessGroup}/PairDialog/index.vue (100%)
 rename src/components/Device/components/{Wireless => WirelessGroup}/index.vue (100%)
 create mode 100644 src/components/Quick/components/Log/index.vue
 create mode 100644 src/components/Quick/components/Restart/index.vue
 rename src/components/{ => Quick/components}/Search/index.vue (69%)
 rename src/components/{Device/components/TerminalAction => Quick/components/Terminal}/components/TerminalDialog/composables/adb-async.js (100%)
 rename src/components/{Device/components/TerminalAction => Quick/components/Terminal}/components/TerminalDialog/composables/adb.js (100%)
 rename src/components/{Device/components/TerminalAction => Quick/components/Terminal}/components/TerminalDialog/composables/gnirehtet.js (100%)
 rename src/components/{Device/components/TerminalAction => Quick/components/Terminal}/components/TerminalDialog/composables/helper.js (100%)
 rename src/components/{Device/components/TerminalAction => Quick/components/Terminal}/components/TerminalDialog/composables/scrcpy.js (100%)
 rename src/components/{Device/components/TerminalAction => Quick/components/Terminal}/components/TerminalDialog/index.vue (99%)
 rename src/components/{Device/components/TerminalAction => Quick/components/Terminal}/index.vue (63%)
 create mode 100644 src/components/Quick/index.vue

diff --git a/src/App.vue b/src/App.vue
index 9ee73273..2b0921a4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -8,7 +8,7 @@
         @tab-change="onTabChange"
       >
         <template #add-icon>
-          <AppSearch />
+          <Quick />
         </template>
         <el-tab-pane
           v-for="(item, index) of tabsModel"
@@ -34,7 +34,7 @@ import { ElMessageBox } from 'element-plus'
 import Device from './components/Device/index.vue'
 import Preference from './components/Preference/index.vue'
 import About from './components/About/index.vue'
-import AppSearch from './components/Search/index.vue'
+import Quick from './components/Quick/index.vue'
 
 import { i18n } from '$/locales/index.js'
 import localeModel from '$/plugins/element-plus/locale.js'
@@ -150,7 +150,7 @@ defineExpose({
     @apply !mb-3;
   }
   .el-tabs__new-tab {
-    @apply !absolute !inset-y-0 !right-0 !border-none;
+    @apply !absolute !inset-y-0 !right-0 !border-none !w-auto;
   }
 
   .el-tabs__nav-wrap:after {
diff --git a/src/components/Device/components/Wireless/PairDialog/index.vue b/src/components/Device/components/WirelessGroup/PairDialog/index.vue
similarity index 100%
rename from src/components/Device/components/Wireless/PairDialog/index.vue
rename to src/components/Device/components/WirelessGroup/PairDialog/index.vue
diff --git a/src/components/Device/components/Wireless/index.vue b/src/components/Device/components/WirelessGroup/index.vue
similarity index 100%
rename from src/components/Device/components/Wireless/index.vue
rename to src/components/Device/components/WirelessGroup/index.vue
diff --git a/src/components/Device/index.vue b/src/components/Device/index.vue
index 66d65730..b6862467 100644
--- a/src/components/Device/index.vue
+++ b/src/components/Device/index.vue
@@ -2,10 +2,12 @@
   <div class="h-full flex flex-col">
     <div class="flex-none flex items-center py-1 overflow-x-auto">
       <div class="flex-none">
-        <Wireless ref="wireless" :reload="getDeviceData" />
+        <WirelessGroup ref="wirelessGroupRef" :reload="getDeviceData" />
       </div>
 
-      <div class="flex-1 w-0 flex items-center justify-end space-x-2">
+      <div class="w-px h-7 !mx-4 bg-gray-200 flex-none"></div>
+
+      <div class="flex-1 w-0 space-x-2">
         <el-button
           type="primary"
           plain
@@ -15,21 +17,6 @@
         >
           {{ $t('device.refresh.name') }}
         </el-button>
-
-        <el-button
-          type="warning"
-          plain
-          icon="RefreshRight"
-          @click="handleRestart"
-        >
-          {{ $t('device.restart.name') }}
-        </el-button>
-
-        <el-button plain icon="View" @click="handleLog">
-          {{ $t('device.log.name') }}
-        </el-button>
-
-        <TerminalAction ref="terminalActionRef" />
       </div>
     </div>
 
@@ -130,8 +117,7 @@
 <script>
 import ControlBar from './components/ControlBar/index.vue'
 import Remark from './components/Remark/index.vue'
-import Wireless from './components/Wireless/index.vue'
-import TerminalAction from './components/TerminalAction/index.vue'
+import WirelessGroup from './components/WirelessGroup/index.vue'
 import MirrorAction from './components/MirrorAction/index.vue'
 import MoreDropdown from './components/MoreDropdown/index.vue'
 import WirelessAction from './components/WirelessAction/index.vue'
@@ -141,10 +127,9 @@ import { isIPWithPort, sleep } from '$/utils/index.js'
 
 export default {
   components: {
-    Wireless,
+    WirelessGroup,
     ControlBar,
     Remark,
-    TerminalAction,
     MirrorAction,
     MoreDropdown,
     WirelessAction,
@@ -225,7 +210,7 @@ export default {
     },
 
     handleConnect(...args) {
-      this.$refs.wireless.connect(...args)
+      this.$refs.wirelessGroupRef.connect(...args)
     },
 
     handleRefresh() {
@@ -262,14 +247,6 @@ export default {
       }
     },
 
-    handleRestart() {
-      this.$electron.ipcRenderer.send('restart-app')
-    },
-
-    handleLog() {
-      this.$appLog.openInEditor()
-    },
-
     async getDeviceData({ resetResolve = false } = {}) {
       this.loading = true
 
diff --git a/src/components/Quick/components/Log/index.vue b/src/components/Quick/components/Log/index.vue
new file mode 100644
index 00000000..73ea26d4
--- /dev/null
+++ b/src/components/Quick/components/Log/index.vue
@@ -0,0 +1,13 @@
+<template>
+  <div class="" @click="handleClick">
+    <slot />
+  </div>
+</template>
+
+<script setup>
+function handleClick() {
+  window.appLog.openInEditor()
+}
+</script>
+
+<style lang="postcss"></style>
diff --git a/src/components/Quick/components/Restart/index.vue b/src/components/Quick/components/Restart/index.vue
new file mode 100644
index 00000000..48a36927
--- /dev/null
+++ b/src/components/Quick/components/Restart/index.vue
@@ -0,0 +1,13 @@
+<template>
+  <div class="" @click="handleClick">
+    <slot />
+  </div>
+</template>
+
+<script setup>
+function handleClick() {
+  window.electron.ipcRenderer.send('restart-app')
+}
+</script>
+
+<style lang="postcss"></style>
diff --git a/src/components/Search/index.vue b/src/components/Quick/components/Search/index.vue
similarity index 69%
rename from src/components/Search/index.vue
rename to src/components/Quick/components/Search/index.vue
index 9d3376cc..d8a85698 100644
--- a/src/components/Search/index.vue
+++ b/src/components/Quick/components/Search/index.vue
@@ -1,16 +1,6 @@
 <template>
-  <div class="relative z-10">
-    <el-button
-      class=""
-      circle
-      size="small"
-      :title="`${$t('common.search')}（${shortcutTip}）`"
-      @click="openSearchModal"
-    >
-      <el-icon size="12">
-        <ElIconSearch />
-      </el-icon>
-    </el-button>
+  <div class="" @click="handleClick">
+    <slot />
   </div>
 </template>
 
@@ -33,6 +23,8 @@ function openSearchModal() {
   window.findInPageModal.open({ isDark: themeStore.isDark })
 }
 
+const handleClick = openSearchModal
+
 function closeSearchModal() {
   window.findInPageModal.close()
 }
diff --git a/src/components/Device/components/TerminalAction/components/TerminalDialog/composables/adb-async.js b/src/components/Quick/components/Terminal/components/TerminalDialog/composables/adb-async.js
similarity index 100%
rename from src/components/Device/components/TerminalAction/components/TerminalDialog/composables/adb-async.js
rename to src/components/Quick/components/Terminal/components/TerminalDialog/composables/adb-async.js
diff --git a/src/components/Device/components/TerminalAction/components/TerminalDialog/composables/adb.js b/src/components/Quick/components/Terminal/components/TerminalDialog/composables/adb.js
similarity index 100%
rename from src/components/Device/components/TerminalAction/components/TerminalDialog/composables/adb.js
rename to src/components/Quick/components/Terminal/components/TerminalDialog/composables/adb.js
diff --git a/src/components/Device/components/TerminalAction/components/TerminalDialog/composables/gnirehtet.js b/src/components/Quick/components/Terminal/components/TerminalDialog/composables/gnirehtet.js
similarity index 100%
rename from src/components/Device/components/TerminalAction/components/TerminalDialog/composables/gnirehtet.js
rename to src/components/Quick/components/Terminal/components/TerminalDialog/composables/gnirehtet.js
diff --git a/src/components/Device/components/TerminalAction/components/TerminalDialog/composables/helper.js b/src/components/Quick/components/Terminal/components/TerminalDialog/composables/helper.js
similarity index 100%
rename from src/components/Device/components/TerminalAction/components/TerminalDialog/composables/helper.js
rename to src/components/Quick/components/Terminal/components/TerminalDialog/composables/helper.js
diff --git a/src/components/Device/components/TerminalAction/components/TerminalDialog/composables/scrcpy.js b/src/components/Quick/components/Terminal/components/TerminalDialog/composables/scrcpy.js
similarity index 100%
rename from src/components/Device/components/TerminalAction/components/TerminalDialog/composables/scrcpy.js
rename to src/components/Quick/components/Terminal/components/TerminalDialog/composables/scrcpy.js
diff --git a/src/components/Device/components/TerminalAction/components/TerminalDialog/index.vue b/src/components/Quick/components/Terminal/components/TerminalDialog/index.vue
similarity index 99%
rename from src/components/Device/components/TerminalAction/components/TerminalDialog/index.vue
rename to src/components/Quick/components/Terminal/components/TerminalDialog/index.vue
index abb85c0a..9921096c 100644
--- a/src/components/Device/components/TerminalAction/components/TerminalDialog/index.vue
+++ b/src/components/Quick/components/Terminal/components/TerminalDialog/index.vue
@@ -4,7 +4,8 @@
     width="80%"
     :close-on-click-modal="false"
     :close-on-press-escape="true"
-    :destroy-on-close="true"
+    destroy-on-close
+    append-to-body
     class="overflow-hidden !rounded-md el-dialog-headless dark:border dark:border-gray-700"
     @closed="onClosed"
   >
diff --git a/src/components/Device/components/TerminalAction/index.vue b/src/components/Quick/components/Terminal/index.vue
similarity index 63%
rename from src/components/Device/components/TerminalAction/index.vue
rename to src/components/Quick/components/Terminal/index.vue
index 819d1ab8..f84dcb6b 100644
--- a/src/components/Device/components/TerminalAction/index.vue
+++ b/src/components/Quick/components/Terminal/index.vue
@@ -1,11 +1,6 @@
 <template>
-  <div class="">
-    <el-button plain @click="handleShow">
-      <template #icon>
-        <svg-icon name="command"></svg-icon>
-      </template>
-      {{ $t('device.terminal.name') }}
-    </el-button>
+  <div class="" @click="handleClick">
+    <slot />
 
     <TerminalDialog ref="terminalDialog" />
   </div>
@@ -19,7 +14,7 @@ export default {
     TerminalDialog,
   },
   methods: {
-    handleShow() {
+    handleClick() {
       this.$refs.terminalDialog.open()
     },
     invoke(...args) {
diff --git a/src/components/Quick/index.vue b/src/components/Quick/index.vue
new file mode 100644
index 00000000..d465b29e
--- /dev/null
+++ b/src/components/Quick/index.vue
@@ -0,0 +1,73 @@
+<template>
+  <div class="flex items-center space-x-4 relative z-10">
+    <component
+      :is="item.component || 'div'"
+      v-for="(item, index) in actionModel"
+      :key="index"
+      class="flex-none"
+      v-bind="{
+        ...(item.command
+          ? {
+            onClick: () => handleCommand(item),
+          }
+          : {}),
+      }"
+    >
+      <template #default="{ loading = false } = {}">
+        <el-button
+          circle
+          size="small"
+          :title="$t(item.tips || item.label)"
+          :loading="loading"
+        >
+          <template #icon>
+            <svg-icon
+              v-if="item.svgIcon"
+              :name="item.svgIcon"
+              :class="item.iconClass"
+            ></svg-icon>
+            <el-icon v-else-if="item.elIcon" :class="item.iconClass">
+              <component :is="item.elIcon" />
+            </el-icon>
+          </template>
+        </el-button>
+      </template>
+    </component>
+  </div>
+</template>
+
+<script setup>
+import Search from './components/Search/index.vue'
+import Restart from './components/Restart/index.vue'
+import Log from './components/Log/index.vue'
+import Terminal from './components/Terminal/index.vue'
+
+const props = defineProps({})
+
+const actionModel = [
+  {
+    label: 'device.terminal.name',
+    svgIcon: 'command',
+    component: Terminal,
+  },
+  {
+    label: 'device.log.name',
+    elIcon: 'View',
+    component: Log,
+  },
+  {
+    label: 'device.restart.name',
+    elIcon: 'RefreshRight',
+    component: Restart,
+  },
+  {
+    label: 'common.search',
+    elIcon: 'Search',
+    component: Search,
+  },
+]
+
+function handleCommand() {}
+</script>
+
+<style></style>