From 0de32407c75be9ae3aa8465b2648dfd2afcd8066 Mon Sep 17 00:00:00 2001
From: tiny-craft <137850705+tiny-craft@users.noreply.github.com>
Date: Wed, 6 Sep 2023 16:07:20 +0800
Subject: [PATCH] perf: cancel focus for all button components

---
 frontend/src/AppContent.vue                        |  6 +++++-
 frontend/src/components/common/IconButton.vue      |  4 ++--
 frontend/src/components/common/Toolbar.vue         | 14 --------------
 frontend/src/components/content/ContentPane.vue    |  2 +-
 .../src/components/content/ContentServerPane.vue   |  2 +-
 .../components/content_value/ContentToolbar.vue    |  8 +-------
 .../components/content_value/ContentValueHash.vue  |  2 +-
 .../components/content_value/ContentValueList.vue  |  2 +-
 .../components/content_value/ContentValueSet.vue   |  2 +-
 .../content_value/ContentValueStream.vue           |  2 +-
 .../content_value/ContentValueString.vue           |  8 ++++----
 .../components/content_value/ContentValueZSet.vue  |  2 +-
 .../src/components/dialogs/ConnectionDialog.vue    |  8 +++++---
 .../src/components/dialogs/DeleteKeyDialog.vue     | 11 ++++++++---
 .../src/components/dialogs/KeyFilterDialog.vue     |  2 +-
 frontend/src/components/dialogs/NewKeyDialog.vue   |  4 +++-
 frontend/src/components/dialogs/SetTtlDialog.vue   |  6 +++---
 frontend/src/stores/tab.js                         |  2 +-
 18 files changed, 40 insertions(+), 47 deletions(-)
 delete mode 100644 frontend/src/components/common/Toolbar.vue

