Skip to content

Commit

Permalink
perf: 💄 Optimized operation button layout
Browse files Browse the repository at this point in the history
  • Loading branch information
viarotel committed Jul 23, 2024
1 parent 04a7608 commit 16f9535
Show file tree
Hide file tree
Showing 15 changed files with 118 additions and 54 deletions.
6 changes: 3 additions & 3 deletions src/App.vue
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
@tab-change="onTabChange"
>
<template #add-icon>
<AppSearch />
<Quick />
</template>
<el-tab-pane
v-for="(item, index) of tabsModel"
Expand All @@ -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'
Expand Down Expand Up @@ -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 {
Expand Down
37 changes: 7 additions & 30 deletions src/components/Device/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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>

Expand Down Expand Up @@ -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'
Expand All @@ -141,10 +127,9 @@ import { isIPWithPort, sleep } from '$/utils/index.js'
export default {
components: {
Wireless,
WirelessGroup,
ControlBar,
Remark,
TerminalAction,
MirrorAction,
MoreDropdown,
WirelessAction,
Expand Down Expand Up @@ -225,7 +210,7 @@ export default {
},
handleConnect(...args) {
this.$refs.wireless.connect(...args)
this.$refs.wirelessGroupRef.connect(...args)
},
handleRefresh() {
Expand Down Expand Up @@ -262,14 +247,6 @@ export default {
}
},
handleRestart() {
this.$electron.ipcRenderer.send('restart-app')
},
handleLog() {
this.$appLog.openInEditor()
},
async getDeviceData({ resetResolve = false } = {}) {
this.loading = true
Expand Down
13 changes: 13 additions & 0 deletions src/components/Quick/components/Log/index.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<template>
<div class="" @click="handleClick">
<slot />
</div>
</template>

<script setup>
function handleClick() {
window.appLog.openInEditor()
}
</script>

<style lang="postcss"></style>
13 changes: 13 additions & 0 deletions src/components/Quick/components/Restart/index.vue
Original file line number Diff line number Diff line change
@@ -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>
Original file line number Diff line number Diff line change
@@ -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>

Expand All @@ -33,6 +23,8 @@ function openSearchModal() {
window.findInPageModal.open({ isDark: themeStore.isDark })
}
const handleClick = openSearchModal
function closeSearchModal() {
window.findInPageModal.close()
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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"
>
Expand Down
Original file line number Diff line number Diff line change
@@ -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>
Expand All @@ -19,7 +14,7 @@ export default {
TerminalDialog,
},
methods: {
handleShow() {
handleClick() {
this.$refs.terminalDialog.open()
},
invoke(...args) {
Expand Down
73 changes: 73 additions & 0 deletions src/components/Quick/index.vue
Original file line number Diff line number Diff line change
@@ -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>

0 comments on commit 16f9535

Please sign in to comment.