perf: save window size before close #34

backend/consts/default_config.go

@@ -0,0 +1,6 @@
+package consts
+
+const DEFAULT_FONT_SIZE = 14
+const DEFAULT_ASIDE_WIDTH = 300
+const DEFAULT_WINDOW_WIDTH = 1024
+const DEFAULT_WINDOW_HEIGHT = 768

backend/services/connection_service.go

@@ -508,12 +508,15 @@ func (c *connectionService) GetKeyValue(connName string, db int, key string) (re
 	}
 
 	var value any
+	var size int64
 	var cursor uint64
 	switch strings.ToLower(keyType) {
 	case "string":
 		value, err = rdb.Get(ctx, key).Result()
+		size, _ = rdb.StrLen(ctx, key).Result()
 	case "list":
 		value, err = rdb.LRange(ctx, key, 0, -1).Result()
+		size, _ = rdb.LLen(ctx, key).Result()
 	case "hash":
 		//value, err = rdb.HGetAll(ctx, key).Result()
 		items := map[string]string{}
@@ -532,6 +535,7 @@ func (c *connectionService) GetKeyValue(connName string, db int, key string) (re
 			}
 		}
 		value = items
+		size, _ = rdb.HLen(ctx, key).Result()
 	case "set":
 		//value, err = rdb.SMembers(ctx, key).Result()
 		items := []string{}
@@ -548,6 +552,7 @@ func (c *connectionService) GetKeyValue(connName string, db int, key string) (re
 			}
 		}
 		value = items
+		size, _ = rdb.SCard(ctx, key).Result()
 	case "zset":
 		//value, err = rdb.ZRangeWithScores(ctx, key, 0, -1).Result()
 		var items []types.ZSetItem
@@ -572,6 +577,7 @@ func (c *connectionService) GetKeyValue(connName string, db int, key string) (re
 			}
 		}
 		value = items
+		size, _ = rdb.ZCard(ctx, key).Result()
 	case "stream":
 		var msgs []redis.XMessage
 		items := []types.StreamItem{}
@@ -587,6 +593,7 @@ func (c *connectionService) GetKeyValue(connName string, db int, key string) (re
 			})
 		}
 		value = items
+		size, _ = rdb.XLen(ctx, key).Result()
 	}
 	if err != nil {
 		resp.Msg = err.Error()
@@ -597,6 +604,7 @@ func (c *connectionService) GetKeyValue(connName string, db int, key string) (re
 		"type":  keyType,
 		"ttl":   ttl,
 		"value": value,
+		"size":  size,
 	}
 	return
 }

backend/services/preferences_service.go

