From f9fe74a6b4041c290424d468034da5cbcffbe773 Mon Sep 17 00:00:00 2001
From: tiny-craft <137850705+tiny-craft@users.noreply.github.com>
Date: Sun, 22 Oct 2023 18:31:10 +0800
Subject: [PATCH] perf: move key view switch to connection preferences

---
 backend/services/connection_service.go        |  3 +-
 backend/types/connection.go                   |  1 +
 .../components/dialogs/ConnectionDialog.vue   | 99 +++++++++++--------
 .../src/components/sidebar/BrowserPane.vue    | 25 ++---
 frontend/src/langs/en.json                    |  5 +-
 frontend/src/langs/zh-cn.json                 |  5 +-
 frontend/src/stores/connections.js            |  4 +-
 7 files changed, 85 insertions(+), 57 deletions(-)

diff --git a/backend/services/connection_service.go b/backend/services/connection_service.go
index bf40b02..fc61e2e 100644
--- a/backend/services/connection_service.go
+++ b/backend/services/connection_service.go
@@ -507,7 +507,8 @@ func (c *connectionService) OpenConnection(name string) (resp types.JSResp) {
 
 	resp.Success = true
 	resp.Data = map[string]any{
-		"db": dbs,
+		"db":   dbs,
+		"view": selConn.KeyView,
 	}
 	return
 }
