fix: disable loading indicator when preferences dialog display

fix: replace regex match with self-parse for parse node key

frontend/src/components/dialogs/PreferencesDialog.vue

@@ -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,10 +72,12 @@ const onClose = () => {
         preset="dialog"
         transform-origin="center"
     >
-        <n-spin :show="loading">
+        <!-- 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"
@@ -84,11 +86,7 @@ const onClose = () => {
                 >
                     <n-form-item :label="$t('theme')" required>
                         <n-radio-group v-model:value="prefStore.general.theme" name="theme" size="medium">
-                                <n-radio-button
+                            <n-radio-button v-for="opt in prefStore.themeOption" :key="opt.value" :value="opt.value">
-                                    v-for="opt in prefStore.themeOption"
-                                    :key="opt.value"
-                                    :value="opt.value"
-                                >
                                 {{ opt.label }}
                             </n-radio-button>
                         </n-radio-group>
@@ -101,11 +99,7 @@ const onClose = () => {
                         />
                     </n-form-item>
                     <n-form-item :label="$t('font')" required>
-                            <n-select
+                        <n-select v-model:value="prefStore.general.font" :options="prefStore.fontOption" filterable />
-                                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" />
@@ -130,6 +124,7 @@ const onClose = () => {
 
             <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"
@@ -137,11 +132,7 @@ const onClose = () => {
                     label-placement="left"
                 >
                     <n-form-item :label="$t('font')" required>
-                            <n-select
+                        <n-select v-model:value="prefStore.editor.font" :options="prefStore.fontOption" filterable />
-                                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" />
@@ -149,7 +140,7 @@ const onClose = () => {
                 </n-form>
             </n-tab-pane>
         </n-tabs>
-        </n-spin>
+        <!-- </n-spin> -->
 
         <template #action>
             <div class="flex-item-expand">

frontend/src/stores/connections.js

@@ -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/]+))?$/)
+            const p1 = split(key, '#', 1)
-            if (matches) {
+            let redisKey = null
-                const { server, db, key } = matches.groups
+            // parse server and db index
-                if (db != null) {
+            const idx = p1[0].lastIndexOf('/db')
-                    const dbIndex = parseInt(db)
+            if (idx < 0) {
-                    const nodeMap = this._getNodeMap(server, dbIndex)
+                return null
-                    if (key != 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][dbIndex]
+                return this.databases[server][db]
             }
-                }
-            }
-            return null
         },
 
         /**