feat: add reload database

frontend/src/components/content/ContentPane.vue

@@ -54,10 +54,6 @@ const onUpdateValue = (tabIndex) => {
     tabStore.switchTab(tabIndex)
 }
 
-const onAddTab = () => {
-    tabStore.newBlankTab()
-}
-
 const i18n = useI18n()
 const confirmDialog = useConfirmDialog()
 const onCloseTab = (tabIndex) => {
@@ -72,13 +68,12 @@ const onCloseTab = (tabIndex) => {
 
 <template>
     <div class="content-container flex-box-v">
-        <!--    <content-tab :model-value="tab"></content-tab>-->
+        <!--        <content-tab :model-value="tab"></content-tab>-->
         <n-tabs
             v-model:value="tabStore.activatedIndex"
             :closable="true"
             size="small"
             type="card"
-            @add="onAddTab"
             @close="onCloseTab"
             @update:value="onUpdateValue"
         >
@@ -86,6 +81,18 @@ const onCloseTab = (tabIndex) => {
                 <n-ellipsis style="max-width: 150px">{{ t.label }}</n-ellipsis>
             </n-tab>
         </n-tabs>
+        <!--        <n-tabs v-model:value="tabStore.activatedIndex" type="line" @update:value="onUpdateValue" :tabs-padding="0">-->
+        <!--            <n-tab v-for="(t, i) in tab" :key="i" :name="i">-->
+        <!--                <div class="tab-item flex-box-h">-->
+        <!--                    <div class="tab-item-label ellipsis">-->
+        <!--                        {{ t.label }}-->
+        <!--                    </div>-->
+        <!--                    <n-icon class="tab-item-close" color="gray" size="16" @click.stop="onCloseTab(i)">-->
+        <!--                        <Close :round="false" :stroke-width="5" />-->
+        <!--                    </n-icon>-->
+        <!--                </div>-->
+        <!--            </n-tab>-->
+        <!--        </n-tabs>-->
         <!-- TODO: add loading status -->
         <component
             v-if="tabContent != null && !isEmpty(tabContent.keyPath)"
@@ -104,4 +111,23 @@ const onCloseTab = (tabIndex) => {
 
 <style lang="scss" scoped>
 @import 'content';
+//.tab-item {
+//    gap: 5px;
+//    padding: 0 5px 0 10px;
+//    align-items: center;
+//    max-width: 150px;
+//
+//    transition: all var(--transition-duration-fast) var(--transition-function-ease-in-out-bezier);
+//
+//    &-label {
+//        font-size: 15px;
+//        text-align: center;
+//    }
+//
+//    &-close {
+//        &:hover {
+//            background-color: rgb(176, 177, 182, 0.4);
+//        }
+//    }
+//}
 </style>

frontend/src/components/dialogs/ConnectionDialog.vue

@@ -152,7 +152,7 @@ const onClose = () => {
         preset="dialog"
         transform-origin="center"
     >
-        <n-tabs v-model:value="tab" type="line">
+        <n-tabs v-model:value="tab" type="line" animated>
             <n-tab-pane :tab="$t('general')" display-directive="show" name="general">
                 <n-form
                     ref="generalFormRef"

frontend/src/components/dialogs/PreferencesDialog.vue

@@ -116,7 +116,7 @@ const onClose = () => {
         preset="dialog"
         transform-origin="center"
     >
-        <n-tabs v-model:value="tab" type="line">
+        <n-tabs v-model:value="tab" type="line" animated>
             <n-tab-pane :tab="$t('general')" display-directive="show" name="general">
                 <n-form
                     :label-width="formLabelWidth"

frontend/src/components/icons/Close.vue

@@ -4,11 +4,15 @@ const props = defineProps({
         type: [Number, String],
         default: 3,
     },
+    round: {
+        type: Boolean,
+        default: true,
+    },
 })
 </script>
 
 <template>
-    <svg fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
+    <svg v-if="round !== false" fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
         <path
             :stroke-width="strokeWidth"
             d="M24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44Z"
@@ -31,6 +35,22 @@ const props = defineProps({
             stroke-linejoin="round"
         />
     </svg>
+    <svg v-else width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path
+            d="M8 8L40 40"
+            stroke="currentColor"
+            :stroke-width="strokeWidth"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+        />
+        <path
+            d="M8 40L40 8"
+            stroke="currentColor"
+            :stroke-width="strokeWidth"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+        />
+    </svg>
 </template>
 
 <style lang="scss" scoped></style>

frontend/src/components/sidebar/BrowserTree.vue

@@ -274,13 +274,12 @@ const handleSelectContextMenu = (key) => {
     contextMenuParam.show = false
     const { name, db, key: nodeKey, redisKey } = contextMenuParam.currentNode
     switch (key) {
-        // case 'server_reload':
-        // case 'db_reload':
-        //     connectionStore.loadKeyValue()
-        //     break
         case 'db_open':
             nextTick().then(() => expandKey(nodeKey))
             break
+        case 'db_reload':
+            connectionStore.scanKeys(name, db)
+            break
         case 'db_newkey':
         case 'key_newkey':
             dialogStore.openNewKeyDialog(redisKey, name, db)

frontend/src/stores/connections.js

@@ -425,25 +425,27 @@ const useConnectionStore = defineStore('connections', {
          * scan keys with prefix
          * @param {string} connName
          * @param {number} db
-         * @param {string} prefix
+         * @param {string} [prefix] full reload database if prefix is null
          * @returns {Promise<void>}
          */
         async scanKeys(connName, db, prefix) {
-            const { data, success, msg } = await ScanKeys(connName, db, prefix)
+            const { data, success, msg } = await ScanKeys(connName, db, prefix || '*')
             if (!success) {
                 throw new Error(msg)
             }
             // remove current keys below prefix
-            const prefixPart = split(prefix, separator)
             const dbs = this.databases[connName]
             let node = dbs[db]
-            for (const key of prefixPart) {
+            if (!isEmpty(prefix)) {
-                const idx = findIndex(node.children, { label: key })
+                const prefixPart = split(prefix, separator)
-                if (idx === -1) {
+                for (const key of prefixPart) {
-                    node = null
+                    const idx = findIndex(node.children, { label: key })
-                    break
+                    if (idx === -1) {
+                        node = null
+                        break
+                    }
+                    node = node.children[idx]
                 }
-                node = node.children[idx]
             }
             if (node != null) {
                 node.children = []