perf: support format viewing for entry value #65

fix: table columns lose reactive

backend/services/browser_service.go

@@ -2,6 +2,7 @@ package services
 
 import (
 	"context"
+	"encoding/json"
 	"errors"
 	"fmt"
 	"github.com/redis/go-redis/v9"
@@ -580,6 +581,11 @@ func (b *browserService) GetKeyDetail(param types.KeyDetailParam) (resp types.JS
 		resp.Msg = "key not exists"
 		return
 	}
+	var doConvert bool
+	if (len(param.Decode) > 0 && param.Decode != types.DECODE_NONE) ||
+		(len(param.Format) > 0 && param.Format != types.FORMAT_RAW) {
+		doConvert = true
+	}
 
 	var data types.KeyDetail
 	//var cursor uint64
@@ -633,82 +639,101 @@ func (b *browserService) GetKeyDetail(param types.KeyDetailParam) (resp types.JS
 		//data.Value, data.Decode, data.Format = strutil.ConvertTo(str, param.Decode, param.Format)
 
 	case "list":
-		loadListHandle := func() ([]string, bool, error) {
+		loadListHandle := func() ([]types.ListEntryItem, bool, error) {
-			var items []string
+			var loadVal []string
 			var cursor uint64
+			var subErr error
 			if param.Full {
 				// load all
 				cursor = 0
-				items, err = client.LRange(ctx, key, 0, -1).Result()
+				loadVal, subErr = client.LRange(ctx, key, 0, -1).Result()
 			} else {
-				cursor, _ = getEntryCursor()
+				if param.Reset {
+					cursor = 0
+				} else {
+					cursor, _ = getEntryCursor()
+				}
 				scanSize := int64(Preferences().GetScanSize())
-				items, err = client.LRange(ctx, key, int64(cursor), int64(cursor)+scanSize-1).Result()
+				loadVal, subErr = client.LRange(ctx, key, int64(cursor), int64(cursor)+scanSize-1).Result()
 				cursor = cursor + uint64(scanSize)
-				if len(items) < int(scanSize) {
+				if len(loadVal) < int(scanSize) {
 					cursor = 0
 				}
 			}
 			setEntryCursor(cursor)
-			if err != nil {
+
-				return items, false, err
+			items := make([]types.ListEntryItem, len(loadVal))
+			for i, val := range loadVal {
+				items[i].Value = val
+				if doConvert {
+					if dv, _, _ := strutil.ConvertTo(val, param.Decode, param.Format); dv != val {
+						items[i].DisplayValue = dv
+					}
+				}
+			}
+			if subErr != nil {
+				return items, false, subErr
 			}
 			return items, cursor == 0, nil
 		}
 
 		data.Value, data.End, err = loadListHandle()
+		data.Decode, data.Format = param.Decode, param.Format
+		if err != nil {
+			resp.Msg = err.Error()
+			return
+		}
 
 	case "hash":
 		loadHashHandle := func() ([]types.HashEntryItem, bool, error) {
-			//items := map[string]string{}
+			var items []types.HashEntryItem
-			scanSize := int64(Preferences().GetScanSize())
-			items := make([]types.HashEntryItem, 0, scanSize)
 			var loadedVal []string
 			var cursor uint64
-			var doConvert = len(param.Decode) > 0 && len(param.Format) > 0
+			var subErr error
+			scanSize := int64(Preferences().GetScanSize())
 			if param.Full {
 				// load all
 				cursor = 0
 				for {
-					loadedVal, cursor, err = client.HScan(ctx, key, cursor, "*", scanSize).Result()
+					loadedVal, cursor, subErr = client.HScan(ctx, key, cursor, "*", scanSize).Result()
-					if err != nil {
+					if subErr != nil {
-						return nil, false, err
+						return nil, false, subErr
 					}
-					var v string
 					for i := 0; i < len(loadedVal); i += 2 {
-						if doConvert {
-							v, _, _ = strutil.ConvertTo(loadedVal[i+1], param.Decode, param.Format)
-						} else {
-							v = loadedVal[i+1]
-						}
 						items = append(items, types.HashEntryItem{
-							Key:          loadedVal[i],
+							Key:   loadedVal[i],
-							Value:        strutil.EncodeRedisKey(loadedVal[i+1]),
+							Value: strutil.EncodeRedisKey(loadedVal[i+1]),
-							DisplayValue: v,
 						})
+						if doConvert {
+							if dv, _, _ := strutil.ConvertTo(loadedVal[i+1], param.Decode, param.Format); dv != loadedVal[i+1] {
+								items[len(items)-1].DisplayValue = dv
+							}
+						}
 					}
 					if cursor == 0 {
 						break
 					}
 				}
 			} else {
-				cursor, _ = getEntryCursor()
+				if param.Reset {
-				loadedVal, cursor, err = client.HScan(ctx, key, cursor, matchPattern, scanSize).Result()
+					cursor = 0
-				if err != nil {
+				} else {
-					return nil, false, err
+					cursor, _ = getEntryCursor()
 				}
-				var v string
+				loadedVal, cursor, subErr = client.HScan(ctx, key, cursor, matchPattern, scanSize).Result()
-				for i := 0; i < len(loadedVal); i += 2 {
+				if subErr != nil {
+					return nil, false, subErr
+				}
+				loadedLen := len(loadedVal)
+				items = make([]types.HashEntryItem, loadedLen/2)
+				for i := 0; i < loadedLen; i += 2 {
+					items[i/2].Key = loadedVal[i]
+					items[i/2].Value = strutil.EncodeRedisKey(loadedVal[i+1])
 					if doConvert {
-						v, _, _ = strutil.ConvertTo(loadedVal[i+1], param.Decode, param.Format)
+						if dv, _, _ := strutil.ConvertTo(loadedVal[i+1], param.Decode, param.Format); dv != loadedVal[i+1] {
-					} else {
+							items[i/2].DisplayValue = dv
-						v = loadedVal[i+1]
+						}
 					}
-					items = append(items, types.HashEntryItem{
-						Key:          loadedVal[i],
-						Value:        strutil.EncodeRedisKey(loadedVal[i+1]),
-						DisplayValue: v,
-					})
 				}
 			}
 			setEntryCursor(cursor)
@@ -723,42 +748,65 @@ func (b *browserService) GetKeyDetail(param types.KeyDetailParam) (resp types.JS
 		}
 
 	case "set":
-		loadSetHandle := func() ([]string, bool, error) {
+		loadSetHandle := func() ([]types.SetEntryItem, bool, error) {
-			var items []string
+			var items []types.SetEntryItem
 			var cursor uint64
-			scanSize := int64(Preferences().GetScanSize())
+			var subErr error
 			var loadedKey []string
+			scanSize := int64(Preferences().GetScanSize())
 			if param.Full {
 				// load all
 				cursor = 0
 				for {
-					loadedKey, cursor, err = client.SScan(ctx, key, cursor, param.MatchPattern, scanSize).Result()
+					loadedKey, cursor, subErr = client.SScan(ctx, key, cursor, param.MatchPattern, scanSize).Result()
-					if err != nil {
+					if subErr != nil {
-						return items, false, err
+						return items, false, subErr
+					}
+					for _, val := range loadedKey {
+						items = append(items, types.SetEntryItem{
+							Value: val,
+						})
+						if doConvert {
+							if dv, _, _ := strutil.ConvertTo(val, param.Decode, param.Format); dv != val {
+								items[len(items)-1].DisplayValue = dv
+							}
+						}
 					}
-					items = append(items, loadedKey...)
 					if cursor == 0 {
 						break
 					}
 				}
 			} else {
-				cursor, _ = getEntryCursor()
+				if param.Reset {
-				loadedKey, cursor, err = client.SScan(ctx, key, cursor, param.MatchPattern, scanSize).Result()
+					cursor = 0
-				items = append(items, loadedKey...)
+				} else {
+					cursor, _ = getEntryCursor()
+				}
+				loadedKey, cursor, subErr = client.SScan(ctx, key, cursor, param.MatchPattern, scanSize).Result()
+				items = make([]types.SetEntryItem, len(loadedKey))
+				for i, val := range loadedKey {
+					items[i].Value = val
+					if doConvert {
+						if dv, _, _ := strutil.ConvertTo(val, param.Decode, param.Format); dv != val {
+							items[i].DisplayValue = dv
+						}
+					}
+				}
 			}
 			setEntryCursor(cursor)
 			return items, cursor == 0, nil
 		}
 
 		data.Value, data.End, err = loadSetHandle()
+		data.Decode, data.Format = param.Decode, param.Format
 		if err != nil {
 			resp.Msg = err.Error()
 			return
 		}
 
 	case "zset":
-		loadZSetHandle := func() ([]types.ZSetItem, bool, error) {
+		loadZSetHandle := func() ([]types.ZSetEntryItem, bool, error) {
-			var items []types.ZSetItem
+			var items []types.ZSetEntryItem
 			var cursor uint64
 			scanSize := int64(Preferences().GetScanSize())
 			var loadedVal []string
@@ -773,10 +821,15 @@ func (b *browserService) GetKeyDetail(param types.KeyDetailParam) (resp types.JS
 					var score float64
 					for i := 0; i < len(loadedVal); i += 2 {
 						if score, err = strconv.ParseFloat(loadedVal[i+1], 64); err == nil {
-							items = append(items, types.ZSetItem{
+							items = append(items, types.ZSetEntryItem{
 								Value: loadedVal[i],
 								Score: score,
 							})
+							if doConvert {
+								if dv, _, _ := strutil.ConvertTo(loadedVal[i], param.Decode, param.Format); dv != loadedVal[i] {
+									items[len(items)-1].DisplayValue = dv
+								}
+							}
 						}
 					}
 					if cursor == 0 {
@@ -784,15 +837,24 @@ func (b *browserService) GetKeyDetail(param types.KeyDetailParam) (resp types.JS
 					}
 				}
 			} else {
-				cursor, _ = getEntryCursor()
+				if param.Reset {
+					cursor = 0
+				} else {
+					cursor, _ = getEntryCursor()
+				}
 				loadedVal, cursor, err = client.ZScan(ctx, key, cursor, param.MatchPattern, scanSize).Result()
+				loadedLen := len(loadedVal)
+				items = make([]types.ZSetEntryItem, loadedLen/2)
 				var score float64
-				for i := 0; i < len(loadedVal); i += 2 {
+				for i := 0; i < loadedLen; i += 2 {
 					if score, err = strconv.ParseFloat(loadedVal[i+1], 64); err == nil {
-						items = append(items, types.ZSetItem{
+						items[i/2].Score = score
-							Value: loadedVal[i],
+						items[i/2].Value = loadedVal[i]
-							Score: score,
+						if doConvert {
-						})
+							if dv, _, _ := strutil.ConvertTo(loadedVal[i], param.Decode, param.Format); dv != loadedVal[i] {
+								items[i/2].DisplayValue = dv
+							}
+						}
 					}
 				}
 			}
@@ -801,15 +863,15 @@ func (b *browserService) GetKeyDetail(param types.KeyDetailParam) (resp types.JS
 		}
 
 		data.Value, data.End, err = loadZSetHandle()
+		data.Decode, data.Format = param.Decode, param.Format
 		if err != nil {
 			resp.Msg = err.Error()
 			return
 		}
 
 	case "stream":
-		loadStreamHandle := func() ([]types.StreamItem, bool, error) {
+		loadStreamHandle := func() ([]types.StreamEntryItem, bool, error) {
 			var msgs []redis.XMessage
-			var items []types.StreamItem
 			var last string
 			if param.Full {
 				// load all
@@ -817,7 +879,11 @@ func (b *browserService) GetKeyDetail(param types.KeyDetailParam) (resp types.JS
 				msgs, err = client.XRevRange(ctx, key, "+", "-").Result()
 			} else {
 				scanSize := int64(Preferences().GetScanSize())
-				_, last = getEntryCursor()
+				if param.Reset {
+					last = ""
+				} else {
+					_, last = getEntryCursor()
+				}
 				if len(last) <= 0 {
 					last = "+"
 				}
@@ -836,11 +902,15 @@ func (b *browserService) GetKeyDetail(param types.KeyDetailParam) (resp types.JS
 				}
 			}
 			setEntryXLast(last)
-			for _, msg := range msgs {
+			items := make([]types.StreamEntryItem, len(msgs))
-				items = append(items, types.StreamItem{
+			for i, msg := range msgs {
-					ID:    msg.ID,
+				items[i].ID = msg.ID
-					Value: msg.Values,
+				items[i].Value = msg.Values
-				})
+				if vb, merr := json.Marshal(msg.Values); merr != nil {
+					items[i].DisplayValue = "{}"
+				} else {
+					items[i].DisplayValue, _, _ = strutil.ConvertTo(string(vb), types.DECODE_NONE, types.FORMAT_JSON)
+				}
 			}
 			if err != nil {
 				return items, false, err
@@ -849,6 +919,7 @@ func (b *browserService) GetKeyDetail(param types.KeyDetailParam) (resp types.JS
 		}
 
 		data.Value, data.End, err = loadStreamHandle()
+		data.Decode, data.Format = param.Decode, param.Format
 		if err != nil {
 			resp.Msg = err.Error()
 			return
@@ -912,7 +983,7 @@ func (b *browserService) SetKeyValue(param types.SetKeyParam) (resp types.JSResp
 		} else {
 			var saveStr string
 			if saveStr, err = strutil.SaveAs(str, param.Format, param.Decode); err != nil {
-				resp.Msg = fmt.Sprintf(`save to "%s" type fail: %s`, param.Format, err.Error())
+				resp.Msg = fmt.Sprintf(`save to type "%s" fail: %s`, param.Format, err.Error())
 				return
 			}
 			_, err = client.Set(ctx, key, saveStr, 0).Result()
@@ -1023,7 +1094,7 @@ func (b *browserService) SetHashValue(param types.SetHashParam) (resp types.JSRe
 	str := strutil.DecodeRedisKey(param.Value)
 	var saveStr string
 	if saveStr, err = strutil.SaveAs(str, param.Format, param.Decode); err != nil {
-		resp.Msg = fmt.Sprintf(`save to "%s" type fail: %s`, param.Format, err.Error())
+		resp.Msg = fmt.Sprintf(`save to type "%s" fail: %s`, param.Format, err.Error())
 		return
 	}
 	var removedField []string
@@ -1148,20 +1219,21 @@ func (b *browserService) AddListItem(connName string, db int, k any, action int,
 }
 
 // SetListItem update or remove list item by index
-func (b *browserService) SetListItem(connName string, db int, k any, index int64, value string) (resp types.JSResp) {
+func (b *browserService) SetListItem(param types.SetListParam) (resp types.JSResp) {
-	item, err := b.getRedisClient(connName, db)
+	item, err := b.getRedisClient(param.Server, param.DB)
 	if err != nil {
 		resp.Msg = err.Error()
 		return
 	}
 
 	client, ctx := item.client, item.ctx
-	key := strutil.DecodeRedisKey(k)
+	key := strutil.DecodeRedisKey(param.Key)
+	str := strutil.DecodeRedisKey(param.Value)
 	var removed []int64
 	updated := map[int64]string{}
-	if len(value) <= 0 {
+	if len(str) <= 0 {
 		// remove from list
-		err = client.LSet(ctx, key, index, "---VALUE_REMOVED_BY_TINY_RDM---").Err()
+		err = client.LSet(ctx, key, param.Index, "---VALUE_REMOVED_BY_TINY_RDM---").Err()
 		if err != nil {
 			resp.Msg = err.Error()
 			return
@@ -1172,15 +1244,20 @@ func (b *browserService) SetListItem(connName string, db int, k any, index int64
 			resp.Msg = err.Error()
 			return
 		}
-		removed = append(removed, index)
+		removed = append(removed, param.Index)
 	} else {
 		// replace index value
-		err = client.LSet(ctx, key, index, value).Err()
+		var saveStr string
+		if saveStr, err = strutil.SaveAs(str, param.Format, param.Decode); err != nil {
+			resp.Msg = fmt.Sprintf(`save to type "%s" fail: %s`, param.Format, err.Error())
+			return
+		}
+		err = client.LSet(ctx, key, param.Index, saveStr).Err()
 		if err != nil {
 			resp.Msg = err.Error()
 			return
 		}
-		updated[index] = value
+		updated[param.Index] = saveStr
 	}
 
 	resp.Success = true
@@ -1192,8 +1269,8 @@ func (b *browserService) SetListItem(connName string, db int, k any, index int64
 }
 
 // SetSetItem add members to set or remove from set
-func (b *browserService) SetSetItem(connName string, db int, k any, remove bool, members []any) (resp types.JSResp) {
+func (b *browserService) SetSetItem(server string, db int, k any, remove bool, members []any) (resp types.JSResp) {
-	item, err := b.getRedisClient(connName, db)
+	item, err := b.getRedisClient(server, db)
 	if err != nil {
 		resp.Msg = err.Error()
 		return
@@ -1220,66 +1297,88 @@ func (b *browserService) SetSetItem(connName string, db int, k any, remove bool,
 }
 
 // UpdateSetItem replace member of set
-func (b *browserService) UpdateSetItem(connName string, db int, k any, value, newValue string) (resp types.JSResp) {
+func (b *browserService) UpdateSetItem(param types.SetSetParam) (resp types.JSResp) {
-	item, err := b.getRedisClient(connName, db)
+	item, err := b.getRedisClient(param.Server, param.DB)
 	if err != nil {
 		resp.Msg = err.Error()
 		return
 	}
 
 	client, ctx := item.client, item.ctx
-	key := strutil.DecodeRedisKey(k)
+	key := strutil.DecodeRedisKey(param.Key)
-	_, _ = client.SRem(ctx, key, value).Result()
+	// remove old value
-	_, err = client.SAdd(ctx, key, newValue).Result()
+	str := strutil.DecodeRedisKey(param.Value)
+	_, _ = client.SRem(ctx, key, str).Result()
+
+	// insert new value
+	str = strutil.DecodeRedisKey(param.NewValue)
+	var saveStr string
+	if saveStr, err = strutil.SaveAs(str, param.Format, param.Decode); err != nil {
+		resp.Msg = fmt.Sprintf(`save to type "%s" fail: %s`, param.Format, err.Error())
+		return
+	}
+	_, err = client.SAdd(ctx, key, saveStr).Result()
 	if err != nil {
 		resp.Msg = err.Error()
 		return
 	}
 
 	resp.Success = true
+	resp.Data = map[string]any{
+		"added": saveStr,
+	}
 	return
 }
 
 // UpdateZSetValue update value of sorted set member
-func (b *browserService) UpdateZSetValue(connName string, db int, k any, value, newValue string, score float64) (resp types.JSResp) {
+func (b *browserService) UpdateZSetValue(param types.SetZSetParam) (resp types.JSResp) {
-	item, err := b.getRedisClient(connName, db)
+	item, err := b.getRedisClient(param.Server, param.DB)
 	if err != nil {
 		resp.Msg = err.Error()
 		return
 	}
 
 	client, ctx := item.client, item.ctx
-	key := strutil.DecodeRedisKey(k)
+	key := strutil.DecodeRedisKey(param.Key)
-	updated := map[string]any{}
+	val, newVal := strutil.DecodeRedisKey(param.Value), strutil.DecodeRedisKey(param.NewValue)
+	updated := map[string]float64{}
 	var removed []string
-	if len(newValue) <= 0 {
+	if len(newVal) <= 0 {
-		// blank new value, delete value
+		// no new value, delete value
-		_, err = client.ZRem(ctx, key, value).Result()
+		_, err = client.ZRem(ctx, key, val).Result()
 		if err == nil {
-			removed = append(removed, value)
+			removed = append(removed, val)
-		}
-	} else if newValue == value {
-		// update score only
-		_, err = client.ZAdd(ctx, key, redis.Z{
-			Score:  score,
-			Member: value,
-		}).Result()
-		if err == nil {
-			updated[value] = score
 		}
 	} else {
-		// remove old value and add new one
+		var saveVal string
-		_, err = client.ZRem(ctx, key, value).Result()
+		if saveVal, err = strutil.SaveAs(newVal, param.Format, param.Decode); err != nil {
-		if err == nil {
+			resp.Msg = fmt.Sprintf(`save to type "%s" fail: %s`, param.Format, err.Error())
-			removed = append(removed, value)
+			return
 		}
 
-		_, err = client.ZAdd(ctx, key, redis.Z{
+		if saveVal == val {
-			Score:  score,
+			// update score only
-			Member: newValue,
+			_, err = client.ZAdd(ctx, key, redis.Z{
-		}).Result()
+				Score:  param.Score,
-		if err == nil {
+				Member: saveVal,
-			updated[newValue] = score
+			}).Result()
+			if err == nil {
+				updated[saveVal] = param.Score
+			}
+		} else {
+			// remove old value and add new one
+			_, err = client.ZRem(ctx, key, val).Result()
+			if err == nil {
+				removed = append(removed, val)
+			}
+
+			_, err = client.ZAdd(ctx, key, redis.Z{
+				Score:  param.Score,
+				Member: saveVal,
+			}).Result()
+			if err == nil {
+				updated[saveVal] = param.Score
+			}
 		}
 	}
 	if err != nil {

backend/types/js_resp.go

@@ -30,12 +30,6 @@ type KeyDetailParam struct {
 	Full         bool   `json:"full"`
 }
 
-type HashEntryItem struct {
-	Key          string `json:"k"`
-	Value        any    `json:"v"`
-	DisplayValue string `json:"dv"`
-}
-
 type KeyDetail struct {
 	Value  any    `json:"value"`
 	Length int64  `json:"length,omitempty"`
@@ -55,6 +49,16 @@ type SetKeyParam struct {
 	Decode  string `json:"decode,omitempty"`
 }
 
+type SetListParam struct {
+	Server string `json:"server"`
+	DB     int    `json:"db"`
+	Key    any    `json:"key"`
+	Index  int64  `json:"index"`
+	Value  any    `json:"value"`
+	Format string `json:"format,omitempty"`
+	Decode string `json:"decode,omitempty"`
+}
+
 type SetHashParam struct {
 	Server   string `json:"server"`
 	DB       int    `json:"db"`
@@ -65,3 +69,24 @@ type SetHashParam struct {
 	Format   string `json:"format,omitempty"`
 	Decode   string `json:"decode,omitempty"`
 }
+
+type SetSetParam struct {
+	Server   string `json:"server"`
+	DB       int    `json:"db"`
+	Key      any    `json:"key"`
+	Value    any    `json:"value"`
+	NewValue any    `json:"newValue"`
+	Format   string `json:"format,omitempty"`
+	Decode   string `json:"decode,omitempty"`
+}
+
+type SetZSetParam struct {
+	Server   string  `json:"server"`
+	DB       int     `json:"db"`
+	Key      any     `json:"key"`
+	Value    any     `json:"value"`
+	NewValue any     `json:"newValue"`
+	Score    float64 `json:"score"`
+	Format   string  `json:"format,omitempty"`
+	Decode   string  `json:"decode,omitempty"`
+}

backend/types/redis_wrapper.go

@@ -1,11 +1,29 @@
 package types
 
-type ZSetItem struct {
+type ListEntryItem struct {
-	Value string  `json:"value"`
+	Value        any    `json:"v"`
-	Score float64 `json:"score"`
+	DisplayValue string `json:"dv,omitempty"`
 }
 
-type StreamItem struct {
+type HashEntryItem struct {
-	ID    string         `json:"id"`
+	Key          string `json:"k"`
-	Value map[string]any `json:"value"`
+	Value        any    `json:"v"`
+	DisplayValue string `json:"dv,omitempty"`
+}
+
+type SetEntryItem struct {
+	Value        any    `json:"v"`
+	DisplayValue string `json:"dv,omitempty"`
+}
+
+type ZSetEntryItem struct {
+	Score        float64 `json:"s"`
+	Value        string  `json:"v"`
+	DisplayValue string  `json:"dv,omitempty"`
+}
+
+type StreamEntryItem struct {
+	ID           string         `json:"id"`
+	Value        map[string]any `json:"v"`
+	DisplayValue string         `json:"dv,omitempty"`
 }

backend/utils/string/convert.go

@@ -106,31 +106,34 @@ func decodeWith(str, decodeType string) (value, resultDecode string) {
 // if no decode is possible, it will return the origin string value and "none" decode type
 func autoDecode(str string) (value, resultDecode string) {
 	if len(str) > 0 {
-		var ok bool
+		// pure digit content may incorrect regard as some encoded type, skip decode
-		if value, ok = decodeBase64(str); ok {
+		if match, _ := regexp.MatchString(`^\d+$`, str); !match {
-			resultDecode = types.DECODE_BASE64
+			var ok bool
-			return
+			if value, ok = decodeBase64(str); ok {
-		}
+				resultDecode = types.DECODE_BASE64
+				return
+			}
 
-		if value, ok = decodeGZip(str); ok {
+			if value, ok = decodeGZip(str); ok {
-			resultDecode = types.DECODE_GZIP
+				resultDecode = types.DECODE_GZIP
-			return
+				return
-		}
+			}
 
-		// FIXME: skip decompress with deflate due to incorrect format checking
+			// FIXME: skip decompress with deflate due to incorrect format checking
-		//if value, ok = decodeDeflate(str); ok {
+			//if value, ok = decodeDeflate(str); ok {
-		//	resultDecode = types.DECODE_DEFLATE
+			//	resultDecode = types.DECODE_DEFLATE
-		//	return
+			//	return
-		//}
+			//}
 
-		if value, ok = decodeZStd(str); ok {
+			if value, ok = decodeZStd(str); ok {
-			resultDecode = types.DECODE_ZSTD
+				resultDecode = types.DECODE_ZSTD
-			return
+				return
-		}
+			}
 
-		if value, ok = decodeBrotli(str); ok {
+			if value, ok = decodeBrotli(str); ok {
-			resultDecode = types.DECODE_BROTLI
+				resultDecode = types.DECODE_BROTLI
-			return
+				return
+			}
 		}
 	}
 
@@ -203,11 +206,11 @@ func autoViewAs(str string) (value, resultFormat string) {
 }
 
 func decodeJson(str string) (string, bool) {
-	str = strings.TrimSpace(str)
+	trimedStr := strings.TrimSpace(str)
-	if (strings.HasPrefix(str, "{") && strings.HasSuffix(str, "}")) ||
+	if (strings.HasPrefix(trimedStr, "{") && strings.HasSuffix(trimedStr, "}")) ||
-		(strings.HasPrefix(str, "[") && strings.HasSuffix(str, "]")) {
+		(strings.HasPrefix(trimedStr, "[") && strings.HasSuffix(trimedStr, "]")) {
 		var out bytes.Buffer
-		if err := json.Indent(&out, []byte(str), "", "  "); err == nil {
+		if err := json.Indent(&out, []byte(trimedStr), "", "  "); err == nil {
 			return out.String(), true
 		}
 	}
@@ -215,11 +218,9 @@ func decodeJson(str string) (string, bool) {
 }
 
 func decodeBase64(str string) (string, bool) {
-	if match, _ := regexp.MatchString(`^\d+$`, str); !match {
+	if decodedStr, err := base64.StdEncoding.DecodeString(str); err == nil {
-		if decodedStr, err := base64.StdEncoding.DecodeString(str); err == nil {
+		if s := string(decodedStr); !containsBinary(s) {
-			if s := string(decodedStr); !containsBinary(s) {
+			return s, true
-				return s, true
-			}
 		}
 	}
 	return str, false
@@ -281,9 +282,9 @@ func decodeBrotli(str string) (string, bool) {
 	return str, false
 }
 
-func SaveAs(str, viewType, decodeType string) (value string, err error) {
+func SaveAs(str, format, decode string) (value string, err error) {
 	value = str
-	switch viewType {
+	switch format {
 	case types.FORMAT_JSON:
 		if jsonStr, ok := encodeJson(str); ok {
 			value = jsonStr
@@ -309,7 +310,7 @@ func SaveAs(str, viewType, decodeType string) (value string, err error) {
 		}
 	}
 
-	switch decodeType {
+	switch decode {
 	case types.DECODE_NONE:
 		return
 
@@ -349,18 +350,15 @@ func SaveAs(str, viewType, decodeType string) (value string, err error) {
 		}
 		return
 	}
-	return str, errors.New("fail to save with unknown error")
+	return str, nil
 }
 
 func encodeJson(str string) (string, bool) {
-	var data any
+	var dst bytes.Buffer
-	if err := json.Unmarshal([]byte(str), &data); err == nil {
+	if err := json.Compact(&dst, []byte(str)); err != nil {
-		var jsonByte []byte
+		return str, false
-		if jsonByte, err = json.Marshal(data); err == nil {
-			return string(jsonByte), true
-		}
 	}
-	return str, false
+	return dst.String(), true
 }
 
 func encodeBase64(str string) (string, bool) {

frontend/src/AppContent.vue

@@ -4,7 +4,7 @@ import BrowserPane from './components/sidebar/BrowserPane.vue'
 import { computed, onMounted, reactive, ref, watch } from 'vue'
 import { debounce, get } from 'lodash'
 import { useThemeVars } from 'naive-ui'
-import NavMenu from './components/sidebar/NavMenu.vue'
+import Ribbon from './components/sidebar/Ribbon.vue'
 import ConnectionPane from './components/sidebar/ConnectionPane.vue'
 import ContentServerPane from './components/content/ContentServerPane.vue'
 import useTabStore from './stores/tab.js'
@@ -25,7 +25,7 @@ const props = defineProps({
 })
 
 const data = reactive({
-    navMenuWidth: 60,
+    navMenuWidth: 50,
     toolbarHeight: 38,
 })
 
@@ -163,7 +163,7 @@ onMounted(async () => {
                 :style="prefStore.generalFont"
                 class="flex-box-h flex-item-expand"
                 style="--wails-draggable: none">
-                <nav-menu v-model:value="tabStore.nav" :width="data.navMenuWidth" />
+                <ribbon v-model:value="tabStore.nav" :width="data.navMenuWidth" />
                 <!-- browser page -->
                 <div v-show="tabStore.nav === 'browser'" class="content-area flex-box-h flex-item-expand">
                     <resizeable-wrapper

frontend/src/components/common/IconButton.vue

@@ -24,6 +24,7 @@ const props = defineProps({
     loading: Boolean,
     border: Boolean,
     disabled: Boolean,
+    buttonStyle: [String, Object],
 })
 
 const hasTooltip = computed(() => {
@@ -39,13 +40,16 @@ const hasTooltip = computed(() => {
                 :disabled="disabled"
                 :focusable="false"
                 :loading="loading"
+                :style="props.buttonStyle"
                 :text="!border"
                 :type="type"
                 @click.prevent="emit('click')">
                 <template #icon>
-                    <n-icon :color="props.color || 'currentColor'" :size="props.size">
+                    <slot>
-                        <component :is="props.icon" :stroke-width="props.strokeWidth" />
+                        <n-icon :color="props.color || 'currentColor'" :size="props.size">
-                    </n-icon>
+                            <component :is="props.icon" :stroke-width="props.strokeWidth" />
+                        </n-icon>
+                    </slot>
                 </template>
             </n-button>
         </template>
@@ -61,9 +65,11 @@ const hasTooltip = computed(() => {
         :type="type"
         @click.prevent="emit('click')">
         <template #icon>
-            <n-icon :color="props.color || 'currentColor'" :size="props.size">
+            <slot>
-                <component :is="props.icon" :stroke-width="props.strokeWidth" />
+                <n-icon :color="props.color || 'currentColor'" :size="props.size">
-            </n-icon>
+                    <component :is="props.icon" :stroke-width="props.strokeWidth" />
+                </n-icon>
+            </slot>
         </template>
     </n-button>
 </template>

frontend/src/components/content/ContentLogPane.vue

@@ -2,7 +2,7 @@
 import { computed, h, nextTick, reactive, ref } from 'vue'
 import IconButton from '@/components/common/IconButton.vue'
 import Refresh from '@/components/icons/Refresh.vue'
-import { map, size, uniqBy } from 'lodash'
+import { map, size, split, uniqBy } from 'lodash'
 import { useI18n } from 'vue-i18n'
 import Delete from '@/components/icons/Delete.vue'
 import dayjs from 'dayjs'
@@ -107,7 +107,7 @@ defineExpose({
                         width: 180,
                         align: 'center',
                         titleAlign: 'center',
-                        render({ timestamp }, index) {
+                        render: ({ timestamp }, index) => {
                             return dayjs(timestamp).format('YYYY-MM-DD HH:mm:ss')
                         },
                     },
@@ -115,7 +115,7 @@ defineExpose({
                         title: $t('log.server'),
                         key: 'server',
                         filterOptionValue: data.server,
-                        filter(value, row) {
+                        filter: (value, row) => {
                             return value === '' || row.server === value.toString()
                         },
                         width: 150,
@@ -129,10 +129,10 @@ defineExpose({
                         titleAlign: 'center',
                         filterOptionValue: data.keyword,
                         resizable: true,
-                        filter(value, row) {
+                        filter: (value, row) => {
                             return value === '' || !!~row.cmd.indexOf(value.toString())
                         },
-                        render({ cmd }, index) {
+                        render: ({ cmd }, index) => {
                             const cmdList = split(cmd, '\n')
                             if (size(cmdList) > 1) {
                                 return h(
@@ -150,7 +150,7 @@ defineExpose({
                         width: 100,
                         align: 'center',
                         titleAlign: 'center',
-                        render({ cost }, index) {
+                        render: ({ cost }, index) => {
                             const ms = dayjs.duration(cost).asMilliseconds()
                             if (ms < 1000) {
                                 return `${ms} ms`

frontend/src/components/content_value/ContentEntryEditor.vue

@@ -1,20 +1,25 @@
 <script setup>
-import { computed, defineEmits, defineProps, reactive, ref, watch } from 'vue'
+import { computed, defineEmits, defineProps, nextTick, reactive, ref, watch } from 'vue'
 import { useThemeVars } from 'naive-ui'
 import Save from '@/components/icons/Save.vue'
 import { decodeTypes, formatTypes } from '@/consts/value_view_type.js'
 import { decodeRedisKey } from '@/utils/key_convert.js'
 import useBrowserStore from 'stores/browser.js'
 import FormatSelector from '@/components/content_value/FormatSelector.vue'
+import IconButton from '@/components/common/IconButton.vue'
+import FullScreen from '@/components/icons/FullScreen.vue'
+import WindowClose from '@/components/icons/WindowClose.vue'
+import Pin from '@/components/icons/Pin.vue'
+import OffScreen from '@/components/icons/OffScreen.vue'
 
 const props = defineProps({
     field: {
-        type: String,
+        type: [String, Number],
     },
     value: {
         type: String,
     },
-    keyLabel: {
+    fieldLabel: {
         type: String,
     },
     valueLabel: {
@@ -26,15 +31,25 @@ const props = defineProps({
     format: {
         type: String,
     },
+    fieldReadonly: {
+        type: Boolean,
+    },
+    fullscreen: {
+        type: Boolean,
+    },
 })
 
 const themeVars = useThemeVars()
 const browserStore = useBrowserStore()
-const emit = defineEmits(['update:field', 'update:value', 'update:decode', 'update:format', 'save', 'cancel'])
+const emit = defineEmits([
-const model = reactive({
+    'update:field',
-    field: '',
+    'update:value',
-    value: '',
+    'update:decode',
-})
+    'update:format',
+    'update:fullscreen',
+    'save',
+    'close',
+])
 
 watch(
     () => props.value,
@@ -48,6 +63,7 @@ watch(
 )
 
 const loading = ref(false)
+const pin = ref(false)
 const viewAs = reactive({
     field: '',
     value: '',
@@ -58,13 +74,29 @@ const displayValue = computed(() => {
     if (loading.value) {
         return ''
     }
-    return viewAs.value || decodeRedisKey(props.value)
+    if (viewAs.value == null) {
+        return decodeRedisKey(props.value)
+    }
+    return viewAs.value
 })
 
+const btnStyle = computed(() => ({
+    padding: '3px',
+    border: 'solid 1px #0000',
+    borderRadius: '3px',
+}))
+
+const pinBtnStyle = computed(() => ({
+    padding: '3px',
+    border: `solid 1px ${themeVars.value.borderColor}`,
+    borderRadius: '3px',
+    backgroundColor: themeVars.value.borderColor,
+}))
+
 /**
  *
- * @param {string} decode
+ * @param {decodeTypes} decode
- * @param {string} format
+ * @param {formatTypes} format
  * @return {Promise<void>}
  */
 const onFormatChanged = async (decode = '', format = '') => {
@@ -79,7 +111,7 @@ const onFormatChanged = async (decode = '', format = '') => {
             decode,
             format,
         })
-        viewAs.field = props.field
+        viewAs.field = props.field + ''
         viewAs.value = value
         viewAs.decode = decode || retDecode
         viewAs.format = format || retFormat
@@ -93,25 +125,35 @@ const onUpdateValue = (value) => {
     viewAs.value = value
 }
 
+const onToggleFullscreen = () => {
+    emit('update:fullscreen', !!!props.fullscreen)
+}
+
+const onClose = () => {
+    pin.value = false
+    emit('close')
+}
+
 const onSave = () => {
     emit('save', viewAs.field, viewAs.value, viewAs.decode, viewAs.format)
+    if (!pin.value) {
+        nextTick().then(onClose)
+    }
 }
 </script>
 
 <template>
     <div class="entry-editor flex-box-v">
-        <n-card
+        <n-card :title="$t('interface.edit_row')" autofocus size="small" style="height: 100%">
-            :title="$t('interface.edit_row')"
-            autofocus
-            closable
-            size="small"
-            style="height: 100%"
-            @close="emit('cancel')">
             <div class="editor-content flex-box-v" style="height: 100%">
                 <!-- field -->
                 <div class="editor-content-item flex-box-v">
-                    <div class="editor-content-item-label">{{ props.keyLabel }}</div>
+                    <div class="editor-content-item-label">{{ props.fieldLabel }}</div>
-                    <n-input v-model:value="viewAs.field" class="editor-content-item-input" type="text" />
+                    <n-input
+                        v-model:value="viewAs.field"
+                        :readonly="props.fieldReadonly"
+                        class="editor-content-item-input"
+                        type="text" />
                 </div>
 
                 <!-- value -->
@@ -122,18 +164,46 @@ const onSave = () => {
                         autofocus
                         class="flex-item-expand"
                         type="textarea"
+                        :resizable="false"
                         @update:value="onUpdateValue" />
                     <format-selector
                         :decode="viewAs.decode"
                         :format="viewAs.format"
+                        style="margin-top: 5px"
                         @format-changed="(d, f) => onFormatChanged(d, f)" />
                 </div>
             </div>
+            <template #header-extra>
+                <n-space :size="5">
+                    <icon-button
+                        :button-style="pin ? pinBtnStyle : btnStyle"
+                        :size="19"
+                        :t-tooltip="pin ? 'interface.unpin_edit' : 'interface.pin_edit'"
+                        stroke-width="4"
+                        @click="pin = !pin">
+                        <Pin :inverse="pin" stroke-width="4" />
+                    </icon-button>
+                    <icon-button
+                        :button-style="btnStyle"
+                        :icon="props.fullscreen ? OffScreen : FullScreen"
+                        :size="18"
+                        stroke-width="5"
+                        t-tooltip="interface.fullscreen"
+                        @click="onToggleFullscreen" />
+                    <icon-button
+                        :button-style="btnStyle"
+                        :icon="WindowClose"
+                        :size="18"
+                        stroke-width="5"
+                        t-tooltip="menu.close"
+                        @click="onClose" />
+                </n-space>
+            </template>
             <template #action>
                 <n-space :wrap="false" :wrap-item="false" justify="end">
-                    <n-button ghost type="primary" @click="onSave">
+                    <n-button ghost @click="onSave">
                         <template #icon>
-                            <n-icon :component="Save"></n-icon>
+                            <n-icon :component="Save" />
                         </template>
                         {{ $t('common.update') }}
                     </n-button>
@@ -171,7 +241,7 @@ const onSave = () => {
     background-color: unset;
 }
 
-:deep(.n-card--bordered) {
+//:deep(.n-card--bordered) {
-    border-radius: 0;
+//    border-radius: 0;
-}
+//}
 </style>

frontend/src/components/content_value/ContentSlog.vue

@@ -1,9 +1,10 @@
 <script setup>
 import { h, onMounted, onUnmounted, reactive, ref } from 'vue'
 import Refresh from '@/components/icons/Refresh.vue'
-import { debounce, isEmpty, map, size } from 'lodash'
+import { debounce, isEmpty, map, size, split } from 'lodash'
 import { useI18n } from 'vue-i18n'
 import { useThemeVars } from 'naive-ui'
+import dayjs from 'dayjs'
 import useBrowserStore from 'stores/browser.js'
 
 const themeVars = useThemeVars()

frontend/src/components/content_value/ContentValueHash.vue

@@ -3,7 +3,7 @@ import { computed, h, reactive, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import ContentToolbar from './ContentToolbar.vue'
 import AddLink from '@/components/icons/AddLink.vue'
-import { NButton, NIcon, NInput, useThemeVars } from 'naive-ui'
+import { NButton, NCode, NIcon, NInput, useThemeVars } from 'naive-ui'
 import { types, types as redisTypes } from '@/consts/support_redis_type.js'
 import EditableTableColumn from '@/components/common/EditableTableColumn.vue'
 import useDialogStore from 'stores/dialog.js'
@@ -88,8 +88,14 @@ const currentEditRow = reactive({
 const inEdit = computed(() => {
     return currentEditRow.no > 0
 })
+const fullEdit = ref(false)
+const inFullEdit = computed(() => {
+    return inEdit.value && fullEdit.value
+})
+
 const tableRef = ref(null)
-const fieldColumn = reactive({
+const fieldFilterOption = ref(null)
+const fieldColumn = computed(() => ({
     key: 'key',
     title: i18n.t('common.field'),
     align: 'center',
@@ -98,36 +104,51 @@ const fieldColumn = reactive({
     ellipsis: {
         tooltip: true,
     },
-    filterOptionValue: null,
+    filterOptionValue: fieldFilterOption.value,
-    filter(value, row) {
+    className: inEdit.value ? 'clickable' : '',
+    filter: (value, row) => {
         return !!~row.k.indexOf(value.toString())
     },
-    render(row) {
+    render: (row) => {
         return decodeRedisKey(row.k)
     },
+}))
+
+const displayCode = computed(() => {
+    return props.format === formatTypes.JSON
 })
-const valueColumn = reactive({
+const valueFilterOption = ref(null)
+const valueColumn = computed(() => ({
     key: 'value',
     title: i18n.t('common.value'),
-    align: 'center',
+    align: displayCode.value ? 'left' : 'center',
     titleAlign: 'center',
     resizable: true,
-    ellipsis: {
+    ellipsis: displayCode.value
-        tooltip: true,
+        ? false
+        : {
+              tooltip: true,
+          },
+    filterOptionValue: valueFilterOption.value,
+    className: inEdit.value ? 'clickable' : '',
+    filter: (value, row) => {
+        if (row.dv) {
+            return !!~row.dv.indexOf(value.toString())
+        }
+        return !!~row.v.indexOf(value.toString())
     },
-    filterOptionValue: null,
+    render: (row) => {
-    filter(value, row) {
+        if (displayCode.value) {
-        return !!~row.value.indexOf(value.toString())
+            return h(NCode, { language: 'json', wordWrap: true, code: row.dv || row.v })
+        }
+        return row.dv || row.v
     },
-    render(row) {
+}))
-        return row.dv
-    },
-})
 
-const startEdit = async ({ no, key, value }) => {
+const startEdit = async (no, key, value) => {
-    currentEditRow.value = value
     currentEditRow.no = no
     currentEditRow.key = key
+    currentEditRow.value = value
 }
 
 const saveEdit = async (field, value, decode, format) => {
@@ -162,8 +183,6 @@ const saveEdit = async (field, value, decode, format) => {
         }
     } catch (e) {
         $message.error(e.message)
-    } finally {
-        resetEdit()
     }
 }
 
@@ -186,16 +205,17 @@ const actionColumn = {
         return h(EditableTableColumn, {
             editing: false,
             bindKey: row.k,
-            onEdit: () => startEdit({ no: index + 1, key: row.k, value: row.v }),
+            onEdit: () => startEdit(index + 1, row.k, row.v),
             onDelete: async () => {
                 try {
-                    const { success, msg } = await browserStore.removeHashField(
+                    const { removed, success, msg } = await browserStore.removeHashField(
                         props.name,
                         props.db,
                         keyName.value,
                         row.k,
                     )
                     if (success) {
+                        props.value.splice(index, 1)
                         $message.success(i18n.t('dialogue.delete_key_succ', { key: row.k }))
                     } else {
                         $message.error(msg)
@@ -217,12 +237,12 @@ const columns = computed(() => {
                 width: 80,
                 align: 'center',
                 titleAlign: 'center',
-                render(row, index) {
+                render: (row, index) => {
                     return index + 1
                 },
             },
-            fieldColumn,
+            fieldColumn.value,
-            valueColumn,
+            valueColumn.value,
             actionColumn,
         ]
     } else {
@@ -233,7 +253,7 @@ const columns = computed(() => {
                 width: 80,
                 align: 'center',
                 titleAlign: 'center',
-                render(row, index) {
+                render: (row, index) => {
                     if (index + 1 === currentEditRow.no) {
                         // editing row, show edit state
                         return h(NIcon, { size: 16, color: 'red' }, () => h(Edit, { strokeWidth: 5 }))
@@ -242,7 +262,7 @@ const columns = computed(() => {
                     }
                 },
             },
-            fieldColumn,
+            fieldColumn.value,
         ]
     }
 })
@@ -252,7 +272,7 @@ const rowProps = (row, index) => {
         onClick: () => {
             // in edit mode, switch edit row by click
             if (inEdit.value) {
-                startEdit({ no: index + 1, key: row.k, value: row.v })
+                startEdit(index + 1, row.k, row.v)
             }
         },
     }
@@ -270,15 +290,15 @@ const onAddRow = () => {
 const filterValue = ref('')
 const onFilterInput = (val) => {
     switch (filterType.value) {
-        case filterOption.value[0].value:
+        case filterOption[0].value:
             // filter field
-            valueColumn.filterOptionValue = null
+            valueFilterOption.value = null
-            fieldColumn.filterOptionValue = val
+            fieldFilterOption.value = val
             break
-        case filterOption.value[1].value:
+        case filterOption[1].value:
             // filter value
-            fieldColumn.filterOptionValue = null
+            fieldFilterOption.value = null
-            valueColumn.filterOptionValue = val
+            valueFilterOption.value = val
             break
     }
 }
@@ -288,17 +308,17 @@ const onChangeFilterType = (type) => {
 }
 
 const clearFilter = () => {
-    fieldColumn.filterOptionValue = null
+    fieldFilterOption.value = null
-    valueColumn.filterOptionValue = null
+    valueFilterOption.value = null
 }
 
 const onUpdateFilter = (filters, sourceColumn) => {
     switch (filterType.value) {
-        case filterOption.value[0].value:
+        case filterOption[0].value:
-            fieldColumn.filterOptionValue = filters[sourceColumn.key]
+            fieldFilterOption.value = filters[sourceColumn.key]
             break
-        case filterOption.value[1].value:
+        case filterOption[1].value:
-            valueColumn.filterOptionValue = filters[sourceColumn.key]
+            valueFilterOption.value = filters[sourceColumn.key]
             break
     }
 }
@@ -318,6 +338,7 @@ defineExpose({
 <template>
     <div class="content-wrapper flex-box-v">
         <content-toolbar
+            v-show="!inFullEdit"
             :db="props.db"
             :key-code="props.keyCode"
             :key-path="props.keyPath"
@@ -329,7 +350,7 @@ defineExpose({
             @delete="emit('delete')"
             @reload="emit('reload')"
             @rename="emit('rename')" />
-        <div class="tb2 value-item-part flex-box-h">
+        <div v-show="!inFullEdit" class="tb2 value-item-part flex-box-h">
             <div class="flex-box-h">
                 <n-input-group>
                     <n-select
@@ -363,6 +384,7 @@ defineExpose({
                     t-tooltip="interface.load_all_entries"
                     @click="emit('loadall')" />
             </n-button-group>
+            {{ valueColumn.align }}
             <n-button :focusable="false" plain @click="onAddRow">
                 <template #icon>
                     <n-icon :component="AddLink" size="18" />
@@ -373,8 +395,9 @@ defineExpose({
         <div id="content-table" class="value-wrapper value-item-part flex-box-h flex-item-expand">
             <!-- table -->
             <n-data-table
-                :key="(row) => row.no"
                 ref="tableRef"
+                v-show="!inFullEdit"
+                :row-key="(row) => row.k"
                 :bordered="false"
                 :bottom-bordered="false"
                 :columns="columns"
@@ -393,15 +416,16 @@ defineExpose({
             <!-- edit pane -->
             <content-entry-editor
                 v-show="inEdit"
+                v-model:fullscreen="fullEdit"
                 :decode="currentEditRow.decode"
                 :field="currentEditRow.key"
+                :field-label="$t('common.field')"
                 :format="currentEditRow.format"
-                :key-label="$t('common.field')"
                 :value="currentEditRow.value"
                 :value-label="$t('common.value')"
                 class="flex-item-expand"
                 style="width: 100%"
-                @cancel="resetEdit"
+                @close="resetEdit"
                 @save="saveEdit" />
         </div>
         <div class="value-footer flex-box-h">

frontend/src/components/content_value/ContentValueList.vue

@@ -14,6 +14,9 @@ import useBrowserStore from 'stores/browser.js'
 import LoadList from '@/components/icons/LoadList.vue'
 import LoadAll from '@/components/icons/LoadAll.vue'
 import IconButton from '@/components/common/IconButton.vue'
+import ContentEntryEditor from '@/components/content_value/ContentEntryEditor.vue'
+import FormatSelector from '@/components/content_value/FormatSelector.vue'
+import Edit from '@/components/icons/Edit.vue'
 
 const i18n = useI18n()
 const themeVars = useThemeVars()
@@ -30,10 +33,14 @@ const props = defineProps({
         type: Number,
         default: -1,
     },
-    value: Object,
+    value: {
+        // [{v: string|number[], dv: string}]
+        type: Array,
+        default: () => {},
+    },
     size: Number,
     length: Number,
-    viewAs: {
+    format: {
         type: String,
         default: formatTypes.RAW,
     },
@@ -58,39 +65,100 @@ const keyName = computed(() => {
 const browserStore = useBrowserStore()
 const dialogStore = useDialogStore()
 const keyType = redisTypes.LIST
-const currentEditRow = ref({
+const currentEditRow = reactive({
     no: 0,
     value: null,
+    format: formatTypes.RAW,
+    decode: decodeTypes.NONE,
 })
-const valueColumn = reactive({
+const inEdit = computed(() => {
-    key: 'value',
+    return currentEditRow.no > 0
-    title: i18n.t('common.value'),
+})
-    align: 'center',
+const fullEdit = ref(false)
-    titleAlign: 'center',
+const inFullEdit = computed(() => {
-    filterOptionValue: null,
+    return inEdit.value && fullEdit.value
-    filter(value, row) {
-        return !!~row.value.indexOf(value.toString())
-    },
-    render: (row) => {
-        const isEdit = currentEditRow.value.no === row.no
-        if (isEdit) {
-            return h(NInput, {
-                value: currentEditRow.value.value,
-                type: 'textarea',
-                autosize: { minRow: 2, maxRows: 5 },
-                style: 'text-align: left;',
-                'onUpdate:value': (val) => {
-                    currentEditRow.value.value = val
-                },
-            })
-        } else {
-            return h(NCode, { language: 'plaintext', wordWrap: true }, { default: () => row.value })
-        }
-    },
 })
 
-const cancelEdit = () => {
+const displayCode = computed(() => {
-    currentEditRow.value.no = 0
+    return props.format === formatTypes.JSON
+})
+const valueFilterOption = ref(null)
+const valueColumn = computed(() => ({
+    key: 'value',
+    title: i18n.t('common.value'),
+    align: displayCode.value ? 'left' : 'center',
+    titleAlign: 'center',
+    ellipsis: displayCode.value
+        ? false
+        : {
+              tooltip: true,
+          },
+    filterOptionValue: valueFilterOption.value,
+    className: inEdit.value ? 'clickable' : '',
+    filter: (value, row) => {
+        if (row.dv) {
+            return !!~row.dv.indexOf(value.toString())
+        }
+        return !!~row.v.indexOf(value.toString())
+    },
+    render: (row) => {
+        if (displayCode.value) {
+            return h(NCode, { language: 'json', wordWrap: true, code: row.dv || row.v })
+        }
+        return row.dv || row.v
+    },
+}))
+
+const startEdit = async (no, value) => {
+    currentEditRow.no = no
+    currentEditRow.value = value
+}
+
+/**
+ *
+ * @param {string|number} pos
+ * @param {string} value
+ * @param {decodeTypes} decode
+ * @param {formatTypes} format
+ * @return {Promise<void>}
+ */
+const saveEdit = async (pos, value, decode, format) => {
+    try {
+        const index = parseInt(pos) - 1
+        const row = props.value[index]
+        if (row == null) {
+            throw new Error('row not exists')
+        }
+
+        const { updated, success, msg } = await browserStore.updateListItem({
+            server: props.name,
+            db: props.db,
+            key: keyName.value,
+            index,
+            value,
+            decode,
+            format,
+        })
+        if (success) {
+            row.v = updated[index] || ''
+            const { value: displayVal } = await browserStore.convertValue({
+                value: row.v,
+                decode: props.decode,
+                format: props.format,
+            })
+            row.dv = displayVal
+            $message.success(i18n.t('dialogue.save_value_succ'))
+        } else {
+            $message.error(msg)
+        }
+    } catch (e) {
+        $message.error(e.message)
+    }
+}
+
+const resetEdit = () => {
+    currentEditRow.no = 0
+    currentEditRow.value = null
 }
 
 const actionColumn = {
@@ -100,13 +168,12 @@ const actionColumn = {
     align: 'center',
     titleAlign: 'center',
     fixed: 'right',
-    render: (row) => {
+    render: (row, index) => {
         return h(EditableTableColumn, {
-            editing: currentEditRow.value.no === row.no,
+            editing: false,
-            bindKey: '#' + row.no,
+            bindKey: `#${index + 1}`,
             onEdit: () => {
-                currentEditRow.value.no = row.no
+                startEdit(index + 1, row.v)
-                currentEditRow.value.value = row.value
             },
             onDelete: async () => {
                 try {
@@ -114,10 +181,11 @@ const actionColumn = {
                         props.name,
                         props.db,
                         keyName.value,
-                        row.no - 1,
+                        index,
                     )
                     if (success) {
-                        $message.success(i18n.t('dialogue.delete_key_succ', { key: '#' + row.no }))
+                        props.value.splice(index, 1)
+                        $message.success(i18n.t('dialogue.delete_key_succ', { key: `#${index + 1}` }))
                     } else {
                         $message.error(msg)
                     }
@@ -125,58 +193,61 @@ const actionColumn = {
                     $message.error(e.message)
                 }
             },
-            onSave: async () => {
-                try {
-                    const { success, msg } = await browserStore.updateListItem(
-                        props.name,
-                        props.db,
-                        keyName.value,
-                        currentEditRow.value.no - 1,
-                        currentEditRow.value.value,
-                    )
-                    if (success) {
-                        $message.success(i18n.t('dialogue.save_value_succ'))
-                    } else {
-                        $message.error(msg)
-                    }
-                } catch (e) {
-                    $message.error(e.message)
-                } finally {
-                    currentEditRow.value.no = 0
-                }
-            },
-            onCancel: cancelEdit,
         })
     },
 }
+
 const columns = computed(() => {
-    return [
+    if (!inEdit.value) {
-        {
+        return [
-            key: 'no',
+            {
-            title: '#',
+                key: 'no',
-            width: 80,
+                title: '#',
-            align: 'center',
+                width: 80,
-            titleAlign: 'center',
+                align: 'center',
-        },
+                titleAlign: 'center',
-        valueColumn,
+                render: (row, index) => {
-        actionColumn,
+                    return index + 1
-    ]
+                },
+            },
+            valueColumn.value,
+            actionColumn,
+        ]
+    } else {
+        return [
+            {
+                key: 'no',
+                title: '#',
+                width: 80,
+                align: 'center',
+                titleAlign: 'center',
+                render: (row, index) => {
+                    if (index + 1 === currentEditRow.no) {
+                        // editing row, show edit state
+                        return h(NIcon, { size: 16, color: 'red' }, () => h(Edit, { strokeWidth: 5 }))
+                    } else {
+                        return index + 1
+                    }
+                },
+            },
+            valueColumn.value,
+        ]
+    }
 })
 
-const tableData = computed(() => {
+const rowProps = (row, index) => {
-    const data = []
+    return {
-    const len = size(props.value)
+        onClick: () => {
-    for (let i = 0; i < len; i++) {
+            // in edit mode, switch edit row by click
-        data.push({
+            if (inEdit.value) {
-            no: i + 1,
+                startEdit(index + 1, row.v)
-            value: props.value[i],
+            }
-        })
+        },
     }
-    return data
+}
-})
 
 const entries = computed(() => {
-    const len = size(tableData.value)
+    const len = size(props.value)
     return `${len} / ${Math.max(len, props.length)}`
 })
 
@@ -186,21 +257,25 @@ const onAddValue = (value) => {
 
 const filterValue = ref('')
 const onFilterInput = (val) => {
-    valueColumn.filterOptionValue = val
+    valueFilterOption.value = val
 }
 
 const clearFilter = () => {
-    valueColumn.filterOptionValue = null
+    valueFilterOption.value = null
 }
 
 const onUpdateFilter = (filters, sourceColumn) => {
-    valueColumn.filterOptionValue = filters[sourceColumn.key]
+    valueFilterOption.value = filters[sourceColumn.key]
+}
+
+const onFormatChanged = (selDecode, selFormat) => {
+    emit('reload', selDecode, selFormat)
 }
 
 defineExpose({
     reset: () => {
         clearFilter()
-        cancelEdit()
+        resetEdit()
     },
 })
 </script>
@@ -208,6 +283,7 @@ defineExpose({
 <template>
     <div class="content-wrapper flex-box-v">
         <content-toolbar
+            v-show="!inFullEdit"
             :db="props.db"
             :key-code="props.keyCode"
             :key-path="props.keyPath"
@@ -219,7 +295,7 @@ defineExpose({
             @delete="emit('delete')"
             @reload="emit('reload')"
             @rename="emit('rename')" />
-        <div class="tb2 value-item-part flex-box-h">
+        <div v-show="!inFullEdit" class="tb2 value-item-part flex-box-h">
             <div class="flex-box-h">
                 <n-input
                     v-model:value="filterValue"
@@ -252,14 +328,17 @@ defineExpose({
                 {{ $t('interface.add_row') }}
             </n-button>
         </div>
-        <div class="value-wrapper value-item-part flex-box-v flex-item-expand">
+        <div class="value-wrapper value-item-part flex-box-h flex-item-expand">
+            <!-- table -->
             <n-data-table
-                :key="(row) => row.no"
+                v-show="!inFullEdit"
+                :row-key="(row) => row.no"
                 :bordered="false"
                 :bottom-bordered="false"
                 :columns="columns"
-                :data="tableData"
+                :data="props.value"
                 :loading="props.loading"
+                :row-props="rowProps"
                 :single-column="true"
                 :single-line="false"
                 class="flex-item-expand"
@@ -268,12 +347,34 @@ defineExpose({
                 striped
                 virtual-scroll
                 @update:filters="onUpdateFilter" />
+
+            <!-- edit pane -->
+            <content-entry-editor
+                v-show="inEdit"
+                v-model:fullscreen="fullEdit"
+                :decode="currentEditRow.decode"
+                :field="currentEditRow.no"
+                :field-label="$t('common.index')"
+                :field-readonly="true"
+                :format="currentEditRow.format"
+                :value="currentEditRow.value"
+                :value-label="$t('common.value')"
+                class="flex-item-expand"
+                style="width: 100%"
+                @close="resetEdit"
+                @save="saveEdit" />
         </div>
         <div class="value-footer flex-box-h">
             <n-text v-if="!isNaN(props.length)">{{ $t('interface.entries') }}: {{ entries }}</n-text>
             <n-divider v-if="!isNaN(props.length)" vertical />
             <n-text v-if="!isNaN(props.size)">{{ $t('interface.memory_usage') }}: {{ bytes(props.size) }}</n-text>
             <div class="flex-item-expand"></div>
+            <format-selector
+                v-show="!inEdit"
+                :decode="props.decode"
+                :disabled="inEdit"
+                :format="props.format"
+                @format-changed="onFormatChanged" />
         </div>
     </div>
 </template>

frontend/src/components/content_value/ContentValueSet.vue

@@ -14,6 +14,9 @@ import useBrowserStore from 'stores/browser.js'
 import LoadList from '@/components/icons/LoadList.vue'
 import LoadAll from '@/components/icons/LoadAll.vue'
 import IconButton from '@/components/common/IconButton.vue'
+import Edit from '@/components/icons/Edit.vue'
+import ContentEntryEditor from '@/components/content_value/ContentEntryEditor.vue'
+import FormatSelector from '@/components/content_value/FormatSelector.vue'
 
 const i18n = useI18n()
 const themeVars = useThemeVars()
@@ -30,10 +33,13 @@ const props = defineProps({
         type: Number,
         default: -1,
     },
-    value: Array,
+    value: {
+        type: Array,
+        default: () => [],
+    },
     size: Number,
     length: Number,
-    viewAs: {
+    format: {
         type: String,
         default: formatTypes.RAW,
     },
@@ -58,40 +64,100 @@ const keyName = computed(() => {
 const browserStore = useBrowserStore()
 const dialogStore = useDialogStore()
 const keyType = redisTypes.SET
-const currentEditRow = ref({
+const currentEditRow = reactive({
     no: 0,
     value: null,
+    format: formatTypes.RAW,
+    decode: decodeTypes.NONE,
+})
+const inEdit = computed(() => {
+    return currentEditRow.no > 0
+})
+const fullEdit = ref(false)
+const inFullEdit = computed(() => {
+    return inEdit.value && fullEdit.value
 })
 
-const valueColumn = reactive({
+const displayCode = computed(() => {
+    return props.format === formatTypes.JSON
+})
+const valueFilterOption = ref(null)
+const valueColumn = computed(() => ({
     key: 'value',
     title: i18n.t('common.value'),
-    align: 'center',
+    align: displayCode.value ? 'left' : 'center',
     titleAlign: 'center',
-    filterOptionValue: null,
+    ellipsis: displayCode.value
-    filter(value, row) {
+        ? false
-        return !!~row.value.indexOf(value.toString())
+        : {
+              tooltip: true,
+          },
+    filterOptionValue: valueFilterOption.value,
+    className: inEdit.value ? 'clickable' : '',
+    filter: (value, row) => {
+        if (row.dv) {
+            return !!~row.dv.indexOf(value.toString())
+        }
+        return !!~row.v.indexOf(value.toString())
     },
     render: (row) => {
-        const isEdit = currentEditRow.value.no === row.no
+        if (displayCode.value) {
-        if (isEdit) {
+            return h(NCode, { language: 'json', wordWrap: true, code: row.dv || row.v })
-            return h(NInput, {
-                value: currentEditRow.value.value,
-                type: 'textarea',
-                autosize: { minRow: 2, maxRows: 5 },
-                style: 'text-align: left;',
-                'onUpdate:value': (val) => {
-                    currentEditRow.value.value = val
-                },
-            })
-        } else {
-            return h(NCode, { language: 'plaintext', wordWrap: true }, { default: () => row.value })
         }
+        return row.dv || row.v
     },
-})
+}))
 
-const cancelEdit = () => {
+const startEdit = async (no, value) => {
-    currentEditRow.value.no = 0
+    currentEditRow.no = no
+    currentEditRow.value = value
+}
+
+/**
+ *
+ * @param {string|number} pos
+ * @param {string} value
+ * @param {decodeTypes} decode
+ * @param {formatTypes} format
+ * @return {Promise<void>}
+ */
+const saveEdit = async (pos, value, decode, format) => {
+    try {
+        const index = parseInt(pos) - 1
+        const row = props.value[index]
+        if (row == null) {
+            throw new Error('row not exists')
+        }
+
+        const { added, success, msg } = await browserStore.updateSetItem({
+            server: props.name,
+            db: props.db,
+            key: keyName.value,
+            value: row.v,
+            newValue: value,
+            decode,
+            format,
+        })
+        if (success) {
+            row.v = added
+            const { value: displayVal } = await browserStore.convertValue({
+                value: row.v,
+                decode: props.decode,
+                format: props.format,
+            })
+            row.dv = displayVal
+            $message.success(i18n.t('dialogue.save_value_succ'))
+        } else {
+            $message.error(msg)
+        }
+    } catch (e) {
+        $message.error(e.message)
+    }
+}
+
+const resetEdit = () => {
+    currentEditRow.no = 0
+    currentEditRow.value = null
 }
 
 const actionColumn = {
@@ -101,14 +167,12 @@ const actionColumn = {
     align: 'center',
     titleAlign: 'center',
     fixed: 'right',
-    render: (row) => {
+    render: (row, index) => {
         return h(EditableTableColumn, {
-            editing: currentEditRow.value.no === row.no,
+            editing: false,
-            bindKey: row.value,
+            bindKey: `#${index + 1}`,
             onEdit: () => {
-                currentEditRow.value.no = row.no
+                startEdit(index + 1, row.v)
-                currentEditRow.value.key = row.key
-                currentEditRow.value.value = row.value
             },
             onDelete: async () => {
                 try {
@@ -116,10 +180,11 @@ const actionColumn = {
                         props.name,
                         props.db,
                         keyName.value,
-                        row.value,
+                        row.v,
                     )
                     if (success) {
-                        $message.success(i18n.t('dialogue.delete_key_succ', { key: row.value }))
+                        props.value.splice(index, 1)
+                        $message.success(i18n.t('dialogue.delete_key_succ', { key: row.v }))
                     } else {
                         $message.error(msg)
                     }
@@ -127,58 +192,61 @@ const actionColumn = {
                     $message.error(e.message)
                 }
             },
-            onSave: async () => {
-                try {
-                    const { success, msg } = await browserStore.updateSetItem(
-                        props.name,
-                        props.db,
-                        keyName.value,
-                        row.value,
-                        currentEditRow.value.value,
-                    )
-                    if (success) {
-                        $message.success(i18n.t('dialogue.save_value_succ'))
-                    } else {
-                        $message.error(msg)
-                    }
-                } catch (e) {
-                    $message.error(e.message)
-                } finally {
-                    currentEditRow.value.no = 0
-                }
-            },
-            onCancel: cancelEdit,
         })
     },
 }
+
 const columns = computed(() => {
-    return [
+    if (!inEdit.value) {
-        {
+        return [
-            key: 'no',
+            {
-            title: '#',
+                key: 'no',
-            width: 80,
+                title: '#',
-            align: 'center',
+                width: 80,
-            titleAlign: 'center',
+                align: 'center',
-        },
+                titleAlign: 'center',
-        valueColumn,
+                render: (row, index) => {
-        actionColumn,
+                    return index + 1
-    ]
+                },
+            },
+            valueColumn.value,
+            actionColumn,
+        ]
+    } else {
+        return [
+            {
+                key: 'no',
+                title: '#',
+                width: 80,
+                align: 'center',
+                titleAlign: 'center',
+                render: (row, index) => {
+                    if (index + 1 === currentEditRow.no) {
+                        // editing row, show edit state
+                        return h(NIcon, { size: 16, color: 'red' }, () => h(Edit, { strokeWidth: 5 }))
+                    } else {
+                        return index + 1
+                    }
+                },
+            },
+            valueColumn.value,
+        ]
+    }
 })
 
-const tableData = computed(() => {
+const rowProps = (row, index) => {
-    const data = []
+    return {
-    const len = size(props.value)
+        onClick: () => {
-    for (let i = 0; i < len; i++) {
+            // in edit mode, switch edit row by click
-        data.push({
+            if (inEdit.value) {
-            no: i + 1,
+                startEdit(index + 1, row.v)
-            value: props.value[i],
+            }
-        })
+        },
     }
-    return data
+}
-})
 
 const entries = computed(() => {
-    const len = size(tableData.value)
+    const len = size(props.value)
     return `${len} / ${Math.max(len, props.length)}`
 })
 
@@ -188,21 +256,25 @@ const onAddValue = (value) => {
 
 const filterValue = ref('')
 const onFilterInput = (val) => {
-    valueColumn.filterOptionValue = val
+    valueFilterOption.value = val
 }
 
 const clearFilter = () => {
-    valueColumn.filterOptionValue = null
+    valueFilterOption.value = null
 }
 
 const onUpdateFilter = (filters, sourceColumn) => {
-    valueColumn.filterOptionValue = filters[sourceColumn.key]
+    valueFilterOption.value = filters[sourceColumn.key]
+}
+
+const onFormatChanged = (selDecode, selFormat) => {
+    emit('reload', selDecode, selFormat)
 }
 
 defineExpose({
     reset: () => {
         clearFilter()
-        cancelEdit()
+        resetEdit()
     },
 })
 </script>
@@ -210,6 +282,7 @@ defineExpose({
 <template>
     <div class="content-wrapper flex-box-v">
         <content-toolbar
+            v-show="!inFullEdit"
             :db="props.db"
             :key-code="props.keyCode"
             :key-path="props.keyPath"
@@ -221,7 +294,7 @@ defineExpose({
             @delete="emit('delete')"
             @reload="emit('reload')"
             @rename="emit('rename')" />
-        <div class="tb2 value-item-part flex-box-h">
+        <div v-show="!inFullEdit" class="tb2 value-item-part flex-box-h">
             <div class="flex-box-h">
                 <n-input
                     v-model:value="filterValue"
@@ -254,14 +327,17 @@ defineExpose({
                 {{ $t('interface.add_row') }}
             </n-button>
         </div>
-        <div class="value-wrapper value-item-part flex-box-v flex-item-expand">
+        <div class="value-wrapper value-item-part flex-box-h flex-item-expand">
+            <!-- table -->
             <n-data-table
-                :key="(row) => row.no"
+                v-show="!inFullEdit"
+                :row-key="(row) => row.v"
                 :bordered="false"
                 :bottom-bordered="false"
                 :columns="columns"
-                :data="tableData"
+                :data="props.value"
                 :loading="props.loading"
+                :row-props="rowProps"
                 :single-column="true"
                 :single-line="false"
                 class="flex-item-expand"
@@ -270,12 +346,34 @@ defineExpose({
                 striped
                 virtual-scroll
                 @update:filters="onUpdateFilter" />
+
+            <!-- edit pane -->
+            <content-entry-editor
+                v-show="inEdit"
+                v-model:fullscreen="fullEdit"
+                :decode="currentEditRow.decode"
+                :field="currentEditRow.no"
+                :field-label="$t('common.index')"
+                :field-readonly="true"
+                :format="currentEditRow.format"
+                :value="currentEditRow.value"
+                :value-label="$t('common.value')"
+                class="flex-item-expand"
+                style="width: 100%"
+                @close="resetEdit"
+                @save="saveEdit" />
         </div>
         <div class="value-footer flex-box-h">
             <n-text v-if="!isNaN(props.length)">{{ $t('interface.entries') }}: {{ entries }}</n-text>
             <n-divider v-if="!isNaN(props.length)" vertical />
             <n-text v-if="!isNaN(props.size)">{{ $t('interface.memory_usage') }}: {{ bytes(props.size) }}</n-text>
             <div class="flex-item-expand"></div>
+            <format-selector
+                v-show="!inEdit"
+                :decode="props.decode"
+                :disabled="inEdit"
+                :format="props.format"
+                @format-changed="onFormatChanged" />
         </div>
     </div>
 </template>

frontend/src/components/content_value/ContentValueStream.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, h, reactive, ref } from 'vue'
+import { computed, h, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import ContentToolbar from './ContentToolbar.vue'
 import AddLink from '@/components/icons/AddLink.vue'
@@ -73,38 +73,39 @@ const filterType = ref(1)
 const browserStore = useBrowserStore()
 const dialogStore = useDialogStore()
 const keyType = redisTypes.STREAM
-const idColumn = reactive({
+const idFilterOption = ref(null)
+const idColumn = computed(() => ({
     key: 'id',
     title: 'ID',
     align: 'center',
     titleAlign: 'center',
     resizable: true,
-})
+    filterOptionValue: idFilterOption.value,
-const valueColumn = reactive({
+}))
+
+const valueFilterOption = ref(null)
+const valueColumn = computed(() => ({
     key: 'value',
     title: i18n.t('common.value'),
-    align: 'center',
+    align: 'left',
     titleAlign: 'center',
     resizable: true,
-    filterOptionValue: null,
+    filterOptionValue: valueFilterOption.value,
-    filter(value, row) {
+    filter: (value, row) => {
         const v = value.toString()
         if (filterType.value === 1) {
             // filter key
-            return some(keys(row.value), (key) => includes(key, v))
+            return some(keys(row.v), (key) => includes(key, v))
         } else {
             // filter value
-            return some(values(row.value), (val) => includes(val, v))
+            return some(values(row.v), (val) => includes(val, v))
         }
     },
     // sorter: (row1, row2) => row1.value - row2.value,
-    // ellipsis: {
-    //     tooltip: true
-    // },
     render: (row) => {
-        return h(NCode, { language: 'json', wordWrap: true }, { default: () => JSON.stringify(row.value) })
+        return h(NCode, { language: 'json', wordWrap: true, code: row.dv })
     },
-})
+}))
 const actionColumn = {
     key: 'action',
     title: i18n.t('interface.action'),
@@ -136,23 +137,10 @@ const actionColumn = {
         })
     },
 }
-const columns = reactive([idColumn, valueColumn, actionColumn])
+const columns = computed(() => [idColumn.value, valueColumn.value, actionColumn])
-
-const tableData = computed(() => {
-    const data = []
-    if (!isEmpty(props.value)) {
-        for (const elem of props.value) {
-            data.push({
-                id: elem.id,
-                value: elem.value,
-            })
-        }
-    }
-    return data
-})
 
 const entries = computed(() => {
-    const len = size(tableData.value)
+    const len = size(props.value)
     return `${len} / ${Math.max(len, props.length)}`
 })
 
@@ -162,7 +150,7 @@ const onAddRow = () => {
 
 const filterValue = ref('')
 const onFilterInput = (val) => {
-    valueColumn.filterOptionValue = val
+    valueFilterOption.value = val
 }
 
 const onChangeFilterType = (type) => {
@@ -170,17 +158,17 @@ const onChangeFilterType = (type) => {
 }
 
 const clearFilter = () => {
-    idColumn.filterOptionValue = null
+    idFilterOption.value = null
-    valueColumn.filterOptionValue = null
+    valueFilterOption.value = null
 }
 
 const onUpdateFilter = (filters, sourceColumn) => {
     switch (filterType.value) {
         case filterOption[0].value:
-            idColumn.filterOptionValue = filters[sourceColumn.key]
+            idFilterOption.value = filters[sourceColumn.key]
             break
         case filterOption[1].value:
-            valueColumn.filterOptionValue = filters[sourceColumn.key]
+            valueFilterOption.value = filters[sourceColumn.key]
             break
     }
 }
@@ -249,11 +237,11 @@ defineExpose({
         </div>
         <div class="value-wrapper value-item-part flex-box-v flex-item-expand">
             <n-data-table
-                :key="(row) => row.id"
+                :row-key="(row) => row.id"
                 :bordered="false"
                 :bottom-bordered="false"
                 :columns="columns"
-                :data="tableData"
+                :data="props.value"
                 :loading="props.loading"
                 :single-column="true"
                 :single-line="false"

frontend/src/components/content_value/ContentValueWrapper.vue

@@ -66,14 +66,15 @@ const keyName = computed(() => {
 
 const loadData = async (reset, full) => {
     try {
-        const { name, db, view, decodeType, matchPattern, decode, format } = data.value
+        if (!!props.blank) {
+            return
+        }
+        const { name, db, matchPattern, decode, format } = data.value
         reset = reset === true
         await browserStore.loadKeyDetail({
             server: name,
             db: db,
             key: keyName.value,
-            viewType: view,
-            decodeType: decodeType,
             matchPattern: matchPattern,
             decode: reset ? decodeTypes.NONE : decode,
             format: reset ? formatTypes.RAW : format,
@@ -163,28 +164,30 @@ watch(() => data.value?.keyPath, initContent)
             <n-button :focusable="false" @click="onReload">{{ $t('interface.reload') }}</n-button>
         </template>
     </n-empty>
-    <keep-alive v-else>
+    <!-- FIXME: keep alive may cause virtual list null value error. -->
-        <component
+    <!--    <keep-alive v-else>-->
-            :is="valueComponents[data.type]"
+    <component
-            ref="contentRef"
+        :is="valueComponents[data.type]"
-            :db="data.db"
+        v-else
-            :decode="data.decode"
+        ref="contentRef"
-            :end="data.end"
+        :db="data.db"
-            :format="data.format"
+        :decode="data.decode"
-            :key-code="data.keyCode"
+        :end="data.end"
-            :key-path="data.keyPath"
+        :format="data.format"
-            :length="data.length"
+        :key-code="data.keyCode"
-            :loading="data.loading === true || initializing"
+        :key-path="data.keyPath"
-            :name="data.name"
+        :length="data.length"
-            :size="data.size"
+        :loading="data.loading === true || initializing"
-            :ttl="data.ttl"
+        :name="data.name"
-            :value="data.value"
+        :size="data.size"
-            @delete="onDelete"
+        :ttl="data.ttl"
-            @loadall="onLoadAll"
+        :value="data.value"
-            @loadmore="onLoadMore"
+        @delete="onDelete"
-            @reload="onReload"
+        @loadall="onLoadAll"
-            @rename="onRename" />
+        @loadmore="onLoadMore"
-    </keep-alive>
+        @reload="onReload"
+        @rename="onRename" />
+    <!--    </keep-alive>-->
 </template>
 
 <style lang="scss" scoped></style>

frontend/src/components/content_value/ContentValueZSet.vue

@@ -3,10 +3,10 @@ import { computed, h, reactive, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import ContentToolbar from './ContentToolbar.vue'
 import AddLink from '@/components/icons/AddLink.vue'
-import { NButton, NCode, NIcon, NInput, NInputNumber, useThemeVars } from 'naive-ui'
+import { NButton, NCode, NIcon, NInput, useThemeVars } from 'naive-ui'
 import { types, types as redisTypes } from '@/consts/support_redis_type.js'
 import EditableTableColumn from '@/components/common/EditableTableColumn.vue'
-import { isEmpty, size } from 'lodash'
+import { head, isEmpty, keys, size } from 'lodash'
 import useDialogStore from 'stores/dialog.js'
 import bytes from 'bytes'
 import { decodeTypes, formatTypes } from '@/consts/value_view_type.js'
@@ -14,6 +14,9 @@ import useBrowserStore from 'stores/browser.js'
 import LoadList from '@/components/icons/LoadList.vue'
 import LoadAll from '@/components/icons/LoadAll.vue'
 import IconButton from '@/components/common/IconButton.vue'
+import ContentEntryEditor from '@/components/content_value/ContentEntryEditor.vue'
+import FormatSelector from '@/components/content_value/FormatSelector.vue'
+import Edit from '@/components/icons/Edit.vue'
 
 const i18n = useI18n()
 const themeVars = useThemeVars()
@@ -30,12 +33,15 @@ const props = defineProps({
         type: Number,
         default: -1,
     },
-    value: Object,
+    value: {
+        type: Array,
+        default: () => [],
+    },
     size: Number,
     length: Number,
-    viewAs: {
+    format: {
         type: String,
-        default: formatTypes.PLAIN_TEXT,
+        default: formatTypes.RAW,
     },
     decode: {
         type: String,
@@ -70,20 +76,32 @@ const filterType = ref(1)
 const browserStore = useBrowserStore()
 const dialogStore = useDialogStore()
 const keyType = redisTypes.ZSET
-const currentEditRow = ref({
+const currentEditRow = reactive({
     no: 0,
     score: 0,
     value: null,
+    format: formatTypes.RAW,
+    decode: decodeTypes.NONE,
 })
-const scoreColumn = reactive({
+
+const inEdit = computed(() => {
+    return currentEditRow.no > 0
+})
+const fullEdit = ref(false)
+const inFullEdit = computed(() => {
+    return inEdit.value && fullEdit.value
+})
+
+const scoreFilterOption = ref(null)
+const scoreColumn = computed(() => ({
     key: 'score',
     title: i18n.t('interface.score'),
     align: 'center',
     titleAlign: 'center',
     resizable: true,
-    filterOptionValue: null,
+    filterOptionValue: scoreFilterOption.value,
     filter(value, row) {
-        const score = parseFloat(row.score)
+        const score = parseFloat(row.s)
         if (isNaN(score)) {
             return true
         }
@@ -110,62 +128,95 @@ const scoreColumn = reactive({
                 }
             }
         } else {
-            return !!~row.value.indexOf(value.toString())
+            return !!~row.v.indexOf(value.toString())
         }
-
         return true
     },
     render: (row) => {
-        const isEdit = currentEditRow.value.no === row.no
+        return row.s
-        if (isEdit) {
-            return h(NInputNumber, {
-                value: currentEditRow.value.score,
-                'onUpdate:value': (val) => {
-                    currentEditRow.value.score = val
-                },
-            })
-        } else {
-            return row.score
-        }
     },
+}))
+
+const displayCode = computed(() => {
+    return props.format === formatTypes.JSON
 })
-const valueColumn = reactive({
+const valueFilterOption = ref(null)
+const valueColumn = computed(() => ({
     key: 'value',
     title: i18n.t('common.value'),
-    align: 'center',
+    align: displayCode.value ? 'left' : 'center',
     titleAlign: 'center',
     resizable: true,
-    ellipsis: {
+    ellipsis: displayCode.value
-        tooltip: true,
+        ? false
-    },
+        : {
-    filterOptionValue: null,
+              tooltip: true,
+          },
+    filterOptionValue: valueFilterOption.value,
+    className: inEdit.value ? 'clickable' : '',
     filter(value, row) {
-        return !!~row.value.indexOf(value.toString())
+        if (row.dv) {
+            return !!~row.dv.indexOf(value.toString())
+        }
+        return !!~row.v.indexOf(value.toString())
     },
     // sorter: (row1, row2) => row1.value - row2.value,
-    // ellipsis: {
-    //     tooltip: true
-    // },
     render: (row) => {
-        const isEdit = currentEditRow.value.no === row.no
+        if (displayCode.value) {
-        if (isEdit) {
+            return h(NCode, { language: 'json', wordWrap: true, code: row.dv || row.v })
-            return h(NInput, {
-                value: currentEditRow.value.value,
-                type: 'textarea',
-                autosize: { minRow: 2, maxRows: 5 },
-                style: 'text-align: left;',
-                'onUpdate:value': (val) => {
-                    currentEditRow.value.value = val
-                },
-            })
-        } else {
-            return h(NCode, { language: 'plaintext', wordWrap: true }, { default: () => row.value })
         }
+        return row.dv || row.v
     },
-})
+}))
 
-const cancelEdit = () => {
+const startEdit = async (no, score, value) => {
-    currentEditRow.value.no = 0
+    currentEditRow.no = no
+    currentEditRow.score = score
+    currentEditRow.value = value
+}
+
+const saveEdit = async (field, value, decode, format) => {
+    try {
+        const score = parseFloat(field)
+        const row = props.value[currentEditRow.no - 1]
+        if (row == null) {
+            throw new Error('row not exists')
+        }
+
+        const { updated, success, msg } = await browserStore.updateZSetItem({
+            server: props.name,
+            db: props.db,
+            key: keyName.value,
+            value: row.v,
+            newValue: value,
+            score,
+            decode,
+            format,
+        })
+        if (success) {
+            row.v = head(keys(updated))
+            row.s = updated[row.v]
+            const { value: displayVal } = await browserStore.convertValue({
+                value: row.v,
+                decode: props.decode,
+                format: props.format,
+            })
+            row.dv = displayVal
+            $message.success(i18n.t('dialogue.save_value_succ'))
+        } else {
+            $message.error(msg)
+        }
+    } catch (e) {
+        $message.error(e.message)
+    }
+}
+
+const resetEdit = () => {
+    currentEditRow.no = 0
+    currentEditRow.score = 0
+    currentEditRow.value = null
+    currentEditRow.format = formatTypes.RAW
+    currentEditRow.decode = decodeTypes.NONE
 }
 
 const actionColumn = {
@@ -175,25 +226,22 @@ const actionColumn = {
     align: 'center',
     titleAlign: 'center',
     fixed: 'right',
-    render: (row) => {
+    render: (row, index) => {
         return h(EditableTableColumn, {
-            editing: currentEditRow.value.no === row.no,
+            editing: false,
-            bindKey: row.value,
+            bindKey: row.v,
-            onEdit: () => {
+            onEdit: () => startEdit(index + 1, row.s, row.v),
-                currentEditRow.value.no = row.no
-                currentEditRow.value.value = row.value
-                currentEditRow.value.score = row.score
-            },
             onDelete: async () => {
                 try {
                     const { success, msg } = await browserStore.removeZSetItem(
                         props.name,
                         props.db,
                         keyName.value,
-                        row.value,
+                        row.v,
                     )
                     if (success) {
-                        $message.success(i18n.t('dialogue.delete_key_succ', { key: row.value }))
+                        props.value.splice(index, 1)
+                        $message.success(i18n.t('dialogue.delete_key_succ', { key: row.v }))
                     } else {
                         $message.error(msg)
                     }
@@ -201,66 +249,51 @@ const actionColumn = {
                     $message.error(e.message)
                 }
             },
-            onSave: async () => {
-                try {
-                    const newValue = currentEditRow.value.value
-                    if (isEmpty(newValue)) {
-                        $message.error(i18n.t('dialogue.spec_field_required', { key: i18n.t('common.value') }))
-                        return
-                    }
-                    const { success, msg } = await browserStore.updateZSetItem(
-                        props.name,
-                        props.db,
-                        keyName.value,
-                        row.value,
-                        newValue,
-                        currentEditRow.value.score,
-                    )
-                    if (success) {
-                        $message.success(i18n.t('dialogue.save_value_succ'))
-                    } else {
-                        $message.error(msg)
-                    }
-                } catch (e) {
-                    $message.error(e.message)
-                } finally {
-                    currentEditRow.value.no = 0
-                }
-            },
-            onCancel: cancelEdit,
         })
     },
 }
-const columns = reactive([
-    {
-        key: 'no',
-        title: '#',
-        width: 80,
-        align: 'center',
-        titleAlign: 'center',
-    },
-    valueColumn,
-    scoreColumn,
-    actionColumn,
-])
 
-const tableData = computed(() => {
+const columns = computed(() => {
-    const data = []
+    if (!inEdit.value) {
-    if (!isEmpty(props.value)) {
+        return [
-        let index = 0
+            {
-        for (const elem of props.value) {
+                key: 'no',
-            data.push({
+                title: '#',
-                no: ++index,
+                width: 80,
-                value: elem.value,
+                align: 'center',
-                score: elem.score,
+                titleAlign: 'center',
-            })
+                render: (row, index) => {
-        }
+                    return index + 1
+                },
+            },
+            valueColumn.value,
+            scoreColumn.value,
+            actionColumn,
+        ]
+    } else {
+        return [
+            {
+                key: 'no',
+                title: '#',
+                width: 80,
+                align: 'center',
+                titleAlign: 'center',
+                render: (row, index) => {
+                    if (index + 1 === currentEditRow.no) {
+                        // editing row, show edit state
+                        return h(NIcon, { size: 16, color: 'red' }, () => h(Edit, { strokeWidth: 5 }))
+                    } else {
+                        return index + 1
+                    }
+                },
+            },
+            valueColumn.value,
+        ]
     }
-    return data
 })
 
 const entries = computed(() => {
-    const len = size(tableData.value)
+    const len = size(props.value)
     return `${len} / ${Math.max(len, props.length)}`
 })
 
@@ -273,13 +306,13 @@ const onFilterInput = (val) => {
     switch (filterType.value) {
         case filterOption[0].value:
             // filter value
-            scoreColumn.filterOptionValue = null
+            scoreFilterOption.value = null
-            valueColumn.filterOptionValue = val
+            valueFilterOption.value = val
             break
         case filterOption[1].value:
             // filter score
-            valueColumn.filterOptionValue = null
+            valueFilterOption.value = null
-            scoreColumn.filterOptionValue = val
+            scoreFilterOption.value = val
             break
     }
 }
@@ -289,27 +322,31 @@ const onChangeFilterType = (type) => {
 }
 
 const clearFilter = () => {
-    valueColumn.filterOptionValue = null
+    valueFilterOption.value = null
-    scoreColumn.filterOptionValue = null
+    scoreFilterOption.value = null
 }
 
 const onUpdateFilter = (filters, sourceColumn) => {
     switch (filterType.value) {
         case filterOption[0].value:
             // filter value
-            valueColumn.filterOptionValue = filters[sourceColumn.key]
+            valueFilterOption.value = filters[sourceColumn.key]
             break
         case filterOption[1].value:
             // filter score
-            scoreColumn.filterOptionValue = filters[sourceColumn.key]
+            scoreFilterOption.value = filters[sourceColumn.key]
             break
     }
 }
 
+const onFormatChanged = (selDecode, selFormat) => {
+    emit('reload', selDecode, selFormat)
+}
+
 defineExpose({
     reset: () => {
         clearFilter()
-        cancelEdit()
+        resetEdit()
     },
 })
 </script>
@@ -317,6 +354,7 @@ defineExpose({
 <template>
     <div class="content-wrapper flex-box-v">
         <content-toolbar
+            v-show="!inFullEdit"
             :db="props.db"
             :key-code="props.keyCode"
             :key-path="props.keyPath"
@@ -328,7 +366,7 @@ defineExpose({
             @delete="emit('delete')"
             @reload="emit('reload')"
             @rename="emit('rename')" />
-        <div class="tb2 value-item-part flex-box-h">
+        <div v-show="!inFullEdit" class="tb2 value-item-part flex-box-h">
             <div class="flex-box-h">
                 <n-input-group>
                     <n-select
@@ -374,13 +412,15 @@ defineExpose({
                 {{ $t('interface.add_row') }}
             </n-button>
         </div>
-        <div class="value-wrapper value-item-part flex-box-v flex-item-expand">
+        <div class="value-wrapper value-item-part flex-box-h flex-item-expand">
+            <!-- table -->
             <n-data-table
-                :key="(row) => row.no"
+                v-show="!inFullEdit"
+                :row-key="(row) => row.v"
                 :bordered="false"
                 :bottom-bordered="false"
                 :columns="columns"
-                :data="tableData"
+                :data="props.value"
                 :loading="props.loading"
                 :single-column="true"
                 :single-line="false"
@@ -390,12 +430,33 @@ defineExpose({
                 striped
                 virtual-scroll
                 @update:filters="onUpdateFilter" />
+
+            <!-- edit pane -->
+            <content-entry-editor
+                v-show="inEdit"
+                v-model:fullscreen="fullEdit"
+                :decode="currentEditRow.decode"
+                :field="currentEditRow.score"
+                :field-label="$t('interface.score')"
+                :format="currentEditRow.format"
+                :value="currentEditRow.value"
+                :value-label="$t('common.value')"
+                class="flex-item-expand"
+                style="width: 100%"
+                @close="resetEdit"
+                @save="saveEdit" />
         </div>
         <div class="value-footer flex-box-h">
             <n-text v-if="!isNaN(props.length)">{{ $t('interface.entries') }}: {{ entries }}</n-text>
             <n-divider v-if="!isNaN(props.length)" vertical />
             <n-text v-if="!isNaN(props.size)">{{ $t('interface.memory_usage') }}: {{ bytes(props.size) }}</n-text>
             <div class="flex-item-expand"></div>
+            <format-selector
+                v-show="!inEdit"
+                :decode="props.decode"
+                :disabled="inEdit"
+                :format="props.format"
+                @format-changed="onFormatChanged" />
         </div>
     </div>
 </template>

frontend/src/components/content_value/FormatSelector.vue

@@ -36,7 +36,7 @@ const onFormatChanged = (selDecode, selFormat) => {
 </script>
 
 <template>
-    <n-space :size="0" :wrap="false" :wrap-item="false" align="center" justify="start" style="margin-top: 5px">
+    <n-space :size="0" :wrap="false" :wrap-item="false" align="center" justify="start">
         <dropdown-selector
             :default="formatTypes.RAW"
             :disabled="props.disabled"

frontend/src/components/dialogs/AddFieldsDialog.vue

@@ -95,9 +95,9 @@ const onAdd = async () => {
                 {
                     let data
                     if (newForm.opType === 1) {
-                        data = await browserStore.prependListItem(server, db, keyName, value)
+                        data = await browserStore.prependListItem({ server, db, key: keyName, values: value })
                     } else {
-                        data = await browserStore.appendListItem(server, db, keyName, value)
+                        data = await browserStore.appendListItem({ server, db, key: keyName, values: value })
                     }
                     const { success, msg } = data
                     if (success) {

frontend/src/components/icons/Cluster.vue

@@ -1,6 +1,4 @@
 <script setup>
-const emit = defineEmits(['update:modelValue'])
-
 const props = defineProps({
     inverse: {
         type: Boolean,

frontend/src/components/icons/Database.vue

@@ -1,6 +1,4 @@
 <script setup>
-const emit = defineEmits(['update:modelValue'])
-
 const props = defineProps({
     inverse: {
         type: Boolean,

frontend/src/components/icons/Detail.vue

@@ -1,6 +1,4 @@
 <script setup>
-const emit = defineEmits(['update:modelValue'])
-
 const props = defineProps({
     inverse: {
         type: Boolean,

frontend/src/components/icons/Folder.vue

@@ -1,6 +1,4 @@
 <script setup>
-const emit = defineEmits(['update:modelValue'])
-
 const props = defineProps({
     open: {
         type: Boolean,

frontend/src/components/icons/FullScreen.vue

@@ -0,0 +1,39 @@
+<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="M33 6H42V15"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round" />
+        <path
+            :stroke-width="props.strokeWidth"
+            d="M42 33V42H33"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round" />
+        <path
+            :stroke-width="props.strokeWidth"
+            d="M15 42H6V33"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round" />
+        <path
+            :stroke-width="props.strokeWidth"
+            d="M6 15V6H15"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round" />
+    </svg>
+</template>
+
+<style lang="scss" scoped></style>

frontend/src/components/icons/OffScreen.vue

@@ -0,0 +1,39 @@
+<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="M33 6V15H42"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round" />
+        <path
+            :stroke-width="props.strokeWidth"
+            d="M15 6V15H6"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round" />
+        <path
+            :stroke-width="props.strokeWidth"
+            d="M15 42V33H6"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round" />
+        <path
+            :stroke-width="props.strokeWidth"
+            d="M33 42V33H41.8995"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round" />
+    </svg>
+</template>
+
+<style lang="scss" scoped></style>

frontend/src/components/icons/Pin.vue

@@ -0,0 +1,32 @@
+<script setup>
+const props = defineProps({
+    inverse: {
+        type: Boolean,
+        default: false,
+    },
+    strokeWidth: {
+        type: [Number, String],
+        default: 3,
+    },
+})
+</script>
+
+<template>
+    <svg fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
+        <g clip-path="url(#icon-36c2b93b4e0022c)">
+            <path
+                :fill="inverse ? 'currentColor' : 'none'"
+                :stroke-width="props.strokeWidth"
+                d="M10.6963 17.5042C13.3347 14.8657 16.4701 14.9387 19.8781 16.8076L32.62 9.74509L31.8989 4.78683L43.2126 16.1005L38.2656 15.3907L31.1918 28.1214C32.9752 31.7589 33.1337 34.6647 30.4953 37.3032C30.4953 37.3032 26.235 33.0429 22.7171 29.525L6.44305 41.5564L18.4382 25.2461C14.9202 21.7281 10.6963 17.5042 10.6963 17.5042Z"
+                stroke="currentColor"
+                stroke-linejoin="round" />
+        </g>
+        <defs>
+            <clipPath id="icon-36c2b93b4e0022c">
+                <rect fill="#FFF" height="48" width="48" />
+            </clipPath>
+        </defs>
+    </svg>
+</template>
+
+<style lang="scss" scoped></style>

frontend/src/components/icons/Server.vue

@@ -1,6 +1,4 @@
 <script setup>
-const emit = defineEmits(['update:modelValue'])
-
 const props = defineProps({
     inverse: {
         type: Boolean,

frontend/src/components/icons/Terminal.vue

@@ -1,6 +1,4 @@
 <script setup>
-const emit = defineEmits(['update:modelValue'])
-
 const props = defineProps({
     inverse: {
         type: Boolean,

frontend/src/components/icons/WindowClose.vue

@@ -4,13 +4,29 @@ const props = defineProps({
         type: [Number, String],
         default: 14,
     },
+    strokeWidth: {
+        type: [Number, String],
+        default: 3,
+    },
 })
 </script>
 
 <template>
     <svg :height="props.size" :width="props.size" fill="none" viewBox="0 0 48 48">
-        <path d="M8 8L40 40" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" />
+        <path
-        <path d="M8 40L40 8" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" />
+            :stroke-width="props.strokeWidth"
+            d="M8 8L40 40"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="4" />
+        <path
+            :stroke-width="props.strokeWidth"
+            d="M8 40L40 8"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="4" />
     </svg>
 </template>
 

frontend/src/components/sidebar/Ribbon.vue

@@ -29,7 +29,7 @@ const props = defineProps({
 
 const emit = defineEmits(['update:value'])
 
-const iconSize = computed(() => Math.floor(props.width * 0.4))
+const iconSize = computed(() => Math.floor(props.width * 0.45))
 const renderIcon = (icon) => {
     return () => h(NIcon, null, { default: () => h(icon, { strokeWidth: 3 }) })
 }
@@ -41,18 +41,18 @@ const menuOptions = computed(() => {
         {
             label: i18n.t('ribbon.browser'),
             key: 'browser',
-            icon: renderIcon(Database),
+            icon: Database,
             show: browserStore.anyConnectionOpened,
         },
         {
             label: i18n.t('ribbon.server'),
             key: 'server',
-            icon: renderIcon(Server),
+            icon: Server,
         },
         {
             label: i18n.t('ribbon.log'),
             key: 'log',
-            icon: renderIcon(Record),
+            icon: Record,
         },
     ]
 })
@@ -115,18 +115,30 @@ const exThemeVars = computed(() => {
 
 <template>
     <div
-        id="app-nav-menu"
+        id="app-ribbon"
         :style="{
             width: props.width + 'px',
+            minWidth: props.width + 'px',
         }"
         class="flex-box-v">
-        <n-menu
+        <div class="ribbon-wrapper flex-box-v">
-            :collapsed="true"
+            <div
-            :collapsed-icon-size="iconSize"
+                v-for="(m, i) in menuOptions"
-            :collapsed-width="props.width"
+                v-show="m.show !== false"
-            :options="menuOptions"
+                :key="i"
-            :value="props.value"
+                :class="{ 'ribbon-item-active': props.value === m.key }"
-            @update:value="(val) => emit('update:value', val)" />
+                class="ribbon-item clickable"
+                @click="emit('update:value', m.key)">
+                <n-tooltip :delay="2" :show-arrow="false" placement="right">
+                    <template #trigger>
+                        <n-icon :size="iconSize">
+                            <component :is="m.icon" :stroke-width="3.5"></component>
+                        </n-icon>
+                    </template>
+                    {{ m.label }}
+                </n-tooltip>
+            </div>
+        </div>
         <div class="flex-item-expand"></div>
         <div class="nav-menu-item flex-box-v">
             <n-dropdown
@@ -142,11 +154,69 @@ const exThemeVars = computed(() => {
 </template>
 
 <style lang="scss">
-#app-nav-menu {
+#app-ribbon {
     //height: 100vh;
     border-right: v-bind('exThemeVars.splitColor') solid 1px;
-    background-color: v-bind('exThemeVars.sidebarColor');
+    background-color: v-bind('exThemeVars.ribbonColor');
     box-sizing: border-box;
+    color: v-bind('themeVars.textColor2');
+
+    .ribbon-wrapper {
+        gap: 2px;
+        margin-top: 5px;
+        justify-content: center;
+        align-items: center;
+        box-sizing: border-box;
+        padding-right: 3px;
+
+        .ribbon-item {
+            width: 100%;
+            height: 100%;
+            text-align: center;
+            line-height: 1;
+            color: v-bind('themeVars.textColor3');
+            //border-left: 5px solid #000;
+            border-radius: v-bind('themeVars.borderRadius');
+            padding: 8px 0;
+            position: relative;
+
+            &:hover {
+                background-color: rgba(0, 0, 0, 0.05);
+                color: v-bind('themeVars.primaryColor');
+
+                &:before {
+                    position: absolute;
+                    width: 3px;
+                    left: 0;
+                    top: 24%;
+                    bottom: 24%;
+                    border-radius: 9999px;
+                    content: '';
+                    background-color: v-bind('themeVars.primaryColor');
+                }
+            }
+        }
+
+        .ribbon-item-active {
+            //background-color: v-bind('exThemeVars.ribbonActiveColor');
+            color: v-bind('themeVars.primaryColor');
+
+            &:hover {
+                color: v-bind('themeVars.primaryColor') !important;
+            }
+
+            &:before {
+                position: absolute;
+                width: 3px;
+                left: 0;
+                top: 24%;
+                bottom: 24%;
+                border-radius: 9999px;
+                content: '';
+                background-color: v-bind('themeVars.primaryColor');
+            }
+        }
+    }
 
     .nav-menu-item {
         align-items: center;

frontend/src/langs/en-us.json

@@ -16,7 +16,8 @@
     "all": "All",
     "key": "Key",
     "value": "Value",
-    "field": "Field"
+    "field": "Field",
+    "index": "Position"
   },
   "preferences": {
     "name": "Preferences",
@@ -74,6 +75,10 @@
     "add_row": "Add Row",
     "edit_row": "Edit Row",
     "delete_row": "Delete Row",
+    "fullscreen": "Full Screen",
+    "offscreen": "Exit Full Screen",
+    "pin_edit": "Pin Editor(Do not close after save)",
+    "unpin_edit": "Cancel Pin",
     "search": "Search",
     "filter_field": "Filter Field",
     "filter_value": "Filter Value",

frontend/src/langs/pt-br.json

@@ -16,7 +16,8 @@
     "all": "Tudo",
     "key": "Chave",
     "value": "Valor",
-    "field": "Campo"
+    "field": "Campo",
+    "index": "Posição"
   },
   "preferences": {
     "name": "Preferências",

frontend/src/langs/zh-cn.json

@@ -16,7 +16,8 @@
     "all": "全部",
     "key": "键",
     "value": "值",
-    "field": "字段"
+    "field": "字段",
+    "index": "位置"
   },
   "preferences": {
     "name": "偏好设置",
@@ -74,6 +75,10 @@
     "add_row": "插入行",
     "edit_row": "编辑行",
     "delete_row": "删除行",
+    "fullscreen": "全屏显示",
+    "offscreen": "退出全屏显示",
+    "pin_edit": "固定编辑框（保存后不关闭）",
+    "unpin_edit": "取消固定",
     "search": "搜索",
     "filter_field": "筛选字段",
     "filter_value": "筛选值",

frontend/src/main.js

@@ -35,9 +35,9 @@ async function setupApp() {
             } catch (e) {}
         })
     }
-    app.config.warnHandler = (message) => {
+    // app.config.warnHandler = (message) => {
-        console.warn(message)
+    //     console.warn(message)
-    }
+    // }
     app.mount('#app')
 }
 

frontend/src/stores/browser.js

@@ -6,6 +6,7 @@ import {
     isEmpty,
     join,
     last,
+    map,
     remove,
     set,
     size,
@@ -1082,21 +1083,21 @@ const useBrowserStore = defineStore('browser', {
 
         /**
          * remove hash field
-         * @param {string} connName
+         * @param {string} server
          * @param {number} db
-         * @param {string} key
+         * @param {string|number[]} key
          * @param {string} field
          * @returns {Promise<{[msg]: {}, success: boolean, [removed]: string[]}>}
          */
-        async removeHashField(connName, db, key, field) {
+        async removeHashField(server, db, key, field) {
             try {
-                const { data, success, msg } = await SetHashValue(connName, db, key, field, '', '')
+                const { data, success, msg } = await SetHashValue({ server, db, key, field, newField: '' })
                 if (success) {
                     const { removed = [] } = data
-                    if (!isEmpty(removed)) {
+                    // if (!isEmpty(removed)) {
-                        const tab = useTabStore()
+                    //     const tab = useTabStore()
-                        tab.removeValueEntries({ server: connName, db, key, type: 'hash', entries: removed })
+                    //     tab.removeValueEntries({ server, db, key, type: 'hash', entries: removed })
-                    }
+                    // }
                     return { success, removed }
                 } else {
                     return { success, msg }
@@ -1125,25 +1126,27 @@ const useBrowserStore = defineStore('browser', {
 
         /**
          * prepend item to head of list
-         * @param connName
+         * @param {string} server
-         * @param db
+         * @param {number} db
-         * @param key
+         * @param {string|number[]} key
-         * @param values
+         * @param {string[]} values
          * @returns {Promise<{[msg]: string, success: boolean, [item]: []}>}
          */
-        async prependListItem(connName, db, key, values) {
+        async prependListItem({ server, db, key, values }) {
             try {
-                const { data, success, msg } = await AddListItem(connName, db, key, 0, values)
+                const { data, success, msg } = await AddListItem(server, db, key, 0, values)
                 if (success) {
                     const { left = [] } = data
                     if (!isEmpty(left)) {
+                        // TODO: convert to display value
+                        const entries = map(left, (v) => ({ v }))
                         const tab = useTabStore()
                         tab.upsertValueEntries({
-                            server: connName,
+                            server: server,
                             db,
                             key,
                             type: 'list',
-                            entries: right,
+                            entries,
                             prepend: true,
                         })
                     }
@@ -1158,25 +1161,26 @@ const useBrowserStore = defineStore('browser', {
 
         /**
          * append item to tail of list
-         * @param connName
+         * @param {string} server
-         * @param db
+         * @param {number} db
-         * @param key
+         * @param {string|number[]} key
-         * @param values
+         * @param {string[]} values
          * @returns {Promise<{[msg]: string, success: boolean, [item]: any[]}>}
          */
-        async appendListItem(connName, db, key, values) {
+        async appendListItem({ server, db, key, values }) {
             try {
-                const { data, success, msg } = await AddListItem(connName, db, key, 1, values)
+                const { data, success, msg } = await AddListItem(server, db, key, 1, values)
                 if (success) {
                     const { right = [] } = data
                     if (!isEmpty(right)) {
+                        const entries = map(right, (v) => ({ v }))
                         const tab = useTabStore()
                         tab.upsertValueEntries({
-                            server: connName,
+                            server: server,
                             db,
                             key,
                             type: 'list',
-                            entries: right,
+                            entries,
                             prepend: false,
                         })
                     }
@@ -1191,28 +1195,30 @@ const useBrowserStore = defineStore('browser', {
 
         /**
          * update value of list item by index
-         * @param {string} connName
+         * @param {string} server
          * @param {number} db
          * @param {string|number[]} key
          * @param {number} index
-         * @param {string} value
+         * @param {string|number[]} value
+         * @param {decodeTypes} decode
+         * @param {formatTypes} format
          * @returns {Promise<{[msg]: string, success: boolean, [updated]: {}}>}
          */
-        async updateListItem(connName, db, key, index, value) {
+        async updateListItem({ server, db, key, index, value, decode = decodeTypes.NONE, format = formatTypes.RAW }) {
             try {
-                const { data, success, msg } = await SetListItem(connName, db, key, index, value)
+                const { data, success, msg } = await SetListItem({ server, db, key, index, value, decode, format })
                 if (success) {
                     const { updated = {} } = data
-                    if (!isEmpty(updated)) {
+                    // if (!isEmpty(updated)) {
-                        const tab = useTabStore()
+                    //     const tab = useTabStore()
-                        tab.upsertValueEntries({
+                    //     tab.upsertValueEntries({
-                            server: connName,
+                    //         server,
-                            db,
+                    //         db,
-                            key,
+                    //         key,
-                            type: 'list',
+                    //         type: 'list',
-                            entries: updated,
+                    //         entries: updated,
-                        })
+                    //     })
-                    }
+                    // }
                     return { success, updated }
                 } else {
                     return { success, msg }
@@ -1224,27 +1230,27 @@ const useBrowserStore = defineStore('browser', {
 
         /**
          * remove list item
-         * @param {string} connName
+         * @param {string} server
          * @param {number} db
          * @param {string|number[]} key
          * @param {number} index
          * @returns {Promise<{[msg]: string, success: boolean, [removed]: string[]}>}
          */
-        async removeListItem(connName, db, key, index) {
+        async removeListItem(server, db, key, index) {
             try {
-                const { data, success, msg } = await SetListItem(connName, db, key, index, '')
+                const { data, success, msg } = await SetListItem({ server, db, key, index })
                 if (success) {
                     const { removed = [] } = data
-                    if (!isEmpty(removed)) {
+                    // if (!isEmpty(removed)) {
-                        const tab = useTabStore()
+                    //     const tab = useTabStore()
-                        tab.removeValueEntries({
+                    //     tab.removeValueEntries({
-                            server: connName,
+                    //         server,
-                            db,
+                    //         db,
-                            key,
+                    //         key,
-                            type: 'list',
+                    //         type: 'list',
-                            entries: removed,
+                    //         entries: removed,
-                        })
+                    //     })
-                    }
+                    // }
                     return { success, removed }
                 } else {
                     return { success, msg }
@@ -1264,7 +1270,7 @@ const useBrowserStore = defineStore('browser', {
          */
         async addSetItem(connName, db, key, value) {
             try {
-                if (!value instanceof Array) {
+                if ((!value) instanceof Array) {
                     value = [value]
                 }
                 const { data, success, msg } = await SetSetItem(connName, db, key, false, value)
@@ -1282,20 +1288,23 @@ const useBrowserStore = defineStore('browser', {
 
         /**
          * update value of set item
-         * @param {string} connName
+         * @param {string} server
          * @param {number} db
          * @param {string|number[]} key
-         * @param {string} value
+         * @param {string|number[]} value
-         * @param {string} newValue
+         * @param {string|number[]} newValue
-         * @returns {Promise<{[msg]: string, success: boolean}>}
+         * @param {string} [decode]
+         * @param {string} [format]
+         * @returns {Promise<{[msg]: string, success: boolean, [added]: string|number[]}>}
          */
-        async updateSetItem(connName, db, key, value, newValue) {
+        async updateSetItem({ server, db, key, value, newValue, decode = decodeTypes.NONE, format = formatTypes.RAW }) {
             try {
-                const { success, msg } = await UpdateSetItem(connName, db, key, value, newValue)
+                const { data, success, msg } = await UpdateSetItem({ server, db, key, value, newValue, decode, format })
                 if (success) {
-                    const tab = useTabStore()
+                    const { added } = data
-                    tab.upsertValueEntries({ server: connName, db, key, type: 'set', entries: { [value]: newValue } })
+                    // const tab = useTabStore()
-                    return { success: true }
+                    // tab.upsertValueEntries({ server, db, key, type: 'set', entries: { [value]: newValue } })
+                    return { success: true, added }
                 } else {
                     return { success, msg }
                 }
@@ -1306,18 +1315,18 @@ const useBrowserStore = defineStore('browser', {
 
         /**
          * remove item from set
-         * @param {string} connName
+         * @param {string} server
          * @param {number} db
          * @param {string|number[]} key
          * @param {string} value
          * @returns {Promise<{[msg]: string, success: boolean}>}
          */
-        async removeSetItem(connName, db, key, value) {
+        async removeSetItem(server, db, key, value) {
             try {
-                const { success, msg } = await SetSetItem(connName, db, key, true, [value])
+                const { success, msg } = await SetSetItem(server, db, key, true, [value])
                 if (success) {
-                    const tab = useTabStore()
+                    // const tab = useTabStore()
-                    tab.removeValueEntries({ server: connName, db, key, type: 'set', entries: [value] })
+                    // tab.removeValueEntries({ server: connName, db, key, type: 'set', entries: [value] })
                     return { success }
                 } else {
                     return { success, msg }
@@ -1353,26 +1362,46 @@ const useBrowserStore = defineStore('browser', {
 
         /**
          * update item of sorted set
-         * @param {string} connName
+         * @param {string} server
          * @param {number} db
          * @param {string|number[]} key
          * @param {string} value
          * @param {string} newValue
          * @param {number} score
+         * @param {decodeTypes} decode
+         * @param {formatTypes} format
          * @returns {Promise<{[msg]: string, success: boolean, [updated]: {}, [removed]: []}>}
          */
-        async updateZSetItem(connName, db, key, value, newValue, score) {
+        async updateZSetItem({
+            server,
+            db,
+            key,
+            value = '',
+            newValue,
+            score,
+            decode = decodeTypes.NONE,
+            format = formatTypes.RAW,
+        }) {
             try {
-                const { data, success, msg } = await UpdateZSetValue(connName, db, key, value, newValue, score)
+                const { data, success, msg } = await UpdateZSetValue({
+                    server,
+                    db,
+                    key,
+                    value,
+                    newValue,
+                    score,
+                    decode,
+                    format,
+                })
                 if (success) {
                     const { updated, removed } = data
-                    const tab = useTabStore()
+                    // const tab = useTabStore()
-                    if (!isEmpty(updated)) {
+                    // if (!isEmpty(updated)) {
-                        tab.upsertValueEntries({ server: connName, db, key, type: 'zset', entries: updated })
+                    //     tab.upsertValueEntries({ server, db, key, type: 'zset', entries: updated })
-                    }
+                    // }
-                    if (!isEmpty(removed)) {
+                    // if (!isEmpty(removed)) {
-                        tab.removeValueEntries({ server: connName, db, key, type: 'zset', entries: removed })
+                    //     tab.removeValueEntries({ server, db, key, type: 'zset', entries: removed })
-                    }
+                    // }
                     return { success, updated, removed }
                 } else {
                     return { success, msg }
@@ -1384,22 +1413,22 @@ const useBrowserStore = defineStore('browser', {
 
         /**
          * remove item from sorted set
-         * @param {string} connName
+         * @param {string} server
          * @param {number} db
          * @param {string|number[]} key
          * @param {string} value
          * @returns {Promise<{[msg]: string, success: boolean, [removed]: []}>}
          */
-        async removeZSetItem(connName, db, key, value) {
+        async removeZSetItem(server, db, key, value) {
             try {
-                const { data, success, msg } = await UpdateZSetValue(connName, db, key, value, '', 0)
+                const { data, success, msg } = await UpdateZSetValue({ server, db, key, value, newValue: '', score: 0 })
                 if (success) {
                     const { removed } = data
-                    if (!isEmpty(removed)) {
+                    // if (!isEmpty(removed)) {
-                        const tab = useTabStore()
+                    //     const tab = useTabStore()
-                        tab.removeValueEntries({ server: connName, db, key, type: 'zset', entries: removed })
+                    //     tab.removeValueEntries({ server: server, db, key, type: 'zset', entries: removed })
-                    }
+                    // }
-                    return { success }
+                    return { success, removed }
                 } else {
                     return { success, msg }
                 }

frontend/src/styles/style.scss

@@ -51,8 +51,12 @@ body {
   flex-grow: 1;
 }
 
-.icon-btn {
+.clickable {
   cursor: pointer;
+}
+
+.icon-btn {
+  @extend .clickable;
   line-height: 100%;
 }
 
@@ -104,7 +108,7 @@ body {
     align-items: center;
     gap: 0;
     padding: 3px 10px 3px 10px;
-    min-height: 30px;
+    height: 30px;
   }
 }
 

frontend/src/utils/discrete.js

@@ -104,13 +104,16 @@ export async function setupDiscreteApi() {
     const { message, dialog, notification } = createDiscreteApi(['message', 'notification', 'dialog'], {
         configProviderProps,
         messageProviderProps: {
-            placement: 'bottom-right',
+            placement: 'bottom',
             keepAliveOnHover: true,
         },
         notificationProviderProps: {
             max: 5,
             placement: 'bottom-right',
             keepAliveOnHover: true,
+            containerStyle: {
+                marginBottom: '38px',
+            },
         },
     })
 

frontend/src/utils/extra_theme.js

@@ -11,7 +11,9 @@
  */
 export const extraLightTheme = {
     titleColor: '#F2F2F2',
-    sidebarColor: '#E9E9E9',
+    ribbonColor: '#F9F9F9',
+    ribbonActiveColor: '#E3E3E3',
+    sidebarColor: '#F2F2F2',
     splitColor: '#DADADA',
 }
 
@@ -20,7 +22,9 @@ export const extraLightTheme = {
  * @type ExtraTheme
  */
 export const extraDarkTheme = {
-    titleColor: '#363636',
+    titleColor: '#262626',
+    ribbonColor: '#2C2C2C',
+    ribbonActiveColor: '#363636',
     sidebarColor: '#262626',
     splitColor: '#474747',
 }

frontend/src/utils/theme.js

@@ -33,6 +33,9 @@ export const themeOverrides = {
         tabGapLargeCard: '2px',
         tabFontWeightActive: 450,
     },
+    Card: {
+        colorEmbedded: '#FAFAFA',
+    },
     Form: {
         labelFontSizeTopSmall: '12px',
         labelFontSizeTopMedium: '13px',
@@ -77,7 +80,7 @@ const _darkThemeOverrides = {
         nodeTextColor: '#CECED0',
     },
     Card: {
-        colorEmbedded: '#18181C',
+        colorEmbedded: '#212121',
     },
     Dropdown: {
         color: '#272727',