perf: 💄 Optimized operation button layout

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 {

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
 

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>

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>

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()
 }

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"
   >

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) {

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>