backend/services/browser_service.go

@@ -629,8 +629,7 @@ func (b *browserService) GetKeyDetail(param types.KeyDetailParam) (resp types.JS
 	case "string":
 		var str string
 		str, err = client.Get(ctx, key).Result()
-		data.Value = strutil.EncodeRedisKey(str)
+		data.Value, data.DecodeType, data.ViewAs = strutil.ConvertTo(str, param.DecodeType, param.ViewAs)
-		//data.Value, data.Decode, data.Format = strutil.ConvertTo(str, param.Decode, param.Format)
 
 	case "list":
 		loadListHandle := func() ([]string, bool, error) {
@@ -659,13 +658,11 @@ func (b *browserService) GetKeyDetail(param types.KeyDetailParam) (resp types.JS
 		data.Value, data.End, err = loadListHandle()
 
 	case "hash":
-		loadHashHandle := func() ([]types.HashEntryItem, bool, error) {
+		loadHashHandle := func() (map[string]string, bool, error) {
-			//items := map[string]string{}
+			items := map[string]string{}
 			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
 			if param.Full {
 				// load all
 				cursor = 0
@@ -674,18 +671,8 @@ func (b *browserService) GetKeyDetail(param types.KeyDetailParam) (resp types.JS
 					if err != nil {
 						return nil, false, err
 					}
-					var v string
 					for i := 0; i < len(loadedVal); i += 2 {
-						if doConvert {
+						items[loadedVal[i]] = loadedVal[i+1]
-							v, _, _ = strutil.ConvertTo(loadedVal[i+1], param.Decode, param.Format)
-						} else {
-							v = loadedVal[i+1]
-						}
-						items = append(items, types.HashEntryItem{
-							Key:          loadedVal[i],
-							Value:        strutil.EncodeRedisKey(loadedVal[i+1]),
-							DisplayValue: v,
-						})
 					}
 					if cursor == 0 {
 						break
@@ -697,18 +684,8 @@ func (b *browserService) GetKeyDetail(param types.KeyDetailParam) (resp types.JS
 				if err != nil {
 					return nil, false, err
 				}
-				var v string
 				for i := 0; i < len(loadedVal); i += 2 {
-					if doConvert {
+					items[loadedVal[i]] = loadedVal[i+1]
-						v, _, _ = strutil.ConvertTo(loadedVal[i+1], param.Decode, param.Format)
-					} else {
-						v = loadedVal[i+1]
-					}
-					items = append(items, types.HashEntryItem{
-						Key:          loadedVal[i],
-						Value:        strutil.EncodeRedisKey(loadedVal[i+1]),
-						DisplayValue: v,
-					})
 				}
 			}
 			setEntryCursor(cursor)
@@ -716,7 +693,6 @@ func (b *browserService) GetKeyDetail(param types.KeyDetailParam) (resp types.JS
 		}
 
 		data.Value, data.End, err = loadHashHandle()
-		data.Decode, data.Format = param.Decode, param.Format
 		if err != nil {
 			resp.Msg = err.Error()
 			return
@@ -863,56 +839,184 @@ func (b *browserService) GetKeyDetail(param types.KeyDetailParam) (resp types.JS
 	return
 }
 
-// ConvertValue convert value with decode method and format
+// GetKeyValue get value by key
-// blank decode indicate auto decode
+func (b *browserService) GetKeyValue(connName string, db int, k any, viewAs, decodeType string) (resp types.JSResp) {
-// blank format indicate auto format
+	item, err := b.getRedisClient(connName, db)
-func (b *browserService) ConvertValue(value any, decode, format string) (resp types.JSResp) {
-	str := strutil.DecodeRedisKey(value)
-	value, decode, format = strutil.ConvertTo(str, decode, format)
-	resp.Success = true
-	resp.Data = map[string]any{
-		"value":  value,
-		"decode": decode,
-		"format": format,
-	}
-	return
-}
-
-// SetKeyValue set value by key
-// @param ttl <= 0 means keep current ttl
-func (b *browserService) SetKeyValue(param types.SetKeyParam) (resp types.JSResp) {
-	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(param.Key)
+	key := strutil.DecodeRedisKey(k)
+	var keyType string
+	var dur time.Duration
+	keyType, err = client.Type(ctx, key).Result()
+	if err != nil {
+		resp.Msg = err.Error()
+		return
+	}
+
+	if keyType == "none" {
+		resp.Msg = "key not exists"
+		return
+	}
+
+	var ttl int64
+	if dur, err = client.TTL(ctx, key).Result(); err != nil {
+		ttl = -1
+	} else {
+		if dur < 0 {
+			ttl = -1
+		} else {
+			ttl = int64(dur.Seconds())
+		}
+	}
+
+	var value any
+	var size, length int64
+	var cursor uint64
+	switch strings.ToLower(keyType) {
+	case "string":
+		var str string
+		str, err = client.Get(ctx, key).Result()
+		value, decodeType, viewAs = strutil.ConvertTo(str, decodeType, viewAs)
+		length, _ = client.StrLen(ctx, key).Result()
+		size, _ = client.MemoryUsage(ctx, key, 0).Result()
+	case "list":
+		value, err = client.LRange(ctx, key, 0, -1).Result()
+		length, _ = client.LLen(ctx, key).Result()
+		size, _ = client.MemoryUsage(ctx, key, 0).Result()
+	case "hash":
+		//value, err = client.HGetAll(ctx, key).Result()
+		items := map[string]string{}
+		scanSize := int64(Preferences().GetScanSize())
+		for {
+			var loadedVal []string
+			loadedVal, cursor, err = client.HScan(ctx, key, cursor, "*", scanSize).Result()
+			if err != nil {
+				resp.Msg = err.Error()
+				return
+			}
+			for i := 0; i < len(loadedVal); i += 2 {
+				items[loadedVal[i]] = loadedVal[i+1]
+			}
+			if cursor == 0 {
+				break
+			}
+		}
+		value = items
+		length, _ = client.HLen(ctx, key).Result()
+		size, _ = client.MemoryUsage(ctx, key, 0).Result()
+	case "set":
+		//value, err = client.SMembers(ctx, key).Result()
+		items := []string{}
+		scanSize := int64(Preferences().GetScanSize())
+		for {
+			var loadedKey []string
+			loadedKey, cursor, err = client.SScan(ctx, key, cursor, "*", scanSize).Result()
+			if err != nil {
+				resp.Msg = err.Error()
+				return
+			}
+			items = append(items, loadedKey...)
+			if cursor == 0 {
+				break
+			}
+		}
+		value = items
+		length, _ = client.SCard(ctx, key).Result()
+		size, _ = client.MemoryUsage(ctx, key, 0).Result()
+	case "zset":
+		//value, err = client.ZRangeWithScores(ctx, key, 0, -1).Result()
+		var items []types.ZSetItem
+		scanSize := int64(Preferences().GetScanSize())
+		for {
+			var loadedVal []string
+			loadedVal, cursor, err = client.ZScan(ctx, key, cursor, "*", scanSize).Result()
+			if err != nil {
+				resp.Msg = err.Error()
+				return
+			}
+			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{
+						Value: loadedVal[i],
+						Score: score,
+					})
+				}
+			}
+			if cursor == 0 {
+				break
+			}
+		}
+		value = items
+		length, _ = client.ZCard(ctx, key).Result()
+		size, _ = client.MemoryUsage(ctx, key, 0).Result()
+	case "stream":
+		var msgs []redis.XMessage
+		items := []types.StreamItem{}
+		msgs, err = client.XRevRange(ctx, key, "+", "-").Result()
+		if err != nil {
+			resp.Msg = err.Error()
+			return
+		}
+		for _, msg := range msgs {
+			items = append(items, types.StreamItem{
+				ID:    msg.ID,
+				Value: msg.Values,
+			})
+		}
+		value = items
+		length, _ = client.XLen(ctx, key).Result()
+		size, _ = client.MemoryUsage(ctx, key, 0).Result()
+	}
+	if err != nil {
+		resp.Msg = err.Error()
+		return
+	}
+	resp.Success = true
+	resp.Data = map[string]any{
+		"type":   keyType,
+		"ttl":    ttl,
+		"value":  value,
+		"size":   size,
+		"length": length,
+		"viewAs": viewAs,
+		"decode": decodeType,
+	}
+	return
+}
+
+// SetKeyValue set value by key
+// @param ttl <= 0 means keep current ttl
+func (b *browserService) SetKeyValue(connName string, db int, k any, keyType string, value any, ttl int64, viewAs, decode string) (resp types.JSResp) {
+	item, err := b.getRedisClient(connName, db)
+	if err != nil {
+		resp.Msg = err.Error()
+		return
+	}
+
+	client, ctx := item.client, item.ctx
+	key := strutil.DecodeRedisKey(k)
 	var expiration time.Duration
-	if param.TTL < 0 {
+	if ttl < 0 {
 		if expiration, err = client.PTTL(ctx, key).Result(); err != nil {
 			expiration = redis.KeepTTL
 		}
 	} else {
-		expiration = time.Duration(param.TTL) * time.Second
+		expiration = time.Duration(ttl) * time.Second
 	}
-	// use default decode type and format
+	switch strings.ToLower(keyType) {
-	if len(param.Decode) <= 0 {
-		param.Decode = types.DECODE_NONE
-	}
-	if len(param.Format) <= 0 {
-		param.Format = types.FORMAT_RAW
-	}
-	switch strings.ToLower(param.KeyType) {
 	case "string":
-		if str, ok := param.Value.(string); !ok {
+		if str, ok := value.(string); !ok {
 			resp.Msg = "invalid string value"
 			return
 		} else {
 			var saveStr string
-			if saveStr, err = strutil.SaveAs(str, param.Format, param.Decode); err != nil {
+			if saveStr, err = strutil.SaveAs(str, viewAs, decode); err != nil {
-				resp.Msg = fmt.Sprintf(`save to "%s" type fail: %s`, param.Format, err.Error())
+				resp.Msg = fmt.Sprintf(`save to "%s" type fail: %s`, viewAs, err.Error())
 				return
 			}
 			_, err = client.Set(ctx, key, saveStr, 0).Result()
@@ -922,7 +1026,7 @@ func (b *browserService) SetKeyValue(param types.SetKeyParam) (resp types.JSResp
 			}
 		}
 	case "list":
-		if strs, ok := param.Value.([]any); !ok {
+		if strs, ok := value.([]any); !ok {
 			resp.Msg = "invalid list value"
 			return
 		} else {
@@ -932,7 +1036,7 @@ func (b *browserService) SetKeyValue(param types.SetKeyParam) (resp types.JSResp
 			}
 		}
 	case "hash":
-		if strs, ok := param.Value.([]any); !ok {
+		if strs, ok := value.([]any); !ok {
 			resp.Msg = "invalid hash value"
 			return
 		} else {
@@ -950,7 +1054,7 @@ func (b *browserService) SetKeyValue(param types.SetKeyParam) (resp types.JSResp
 			}
 		}
 	case "set":
-		if strs, ok := param.Value.([]any); !ok || len(strs) <= 0 {
+		if strs, ok := value.([]any); !ok || len(strs) <= 0 {
 			resp.Msg = "invalid set value"
 			return
 		} else {
@@ -962,7 +1066,7 @@ func (b *browserService) SetKeyValue(param types.SetKeyParam) (resp types.JSResp
 			}
 		}
 	case "zset":
-		if strs, ok := param.Value.([]any); !ok || len(strs) <= 0 {
+		if strs, ok := value.([]any); !ok || len(strs) <= 0 {
 			resp.Msg = "invalid zset value"
 			return
 		} else {
@@ -982,7 +1086,7 @@ func (b *browserService) SetKeyValue(param types.SetKeyParam) (resp types.JSResp
 			}
 		}
 	case "stream":
-		if strs, ok := param.Value.([]any); !ok {
+		if strs, ok := value.([]any); !ok {
 			resp.Msg = "invalid stream value"
 			return
 		} else {
@@ -1005,52 +1109,46 @@ func (b *browserService) SetKeyValue(param types.SetKeyParam) (resp types.JSResp
 	}
 	resp.Success = true
 	resp.Data = map[string]any{
-		"value": param.Value,
+		"value": value,
 	}
 	return
 }
 
 // SetHashValue set hash field
-func (b *browserService) SetHashValue(param types.SetHashParam) (resp types.JSResp) {
+func (b *browserService) SetHashValue(connName string, db int, k any, field, newField, value string) (resp types.JSResp) {
-	item, err := b.getRedisClient(param.Server, param.DB)
+	item, err := b.getRedisClient(connName, db)
 	if err != nil {
 		resp.Msg = err.Error()
 		return
 	}
 
 	client, ctx := item.client, item.ctx
-	key := strutil.DecodeRedisKey(param.Key)
+	key := strutil.DecodeRedisKey(k)
-	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())
-		return
-	}
 	var removedField []string
-	updatedField := map[string]any{}
+	updatedField := map[string]string{}
-	replacedField := map[string]any{}
+	replacedField := map[string]string{}
-	if len(param.Field) <= 0 {
+	if len(field) <= 0 {
 		// old filed is empty, add new field
-		_, err = client.HSet(ctx, key, param.NewField, saveStr).Result()
+		_, err = client.HSet(ctx, key, newField, value).Result()
-		updatedField[param.NewField] = saveStr
+		updatedField[newField] = value
-	} else if len(param.NewField) <= 0 {
+	} else if len(newField) <= 0 {
 		// new field is empty, delete old field
-		_, err = client.HDel(ctx, key, param.Field).Result()
+		_, err = client.HDel(ctx, key, field, value).Result()
-		removedField = append(removedField, param.Field)
+		removedField = append(removedField, field)
-	} else if param.Field == param.NewField {
+	} else if field == newField {
-		// update field value
+		// replace field
-		_, err = client.HSet(ctx, key, param.Field, saveStr).Result()
+		_, err = client.HSet(ctx, key, newField, value).Result()
-		updatedField[param.NewField] = saveStr
+		updatedField[newField] = value
 	} else {
 		// remove old field and add new field
-		if _, err = client.HDel(ctx, key, param.Field).Result(); err != nil {
+		if _, err = client.HDel(ctx, key, field).Result(); err != nil {
 			resp.Msg = err.Error()
 			return
 		}
-		_, err = client.HSet(ctx, key, param.NewField, saveStr).Result()
+		_, err = client.HSet(ctx, key, newField, value).Result()
-		removedField = append(removedField, param.Field)
+		removedField = append(removedField, field)
-		updatedField[param.NewField] = saveStr
+		updatedField[newField] = value
-		replacedField[param.Field] = param.NewField
+		replacedField[field] = newField
 	}
 	if err != nil {
 		resp.Msg = err.Error()

backend/types/js_resp.go

@@ -23,45 +23,17 @@ type KeyDetailParam struct {
 	Server       string `json:"server"`
 	DB           int    `json:"db"`
 	Key          any    `json:"key"`
-	Format       string `json:"format,omitempty"`
+	ViewAs       string `json:"viewAs,omitempty"`
-	Decode       string `json:"decode,omitempty"`
+	DecodeType   string `json:"decodeType,omitempty"`
 	MatchPattern string `json:"matchPattern,omitempty"`
 	Reset        bool   `json:"reset"`
 	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"`
-	Format string `json:"format,omitempty"`
+	ViewAs     string `json:"viewAs,omitempty"`
-	Decode string `json:"decode,omitempty"`
+	DecodeType string `json:"decodeType,omitempty"`
 	End        bool   `json:"end"`
 }
-
-type SetKeyParam struct {
-	Server  string `json:"server"`
-	DB      int    `json:"db"`
-	Key     any    `json:"key"`
-	KeyType string `json:"keyType"`
-	Value   any    `json:"value"`
-	TTL     int64  `json:"ttl"`
-	Format  string `json:"format,omitempty"`
-	Decode  string `json:"decode,omitempty"`
-}
-
-type SetHashParam struct {
-	Server   string `json:"server"`
-	DB       int    `json:"db"`
-	Key      any    `json:"key"`
-	Field    string `json:"field,omitempty"`
-	NewField string `json:"newField,omitempty"`
-	Value    any    `json:"value"`
-	Format   string `json:"format,omitempty"`
-	Decode   string `json:"decode,omitempty"`
-}

backend/types/view_type.go

@@ -1,9 +1,9 @@
 package types
 
-const FORMAT_RAW = "Raw"
+const VIEWAS_PLAIN_TEXT = "Plain Text"
-const FORMAT_JSON = "JSON"
+const VIEWAS_JSON = "JSON"
-const FORMAT_HEX = "Hex"
+const VIEWAS_HEX = "Hex"
-const FORMAT_BINARY = "Binary"
+const VIEWAS_BINARY = "Binary"
 
 const DECODE_NONE = "None"
 const DECODE_BASE64 = "Base64"

backend/utils/string/convert.go

@@ -12,10 +12,10 @@ import (
 	"github.com/klauspost/compress/gzip"
 	"github.com/klauspost/compress/zstd"
 	"io"
-	"regexp"
 	"strconv"
 	"strings"
 	"tinyrdm/backend/types"
+	"unicode/utf8"
 )
 
 // ConvertTo convert string to specified type
@@ -25,7 +25,7 @@ func ConvertTo(str, decodeType, formatType string) (value, resultDecode, resultF
 	if len(str) <= 0 {
 		// empty content
 		if len(formatType) <= 0 {
-			resultFormat = types.FORMAT_RAW
+			resultFormat = types.VIEWAS_PLAIN_TEXT
 		} else {
 			resultFormat = formatType
 		}
@@ -142,12 +142,12 @@ func autoDecode(str string) (value, resultDecode string) {
 func viewAs(str, formatType string) (value, resultFormat string) {
 	if len(formatType) > 0 {
 		switch formatType {
-		case types.FORMAT_RAW:
+		case types.VIEWAS_PLAIN_TEXT:
 			value = str
 			resultFormat = formatType
 			return
 
-		case types.FORMAT_JSON:
+		case types.VIEWAS_JSON:
 			if jsonStr, ok := decodeJson(str); ok {
 				value = jsonStr
 			} else {
@@ -156,7 +156,7 @@ func viewAs(str, formatType string) (value, resultFormat string) {
 			resultFormat = formatType
 			return
 
-		case types.FORMAT_HEX:
+		case types.VIEWAS_HEX:
 			if hexStr, ok := decodeToHex(str); ok {
 				value = hexStr
 			} else {
@@ -165,7 +165,7 @@ func viewAs(str, formatType string) (value, resultFormat string) {
 			resultFormat = formatType
 			return
 
-		case types.FORMAT_BINARY:
+		case types.VIEWAS_BINARY:
 			if binStr, ok := decodeBinary(str); ok {
 				value = binStr
 			} else {
@@ -185,20 +185,20 @@ func autoViewAs(str string) (value, resultFormat string) {
 	if len(str) > 0 {
 		var ok bool
 		if value, ok = decodeJson(str); ok {
-			resultFormat = types.FORMAT_JSON
+			resultFormat = types.VIEWAS_JSON
 			return
 		}
 
 		if containsBinary(str) {
 			if value, ok = decodeToHex(str); ok {
-				resultFormat = types.FORMAT_HEX
+				resultFormat = types.VIEWAS_HEX
 				return
 			}
 		}
 	}
 
 	value = str
-	resultFormat = types.FORMAT_RAW
+	resultFormat = types.VIEWAS_PLAIN_TEXT
 	return
 }
 
@@ -215,13 +215,11 @@ 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 s := string(decodedStr); !containsBinary(s) {
+		if s := string(decodedStr); utf8.ValidString(s) {
 			return s, true
 		}
 	}
-	}
 	return str, false
 }
 
@@ -284,7 +282,7 @@ func decodeBrotli(str string) (string, bool) {
 func SaveAs(str, viewType, decodeType string) (value string, err error) {
 	value = str
 	switch viewType {
-	case types.FORMAT_JSON:
+	case types.VIEWAS_JSON:
 		if jsonStr, ok := encodeJson(str); ok {
 			value = jsonStr
 		} else {
@@ -292,7 +290,7 @@ func SaveAs(str, viewType, decodeType string) (value string, err error) {
 			return
 		}
 
-	case types.FORMAT_HEX:
+	case types.VIEWAS_HEX:
 		if hexStr, ok := encodeHex(str); ok {
 			value = hexStr
 		} else {
@@ -300,7 +298,7 @@ func SaveAs(str, viewType, decodeType string) (value string, err error) {
 			return
 		}
 
-	case types.FORMAT_BINARY:
+	case types.VIEWAS_BINARY:
 		if binStr, ok := encodeBinary(str); ok {
 			value = binStr
 		} else {

frontend/src/components/common/IconButton.vue

@@ -7,7 +7,6 @@ const emit = defineEmits(['click'])
 const props = defineProps({
     tooltip: String,
     tTooltip: String,
-    type: String,
     icon: [String, Object],
     size: {
         type: [Number, String],
@@ -40,7 +39,6 @@ const hasTooltip = computed(() => {
                 :focusable="false"
                 :loading="loading"
                 :text="!border"
-                :type="type"
                 @click.prevent="emit('click')">
                 <template #icon>
                     <n-icon :color="props.color || 'currentColor'" :size="props.size">
@@ -58,7 +56,6 @@ const hasTooltip = computed(() => {
         :focusable="false"
         :loading="loading"
         :text="!border"
-        :type="type"
         @click.prevent="emit('click')">
         <template #icon>
             <n-icon :color="props.color || 'currentColor'" :size="props.size">

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'

frontend/src/components/content/ContentPane.vue

@@ -14,7 +14,6 @@ import ContentCli from '@/components/content_value/ContentCli.vue'
 import Monitor from '@/components/icons/Monitor.vue'
 import Pub from '@/components/icons/Pub.vue'
 import ContentSlog from '@/components/content_value/ContentSlog.vue'
-import { decodeTypes, formatTypes } from '@/consts/value_view_type.js'
 
 const themeVars = useThemeVars()
 
@@ -55,9 +54,9 @@ const tabContent = computed(() => {
         value: tab.value,
         size: tab.size || 0,
         length: tab.length || 0,
-        decode: tab.decode || decodeTypes.NONE,
+        viewAs: tab.viewAs,
-        format: tab.format || formatTypes.RAW,
+        decode: tab.decode,
-        end: tab.end === true,
+        end: tab.end,
         loading: tab.loading === true,
     }
 })

frontend/src/components/content_value/ContentEntryEditor.vue

@@ -1,177 +0,0 @@
-<script setup>
-import { computed, defineEmits, defineProps, 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'
-
-const props = defineProps({
-    field: {
-        type: String,
-    },
-    value: {
-        type: String,
-    },
-    keyLabel: {
-        type: String,
-    },
-    valueLabel: {
-        type: String,
-    },
-    decode: {
-        type: String,
-    },
-    format: {
-        type: String,
-    },
-})
-
-const themeVars = useThemeVars()
-const browserStore = useBrowserStore()
-const emit = defineEmits(['update:field', 'update:value', 'update:decode', 'update:format', 'save', 'cancel'])
-const model = reactive({
-    field: '',
-    value: '',
-})
-
-watch(
-    () => props.value,
-    (val) => {
-        if (val != null) {
-            onFormatChanged()
-        } else {
-            viewAs.value = ''
-        }
-    },
-)
-
-const loading = ref(false)
-const viewAs = reactive({
-    field: '',
-    value: '',
-    format: formatTypes.RAW,
-    decode: decodeTypes.NONE,
-})
-const displayValue = computed(() => {
-    if (loading.value) {
-        return ''
-    }
-    return viewAs.value || decodeRedisKey(props.value)
-})
-
-/**
- *
- * @param {string} decode
- * @param {string} format
- * @return {Promise<void>}
- */
-const onFormatChanged = async (decode = '', format = '') => {
-    try {
-        loading.value = true
-        const {
-            value,
-            decode: retDecode,
-            format: retFormat,
-        } = await browserStore.convertValue({
-            value: props.value,
-            decode,
-            format,
-        })
-        viewAs.field = props.field
-        viewAs.value = value
-        viewAs.decode = decode || retDecode
-        viewAs.format = format || retFormat
-    } finally {
-        loading.value = false
-    }
-}
-
-const onUpdateValue = (value) => {
-    // emit('update:value', value)
-    viewAs.value = value
-}
-
-const onSave = () => {
-    emit('save', viewAs.field, viewAs.value, viewAs.decode, viewAs.format)
-}
-</script>
-
-<template>
-    <div class="entry-editor flex-box-v">
-        <n-card
-            :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>
-                    <n-input v-model:value="viewAs.field" class="editor-content-item-input" type="text" />
-                </div>
-
-                <!-- value -->
-                <div class="editor-content-item flex-box-v flex-item-expand">
-                    <div class="editor-content-item-label">{{ props.valueLabel }}</div>
-                    <n-input
-                        :value="displayValue"
-                        autofocus
-                        class="flex-item-expand"
-                        type="textarea"
-                        @update:value="onUpdateValue" />
-                    <format-selector
-                        :decode="viewAs.decode"
-                        :format="viewAs.format"
-                        @format-changed="(d, f) => onFormatChanged(d, f)" />
-                </div>
-            </div>
-            <template #action>
-                <n-space :wrap="false" :wrap-item="false" justify="end">
-                    <n-button ghost type="primary" @click="onSave">
-                        <template #icon>
-                            <n-icon :component="Save"></n-icon>
-                        </template>
-                        {{ $t('common.update') }}
-                    </n-button>
-                </n-space>
-            </template>
-        </n-card>
-    </div>
-</template>
-
-<style lang="scss" scoped>
-.entry-editor {
-    padding-left: 2px;
-
-    .editor-content {
-        &-item {
-            &:not(:last-child) {
-                margin-bottom: 18px;
-            }
-
-            &-label {
-                line-height: 1.25;
-                color: v-bind('themeVars.textColor3');
-                font-size: 13px;
-                padding: 5px 0;
-            }
-
-            &-input {
-            }
-        }
-    }
-}
-
-:deep(.n-card__action) {
-    padding: 5px 10px;
-    background-color: unset;
-}
-
-:deep(.n-card--bordered) {
-    border-radius: 0;
-}
-</style>

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'
@@ -14,10 +14,6 @@ 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 Edit from '@/components/icons/Edit.vue'
-import FormatSelector from '@/components/content_value/FormatSelector.vue'
-import { decodeRedisKey } from '@/utils/key_convert.js'
 
 const i18n = useI18n()
 const themeVars = useThemeVars()
@@ -34,15 +30,12 @@ const props = defineProps({
         type: Number,
         default: -1,
     },
-    value: {
+    value: Object,
-        type: Array,
-        default: () => [],
-    },
     size: Number,
     length: Number,
-    format: {
+    viewAs: {
         type: String,
-        default: formatTypes.RAW,
+        default: formatTypes.PLAIN_TEXT,
     },
     decode: {
         type: String,
@@ -77,33 +70,34 @@ const filterType = ref(1)
 const browserStore = useBrowserStore()
 const dialogStore = useDialogStore()
 const keyType = redisTypes.HASH
-const currentEditRow = reactive({
+const currentEditRow = ref({
     no: 0,
     key: '',
     value: null,
-    format: formatTypes.RAW,
-    decode: decodeTypes.NONE,
 })
-
-const inEdit = computed(() => {
-    return currentEditRow.no > 0
-})
-const tableRef = ref(null)
 const fieldColumn = reactive({
     key: 'key',
     title: i18n.t('common.field'),
     align: 'center',
     titleAlign: 'center',
     resizable: true,
-    ellipsis: {
-        tooltip: true,
-    },
     filterOptionValue: null,
     filter(value, row) {
-        return !!~row.k.indexOf(value.toString())
+        return !!~row.key.indexOf(value.toString())
     },
-    render(row) {
+    // sorter: (row1, row2) => row1.key - row2.key,
-        return decodeRedisKey(row.k)
+    render: (row) => {
+        const isEdit = currentEditRow.value.no === row.no
+        if (isEdit) {
+            return h(NInput, {
+                value: currentEditRow.value.key,
+                'onUpdate:value': (val) => {
+                    currentEditRow.value.key = val
+                },
+            })
+        } else {
+            return row.key
+        }
     },
 })
 const valueColumn = reactive({
@@ -112,69 +106,31 @@ const valueColumn = reactive({
     align: 'center',
     titleAlign: 'center',
     resizable: true,
-    ellipsis: {
-        tooltip: true,
-    },
     filterOptionValue: null,
     filter(value, row) {
         return !!~row.value.indexOf(value.toString())
     },
-    render(row) {
+    // sorter: (row1, row2) => row1.value - row2.value,
-        return row.dv
+    // ellipsis: {
+    //     tooltip: true
+    // },
+    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 startEdit = async ({ no, key, value }) => {
-    currentEditRow.value = value
-    currentEditRow.no = no
-    currentEditRow.key = key
-}
-
-const saveEdit = async (field, value, decode, format) => {
-    try {
-        const row = props.value[currentEditRow.no - 1]
-        if (row == null) {
-            throw new Error('row not exists')
-        }
-
-        const { updated, success, msg } = await browserStore.setHash({
-            server: props.name,
-            db: props.db,
-            key: keyName.value,
-            field: row.k,
-            newField: field,
-            value,
-            decode,
-            format,
-        })
-        if (success) {
-            row.k = field
-            row.v = updated[row.k] || ''
-            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)
-    } finally {
-        resetEdit()
-    }
-}
-
-const resetEdit = () => {
-    currentEditRow.no = 0
-    currentEditRow.key = ''
-    currentEditRow.value = null
-    currentEditRow.format = formatTypes.RAW
-    currentEditRow.decode = decodeTypes.NONE
-}
-
 const actionColumn = {
     key: 'action',
     title: i18n.t('interface.action'),
@@ -182,21 +138,25 @@ const actionColumn = {
     align: 'center',
     titleAlign: 'center',
     fixed: 'right',
-    render: (row, index) => {
+    render: (row) => {
         return h(EditableTableColumn, {
-            editing: false,
+            editing: currentEditRow.value.no === row.no,
-            bindKey: row.k,
+            bindKey: row.key,
-            onEdit: () => startEdit({ no: index + 1, key: row.k, value: row.v }),
+            onEdit: () => {
+                currentEditRow.value.no = row.no
+                currentEditRow.value.key = row.key
+                currentEditRow.value.value = row.value
+            },
             onDelete: async () => {
                 try {
                     const { success, msg } = await browserStore.removeHashField(
                         props.name,
                         props.db,
                         keyName.value,
-                        row.k,
+                        row.key,
                     )
                     if (success) {
-                        $message.success(i18n.t('dialogue.delete_key_succ', { key: row.k }))
+                        $message.success(i18n.t('dialogue.delete_key_succ', { key: row.key }))
                     } else {
                         $message.error(msg)
                     }
@@ -204,62 +164,61 @@ const actionColumn = {
                     $message.error(e.message)
                 }
             },
+            onSave: async () => {
+                try {
+                    const { success, msg } = await browserStore.setHash(
+                        props.name,
+                        props.db,
+                        keyName.value,
+                        row.key,
+                        currentEditRow.value.key,
+                        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: () => {
+                currentEditRow.value.no = 0
+            },
         })
     },
 }
-
+const columns = reactive([
-const columns = computed(() => {
-    if (!inEdit.value) {
-        return [
     {
         key: 'no',
         title: '#',
         width: 80,
         align: 'center',
         titleAlign: 'center',
-                render(row, index) {
-                    return index + 1
-                },
     },
     fieldColumn,
     valueColumn,
     actionColumn,
-        ]
+])
-    } else {
+
-        return [
+const tableData = computed(() => {
-            {
+    const data = []
-                key: 'no',
+    let index = 0
-                title: '#',
+    for (const key in props.value) {
-                width: 80,
+        data.push({
-                align: 'center',
+            no: ++index,
-                titleAlign: 'center',
+            key,
-                render(row, index) {
+            value: props.value[key],
-                    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
-                    }
-                },
-            },
-            fieldColumn,
-        ]
     }
+    return data
 })
 
-const rowProps = (row, index) => {
-    return {
-        onClick: () => {
-            // in edit mode, switch edit row by click
-            if (inEdit.value) {
-                startEdit({ no: index + 1, key: row.k, value: row.v })
-            }
-        },
-    }
-}
-
 const entries = computed(() => {
-    const len = size(props.value)
+    const len = size(tableData.value)
     return `${len} / ${Math.max(len, props.length)}`
 })
 
@@ -270,12 +229,12 @@ 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
             fieldColumn.filterOptionValue = val
             break
-        case filterOption.value[1].value:
+        case filterOption[1].value:
             // filter value
             fieldColumn.filterOptionValue = null
             valueColumn.filterOptionValue = val
@@ -294,23 +253,18 @@ const clearFilter = () => {
 
 const onUpdateFilter = (filters, sourceColumn) => {
     switch (filterType.value) {
-        case filterOption.value[0].value:
+        case filterOption[0].value:
             fieldColumn.filterOptionValue = filters[sourceColumn.key]
             break
-        case filterOption.value[1].value:
+        case filterOption[1].value:
             valueColumn.filterOptionValue = filters[sourceColumn.key]
             break
     }
 }
 
-const onFormatChanged = (selDecode, selFormat) => {
-    emit('reload', selDecode, selFormat)
-}
-
 defineExpose({
     reset: () => {
         clearFilter()
-        resetEdit()
     },
 })
 </script>
@@ -370,17 +324,14 @@ defineExpose({
                 {{ $t('interface.add_row') }}
             </n-button>
         </div>
-        <div id="content-table" class="value-wrapper value-item-part flex-box-h flex-item-expand">
+        <div class="value-wrapper value-item-part flex-box-v flex-item-expand">
-            <!-- table -->
             <n-data-table
                 :key="(row) => row.no"
-                ref="tableRef"
                 :bordered="false"
                 :bottom-bordered="false"
                 :columns="columns"
-                :data="props.value"
+                :data="tableData"
                 :loading="props.loading"
-                :row-props="rowProps"
                 :single-column="true"
                 :single-line="false"
                 class="flex-item-expand"
@@ -389,32 +340,12 @@ defineExpose({
                 striped
                 virtual-scroll
                 @update:filters="onUpdateFilter" />
-
-            <!-- edit pane -->
-            <content-entry-editor
-                v-show="inEdit"
-                :decode="currentEditRow.decode"
-                :field="currentEditRow.key"
-                :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"
-                @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/ContentValueList.vue

@@ -35,7 +35,7 @@ const props = defineProps({
     length: Number,
     viewAs: {
         type: String,
-        default: formatTypes.RAW,
+        default: formatTypes.PLAIN_TEXT,
     },
     decode: {
         type: String,
@@ -89,10 +89,6 @@ const valueColumn = reactive({
     },
 })
 
-const cancelEdit = () => {
-    currentEditRow.value.no = 0
-}
-
 const actionColumn = {
     key: 'action',
     title: i18n.t('interface.action'),
@@ -145,7 +141,9 @@ const actionColumn = {
                     currentEditRow.value.no = 0
                 }
             },
-            onCancel: cancelEdit,
+            onCancel: () => {
+                currentEditRow.value.no = 0
+            },
         })
     },
 }
@@ -200,7 +198,6 @@ const onUpdateFilter = (filters, sourceColumn) => {
 defineExpose({
     reset: () => {
         clearFilter()
-        cancelEdit()
     },
 })
 </script>

frontend/src/components/content_value/ContentValueSet.vue

@@ -35,7 +35,7 @@ const props = defineProps({
     length: Number,
     viewAs: {
         type: String,
-        default: formatTypes.RAW,
+        default: formatTypes.PLAIN_TEXT,
     },
     decode: {
         type: String,
@@ -89,11 +89,6 @@ const valueColumn = reactive({
         }
     },
 })
-
-const cancelEdit = () => {
-    currentEditRow.value.no = 0
-}
-
 const actionColumn = {
     key: 'action',
     title: i18n.t('interface.action'),
@@ -147,7 +142,9 @@ const actionColumn = {
                     currentEditRow.value.no = 0
                 }
             },
-            onCancel: cancelEdit,
+            onCancel: () => {
+                currentEditRow.value.no = 0
+            },
         })
     },
 }
@@ -202,7 +199,6 @@ const onUpdateFilter = (filters, sourceColumn) => {
 defineExpose({
     reset: () => {
         clearFilter()
-        cancelEdit()
     },
 })
 </script>

frontend/src/components/content_value/ContentValueStream.vue

@@ -38,7 +38,7 @@ const props = defineProps({
     length: Number,
     viewAs: {
         type: String,
-        default: formatTypes.RAW,
+        default: formatTypes.PLAIN_TEXT,
     },
     decode: {
         type: String,

frontend/src/components/content_value/ContentValueString.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, reactive, ref, watch } from 'vue'
+import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import ContentToolbar from './ContentToolbar.vue'
 import Copy from '@/components/icons/Copy.vue'
@@ -10,11 +10,12 @@ import Close from '@/components/icons/Close.vue'
 import { types as redisTypes } from '@/consts/support_redis_type.js'
 import { ClipboardSetText } from 'wailsjs/runtime/runtime.js'
 import { isEmpty, toLower } from 'lodash'
+import DropdownSelector from '@/components/content_value/DropdownSelector.vue'
+import Code from '@/components/icons/Code.vue'
+import Conversion from '@/components/icons/Conversion.vue'
 import EditFile from '@/components/icons/EditFile.vue'
 import bytes from 'bytes'
 import useBrowserStore from 'stores/browser.js'
-import { decodeRedisKey } from '@/utils/key_convert.js'
-import FormatSelector from '@/components/content_value/FormatSelector.vue'
 
 const i18n = useI18n()
 const themeVars = useThemeVars()
@@ -31,9 +32,17 @@ const props = defineProps({
         type: Number,
         default: -1,
     },
-    value: [String, Array],
+    value: String,
     size: Number,
     length: Number,
+    viewAs: {
+        type: String,
+        default: formatTypes.PLAIN_TEXT,
+    },
+    decode: {
+        type: String,
+        default: decodeTypes.NONE,
+    },
     loading: Boolean,
 })
 
@@ -49,7 +58,7 @@ const keyName = computed(() => {
 
 const keyType = redisTypes.STRING
 const viewLanguage = computed(() => {
-    switch (viewAs.format) {
+    switch (props.viewAs) {
         case formatTypes.JSON:
             return 'json'
         default:
@@ -57,48 +66,31 @@ const viewLanguage = computed(() => {
     }
 })
 
-const viewAs = reactive({
+const onViewTypeUpdate = (viewType) => {
-    value: '',
+    browserStore.loadKeyDetail({
-    format: formatTypes.RAW,
+        server: props.name,
-    decode: decodeTypes.NONE,
+        db: props.db,
-})
+        key: keyName.value,
-
+        viewType,
-const displayValue = computed(() => {
+        decodeType: props.decode,
-    if (props.loading) {
+    })
-        return ''
+}
-    }
+
-    return viewAs.value || decodeRedisKey(props.value)
+const onDecodeTypeUpdate = (decodeType) => {
-})
+    browserStore.loadKeyDetail({
-
+        server: props.name,
-watch(
+        db: props.db,
-    () => props.value,
+        key: keyName.value,
-    (val, oldVal) => {
+        viewType: props.viewAs,
-        if (val !== undefined && oldVal !== undefined) {
+        decodeType,
-            onFormatChanged(viewAs.decode, viewAs.format)
-        }
-    },
-)
-
-const onFormatChanged = async (decode = '', format = '') => {
-    const {
-        value,
-        decode: retDecode,
-        format: retFormat,
-    } = await browserStore.convertValue({
-        value: props.value,
-        decode,
-        format,
     })
-    viewAs.value = value
-    viewAs.decode = decode || retDecode
-    viewAs.format = format || retFormat
 }
 
 /**
  * Copy value
  */
 const onCopyValue = () => {
-    ClipboardSetText(displayValue.value)
+    ClipboardSetText(props.value)
         .then((succ) => {
             if (succ) {
                 $message.success(i18n.t('dialogue.copy_succ'))
@@ -112,7 +104,7 @@ const onCopyValue = () => {
 const editValue = ref('')
 const inEdit = ref(false)
 const onEditValue = () => {
-    editValue.value = displayValue.value
+    editValue.value = props.value
     inEdit.value = true
 }
 
@@ -128,16 +120,16 @@ const saving = ref(false)
 const onSaveValue = async () => {
     saving.value = true
     try {
-        const { success, msg } = await browserStore.setKey({
+        const { success, msg } = await browserStore.setKey(
-            server: props.name,
+            props.name,
-            db: props.db,
+            props.db,
-            key: keyName.value,
+            keyName.value,
-            keyType: toLower(keyType),
+            toLower(keyType),
-            value: editValue.value,
+            editValue.value,
-            ttl: -1,
+            -1,
-            format: viewAs.format,
+            props.viewAs,
-            decode: viewAs.decode,
+            props.decode,
-        })
+        )
         if (success) {
             await browserStore.loadKeyDetail({ server: props.name, db: props.db, key: keyName.value })
             $message.success(i18n.t('dialogue.save_value_succ'))
@@ -151,14 +143,6 @@ const onSaveValue = async () => {
         saving.value = false
     }
 }
-
-defineExpose({
-    reset: () => {
-        viewAs.value = ''
-        inEdit.value = false
-    },
-    beforeShow: () => onFormatChanged(),
-})
 </script>
 
 <template>
@@ -208,7 +192,7 @@ defineExpose({
         </div>
         <div class="value-wrapper value-item-part flex-item-expand flex-box-v">
             <n-scrollbar v-if="!inEdit" class="flex-item-expand">
-                <n-code :code="displayValue" :language="viewLanguage" style="cursor: text" word-wrap />
+                <n-code :code="props.value" :language="viewLanguage" style="cursor: text" word-wrap />
             </n-scrollbar>
             <n-input
                 v-else
@@ -223,11 +207,19 @@ defineExpose({
             <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
+            <dropdown-selector
-                :decode="viewAs.decode"
+                :icon="Code"
-                :disabled="inEdit"
+                :options="formatTypes"
-                :format="viewAs.format"
+                :tooltip="$t('interface.view_as')"
-                @format-changed="onFormatChanged" />
+                :value="props.viewAs"
+                @update:value="onViewTypeUpdate" />
+            <n-divider vertical />
+            <dropdown-selector
+                :icon="Conversion"
+                :options="decodeTypes"
+                :tooltip="$t('interface.decode_with')"
+                :value="props.decode"
+                @update:value="onDecodeTypeUpdate" />
         </div>
     </div>
 </template>

frontend/src/components/content_value/ContentValueWrapper.vue

@@ -10,8 +10,8 @@ import { useThemeVars } from 'naive-ui'
 import useBrowserStore from 'stores/browser.js'
 import { computed, onMounted, ref, watch } from 'vue'
 import { isEmpty } from 'lodash'
-import useDialogStore from 'stores/dialog.js'
 import { decodeTypes, formatTypes } from '@/consts/value_view_type.js'
+import useDialogStore from 'stores/dialog.js'
 
 const themeVars = useThemeVars()
 const browserStore = useBrowserStore()
@@ -37,7 +37,7 @@ const props = defineProps({
  *      value: [String, Object],
  *      size: Number,
  *      length: Number,
- *      format: String,
+ *      viewAs: String,
  *      decode: String,
  *      end: Boolean
  * }>}
@@ -45,7 +45,6 @@ const props = defineProps({
 const data = computed(() => {
     return props.content
 })
-const initializing = ref(false)
 
 const binaryKey = computed(() => {
     return !!data.value.keyCode
@@ -66,8 +65,7 @@ const keyName = computed(() => {
 
 const loadData = async (reset, full) => {
     try {
-        const { name, db, view, decodeType, matchPattern, decode, format } = data.value
+        const { name, db, view, decodeType, matchPattern } = data.value
-        reset = reset === true
         await browserStore.loadKeyDetail({
             server: name,
             db: db,
@@ -75,31 +73,17 @@ const loadData = async (reset, full) => {
             viewType: view,
             decodeType: decodeType,
             matchPattern: matchPattern,
-            decode: reset ? decodeTypes.NONE : decode,
+            reset: reset === true,
-            format: reset ? formatTypes.RAW : format,
-            reset,
             full: full === true,
         })
     } finally {
     }
 }
 
-/**
+const onReload = async () => {
- * reload current key
- * @param {string} [selDecode]
- * @param {string} [selFormat]
- * @return {Promise<void>}
- */
-const onReload = async (selDecode, selFormat) => {
     try {
-        const { name, db, keyCode, keyPath, decode, format } = data.value
+        const { name, db, keyCode, keyPath } = data.value
-        await browserStore.reloadKey({
+        await browserStore.reloadKey({ server: name, db, key: keyCode || keyPath })
-            server: name,
-            db,
-            key: keyCode || keyPath,
-            decode: selDecode || decode,
-            format: selFormat || format,
-        })
     } finally {
     }
 }
@@ -132,29 +116,22 @@ const onLoadAll = () => {
     loadData(false, true)
 }
 
-const contentRef = ref(null)
+onMounted(() => {
-const initContent = async () => {
+    // onReload()
+    loadData(false, false)
+})
+
+const contentRef = ref(null)
+watch(
+    () => data.value?.keyPath,
+    () => {
         // onReload()
-    try {
-        initializing.value = true
         if (contentRef.value?.reset != null) {
             contentRef.value?.reset()
         }
-        await loadData(true, false)
+        loadData(false, false)
-        if (contentRef.value?.beforeShow != null) {
+    },
-            await contentRef.value?.beforeShow()
+)
-        }
-    } finally {
-        initializing.value = false
-    }
-}
-
-onMounted(() => {
-    // onReload()
-    initContent()
-})
-
-watch(() => data.value?.keyPath, initContent)
 </script>
 
 <template>
@@ -168,17 +145,17 @@ watch(() => data.value?.keyPath, initContent)
             :is="valueComponents[data.type]"
             ref="contentRef"
             :db="data.db"
-            :decode="data.decode"
+            :decode="data.decode || decodeTypes.NONE"
             :end="data.end"
-            :format="data.format"
             :key-code="data.keyCode"
             :key-path="data.keyPath"
             :length="data.length"
-            :loading="data.loading === true || initializing"
+            :loading="data.loading === true"
             :name="data.name"
             :size="data.size"
             :ttl="data.ttl"
             :value="data.value"
+            :view-as="data.viewAs || formatTypes.PLAIN_TEXT"
             @delete="onDelete"
             @loadall="onLoadAll"
             @loadmore="onLoadMore"

frontend/src/components/content_value/ContentValueZSet.vue

@@ -135,9 +135,6 @@ const valueColumn = reactive({
     align: 'center',
     titleAlign: 'center',
     resizable: true,
-    ellipsis: {
-        tooltip: true,
-    },
     filterOptionValue: null,
     filter(value, row) {
         return !!~row.value.indexOf(value.toString())
@@ -163,11 +160,6 @@ const valueColumn = reactive({
         }
     },
 })
-
-const cancelEdit = () => {
-    currentEditRow.value.no = 0
-}
-
 const actionColumn = {
     key: 'action',
     title: i18n.t('interface.action'),
@@ -227,7 +219,9 @@ const actionColumn = {
                     currentEditRow.value.no = 0
                 }
             },
-            onCancel: cancelEdit,
+            onCancel: () => {
+                currentEditRow.value.no = 0
+            },
         })
     },
 }
@@ -309,7 +303,6 @@ const onUpdateFilter = (filters, sourceColumn) => {
 defineExpose({
     reset: () => {
         clearFilter()
-        cancelEdit()
     },
 })
 </script>

frontend/src/components/content_value/DropdownSelector.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { computed, h, ref } from 'vue'
-import { get, map } from 'lodash'
+import { map } from 'lodash'
 import { NIcon, NText } from 'naive-ui'
 
 const props = defineProps({
@@ -16,8 +16,6 @@ const props = defineProps({
         type: String,
     },
     icon: [String, Object],
-    default: String,
-    disabled: Boolean,
 })
 
 const emit = defineEmits(['update:value'])
@@ -58,7 +56,7 @@ const onDropdownSelect = (key) => {
 }
 
 const buttonText = computed(() => {
-    return props.value || get(dropdownOption.value, [1, 'label'], props.default)
+    return props.value || get(dropdownOption.value, [1, 'label'], 'None')
 })
 
 const showDropdown = ref(false)
@@ -69,7 +67,6 @@ const onDropdownShow = (show) => {
 
 <template>
     <n-dropdown
-        :disabled="props.disabled"
         :options="dropdownOption"
         :render-label="renderLabel"
         :show-arrow="true"
@@ -81,7 +78,7 @@ const onDropdownShow = (show) => {
         <n-tooltip :disabled="showDropdown" :show-arrow="false">
             {{ props.tooltip }}
             <template #trigger>
-                <n-button :disabled="disabled" :focusable="false" quaternary>
+                <n-button :focusable="false" quaternary>
                     <template #icon>
                         <n-icon>
                             <component :is="icon" />

frontend/src/components/content_value/FormatSelector.vue

@@ -1,60 +0,0 @@
-<script setup>
-import { decodeTypes, formatTypes } from '@/consts/value_view_type.js'
-import Code from '@/components/icons/Code.vue'
-import Conversion from '@/components/icons/Conversion.vue'
-import DropdownSelector from '@/components/common/DropdownSelector.vue'
-import { some } from 'lodash'
-
-const props = defineProps({
-    decode: {
-        type: String,
-        default: decodeTypes.NONE,
-    },
-    format: {
-        type: String,
-        default: formatTypes.RAW,
-    },
-    disabled: Boolean,
-})
-
-const emit = defineEmits(['formatChanged', 'update:decode', 'update:format'])
-const onFormatChanged = (selDecode, selFormat) => {
-    if (!some(decodeTypes, (val) => val === selDecode)) {
-        selDecode = decodeTypes.NONE
-    }
-    if (!some(formatTypes, (val) => val === selFormat)) {
-        selFormat = formatTypes.RAW
-    }
-    emit('formatChanged', selDecode, selFormat)
-    if (selDecode !== props.decode) {
-        emit('update:decode', selDecode)
-    }
-    if (selFormat !== props.format) {
-        emit('update:format', selFormat)
-    }
-}
-</script>
-
-<template>
-    <n-space :size="0" :wrap="false" :wrap-item="false" align="center" justify="start" style="margin-top: 5px">
-        <dropdown-selector
-            :default="formatTypes.RAW"
-            :disabled="props.disabled"
-            :icon="Code"
-            :options="formatTypes"
-            :tooltip="$t('interface.view_as')"
-            :value="props.format"
-            @update:value="(f) => onFormatChanged(props.decode, f)" />
-        <n-divider vertical />
-        <dropdown-selector
-            :default="decodeTypes.NONE"
-            :disabled="props.disabled"
-            :icon="Conversion"
-            :options="decodeTypes"
-            :tooltip="$t('interface.decode_with')"
-            :value="props.decode"
-            @update:value="(d) => onFormatChanged(d, props.format)" />
-    </n-space>
-</template>
-
-<style lang="scss" scoped></style>

frontend/src/components/dialogs/NewKeyDialog.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { computed, h, reactive, ref, watch } from 'vue'
 import { types, typesColor } from '@/consts/support_redis_type.js'
+import { decodeTypes, formatTypes } from '@/consts/value_view_type.js'
 import useDialog from 'stores/dialog'
 import { isEmpty, keys, map } from 'lodash'
 import NewStringValue from '@/components/new_value/NewStringValue.vue'
@@ -116,14 +117,16 @@ const onAdd = async () => {
         if (value == null) {
             value = defaultValue[type]
         }
-        const { success, msg, nodeKey } = await browserStore.setKey({
+        const { success, msg, nodeKey } = await browserStore.setKey(
             server,
             db,
             key,
-            keyType: type,
+            type,
             value,
             ttl,
-        })
+            formatTypes.PLAIN_TEXT,
+            decodeTypes.NONE,
+        )
         if (success) {
             // select current key
             tabStore.setSelectedKeys(server, nodeKey)

frontend/src/consts/value_view_type.js

@@ -3,7 +3,7 @@
  * @enum {string}
  */
 export const formatTypes = {
-    RAW: 'Raw',
+    PLAIN_TEXT: 'Plain Text',
     JSON: 'JSON',
     // XML: 'XML',
     // YML: 'YML',

frontend/src/langs/en-us.json

@@ -7,7 +7,6 @@
     "warning": "Warning",
     "error": "Error",
     "save": "Save",
-    "update": "Update",
     "none": "None",
     "second": "Second(s)",
     "unit_day": "D",

frontend/src/langs/pt-br.json

@@ -7,7 +7,6 @@
     "warning": "Aviso",
     "error": "Erro",
     "save": "Salvar",
-    "update": "Atualizar",
     "none": "Nenhum",
     "second": "Segundo(s)",
     "unit_day": "D",

frontend/src/langs/zh-cn.json

@@ -7,7 +7,6 @@
     "warning": "警告",
     "error": "错误",
     "save": "保存",
-    "update": "更新",
     "none": "无",
     "second": "秒",
     "unit_day": "天",

frontend/src/stores/browser.js

@@ -22,7 +22,6 @@ import {
     AddZSetValue,
     CleanCmdHistory,
     CloseConnection,
-    ConvertValue,
     DeleteKey,
     FlushDB,
     GetCmdHistory,
@@ -51,7 +50,6 @@ import { KeyViewType } from '@/consts/key_view_type.js'
 import { ConnectionType } from '@/consts/connection_type.js'
 import { types } from '@/consts/support_redis_type.js'
 import useConnectionStore from 'stores/connections.js'
-import { decodeTypes, formatTypes } from '@/consts/value_view_type.js'
 
 const useBrowserStore = defineStore('browser', {
     /**
@@ -423,19 +421,17 @@ const useBrowserStore = defineStore('browser', {
 
         /**
          * reload key
-         * @param {string} server
+         * @param server
-         * @param {number} db
+         * @param db
-         * @param {string|number[]} key
+         * @param key
-         * @param {string} [decode]
-         * @param {string} [format]
          * @return {Promise<void>}
          */
-        async reloadKey({ server, db, key, decode, format }) {
+        async reloadKey({ server, db, key }) {
             const tab = useTabStore()
             try {
                 tab.updateLoading({ server, db, loading: true })
                 await this.loadKeySummary({ server, db, key })
-                await this.loadKeyDetail({ server, db, key, decode, format, reset: true })
+                await this.loadKeyDetail({ server, db, key, reset: true })
             } finally {
                 tab.updateLoading({ server, db, loading: false })
             }
@@ -446,14 +442,14 @@ const useBrowserStore = defineStore('browser', {
          * @param {string} server
          * @param {number} db
          * @param {string|number[]} key
-         * @param {string} [format]
+         * @param {string} [viewType]
-         * @param {string} [decode]
+         * @param {string} [decodeType]
          * @param {string} [matchPattern]
          * @param {boolean} [reset]
          * @param {boolean} [full]
          * @return {Promise<void>}
          */
-        async loadKeyDetail({ server, db, key, format, decode, matchPattern, reset, full }) {
+        async loadKeyDetail({ server, db, key, viewType, decodeType, matchPattern, reset, full }) {
             const tab = useTabStore()
             try {
                 tab.updateLoading({ server, db, loading: true })
@@ -461,51 +457,31 @@ const useBrowserStore = defineStore('browser', {
                     server,
                     db,
                     key,
-                    format,
+                    viewAs: viewType,
-                    decode,
+                    decodeType,
                     matchPattern,
                     full: full === true,
                     reset,
                     lite: true,
                 })
                 if (success) {
-                    const { value, decode: retDecode, format: retFormat, end } = data
+                    const { value, viewAs, decodeType: decode, end } = data
                     tab.updateValue({
                         server,
                         db,
                         key: decodeRedisKey(key),
                         value,
-                        decode: retDecode,
+                        viewAs,
-                        format: retFormat,
+                        decode,
                         reset: reset || full === true,
                         end,
                     })
-                } else {
-                    $message.error('load key detail fail:' + msg)
                 }
             } finally {
                 tab.updateLoading({ server, db, loading: false })
             }
         },
 
-        /**
-         * convert value by decode type or format
-         * @param {string|number[]} value
-         * @param {string} [decode]
-         * @param {string} [format]
-         * @return {Promise<{[format]: string, [decode]: string, value: string}>}
-         */
-        async convertValue({ value, decode, format }) {
-            try {
-                const { data, success } = await ConvertValue(value, decode, format)
-                if (success) {
-                    const { value: retVal, decode: retDecode, format: retFormat } = data
-                    return { value: retVal, decode: retDecode, format: retFormat }
-                }
-            } catch (e) {}
-            return { value, decode, format }
-        },
-
         /**
          * scan keys with prefix
          * @param {string} connName
@@ -953,41 +929,27 @@ const useBrowserStore = defineStore('browser', {
 
         /**
          * set redis key
-         * @param {string} server
+         * @param {string} connName
          * @param {number} db
          * @param {string|number[]} key
          * @param {string} keyType
          * @param {any} value
          * @param {number} ttl
-         * @param {string} [format]
+         * @param {string} [viewAs]
          * @param {string} [decode]
          * @returns {Promise<{[msg]: string, success: boolean, [nodeKey]: {string}}>}
          */
-        async setKey({ server, db, key, keyType, value, ttl, format = formatTypes.RAW, decode = decodeTypes.NONE }) {
+        async setKey(connName, db, key, keyType, value, ttl, viewAs, decode) {
             try {
-                const { data, success, msg } = await SetKeyValue({
+                const { data, success, msg } = await SetKeyValue(connName, db, key, keyType, value, ttl, viewAs, decode)
-                    server,
-                    db,
-                    key,
-                    keyType,
-                    value,
-                    ttl,
-                    format,
-                    decode,
-                })
                 if (success) {
-                    const { value } = data
                     // update tree view data
-                    const { newKey = 0 } = this._addKeyNodes(server, db, [key], true)
+                    const { newKey = 0 } = this._addKeyNodes(connName, db, [key], true)
                     if (newKey > 0) {
-                        this._tidyNode(server, db, key)
+                        this._tidyNode(connName, db, key)
-                        this._updateDBMaxKeys(server, db, newKey)
+                        this._updateDBMaxKeys(connName, db, newKey)
-                    }
-                    return {
-                        success,
-                        nodeKey: `${server}/db${db}#${ConnectionType.RedisValue}/${key}`,
-                        updatedValue: value,
                     }
+                    return { success, nodeKey: `${connName}/db${db}#${ConnectionType.RedisValue}/${key}` }
                 } else {
                     return { success, msg }
                 }
@@ -997,54 +959,30 @@ const useBrowserStore = defineStore('browser', {
         },
 
         /**
-         * update hash entry
+         * update hash field
          * when field is set, newField is null, delete field
          * when field is null, newField is set, add new field
          * when both field and newField are set, and field === newField, update field
          * when both field and newField are set, and field !== newField, delete field and add newField
-         * @param {string} server
+         * @param {string} connName
          * @param {number} db
          * @param {string|number[]} key
          * @param {string} field
-         * @param {string} [newField]
+         * @param {string} newField
-         * @param {string} [value]
+         * @param {string} value
-         * @param {string} [decode]
-         * @param {string} [format]
-         * @param {boolean} [refresh]
          * @returns {Promise<{[msg]: string, success: boolean, [updated]: {}}>}
          */
-        async setHash({
+        async setHash(connName, db, key, field, newField, value) {
-            server,
-            db,
-            key,
-            field,
-            newField = '',
-            value = '',
-            decode = decodeTypes.NONE,
-            format = formatTypes.RAW,
-            refresh,
-        }) {
             try {
-                const { data, success, msg } = await SetHashValue({
+                const { data, success, msg } = await SetHashValue(connName, db, key, field, newField || '', value || '')
-                    server,
-                    db,
-                    key,
-                    field,
-                    newField,
-                    value,
-                    decode,
-                    format,
-                })
                 if (success) {
                     const { updated = {}, removed = [], replaced = {} } = data
-                    if (refresh === true) {
                     const tab = useTabStore()
                     if (!isEmpty(removed)) {
-                            tab.removeValueEntries({ server, db, key, type: 'hash', entries: removed })
+                        tab.removeValueEntries({ server: connName, db, key, type: 'hash', entries: removed })
                     }
                     if (!isEmpty(updated)) {
-                            tab.upsertValueEntries({ server, db, key, type: 'hash', entries: updated })
+                        tab.upsertValueEntries({ server: connName, db, key, type: 'hash', entries: updated })
-                        }
                     }
                     return { success, updated }
                 } else {

frontend/src/stores/tab.js

@@ -19,8 +19,8 @@ const useTabStore = defineStore('tab', {
      * @param {number} [size] memory usage
      * @param {number} [length] length of content or entries
      * @property {int} [ttl] ttl of current key
+     * @param {string} [viewAs]
      * @param {string} [decode]
-     * @param {string} [format]
      * @param {boolean} [end]
      * @param {boolean} [loading]
      */
@@ -149,18 +149,18 @@ const useTabStore = defineStore('tab', {
          * @param {number} db
          * @param {string} key
          * @param {*} value
-         * @param {string} [format]
+         * @param {string} [viewAs]
          * @param {string] [decode]
          * @param {boolean} reset
          * @param {boolean} [end] keep end status if not set
          */
-        updateValue({ server, db, key, value, format, decode, reset, end }) {
+        updateValue({ server, db, key, value, viewAs, decode, reset, end }) {
             const tab = find(this.tabList, { name: server, db, key })
             if (tab == null) {
                 return
             }
 
-            tab.format = format || tab.format
+            tab.viewAs = viewAs || tab.viewAs
             tab.decode = decode || tab.decode
             if (typeof end === 'boolean') {
                 tab.end = end

frontend/src/utils/theme.js

@@ -57,10 +57,6 @@ export const themeOverrides = {
     Message: {
         margin: '0 0 38px 0',
     },
-    DataTable: {
-        thPaddingSmall: '6px 8px',
-        tdPaddingSmall: '6px 8px',
-    },
 }
 
 /**