diff --git a/backend/types/connection.go b/backend/types/connection.go
index f7ff5f4..ff5d5c5 100644
--- a/backend/types/connection.go
+++ b/backend/types/connection.go
@@ -15,6 +15,7 @@ type ConnectionConfig struct {
 	ExecTimeout   int                `json:"execTimeout,omitempty" yaml:"exec_timeout,omitempty"`
 	DBFilterType  string             `json:"dbFilterType" yaml:"db_filter_type,omitempty"`
 	DBFilterList  []int              `json:"dbFilterList" yaml:"db_filter_list,omitempty"`
+	KeyView       int                `json:"keyView,omitempty" yaml:"key_view,omitempty"`
 	LoadSize      int                `json:"loadSize,omitempty" yaml:"load_size,omitempty"`
 	MarkColor     string             `json:"markColor,omitempty" yaml:"mark_color,omitempty"`
 	SSL           ConnectionSSL      `json:"ssl,omitempty" yaml:"ssl,omitempty"`
diff --git a/frontend/src/components/dialogs/ConnectionDialog.vue b/frontend/src/components/dialogs/ConnectionDialog.vue
index d396b5b..9c67e20 100644
--- a/frontend/src/components/dialogs/ConnectionDialog.vue
+++ b/frontend/src/components/dialogs/ConnectionDialog.vue
@@ -7,6 +7,7 @@ import useDialog, { ConnDialogType } from 'stores/dialog'
 import Close from '@/components/icons/Close.vue'
 import useConnectionStore from 'stores/connections.js'
 import FileOpenInput from '@/components/common/FileOpenInput.vue'
+import { KeyViewType } from '@/consts/key_view_type.js'
 
 /**
  * Dialog for new or edit connection
@@ -258,37 +259,47 @@ const onClose = () => {
                         :rules="generalFormRules()"
                         :show-require-mark="false"
                         label-placement="top">
-                        <n-form-item :label="$t('dialogue.connection.conn_name')" path="name" required>
-                            <n-input
-                                v-model:value="generalForm.name"
-                                :placeholder="$t('dialogue.connection.name_tip')" />
-                        </n-form-item>
-                        <n-form-item v-if="!isEditMode" :label="$t('dialogue.connection.group')" required>
-                            <n-select v-model:value="generalForm.group" :options="groupOptions" />
-                        </n-form-item>
-                        <n-form-item :label="$t('dialogue.connection.addr')" path="addr" required>
-                            <n-input
-                                v-model:value="generalForm.addr"
-                                :placeholder="$t('dialogue.connection.addr_tip')" />
-                            <n-text style="width: 40px; text-align: center">:</n-text>
-                            <n-input-number
-                                v-model:value="generalForm.port"
-                                :max="65535"
-                                :min="1"
-                                style="width: 200px" />
-                        </n-form-item>
-                        <n-form-item :label="$t('dialogue.connection.pwd')" path="password">
-                            <n-input
-                                v-model:value="generalForm.password"
-                                :placeholder="$t('dialogue.connection.pwd_tip')"
-                                show-password-on="click"
-                                type="password" />
-                        </n-form-item>
-                        <n-form-item :label="$t('dialogue.connection.usr')" path="username">
-                            <n-input
-                                v-model:value="generalForm.username"
-                                :placeholder="$t('dialogue.connection.usr_tip')" />
-                        </n-form-item>
+                        <n-grid :x-gap="10">
+                            <n-form-item-gi
+                                :label="$t('dialogue.connection.conn_name')"
+                                :span="24"
+                                path="name"
+                                required>
+                                <n-input
+                                    v-model:value="generalForm.name"
+                                    :placeholder="$t('dialogue.connection.name_tip')" />
+                            </n-form-item-gi>
+                            <n-form-item-gi
+                                v-if="!isEditMode"
+                                :label="$t('dialogue.connection.group')"
+                                :span="24"
+                                required>
+                                <n-select v-model:value="generalForm.group" :options="groupOptions" />
+                            </n-form-item-gi>
+                            <n-form-item-gi :label="$t('dialogue.connection.addr')" :span="24" path="addr" required>
+                                <n-input
+                                    v-model:value="generalForm.addr"
+                                    :placeholder="$t('dialogue.connection.addr_tip')" />
+                                <n-text style="width: 40px; text-align: center">:</n-text>
+                                <n-input-number
+                                    v-model:value="generalForm.port"
+                                    :max="65535"
+                                    :min="1"
+                                    style="width: 200px" />
+                            </n-form-item-gi>
+                            <n-form-item-gi :label="$t('dialogue.connection.pwd')" :span="12" path="password">
+                                <n-input
+                                    v-model:value="generalForm.password"
+                                    :placeholder="$t('dialogue.connection.pwd_tip')"
+                                    show-password-on="click"
+                                    type="password" />
+                            </n-form-item-gi>
+                            <n-form-item-gi :label="$t('dialogue.connection.usr')" :span="12" path="username">
+                                <n-input
+                                    v-model:value="generalForm.username"
+                                    :placeholder="$t('dialogue.connection.usr_tip')" />
+                            </n-form-item-gi>
+                        </n-grid>
                     </n-form>
                 </n-tab-pane>
 
@@ -337,6 +348,16 @@ const onClose = () => {
                                     </template>
                                 </n-input-number>
                             </n-form-item-gi>
+                            <n-form-item-gi :label="$t('dialogue.connection.advn.key_view')" :span="12">
+                                <n-radio-group v-model:value="generalForm.keyView">
+                                    <n-radio-button
+                                        :label="$t('dialogue.connection.advn.key_view_tree')"
+                                        :value="KeyViewType.Tree" />
+                                    <n-radio-button
+                                        :label="$t('dialogue.connection.advn.key_view_list')"
+                                        :value="KeyViewType.List" />
+                                </n-radio-group>
+                            </n-form-item-gi>
                             <n-form-item-gi :label="$t('dialogue.connection.advn.load_size')" :span="12">
                                 <n-input-number v-model:value="generalForm.loadSize" :min="0" />
                             </n-form-item-gi>
@@ -403,20 +424,20 @@ const onClose = () => {
                         <n-form-item :label="$t('dialogue.connection.ssl.cert_file')">
                             <file-open-input
                                 v-model:value="generalForm.ssl.certFile"
-                                :placeholder="$t('dialogue.connection.ssl.cert_file_tip')"
-                                :disabled="!generalForm.ssl.enable" />
+                                :disabled="!generalForm.ssl.enable"
+                                :placeholder="$t('dialogue.connection.ssl.cert_file_tip')" />
                         </n-form-item>
                         <n-form-item :label="$t('dialogue.connection.ssl.key_file')">
                             <file-open-input
                                 v-model:value="generalForm.ssl.keyFile"
-                                :placeholder="$t('dialogue.connection.ssl.key_file_tip')"
-                                :disabled="!generalForm.ssl.enable" />
+                                :disabled="!generalForm.ssl.enable"
+                                :placeholder="$t('dialogue.connection.ssl.key_file_tip')" />
                         </n-form-item>
                         <n-form-item :label="$t('dialogue.connection.ssl.ca_file')">
                             <file-open-input
                                 v-model:value="generalForm.ssl.caFile"
-                                :placeholder="$t('dialogue.connection.ssl.ca_file_tip')"
-                                :disabled="!generalForm.ssl.enable" />
+                                :disabled="!generalForm.ssl.enable"
+                                :placeholder="$t('dialogue.connection.ssl.ca_file_tip')" />
                         </n-form-item>
                     </n-form>
                 </n-tab-pane>
@@ -467,8 +488,8 @@ const onClose = () => {
                         <n-form-item v-if="sshLoginType === 'pkfile'" :label="$t('dialogue.connection.ssh.pkfile')">
                             <file-open-input
                                 v-model:value="generalForm.ssh.pkFile"
-                                :placeholder="$t('dialogue.connection.ssh.pkfile_tip')"
-                                :disabled="!generalForm.ssh.enable" />
+                                :disabled="!generalForm.ssh.enable"
+                                :placeholder="$t('dialogue.connection.ssh.pkfile_tip')" />
                         </n-form-item>
                         <n-form-item v-if="sshLoginType === 'pkfile'" :label="$t('dialogue.connection.ssh.passphrase')">
                             <n-input
diff --git a/frontend/src/components/sidebar/BrowserPane.vue b/frontend/src/components/sidebar/BrowserPane.vue
index 3a3ce5e..db97ede 100644
--- a/frontend/src/components/sidebar/BrowserPane.vue
+++ b/frontend/src/components/sidebar/BrowserPane.vue
@@ -63,11 +63,12 @@ const filterTypeOptions = computed(() => {
     return options
 })
 
-const viewType = ref(0)
-const onSwitchView = (selectView) => {
-    const { server } = tabStore.currentTab
-    connectionStore.switchKeyView(server, selectView)
-}
+// forbid dynamic switch key view due to performance issues
+// const viewType = ref(0)
+// const onSwitchView = (selectView) => {
+//     const { server } = tabStore.currentTab
+//     connectionStore.switchKeyView(server, selectView)
+// }
 </script>
 
 <template>
@@ -91,13 +92,13 @@ const onSwitchView = (selectView) => {
         </div>
         <!-- bottom function bar -->
         <div class="nav-pane-bottom flex-box-h">
-            <switch-button
-                v-model:value="viewType"
-                :icons="[TreeView, ListView]"
-                :t-tooltips="['interface.tree_view', 'interface.list_view']"
-                stroke-width="4"
-                unselect-stroke-width="3"
-                @update:value="onSwitchView" />
+            <!--            <switch-button-->
+            <!--                v-model:value="viewType"-->
+            <!--                :icons="[TreeView, ListView]"-->
+            <!--                :t-tooltips="['interface.tree_view', 'interface.list_view']"-->
+            <!--                stroke-width="4"-->
+            <!--                unselect-stroke-width="3"-->
+            <!--                @update:value="onSwitchView" />-->
             <icon-button :icon="Status" size="20" stroke-width="4" t-tooltip="interface.status" @click="onInfo" />
             <icon-button :icon="Refresh" size="20" stroke-width="4" t-tooltip="interface.reload" @click="onRefresh" />
             <div class="flex-item-expand" />
diff --git a/frontend/src/langs/en.json b/frontend/src/langs/en.json
index 0b4be84..5baaa51 100644
--- a/frontend/src/langs/en.json
+++ b/frontend/src/langs/en.json
@@ -48,8 +48,6 @@
     "disconnect_all": "Disconnect all",
     "status": "Status",
     "filter": "Filter",
-    "tree_view": "Tree View",
-    "list_view": "List View",
     "sort_conn": "Sort Connections",
     "new_conn_title": "New Connection",
     "open_db": "Open Database",
@@ -151,6 +149,9 @@
         "dbfilter_hide_title": "Select the Databases to Hide",
         "dbfilter_input": "Input Database Index",
         "dbfilter_input_tip": "Press Enter to confirm",
+        "key_view": "Default Key View",
+        "key_view_tree": "Tree View",
+        "key_view_list": "List View",
         "load_size": "Size of Keys Per Load",
         "mark_color": "Mark Color"
       },
diff --git a/frontend/src/langs/zh-cn.json b/frontend/src/langs/zh-cn.json
index f6b7d10..f86e3be 100644
--- a/frontend/src/langs/zh-cn.json
+++ b/frontend/src/langs/zh-cn.json
@@ -48,8 +48,6 @@
     "disconnect_all": "断开所有连接",
     "status": "状态",
     "filter": "筛选",
-    "tree_view": "树视图",
-    "list_view": "列表视图",
     "sort_conn": "调整连接顺序",
     "new_conn_title": "新建连接",
     "open_db": "打开数据库",
@@ -151,6 +149,9 @@
         "dbfilter_hide_title": "需要隐藏的数据库",
         "dbfilter_input": "输入数据库索引",
         "dbfilter_input_tip": "按回车确认",
+        "key_view": "默认键视图",
+        "key_view_tree": "树形列表",
+        "key_view_list": "平铺列表",
         "load_size": "单次加载键数量",
         "mark_color": "标记颜色"
       },
diff --git a/frontend/src/stores/connections.js b/frontend/src/stores/connections.js
index f2d3ed1..5b90fcd 100644
--- a/frontend/src/stores/connections.js
+++ b/frontend/src/stores/connections.js
@@ -236,6 +236,7 @@ const useConnectionStore = defineStore('connections', {
                 execTimeout: 60,
                 dbFilterType: 'none',
                 dbFilterList: [],
+                keyView: KeyViewType.Tree,
                 loadSize: 10000,
                 markColor: '',
                 ssl: {
@@ -435,7 +436,7 @@ const useConnectionStore = defineStore('connections', {
             // if (connNode == null) {
             //     throw new Error('no such connection')
             // }
-            const { db } = data
+            const { db, view = KeyViewType.Tree } = data
             if (isEmpty(db)) {
                 throw new Error('no db loaded')
             }
@@ -456,6 +457,7 @@ const useConnectionStore = defineStore('connections', {
                 })
             }
             this.databases[name] = dbs
+            this.viewType[name] = view
         },
 
         /**