diff --git a/frontend/src/AppContent.vue b/frontend/src/AppContent.vue
index 0a904ca..7e9652d 100644
--- a/frontend/src/AppContent.vue
+++ b/frontend/src/AppContent.vue
@@ -133,7 +133,11 @@ watch(
             </div>
 
             <!-- content -->
-            <div id="app-content" :style="prefStore.generalFont" class="flex-box-h flex-item-expand">
+            <div
+                id="app-content"
+                :style="prefStore.generalFont"
+                style="--wails-draggable: none"
+                class="flex-box-h flex-item-expand">
                 <nav-menu v-model:value="tabStore.nav" :width="data.navMenuWidth" />
                 <!-- browser page-->
                 <div v-show="tabStore.nav === 'browser'" :class="{ dragging }" class="flex-box-h flex-item-expand">
diff --git a/frontend/src/components/common/IconButton.vue b/frontend/src/components/common/IconButton.vue
index 5867125..81df265 100644
--- a/frontend/src/components/common/IconButton.vue
+++ b/frontend/src/components/common/IconButton.vue
@@ -32,7 +32,7 @@ const hasTooltip = computed(() => {
 <template>
     <n-tooltip v-if="hasTooltip">
         <template #trigger>
-            <n-button :disabled="disabled" :text="!border" @click.prevent="emit('click')">
+            <n-button :disabled="disabled" :text="!border" :focusable="false" @click.prevent="emit('click')">
                 <n-icon :color="props.color" :size="props.size">
                     <component :is="props.icon" :stroke-width="props.strokeWidth" />
                 </n-icon>
@@ -40,7 +40,7 @@ const hasTooltip = computed(() => {
         </template>
         {{ props.tTooltip ? $t(props.tTooltip) : props.tooltip }}
     </n-tooltip>
-    <n-button v-else :disabled="disabled" :text="!border" @click.prevent="emit('click')">
+    <n-button v-else :disabled="disabled" :text="!border" :focusable="false" @click.prevent="emit('click')">
         <n-icon :color="props.color" :size="props.size">
             <component :is="props.icon" :stroke-width="props.strokeWidth" />
         </n-icon>
diff --git a/frontend/src/components/common/Toolbar.vue b/frontend/src/components/common/Toolbar.vue
deleted file mode 100644
index d2e1b51..0000000
--- a/frontend/src/components/common/Toolbar.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<script></script>
-
-<template>
-    <div class="app-toolbar flex-box-h">
-        <n-button>按钮1</n-button>
-        <n-button>按钮2</n-button>
-    </div>
-</template>
-
-<style lang="scss" scoped>
-.app-toolbar {
-    align-items: center;
-}
-</style>
diff --git a/frontend/src/components/content/ContentPane.vue b/frontend/src/components/content/ContentPane.vue
index 5b59898..c77d767 100644
--- a/frontend/src/components/content/ContentPane.vue
+++ b/frontend/src/components/content/ContentPane.vue
@@ -140,7 +140,7 @@ const onReloadKey = async () => {
         <div v-else-if="showNonexists" class="content-container flex-item-expand flex-box-v">
             <n-empty :description="$t('nonexist_tab_content')" class="empty-content">
                 <template #extra>
-                    <n-button @click="onReloadKey">{{ $t('reload') }}</n-button>
+                    <n-button :focusable="false" @click="onReloadKey">{{ $t('reload') }}</n-button>
                 </template>
             </n-empty>
         </div>
diff --git a/frontend/src/components/content/ContentServerPane.vue b/frontend/src/components/content/ContentServerPane.vue
index 8a9ca14..46701d3 100644
--- a/frontend/src/components/content/ContentServerPane.vue
+++ b/frontend/src/components/content/ContentServerPane.vue
@@ -10,7 +10,7 @@ const dialogStore = useDialogStore()
         <!-- TODO: replace icon to app icon -->
         <n-empty :description="$t('empty_server_content')">
             <template #extra>
-                <n-button @click="dialogStore.openNewDialog()">
+                <n-button :focusable="false" @click="dialogStore.openNewDialog()">
                     <template #icon>
                         <n-icon :component="AddLink" size="18" />
                     </template>
diff --git a/frontend/src/components/content_value/ContentToolbar.vue b/frontend/src/components/content_value/ContentToolbar.vue
index c4601bd..f926d7e 100644
--- a/frontend/src/components/content_value/ContentToolbar.vue
+++ b/frontend/src/components/content_value/ContentToolbar.vue
@@ -74,7 +74,7 @@ const onDeleteKey = () => {
         <n-button-group>
             <n-tooltip>
                 <template #trigger>
-                    <n-button @click="dialogStore.openTTLDialog(props.ttl)">
+                    <n-button :focusable="false" @click="dialogStore.openTTLDialog(props.ttl)">
                         <template #icon>
                             <n-icon :component="Timer" size="18" />
                         </template>
@@ -92,12 +92,6 @@ const onDeleteKey = () => {
                 size="18"
                 t-tooltip="rename_key"
                 @click="dialogStore.openRenameKeyDialog(props.server, props.db, props.keyPath)" />
-            <!--            <n-button @click="dialogStore.openRenameKeyDialog(props.server, props.db, props.keyPath)">-->
-            <!--                <template #icon>-->
-            <!--                    <n-icon :component="Edit" size="18" />-->
-            <!--                </template>-->
-            <!--                {{ $t('rename_key') }}-->
-            <!--            </n-button>-->
         </n-button-group>
         <n-tooltip>
             <template #trigger>
diff --git a/frontend/src/components/content_value/ContentValueHash.vue b/frontend/src/components/content_value/ContentValueHash.vue
index 6f2916f..cb5242a 100644
--- a/frontend/src/components/content_value/ContentValueHash.vue
+++ b/frontend/src/components/content_value/ContentValueHash.vue
@@ -258,7 +258,7 @@ const onUpdateFilter = (filters, sourceColumn) => {
                 </n-input-group>
             </div>
             <div class="flex-item-expand"></div>
-            <n-button plain @click="onAddRow">
+            <n-button plain :focusable="false" @click="onAddRow">
                 <template #icon>
                     <n-icon :component="AddLink" size="18" />
                 </template>
diff --git a/frontend/src/components/content_value/ContentValueList.vue b/frontend/src/components/content_value/ContentValueList.vue
index 8109dab..6cb9ebd 100644
--- a/frontend/src/components/content_value/ContentValueList.vue
+++ b/frontend/src/components/content_value/ContentValueList.vue
@@ -182,7 +182,7 @@ const onUpdateFilter = (filters, sourceColumn) => {
                     @update:value="onFilterInput" />
             </div>
             <div class="flex-item-expand"></div>
-            <n-button plain @click="onAddValue">
+            <n-button plain :focusable="false" @click="onAddValue">
                 <template #icon>
                     <n-icon :component="AddLink" size="18" />
                 </template>
diff --git a/frontend/src/components/content_value/ContentValueSet.vue b/frontend/src/components/content_value/ContentValueSet.vue
index 9278e6c..12bb603 100644
--- a/frontend/src/components/content_value/ContentValueSet.vue
+++ b/frontend/src/components/content_value/ContentValueSet.vue
@@ -178,7 +178,7 @@ const onUpdateFilter = (filters, sourceColumn) => {
                     @update:value="onFilterInput" />
             </div>
             <div class="flex-item-expand"></div>
-            <n-button plain @click="onAddValue">
+            <n-button plain :focusable="false" @click="onAddValue">
                 <template #icon>
                     <n-icon :component="AddLink" size="18" />
                 </template>
diff --git a/frontend/src/components/content_value/ContentValueStream.vue b/frontend/src/components/content_value/ContentValueStream.vue
index 8a029ad..04a0abd 100644
--- a/frontend/src/components/content_value/ContentValueStream.vue
+++ b/frontend/src/components/content_value/ContentValueStream.vue
@@ -171,7 +171,7 @@ const onUpdateFilter = (filters, sourceColumn) => {
                 </n-input-group>
             </div>
             <div class="flex-item-expand"></div>
-            <n-button plain @click="onAddRow">
+            <n-button plain :focusable="false" @click="onAddRow">
                 <template #icon>
                     <n-icon :component="AddLink" size="18" />
                 </template>
diff --git a/frontend/src/components/content_value/ContentValueString.vue b/frontend/src/components/content_value/ContentValueString.vue
index c78a4a9..f653c96 100644
--- a/frontend/src/components/content_value/ContentValueString.vue
+++ b/frontend/src/components/content_value/ContentValueString.vue
@@ -173,13 +173,13 @@ const onSaveValue = async () => {
             <n-select v-model:value="viewAs" :options="viewOption" style="width: 200px" />
             <div class="flex-item-expand"></div>
             <n-button-group v-if="!inEdit">
-                <n-button @click="onCopyValue">
+                <n-button :focusable="false" @click="onCopyValue">
                     <template #icon>
                         <n-icon :component="Copy" size="18" />
                     </template>
                     {{ $t('copy_value') }}
                 </n-button>
-                <n-button plain @click="onEditValue">
+                <n-button plain :focusable="false" @click="onEditValue">
                     <template #icon>
                         <n-icon :component="Edit" size="18" />
                     </template>
@@ -187,13 +187,13 @@ const onSaveValue = async () => {
                 </n-button>
             </n-button-group>
             <n-button-group v-else>
-                <n-button :loading="saving" plain @click="onSaveValue">
+                <n-button :loading="saving" :focusable="false" plain @click="onSaveValue">
                     <template #icon>
                         <n-icon :component="Save" size="18" />
                     </template>
                     {{ $t('save_update') }}
                 </n-button>
-                <n-button :loading="saving" plain @click="onCancelEdit">
+                <n-button :loading="saving" :focusable="false" plain @click="onCancelEdit">
                     <template #icon>
                         <n-icon :component="Close" size="18" />
                     </template>
diff --git a/frontend/src/components/content_value/ContentValueZSet.vue b/frontend/src/components/content_value/ContentValueZSet.vue
index 7978d5d..f5d385c 100644
--- a/frontend/src/components/content_value/ContentValueZSet.vue
+++ b/frontend/src/components/content_value/ContentValueZSet.vue
@@ -289,7 +289,7 @@ const onUpdateFilter = (filters, sourceColumn) => {
                 </n-input-group>
             </div>
             <div class="flex-item-expand"></div>
-            <n-button plain @click="onAddRow">
+            <n-button plain :focusable="false" @click="onAddRow">
                 <template #icon>
                     <n-icon :component="AddLink" size="18" />
                 </template>
diff --git a/frontend/src/components/dialogs/ConnectionDialog.vue b/frontend/src/components/dialogs/ConnectionDialog.vue
index 288ee6f..76301b4 100644
--- a/frontend/src/components/dialogs/ConnectionDialog.vue
+++ b/frontend/src/components/dialogs/ConnectionDialog.vue
@@ -249,13 +249,15 @@ const onClose = () => {
 
         <template #action>
             <div class="flex-item-expand">
-                <n-button :disabled="closingConnection" :loading="testing" @click="onTestConnection">
+                <n-button :focusable="false" :disabled="closingConnection" :loading="testing" @click="onTestConnection">
                     {{ $t('conn_test') }}
                 </n-button>
             </div>
             <div class="flex-item n-dialog__action">
-                <n-button :disabled="closingConnection" @click="onClose">{{ $t('cancel') }}</n-button>
-                <n-button :disabled="closingConnection" type="primary" @click="onSaveConnection">
+                <n-button :focusable="false" :disabled="closingConnection" @click="onClose">
+                    {{ $t('cancel') }}
+                </n-button>
+                <n-button :focusable="false" :disabled="closingConnection" type="primary" @click="onSaveConnection">
                     {{ isEditMode ? $t('update') : $t('confirm') }}
                 </n-button>
             </div>
diff --git a/frontend/src/components/dialogs/DeleteKeyDialog.vue b/frontend/src/components/dialogs/DeleteKeyDialog.vue
index 8210003..44c0d21 100644
--- a/frontend/src/components/dialogs/DeleteKeyDialog.vue
+++ b/frontend/src/components/dialogs/DeleteKeyDialog.vue
@@ -99,11 +99,16 @@ const onClose = () => {
 
         <template #action>
             <div class="flex-item n-dialog__action">
-                <n-button @click="onClose">{{ $t('cancel') }}</n-button>
-                <n-button v-if="!deleteForm.showAffected" type="primary" @click="scanAffectedKey">
+                <n-button :focusable="false" @click="onClose">{{ $t('cancel') }}</n-button>
+                <n-button v-if="!deleteForm.showAffected" type="primary" :focusable="false" @click="scanAffectedKey">
                     {{ $t('show_affected_key') }}
                 </n-button>
-                <n-button v-else :disabled="isEmpty(deleteForm.affectedKeys)" type="error" @click="onConfirmDelete">
+                <n-button
+                    v-else
+                    :focusable="false"
+                    :disabled="isEmpty(deleteForm.affectedKeys)"
+                    type="error"
+                    @click="onConfirmDelete">
                     {{ $t('confirm_delete_key', { num: size(deleteForm.affectedKeys) }) }}
                 </n-button>
             </div>
diff --git a/frontend/src/components/dialogs/KeyFilterDialog.vue b/frontend/src/components/dialogs/KeyFilterDialog.vue
index c10be1b..181c0ce 100644
--- a/frontend/src/components/dialogs/KeyFilterDialog.vue
+++ b/frontend/src/components/dialogs/KeyFilterDialog.vue
@@ -91,7 +91,7 @@ const onClose = () => {
                         </template>
                         <div class="text-block">{{ $t('filter_pattern_tip') }}</div>
                     </n-tooltip>
-                    <n-button secondary type="primary" @click="filterForm.pattern = '*'">
+                    <n-button secondary type="primary" :focusable="false" @click="filterForm.pattern = '*'">
                         {{ $t('restore_defaults') }}
                     </n-button>
                 </n-input-group>
diff --git a/frontend/src/components/dialogs/NewKeyDialog.vue b/frontend/src/components/dialogs/NewKeyDialog.vue
index b4f692b..6385a5c 100644
--- a/frontend/src/components/dialogs/NewKeyDialog.vue
+++ b/frontend/src/components/dialogs/NewKeyDialog.vue
@@ -178,7 +178,9 @@ const onClose = () => {
                                 {{ $t('second') }}
                             </template>
                         </n-input-number>
-                        <n-button secondary type="primary" @click="newForm.ttl = -1">{{ $t('persist_key') }}</n-button>
+                        <n-button secondary type="primary" :focusable="false" @click="newForm.ttl = -1">
+                            {{ $t('persist_key') }}
+                        </n-button>
                     </n-input-group>
                 </n-form-item>
                 <component :is="addValueComponent[newForm.type]" ref="subFormRef" v-model:value="newForm.value" />
diff --git a/frontend/src/components/dialogs/SetTtlDialog.vue b/frontend/src/components/dialogs/SetTtlDialog.vue
index 7df8a36..423b10d 100644
--- a/frontend/src/components/dialogs/SetTtlDialog.vue
+++ b/frontend/src/components/dialogs/SetTtlDialog.vue
@@ -91,11 +91,11 @@ const onConfirm = async () => {
 
         <template #action>
             <div class="flex-item-expand">
-                <n-button @click="ttlForm.ttl = -1">{{ $t('persist_key') }}</n-button>
+                <n-button :focusable="false" @click="ttlForm.ttl = -1">{{ $t('persist_key') }}</n-button>
             </div>
             <div class="flex-item n-dialog__action">
-                <n-button @click="onClose">{{ $t('cancel') }}</n-button>
-                <n-button type="primary" @click="onConfirm">{{ $t('save') }}</n-button>
+                <n-button :focusable="false" @click="onClose">{{ $t('cancel') }}</n-button>
+                <n-button type="primary" :focusable="false" @click="onConfirm">{{ $t('save') }}</n-button>
             </div>
         </template>
     </n-modal>
diff --git a/frontend/src/stores/tab.js b/frontend/src/stores/tab.js
index edbf481..feab642 100644
--- a/frontend/src/stores/tab.js
+++ b/frontend/src/stores/tab.js
@@ -204,7 +204,7 @@ const useTabStore = defineStore('tab', {
         },
 
         /**
-         *
+         * set selected keys of current display browser tree
          * @param {string} server
          * @param {string|string[]} keys
          */