doc: update README and screenshots

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,6 +36,7 @@
 * 提供慢日志展示
 * 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,21 +80,20 @@ 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) {
-	item, err := b.getRedisClient(name, 0)
+	// get connection config
+	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
@@ -222,7 +221,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 {
@@ -275,7 +274,7 @@ func (b *browserService) getRedisClient(connName string, db int) (item connectio
 			return
 		}
 		ctx, cancelFunc := context.WithCancel(b.ctx)
-		item = connectionItem{
+		item = &connectionItem{
 			client:      client,
 			ctx:         ctx,
 			cancelFunc:  cancelFunc,
@@ -289,14 +288,19 @@ func (b *browserService) getRedisClient(connName string, db int) (item connectio
 		b.connMap[connName] = item
 	}
 
-	if db >= 0 && item.db != db {
+	// BUG: go-redis might not be executing commands on the corresponding database
+	// 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 {
-			if err = rdb.Do(item.ctx, "select", strconv.Itoa(db)).Err(); err != nil {
+			_, err = rdb.Pipelined(item.ctx, func(pipe redis.Pipeliner) error {
+				return pipe.Select(item.ctx, db).Err()
+			})
+			if err != nil {
 				return
 			}
 			item.db = db
-			b.connMap[connName] = item
+			b.connMap[connName].db = db
 		}
 	}
 	return
@@ -358,7 +362,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, 0)
+	item, err := b.getRedisClient(name, -1)
 	if err != nil {
 		resp.Msg = err.Error()
 		return

frontend/src/components/common/RedisTypeTag.vue

@@ -3,6 +3,8 @@ 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: {
@@ -20,21 +22,24 @@ const props = defineProps({
     },
     round: Boolean,
     inverse: Boolean,
+    loading: Boolean,
 })
 
+const themeVars = useThemeVars()
+
 const fontColor = computed(() => {
     if (props.inverse) {
-        return typesBgColor[props.type]
+        return props.loading ? themeVars.value.tagColor : typesBgColor[props.type]
     } else {
-        return typesColor[props.type]
+        return props.loading ? themeVars.value.textColorBase : typesColor[props.type]
     }
 })
 
 const backgroundColor = computed(() => {
     if (props.inverse) {
-        return typesColor[props.type]
+        return props.loading ? themeVars.value.textColorBase : typesColor[props.type]
     } else {
-        return typesBgColor[props.type]
+        return props.loading ? themeVars.value.tagColor : typesBgColor[props.type]
     }
 })
 
@@ -49,6 +54,7 @@ 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',
@@ -61,12 +67,17 @@ 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>{{ label }}</b>
+        <b v-if="!props.loading">{{ 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>
@@ -85,4 +96,20 @@ 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

@@ -0,0 +1,51 @@
+<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.closeDatabase(props.server, props.db)
         browserStore.setKeyFilter(props.server, {})
+        browserStore.closeDatabase(props.server, props.db)
         await browserStore.openDatabase(props.server, db)
         await nextTick()
         await connectionStore.saveLastDB(props.server, db)
@@ -163,6 +163,7 @@ 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,21 +379,14 @@ const renderPrefix = ({ option }) => {
                     },
                 )
             }
-            if (option.redisType == null || option.redisType === 'loading') {
+            const loading = isEmpty(option.redisType) || 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:
@@ -402,12 +395,14 @@ 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:
@@ -416,6 +411,7 @@ 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,6 +157,7 @@ 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;
@@ -165,6 +166,7 @@ const exThemeVars = computed(() => {
         align-items: center;
         box-sizing: border-box;
         padding-right: 3px;
+        --wails-draggable: none;
 
         .ribbon-item {
             width: 100%;
@@ -219,6 +221,7 @@ 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,16 +477,22 @@ 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 {
-                const nodeMap = this._getNodeMap(server, db)
-                const node = nodeMap.get(`${ConnectionType.RedisValue}/${key}`)
-                if (node == null || node.redisType != null) {
-                    return
-                }
                 node.redisType = 'loading'
-                const { data } = await GetKeyType({ server, db, key: keyCode || key })
-                const { type } = data || {}
-                node.redisType = type
+                const { data, success } = await GetKeyType({ server, db, key: keyCode || key })
+                if (success) {
+                    const { type } = data || {}
+                    node.redisType = type
+                } else {
+                    node.redisType = 'NONE'
+                }
+            } catch (e) {
+                node.redisType = 'NONE'
             } finally {
             }
         },
@@ -1706,29 +1712,20 @@ const useBrowserStore = defineStore('browser', {
 
         /**
          *
-         * @param {string} connName
+         * @param {string} server
          * @param {number} db
          * @param {string} key
          * @param {string} newKey
          * @private
          */
-        _renameKeyNode(connName, db, key, newKey) {
-            const nodeMap = this._getNodeMap(connName, db)
-            const nodeKey = `${ConnectionType.RedisValue}/${key}`
-            const newNodeKey = `${ConnectionType.RedisValue}/${newKey}`
-            const node = nodeMap.get(nodeKey)
-            if (node != null) {
-                // replace node map item
-                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)
+        _renameKeyNode(server, db, key, newKey) {
+            this._deleteKeyNode(server, db, key, false)
+            const { success } = this._addKeyNodes(server, db, [newKey])
+
+            if (success) {
+                const separator = this._getSeparator(server)
+                const layer = initial(key.split(separator)).join(separator)
+                this._tidyNode(server, db, layer)
             }
         },
 
@@ -1940,18 +1937,18 @@ const useBrowserStore = defineStore('browser', {
 
         /**
          * rename key
-         * @param {string} connName
+         * @param {string} server
          * @param {number} db
          * @param {string} key
          * @param {string} newKey
          * @returns {Promise<{[msg]: string, success: boolean, [nodeKey]: string}>}
          */
-        async renameKey(connName, db, key, newKey) {
-            const { success = false, msg } = await RenameKey(connName, db, key, newKey)
+        async renameKey(server, db, key, newKey) {
+            const { success = false, msg } = await RenameKey(server, db, key, newKey)
             if (success) {
                 // delete old key and add new key struct
-                this._renameKeyNode(connName, db, key, newKey)
-                return { success: true, nodeKey: `${connName}/db${db}#${ConnectionType.RedisValue}/${newKey}` }
+                this._renameKeyNode(server, db, key, newKey)
+                return { success: true, nodeKey: `${server}/db${db}#${ConnectionType.RedisValue}/${newKey}` }
             } else {
                 return { success: false, msg }
             }