@@ -7,6 +7,7 @@ import (
 	"sort"
 	"strings"
 	"sync"
+	"tinyrdm/backend/consts"
 	storage2 "tinyrdm/backend/storage"
 	"tinyrdm/backend/types"
 	"tinyrdm/backend/utils/coll"
@@ -101,6 +102,28 @@ func (p *preferencesService) GetAppVersion() (resp types.JSResp) {
 	return
 }
 
+func (p *preferencesService) SaveWindowSize(width, height int) {
+	p.SetPreferences(map[string]any{
+		"behavior": map[string]any{
+			"window_width":  width,
+			"window_height": height,
+		},
+	})
+}
+
+func (p *preferencesService) GetWindowSize() (width, height int) {
+	data := p.pref.GetPreferences()
+	w, h := data["behavior.window_width"], data["behavior.window_height"]
+	var ok bool
+	if width, ok = w.(int); !ok {
+		return consts.DEFAULT_WINDOW_WIDTH, consts.DEFAULT_WINDOW_HEIGHT
+	}
+	if height, ok = h.(int); !ok {
+		return consts.DEFAULT_WINDOW_WIDTH, consts.DEFAULT_WINDOW_HEIGHT
+	}
+	return
+}
+
 type latestRelease struct {
 	Name    string `json:"name"`
 	TagName string `json:"tag_name"`

backend/storage/preferences.go

@@ -5,6 +5,7 @@ import (
 	"gopkg.in/yaml.v3"
 	"strings"
 	"sync"
+	"tinyrdm/backend/consts"
 )
 
 type PreferencesStorage struct {
@@ -20,15 +21,19 @@ func NewPreferences() *PreferencesStorage {
 
 func (p *PreferencesStorage) DefaultPreferences() map[string]any {
 	return map[string]any{
+		"behavior": map[string]any{
+			"aside_width":   consts.DEFAULT_ASIDE_WIDTH,
+			"window_width":  consts.DEFAULT_WINDOW_WIDTH,
+			"window_height": consts.DEFAULT_WINDOW_HEIGHT,
+		},
 		"general": map[string]any{
 			"language":           "auto",
 			"font":               "",
-			"font_size":          14,
+			"font_size":          consts.DEFAULT_FONT_SIZE,
 			"use_sys_proxy":      false,
 			"use_sys_proxy_http": false,
 			"check_update":       true,
 			"skip_version":       "",
-			"aside_width":        300,
 		},
 		"editor": map[string]any{
 			"font":      "",

frontend/src/AppContent.vue

@@ -59,7 +59,7 @@ const startResize = () => {
 }
 
 const asideWidthVal = computed(() => {
-    return prefStore.general.asideWidth + 'px'
+    return prefStore.behavior.asideWidth + 'px'
 })
 
 const dragging = computed(() => {
@@ -115,7 +115,7 @@ const border = computed(() => {
                 <div
                     id="app-toolbar-title"
                     :style="{
-                        width: `${data.navMenuWidth + prefStore.general.asideWidth - 4}px`,
+                        width: `${data.navMenuWidth + prefStore.behavior.asideWidth - 4}px`,
                         paddingLeft: isMacOS() ? '70px' : '10px',
                     }">
                     <n-space align="center" :wrap-item="false" :wrap="false" :size="3">

frontend/src/components/content/ContentPane.vue

@@ -97,6 +97,7 @@ const tabContent = computed(() => {
         keyPath: tab.key,
         ttl: tab.ttl,
         value: tab.value,
+        size: tab.size || 0,
     }
 })
 
@@ -151,7 +152,8 @@ const onReloadKey = async () => {
             :key-path="tabContent.keyPath"
             :name="tabContent.name"
             :ttl="tabContent.ttl"
-            :value="tabContent.value" />
+            :value="tabContent.value"
+            :size="tabContent.size" />
     </div>
 </template>
 

frontend/src/components/content_value/ContentValueHash.vue

@@ -19,6 +19,7 @@ const props = defineProps({
         default: -1,
     },
     value: Object,
+    size: Number,
 })
 
 const filterOption = [
@@ -257,7 +258,9 @@ const onUpdateFilter = (filters, sourceColumn) => {
                         @update:value="onFilterInput" />
                 </n-input-group>
             </div>
-            <div class="flex-item-expand"></div>
+            <div class="tb2-extra-info flex-item-expand">
+                <n-tag size="large">{{ $t('interface.total', { size: props.size }) }}</n-tag>
+            </div>
             <n-button plain :focusable="false" @click="onAddRow">
                 <template #icon>
                     <n-icon :component="AddLink" size="18" />

frontend/src/components/content_value/ContentValueList.vue

@@ -20,6 +20,7 @@ const props = defineProps({
         default: -1,
     },
     value: Object,
+    size: Number,
 })
 
 const connectionStore = useConnectionStore()
@@ -181,7 +182,9 @@ const onUpdateFilter = (filters, sourceColumn) => {
                     @clear="clearFilter"
                     @update:value="onFilterInput" />
             </div>
-            <div class="flex-item-expand"></div>
+            <div class="tb2-extra-info flex-item-expand">
+                <n-tag size="large">{{ $t('interface.total', { size: props.size }) }}</n-tag>
+            </div>
             <n-button plain :focusable="false" @click="onAddValue">
                 <template #icon>
                     <n-icon :component="AddLink" size="18" />

frontend/src/components/content_value/ContentValueSet.vue

@@ -20,6 +20,7 @@ const props = defineProps({
         default: -1,
     },
     value: Array,
+    size: Number,
 })
 
 const connectionStore = useConnectionStore()
@@ -177,7 +178,9 @@ const onUpdateFilter = (filters, sourceColumn) => {
                     @clear="clearFilter"
                     @update:value="onFilterInput" />
             </div>
-            <div class="flex-item-expand"></div>
+            <div class="tb2-extra-info flex-item-expand">
+                <n-tag size="large">{{ $t('interface.total', { size: props.size }) }}</n-tag>
+            </div>
             <n-button plain :focusable="false" @click="onAddValue">
                 <template #icon>
                     <n-icon :component="AddLink" size="18" />

frontend/src/components/content_value/ContentValueStream.vue

@@ -20,6 +20,7 @@ const props = defineProps({
         default: -1,
     },
     value: Object,
+    size: Number,
 })
 
 const filterOption = [
@@ -170,7 +171,9 @@ const onUpdateFilter = (filters, sourceColumn) => {
                         @update:value="onFilterInput" />
                 </n-input-group>
             </div>
-            <div class="flex-item-expand"></div>
+            <div class="tb2-extra-info flex-item-expand">
+                <n-tag size="large">{{ $t('interface.total', { size: props.size }) }}</n-tag>
+            </div>
             <n-button plain :focusable="false" @click="onAddRow">
                 <template #icon>
                     <n-icon :component="AddLink" size="18" />

frontend/src/components/content_value/ContentValueString.vue

@@ -27,6 +27,7 @@ const props = defineProps({
         default: -1,
     },
     value: String,
+    size: Number,
 })
 
 const viewOption = computed(() =>

frontend/src/components/content_value/ContentValueZSet.vue

@@ -20,6 +20,7 @@ const props = defineProps({
         default: -1,
     },
     value: Object,
+    size: Number,
 })
 
 const filterOption = [
@@ -288,7 +289,9 @@ const onUpdateFilter = (filters, sourceColumn) => {
                     </n-tooltip>
                 </n-input-group>
             </div>
-            <div class="flex-item-expand"></div>
+            <div class="tb2-extra-info flex-item-expand">
+                <n-tag size="large">{{ $t('interface.total', { size: props.size }) }}</n-tag>
+            </div>
             <n-button plain :focusable="false" @click="onAddRow">
                 <template #icon>
                     <n-icon :component="AddLink" size="18" />

frontend/src/components/sidebar/BrowserTree.vue

@@ -4,7 +4,7 @@ import { ConnectionType } from '@/consts/connection_type.js'
 import { NIcon, NSpace, NTag } from 'naive-ui'
 import Key from '@/components/icons/Key.vue'
 import ToggleDb from '@/components/icons/ToggleDb.vue'
-import { find, get, includes, indexOf, isEmpty, remove } from 'lodash'
+import { find, get, includes, indexOf, isEmpty, pull, remove, size } from 'lodash'
 import { useI18n } from 'vue-i18n'
 import Refresh from '@/components/icons/Refresh.vue'
 import CopyLink from '@/components/icons/CopyLink.vue'
@@ -300,14 +300,24 @@ const onUpdateExpanded = (value, option, meta) => {
     if (!meta.node) {
         return
     }
-    // console.log(JSON.stringify(meta))
+
-    switch (meta.action) {
+    // keep expand or collapse children while they own more than 1 child
-        case 'expand':
+    let node = meta.node
-            meta.node.expanded = true
+    while (node != null && size(node.children) === 1) {
-            break
+        const key = node.children[0].key
-        case 'collapse':
+        switch (meta.action) {
-            meta.node.expanded = false
+            case 'expand':
-            break
+                node.expanded = true
+                if (!includes(expandedKeys.value, key)) {
+                    expandedKeys.value.push(key)
+                }
+                break
+            case 'collapse':
+                node.expanded = false
+                remove(expandedKeys.value, (v) => v === key)
+                break
+        }
+        node = node.children[0]
     }
 }
 

frontend/src/langs/en.json

@@ -87,7 +87,8 @@
     "empty_server_list": "No redis server",
     "action": "Action",
     "type": "Type",
-    "score": "Score"
+    "score": "Score",
+    "total": "Length: {size}"
   },
   "ribbon": {
     "server": "Server",

frontend/src/langs/zh-cn.json

@@ -87,7 +87,8 @@
     "empty_server_list": "还没添加Redis服务器",
     "action": "操作",
     "type": "类型",
-    "score": "分值"
+    "score": "分值",
+    "total": "总数：{size}"
   },
   "ribbon": {
     "server": "服务器",

frontend/src/stores/connections.js

@@ -532,7 +532,7 @@ const useConnectionStore = defineStore('connections', {
                 if (!isEmpty(key)) {
                     const { data, success, msg } = await GetKeyValue(server, db, key)
                     if (success) {
-                        const { type, ttl, value } = data
+                        const { type, ttl, value, size } = data
                         tab.upsertTab({
                             server,
                             db,
@@ -540,6 +540,7 @@ const useConnectionStore = defineStore('connections', {
                             ttl,
                             key,
                             value,
+                            size,
                         })
                         return
                     } else {
@@ -555,6 +556,7 @@ const useConnectionStore = defineStore('connections', {
                     ttl: -1,
                     key: null,
                     value: null,
+                    size: 0,
                 })
             } finally {
             }
@@ -747,10 +749,10 @@ const useConnectionStore = defineStore('connections', {
          */
         _tidyNode(connName, db, key, skipResort) {
             const nodeMap = this._getNodeMap(connName, db)
+            const dbNode = get(this.databases, [connName, db], {})
             const separator = this._getSeparator(connName)
             const keyParts = split(key, separator)
             const totalParts = size(keyParts)
-            const dbNode = get(this.databases, [connName, db], {})
             let node
             // find last exists ancestor key
             let i = totalParts - 1
@@ -1250,7 +1252,7 @@ const useConnectionStore = defineStore('connections', {
          *
          * @param {string} connName
          * @param {number} db
-         * @param {string} key
+         * @param {string} [key]
          * @param {boolean} [isLayer]
          * @private
          */
@@ -1263,46 +1265,52 @@ const useConnectionStore = defineStore('connections', {
             }
 
             const nodeMap = this._getNodeMap(connName, db)
-            const keyParts = split(key, separator)
-            const totalParts = size(keyParts)
             if (isLayer === true) {
                 this._deleteChildrenKeyNodes(nodeMap, key)
             }
-            // remove from parent in tree node
+            if (isEmpty(key)) {
-            const parentKey = slice(keyParts, 0, totalParts - 1)
+                // clear all key nodes
-            let parentNode
+                dbRoot.children = []
-            if (isEmpty(parentKey)) {
+                dbRoot.keys = 0
-                parentNode = dbRoot
             } else {
-                parentNode = nodeMap.get(`${ConnectionType.RedisKey}/${join(parentKey, separator)}`)
+                const keyParts = split(key, separator)
-            }
+                const totalParts = size(keyParts)
-
+                // remove from parent in tree node
-            // not found parent node
+                const parentKey = slice(keyParts, 0, totalParts - 1)
-            if (parentNode == null) {
+                let parentNode
-                return false
+                if (isEmpty(parentKey)) {
-            }
+                    parentNode = dbRoot
-            remove(parentNode.children, {
-                type: isLayer ? ConnectionType.RedisKey : ConnectionType.RedisValue,
-                redisKey: key,
-            })
-
-            // check and remove empty layer node
-            let i = totalParts - 1
-            for (; i >= 0; i--) {
-                const anceKey = join(slice(keyParts, 0, i), separator)
-                if (i > 0) {
-                    const anceNode = nodeMap.get(`${ConnectionType.RedisKey}/${anceKey}`)
-                    const redisKey = join(slice(keyParts, 0, i + 1), separator)
-                    remove(anceNode.children, { type: ConnectionType.RedisKey, redisKey })
-
-                    if (isEmpty(anceNode.children)) {
-                        nodeMap.delete(`${ConnectionType.RedisKey}/${anceKey}`)
-                    } else {
-                        break
-                    }
                 } else {
-                    // last one, remove from db node
+                    parentNode = nodeMap.get(`${ConnectionType.RedisKey}/${join(parentKey, separator)}`)
-                    remove(dbRoot.children, { type: ConnectionType.RedisKey, redisKey: keyParts[0] })
+                }
+
+                // not found parent node
+                if (parentNode == null) {
+                    return false
+                }
+                remove(parentNode.children, {
+                    type: isLayer ? ConnectionType.RedisKey : ConnectionType.RedisValue,
+                    redisKey: key,
+                })
+
+                // check and remove empty layer node
+                let i = totalParts - 1
+                for (; i >= 0; i--) {
+                    const anceKey = join(slice(keyParts, 0, i), separator)
+                    if (i > 0) {
+                        const anceNode = nodeMap.get(`${ConnectionType.RedisKey}/${anceKey}`)
+                        const redisKey = join(slice(keyParts, 0, i + 1), separator)
+                        remove(anceNode.children, { type: ConnectionType.RedisKey, redisKey })
+
+                        if (isEmpty(anceNode.children)) {
+                            nodeMap.delete(`${ConnectionType.RedisKey}/${anceKey}`)
+                        } else {
+                            break
+                        }
+                    } else {
+                        // last one, remove from db node
+                        remove(dbRoot.children, { type: ConnectionType.RedisKey, redisKey: keyParts[0] })
+                    }
                 }
             }
 
@@ -1311,24 +1319,28 @@ const useConnectionStore = defineStore('connections', {
 
         /**
          * delete node and all it's children from nodeMap
-         * @param nodeMap
+         * @param {Map<string, DatabaseItem>} nodeMap
-         * @param key
+         * @param {string} [key] clean nodeMap if key is empty
          * @private
          */
         _deleteChildrenKeyNodes(nodeMap, key) {
-            const mapKey = `${ConnectionType.RedisKey}/${key}`
+            if (isEmpty(key)) {
-            const node = nodeMap.get(mapKey)
+                nodeMap.clear()
-            for (const child of node.children || []) {
+            } else {
-                if (child.type === ConnectionType.RedisValue) {
+                const mapKey = `${ConnectionType.RedisKey}/${key}`
-                    if (!nodeMap.delete(`${ConnectionType.RedisValue}/${child.redisKey}`)) {
+                const node = nodeMap.get(mapKey)
-                        console.warn('delete:', `${ConnectionType.RedisValue}/${child.redisKey}`)
+                for (const child of node.children || []) {
+                    if (child.type === ConnectionType.RedisValue) {
+                        if (!nodeMap.delete(`${ConnectionType.RedisValue}/${child.redisKey}`)) {
+                            console.warn('delete:', `${ConnectionType.RedisValue}/${child.redisKey}`)
+                        }
+                    } else if (child.type === ConnectionType.RedisKey) {
+                        this._deleteChildrenKeyNodes(nodeMap, child.redisKey)
                     }
-                } else if (child.type === ConnectionType.RedisKey) {
-                    this._deleteChildrenKeyNodes(nodeMap, child.redisKey)
                 }
-            }
+                if (!nodeMap.delete(mapKey)) {
-            if (!nodeMap.delete(mapKey)) {
+                    console.warn('delete map key', mapKey)
-                console.warn('delete map key', mapKey)
+                }
             }
         },
 

frontend/src/stores/preferences.js

@@ -31,6 +31,11 @@ const usePreferencesStore = defineStore('preferences', {
      * @returns {Preferences}
      */
     state: () => ({
+        behavior: {
+            asideWidth: 300,
+            windowWidth: 0,
+            windowHeight: 0,
+        },
         general: {
             theme: 'auto',
             language: 'en',
@@ -40,7 +45,6 @@ const usePreferencesStore = defineStore('preferences', {
             useSysProxyHttp: false,
             checkUpdate: false,
             skipVersion: '',
-            asideWidth: 300,
         },
         editor: {
             font: '',
@@ -211,7 +215,12 @@ const usePreferencesStore = defineStore('preferences', {
                 }
                 return result
             }
-            const pf = Object.assign({}, obj2Map('general', this.general), obj2Map('editor', this.editor))
+            const pf = Object.assign(
+                {},
+                obj2Map('behavior', this.behavior),
+                obj2Map('general', this.general),
+                obj2Map('editor', this.editor),
+            )
             const { success, msg } = await SetPreferences(pf)
             return success === true
         },
@@ -241,7 +250,7 @@ const usePreferencesStore = defineStore('preferences', {
         },
 
         setAsideWidth(width) {
-            this.general.asideWidth = width
+            this.behavior.asideWidth = width
         },
 
         async checkForUpdate(manual = false) {

frontend/src/stores/tab.js

@@ -83,9 +83,10 @@ const useTabStore = defineStore('tab', {
          * @param {number} [type]
          * @param {number} [ttl]
          * @param {string} [key]
+         * @param {number} [size]
          * @param {*} [value]
          */
-        upsertTab({ server, db, type, ttl, key, value }) {
+        upsertTab({ server, db, type, ttl, key, size, value }) {
             let tabIndex = findIndex(this.tabList, { name: server })
             if (tabIndex === -1) {
                 this.tabList.push({
@@ -95,6 +96,7 @@ const useTabStore = defineStore('tab', {
                     type,
                     ttl,
                     key,
+                    size,
                     value,
                 })
                 tabIndex = this.tabList.length - 1
@@ -108,6 +110,7 @@ const useTabStore = defineStore('tab', {
             tab.type = type
             tab.ttl = ttl
             tab.key = key
+            tab.size = size
             tab.value = value
             this._setActivatedIndex(tabIndex, true)
             // this.activatedTab = tab.name

frontend/src/styles/style.scss

@@ -86,6 +86,10 @@ body {
     gap: 5px;
     justify-content: flex-end;
     align-items: center;
+
+    .tb2-extra-info {
+      padding: 0 5px;
+    }
   }
 
   .value-wrapper {

main.go

@@ -10,7 +10,9 @@ import (
 	"github.com/wailsapp/wails/v2/pkg/options/linux"
 	"github.com/wailsapp/wails/v2/pkg/options/mac"
 	"github.com/wailsapp/wails/v2/pkg/options/windows"
+	runtime2 "github.com/wailsapp/wails/v2/pkg/runtime"
 	"runtime"
+	"tinyrdm/backend/consts"
 	"tinyrdm/backend/services"
 )
 
@@ -28,6 +30,7 @@ func main() {
 	connSvc := services.Connection()
 	prefSvc := services.Preferences()
 	prefSvc.SetAppVersion(version)
+	windowWidth, windowHeight := prefSvc.GetWindowSize()
 
 	// menu
 	appMenu := menu.NewMenu()
@@ -40,10 +43,10 @@ func main() {
 	// Create application with options
 	err := wails.Run(&options.App{
 		Title:     "Tiny RDM",
-		Width:     1024,
+		Width:     windowWidth,
-		Height:    768,
+		Height:    windowHeight,
-		MinWidth:  1024,
+		MinWidth:  consts.DEFAULT_WINDOW_WIDTH,
-		MinHeight: 768,
+		MinHeight: consts.DEFAULT_WINDOW_HEIGHT,
 		Frameless: runtime.GOOS != "darwin",
 		Menu:      appMenu,
 		AssetServer: &assetserver.Options{
@@ -55,6 +58,12 @@ func main() {
 			connSvc.Start(ctx)
 		},
 		OnShutdown: func(ctx context.Context) {
+			// save current window size
+			width, height := runtime2.WindowGetSize(ctx)
+			if width > 0 && height > 0 {
+				prefSvc.SaveWindowSize(width, height)
+			}
+
 			connSvc.Stop(ctx)
 		},
 		Bind: []interface{}{