perf: move key view switch to connection preferences
This commit is contained in:
tiny-craft
parent
92ffd6c605
commit
f9fe74a6b4
|
|
@ -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
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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"`
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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" />
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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": "标记颜色"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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
|
||||
},
|
||||
|
||||
/**
|
||||
|
|
|
|||
Loading…
Reference in New Issue