README.md

@@ -35,12 +35,12 @@
 * Provides command-line operations.
 * Provides slow logs.
 * Segmented loading and querying for List/Hash/Set/Sorted Set.
-* Decode/decompression display for value of List/Hash/Set/Sorted Set.
+* Decode/decompression display for value of List/Hash/Set/Sorted Set
-* Inbuilt advanced editor - Monaco Editor.
 
 ## Roadmap
 - [ ] Real-time commands monitoring
 - [ ] Pub/Sub operations
+- [ ] Embedding Monaco Editor
 - [ ] Import/export connection profile
 - [ ] Import/export data
 

README_zh.md

@@ -36,7 +36,6 @@
 * 提供慢日志展示
 * List/Hash/Set/Sorted Set的分段加载和查询
 * List/Hash/Set/Sorted Set值的转码显示
-* 内置高级编辑器Monaco Editor
 
 ## 未来版本规划
 - [ ] 命令实时监控

backend/services/browser_service.go

@@ -51,7 +51,7 @@ type connectionItem struct {
 
 type browserService struct {
 	ctx        context.Context
-	connMap    map[string]*connectionItem
+	connMap    map[string]connectionItem
 	cmdHistory []cmdHistoryItem
 }
 
@@ -62,7 +62,7 @@ func Browser() *browserService {
 	if browser == nil {
 		onceBrowser.Do(func() {
 			browser = &browserService{
-				connMap: map[string]*connectionItem{},
+				connMap: map[string]connectionItem{},
 			}
 		})
 	}
@@ -80,20 +80,21 @@ func (b *browserService) Stop() {
 			item.client.Close()
 		}
 	}
-	b.connMap = map[string]*connectionItem{}
+	b.connMap = map[string]connectionItem{}
 }
 
 // OpenConnection open redis server connection
 func (b *browserService) OpenConnection(name string) (resp types.JSResp) {
-	// get connection config
+	item, err := b.getRedisClient(name, 0)
-	selConn := Connection().getConnection(name)
-	item, err := b.getRedisClient(name, selConn.LastDB)
 	if err != nil {
 		resp.Msg = err.Error()
 		return
 	}
 
 	client, ctx := item.client, item.ctx
+	// get connection config
+	selConn := Connection().getConnection(name)
+
 	var totaldb int
 	if selConn.DBFilterType == "" || selConn.DBFilterType == "none" {
 		// get total databases
@@ -221,7 +222,7 @@ func (b *browserService) CloseConnection(name string) (resp types.JSResp) {
 
 // get a redis client from local cache or create a new open
 // if db >= 0, will also switch to db index
-func (b *browserService) getRedisClient(connName string, db int) (item *connectionItem, err error) {
+func (b *browserService) getRedisClient(connName string, db int) (item connectionItem, err error) {
 	var ok bool
 	var client redis.UniversalClient
 	if item, ok = b.connMap[connName]; ok {
@@ -274,7 +275,7 @@ func (b *browserService) getRedisClient(connName string, db int) (item *connecti
 			return
 		}
 		ctx, cancelFunc := context.WithCancel(b.ctx)
-		item = &connectionItem{
+		item = connectionItem{
 			client:      client,
 			ctx:         ctx,
 			cancelFunc:  cancelFunc,
@@ -288,19 +289,14 @@ func (b *browserService) getRedisClient(connName string, db int) (item *connecti
 		b.connMap[connName] = item
 	}
 
-	// BUG: go-redis might not be executing commands on the corresponding database
+	if db >= 0 && item.db != db {
-	// requiring a database switch with each command
-	if db >= 0 /*&& item.db != db*/ {
 		var rdb *redis.Client
 		if rdb, ok = client.(*redis.Client); ok && rdb != nil {
-			_, err = rdb.Pipelined(item.ctx, func(pipe redis.Pipeliner) error {
+			if err = rdb.Do(item.ctx, "select", strconv.Itoa(db)).Err(); err != nil {
-				return pipe.Select(item.ctx, db).Err()
-			})
-			if err != nil {
 				return
 			}
 			item.db = db
-			b.connMap[connName].db = db
+			b.connMap[connName] = item
 		}
 	}
 	return
@@ -362,7 +358,7 @@ func (b *browserService) parseDBItemInfo(info string) map[string]int {
 
 // ServerInfo get server info
 func (b *browserService) ServerInfo(name string) (resp types.JSResp) {
-	item, err := b.getRedisClient(name, -1)
+	item, err := b.getRedisClient(name, 0)
 	if err != nil {
 		resp.Msg = err.Error()
 		return

frontend/src/components/common/RedisTypeTag.vue

@@ -3,8 +3,6 @@ import { computed } from 'vue'
 import { typesBgColor, typesColor, typesShortName } from '@/consts/support_redis_type.js'
 import Binary from '@/components/icons/Binary.vue'
 import { get, toUpper } from 'lodash'
-import { useThemeVars } from 'naive-ui'
-import Loading from '@/components/icons/Loading.vue'
 
 const props = defineProps({
     type: {
@@ -22,24 +20,21 @@ const props = defineProps({
     },
     round: Boolean,
     inverse: Boolean,
-    loading: Boolean,
 })
 
-const themeVars = useThemeVars()
-
 const fontColor = computed(() => {
     if (props.inverse) {
-        return props.loading ? themeVars.value.tagColor : typesBgColor[props.type]
+        return typesBgColor[props.type]
     } else {
-        return props.loading ? themeVars.value.textColorBase : typesColor[props.type]
+        return typesColor[props.type]
     }
 })
 
 const backgroundColor = computed(() => {
     if (props.inverse) {
-        return props.loading ? themeVars.value.textColorBase : typesColor[props.type]
+        return typesColor[props.type]
     } else {
-        return props.loading ? themeVars.value.tagColor : typesBgColor[props.type]
+        return typesBgColor[props.type]
     }
 })
 
@@ -54,7 +49,6 @@ const label = computed(() => {
 <template>
     <div
         v-if="props.point"
-        :class="{ 'redis-type-tag-loading': props.loading }"
         :style="{
             backgroundColor: fontColor,
             width: Math.max(props.pointSize, 5) + 'px',
@@ -67,17 +61,12 @@ const label = computed(() => {
             'redis-type-tag-normal': !props.short && props.size !== 'small',
             'redis-type-tag-small': !props.short && props.size === 'small',
             'redis-type-tag-round': props.round,
-            'redis-type-tag-loading': props.loading,
         }"
         :color="{ color: backgroundColor, textColor: fontColor }"
         :size="props.size"
         bordered
         strong>
-        <b v-if="!props.loading">{{ label }}</b>
+        <b>{{ label }}</b>
-        <n-icon v-else-if="props.short" size="14">
-            <loading stroke-width="4" />
-        </n-icon>
-        <b v-else>LOADING</b>
         <template #icon>
             <n-icon v-if="binaryKey" :component="Binary" size="18" />
         </template>
@@ -96,20 +85,4 @@ const label = computed(() => {
 .redis-type-tag-small {
     padding: 0 5px;
 }
-
-.redis-type-tag-loading {
-    animation: fadeInOut 2s infinite;
-}
-
-@keyframes fadeInOut {
-    0% {
-        opacity: 0.4;
-    }
-    50% {
-        opacity: 1;
-    }
-    100% {
-        opacity: 0.4;
-    }
-}
 </style>

frontend/src/components/icons/Loading.vue

@@ -1,51 +0,0 @@
-<script setup>
-const props = defineProps({
-    strokeWidth: {
-        type: [Number, String],
-        default: 3,
-    },
-})
-</script>
-
-<template>
-    <svg fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
-        <path
-            :stroke-width="props.strokeWidth"
-            d="M7 4H41"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round" />
-        <path
-            :stroke-width="props.strokeWidth"
-            d="M7 44H41"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round" />
-        <path
-            :stroke-width="props.strokeWidth"
-            d="M11 44C13.6667 30.6611 18 23.9944 24 24C30 24.0056 34.3333 30.6722 37 44H11Z"
-            fill="none"
-            stroke="currentColor"
-            stroke-linejoin="round" />
-        <path
-            :stroke-width="props.strokeWidth"
-            d="M37 4C34.3333 17.3389 30 24.0056 24 24C18 23.9944 13.6667 17.3278 11 4H37Z"
-            fill="none"
-            stroke="currentColor"
-            stroke-linejoin="round" />
-        <path
-            :stroke-width="props.strokeWidth"
-            d="M21 15H27"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round" />
-        <path
-            :stroke-width="props.strokeWidth"
-            d="M19 38H29"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round" />
-    </svg>
-</template>
-
-<style lang="scss" scoped></style>

frontend/src/components/sidebar/BrowserPane.vue

@@ -154,8 +154,8 @@ const onDisconnect = () => {
 const handleSelectDB = async (db) => {
     try {
         loading.value = true
-        browserStore.setKeyFilter(props.server, {})
         browserStore.closeDatabase(props.server, props.db)
+        browserStore.setKeyFilter(props.server, {})
         await browserStore.openDatabase(props.server, db)
         await nextTick()
         await connectionStore.saveLastDB(props.server, db)
@@ -163,7 +163,6 @@ const handleSelectDB = async (db) => {
         // browserTreeRef.value?.resetExpandKey(props.server, db)
         fullyLoaded.value = await browserStore.loadMoreKeys(props.server, db)
         browserTreeRef.value?.refreshTree()
-        tabStore.setSelectedKeys(props.server)
     } catch (e) {
         $message.error(e.message)
     } finally {

frontend/src/components/sidebar/BrowserTree.vue

@@ -379,14 +379,21 @@ const renderPrefix = ({ option }) => {
                     },
                 )
             }
-            const loading = isEmpty(option.redisType) || option.redisType === 'loading'
+            if (option.redisType == null || option.redisType === 'loading') {
-            if (loading) {
                 browserStore.loadKeyType({
                     server: props.server,
                     db: option.db,
                     key: option.redisKey,
                     keyCode: option.redisKeyCode,
                 })
+                // in loading
+                return h(
+                    NIcon,
+                    { size: 20 },
+                    {
+                        default: () => h(!!option.redisKeyCode ? Binary : Key),
+                    },
+                )
             }
             switch (prefStore.keyIconType) {
                 case typesIconStyle.FULL:
@@ -395,14 +402,12 @@ const renderPrefix = ({ option }) => {
                         short: false,
                         size: 'small',
                         inverse: includes(selectedKeys.value, option.key),
-                        loading,
                     })
 
                 case typesIconStyle.POINT:
                     return h(RedisTypeTag, {
                         type: toUpper(option.redisType),
                         point: true,
-                        loading,
                     })
 
                 case typesIconStyle.SHORT:
@@ -411,7 +416,6 @@ const renderPrefix = ({ option }) => {
                         type: toUpper(option.redisType),
                         short: true,
                         size: 'small',
-                        loading,
                         inverse: includes(selectedKeys.value, option.key),
                     })
             }

frontend/src/components/sidebar/Ribbon.vue

@@ -157,7 +157,6 @@ const exThemeVars = computed(() => {
     background-color: v-bind('exThemeVars.ribbonColor');
     box-sizing: border-box;
     color: v-bind('themeVars.textColor2');
-    --wails-draggable: drag;
 
     .ribbon-wrapper {
         gap: 2px;
@@ -166,7 +165,6 @@ const exThemeVars = computed(() => {
         align-items: center;
         box-sizing: border-box;
         padding-right: 3px;
-        --wails-draggable: none;
 
         .ribbon-item {
             width: 100%;
@@ -221,7 +219,6 @@ const exThemeVars = computed(() => {
         align-items: center;
         padding: 10px 0;
         gap: 15px;
-        --wails-draggable: none;
 
         .nav-menu-button {
             margin-bottom: 6px;

frontend/src/stores/browser.js

@@ -3,9 +3,9 @@ import {
     endsWith,
     find,
     get,
-    initial,
     isEmpty,
     join,
+    last,
     map,
     remove,
     set,
@@ -477,22 +477,16 @@ const useBrowserStore = defineStore('browser', {
          * @return {Promise<void>}
          */
         async loadKeyType({ server, db, key, keyCode }) {
-            const nodeMap = this._getNodeMap(server, db)
-            const node = nodeMap.get(`${ConnectionType.RedisValue}/${key}`)
-            if (node == null || !isEmpty(node.redisType)) {
-                return
-            }
             try {
-                node.redisType = 'loading'
+                const nodeMap = this._getNodeMap(server, db)
-                const { data, success } = await GetKeyType({ server, db, key: keyCode || key })
+                const node = nodeMap.get(`${ConnectionType.RedisValue}/${key}`)
-                if (success) {
+                if (node == null || node.redisType != null) {
-                    const { type } = data || {}
+                    return
-                    node.redisType = type
-                } else {
-                    node.redisType = 'NONE'
                 }
-            } catch (e) {
+                node.redisType = 'loading'
-                node.redisType = 'NONE'
+                const { data } = await GetKeyType({ server, db, key: keyCode || key })
+                const { type } = data || {}
+                node.redisType = type
             } finally {
             }
         },
@@ -1712,20 +1706,29 @@ const useBrowserStore = defineStore('browser', {
 
         /**
          *
-         * @param {string} server
+         * @param {string} connName
          * @param {number} db
          * @param {string} key
          * @param {string} newKey
          * @private
          */
-        _renameKeyNode(server, db, key, newKey) {
+        _renameKeyNode(connName, db, key, newKey) {
-            this._deleteKeyNode(server, db, key, false)
+            const nodeMap = this._getNodeMap(connName, db)
-            const { success } = this._addKeyNodes(server, db, [newKey])
+            const nodeKey = `${ConnectionType.RedisValue}/${key}`
-
+            const newNodeKey = `${ConnectionType.RedisValue}/${newKey}`
-            if (success) {
+            const node = nodeMap.get(nodeKey)
-                const separator = this._getSeparator(server)
+            if (node != null) {
-                const layer = initial(key.split(separator)).join(separator)
+                // replace node map item
-                this._tidyNode(server, db, layer)
+                const separator = this._getSeparator(connName)
+                node.label = last(split(newKey, separator))
+                node.key = `${connName}/db${db}#${newNodeKey}`
+                node.redisKey = newKey
+                nodeMap[newNodeKey] = node
+                nodeMap.delete(nodeKey)
+                // replace key set item
+                const keySet = this._getKeySet(connName, db)
+                keySet.delete(key)
+                keySet.add(newKey)
             }
         },
 
@@ -1937,18 +1940,18 @@ const useBrowserStore = defineStore('browser', {
 
         /**
          * rename key
-         * @param {string} server
+         * @param {string} connName
          * @param {number} db
          * @param {string} key
          * @param {string} newKey
          * @returns {Promise<{[msg]: string, success: boolean, [nodeKey]: string}>}
          */
-        async renameKey(server, db, key, newKey) {
+        async renameKey(connName, db, key, newKey) {
-            const { success = false, msg } = await RenameKey(server, db, key, newKey)
+            const { success = false, msg } = await RenameKey(connName, db, key, newKey)
             if (success) {
                 // delete old key and add new key struct
-                this._renameKeyNode(server, db, key, newKey)
+                this._renameKeyNode(connName, db, key, newKey)
-                return { success: true, nodeKey: `${server}/db${db}#${ConnectionType.RedisValue}/${newKey}` }
+                return { success: true, nodeKey: `${connName}/db${db}#${ConnectionType.RedisValue}/${newKey}` }
             } else {
                 return { success: false, msg }
             }