fix: disable loading indicator when preferences dialog display

fix: replace regex match with self-parse for parse node key
This commit is contained in:
tiny-craft 2023-08-18 17:57:02 +08:00
parent 86adf17514
commit 803c9c1a50
2 changed files with 105 additions and 92 deletions

View File

@ -1,5 +1,5 @@
<script setup>
import { ref, watch, nextTick } from 'vue'
import { ref, watch } from 'vue'
import { useI18n } from 'vue-i18n'
import useDialog from 'stores/dialog'
import usePreferencesStore from 'stores/preferences.js'
@ -34,7 +34,7 @@ watch(
() => dialogStore.preferencesDialogVisible,
(visible) => {
if (visible) {
nextTick().then(initPreferences)
initPreferences()
}
},
)
@ -72,84 +72,75 @@ const onClose = () => {
preset="dialog"
transform-origin="center"
>
<n-spin :show="loading">
<n-tabs v-model:value="tab" animated type="line">
<n-tab-pane :tab="$t('general')" display-directive="show" name="general">
<n-form
:label-width="formLabelWidth"
:model="prefStore.general"
:show-require-mark="false"
label-align="right"
label-placement="left"
>
<n-form-item :label="$t('theme')" required>
<n-radio-group v-model:value="prefStore.general.theme" name="theme" size="medium">
<n-radio-button
v-for="opt in prefStore.themeOption"
:key="opt.value"
:value="opt.value"
>
{{ opt.label }}
</n-radio-button>
</n-radio-group>
</n-form-item>
<n-form-item :label="$t('language')" required>
<n-select
v-model:value="prefStore.general.language"
:options="prefStore.langOption"
filterable
/>
</n-form-item>
<n-form-item :label="$t('font')" required>
<n-select
v-model:value="prefStore.general.font"
:options="prefStore.fontOption"
filterable
/>
</n-form-item>
<n-form-item :label="$t('font_size')">
<n-input-number v-model:value="prefStore.general.fontSize" :max="65535" :min="1" />
</n-form-item>
<n-form-item :label="$t('proxy')">
<n-space>
<n-checkbox v-model:checked="prefStore.general.useSysProxy">
{{ $t('use_system_proxy') }}
</n-checkbox>
<n-checkbox v-model:checked="prefStore.general.useSysProxyHttp">
{{ $t('use_system_proxy_http') }}
</n-checkbox>
</n-space>
</n-form-item>
<n-form-item :label="$t('update')">
<n-checkbox v-model:checked="prefStore.general.checkUpdate">
{{ $t('auto_check_update') }}
<!-- FIXME: set loading will slow down appear animation of dialog in linux -->
<!-- <n-spin :show="loading"> -->
<n-tabs v-model:value="tab" animated type="line">
<n-tab-pane :tab="$t('general')" display-directive="show" name="general">
<n-form
:disabled="loading"
:label-width="formLabelWidth"
:model="prefStore.general"
:show-require-mark="false"
label-align="right"
label-placement="left"
>
<n-form-item :label="$t('theme')" required>
<n-radio-group v-model:value="prefStore.general.theme" name="theme" size="medium">
<n-radio-button v-for="opt in prefStore.themeOption" :key="opt.value" :value="opt.value">
{{ opt.label }}
</n-radio-button>
</n-radio-group>
</n-form-item>
<n-form-item :label="$t('language')" required>
<n-select
v-model:value="prefStore.general.language"
:options="prefStore.langOption"
filterable
/>
</n-form-item>
<n-form-item :label="$t('font')" required>
<n-select v-model:value="prefStore.general.font" :options="prefStore.fontOption" filterable />
</n-form-item>
<n-form-item :label="$t('font_size')">
<n-input-number v-model:value="prefStore.general.fontSize" :max="65535" :min="1" />
</n-form-item>
<n-form-item :label="$t('proxy')">
<n-space>
<n-checkbox v-model:checked="prefStore.general.useSysProxy">
{{ $t('use_system_proxy') }}
</n-checkbox>
</n-form-item>
</n-form>
</n-tab-pane>
<n-checkbox v-model:checked="prefStore.general.useSysProxyHttp">
{{ $t('use_system_proxy_http') }}
</n-checkbox>
</n-space>
</n-form-item>
<n-form-item :label="$t('update')">
<n-checkbox v-model:checked="prefStore.general.checkUpdate">
{{ $t('auto_check_update') }}
</n-checkbox>
</n-form-item>
</n-form>
</n-tab-pane>
<n-tab-pane :tab="$t('editor')" display-directive="show" name="editor">
<n-form
:label-width="formLabelWidth"
:model="prefStore.editor"
:show-require-mark="false"
label-align="right"
label-placement="left"
>
<n-form-item :label="$t('font')" required>
<n-select
v-model:value="prefStore.editor.font"
:options="prefStore.fontOption"
filterable
/>
</n-form-item>
<n-form-item :label="$t('font_size')">
<n-input-number v-model:value="prefStore.editor.fontSize" :max="65535" :min="1" />
</n-form-item>
</n-form>
</n-tab-pane>
</n-tabs>
</n-spin>
<n-tab-pane :tab="$t('editor')" display-directive="show" name="editor">
<n-form
:disabled="loading"
:label-width="formLabelWidth"
:model="prefStore.editor"
:show-require-mark="false"
label-align="right"
label-placement="left"
>
<n-form-item :label="$t('font')" required>
<n-select v-model:value="prefStore.editor.font" :options="prefStore.fontOption" filterable />
</n-form-item>
<n-form-item :label="$t('font_size')">
<n-input-number v-model:value="prefStore.editor.fontSize" :max="65535" :min="1" />
</n-form-item>
</n-form>
</n-tab-pane>
</n-tabs>
<!-- </n-spin> -->
<template #action>
<div class="flex-item-expand">

View File

@ -1,5 +1,20 @@
import { defineStore } from 'pinia'
import { endsWith, get, isEmpty, join, remove, size, slice, sortedIndexBy, split, sumBy, toUpper, uniq } from 'lodash'
import {
endsWith,
findLastIndex,
get,
isEmpty,
join,
lastIndexOf,
remove,
size,
slice,
sortedIndexBy,
split,
sumBy,
toUpper,
uniq,
} from 'lodash'
import {
AddHashField,
AddListItem,
@ -803,20 +818,27 @@ const useConnectionStore = defineStore('connections', {
* @return {DatabaseItem|null}
*/
getNode(key) {
const matches = key.match(/^(?<server>\w+)(?:\/db(?<db>\d+))?(?:#(?<key>[\w/]+))?$/)
if (matches) {
const { server, db, key } = matches.groups
if (db != null) {
const dbIndex = parseInt(db)
const nodeMap = this._getNodeMap(server, dbIndex)
if (key != null) {
return nodeMap.get(key)
} else {
return this.databases[server][dbIndex]
}
}
const p1 = split(key, '#', 1)
let redisKey = null
// parse server and db index
const idx = p1[0].lastIndexOf('/db')
if (idx < 0) {
return null
}
const server = p1[0].substring(0, idx)
const db = parseInt(p1[0].substring(idx + 3))
if (isNaN(db)) {
return null
}
if (size(p1) > 1) {
// contains redis key
redisKey = p1[1]
const nodeMap = this._getNodeMap(server, db)
return nodeMap.get(key)
} else {
return this.databases[server][db]
}
return null
},
/**