backend/consts/default_config.go

@@ -6,5 +6,3 @@ const DEFAULT_WINDOW_WIDTH = 1024
 const DEFAULT_WINDOW_HEIGHT = 768
 const MIN_WINDOW_WIDTH = 960
 const MIN_WINDOW_HEIGHT = 640
-const DEFAULT_LOAD_SIZE = 10000
-const DEFAULT_SCAN_SIZE = 3000

backend/services/connection_service.go

@@ -16,7 +16,6 @@ import (
 	"sync"
 	"sync/atomic"
 	"time"
-	"tinyrdm/backend/consts"
 	. "tinyrdm/backend/storage"
 	"tinyrdm/backend/types"
 	"tinyrdm/backend/utils/coll"
@@ -44,8 +43,6 @@ type connectionItem struct {
 	client     redis.UniversalClient
 	ctx        context.Context
 	cancelFunc context.CancelFunc
-	cursor     map[int]uint64 // current cursor of databases
-	stepSize   int64
 }
 
 type keyItem struct {
@@ -393,13 +390,12 @@ func (c *connectionService) DeleteGroup(name string, includeConn bool) (resp typ
 
 // OpenConnection open redis server connection
 func (c *connectionService) OpenConnection(name string) (resp types.JSResp) {
-	item, err := c.getRedisClient(name, 0)
+	client, ctx, err := c.getRedisClient(name, 0)
 	if err != nil {
 		resp.Msg = err.Error()
 		return
 	}
 
-	client, ctx := item.client, item.ctx
 	// get connection config
 	selConn := c.conns.GetConnection(name)
 
@@ -526,18 +522,18 @@ func (c *connectionService) CloseConnection(name string) (resp types.JSResp) {
 	return
 }
 
-// get a redis client from local cache or create a new open
+// get redis client from local cache or create a new open
 // if db >= 0, will also switch to db index
-func (c *connectionService) getRedisClient(connName string, db int) (item connectionItem, err error) {
+func (c *connectionService) getRedisClient(connName string, db int) (redis.UniversalClient, context.Context, error) {
-	var ok bool
+	item, ok := c.connMap[connName]
 	var client redis.UniversalClient
-	if item, ok = c.connMap[connName]; ok {
+	var ctx context.Context
-		client = item.client
+	if ok {
+		client, ctx = item.client, item.ctx
 	} else {
 		selConn := c.conns.GetConnection(connName)
 		if selConn == nil {
-			err = fmt.Errorf("no match connection \"%s\"", connName)
+			return nil, nil, fmt.Errorf("no match connection \"%s\"", connName)
-			return
 		}
 
 		hook := redis2.NewHook(connName, func(cmd string, cost int64) {
@@ -554,10 +550,10 @@ func (c *connectionService) getRedisClient(connName string, db int) (item connec
 			})
 		})
 
+		var err error
 		client, err = c.createRedisClient(selConn.ConnectionConfig)
 		if err != nil {
-			err = fmt.Errorf("create conenction error: %s", err.Error())
+			return nil, nil, fmt.Errorf("create conenction error: %s", err.Error())
-			return
 		}
 		// add hook to each node in cluster mode
 		var cluster *redis.ClusterClient
@@ -567,51 +563,33 @@ func (c *connectionService) getRedisClient(connName string, db int) (item connec
 				return nil
 			})
 			if err != nil {
-				err = fmt.Errorf("get cluster nodes error: %s", err.Error())
+				return nil, nil, fmt.Errorf("get cluster nodes error: %s", err.Error())
-				return
 			}
 		} else {
 			client.AddHook(hook)
 		}
 
 		if _, err = client.Ping(c.ctx).Result(); err != nil && err != redis.Nil {
-			err = errors.New("can not connect to redis server:" + err.Error())
+			return nil, nil, errors.New("can not connect to redis server:" + err.Error())
-			return
 		}
-		ctx, cancelFunc := context.WithCancel(c.ctx)
+		var cancelFunc context.CancelFunc
-		item = connectionItem{
+		ctx, cancelFunc = context.WithCancel(c.ctx)
+		c.connMap[connName] = connectionItem{
 			client:     client,
 			ctx:        ctx,
 			cancelFunc: cancelFunc,
-			cursor:     map[int]uint64{},
-			stepSize:   int64(selConn.LoadSize),
 		}
-		if item.stepSize <= 0 {
-			item.stepSize = consts.DEFAULT_LOAD_SIZE
-		}
-		c.connMap[connName] = item
 	}
 
 	if db >= 0 {
 		var rdb *redis.Client
 		if rdb, ok = client.(*redis.Client); ok && rdb != nil {
-			if err = rdb.Do(item.ctx, "select", strconv.Itoa(db)).Err(); err != nil {
+			if err := rdb.Do(ctx, "select", strconv.Itoa(db)).Err(); err != nil {
-				return
+				return nil, nil, err
 			}
 		}
 	}
-	return
+	return client, ctx, nil
-}
-
-// save current scan cursor
-func (c *connectionService) setClientCursor(connName string, db int, cursor uint64) {
-	if _, ok := c.connMap[connName]; ok {
-		if cursor == 0 {
-			delete(c.connMap[connName].cursor, db)
-		} else {
-			c.connMap[connName].cursor[db] = cursor
-		}
-	}
 }
 
 // parse command response content which use "redis info"
@@ -653,13 +631,12 @@ func (c *connectionService) parseDBItemInfo(info string) map[string]int {
 
 // ServerInfo get server info
 func (c *connectionService) ServerInfo(name string) (resp types.JSResp) {
-	item, err := c.getRedisClient(name, 0)
+	client, ctx, err := c.getRedisClient(name, 0)
 	if err != nil {
 		resp.Msg = err.Error()
 		return
 	}
 
-	client, ctx := item.client, item.ctx
 	// get database info
 	res, err := client.Info(ctx).Result()
 	if err != nil {
@@ -675,43 +652,31 @@ func (c *connectionService) ServerInfo(name string) (resp types.JSResp) {
 // OpenDatabase open select database, and list all keys
 // @param path contain connection name and db name
 func (c *connectionService) OpenDatabase(connName string, db int, match string, keyType string) (resp types.JSResp) {
-	c.setClientCursor(connName, db, 0)
+	return c.ScanKeys(connName, db, match, keyType)
-	return c.LoadNextKeys(connName, db, match, keyType)
 }
 
-// scan keys
+// ScanKeys scan all keys
-// @return loaded keys
+func (c *connectionService) ScanKeys(connName string, db int, match, keyType string) (resp types.JSResp) {
-// @return next cursor
+	client, ctx, err := c.getRedisClient(connName, db)
-// @return scan error
+	if err != nil {
-func (c *connectionService) scanKeys(ctx context.Context, client redis.UniversalClient, match, keyType string, cursor uint64, count int64) ([]any, uint64, error) {
+		resp.Msg = err.Error()
-	var err error
+		return
-	filterType := len(keyType) > 0
+	}
-	scanSize := int64(Preferences().GetScanSize())
-	// define sub scan function
-	scan := func(ctx context.Context, cli redis.UniversalClient, appendFunc func(k []any)) error {
-		var loadedKey []string
-		var scanCount int64
-		for {
-			if filterType {
-				loadedKey, cursor, err = cli.ScanType(ctx, cursor, match, scanSize, keyType).Result()
-			} else {
-				loadedKey, cursor, err = cli.Scan(ctx, cursor, match, scanSize).Result()
-			}
-			if err != nil {
-				return err
-			} else {
-				ks := sliceutil.Map(loadedKey, func(i int) any {
-					return strutil.EncodeRedisKey(loadedKey[i])
-				})
-				scanCount += int64(len(ks))
-				appendFunc(ks)
-			}
 
-			if (count > 0 && scanCount > count) || cursor == 0 {
+	filterType := len(keyType) > 0
-				break
+	var countPerScan int64 = 10000
-			}
+	// define sub scan function
+	scan := func(ctx context.Context, cli redis.UniversalClient, appendFunc func(k any)) error {
+		var iter *redis.ScanIterator
+		if filterType {
+			iter = cli.ScanType(ctx, 0, match, countPerScan, keyType).Iterator()
+		} else {
+			iter = cli.Scan(ctx, 0, match, countPerScan).Iterator()
 		}
-		return nil
+		for iter.Next(ctx) {
+			appendFunc(strutil.EncodeRedisKey(iter.Val()))
+		}
+		return iter.Err()
 	}
 
 	var keys []any
@@ -719,64 +684,22 @@ func (c *connectionService) scanKeys(ctx context.Context, client redis.Universal
 		// cluster mode
 		var mutex sync.Mutex
 		err = cluster.ForEachMaster(ctx, func(ctx context.Context, cli *redis.Client) error {
-			return scan(ctx, cli, func(k []any) {
+			return scan(ctx, cli, func(k any) {
 				mutex.Lock()
-				keys = append(keys, k...)
+				keys = append(keys, k)
 				mutex.Unlock()
 			})
 		})
 	} else {
-		err = scan(ctx, client, func(k []any) {
+		err = scan(ctx, client, func(k any) {
-			keys = append(keys, k...)
+			keys = append(keys, k)
 		})
 	}
-	if err != nil {
-		return nil, cursor, err
-	}
-	return keys, cursor, nil
-}
-
-// LoadNextKeys load next key from saved cursor
-func (c *connectionService) LoadNextKeys(connName string, db int, match, keyType string) (resp types.JSResp) {
-	item, err := c.getRedisClient(connName, db)
 	if err != nil {
 		resp.Msg = err.Error()
 		return
 	}
 
-	client, ctx, count := item.client, item.ctx, item.stepSize
-	cursor := item.cursor[db]
-	keys, cursor, err := c.scanKeys(ctx, client, match, keyType, cursor, count)
-	if err != nil {
-		resp.Msg = err.Error()
-		return
-	}
-	c.setClientCursor(connName, db, cursor)
-
-	resp.Success = true
-	resp.Data = map[string]any{
-		"keys": keys,
-		"end":  cursor == 0,
-	}
-	return
-}
-
-// LoadAllKeys load all keys
-func (c *connectionService) LoadAllKeys(connName string, db int, match, keyType string) (resp types.JSResp) {
-	item, err := c.getRedisClient(connName, db)
-	if err != nil {
-		resp.Msg = err.Error()
-		return
-	}
-
-	client, ctx := item.client, item.ctx
-	keys, _, err := c.scanKeys(ctx, client, match, keyType, 0, 0)
-	if err != nil {
-		resp.Msg = err.Error()
-		return
-	}
-	c.setClientCursor(connName, db, 0)
-
 	resp.Success = true
 	resp.Data = map[string]any{
 		"keys": keys,
@@ -786,13 +709,12 @@ func (c *connectionService) LoadAllKeys(connName string, db int, match, keyType
 
 // GetKeyValue get value by key
 func (c *connectionService) GetKeyValue(connName string, db int, k any, viewAs string) (resp types.JSResp) {
-	item, err := c.getRedisClient(connName, db)
+	client, ctx, err := c.getRedisClient(connName, db)
 	if err != nil {
 		resp.Msg = err.Error()
 		return
 	}
 
-	client, ctx := item.client, item.ctx
 	key := strutil.DecodeRedisKey(k)
 	var keyType string
 	var dur time.Duration
@@ -833,10 +755,9 @@ func (c *connectionService) GetKeyValue(connName string, db int, k any, viewAs s
 	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()
+			loadedVal, cursor, err = client.HScan(ctx, key, cursor, "*", 10000).Result()
 			if err != nil {
 				resp.Msg = err.Error()
 				return
@@ -853,10 +774,9 @@ func (c *connectionService) GetKeyValue(connName string, db int, k any, viewAs s
 	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()
+			loadedKey, cursor, err = client.SScan(ctx, key, cursor, "*", 10000).Result()
 			if err != nil {
 				resp.Msg = err.Error()
 				return
@@ -871,10 +791,9 @@ func (c *connectionService) GetKeyValue(connName string, db int, k any, viewAs s
 	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()
+			loadedVal, cursor, err = client.ZScan(ctx, key, cursor, "*", 10000).Result()
 			if err != nil {
 				resp.Msg = err.Error()
 				return
@@ -929,13 +848,12 @@ func (c *connectionService) GetKeyValue(connName string, db int, k any, viewAs s
 // SetKeyValue set value by key
 // @param ttl <= 0 means keep current ttl
 func (c *connectionService) SetKeyValue(connName string, db int, k any, keyType string, value any, ttl int64, viewAs string) (resp types.JSResp) {
-	item, err := c.getRedisClient(connName, db)
+	client, ctx, err := c.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 ttl < 0 {
@@ -1053,13 +971,12 @@ func (c *connectionService) SetKeyValue(connName string, db int, k any, keyType
 
 // SetHashValue set hash field
 func (c *connectionService) SetHashValue(connName string, db int, k any, field, newField, value string) (resp types.JSResp) {
-	item, err := c.getRedisClient(connName, db)
+	client, ctx, err := c.getRedisClient(connName, db)
 	if err != nil {
 		resp.Msg = err.Error()
 		return
 	}
 
-	client, ctx := item.client, item.ctx
 	key := strutil.DecodeRedisKey(k)
 	var removedField []string
 	updatedField := map[string]string{}
@@ -1100,13 +1017,12 @@ func (c *connectionService) SetHashValue(connName string, db int, k any, field,
 
 // AddHashField add or update hash field
 func (c *connectionService) AddHashField(connName string, db int, k any, action int, fieldItems []any) (resp types.JSResp) {
-	item, err := c.getRedisClient(connName, db)
+	client, ctx, err := c.getRedisClient(connName, db)
 	if err != nil {
 		resp.Msg = err.Error()
 		return
 	}
 
-	client, ctx := item.client, item.ctx
 	key := strutil.DecodeRedisKey(k)
 	updated := map[string]any{}
 	switch action {
@@ -1147,13 +1063,12 @@ func (c *connectionService) AddHashField(connName string, db int, k any, action
 
 // AddListItem add item to list or remove from it
 func (c *connectionService) AddListItem(connName string, db int, k any, action int, items []any) (resp types.JSResp) {
-	item, err := c.getRedisClient(connName, db)
+	client, ctx, err := c.getRedisClient(connName, db)
 	if err != nil {
 		resp.Msg = err.Error()
 		return
 	}
 
-	client, ctx := item.client, item.ctx
 	key := strutil.DecodeRedisKey(k)
 	var leftPush, rightPush []any
 	switch action {
@@ -1181,13 +1096,12 @@ func (c *connectionService) AddListItem(connName string, db int, k any, action i
 
 // SetListItem update or remove list item by index
 func (c *connectionService) SetListItem(connName string, db int, k any, index int64, value string) (resp types.JSResp) {
-	item, err := c.getRedisClient(connName, db)
+	client, ctx, err := c.getRedisClient(connName, db)
 	if err != nil {
 		resp.Msg = err.Error()
 		return
 	}
 
-	client, ctx := item.client, item.ctx
 	key := strutil.DecodeRedisKey(k)
 	var removed []int64
 	updated := map[int64]string{}
@@ -1225,13 +1139,12 @@ func (c *connectionService) SetListItem(connName string, db int, k any, index in
 
 // SetSetItem add members to set or remove from set
 func (c *connectionService) SetSetItem(connName string, db int, k any, remove bool, members []any) (resp types.JSResp) {
-	item, err := c.getRedisClient(connName, db)
+	client, ctx, err := c.getRedisClient(connName, db)
 	if err != nil {
 		resp.Msg = err.Error()
 		return
 	}
 
-	client, ctx := item.client, item.ctx
 	key := strutil.DecodeRedisKey(k)
 	if remove {
 		_, err = client.SRem(ctx, key, members...).Result()
@@ -1249,13 +1162,12 @@ func (c *connectionService) SetSetItem(connName string, db int, k any, remove bo
 
 // UpdateSetItem replace member of set
 func (c *connectionService) UpdateSetItem(connName string, db int, k any, value, newValue string) (resp types.JSResp) {
-	item, err := c.getRedisClient(connName, db)
+	client, ctx, err := c.getRedisClient(connName, db)
 	if err != nil {
 		resp.Msg = err.Error()
 		return
 	}
 
-	client, ctx := item.client, item.ctx
 	key := strutil.DecodeRedisKey(k)
 	_, _ = client.SRem(ctx, key, value).Result()
 	_, err = client.SAdd(ctx, key, newValue).Result()
@@ -1270,13 +1182,12 @@ func (c *connectionService) UpdateSetItem(connName string, db int, k any, value,
 
 // UpdateZSetValue update value of sorted set member
 func (c *connectionService) UpdateZSetValue(connName string, db int, k any, value, newValue string, score float64) (resp types.JSResp) {
-	item, err := c.getRedisClient(connName, db)
+	client, ctx, err := c.getRedisClient(connName, db)
 	if err != nil {
 		resp.Msg = err.Error()
 		return
 	}
 
-	client, ctx := item.client, item.ctx
 	key := strutil.DecodeRedisKey(k)
 	updated := map[string]any{}
 	var removed []string
@@ -1322,13 +1233,12 @@ func (c *connectionService) UpdateZSetValue(connName string, db int, k any, valu
 
 // AddZSetValue add item to sorted set
 func (c *connectionService) AddZSetValue(connName string, db int, k any, action int, valueScore map[string]float64) (resp types.JSResp) {
-	item, err := c.getRedisClient(connName, db)
+	client, ctx, err := c.getRedisClient(connName, db)
 	if err != nil {
 		resp.Msg = err.Error()
 		return
 	}
 
-	client, ctx := item.client, item.ctx
 	key := strutil.DecodeRedisKey(k)
 	members := maputil.ToSlice(valueScore, func(k string) redis.Z {
 		return redis.Z{
@@ -1356,13 +1266,12 @@ func (c *connectionService) AddZSetValue(connName string, db int, k any, action
 
 // AddStreamValue add stream field
 func (c *connectionService) AddStreamValue(connName string, db int, k any, ID string, fieldItems []any) (resp types.JSResp) {
-	item, err := c.getRedisClient(connName, db)
+	client, ctx, err := c.getRedisClient(connName, db)
 	if err != nil {
 		resp.Msg = err.Error()
 		return
 	}
 
-	client, ctx := item.client, item.ctx
 	key := strutil.DecodeRedisKey(k)
 	_, err = client.XAdd(ctx, &redis.XAddArgs{
 		Stream: key,
@@ -1380,13 +1289,12 @@ func (c *connectionService) AddStreamValue(connName string, db int, k any, ID st
 
 // RemoveStreamValues remove stream values by id
 func (c *connectionService) RemoveStreamValues(connName string, db int, k any, IDs []string) (resp types.JSResp) {
-	item, err := c.getRedisClient(connName, db)
+	client, ctx, err := c.getRedisClient(connName, db)
 	if err != nil {
 		resp.Msg = err.Error()
 		return
 	}
 
-	client, ctx := item.client, item.ctx
 	key := strutil.DecodeRedisKey(k)
 	_, err = client.XDel(ctx, key, IDs...).Result()
 	resp.Success = true
@@ -1395,13 +1303,12 @@ func (c *connectionService) RemoveStreamValues(connName string, db int, k any, I
 
 // SetKeyTTL set ttl of key
 func (c *connectionService) SetKeyTTL(connName string, db int, k any, ttl int64) (resp types.JSResp) {
-	item, err := c.getRedisClient(connName, db)
+	client, ctx, err := c.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 ttl < 0 {
@@ -1423,13 +1330,12 @@ func (c *connectionService) SetKeyTTL(connName string, db int, k any, ttl int64)
 
 // DeleteKey remove redis key
 func (c *connectionService) DeleteKey(connName string, db int, k any, async bool) (resp types.JSResp) {
-	item, err := c.getRedisClient(connName, db)
+	client, ctx, err := c.getRedisClient(connName, db)
 	if err != nil {
 		resp.Msg = err.Error()
 		return
 	}
 
-	client, ctx := item.client, item.ctx
 	key := strutil.DecodeRedisKey(k)
 	var deletedKeys []string
 	if strings.HasSuffix(key, "*") {
@@ -1454,8 +1360,7 @@ func (c *connectionService) DeleteKey(connName string, db int, k any, async bool
 				return nil
 			}
 
-			scanSize := int64(Preferences().GetScanSize())
+			iter := cli.Scan(ctx, 0, key, 10000).Iterator()
-			iter := cli.Scan(ctx, 0, key, scanSize).Iterator()
 			resultKeys := make([]string, 0, 100)
 			for iter.Next(ctx) {
 				resultKeys = append(resultKeys, iter.Val())
@@ -1509,13 +1414,12 @@ func (c *connectionService) DeleteKey(connName string, db int, k any, async bool
 
 // RenameKey rename key
 func (c *connectionService) RenameKey(connName string, db int, key, newKey string) (resp types.JSResp) {
-	item, err := c.getRedisClient(connName, db)
+	client, ctx, err := c.getRedisClient(connName, db)
 	if err != nil {
 		resp.Msg = err.Error()
 		return
 	}
 
-	client, ctx := item.client, item.ctx
 	if _, ok := client.(*redis.ClusterClient); ok {
 		resp.Msg = "RENAME not support in cluster mode yet"
 		return

backend/services/preferences_service.go

@@ -133,15 +133,6 @@ func (p *preferencesService) GetWindowSize() (width, height int) {
 	return
 }
 
-func (p *preferencesService) GetScanSize() int {
-	data := p.pref.GetPreferences()
-	size := data.General.ScanSize
-	if size <= 0 {
-		size = consts.DEFAULT_SCAN_SIZE
-	}
-	return size
-}
-
 type latestRelease struct {
 	Name    string `json:"name"`
 	TagName string `json:"tag_name"`

backend/storage/connections.go

@@ -4,7 +4,6 @@ import (
 	"errors"
 	"gopkg.in/yaml.v3"
 	"sync"
-	"tinyrdm/backend/consts"
 	"tinyrdm/backend/types"
 	sliceutil "tinyrdm/backend/utils/slice"
 )
@@ -37,7 +36,6 @@ func (c *ConnectionsStorage) defaultConnectionItem() types.ConnectionConfig {
 		ExecTimeout:   60,
 		DBFilterType:  "none",
 		DBFilterList:  []int{},
-		LoadSize:      consts.DEFAULT_LOAD_SIZE,
 		MarkColor:     "",
 		Sentinel: types.ConnectionSentinel{
 			Master: "mymaster",

backend/storage/preferences.go

@@ -46,7 +46,6 @@ func (p *PreferencesStorage) GetPreferences() (ret types.Preferences) {
 	defer p.mutex.Unlock()
 
 	ret = p.getPreferences()
-	ret.General.ScanSize = max(ret.General.ScanSize, consts.DEFAULT_SCAN_SIZE)
 	ret.Behavior.AsideWidth = max(ret.Behavior.AsideWidth, consts.DEFAULT_ASIDE_WIDTH)
 	ret.Behavior.WindowWidth = max(ret.Behavior.WindowWidth, consts.MIN_WINDOW_WIDTH)
 	ret.Behavior.WindowHeight = max(ret.Behavior.WindowHeight, consts.MIN_WINDOW_HEIGHT)

backend/types/connection.go

@@ -15,7 +15,6 @@ type ConnectionConfig struct {
 	ExecTimeout   int                `json:"execTimeout,omitempty" yaml:"exec_timeout,omitempty"`
 	DBFilterType  string             `json:"dbFilterType" yaml:"db_filter_type,omitempty"`
 	DBFilterList  []int              `json:"dbFilterList" yaml:"db_filter_list,omitempty"`
-	LoadSize      int                `json:"loadSize,omitempty" yaml:"load_size,omitempty"`
 	MarkColor     string             `json:"markColor,omitempty" yaml:"mark_color,omitempty"`
 	SSL           ConnectionSSL      `json:"ssl,omitempty" yaml:"ssl,omitempty"`
 	SSH           ConnectionSSH      `json:"ssh,omitempty" yaml:"ssh,omitempty"`

backend/types/preferences.go

@@ -19,7 +19,6 @@ func NewPreferences() Preferences {
 			Theme:       "auto",
 			Language:    "auto",
 			FontSize:    consts.DEFAULT_FONT_SIZE,
-			ScanSize:    consts.DEFAULT_SCAN_SIZE,
 			CheckUpdate: true,
 		},
 		Editor: PreferencesEditor{
@@ -39,7 +38,6 @@ type PreferencesGeneral struct {
 	Language        string `json:"language" yaml:"language"`
 	Font            string `json:"font" yaml:"font,omitempty"`
 	FontSize        int    `json:"fontSize" yaml:"font_size"`
-	ScanSize        int    `json:"scanSize" yaml:"scan_size"`
 	UseSysProxy     bool   `json:"useSysProxy" yaml:"use_sys_proxy,omitempty"`
 	UseSysProxyHttp bool   `json:"useSysProxyHttp" yaml:"use_sys_proxy_http,omitempty"`
 	CheckUpdate     bool   `json:"checkUpdate" yaml:"check_update"`

frontend/package-lock.json

@@ -12,8 +12,8 @@
         "highlight.js": "^11.9.0",
         "lodash": "^4.17.21",
         "pinia": "^2.1.7",
-        "sass": "^1.69.4",
+        "sass": "^1.69.3",
-        "vue": "^3.3.6",
+        "vue": "^3.3.4",
         "vue-i18n": "^9.5.0"
       },
       "devDependencies": {
@@ -21,9 +21,9 @@
         "naive-ui": "^2.35.0",
         "prettier": "^3.0.3",
         "unplugin-auto-import": "^0.16.6",
-        "unplugin-icons": "^0.17.1",
+        "unplugin-icons": "^0.17.0",
         "unplugin-vue-components": "^0.25.2",
-        "vite": "^4.5.0"
+        "vite": "^4.4.11"
       }
     },
     "node_modules/@antfu/install-pkg": {
@@ -43,9 +43,9 @@
       "dev": true
     },
     "node_modules/@babel/parser": {
-      "version": "7.23.0",
+      "version": "7.22.16",
-      "resolved": "https://registry.npmmirror.com/@babel/parser/-/parser-7.23.0.tgz",
+      "resolved": "https://registry.npmmirror.com/@babel/parser/-/parser-7.22.16.tgz",
-      "integrity": "sha512-vvPKKdMemU85V9WE/l5wZEmImpCtLqbnTvqDS2U1fJ96KrxoW7KrXhNsNCblQlg8Ck4b85yxdTyelsMUgFUXiw==",
+      "integrity": "sha512-+gPfKv8UWeKKeJTUxe59+OobVcrYHETCsORl61EmSkmgymguYk/X5bp7GuUIXaFsc6y++v8ZxPsLSSuujqDphA==",
       "bin": {
         "parser": "bin/babel-parser.js"
       },
@@ -448,9 +448,9 @@
       "dev": true
     },
     "node_modules/@iconify/utils": {
-      "version": "2.1.11",
+      "version": "2.1.9",
-      "resolved": "https://registry.npmmirror.com/@iconify/utils/-/utils-2.1.11.tgz",
+      "resolved": "https://registry.npmmirror.com/@iconify/utils/-/utils-2.1.9.tgz",
-      "integrity": "sha512-M/w3PkN8zQYXi8N6qK/KhnYMfEbbb6Sk8RZVn8g+Pmmu5ybw177RpsaGwpziyHeUsu4etrexYSWq3rwnIqzYCg==",
+      "integrity": "sha512-mo+A4n3MwLlWlg1SoSO+Dt6pOPWKElk9sSJ6ZpuzbB9OcjxN8RUWxU3ulPwB1nglErWKRam2x4BAohbYF7FiFA==",
       "dev": true,
       "dependencies": {
         "@antfu/install-pkg": "^0.1.1",
@@ -602,49 +602,49 @@
       }
     },
     "node_modules/@vue/compiler-core": {
-      "version": "3.3.6",
+      "version": "3.3.4",
-      "resolved": "https://registry.npmmirror.com/@vue/compiler-core/-/compiler-core-3.3.6.tgz",
+      "resolved": "https://registry.npmmirror.com/@vue/compiler-core/-/compiler-core-3.3.4.tgz",
-      "integrity": "sha512-2JNjemwaNwf+MkkatATVZi7oAH1Hx0B04DdPH3ZoZ8vKC1xZVP7nl4HIsk8XYd3r+/52sqqoz9TWzYc3yE9dqA==",
+      "integrity": "sha512-cquyDNvZ6jTbf/+x+AgM2Arrp6G4Dzbb0R64jiG804HRMfRiFXWI6kqUVqZ6ZR0bQhIoQjB4+2bhNtVwndW15g==",
       "dependencies": {
-        "@babel/parser": "^7.23.0",
+        "@babel/parser": "^7.21.3",
-        "@vue/shared": "3.3.6",
+        "@vue/shared": "3.3.4",
         "estree-walker": "^2.0.2",
         "source-map-js": "^1.0.2"
       }
     },
     "node_modules/@vue/compiler-dom": {
-      "version": "3.3.6",
+      "version": "3.3.4",
-      "resolved": "https://registry.npmmirror.com/@vue/compiler-dom/-/compiler-dom-3.3.6.tgz",
+      "resolved": "https://registry.npmmirror.com/@vue/compiler-dom/-/compiler-dom-3.3.4.tgz",
-      "integrity": "sha512-1MxXcJYMHiTPexjLAJUkNs/Tw2eDf2tY3a0rL+LfuWyiKN2s6jvSwywH3PWD8bKICjfebX3GWx2Os8jkRDq3Ng==",
+      "integrity": "sha512-wyM+OjOVpuUukIq6p5+nwHYtj9cFroz9cwkfmP9O1nzH68BenTTv0u7/ndggT8cIQlnBeOo6sUT/gvHcIkLA5w==",
       "dependencies": {
-        "@vue/compiler-core": "3.3.6",
+        "@vue/compiler-core": "3.3.4",
-        "@vue/shared": "3.3.6"
+        "@vue/shared": "3.3.4"
       }
     },
     "node_modules/@vue/compiler-sfc": {
-      "version": "3.3.6",
+      "version": "3.3.4",
-      "resolved": "https://registry.npmmirror.com/@vue/compiler-sfc/-/compiler-sfc-3.3.6.tgz",
+      "resolved": "https://registry.npmmirror.com/@vue/compiler-sfc/-/compiler-sfc-3.3.4.tgz",
-      "integrity": "sha512-/Kms6du2h1VrXFreuZmlvQej8B1zenBqIohP0690IUBkJjsFvJxY0crcvVRJ0UhMgSR9dewB+khdR1DfbpArJA==",
+      "integrity": "sha512-6y/d8uw+5TkCuzBkgLS0v3lSM3hJDntFEiUORM11pQ/hKvkhSKZrXW6i69UyXlJQisJxuUEJKAWEqWbWsLeNKQ==",
       "dependencies": {
-        "@babel/parser": "^7.23.0",
+        "@babel/parser": "^7.20.15",
-        "@vue/compiler-core": "3.3.6",
+        "@vue/compiler-core": "3.3.4",
-        "@vue/compiler-dom": "3.3.6",
+        "@vue/compiler-dom": "3.3.4",
-        "@vue/compiler-ssr": "3.3.6",
+        "@vue/compiler-ssr": "3.3.4",
-        "@vue/reactivity-transform": "3.3.6",
+        "@vue/reactivity-transform": "3.3.4",
-        "@vue/shared": "3.3.6",
+        "@vue/shared": "3.3.4",
         "estree-walker": "^2.0.2",
-        "magic-string": "^0.30.5",
+        "magic-string": "^0.30.0",
-        "postcss": "^8.4.31",
+        "postcss": "^8.1.10",
         "source-map-js": "^1.0.2"
       }
     },
     "node_modules/@vue/compiler-ssr": {
-      "version": "3.3.6",
+      "version": "3.3.4",
-      "resolved": "https://registry.npmmirror.com/@vue/compiler-ssr/-/compiler-ssr-3.3.6.tgz",
+      "resolved": "https://registry.npmmirror.com/@vue/compiler-ssr/-/compiler-ssr-3.3.4.tgz",
-      "integrity": "sha512-QTIHAfDCHhjXlYGkUg5KH7YwYtdUM1vcFl/FxFDlD6d0nXAmnjizka3HITp8DGudzHndv2PjKVS44vqqy0vP4w==",
+      "integrity": "sha512-m0v6oKpup2nMSehwA6Uuu+j+wEwcy7QmwMkVNVfrV9P2qE5KshC6RwOCq8fjGS/Eak/uNb8AaWekfiXxbBB6gQ==",
       "dependencies": {
-        "@vue/compiler-dom": "3.3.6",
+        "@vue/compiler-dom": "3.3.4",
-        "@vue/shared": "3.3.6"
+        "@vue/shared": "3.3.4"
       }
     },
     "node_modules/@vue/devtools-api": {
@@ -653,42 +653,42 @@
       "integrity": "sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q=="
     },
     "node_modules/@vue/reactivity": {
-      "version": "3.3.6",
+      "version": "3.3.4",
-      "resolved": "https://registry.npmmirror.com/@vue/reactivity/-/reactivity-3.3.6.tgz",
+      "resolved": "https://registry.npmmirror.com/@vue/reactivity/-/reactivity-3.3.4.tgz",
-      "integrity": "sha512-gtChAumfQz5lSy5jZXfyXbKrIYPf9XEOrIr6rxwVyeWVjFhJwmwPLtV6Yis+M9onzX++I5AVE9j+iPH60U+B8Q==",
+      "integrity": "sha512-kLTDLwd0B1jG08NBF3R5rqULtv/f8x3rOFByTDz4J53ttIQEDmALqKqXY0J+XQeN0aV2FBxY8nJDf88yvOPAqQ==",
       "dependencies": {
-        "@vue/shared": "3.3.6"
+        "@vue/shared": "3.3.4"
       }
     },
     "node_modules/@vue/reactivity-transform": {
-      "version": "3.3.6",
+      "version": "3.3.4",
-      "resolved": "https://registry.npmmirror.com/@vue/reactivity-transform/-/reactivity-transform-3.3.6.tgz",
+      "resolved": "https://registry.npmmirror.com/@vue/reactivity-transform/-/reactivity-transform-3.3.4.tgz",
-      "integrity": "sha512-RlJl4dHfeO7EuzU1iJOsrlqWyJfHTkJbvYz/IOJWqu8dlCNWtxWX377WI0VsbAgBizjwD+3ZjdnvSyyFW1YVng==",
+      "integrity": "sha512-MXgwjako4nu5WFLAjpBnCj/ieqcjE2aJBINUNQzkZQfzIZA4xn+0fV1tIYBJvvva3N3OvKGofRLvQIwEQPpaXw==",
       "dependencies": {
-        "@babel/parser": "^7.23.0",
+        "@babel/parser": "^7.20.15",
-        "@vue/compiler-core": "3.3.6",
+        "@vue/compiler-core": "3.3.4",
-        "@vue/shared": "3.3.6",
+        "@vue/shared": "3.3.4",
         "estree-walker": "^2.0.2",
-        "magic-string": "^0.30.5"
+        "magic-string": "^0.30.0"
       }
     },
     "node_modules/@vue/runtime-core": {
-      "version": "3.3.6",
+      "version": "3.3.4",
-      "resolved": "https://registry.npmmirror.com/@vue/runtime-core/-/runtime-core-3.3.6.tgz",
+      "resolved": "https://registry.npmmirror.com/@vue/runtime-core/-/runtime-core-3.3.4.tgz",
-      "integrity": "sha512-qp7HTP1iw1UW2ZGJ8L3zpqlngrBKvLsDAcq5lA6JvEXHmpoEmjKju7ahM9W2p/h51h0OT5F2fGlP/gMhHOmbUA==",
+      "integrity": "sha512-R+bqxMN6pWO7zGI4OMlmvePOdP2c93GsHFM/siJI7O2nxFRzj55pLwkpCedEY+bTMgp5miZ8CxfIZo3S+gFqvA==",
       "dependencies": {
-        "@vue/reactivity": "3.3.6",
+        "@vue/reactivity": "3.3.4",
-        "@vue/shared": "3.3.6"
+        "@vue/shared": "3.3.4"
       }
     },
     "node_modules/@vue/runtime-dom": {
-      "version": "3.3.6",
+      "version": "3.3.4",
-      "resolved": "https://registry.npmmirror.com/@vue/runtime-dom/-/runtime-dom-3.3.6.tgz",
+      "resolved": "https://registry.npmmirror.com/@vue/runtime-dom/-/runtime-dom-3.3.4.tgz",
-      "integrity": "sha512-AoX3Cp8NqMXjLbIG9YR6n/pPLWE9TiDdk6wTJHFnl2GpHzDFH1HLBC9wlqqQ7RlnvN3bVLpzPGAAH00SAtOxHg==",
+      "integrity": "sha512-Aj5bTJ3u5sFsUckRghsNjVTtxZQ1OyMWCr5dZRAPijF/0Vy4xEoRCwLyHXcj4D0UFbJ4lbx3gPTgg06K/GnPnQ==",
       "dependencies": {
-        "@vue/runtime-core": "3.3.6",
+        "@vue/runtime-core": "3.3.4",
-        "@vue/shared": "3.3.6",
+        "@vue/shared": "3.3.4",
-        "csstype": "^3.1.2"
+        "csstype": "^3.1.1"
       }
     },
     "node_modules/@vue/runtime-dom/node_modules/csstype": {
@@ -697,21 +697,21 @@
       "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
     },
     "node_modules/@vue/server-renderer": {
-      "version": "3.3.6",
+      "version": "3.3.4",
-      "resolved": "https://registry.npmmirror.com/@vue/server-renderer/-/server-renderer-3.3.6.tgz",
+      "resolved": "https://registry.npmmirror.com/@vue/server-renderer/-/server-renderer-3.3.4.tgz",
-      "integrity": "sha512-kgLoN43W4ERdZ6dpyy+gnk2ZHtcOaIr5Uc/WUP5DRwutgvluzu2pudsZGoD2b7AEJHByUVMa9k6Sho5lLRCykw==",
+      "integrity": "sha512-Q6jDDzR23ViIb67v+vM1Dqntu+HUexQcsWKhhQa4ARVzxOY2HbC7QRW/ggkDBd5BU+uM1sV6XOAP0b216o34JQ==",
       "dependencies": {
-        "@vue/compiler-ssr": "3.3.6",
+        "@vue/compiler-ssr": "3.3.4",
-        "@vue/shared": "3.3.6"
+        "@vue/shared": "3.3.4"
       },
       "peerDependencies": {
-        "vue": "3.3.6"
+        "vue": "3.3.4"
       }
     },
     "node_modules/@vue/shared": {
-      "version": "3.3.6",
+      "version": "3.3.4",
-      "resolved": "https://registry.npmmirror.com/@vue/shared/-/shared-3.3.6.tgz",
+      "resolved": "https://registry.npmmirror.com/@vue/shared/-/shared-3.3.4.tgz",
-      "integrity": "sha512-Xno5pEqg8SVhomD0kTSmfh30ZEmV/+jZtyh39q6QflrjdJCXah5lrnOLi9KB6a5k5aAHXMXjoMnxlzUkCNfWLQ=="
+      "integrity": "sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ=="
     },
     "node_modules/acorn": {
       "version": "8.10.0",
@@ -1176,9 +1176,9 @@
       "dev": true
     },
     "node_modules/magic-string": {
-      "version": "0.30.5",
+      "version": "0.30.3",
-      "resolved": "https://registry.npmmirror.com/magic-string/-/magic-string-0.30.5.tgz",
+      "resolved": "https://registry.npmmirror.com/magic-string/-/magic-string-0.30.3.tgz",
-      "integrity": "sha512-7xlpfBaQaP/T6Vh8MO/EqXSW5En6INHEvEXQiuff7Gku0PWjU3uf6w/j9o7O+SpB5fOAkrI5HeoNgwjEO0pFsA==",
+      "integrity": "sha512-B7xGbll2fG/VjP+SWg4sX3JynwIU0mjoTc6MPpKNuIvftk6u6vqhDnk1R80b8C2GBR6ywqy+1DcKBrevBg+bmw==",
       "dependencies": {
         "@jridgewell/sourcemap-codec": "^1.4.15"
       },
@@ -1448,9 +1448,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.31",
+      "version": "8.4.29",
-      "resolved": "https://registry.npmmirror.com/postcss/-/postcss-8.4.31.tgz",
+      "resolved": "https://registry.npmmirror.com/postcss/-/postcss-8.4.29.tgz",
-      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
+      "integrity": "sha512-cbI+jaqIeu/VGqXEarWkRCCffhjgXc0qjBtXpqJhTBohMUjUQnbBr0xqX3vEKudc4iviTewcJo5ajcec5+wdJw==",
       "dependencies": {
         "nanoid": "^3.3.6",
         "picocolors": "^1.0.0",
@@ -1545,9 +1545,9 @@
       }
     },
     "node_modules/sass": {
-      "version": "1.69.4",
+      "version": "1.69.3",
-      "resolved": "https://registry.npmmirror.com/sass/-/sass-1.69.4.tgz",
+      "resolved": "https://registry.npmmirror.com/sass/-/sass-1.69.3.tgz",
-      "integrity": "sha512-+qEreVhqAy8o++aQfCJwp0sklr2xyEzkm9Pp/Igu9wNPoe7EZEQ8X/MBvvXggI2ql607cxKg/RKOwDj6pp2XDA==",
+      "integrity": "sha512-X99+a2iGdXkdWn1akFPs0ZmelUzyAQfvqYc2P/MPTrJRuIRoTffGzT9W9nFqG00S+c8hXzVmgxhUuHFdrwxkhQ==",
       "dependencies": {
         "chokidar": ">=3.0.0 <4.0.0",
         "immutable": "^4.0.0",
@@ -1677,12 +1677,12 @@
       }
     },
     "node_modules/unplugin": {
-      "version": "1.5.0",
+      "version": "1.4.0",
-      "resolved": "https://registry.npmmirror.com/unplugin/-/unplugin-1.5.0.tgz",
+      "resolved": "https://registry.npmmirror.com/unplugin/-/unplugin-1.4.0.tgz",
-      "integrity": "sha512-9ZdRwbh/4gcm1JTOkp9lAkIDrtOyOxgHmY7cjuwI8L/2RTikMcVG25GsZwNAgRuap3iDw2jeq7eoqtAsz5rW3A==",
+      "integrity": "sha512-5x4eIEL6WgbzqGtF9UV8VEC/ehKptPXDS6L2b0mv4FRMkJxRtjaJfOWDd6a8+kYbqsjklix7yWP0N3SUepjXcg==",
       "dev": true,
       "dependencies": {
-        "acorn": "^8.10.0",
+        "acorn": "^8.9.0",
         "chokidar": "^3.5.3",
         "webpack-sources": "^3.2.3",
         "webpack-virtual-modules": "^0.5.0"
@@ -1720,18 +1720,18 @@
       }
     },
     "node_modules/unplugin-icons": {
-      "version": "0.17.1",
+      "version": "0.17.0",
-      "resolved": "https://registry.npmmirror.com/unplugin-icons/-/unplugin-icons-0.17.1.tgz",
+      "resolved": "https://registry.npmmirror.com/unplugin-icons/-/unplugin-icons-0.17.0.tgz",
-      "integrity": "sha512-KsWejBPCHokYCNDQUzGu6R3E3XDYH/YpewgQwrVBXgpl1iR0RdW1NEGNdjlbuapwVnZXVgA5eiDTfNaQCawSdg==",
+      "integrity": "sha512-gMv66eY/Hj64heM55XrfDH3LUCWI51mtkBVUPVl9VkpvLgAYhdVe9nRuzu6p+idmCLSQVq7xiPxQcD4aXCgW5A==",
       "dev": true,
       "dependencies": {
         "@antfu/install-pkg": "^0.1.1",
         "@antfu/utils": "^0.7.6",
-        "@iconify/utils": "^2.1.11",
+        "@iconify/utils": "^2.1.9",
         "debug": "^4.3.4",
         "kolorist": "^1.8.0",
-        "local-pkg": "^0.5.0",
+        "local-pkg": "^0.4.3",
-        "unplugin": "^1.5.0"
+        "unplugin": "^1.4.0"
       },
       "peerDependencies": {
         "@svgr/core": ">=7.0.0",
@@ -1758,19 +1758,6 @@
         }
       }
     },
-    "node_modules/unplugin-icons/node_modules/local-pkg": {
-      "version": "0.5.0",
-      "resolved": "https://registry.npmmirror.com/local-pkg/-/local-pkg-0.5.0.tgz",
-      "integrity": "sha512-ok6z3qlYyCDS4ZEU27HaU6x/xZa9Whf8jD4ptH5UZTQYZVYeb9bnZ3ojVhiJNLiXK1Hfc0GNbLXcmZ5plLDDBg==",
-      "dev": true,
-      "dependencies": {
-        "mlly": "^1.4.2",
-        "pkg-types": "^1.0.3"
-      },
-      "engines": {
-        "node": ">=14"
-      }
-    },
     "node_modules/unplugin-vue-components": {
       "version": "0.25.2",
       "resolved": "https://registry.npmmirror.com/unplugin-vue-components/-/unplugin-vue-components-0.25.2.tgz",
@@ -1818,9 +1805,9 @@
       }
     },
     "node_modules/vite": {
-      "version": "4.5.0",
+      "version": "4.4.11",
-      "resolved": "https://registry.npmmirror.com/vite/-/vite-4.5.0.tgz",
+      "resolved": "https://registry.npmmirror.com/vite/-/vite-4.4.11.tgz",
-      "integrity": "sha512-ulr8rNLA6rkyFAlVWw2q5YJ91v098AFQ2R0PRFwPzREXOUJQPtFUG0t+/ZikhaOCDqFoDhN6/v8Sq0o4araFAw==",
+      "integrity": "sha512-ksNZJlkcU9b0lBwAGZGGaZHCMqHsc8OpgtoYhsQ4/I2v5cnpmmmqe5pM4nv/4Hn6G/2GhTdj0DhZh2e+Er1q5A==",
       "dev": true,
       "dependencies": {
         "esbuild": "^0.18.10",
@@ -1882,23 +1869,15 @@
       }
     },
     "node_modules/vue": {
-      "version": "3.3.6",
+      "version": "3.3.4",
-      "resolved": "https://registry.npmmirror.com/vue/-/vue-3.3.6.tgz",
+      "resolved": "https://registry.npmmirror.com/vue/-/vue-3.3.4.tgz",
-      "integrity": "sha512-jJIDETeWJnoY+gfn4ZtMPMS5KtbP4ax+CT4dcQFhTnWEk8xMupFyQ0JxL28nvT/M4+p4a0ptxaV2WY0LiIxvRg==",
+      "integrity": "sha512-VTyEYn3yvIeY1Py0WaYGZsXnz3y5UnGi62GjVEqvEGPl6nxbOrCXbVOTQWBEJUqAyTUk2uJ5JLVnYJ6ZzGbrSw==",
       "dependencies": {
-        "@vue/compiler-dom": "3.3.6",
+        "@vue/compiler-dom": "3.3.4",
-        "@vue/compiler-sfc": "3.3.6",
+        "@vue/compiler-sfc": "3.3.4",
-        "@vue/runtime-dom": "3.3.6",
+        "@vue/runtime-dom": "3.3.4",
-        "@vue/server-renderer": "3.3.6",
+        "@vue/server-renderer": "3.3.4",
-        "@vue/shared": "3.3.6"
+        "@vue/shared": "3.3.4"
-      },
-      "peerDependencies": {
-        "typescript": "*"
-      },
-      "peerDependenciesMeta": {
-        "typescript": {
-          "optional": true
-        }
       }
     },
     "node_modules/vue-i18n": {
@@ -1993,9 +1972,9 @@
       "dev": true
     },
     "@babel/parser": {
-      "version": "7.23.0",
+      "version": "7.22.16",
-      "resolved": "https://registry.npmmirror.com/@babel/parser/-/parser-7.23.0.tgz",
+      "resolved": "https://registry.npmmirror.com/@babel/parser/-/parser-7.22.16.tgz",
-      "integrity": "sha512-vvPKKdMemU85V9WE/l5wZEmImpCtLqbnTvqDS2U1fJ96KrxoW7KrXhNsNCblQlg8Ck4b85yxdTyelsMUgFUXiw=="
+      "integrity": "sha512-+gPfKv8UWeKKeJTUxe59+OobVcrYHETCsORl61EmSkmgymguYk/X5bp7GuUIXaFsc6y++v8ZxPsLSSuujqDphA=="
     },
     "@babel/runtime": {
       "version": "7.23.1",
@@ -2187,9 +2166,9 @@
       "dev": true
     },
     "@iconify/utils": {
-      "version": "2.1.11",
+      "version": "2.1.9",
-      "resolved": "https://registry.npmmirror.com/@iconify/utils/-/utils-2.1.11.tgz",
+      "resolved": "https://registry.npmmirror.com/@iconify/utils/-/utils-2.1.9.tgz",
-      "integrity": "sha512-M/w3PkN8zQYXi8N6qK/KhnYMfEbbb6Sk8RZVn8g+Pmmu5ybw177RpsaGwpziyHeUsu4etrexYSWq3rwnIqzYCg==",
+      "integrity": "sha512-mo+A4n3MwLlWlg1SoSO+Dt6pOPWKElk9sSJ6ZpuzbB9OcjxN8RUWxU3ulPwB1nglErWKRam2x4BAohbYF7FiFA==",
       "dev": true,
       "requires": {
         "@antfu/install-pkg": "^0.1.1",
@@ -2306,49 +2285,49 @@
       "requires": {}
     },
     "@vue/compiler-core": {
-      "version": "3.3.6",
+      "version": "3.3.4",
-      "resolved": "https://registry.npmmirror.com/@vue/compiler-core/-/compiler-core-3.3.6.tgz",
+      "resolved": "https://registry.npmmirror.com/@vue/compiler-core/-/compiler-core-3.3.4.tgz",
-      "integrity": "sha512-2JNjemwaNwf+MkkatATVZi7oAH1Hx0B04DdPH3ZoZ8vKC1xZVP7nl4HIsk8XYd3r+/52sqqoz9TWzYc3yE9dqA==",
+      "integrity": "sha512-cquyDNvZ6jTbf/+x+AgM2Arrp6G4Dzbb0R64jiG804HRMfRiFXWI6kqUVqZ6ZR0bQhIoQjB4+2bhNtVwndW15g==",
       "requires": {
-        "@babel/parser": "^7.23.0",
+        "@babel/parser": "^7.21.3",
-        "@vue/shared": "3.3.6",
+        "@vue/shared": "3.3.4",
         "estree-walker": "^2.0.2",
         "source-map-js": "^1.0.2"
       }
     },
     "@vue/compiler-dom": {
-      "version": "3.3.6",
+      "version": "3.3.4",
-      "resolved": "https://registry.npmmirror.com/@vue/compiler-dom/-/compiler-dom-3.3.6.tgz",
+      "resolved": "https://registry.npmmirror.com/@vue/compiler-dom/-/compiler-dom-3.3.4.tgz",
-      "integrity": "sha512-1MxXcJYMHiTPexjLAJUkNs/Tw2eDf2tY3a0rL+LfuWyiKN2s6jvSwywH3PWD8bKICjfebX3GWx2Os8jkRDq3Ng==",
+      "integrity": "sha512-wyM+OjOVpuUukIq6p5+nwHYtj9cFroz9cwkfmP9O1nzH68BenTTv0u7/ndggT8cIQlnBeOo6sUT/gvHcIkLA5w==",
       "requires": {
-        "@vue/compiler-core": "3.3.6",
+        "@vue/compiler-core": "3.3.4",
-        "@vue/shared": "3.3.6"
+        "@vue/shared": "3.3.4"
       }
     },
     "@vue/compiler-sfc": {
-      "version": "3.3.6",
+      "version": "3.3.4",
-      "resolved": "https://registry.npmmirror.com/@vue/compiler-sfc/-/compiler-sfc-3.3.6.tgz",
+      "resolved": "https://registry.npmmirror.com/@vue/compiler-sfc/-/compiler-sfc-3.3.4.tgz",
-      "integrity": "sha512-/Kms6du2h1VrXFreuZmlvQej8B1zenBqIohP0690IUBkJjsFvJxY0crcvVRJ0UhMgSR9dewB+khdR1DfbpArJA==",
+      "integrity": "sha512-6y/d8uw+5TkCuzBkgLS0v3lSM3hJDntFEiUORM11pQ/hKvkhSKZrXW6i69UyXlJQisJxuUEJKAWEqWbWsLeNKQ==",
       "requires": {
-        "@babel/parser": "^7.23.0",
+        "@babel/parser": "^7.20.15",
-        "@vue/compiler-core": "3.3.6",
+        "@vue/compiler-core": "3.3.4",
-        "@vue/compiler-dom": "3.3.6",
+        "@vue/compiler-dom": "3.3.4",
-        "@vue/compiler-ssr": "3.3.6",
+        "@vue/compiler-ssr": "3.3.4",
-        "@vue/reactivity-transform": "3.3.6",
+        "@vue/reactivity-transform": "3.3.4",
-        "@vue/shared": "3.3.6",
+        "@vue/shared": "3.3.4",
         "estree-walker": "^2.0.2",
-        "magic-string": "^0.30.5",
+        "magic-string": "^0.30.0",
-        "postcss": "^8.4.31",
+        "postcss": "^8.1.10",
         "source-map-js": "^1.0.2"
       }
     },
     "@vue/compiler-ssr": {
-      "version": "3.3.6",
+      "version": "3.3.4",
-      "resolved": "https://registry.npmmirror.com/@vue/compiler-ssr/-/compiler-ssr-3.3.6.tgz",
+      "resolved": "https://registry.npmmirror.com/@vue/compiler-ssr/-/compiler-ssr-3.3.4.tgz",
-      "integrity": "sha512-QTIHAfDCHhjXlYGkUg5KH7YwYtdUM1vcFl/FxFDlD6d0nXAmnjizka3HITp8DGudzHndv2PjKVS44vqqy0vP4w==",
+      "integrity": "sha512-m0v6oKpup2nMSehwA6Uuu+j+wEwcy7QmwMkVNVfrV9P2qE5KshC6RwOCq8fjGS/Eak/uNb8AaWekfiXxbBB6gQ==",
       "requires": {
-        "@vue/compiler-dom": "3.3.6",
+        "@vue/compiler-dom": "3.3.4",
-        "@vue/shared": "3.3.6"
+        "@vue/shared": "3.3.4"
       }
     },
     "@vue/devtools-api": {
@@ -2357,42 +2336,42 @@
       "integrity": "sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q=="
     },
     "@vue/reactivity": {
-      "version": "3.3.6",
+      "version": "3.3.4",
-      "resolved": "https://registry.npmmirror.com/@vue/reactivity/-/reactivity-3.3.6.tgz",
+      "resolved": "https://registry.npmmirror.com/@vue/reactivity/-/reactivity-3.3.4.tgz",
-      "integrity": "sha512-gtChAumfQz5lSy5jZXfyXbKrIYPf9XEOrIr6rxwVyeWVjFhJwmwPLtV6Yis+M9onzX++I5AVE9j+iPH60U+B8Q==",
+      "integrity": "sha512-kLTDLwd0B1jG08NBF3R5rqULtv/f8x3rOFByTDz4J53ttIQEDmALqKqXY0J+XQeN0aV2FBxY8nJDf88yvOPAqQ==",
       "requires": {
-        "@vue/shared": "3.3.6"
+        "@vue/shared": "3.3.4"
       }
     },
     "@vue/reactivity-transform": {
-      "version": "3.3.6",
+      "version": "3.3.4",
-      "resolved": "https://registry.npmmirror.com/@vue/reactivity-transform/-/reactivity-transform-3.3.6.tgz",
+      "resolved": "https://registry.npmmirror.com/@vue/reactivity-transform/-/reactivity-transform-3.3.4.tgz",
-      "integrity": "sha512-RlJl4dHfeO7EuzU1iJOsrlqWyJfHTkJbvYz/IOJWqu8dlCNWtxWX377WI0VsbAgBizjwD+3ZjdnvSyyFW1YVng==",
+      "integrity": "sha512-MXgwjako4nu5WFLAjpBnCj/ieqcjE2aJBINUNQzkZQfzIZA4xn+0fV1tIYBJvvva3N3OvKGofRLvQIwEQPpaXw==",
       "requires": {
-        "@babel/parser": "^7.23.0",
+        "@babel/parser": "^7.20.15",
-        "@vue/compiler-core": "3.3.6",
+        "@vue/compiler-core": "3.3.4",
-        "@vue/shared": "3.3.6",
+        "@vue/shared": "3.3.4",
         "estree-walker": "^2.0.2",
-        "magic-string": "^0.30.5"
+        "magic-string": "^0.30.0"
       }
     },
     "@vue/runtime-core": {
-      "version": "3.3.6",
+      "version": "3.3.4",
-      "resolved": "https://registry.npmmirror.com/@vue/runtime-core/-/runtime-core-3.3.6.tgz",
+      "resolved": "https://registry.npmmirror.com/@vue/runtime-core/-/runtime-core-3.3.4.tgz",
-      "integrity": "sha512-qp7HTP1iw1UW2ZGJ8L3zpqlngrBKvLsDAcq5lA6JvEXHmpoEmjKju7ahM9W2p/h51h0OT5F2fGlP/gMhHOmbUA==",
+      "integrity": "sha512-R+bqxMN6pWO7zGI4OMlmvePOdP2c93GsHFM/siJI7O2nxFRzj55pLwkpCedEY+bTMgp5miZ8CxfIZo3S+gFqvA==",
       "requires": {
-        "@vue/reactivity": "3.3.6",
+        "@vue/reactivity": "3.3.4",
-        "@vue/shared": "3.3.6"
+        "@vue/shared": "3.3.4"
       }
     },
     "@vue/runtime-dom": {
-      "version": "3.3.6",
+      "version": "3.3.4",
-      "resolved": "https://registry.npmmirror.com/@vue/runtime-dom/-/runtime-dom-3.3.6.tgz",
+      "resolved": "https://registry.npmmirror.com/@vue/runtime-dom/-/runtime-dom-3.3.4.tgz",
-      "integrity": "sha512-AoX3Cp8NqMXjLbIG9YR6n/pPLWE9TiDdk6wTJHFnl2GpHzDFH1HLBC9wlqqQ7RlnvN3bVLpzPGAAH00SAtOxHg==",
+      "integrity": "sha512-Aj5bTJ3u5sFsUckRghsNjVTtxZQ1OyMWCr5dZRAPijF/0Vy4xEoRCwLyHXcj4D0UFbJ4lbx3gPTgg06K/GnPnQ==",
       "requires": {
-        "@vue/runtime-core": "3.3.6",
+        "@vue/runtime-core": "3.3.4",
-        "@vue/shared": "3.3.6",
+        "@vue/shared": "3.3.4",
-        "csstype": "^3.1.2"
+        "csstype": "^3.1.1"
       },
       "dependencies": {
         "csstype": {
@@ -2403,18 +2382,18 @@
       }
     },
     "@vue/server-renderer": {
-      "version": "3.3.6",
+      "version": "3.3.4",
-      "resolved": "https://registry.npmmirror.com/@vue/server-renderer/-/server-renderer-3.3.6.tgz",
+      "resolved": "https://registry.npmmirror.com/@vue/server-renderer/-/server-renderer-3.3.4.tgz",
-      "integrity": "sha512-kgLoN43W4ERdZ6dpyy+gnk2ZHtcOaIr5Uc/WUP5DRwutgvluzu2pudsZGoD2b7AEJHByUVMa9k6Sho5lLRCykw==",
+      "integrity": "sha512-Q6jDDzR23ViIb67v+vM1Dqntu+HUexQcsWKhhQa4ARVzxOY2HbC7QRW/ggkDBd5BU+uM1sV6XOAP0b216o34JQ==",
       "requires": {
-        "@vue/compiler-ssr": "3.3.6",
+        "@vue/compiler-ssr": "3.3.4",
-        "@vue/shared": "3.3.6"
+        "@vue/shared": "3.3.4"
       }
     },
     "@vue/shared": {
-      "version": "3.3.6",
+      "version": "3.3.4",
-      "resolved": "https://registry.npmmirror.com/@vue/shared/-/shared-3.3.6.tgz",
+      "resolved": "https://registry.npmmirror.com/@vue/shared/-/shared-3.3.4.tgz",
-      "integrity": "sha512-Xno5pEqg8SVhomD0kTSmfh30ZEmV/+jZtyh39q6QflrjdJCXah5lrnOLi9KB6a5k5aAHXMXjoMnxlzUkCNfWLQ=="
+      "integrity": "sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ=="
     },
     "acorn": {
       "version": "8.10.0",
@@ -2778,9 +2757,9 @@
       "dev": true
     },
     "magic-string": {
-      "version": "0.30.5",
+      "version": "0.30.3",
-      "resolved": "https://registry.npmmirror.com/magic-string/-/magic-string-0.30.5.tgz",
+      "resolved": "https://registry.npmmirror.com/magic-string/-/magic-string-0.30.3.tgz",
-      "integrity": "sha512-7xlpfBaQaP/T6Vh8MO/EqXSW5En6INHEvEXQiuff7Gku0PWjU3uf6w/j9o7O+SpB5fOAkrI5HeoNgwjEO0pFsA==",
+      "integrity": "sha512-B7xGbll2fG/VjP+SWg4sX3JynwIU0mjoTc6MPpKNuIvftk6u6vqhDnk1R80b8C2GBR6ywqy+1DcKBrevBg+bmw==",
       "requires": {
         "@jridgewell/sourcemap-codec": "^1.4.15"
       }
@@ -2975,9 +2954,9 @@
       }
     },
     "postcss": {
-      "version": "8.4.31",
+      "version": "8.4.29",
-      "resolved": "https://registry.npmmirror.com/postcss/-/postcss-8.4.31.tgz",
+      "resolved": "https://registry.npmmirror.com/postcss/-/postcss-8.4.29.tgz",
-      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
+      "integrity": "sha512-cbI+jaqIeu/VGqXEarWkRCCffhjgXc0qjBtXpqJhTBohMUjUQnbBr0xqX3vEKudc4iviTewcJo5ajcec5+wdJw==",
       "requires": {
         "nanoid": "^3.3.6",
         "picocolors": "^1.0.0",
@@ -3046,9 +3025,9 @@
       }
     },
     "sass": {
-      "version": "1.69.4",
+      "version": "1.69.3",
-      "resolved": "https://registry.npmmirror.com/sass/-/sass-1.69.4.tgz",
+      "resolved": "https://registry.npmmirror.com/sass/-/sass-1.69.3.tgz",
-      "integrity": "sha512-+qEreVhqAy8o++aQfCJwp0sklr2xyEzkm9Pp/Igu9wNPoe7EZEQ8X/MBvvXggI2ql607cxKg/RKOwDj6pp2XDA==",
+      "integrity": "sha512-X99+a2iGdXkdWn1akFPs0ZmelUzyAQfvqYc2P/MPTrJRuIRoTffGzT9W9nFqG00S+c8hXzVmgxhUuHFdrwxkhQ==",
       "requires": {
         "chokidar": ">=3.0.0 <4.0.0",
         "immutable": "^4.0.0",
@@ -3154,12 +3133,12 @@
       }
     },
     "unplugin": {
-      "version": "1.5.0",
+      "version": "1.4.0",
-      "resolved": "https://registry.npmmirror.com/unplugin/-/unplugin-1.5.0.tgz",
+      "resolved": "https://registry.npmmirror.com/unplugin/-/unplugin-1.4.0.tgz",
-      "integrity": "sha512-9ZdRwbh/4gcm1JTOkp9lAkIDrtOyOxgHmY7cjuwI8L/2RTikMcVG25GsZwNAgRuap3iDw2jeq7eoqtAsz5rW3A==",
+      "integrity": "sha512-5x4eIEL6WgbzqGtF9UV8VEC/ehKptPXDS6L2b0mv4FRMkJxRtjaJfOWDd6a8+kYbqsjklix7yWP0N3SUepjXcg==",
       "dev": true,
       "requires": {
-        "acorn": "^8.10.0",
+        "acorn": "^8.9.0",
         "chokidar": "^3.5.3",
         "webpack-sources": "^3.2.3",
         "webpack-virtual-modules": "^0.5.0"
@@ -3182,30 +3161,18 @@
       }
     },
     "unplugin-icons": {
-      "version": "0.17.1",
+      "version": "0.17.0",
-      "resolved": "https://registry.npmmirror.com/unplugin-icons/-/unplugin-icons-0.17.1.tgz",
+      "resolved": "https://registry.npmmirror.com/unplugin-icons/-/unplugin-icons-0.17.0.tgz",
-      "integrity": "sha512-KsWejBPCHokYCNDQUzGu6R3E3XDYH/YpewgQwrVBXgpl1iR0RdW1NEGNdjlbuapwVnZXVgA5eiDTfNaQCawSdg==",
+      "integrity": "sha512-gMv66eY/Hj64heM55XrfDH3LUCWI51mtkBVUPVl9VkpvLgAYhdVe9nRuzu6p+idmCLSQVq7xiPxQcD4aXCgW5A==",
       "dev": true,
       "requires": {
         "@antfu/install-pkg": "^0.1.1",
         "@antfu/utils": "^0.7.6",
-        "@iconify/utils": "^2.1.11",
+        "@iconify/utils": "^2.1.9",
         "debug": "^4.3.4",
         "kolorist": "^1.8.0",
-        "local-pkg": "^0.5.0",
+        "local-pkg": "^0.4.3",
-        "unplugin": "^1.5.0"
+        "unplugin": "^1.4.0"
-      },
-      "dependencies": {
-        "local-pkg": {
-          "version": "0.5.0",
-          "resolved": "https://registry.npmmirror.com/local-pkg/-/local-pkg-0.5.0.tgz",
-          "integrity": "sha512-ok6z3qlYyCDS4ZEU27HaU6x/xZa9Whf8jD4ptH5UZTQYZVYeb9bnZ3ojVhiJNLiXK1Hfc0GNbLXcmZ5plLDDBg==",
-          "dev": true,
-          "requires": {
-            "mlly": "^1.4.2",
-            "pkg-types": "^1.0.3"
-          }
-        }
       }
     },
     "unplugin-vue-components": {
@@ -3236,9 +3203,9 @@
       }
     },
     "vite": {
-      "version": "4.5.0",
+      "version": "4.4.11",
-      "resolved": "https://registry.npmmirror.com/vite/-/vite-4.5.0.tgz",
+      "resolved": "https://registry.npmmirror.com/vite/-/vite-4.4.11.tgz",
-      "integrity": "sha512-ulr8rNLA6rkyFAlVWw2q5YJ91v098AFQ2R0PRFwPzREXOUJQPtFUG0t+/ZikhaOCDqFoDhN6/v8Sq0o4araFAw==",
+      "integrity": "sha512-ksNZJlkcU9b0lBwAGZGGaZHCMqHsc8OpgtoYhsQ4/I2v5cnpmmmqe5pM4nv/4Hn6G/2GhTdj0DhZh2e+Er1q5A==",
       "dev": true,
       "requires": {
         "esbuild": "^0.18.10",
@@ -3257,15 +3224,15 @@
       }
     },
     "vue": {
-      "version": "3.3.6",
+      "version": "3.3.4",
-      "resolved": "https://registry.npmmirror.com/vue/-/vue-3.3.6.tgz",
+      "resolved": "https://registry.npmmirror.com/vue/-/vue-3.3.4.tgz",
-      "integrity": "sha512-jJIDETeWJnoY+gfn4ZtMPMS5KtbP4ax+CT4dcQFhTnWEk8xMupFyQ0JxL28nvT/M4+p4a0ptxaV2WY0LiIxvRg==",
+      "integrity": "sha512-VTyEYn3yvIeY1Py0WaYGZsXnz3y5UnGi62GjVEqvEGPl6nxbOrCXbVOTQWBEJUqAyTUk2uJ5JLVnYJ6ZzGbrSw==",
       "requires": {
-        "@vue/compiler-dom": "3.3.6",
+        "@vue/compiler-dom": "3.3.4",
-        "@vue/compiler-sfc": "3.3.6",
+        "@vue/compiler-sfc": "3.3.4",
-        "@vue/runtime-dom": "3.3.6",
+        "@vue/runtime-dom": "3.3.4",
-        "@vue/server-renderer": "3.3.6",
+        "@vue/server-renderer": "3.3.4",
-        "@vue/shared": "3.3.6"
+        "@vue/shared": "3.3.4"
       }
     },
     "vue-i18n": {

frontend/package.json

@@ -13,8 +13,8 @@
     "highlight.js": "^11.9.0",
     "lodash": "^4.17.21",
     "pinia": "^2.1.7",
-    "sass": "^1.69.4",
+    "sass": "^1.69.3",
-    "vue": "^3.3.6",
+    "vue": "^3.3.4",
     "vue-i18n": "^9.5.0"
   },
   "devDependencies": {
@@ -22,8 +22,8 @@
     "naive-ui": "^2.35.0",
     "prettier": "^3.0.3",
     "unplugin-auto-import": "^0.16.6",
-    "unplugin-icons": "^0.17.1",
+    "unplugin-icons": "^0.17.0",
     "unplugin-vue-components": "^0.25.2",
-    "vite": "^4.5.0"
+    "vite": "^4.4.11"
   }
 }

frontend/package.json.md5

@@ -1 +1 @@
-bc30c6eabdfdaebcae482c47907c6546
+3b7cabd69c1c3dad11dea0682b3c6bef

frontend/src/AppContent.vue

@@ -128,21 +128,21 @@ onMounted(async () => {
     <!-- app content-->
     <n-spin
         :show="props.loading"
-        :style="{ backgroundColor: themeVars.bodyColor, borderRadius: `${borderRadius}px`, border }"
+        :theme-overrides="{ opacitySpinning: 0 }"
-        :theme-overrides="{ opacitySpinning: 0 }">
+        :style="{ backgroundColor: themeVars.bodyColor, borderRadius: `${borderRadius}px`, border }">
         <div
             id="app-content-wrapper"
+            class="flex-box-v"
             :style="{
                 backgroundColor: themeVars.bodyColor,
                 color: themeVars.textColorBase,
-            }"
+            }">
-            class="flex-box-v">
             <!-- title bar -->
             <div
                 id="app-toolbar"
-                :style="{ height: data.toolbarHeight + 'px' }"
                 class="flex-box-h"
                 style="--wails-draggable: drag"
+                :style="{ height: data.toolbarHeight + 'px' }"
                 @dblclick="WindowToggleMaximise">
                 <!-- title -->
                 <div
@@ -151,11 +151,11 @@ onMounted(async () => {
                         width: `${data.navMenuWidth + prefStore.behavior.asideWidth - 4}px`,
                         paddingLeft: `${logoPaddingLeft}px`,
                     }">
-                    <n-space :size="3" :wrap="false" :wrap-item="false" align="center">
+                    <n-space align="center" :wrap-item="false" :wrap="false" :size="3">
-                        <n-avatar :size="35" :src="iconUrl" color="#0000" style="min-width: 35px" />
+                        <n-avatar :src="iconUrl" color="#0000" :size="35" style="min-width: 35px" />
                         <div style="min-width: 68px; font-weight: 800">Tiny RDM</div>
                         <transition name="fade">
-                            <n-text v-if="tabStore.nav === 'browser'" class="ellipsis" strong style="font-size: 13px">
+                            <n-text v-if="tabStore.nav === 'browser'" strong class="ellipsis" style="font-size: 13px">
                                 - {{ get(tabStore.currentTab, 'name') }}
                             </n-text>
                         </transition>
@@ -178,8 +178,8 @@ onMounted(async () => {
                 <!-- simulate window control buttons -->
                 <toolbar-control-widget
                     v-if="!isMacOS()"
-                    :maximised="maximised"
                     :size="data.toolbarHeight"
+                    :maximised="maximised"
                     style="align-self: flex-start" />
             </div>
 
@@ -187,8 +187,8 @@ onMounted(async () => {
             <div
                 id="app-content"
                 :style="prefStore.generalFont"
-                class="flex-box-h flex-item-expand"
+                style="--wails-draggable: none"
-                style="--wails-draggable: none">
+                class="flex-box-h flex-item-expand">
                 <nav-menu v-model:value="tabStore.nav" :width="data.navMenuWidth" />
                 <!-- browser page -->
                 <div v-show="tabStore.nav === 'browser'" :class="{ dragging }" class="flex-box-h flex-item-expand">

frontend/src/components/common/FileOpenInput.vue

@@ -1,31 +0,0 @@
-<script setup>
-import { SelectFile } from 'wailsjs/go/services/systemService.js'
-import { get } from 'lodash'
-
-const props = defineProps({
-    value: String,
-    placeholder: String,
-    disabled: Boolean,
-})
-
-const emit = defineEmits(['update:value'])
-
-const handleSelectFile = async () => {
-    const { success, data } = await SelectFile()
-    if (success) {
-        const path = get(data, 'path', '')
-        emit('update:value', path)
-    } else {
-        emit('update:value', '')
-    }
-}
-</script>
-
-<template>
-    <n-input-group>
-        <n-input v-model:value="props.value" :disabled="props.disabled" :placeholder="placeholder" clearable />
-        <n-button :disabled="props.disabled" :focusable="false" @click="handleSelectFile">...</n-button>
-    </n-input-group>
-</template>
-
-<style scoped lang="scss"></style>

frontend/src/components/common/IconButton.vue

@@ -20,7 +20,6 @@ const props = defineProps({
         type: [Number, String],
         default: 3,
     },
-    loading: Boolean,
     border: Boolean,
     disabled: Boolean,
 })
@@ -31,35 +30,20 @@ const hasTooltip = computed(() => {
 </script>
 
 <template>
-    <n-tooltip v-if="hasTooltip" :show-arrow="false">
+    <n-tooltip v-if="hasTooltip">
         <template #trigger>
-            <n-button
+            <n-button :disabled="disabled" :text="!border" :focusable="false" @click.prevent="emit('click')">
-                :disabled="disabled"
+                <n-icon :color="props.color" :size="props.size">
-                :focusable="false"
+                    <component :is="props.icon" :stroke-width="props.strokeWidth" />
-                :loading="loading"
+                </n-icon>
-                :text="!border"
-                @click.prevent="emit('click')">
-                <template #icon>
-                    <n-icon :color="props.color" :size="props.size">
-                        <component :is="props.icon" :stroke-width="props.strokeWidth" />
-                    </n-icon>
-                </template>
             </n-button>
         </template>
         {{ props.tTooltip ? $t(props.tTooltip) : props.tooltip }}
     </n-tooltip>
-    <n-button
+    <n-button v-else :disabled="disabled" :text="!border" :focusable="false" @click.prevent="emit('click')">
-        v-else
+        <n-icon :color="props.color" :size="props.size">
-        :disabled="disabled"
+            <component :is="props.icon" :stroke-width="props.strokeWidth" />
-        :focusable="false"
+        </n-icon>
-        :loading="loading"
-        :text="!border"
-        @click.prevent="emit('click')">
-        <template #icon>
-            <n-icon :color="props.color" :size="props.size">
-                <component :is="props.icon" :stroke-width="props.strokeWidth" />
-            </n-icon>
-        </template>
     </n-button>
 </template>
 

frontend/src/components/common/SwitchButton.vue

@@ -1,59 +0,0 @@
-<script setup>
-import { NIcon } from 'naive-ui'
-
-const props = defineProps({
-    value: {
-        type: Number,
-        default: 0,
-    },
-    size: {
-        type: String,
-        default: 'small',
-    },
-    icons: Array,
-    tTooltips: Array,
-    iconSize: {
-        type: [Number, String],
-        default: 20,
-    },
-    color: {
-        type: String,
-        default: 'currentColor',
-    },
-    strokeWidth: {
-        type: [Number, String],
-        default: 3,
-    },
-})
-
-const emit = defineEmits(['update:value'])
-
-const handleSwitch = (idx) => {
-    if (idx !== props.value) {
-        emit('update:value', idx)
-    }
-}
-</script>
-
-<template>
-        <n-button-group>
-            <n-tooltip
-                :show-arrow="false"
-                v-for="(icon, i) in props.icons"
-                :key="i"
-                :disabled="!(props.tTooltips && props.tTooltips[i])">
-                <template #trigger>
-                    <n-button :tertiary="i !== props.value" :focusable="false" :size="props.size" @click="handleSwitch(i)">
-                        <template #icon>
-                            <n-icon :size="props.iconSize">
-                                <component :is="icon" :stroke-width="props.strokeWidth" />
-                            </n-icon>
-                        </template>
-                    </n-button>
-                </template>
-                {{ props.tTooltips ? $t(props.tTooltips[i]) : '' }}
-            </n-tooltip>
-        </n-button-group>
-</template>
-
-<style scoped lang="scss"></style>

frontend/src/components/common/ToolbarControlWidget.vue

@@ -36,8 +36,8 @@ const handleClose = () => {
 </script>
 
 <template>
-    <n-space :size="0" :wrap-item="false" align="center" justify="center">
+    <n-space :wrap-item="false" align="center" justify="center" :size="0">
-        <n-tooltip :delay="1000" :show-arrow="false">
+        <n-tooltip :show-arrow="false" :delay="1000">
             {{ $t('menu.minimise') }}
             <template #trigger>
                 <div class="btn-wrapper" @click="handleMinimise">
@@ -45,7 +45,7 @@ const handleClose = () => {
                 </div>
             </template>
         </n-tooltip>
-        <n-tooltip v-if="maximised" :delay="1000" :show-arrow="false">
+        <n-tooltip :show-arrow="false" :delay="1000" v-if="maximised">
             {{ $t('menu.restore') }}
             <template #trigger>
                 <div class="btn-wrapper" @click="handleMaximise">
@@ -53,7 +53,7 @@ const handleClose = () => {
                 </div>
             </template>
         </n-tooltip>
-        <n-tooltip v-else :delay="1000" :show-arrow="false">
+        <n-tooltip :show-arrow="false" :delay="1000" v-else>
             {{ $t('menu.maximise') }}
             <template #trigger>
                 <div class="btn-wrapper" @click="handleMaximise">
@@ -61,7 +61,7 @@ const handleClose = () => {
                 </div>
             </template>
         </n-tooltip>
-        <n-tooltip :delay="1000" :show-arrow="false">
+        <n-tooltip :show-arrow="false" :delay="1000">
             {{ $t('menu.close') }}
             <template #trigger>
                 <div class="btn-wrapper" @click="handleClose">
@@ -72,7 +72,7 @@ const handleClose = () => {
     </n-space>
 </template>
 
-<style lang="scss" scoped>
+<style scoped lang="scss">
 .btn-wrapper {
     width: v-bind('buttonSize');
     height: v-bind('buttonSize');

frontend/src/components/content/ContentLogPane.vue

@@ -69,8 +69,8 @@ defineExpose({
 
 <template>
     <n-card
-        :bordered="false"
         :title="$t('log.launch_log')"
+        :bordered="false"
         class="content-container flex-box-v"
         content-style="display: flex;flex-direction: column; overflow: hidden;">
         <n-form :disabled="data.loading" class="flex-item" inline>

frontend/src/components/content/ContentPane.vue

@@ -200,9 +200,9 @@ const onReloadKey = async () => {
             <!-- select nothing or select server node, display server status -->
             <content-server-status
                 v-model:auto-refresh="currentServer.autoRefresh"
-                :auto-loading="currentServer.autoLoading"
                 :info="currentServer.info"
                 :loading="currentServer.loading"
+                :auto-loading="currentServer.autoLoading"
                 :server="currentServer.name"
                 @refresh="refreshInfo(currentServer.name, true)" />
         </div>
@@ -217,12 +217,12 @@ const onReloadKey = async () => {
             :is="valueComponents[tabContent.type]"
             v-else
             :db="tabContent.db"
-            :key-code="tabContent.keyCode"
             :key-path="tabContent.keyPath"
+            :key-code="tabContent.keyCode"
             :name="tabContent.name"
-            :size="tabContent.size"
             :ttl="tabContent.ttl"
             :value="tabContent.value"
+            :size="tabContent.size"
             :view-as="tabContent.viewAs" />
     </div>
 </template>

frontend/src/components/content/ContentValueTab.vue

@@ -58,6 +58,10 @@ const tab = computed(() =>
             borderLeftColor: themeVars.borderColor,
             borderRightColor: themeVars.borderColor,
         }"
+        size="small"
+        type="card"
+        @close="onCloseTab"
+        @update:value="(tabIndex) => tabStore.switchTab(tabIndex)"
         :theme-overrides="{
             tabFontWeightActive: 800,
             tabBorderRadius: 0,
@@ -68,20 +72,16 @@ const tab = computed(() =>
             // tabBorderColor: themeVars.borderColor,
             tabBorderColor: '#0000',
             tabTextColorCard: themeVars.closeIconColor,
-        }"
+        }">
-        size="small"
-        type="card"
-        @close="onCloseTab"
-        @update:value="(tabIndex) => tabStore.switchTab(tabIndex)">
         <n-tab
             v-for="(t, i) in tab"
             :key="i"
-            :closable="tabStore.activatedIndex === i"
             :name="i"
+            :closable="tabStore.activatedIndex === i"
             :style="tabStore.activatedIndex === i ? activeTabStyle : inactiveTabStyle"
             style="--wails-draggable: none"
             @dblclick.stop="() => {}">
-            <n-space :size="5" :wrap-item="false" align="center" inline justify="center">
+            <n-space align="center" justify="center" :wrap-item="false" :size="5" inline>
                 <n-icon :component="ToggleServer" size="18" />
                 <n-ellipsis style="max-width: 150px">{{ t.label }}</n-ellipsis>
             </n-space>
@@ -89,4 +89,4 @@ const tab = computed(() =>
     </n-tabs>
 </template>
 
-<style lang="scss" scoped></style>
+<style scoped lang="scss"></style>

frontend/src/components/content_value/ContentServerStatus.vue

@@ -104,18 +104,18 @@ const infoFilter = ref('')
                     <n-space align="center" inline>
                         {{ $t('status.auto_refresh') }}
                         <n-switch
-                            :loading="props.autoLoading"
                             :value="props.autoRefresh"
+                            :loading="props.autoLoading"
                             @update:value="(v) => emit('update:autoRefresh', v)" />
                         <n-tooltip>
                             {{ $t('status.refresh') }}
                             <template #trigger>
                                 <n-button
-                                    :loading="props.autoLoading"
                                     circle
                                     size="small"
                                     tertiary
-                                    @click="emit('refresh')">
+                                    @click="emit('refresh')"
+                                    :loading="props.autoLoading">
                                     <template #icon>
                                         <n-icon :component="Refresh" />
                                     </template>

frontend/src/components/content_value/ContentToolbar.vue

@@ -106,7 +106,7 @@ const onDeleteKey = () => {
 <template>
     <div class="content-toolbar flex-box-h">
         <n-input-group>
-            <redis-type-tag :binary-key="binaryKey" :type="props.keyType" size="large" />
+            <redis-type-tag :type="props.keyType" :binary-key="binaryKey" size="large" />
             <n-input v-model:value="props.keyPath">
                 <template #suffix>
                     <icon-button :icon="Refresh" size="18" t-tooltip="interface.reload" @click="onReloadKey" />

frontend/src/components/content_value/ContentValueHash.vue

@@ -255,8 +255,8 @@ const onUpdateFilter = (filters, sourceColumn) => {
     <div class="content-wrapper flex-box-v">
         <content-toolbar
             :db="props.db"
-            :key-code="props.keyCode"
             :key-path="props.keyPath"
+            :key-code="props.keyCode"
             :key-type="keyType"
             :server="props.name"
             :ttl="ttl" />
@@ -280,7 +280,7 @@ const onUpdateFilter = (filters, sourceColumn) => {
             <div class="tb2-extra-info flex-item-expand">
                 <n-tag size="large">{{ $t('interface.total', { size: props.size }) }}</n-tag>
             </div>
-            <n-button :focusable="false" plain @click="onAddRow">
+            <n-button plain :focusable="false" @click="onAddRow">
                 <template #icon>
                     <n-icon :component="AddLink" size="18" />
                 </template>
@@ -290,12 +290,12 @@ const onUpdateFilter = (filters, sourceColumn) => {
         <div class="value-wrapper fill-height flex-box-h">
             <n-data-table
                 :key="(row) => row.no"
-                :bordered="false"
-                :bottom-bordered="false"
                 :columns="columns"
                 :data="tableData"
                 :single-column="true"
                 :single-line="false"
+                :bordered="false"
+                :bottom-bordered="false"
                 flex-height
                 max-height="100%"
                 size="small"

frontend/src/components/content_value/ContentValueList.vue

@@ -187,8 +187,8 @@ const onUpdateFilter = (filters, sourceColumn) => {
     <div class="content-wrapper flex-box-v">
         <content-toolbar
             :db="props.db"
-            :key-code="props.keyCode"
             :key-path="props.keyPath"
+            :key-code="props.keyCode"
             :key-type="keyType"
             :server="props.name"
             :ttl="ttl" />
@@ -204,7 +204,7 @@ const onUpdateFilter = (filters, sourceColumn) => {
             <div class="tb2-extra-info flex-item-expand">
                 <n-tag size="large">{{ $t('interface.total', { size: props.size }) }}</n-tag>
             </div>
-            <n-button :focusable="false" plain @click="onAddValue">
+            <n-button plain :focusable="false" @click="onAddValue">
                 <template #icon>
                     <n-icon :component="AddLink" size="18" />
                 </template>
@@ -214,12 +214,12 @@ const onUpdateFilter = (filters, sourceColumn) => {
         <div class="value-wrapper fill-height flex-box-h">
             <n-data-table
                 :key="(row) => row.no"
-                :bordered="false"
-                :bottom-bordered="false"
                 :columns="columns"
                 :data="tableData"
                 :single-column="true"
                 :single-line="false"
+                :bordered="false"
+                :bottom-bordered="false"
                 flex-height
                 max-height="100%"
                 size="small"

frontend/src/components/content_value/ContentValueSet.vue

@@ -182,8 +182,8 @@ const onUpdateFilter = (filters, sourceColumn) => {
     <div class="content-wrapper flex-box-v">
         <content-toolbar
             :db="props.db"
-            :key-code="props.keyCode"
             :key-path="props.keyPath"
+            :key-code="props.keyCode"
             :key-type="keyType"
             :server="props.name"
             :ttl="ttl" />
@@ -199,7 +199,7 @@ const onUpdateFilter = (filters, sourceColumn) => {
             <div class="tb2-extra-info flex-item-expand">
                 <n-tag size="large">{{ $t('interface.total', { size: props.size }) }}</n-tag>
             </div>
-            <n-button :focusable="false" plain @click="onAddValue">
+            <n-button plain :focusable="false" @click="onAddValue">
                 <template #icon>
                     <n-icon :component="AddLink" size="18" />
                 </template>
@@ -209,12 +209,12 @@ const onUpdateFilter = (filters, sourceColumn) => {
         <div class="value-wrapper fill-height flex-box-h">
             <n-data-table
                 :key="(row) => row.no"
-                :bordered="false"
-                :bottom-bordered="false"
                 :columns="columns"
                 :data="tableData"
                 :single-column="true"
                 :single-line="false"
+                :bordered="false"
+                :bottom-bordered="false"
                 flex-height
                 max-height="100%"
                 size="small"

frontend/src/components/content_value/ContentValueStream.vue

@@ -167,8 +167,8 @@ const onUpdateFilter = (filters, sourceColumn) => {
     <div class="content-wrapper flex-box-v">
         <content-toolbar
             :db="props.db"
-            :key-code="props.keyCode"
             :key-path="props.keyPath"
+            :key-code="props.keyCode"
             :key-type="keyType"
             :server="props.name"
             :ttl="ttl" />
@@ -192,7 +192,7 @@ const onUpdateFilter = (filters, sourceColumn) => {
             <div class="tb2-extra-info flex-item-expand">
                 <n-tag size="large">{{ $t('interface.total', { size: props.size }) }}</n-tag>
             </div>
-            <n-button :focusable="false" plain @click="onAddRow">
+            <n-button plain :focusable="false" @click="onAddRow">
                 <template #icon>
                     <n-icon :component="AddLink" size="18" />
                 </template>
@@ -202,12 +202,12 @@ const onUpdateFilter = (filters, sourceColumn) => {
         <div class="value-wrapper fill-height flex-box-h">
             <n-data-table
                 :key="(row) => row.id"
-                :bordered="false"
-                :bottom-bordered="false"
                 :columns="columns"
                 :data="tableData"
                 :single-column="true"
                 :single-line="false"
+                :bordered="false"
+                :bottom-bordered="false"
                 flex-height
                 max-height="100%"
                 size="small"

frontend/src/components/content_value/ContentValueString.vue

@@ -153,18 +153,18 @@ const onSaveValue = async () => {
     <div class="content-wrapper flex-box-v">
         <content-toolbar
             :db="props.db"
-            :key-code="keyCode"
             :key-path="keyPath"
+            :key-code="keyCode"
             :key-type="keyType"
             :server="props.name"
             :ttl="ttl" />
         <div class="tb2 flex-box-h">
             <n-text>{{ $t('interface.view_as') }}</n-text>
             <n-select
-                :options="viewOption"
                 :value="props.viewAs"
-                filterable
+                :options="viewOption"
                 style="width: 160px"
+                filterable
                 @update:value="onViewTypeUpdate" />
             <div class="flex-item-expand"></div>
             <n-button-group v-if="!inEdit">
@@ -174,7 +174,7 @@ const onSaveValue = async () => {
                     </template>
                     {{ $t('interface.copy_value') }}
                 </n-button>
-                <n-button :focusable="false" plain @click="onEditValue">
+                <n-button plain :focusable="false" @click="onEditValue">
                     <template #icon>
                         <n-icon :component="Edit" size="18" />
                     </template>
@@ -182,13 +182,13 @@ const onSaveValue = async () => {
                 </n-button>
             </n-button-group>
             <n-button-group v-else>
-                <n-button :focusable="false" :loading="saving" plain @click="onSaveValue">
+                <n-button :loading="saving" :focusable="false" plain @click="onSaveValue">
                     <template #icon>
                         <n-icon :component="Save" size="18" />
                     </template>
                     {{ $t('interface.save_update') }}
                 </n-button>
-                <n-button :focusable="false" :loading="saving" plain @click="onCancelEdit">
+                <n-button :loading="saving" :focusable="false" plain @click="onCancelEdit">
                     <template #icon>
                         <n-icon :component="Close" size="18" />
                     </template>

frontend/src/components/content_value/ContentValueZSet.vue

@@ -280,8 +280,8 @@ const onUpdateFilter = (filters, sourceColumn) => {
     <div class="content-wrapper flex-box-v">
         <content-toolbar
             :db="props.db"
-            :key-code="props.keyCode"
             :key-path="props.keyPath"
+            :key-code="props.keyCode"
             :key-type="keyType"
             :server="props.name"
             :ttl="ttl" />
@@ -310,7 +310,7 @@ const onUpdateFilter = (filters, sourceColumn) => {
             <div class="tb2-extra-info flex-item-expand">
                 <n-tag size="large">{{ $t('interface.total', { size: props.size }) }}</n-tag>
             </div>
-            <n-button :focusable="false" plain @click="onAddRow">
+            <n-button plain :focusable="false" @click="onAddRow">
                 <template #icon>
                     <n-icon :component="AddLink" size="18" />
                 </template>
@@ -320,12 +320,12 @@ const onUpdateFilter = (filters, sourceColumn) => {
         <div class="value-wrapper fill-height flex-box-h">
             <n-data-table
                 :key="(row) => row.no"
-                :bordered="false"
-                :bottom-bordered="false"
                 :columns="columns"
                 :data="tableData"
                 :single-column="true"
                 :single-line="false"
+                :bordered="false"
+                :bottom-bordered="false"
                 flex-height
                 max-height="100%"
                 size="small"

frontend/src/components/dialogs/AboutDialog.vue

@@ -4,7 +4,7 @@ import useDialog from 'stores/dialog.js'
 import { useThemeVars } from 'naive-ui'
 import { BrowserOpenURL } from 'wailsjs/runtime/runtime.js'
 import { GetAppVersion } from 'wailsjs/go/services/preferencesService.js'
-import { onMounted, ref } from 'vue'
+import { ref, onMounted } from 'vue'
 
 const themeVars = useThemeVars()
 const dialogStore = useDialog()
@@ -27,23 +27,23 @@ const onOpenWebsite = () => {
 
 <template>
     <n-modal v-model:show="dialogStore.aboutDialogVisible" :show-icon="false" preset="dialog" transform-origin="center">
-        <n-space :size="10" :wrap="false" :wrap-item="false" align="center" vertical>
+        <n-space vertical align="center" :wrap-item="false" :wrap="false" :size="10">
-            <n-avatar :size="120" :src="iconUrl" color="#0000"></n-avatar>
+            <n-avatar :size="120" color="#0000" :src="iconUrl"></n-avatar>
             <div class="about-app-title">Tiny RDM</div>
             <n-text>{{ version }}</n-text>
-            <n-space :size="5" :wrap="false" :wrap-item="false" align="center">
+            <n-space align="center" :wrap-item="false" :wrap="false" :size="5">
                 <n-text class="about-link" @click="onOpenSource">{{ $t('dialogue.about.source') }}</n-text>
                 <n-divider vertical />
                 <n-text class="about-link" @click="onOpenWebsite">{{ $t('dialogue.about.website') }}</n-text>
             </n-space>
-            <div :style="{ color: themeVars.textColor3 }" class="about-copyright">
+            <div class="about-copyright" :style="{ color: themeVars.textColor3 }">
                 Copyright © 2023 Tinycraft.cc All rights reserved
             </div>
         </n-space>
     </n-modal>
 </template>
 
-<style lang="scss" scoped>
+<style scoped lang="scss">
 .about-app-title {
     font-weight: bold;
     font-size: 18px;

frontend/src/components/dialogs/ConnectionDialog.vue

@@ -6,7 +6,7 @@ import { ListSentinelMasters, TestConnection } from 'wailsjs/go/services/connect
 import useDialog, { ConnDialogType } from 'stores/dialog'
 import Close from '@/components/icons/Close.vue'
 import useConnectionStore from 'stores/connections.js'
-import FileOpenInput from '@/components/common/FileOpenInput.vue'
+import { SelectFile } from 'wailsjs/go/services/systemService.js'
 
 /**
  * Dialog for new or edit connection
@@ -83,6 +83,39 @@ const sshLoginType = computed(() => {
     return get(generalForm.value, 'ssh.loginType', 'pwd')
 })
 
+const onSSHChooseKey = async () => {
+    const { success, data } = await SelectFile()
+    const path = get(data, 'path', '')
+    if (!isEmpty(path)) {
+        generalForm.value.ssh.pkFile = path
+    }
+}
+
+const onSSLChooseCert = async () => {
+    const { success, data } = await SelectFile()
+    const path = get(data, 'path', '')
+    if (!isEmpty(path)) {
+        generalForm.value.ssl.certFile = path
+    }
+}
+
+const onSSLChooseKey = async () => {
+    const { success, data } = await SelectFile()
+    const path = get(data, 'path', '')
+    if (!isEmpty(path)) {
+        generalForm.value.ssl.keyFile = path
+    }
+}
+
+const onSSLChooseCA = async () => {
+    const { success, data } = await SelectFile()
+    if (!success) {
+        generalForm.value.ssl.caFile = ''
+    } else {
+        generalForm.value.ssl.caFile = get(data, 'path', '')
+    }
+}
+
 const loadingSentinelMaster = ref(false)
 const masterNameOptions = ref([])
 const onLoadSentinelMasters = async () => {
@@ -302,24 +335,24 @@ const onClose = () => {
                         label-placement="top">
                         <n-grid :x-gap="10">
                             <n-form-item-gi
-                                :label="$t('dialogue.connection.advn.filter')"
                                 :span="12"
+                                :label="$t('dialogue.connection.advn.filter')"
                                 path="defaultFilter">
                                 <n-input
                                     v-model:value="generalForm.defaultFilter"
                                     :placeholder="$t('dialogue.connection.advn.filter_tip')" />
                             </n-form-item-gi>
                             <n-form-item-gi
-                                :label="$t('dialogue.connection.advn.separator')"
                                 :span="12"
+                                :label="$t('dialogue.connection.advn.separator')"
                                 path="keySeparator">
                                 <n-input
                                     v-model:value="generalForm.keySeparator"
                                     :placeholder="$t('dialogue.connection.advn.separator_tip')" />
                             </n-form-item-gi>
                             <n-form-item-gi
-                                :label="$t('dialogue.connection.advn.conn_timeout')"
                                 :span="12"
+                                :label="$t('dialogue.connection.advn.conn_timeout')"
                                 path="connTimeout">
                                 <n-input-number v-model:value="generalForm.connTimeout" :max="999999" :min="1">
                                     <template #suffix>
@@ -328,8 +361,8 @@ const onClose = () => {
                                 </n-input-number>
                             </n-form-item-gi>
                             <n-form-item-gi
-                                :label="$t('dialogue.connection.advn.exec_timeout')"
                                 :span="12"
+                                :label="$t('dialogue.connection.advn.exec_timeout')"
                                 path="execTimeout">
                                 <n-input-number v-model:value="generalForm.execTimeout" :max="999999" :min="1">
                                     <template #suffix>
@@ -337,10 +370,7 @@ const onClose = () => {
                                     </template>
                                 </n-input-number>
                             </n-form-item-gi>
-                            <n-form-item-gi :label="$t('dialogue.connection.advn.load_size')" :span="12">
+                            <n-form-item-gi :span="24" :label="$t('dialogue.connection.advn.dbfilter_type')">
-                                <n-input-number v-model:value="generalForm.loadSize" :min="0" />
-                            </n-form-item-gi>
-                            <n-form-item-gi :label="$t('dialogue.connection.advn.dbfilter_type')" :span="24">
                                 <n-radio-group
                                     v-model:value="generalForm.dbFilterType"
                                     @update:value="onUpdateDBFilterType">
@@ -355,22 +385,22 @@ const onClose = () => {
                             </n-form-item-gi>
                             <n-form-item-gi
                                 v-show="generalForm.dbFilterType !== 'none'"
-                                :label="$t('dialogue.connection.advn.dbfilter_input')"
+                                :span="24"
-                                :span="24">
+                                :label="$t('dialogue.connection.advn.dbfilter_input')">
                                 <n-select
                                     v-model:value="dbFilterList"
-                                    :clearable="true"
                                     :disabled="generalForm.dbFilterType === 'none'"
-                                    :placeholder="$t('dialogue.connection.advn.dbfilter_input_tip')"
-                                    :show="false"
-                                    :show-arrow="false"
                                     filterable
                                     multiple
-                                    tag />
+                                    tag
+                                    :placeholder="$t('dialogue.connection.advn.dbfilter_input_tip')"
+                                    :show-arrow="false"
+                                    :show="false"
+                                    :clearable="true" />
                             </n-form-item-gi>
                             <n-form-item-gi
-                                :label="$t('dialogue.connection.advn.mark_color')"
                                 :span="24"
+                                :label="$t('dialogue.connection.advn.mark_color')"
                                 path="markColor">
                                 <div
                                     v-for="color in predefineColors"
@@ -396,27 +426,48 @@ const onClose = () => {
                         </n-checkbox>
                     </n-form-item>
                     <n-form
-                        :disabled="!generalForm.ssl.enable"
                         :model="generalForm.ssl"
                         :show-require-mark="false"
+                        :disabled="!generalForm.ssl.enable"
                         label-placement="top">
                         <n-form-item :label="$t('dialogue.connection.ssl.cert_file')">
-                            <file-open-input
+                            <n-input-group>
-                                v-model:value="generalForm.ssl.certFile"
+                                <n-input
-                                :placeholder="$t('dialogue.connection.ssl.cert_file_tip')"
+                                    v-model:value="generalForm.ssl.certFile"
-                                :disabled="!generalForm.ssl.enable" />
+                                    :placeholder="$t('dialogue.connection.ssl.cert_file_tip')"
+                                    clearable />
+                                <n-button
+                                    :focusable="false"
+                                    :disabled="!generalForm.ssl.enable"
+                                    @click="onSSLChooseCert">
+                                    ...
+                                </n-button>
+                            </n-input-group>
                         </n-form-item>
                         <n-form-item :label="$t('dialogue.connection.ssl.key_file')">
-                            <file-open-input
+                            <n-input-group>
-                                v-model:value="generalForm.ssl.keyFile"
+                                <n-input
-                                :placeholder="$t('dialogue.connection.ssl.key_file_tip')"
+                                    v-model:value="generalForm.ssl.keyFile"
-                                :disabled="!generalForm.ssl.enable" />
+                                    :placeholder="$t('dialogue.connection.ssl.key_file_tip')"
+                                    clearable />
+                                <n-button
+                                    :focusable="false"
+                                    :disabled="!generalForm.ssl.enable"
+                                    @click="onSSLChooseKey">
+                                    ...
+                                </n-button>
+                            </n-input-group>
                         </n-form-item>
                         <n-form-item :label="$t('dialogue.connection.ssl.ca_file')">
-                            <file-open-input
+                            <n-input-group>
-                                v-model:value="generalForm.ssl.caFile"
+                                <n-input
-                                :placeholder="$t('dialogue.connection.ssl.ca_file_tip')"
+                                    v-model:value="generalForm.ssl.caFile"
-                                :disabled="!generalForm.ssl.enable" />
+                                    :placeholder="$t('dialogue.connection.ssl.ca_file_tip')"
+                                    clearable />
+                                <n-button :focusable="false" :disabled="!generalForm.ssl.enable" @click="onSSLChooseCA">
+                                    ...
+                                </n-button>
+                            </n-input-group>
                         </n-form-item>
                     </n-form>
                 </n-tab-pane>
@@ -429,9 +480,9 @@ const onClose = () => {
                         </n-checkbox>
                     </n-form-item>
                     <n-form
-                        :disabled="!generalForm.ssh.enable"
                         :model="generalForm.ssh"
                         :show-require-mark="false"
+                        :disabled="!generalForm.ssh.enable"
                         label-placement="top">
                         <n-form-item :label="$t('dialogue.connection.addr')" required>
                             <n-input
@@ -465,10 +516,18 @@ const onClose = () => {
                                 type="password" />
                         </n-form-item>
                         <n-form-item v-if="sshLoginType === 'pkfile'" :label="$t('dialogue.connection.ssh.pkfile')">
-                            <file-open-input
+                            <n-input-group>
-                                v-model:value="generalForm.ssh.pkFile"
+                                <n-input
-                                :placeholder="$t('dialogue.connection.ssh.pkfile_tip')"
+                                    v-model:value="generalForm.ssh.pkFile"
-                                :disabled="!generalForm.ssh.enable" />
+                                    :placeholder="$t('dialogue.connection.ssh.pkfile_tip')" />
+                                <n-button
+                                    :focusable="false"
+                                    :disabled="!generalForm.ssh.enable"
+                                    @click="onSSHChooseKey"
+                                    clearable>
+                                    ...
+                                </n-button>
+                            </n-input-group>
                         </n-form-item>
                         <n-form-item v-if="sshLoginType === 'pkfile'" :label="$t('dialogue.connection.ssh.passphrase')">
                             <n-input
@@ -488,17 +547,17 @@ const onClose = () => {
                         </n-checkbox>
                     </n-form-item>
                     <n-form
-                        :disabled="!generalForm.sentinel.enable"
                         :model="generalForm.sentinel"
                         :show-require-mark="false"
+                        :disabled="!generalForm.sentinel.enable"
                         label-placement="top">
                         <n-form-item :label="$t('dialogue.connection.sentinel.master')">
                             <n-input-group>
                                 <n-select
                                     v-model:value="generalForm.sentinel.master"
-                                    :options="masterNameOptions"
                                     filterable
-                                    tag />
+                                    tag
+                                    :options="masterNameOptions" />
                                 <n-button :loading="loadingSentinelMaster" @click="onLoadSentinelMasters">
                                     {{ $t('dialogue.connection.sentinel.auto_discover') }}
                                 </n-button>
@@ -538,10 +597,10 @@ const onClose = () => {
             <!-- test result alert-->
             <n-alert
                 v-if="showTestResult"
-                :on-close="() => (showTestResult = false)"
                 :title="isEmpty(testResult) ? '' : $t('dialogue.connection.test_fail')"
                 :type="isEmpty(testResult) ? 'success' : 'error'"
-                closable>
+                closable
+                :on-close="() => (showTestResult = false)">
                 <template v-if="isEmpty(testResult)">{{ $t('dialogue.connection.test_succ') }}</template>
                 <template v-else>{{ testResult }}</template>
             </n-alert>
@@ -549,15 +608,15 @@ const onClose = () => {
 
         <template #action>
             <div class="flex-item-expand">
-                <n-button :disabled="closingConnection" :focusable="false" :loading="testing" @click="onTestConnection">
+                <n-button :focusable="false" :disabled="closingConnection" :loading="testing" @click="onTestConnection">
                     {{ $t('dialogue.connection.test') }}
                 </n-button>
             </div>
             <div class="flex-item n-dialog__action">
-                <n-button :disabled="closingConnection" :focusable="false" @click="onClose">
+                <n-button :focusable="false" :disabled="closingConnection" @click="onClose">
                     {{ $t('common.cancel') }}
                 </n-button>
-                <n-button :disabled="closingConnection" :focusable="false" type="primary" @click="onSaveConnection">
+                <n-button :focusable="false" :disabled="closingConnection" type="primary" @click="onSaveConnection">
                     {{ isEditMode ? $t('preferences.general.update') : $t('common.confirm') }}
                 </n-button>
             </div>

frontend/src/components/dialogs/DeleteKeyDialog.vue

@@ -105,13 +105,13 @@ const onClose = () => {
         <template #action>
             <div class="flex-item n-dialog__action">
                 <n-button :focusable="false" @click="onClose">{{ $t('common.cancel') }}</n-button>
-                <n-button v-if="!deleteForm.showAffected" :focusable="false" type="primary" @click="scanAffectedKey">
+                <n-button v-if="!deleteForm.showAffected" type="primary" :focusable="false" @click="scanAffectedKey">
                     {{ $t('dialogue.key.show_affected_key') }}
                 </n-button>
                 <n-button
                     v-else
-                    :disabled="isEmpty(deleteForm.affectedKeys)"
                     :focusable="false"
+                    :disabled="isEmpty(deleteForm.affectedKeys)"
                     type="error"
                     @click="onConfirmDelete">
                     {{ $t('dialogue.key.confirm_delete_key', { num: size(deleteForm.affectedKeys) }) }}

frontend/src/components/dialogs/KeyFilterDialog.vue

@@ -74,11 +74,11 @@ const onClose = () => {
             :show-require-mark="false"
             label-placement="top"
             style="padding-right: 15px">
-            <n-form-item :label="$t('dialogue.key.server')" path="key">
+            <n-form-item :label="$t('server')" path="key">
-                <n-input :value="filterForm.server" readonly></n-input>
+                <n-text>{{ filterForm.server }}</n-text>
             </n-form-item>
             <n-form-item :label="$t('dialogue.key.db_index')" path="db">
-                <n-input :value="filterForm.db + ''" readonly></n-input>
+                <n-text>{{ filterForm.db }}</n-text>
             </n-form-item>
             <n-form-item :label="$t('interface.type')" path="type" required>
                 <n-select v-model:value="filterForm.type" :options="typeOptions" />
@@ -87,14 +87,11 @@ const onClose = () => {
                 <n-input-group>
                     <n-tooltip trigger="focus">
                         <template #trigger>
-                            <n-input
+                            <n-input v-model:value="filterForm.pattern" clearable placeholder="Filter Pattern" />
-                                v-model:value="filterForm.pattern"
-                                :placeholder="$t('dialogue.filter.filter_pattern')"
-                                clearable />
                         </template>
                         <div class="text-block">{{ $t('dialogue.filter.filter_pattern_tip') }}</div>
                     </n-tooltip>
-                    <n-button :focusable="false" secondary type="primary" @click="filterForm.pattern = '*'">
+                    <n-button secondary type="primary" :focusable="false" @click="filterForm.pattern = '*'">
                         {{ $t('preferences.restore_defaults') }}
                     </n-button>
                 </n-input-group>

frontend/src/components/dialogs/NewKeyDialog.vue

@@ -187,7 +187,7 @@ const onClose = () => {
                                 {{ $t('common.second') }}
                             </template>
                         </n-input-number>
-                        <n-button :focusable="false" secondary type="primary" @click="() => (newForm.ttl = -1)">
+                        <n-button secondary type="primary" :focusable="false" @click="() => (newForm.ttl = -1)">
                             {{ $t('dialogue.key.persist_key') }}
                         </n-button>
                     </n-input-group>

frontend/src/components/dialogs/PreferencesDialog.vue

@@ -60,58 +60,46 @@ const onClose = () => {
         :show-icon="false"
         :title="$t('preferences.name')"
         preset="dialog"
-        style="width: 500px"
         transform-origin="center">
         <!-- FIXME: set loading will slow down appear animation of dialog in linux -->
         <!-- <n-spin :show="loading"> -->
         <n-tabs v-model:value="tab" animated type="line">
             <n-tab-pane :tab="$t('preferences.general.name')" display-directive="show" name="general">
                 <n-form :disabled="loading" :model="prefStore.general" :show-require-mark="false" label-placement="top">
-                    <n-grid :x-gap="10">
+                    <n-form-item :label="$t('preferences.general.theme')" required>
-                        <n-form-item-gi :label="$t('preferences.general.theme')" :span="24" required>
+                        <n-radio-group v-model:value="prefStore.general.theme" name="theme" size="medium">
-                            <n-radio-group v-model:value="prefStore.general.theme" name="theme" size="medium">
+                            <n-radio-button v-for="opt in prefStore.themeOption" :key="opt.value" :value="opt.value">
-                                <n-radio-button
+                                {{ opt.label }}
-                                    v-for="opt in prefStore.themeOption"
+                            </n-radio-button>
-                                    :key="opt.value"
+                        </n-radio-group>
-                                    :value="opt.value">
+                    </n-form-item>
-                                    {{ opt.label }}
+                    <n-form-item :label="$t('preferences.general.language')" required>
-                                </n-radio-button>
+                        <n-select
-                            </n-radio-group>
+                            v-model:value="prefStore.general.language"
-                        </n-form-item-gi>
+                            :options="prefStore.langOption"
-                        <n-form-item-gi :label="$t('preferences.general.language')" :span="24" required>
+                            filterable />
-                            <n-select
+                    </n-form-item>
-                                v-model:value="prefStore.general.language"
+                    <n-form-item :label="$t('preferences.general.font')" required>
-                                :options="prefStore.langOption"
+                        <n-select v-model:value="prefStore.general.font" :options="prefStore.fontOption" filterable />
-                                filterable />
+                    </n-form-item>
-                        </n-form-item-gi>
+                    <n-form-item :label="$t('preferences.general.font_size')">
-                        <n-form-item-gi :label="$t('preferences.general.font')" :span="12" required>
+                        <n-input-number v-model:value="prefStore.general.fontSize" :max="65535" :min="1" />
-                            <n-select
+                    </n-form-item>
-                                v-model:value="prefStore.general.font"
+                    <n-form-item :label="$t('preferences.general.proxy')">
-                                :options="prefStore.fontOption"
+                        <n-space>
-                                filterable />
+                            <n-checkbox v-model:checked="prefStore.general.useSysProxy">
-                        </n-form-item-gi>
+                                {{ $t('preferences.general.use_system_proxy') }}
-                        <n-form-item-gi :label="$t('preferences.general.font_size')" :span="12">
-                            <n-input-number v-model:value="prefStore.general.fontSize" :max="65535" :min="1" />
-                        </n-form-item-gi>
-                        <n-form-item-gi :label="$t('preferences.general.scan_size')" :span="12">
-                            <n-input-number v-model:value="prefStore.general.scanSize" :min="1" />
-                        </n-form-item-gi>
-                        <n-form-item-gi :label="$t('preferences.general.proxy')" :span="24">
-                            <n-space>
-                                <n-checkbox v-model:checked="prefStore.general.useSysProxy">
-                                    {{ $t('preferences.general.use_system_proxy') }}
-                                </n-checkbox>
-                                <n-checkbox v-model:checked="prefStore.general.useSysProxyHttp">
-                                    {{ $t('preferences.general.use_system_proxy_http') }}
-                                </n-checkbox>
-                            </n-space>
-                        </n-form-item-gi>
-                        <n-form-item-gi :label="$t('preferences.general.update')" :span="24">
-                            <n-checkbox v-model:checked="prefStore.general.checkUpdate">
-                                {{ $t('preferences.general.auto_check_update') }}
                             </n-checkbox>
-                        </n-form-item-gi>
+                            <n-checkbox v-model:checked="prefStore.general.useSysProxyHttp">
-                    </n-grid>
+                                {{ $t('preferences.general.use_system_proxy_http') }}
+                            </n-checkbox>
+                        </n-space>
+                    </n-form-item>
+                    <n-form-item :label="$t('preferences.general.update')">
+                        <n-checkbox v-model:checked="prefStore.general.checkUpdate">
+                            {{ $t('preferences.general.auto_check_update') }}
+                        </n-checkbox>
+                    </n-form-item>
                 </n-form>
             </n-tab-pane>
 

frontend/src/components/dialogs/RenameKeyDialog.vue

@@ -66,8 +66,8 @@ const onClose = () => {
         @negative-click="onClose">
         <n-form
             :model="renameForm"
-            :show-label="false"
             :show-require-mark="false"
+            :show-label="false"
             label-align="left"
             label-placement="top">
             <n-form-item :label="$t('dialogue.key.new_name')" required>

frontend/src/components/dialogs/SetTtlDialog.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { reactive, watch } from 'vue'
+import { reactive, ref, watch } from 'vue'
 import useDialog from 'stores/dialog'
 import useTabStore from 'stores/tab.js'
 import useConnectionStore from 'stores/connections.js'
@@ -105,7 +105,7 @@ const onConfirm = async () => {
             </div>
             <div class="flex-item n-dialog__action">
                 <n-button :focusable="false" @click="onClose">{{ $t('common.cancel') }}</n-button>
-                <n-button :focusable="false" type="primary" @click="onConfirm">{{ $t('common.save') }}</n-button>
+                <n-button type="primary" :focusable="false" @click="onConfirm">{{ $t('common.save') }}</n-button>
             </div>
         </template>
     </n-modal>

frontend/src/components/icons/Binary.vue

@@ -2,17 +2,17 @@
 
 <template>
     <svg
-        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
-        height="24"
-        stroke="currentColor"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        stroke-width="2"
-        viewBox="0 0 24 24"
         width="24"
-        xmlns="http://www.w3.org/2000/svg">
+        height="24"
-        <rect height="6" rx="2" width="4" x="14" y="14" />
+        viewBox="0 0 24 24"
-        <rect height="6" rx="2" width="4" x="6" y="4" />
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round">
+        <rect x="14" y="14" width="4" height="6" rx="2" />
+        <rect x="6" y="4" width="4" height="6" rx="2" />
         <path d="M6 20h4" />
         <path d="M14 10h4" />
         <path d="M6 14h2v6" />

frontend/src/components/icons/Key.vue

@@ -9,13 +9,13 @@ const props = defineProps({
 
 <template>
     <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
         fill="none"
         stroke="currentColor"
-        stroke-linecap="round"
-        stroke-linejoin="round"
         stroke-width="1.4"
-        viewBox="0 0 24 24"
+        stroke-linecap="round"
-        xmlns="http://www.w3.org/2000/svg">
+        stroke-linejoin="round">
         <path :fill="props.fillColor" d="M2 18v3c0 .6.4 1 1 1h4v-3h3v-3h2l1.4-1.4a6.5 6.5 0 1 0-4-4Z" />
         <circle cx="16.5" cy="7.5" r="1.5" />
     </svg>

frontend/src/components/icons/Layer.vue

@@ -13,16 +13,16 @@ const props = defineProps({
 
 <template>
     <svg
-        stroke="currentColor"
+        xmlns="http://www.w3.org/2000/svg"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        stroke-width="1.5"
         viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg">
+        stroke="currentColor"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round">
         <path
-            :fill="props.fillColor"
+            d="M10 20H4a2 2 0 0 1-2-2V5c0-1.1.9-2 2-2h3.93a2 2 0 0 1 1.66.9l.82 1.2a2 2 0 0 0 1.66.9H20a2 2 0 0 1 2 2v2"
-            d="M10 20H4a2 2 0 0 1-2-2V5c0-1.1.9-2 2-2h3.93a2 2 0 0 1 1.66.9l.82 1.2a2 2 0 0 0 1.66.9H20a2 2 0 0 1 2 2v2" />
+            :fill="props.fillColor" />
-        <circle :fill="props.fillColor" cx="16" cy="20" r="2" />
+        <circle cx="16" cy="20" r="2" :fill="props.fillColor" />
         <path d="m22 14-4.5 4.5" />
         <path d="m21 15 1 1" />
     </svg>

frontend/src/components/icons/LoadAll.vue

@@ -1,25 +0,0 @@
-<script setup>
-const props = defineProps({
-    strokeWidth: {
-        type: [Number, String],
-        default: 3,
-    },
-})
-</script>
-
-<template>
-    <svg fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
-        <path
-            :stroke-width="props.strokeWidth"
-            clip-rule="evenodd"
-            d="M23.9999 29.0001L12 17.0001L19.9999 17.0001L19.9999 6.00011L27.9999 6.00011L27.9999 17.0001L35.9999 17.0001L23.9999 29.0001Z"
-            fill="none"
-            fill-rule="evenodd"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round" />
-        <path :stroke-width="props.strokeWidth" d="M42 37L6 37" stroke="currentColor" stroke-linecap="round" />
-    </svg>
-</template>
-
-<style lang="scss" scoped></style>

frontend/src/components/icons/LoadList.vue

@@ -1,51 +0,0 @@
-<script setup>
-const props = defineProps({
-    strokeWidth: {
-        type: [Number, String],
-        default: 3,
-    },
-})
-</script>
-
-<template>
-    <svg fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
-        <path
-            :stroke-width="props.strokeWidth"
-            d="M8 28H24"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round" />
-        <path
-            :stroke-width="props.strokeWidth"
-            d="M8 37H24"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round" />
-        <path
-            :stroke-width="props.strokeWidth"
-            d="M8 19H40"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round" />
-        <path
-            :stroke-width="props.strokeWidth"
-            d="M8 10H40"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round" />
-        <path
-            :stroke-width="props.strokeWidth"
-            d="M37 40V28"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round" />
-        <path
-            :stroke-width="props.strokeWidth"
-            d="M33 36L37 40L41 36"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round" />
-    </svg>
-</template>
-
-<style lang="scss" scoped></style>

frontend/src/components/icons/More.vue

@@ -1,24 +0,0 @@
-<script setup>
-const props = defineProps({
-    strokeWidth: {
-        type: [Number, String],
-        default: 3,
-    },
-})
-</script>
-
-<template>
-    <svg fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
-        <path
-            :stroke-width="strokeWidth"
-            d="M24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44Z"
-            fill="none"
-            stroke="currentColor"
-            stroke-linejoin="round" />
-        <circle cx="14" cy="24" fill="currentColor" r="3" />
-        <circle cx="24" cy="24" fill="currentColor" r="3" />
-        <circle cx="34" cy="24" fill="currentColor" r="3" />
-    </svg>
-</template>
-
-<style lang="scss" scoped></style>

frontend/src/components/icons/Record.vue

@@ -8,23 +8,23 @@ const props = defineProps({
 </script>
 
 <template>
-    <svg fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
+    <svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path
-            :stroke-width="strokeWidth"
             d="M5.81836 6.72729V14H13.0911"
             stroke="currentColor"
+            :stroke-width="strokeWidth"
             stroke-linecap="round"
             stroke-linejoin="round" />
         <path
-            :stroke-width="strokeWidth"
             d="M4 24C4 35.0457 12.9543 44 24 44V44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C16.598 4 10.1351 8.02111 6.67677 13.9981"
             stroke="currentColor"
+            :stroke-width="strokeWidth"
             stroke-linecap="round"
             stroke-linejoin="round" />
         <path
-            :stroke-width="strokeWidth"
             d="M24.005 12L24.0038 24.0088L32.4832 32.4882"
             stroke="currentColor"
+            :stroke-width="strokeWidth"
             stroke-linecap="round"
             stroke-linejoin="round" />
     </svg>

frontend/src/components/icons/Status.vue

@@ -8,34 +8,34 @@ const props = defineProps({
 </script>
 
 <template>
-    <svg fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
+    <svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
         <rect
-            :stroke-width="props.strokeWidth"
+            x="4"
-            fill="none"
+            y="6"
+            width="40"
             height="36"
             rx="2"
+            fill="none"
             stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            width="40"
-            x="4"
-            y="6" />
-        <path
             :stroke-width="props.strokeWidth"
+            stroke-linecap="round"
+            stroke-linejoin="round" />
+        <path
             d="M32 25V32"
             stroke="currentColor"
+            :stroke-width="props.strokeWidth"
             stroke-linecap="round"
             stroke-linejoin="round" />
         <path
-            :stroke-width="props.strokeWidth"
             d="M24 16V32"
             stroke="currentColor"
+            :stroke-width="props.strokeWidth"
             stroke-linecap="round"
             stroke-linejoin="round" />
         <path
-            :stroke-width="props.strokeWidth"
             d="M16 20V32"
             stroke="currentColor"
+            :stroke-width="props.strokeWidth"
             stroke-linecap="round"
             stroke-linejoin="round" />
     </svg>

frontend/src/components/icons/ToggleCluster.vue

@@ -18,167 +18,167 @@ const props = defineProps({
 </script>
 
 <template>
-    <svg v-if="props.modelValue" fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
+    <svg v-if="props.modelValue" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
         <rect
-            :fill="props.fillColor"
-            :stroke="props.fillColor"
-            :stroke-width="props.strokeWidth"
-            height="8"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            width="8"
             x="4"
-            y="34" />
+            y="34"
-        <rect
+            width="8"
+            height="8"
             :fill="props.fillColor"
             :stroke="props.fillColor"
             :stroke-width="props.strokeWidth"
-            height="12"
             stroke-linecap="round"
-            stroke-linejoin="round"
+            stroke-linejoin="round" />
-            width="32"
+        <rect
             x="8"
-            y="6" />
+            y="6"
-        <path
+            width="32"
+            height="12"
+            :fill="props.fillColor"
             :stroke="props.fillColor"
             :stroke-width="props.strokeWidth"
+            stroke-linecap="round"
+            stroke-linejoin="round" />
+        <path
             d="M24 34V18"
+            :stroke="props.fillColor"
+            :stroke-width="props.strokeWidth"
             stroke-linecap="round"
             stroke-linejoin="round" />
         <path
-            :stroke="props.fillColor"
-            :stroke-width="props.strokeWidth"
             d="M8 34V26H40V34"
+            :stroke="props.fillColor"
+            :stroke-width="props.strokeWidth"
             stroke-linecap="round"
             stroke-linejoin="round" />
         <rect
-            :fill="props.fillColor"
-            :stroke="props.fillColor"
-            :stroke-width="props.strokeWidth"
-            height="8"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            width="8"
             x="36"
-            y="34" />
+            y="34"
-        <rect
+            width="8"
+            height="8"
             :fill="props.fillColor"
             :stroke="props.fillColor"
             :stroke-width="props.strokeWidth"
-            height="8"
             stroke-linecap="round"
-            stroke-linejoin="round"
+            stroke-linejoin="round" />
-            width="8"
+        <rect
             x="20"
-            y="34" />
+            y="34"
-        <path
+            width="8"
+            height="8"
+            :fill="props.fillColor"
+            :stroke="props.fillColor"
             :stroke-width="props.strokeWidth"
+            stroke-linecap="round"
+            stroke-linejoin="round" />
+        <path
             d="M14 12H16"
             stroke="#FFF"
+            :stroke-width="props.strokeWidth"
             stroke-linecap="round"
             stroke-linejoin="round" />
     </svg>
-    <svg v-else fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
+    <svg v-else viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path
-            :stroke-width="props.strokeWidth"
             d="M5 24L43 24"
             stroke="currentColor"
+            :stroke-width="props.strokeWidth"
             stroke-linecap="round"
             stroke-linejoin="round" />
         <path
-            :stroke-width="props.strokeWidth"
             d="M28 4H20C18.8954 4 18 4.89543 18 6V14C18 15.1046 18.8954 16 20 16H28C29.1046 16 30 15.1046 30 14V6C30 4.89543 29.1046 4 28 4Z"
             fill="none"
             stroke="currentColor"
+            :stroke-width="props.strokeWidth"
             stroke-linejoin="round" />
         <path
-            :stroke-width="props.strokeWidth"
             d="M16 32H8C6.89543 32 6 32.8954 6 34V42C6 43.1046 6.89543 44 8 44H16C17.1046 44 18 43.1046 18 42V34C18 32.8954 17.1046 32 16 32Z"
             fill="none"
             stroke="currentColor"
+            :stroke-width="props.strokeWidth"
             stroke-linejoin="round" />
         <path
-            :stroke-width="props.strokeWidth"
             d="M40 32H32C30.8954 32 30 32.8954 30 34V42C30 43.1046 30.8954 44 32 44H40C41.1046 44 42 43.1046 42 42V34C42 32.8954 41.1046 32 40 32Z"
             fill="none"
             stroke="currentColor"
+            :stroke-width="props.strokeWidth"
             stroke-linejoin="round" />
         <path
-            :stroke-width="props.strokeWidth"
             d="M24 24V16"
             stroke="currentColor"
+            :stroke-width="props.strokeWidth"
             stroke-linecap="round"
             stroke-linejoin="round" />
         <path
-            :stroke-width="props.strokeWidth"
             d="M36 32V24"
             stroke="currentColor"
+            :stroke-width="props.strokeWidth"
             stroke-linecap="round"
             stroke-linejoin="round" />
         <path
-            :stroke-width="props.strokeWidth"
             d="M12 32V24"
             stroke="currentColor"
+            :stroke-width="props.strokeWidth"
             stroke-linecap="round"
             stroke-linejoin="round" />
     </svg>
-    <svg v-else fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
+    <svg v-else viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
         <rect
-            :stroke-width="props.strokeWidth"
-            fill="none"
-            height="8"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            width="8"
             x="4"
-            y="34" />
+            y="34"
-        <rect
+            width="8"
-            :stroke-width="props.strokeWidth"
+            height="8"
             fill="none"
-            height="12"
             stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            width="32"
-            x="8"
-            y="6" />
-        <path
             :stroke-width="props.strokeWidth"
+            stroke-linecap="round"
+            stroke-linejoin="round" />
+        <rect
+            x="8"
+            y="6"
+            width="32"
+            height="12"
+            fill="none"
+            stroke="currentColor"
+            :stroke-width="props.strokeWidth"
+            stroke-linecap="round"
+            stroke-linejoin="round" />
+        <path
             d="M24 34V18"
             stroke="currentColor"
+            :stroke-width="props.strokeWidth"
             stroke-linecap="round"
             stroke-linejoin="round" />
         <path
-            :stroke-width="props.strokeWidth"
             d="M8 34V26H40V34"
             stroke="currentColor"
+            :stroke-width="props.strokeWidth"
             stroke-linecap="round"
             stroke-linejoin="round" />
         <rect
-            :stroke-width="props.strokeWidth"
-            fill="none"
-            height="8"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            width="8"
             x="36"
-            y="34" />
+            y="34"
-        <rect
-            :stroke-width="props.strokeWidth"
-            fill="none"
-            height="8"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round"
             width="8"
-            x="20"
+            height="8"
-            y="34" />
+            fill="none"
-        <path
+            stroke="currentColor"
             :stroke-width="props.strokeWidth"
+            stroke-linecap="round"
+            stroke-linejoin="round" />
+        <rect
+            x="20"
+            y="34"
+            width="8"
+            height="8"
+            fill="none"
+            stroke="currentColor"
+            :stroke-width="props.strokeWidth"
+            stroke-linecap="round"
+            stroke-linejoin="round" />
+        <path
             d="M14 12H16"
             stroke="currentColor"
+            :stroke-width="props.strokeWidth"
             stroke-linecap="round"
             stroke-linejoin="round" />
     </svg>

frontend/src/components/icons/Unlink.vue

@@ -8,29 +8,29 @@ const props = defineProps({
 </script>
 
 <template>
-    <svg fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
+    <svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path
-            :stroke-width="strokeWidth"
             d="M25.8927 16.0307L18.1145 8.2525C15.2506 5.38866 10.7031 5.29302 7.9572 8.0389C5.21132 10.7848 5.30696 15.3323 8.1708 18.1962L15.949 25.9744"
             stroke="currentColor"
+            :stroke-width="strokeWidth"
             stroke-linecap="round"
             stroke-linejoin="round" />
         <path
-            :stroke-width="strokeWidth"
             d="M31.9161 22.0707L39.6943 29.8489C42.5581 32.7127 42.9291 37.1233 39.9079 40.0062C36.8867 42.8891 32.6144 42.6564 29.7506 39.7926L21.9724 32.0144"
             stroke="currentColor"
+            :stroke-width="strokeWidth"
             stroke-linecap="round"
             stroke-linejoin="round" />
         <path
-            :stroke-width="strokeWidth"
             d="M21.2384 21.0759L17.3493 17.1868"
             stroke="currentColor"
+            :stroke-width="strokeWidth"
             stroke-linecap="round"
             stroke-linejoin="round" />
         <path
-            :stroke-width="strokeWidth"
             d="M30.3131 30.1504L26.424 26.2613"
             stroke="currentColor"
+            :stroke-width="strokeWidth"
             stroke-linecap="round"
             stroke-linejoin="round" />
     </svg>

frontend/src/components/icons/WindowClose.vue

@@ -8,9 +8,9 @@ const props = defineProps({
 </script>
 
 <template>
-    <svg :height="props.size" :width="props.size" fill="none" viewBox="0 0 48 48">
+    <svg :width="props.size" :height="props.size" viewBox="0 0 48 48" fill="none">
-        <path d="M8 8L40 40" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" />
+        <path d="M8 8L40 40" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
-        <path d="M8 40L40 8" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" />
+        <path d="M8 40L40 8" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
     </svg>
 </template>
 

frontend/src/components/icons/WindowMax.vue

@@ -8,7 +8,7 @@ const props = defineProps({
 </script>
 
 <template>
-    <svg :height="props.size" :width="props.size" fill="none" viewBox="0 0 48 48">
+    <svg :width="props.size" :height="props.size" viewBox="0 0 48 48" fill="none">
         <path
             d="M39 6H9C7.34315 6 6 7.34315 6 9V39C6 40.6569 7.34315 42 9 42H39C40.6569 42 42 40.6569 42 39V9C42 7.34315 40.6569 6 39 6Z"
             fill="none"

frontend/src/components/icons/WindowMin.vue

@@ -8,8 +8,8 @@ const props = defineProps({
 </script>
 
 <template>
-    <svg :height="props.size" :width="props.size" fill="none" viewBox="0 0 48 48">
+    <svg :width="props.size" :height="props.size" viewBox="0 0 48 48" fill="none">
-        <path d="M8 24L40 24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" />
+        <path d="M8 24L40 24" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
     </svg>
 </template>
 

frontend/src/components/icons/WindowRestore.vue

@@ -8,19 +8,19 @@ const props = defineProps({
 </script>
 
 <template>
-    <svg :height="props.size" :width="props.size" fill="none" viewBox="0 0 48 48">
+    <svg :width="props.size" :height="props.size" viewBox="0 0 48 48" fill="none">
         <path
             d="M13 12.4316V7.8125C13 6.2592 14.2592 5 15.8125 5H40.1875C41.7408 5 43 6.2592 43 7.8125V32.1875C43 33.7408 41.7408 35 40.1875 35H35.5163"
             stroke="currentColor"
+            stroke-width="4"
             stroke-linecap="round"
-            stroke-linejoin="round"
+            stroke-linejoin="round" />
-            stroke-width="4" />
         <path
             d="M32.1875 13H7.8125C6.2592 13 5 14.2592 5 15.8125V40.1875C5 41.7408 6.2592 43 7.8125 43H32.1875C33.7408 43 35 41.7408 35 40.1875V15.8125C35 14.2592 33.7408 13 32.1875 13Z"
             fill="none"
             stroke="currentColor"
-            stroke-linejoin="round"
+            stroke-width="4"
-            stroke-width="4" />
+            stroke-linejoin="round" />
     </svg>
 </template>
 

frontend/src/components/sidebar/BrowserPane.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { useThemeVars } from 'naive-ui'
+import AddLink from '@/components/icons/AddLink.vue'
 import BrowserTree from './BrowserTree.vue'
 import IconButton from '@/components/common/IconButton.vue'
 import useTabStore from 'stores/tab.js'
@@ -73,7 +74,7 @@ const filterTypeOptions = computed(() => {
                     :options="filterTypeOptions"
                     style="width: 120px" />
                 <n-input clearable placeholder="" />
-                <n-button :focusable="false" ghost>
+                <n-button ghost :focusable="false">
                     <template #icon>
                         <n-icon :component="Search" />
                     </template>

frontend/src/components/sidebar/BrowserTree.vue

@@ -23,8 +23,6 @@ import { typesBgColor, typesColor } from '@/consts/support_redis_type.js'
 import useTabStore from 'stores/tab.js'
 import IconButton from '@/components/common/IconButton.vue'
 import { parseHexColor } from '@/utils/rgb.js'
-import LoadList from '@/components/icons/LoadList.vue'
-import LoadAll from '@/components/icons/LoadAll.vue'
 
 const props = defineProps({
     server: String,
@@ -148,11 +146,11 @@ const menuOptions = {
         }
     },
     [ConnectionType.RedisKey]: () => [
-        // {
+        {
-        //     key: 'key_reload',
+            key: 'key_reload',
-        //     label: i18n.t('interface.reload'),
+            label: i18n.t('interface.reload'),
-        //     icon: renderIcon(Refresh),
+            icon: renderIcon(Refresh),
-        // },
+        },
         {
             key: 'key_newkey',
             label: i18n.t('interface.new_key'),
@@ -225,9 +223,9 @@ const handleSelectContextMenu = (key) => {
         return
     }
     const node = connectionStore.getNode(selectedKey)
-    const { db = 0, key: nodeKey, redisKey: rk = '', redisKeyCode: rkc, label } = node || {}
+    const { db, key: nodeKey } = node || {}
-    const redisKey = rkc || rk
+    const redisKey = node.redisKeyCode || node.redisKey
-    const redisKeyName = !!rkc ? label : redisKey
+    const redisKeyName = !!node.redisKeyCode ? node.label : redisKey
     switch (key) {
         case 'server_info':
             tabStore.setSelectedKeys(props.server)
@@ -261,9 +259,9 @@ const handleSelectContextMenu = (key) => {
             const { match: pattern, type } = connectionStore.getKeyFilter(props.server, db)
             dialogStore.openKeyFilterDialog(props.server, db, pattern, type)
             break
-        // case 'key_reload':
+        case 'key_reload':
-        //     connectionStore.loadKeys(props.server, db, redisKey)
+            connectionStore.loadKeys(props.server, db, redisKey)
-        //     break
+            break
         case 'value_reload':
             connectionStore.loadKeyValue(props.server, db, redisKey)
             break
@@ -291,38 +289,6 @@ const handleSelectContextMenu = (key) => {
                     $message.error(e.message)
                 })
             break
-        case 'db_loadmore':
-            if (node != null && !!!node.loading && !!!node.fullLoaded) {
-                node.loading = true
-                connectionStore
-                    .loadMoreKeys(props.server, db)
-                    .then((end) => {
-                        // fully loaded
-                        node.fullLoaded = end === true
-                    })
-                    .catch((e) => {
-                        $message.error(e.message)
-                    })
-                    .finally(() => {
-                        delete node.loading
-                    })
-            }
-            break
-        case 'db_loadall':
-            if (node != null && !!!node.loading) {
-                node.loading = true
-                connectionStore
-                    .loadAllKeys(props.server, db)
-                    .catch((e) => {
-                        $message.error(e.message)
-                    })
-                    .finally(() => {
-                        delete node.loading
-                        node.fullLoaded = true
-                    })
-            }
-            break
-        case 'more_action':
         default:
             console.warn('TODO: handle context menu:' + key)
     }
@@ -423,14 +389,9 @@ const renderLabel = ({ option }) => {
         case ConnectionType.Server:
             return h('b', {}, { default: () => option.label })
         case ConnectionType.RedisDB:
-            const { name: server, db, opened = false } = option
+            const { name: server, db } = option
             let { match: matchPattern, type: typeFilter } = connectionStore.getKeyFilter(server, db)
-            const items = []
+            const items = [`${option.label} (${option.keys || 0})`]
-            if (opened) {
-                items.push(`${option.label} (${option.keys || 0}/${Math.max(option.maxKeys || 0, option.keys || 0)})`)
-            } else {
-                items.push(`${option.label} (${Math.max(option.maxKeys || 0, option.keys || 0)})`)
-            }
             // show filter tag after label
             // type filter tag
             if (!isEmpty(typeFilter)) {
@@ -499,53 +460,30 @@ const renderIconMenu = (items) => {
     )
 }
 
-const getDatabaseMenu = (opened, loading, end) => {
+const getDatabaseMenu = (opened) => {
     const btns = []
     if (opened) {
         btns.push(
             h(IconButton, {
                 tTooltip: 'interface.filter_key',
                 icon: Filter,
-                disabled: loading === true,
                 onClick: () => handleSelectContextMenu('db_filter'),
             }),
             h(IconButton, {
                 tTooltip: 'interface.reload',
                 icon: Refresh,
-                disabled: loading === true,
                 onClick: () => handleSelectContextMenu('db_reload'),
             }),
             h(IconButton, {
                 tTooltip: 'interface.new_key',
                 icon: Add,
-                disabled: loading === true,
                 onClick: () => handleSelectContextMenu('db_newkey'),
             }),
-            h(IconButton, {
-                tTooltip: 'interface.load_more',
-                icon: LoadList,
-                disabled: end === true,
-                loading: loading === true,
-                onClick: () => handleSelectContextMenu('db_loadmore'),
-            }),
-            h(IconButton, {
-                tTooltip: 'interface.load_all',
-                icon: LoadAll,
-                disabled: end === true,
-                loading: loading === true,
-                onClick: () => handleSelectContextMenu('db_loadall'),
-            }),
             h(IconButton, {
                 tTooltip: 'interface.batch_delete',
                 icon: Delete,
-                disabled: loading === true,
                 onClick: () => handleSelectContextMenu('key_remove'),
             }),
-            // h(IconButton, {
-            //     tTooltip: 'interface.more_action',
-            //     icon: More,
-            //     onClick: () => handleSelectContextMenu('more_action'),
-            // }),
         )
     } else {
         btns.push(
@@ -561,12 +499,11 @@ const getDatabaseMenu = (opened, loading, end) => {
 
 const getLayerMenu = () => {
     return [
-        // disable reload by layer, due to conflict with partial loading keys
+        h(IconButton, {
-        // h(IconButton, {
+            tTooltip: 'interface.reload',
-        //     tTooltip: 'interface.reload',
+            icon: Refresh,
-        //     icon: Refresh,
+            onClick: () => handleSelectContextMenu('key_reload'),
-        //     onClick: () => handleSelectContextMenu('key_reload'),
+        }),
-        // }),
         h(IconButton, {
             tTooltip: 'interface.new_key',
             icon: Add,
@@ -595,7 +532,7 @@ const renderSuffix = ({ option }) => {
     if ((option.type === ConnectionType.RedisDB && option.opened) || includes(selectedKeys.value, option.key)) {
         switch (option.type) {
             case ConnectionType.RedisDB:
-                return renderIconMenu(getDatabaseMenu(option.opened, option.loading, option.fullLoaded))
+                return renderIconMenu(getDatabaseMenu(option.opened))
             case ConnectionType.RedisKey:
                 return renderIconMenu(getLayerMenu())
             case ConnectionType.RedisValue:

frontend/src/components/sidebar/ConnectionTree.vue

@@ -519,7 +519,7 @@ const onCancelOpen = () => {
                 <template #description>
                     <n-space vertical>
                         <n-text strong>{{ $t('dialogue.opening_connection') }}</n-text>
-                        <n-button :focusable="false" secondary size="small" @click="onCancelOpen">
+                        <n-button secondary size="small" :focusable="false" @click="onCancelOpen">
                             {{ $t('dialogue.interrupt_connection') }}
                         </n-button>
                     </n-space>

frontend/src/components/sidebar/NavMenu.vue

@@ -10,6 +10,7 @@ import useDialogStore from 'stores/dialog.js'
 import Github from '@/components/icons/Github.vue'
 import { BrowserOpenURL } from 'wailsjs/runtime/runtime.js'
 import useConnectionStore from 'stores/connections.js'
+import Help from '@/components/icons/Help.vue'
 import usePreferencesStore from 'stores/preferences.js'
 import Record from '@/components/icons/Record.vue'
 

frontend/src/langs/en.json

@@ -31,7 +31,6 @@
       "default": "Default",
       "font": "Font",
       "font_size": "Font Size",
-      "scan_size": "Default Size for SCAN Command",
       "proxy": "Proxy",
       "use_system_proxy": "Use system proxy",
       "use_system_proxy_http": "Use system proxy only for HTTP(S) request",
@@ -83,10 +82,7 @@
     "copy_key": "Copy Key",
     "binary_key": "Binary Key Name",
     "remove_key": "Remove Key",
-    "new_key": "Add Key",
+    "new_key": "Add New Key",
-    "load_more": "Load More Keys",
-    "load_all": "Load All Keys",
-    "more_action": "More Action",
     "nonexist_tab_content": "Selected key does not exist. Please retry",
     "empty_server_content": "Select and open a connection from the left",
     "empty_server_list": "No redis server",
@@ -138,7 +134,7 @@
         "filter": "Default Key Filter Pattern",
         "filter_tip": "Pattern which defines loaded keys from redis server",
         "separator": "Key Separator",
-        "separator_tip": "Separator for key path item",
+        "separator_tip":"Separator for key path item",
         "conn_timeout": "Connection Timeout",
         "exec_timeout": "Execution Timeout",
         "dbfilter_type": "Database Filter",
@@ -149,7 +145,6 @@
         "dbfilter_hide_title": "Select the Databases to Hide",
         "dbfilter_input": "Input Database Index",
         "dbfilter_input_tip": "Press Enter to confirm",
-        "load_size": "Size of Keys Per Load",
         "mark_color": "Mark Color"
       },
       "ssl": {
@@ -158,7 +153,7 @@
         "cert_file": "Public Key",
         "key_file": "Private Key",
         "ca_file": "Authority",
-        "cert_file_tip": "Public Key File in PEM format(Cert)",
+        "cert_file_tip":"Public Key File in PEM format(Cert)",
         "key_file_tip": "Private Key File in PEM format(Key)",
         "ca_file_tip": "Certificate Authority File in PEM format(CA)"
       },

frontend/src/langs/zh-cn.json

@@ -31,7 +31,6 @@
       "default": "默认",
       "font": "字体",
       "font_size": "字体尺寸",
-      "scan_size": "SCAN命令默认数量",
       "proxy": "代理",
       "use_system_proxy": "使用系统代理",
       "use_system_proxy_http": "仅在HTTP请求时使用系统代理",
@@ -84,9 +83,6 @@
     "binary_key": "二进制键名",
     "remove_key": "删除键",
     "new_key": "添加新键",
-    "load_more": "加载更多键",
-    "load_all": "加载所有键",
-    "more_action": "更多操作",
     "nonexist_tab_content": "所选键不存在，请尝试刷新重试",
     "empty_server_content": "可以从左边选择并打开连接",
     "empty_server_list": "还没添加Redis服务器",
@@ -149,7 +145,6 @@
         "dbfilter_hide_title": "需要隐藏的数据库",
         "dbfilter_input": "输入数据库索引",
         "dbfilter_input_tip": "按回车确认",
-        "load_size": "单次加载键数量",
         "mark_color": "标记颜色"
       },
       "ssl": {
@@ -158,7 +153,7 @@
         "cert_file": "公钥文件",
         "key_file": "私钥文件",
         "ca_file": "授权文件",
-        "cert_file_tip": "PEM格式公钥文件(Cert)",
+        "cert_file_tip":"PEM格式公钥文件(Cert)",
         "key_file_tip": "PEM格式私钥文件(Key)",
         "ca_file_tip": "PEM格式授权文件(CA)"
       },

frontend/src/stores/connections.js

@@ -5,6 +5,7 @@ import {
     get,
     isEmpty,
     join,
+    map,
     remove,
     size,
     slice,
@@ -29,8 +30,6 @@ import {
     GetConnection,
     GetKeyValue,
     ListConnection,
-    LoadAllKeys,
-    LoadNextKeys,
     OpenConnection,
     OpenDatabase,
     RemoveStreamValues,
@@ -38,6 +37,7 @@ import {
     RenameKey,
     SaveConnection,
     SaveSortedConnection,
+    ScanKeys,
     ServerInfo,
     SetHashValue,
     SetKeyTTL,
@@ -77,8 +77,6 @@ const useConnectionStore = defineStore('connections', {
      * @property {boolean} [opened] - redis db is opened, type == ConnectionType.RedisDB only
      * @property {boolean} [expanded] - current node is expanded
      * @property {DatabaseItem[]} [children]
-     * @property {boolean} [loading] - indicated that is loading children now
-     * @property {boolean} [fullLoaded] - indicated that all children already loaded
      */
 
     /**
@@ -232,7 +230,6 @@ const useConnectionStore = defineStore('connections', {
                 execTimeout: 60,
                 dbFilterType: 'none',
                 dbFilterList: [],
-                loadSize: 10000,
                 markColor: '',
                 ssl: {
                     enable: false,
@@ -410,8 +407,7 @@ const useConnectionStore = defineStore('connections', {
                     key: `${name}/${db[i].name}`,
                     label: db[i].name,
                     name: name,
-                    keys: 0,
+                    keys: db[i].keys,
-                    maxKeys: db[i].keys,
                     db: db[i].index,
                     type: ConnectionType.RedisDB,
                     isLeaf: false,
@@ -539,14 +535,13 @@ const useConnectionStore = defineStore('connections', {
             if (!success) {
                 throw new Error(msg)
             }
-            const { keys = [], end = false } = data
+            const { keys = [] } = data
             const selDB = this.getDatabase(connName, db)
             if (selDB == null) {
                 return
             }
 
             selDB.opened = true
-            selDB.fullLoaded = end
             if (isEmpty(keys)) {
                 selDB.children = []
             } else {
@@ -663,77 +658,44 @@ const useConnectionStore = defineStore('connections', {
          * scan keys with prefix
          * @param {string} connName
          * @param {number} db
-         * @param {string} match
+         * @param {string} [prefix] full reload database if prefix is null
-         * @param {string} matchType
+         * @returns {Promise<{keys: string[]}>}
-         * @param {boolean} [full]
-         * @returns {Promise<{keys: string[], end: boolean}>}
          */
-        async scanKeys(connName, db, match, matchType, full) {
+        async scanKeys(connName, db, prefix) {
-            let resp
+            const { data, success, msg } = await ScanKeys(connName, db, prefix || '*')
-            if (full) {
-                resp = await LoadAllKeys(connName, db, match || '*', matchType)
-            } else {
-                resp = await LoadNextKeys(connName, db, match || '*', matchType)
-            }
-            const { data, success, msg } = resp || {}
             if (!success) {
                 throw new Error(msg)
             }
-            const { keys = [], end } = data
+            const { keys = [] } = data
-            return { keys, end, success }
+            return { keys, success }
         },
 
         /**
-         *
+         * load keys with prefix
          * @param {string} connName
          * @param {number} db
-         * @param {string|null} prefix
+         * @param {string} [prefix]
-         * @param {string|null} matchType
+         * @returns {Promise<void>}
-         * @param {boolean} [all]
-         * @return {Promise<{keys: Array<string|number[]>, end: boolean}>}
-         * @private
          */
-        async _loadKeys(connName, db, prefix, matchType, all) {
+        async loadKeys(connName, db, prefix) {
-            let match = prefix
+            let scanPrefix = prefix
-            if (isEmpty(match)) {
+            if (isEmpty(scanPrefix)) {
-                match = '*'
+                scanPrefix = '*'
             } else {
                 const separator = this._getSeparator(connName)
                 if (!endsWith(prefix, separator + '*')) {
-                    match = prefix + separator + '*'
+                    scanPrefix = prefix + separator + '*'
                 }
             }
-            return this.scanKeys(connName, db, match, matchType, all)
+            const { keys, success } = await this.scanKeys(connName, db, scanPrefix)
-        },
+            if (!success) {
+                return
+            }
 
-        /**
-         * load more keys within the database
-         * @param {string} connName
-         * @param {number} db
-         * @return {Promise<boolean>}
-         */
-        async loadMoreKeys(connName, db) {
-            const { match, type: keyType } = this.getKeyFilter(connName, db)
-            const { keys, end } = await this._loadKeys(connName, db, match, keyType, false)
             // remove current keys below prefix
+            this._deleteKeyNode(connName, db, prefix, true)
             this._addKeyNodes(connName, db, keys)
-            this._tidyNode(connName, db, '')
+            this._tidyNode(connName, db, prefix)
-            return end
-        },
-
-        /**
-         * load all left keys within the database
-         * @param {string} connName
-         * @param {number} db
-         * @return {Promise<void>}
-         */
-        async loadAllKeys(connName, db) {
-            const { match, type: keyType } = this.getKeyFilter(connName, db)
-            const { keys } = await this._loadKeys(connName, db, match, keyType, true)
-            // remove current keys below prefix
-            this._deleteKeyNode(connName, db, '', true)
-            this._addKeyNodes(connName, db, keys)
-            this._tidyNode(connName, db, '')
         },
 
         /**

frontend/src/stores/dialog.js

@@ -1,5 +1,6 @@
 import { defineStore } from 'pinia'
 import useConnectionStore from './connections.js'
+import { assignWith, isEmpty } from 'lodash'
 
 /**
  * connection dialog type

frontend/src/stores/preferences.js

@@ -42,7 +42,6 @@ const usePreferencesStore = defineStore('preferences', {
             language: 'auto',
             font: '',
             fontSize: 14,
-            scanSize: 3000,
             useSysProxy: false,
             useSysProxyHttp: false,
             checkUpdate: false,

frontend/src/utils/discrete.js

@@ -1,5 +1,5 @@
 import usePreferencesStore from 'stores/preferences.js'
-import { createDiscreteApi, darkTheme } from 'naive-ui'
+import { createDiscreteApi, darkTheme, useDialog } from 'naive-ui'
 import { themeOverrides } from '@/utils/theme.js'
 import { i18nGlobal } from '@/utils/i18n.js'
 import { computed } from 'vue'