refactor: split connection_service into connection_service and browser_service in go

refactor: split connectionStore into connectionStore and browserStore in js

backend/utils/string/common.go

@@ -14,7 +14,7 @@ func containsBinary(str string) bool {
 	//}
 	rs := []rune(str)
 	for _, r := range rs {
-		if !unicode.IsPrint(r) {
+		if !unicode.IsPrint(r) && r != '\n' {
 			return true
 		}
 	}

frontend/src/AppContent.vue

@@ -9,7 +9,6 @@ import ConnectionPane from './components/sidebar/ConnectionPane.vue'
 import ContentServerPane from './components/content/ContentServerPane.vue'
 import useTabStore from './stores/tab.js'
 import usePreferencesStore from './stores/preferences.js'
-import useConnectionStore from './stores/connections.js'
 import ContentLogPane from './components/content/ContentLogPane.vue'
 import ContentValueTab from '@/components/content/ContentValueTab.vue'
 import ToolbarControlWidget from '@/components/common/ToolbarControlWidget.vue'
@@ -32,7 +31,6 @@ const data = reactive({
 
 const tabStore = useTabStore()
 const prefStore = usePreferencesStore()
-const connectionStore = useConnectionStore()
 const logPaneRef = ref(null)
 const exThemeVars = computed(() => {
     return extraTheme(prefStore.isDark)

frontend/src/components/content/ContentLogPane.vue

@@ -2,16 +2,16 @@
 import { computed, h, nextTick, reactive, ref } from 'vue'
 import IconButton from '@/components/common/IconButton.vue'
 import Refresh from '@/components/icons/Refresh.vue'
-import useConnectionStore from 'stores/connections.js'
 import { map, size, split, uniqBy } from 'lodash'
 import { useI18n } from 'vue-i18n'
 import Delete from '@/components/icons/Delete.vue'
 import dayjs from 'dayjs'
 import { useThemeVars } from 'naive-ui'
+import useBrowserStore from 'stores/browser.js'
 
 const themeVars = useThemeVars()
 
-const connectionStore = useConnectionStore()
+const browserStore = useBrowserStore()
 const i18n = useI18n()
 const data = reactive({
     loading: false,
@@ -36,7 +36,7 @@ const tableRef = ref(null)
 
 const loadHistory = () => {
     data.loading = true
-    connectionStore
+    browserStore
         .getCmdHistory()
         .then((list) => {
             data.history = list || []
@@ -50,7 +50,7 @@ const loadHistory = () => {
 const cleanHistory = async () => {
     $dialog.warning(i18n.t('log.confirm_clean_log'), () => {
         data.loading = true
-        connectionStore
+        browserStore
             .cleanCmdHistory()
             .then((success) => {
                 if (success) {

frontend/src/components/content/ContentValueTab.vue

@@ -8,6 +8,7 @@ import { useThemeVars } from 'naive-ui'
 import useConnectionStore from 'stores/connections.js'
 import { extraTheme } from '@/utils/extra_theme.js'
 import usePreferencesStore from 'stores/preferences.js'
+import useBrowserStore from 'stores/browser.js'
 
 /**
  * Value content tab on head
@@ -17,13 +18,14 @@ const themeVars = useThemeVars()
 const i18n = useI18n()
 const tabStore = useTabStore()
 const connectionStore = useConnectionStore()
+const browserStore = useBrowserStore()
 const prefStore = usePreferencesStore()
 
 const onCloseTab = (tabIndex) => {
     const tab = get(tabStore.tabs, tabIndex)
     if (tab != null) {
         $dialog.warning(i18n.t('dialogue.close_confirm', { name: tab.name }), () => {
-            connectionStore.closeConnection(tab.name)
+            browserStore.closeConnection(tab.name)
         })
     }
 }

frontend/src/components/content_value/ContentServerStatus.vue

@@ -4,13 +4,13 @@ import { computed, onMounted, onUnmounted, ref } from 'vue'
 import IconButton from '@/components/common/IconButton.vue'
 import Filter from '@/components/icons/Filter.vue'
 import Refresh from '@/components/icons/Refresh.vue'
-import useConnectionStore from 'stores/connections.js'
+import useBrowserStore from 'stores/browser.js'
 
 const props = defineProps({
     server: String,
 })
 
-const connectionStore = useConnectionStore()
+const browserStore = useBrowserStore()
 const serverInfo = ref({})
 const autoRefresh = ref(false)
 const loading = ref(false) // loading status for refresh
@@ -27,9 +27,9 @@ const refreshInfo = async (force) => {
     } else {
         autoLoading.value = true
     }
-    if (!isEmpty(props.server) && connectionStore.isConnected(props.server)) {
+    if (!isEmpty(props.server) && browserStore.isConnected(props.server)) {
         try {
-            serverInfo.value = await connectionStore.getServerInfo(props.server)
+            serverInfo.value = await browserStore.getServerInfo(props.server)
         } finally {
             loading.value = false
             autoLoading.value = false

frontend/src/components/content_value/ContentSlog.vue

@@ -1,15 +1,15 @@
 <script setup>
 import { h, onMounted, onUnmounted, reactive, ref } from 'vue'
 import Refresh from '@/components/icons/Refresh.vue'
-import useConnectionStore from 'stores/connections.js'
 import { debounce, isEmpty, map, size, split } from 'lodash'
 import { useI18n } from 'vue-i18n'
 import dayjs from 'dayjs'
 import { useThemeVars } from 'naive-ui'
+import useBrowserStore from 'stores/browser.js'
 
 const themeVars = useThemeVars()
 
-const connectionStore = useConnectionStore()
+const browserStore = useBrowserStore()
 const i18n = useI18n()
 const props = defineProps({
     server: {
@@ -35,7 +35,7 @@ const tableRef = ref(null)
 
 const _loadSlowLog = () => {
     data.loading = true
-    connectionStore
+    browserStore
         .getSlowLog(props.server, props.db, data.listLimit)
         .then((list) => {
             data.list = list || []
@@ -180,10 +180,10 @@ const onListLimitChanged = (limit) => {
                         },
                     },
                 ]"
-                @update:sorter="({ order }) => (data.sortOrder = order)"
                 :data="data.list"
                 class="flex-item-expand"
-                flex-height />
+                flex-height
+                @update:sorter="({ order }) => (data.sortOrder = order)" />
         </div>
     </n-card>
 </template>

frontend/src/components/content_value/ContentToolbar.vue

@@ -8,12 +8,12 @@ import Timer from '@/components/icons/Timer.vue'
 import RedisTypeTag from '@/components/common/RedisTypeTag.vue'
 import { useI18n } from 'vue-i18n'
 import IconButton from '@/components/common/IconButton.vue'
-import useConnectionStore from 'stores/connections.js'
 import Copy from '@/components/icons/Copy.vue'
 import { ClipboardSetText } from 'wailsjs/runtime/runtime.js'
 import { computed } from 'vue'
 import { isEmpty, padStart } from 'lodash'
 import { decodeTypes, formatTypes } from '@/consts/value_view_type.js'
+import useBrowserStore from 'stores/browser.js'
 
 const props = defineProps({
     server: String,
@@ -45,7 +45,7 @@ const props = defineProps({
 })
 
 const dialogStore = useDialog()
-const connectionStore = useConnectionStore()
+const browserStore = useBrowserStore()
 const i18n = useI18n()
 
 const binaryKey = computed(() => {
@@ -78,7 +78,7 @@ const ttlString = computed(() => {
 })
 
 const onReloadKey = () => {
-    connectionStore.loadKeyValue(props.server, props.db, keyName.value, props.viewAs, props.decode)
+    browserStore.loadKeyValue(props.server, props.db, keyName.value, props.viewAs, props.decode)
 }
 
 const onCopyKey = () => {
@@ -103,7 +103,7 @@ const onRenameKey = () => {
 
 const onDeleteKey = () => {
     $dialog.warning(i18n.t('dialogue.remove_tip', { name: props.keyPath }), () => {
-        connectionStore.deleteKey(props.server, props.db, keyName.value).then((success) => {
+        browserStore.deleteKey(props.server, props.db, keyName.value).then((success) => {
             if (success) {
                 $message.success(i18n.t('dialogue.delete_key_succ', { key: props.keyPath }))
             }

frontend/src/components/content_value/ContentValueHash.vue

@@ -7,10 +7,10 @@ import { NButton, NCode, NIcon, NInput, useThemeVars } from 'naive-ui'
 import { types, types as redisTypes } from '@/consts/support_redis_type.js'
 import EditableTableColumn from '@/components/common/EditableTableColumn.vue'
 import useDialogStore from 'stores/dialog.js'
-import useConnectionStore from 'stores/connections.js'
 import { isEmpty } from 'lodash'
 import bytes from 'bytes'
 import { decodeTypes, formatTypes } from '@/consts/value_view_type.js'
+import useBrowserStore from 'stores/browser.js'
 
 const i18n = useI18n()
 const themeVars = useThemeVars()
@@ -60,7 +60,7 @@ const filterOption = [
 ]
 const filterType = ref(1)
 
-const connectionStore = useConnectionStore()
+const browserStore = useBrowserStore()
 const dialogStore = useDialogStore()
 const keyType = redisTypes.HASH
 const currentEditRow = ref({
@@ -142,14 +142,14 @@ const actionColumn = {
             },
             onDelete: async () => {
                 try {
-                    const { success, msg } = await connectionStore.removeHashField(
+                    const { success, msg } = await browserStore.removeHashField(
                         props.name,
                         props.db,
                         keyName.value,
                         row.key,
                     )
                     if (success) {
-                        connectionStore.loadKeyValue(props.name, props.db, keyName.value).then((r) => {})
+                        browserStore.loadKeyValue(props.name, props.db, keyName.value).then((r) => {})
                         $message.success(i18n.t('dialogue.delete_key_succ', { key: row.key }))
                         // update display value
                         // if (!isEmpty(removed)) {
@@ -166,7 +166,7 @@ const actionColumn = {
             },
             onSave: async () => {
                 try {
-                    const { success, msg } = await connectionStore.setHash(
+                    const { success, msg } = await browserStore.setHash(
                         props.name,
                         props.db,
                         keyName.value,
@@ -175,7 +175,7 @@ const actionColumn = {
                         currentEditRow.value.value,
                     )
                     if (success) {
-                        connectionStore.loadKeyValue(props.name, props.db, keyName.value).then((r) => {})
+                        browserStore.loadKeyValue(props.name, props.db, keyName.value).then((r) => {})
                         $message.success(i18n.t('dialogue.save_value_succ'))
                         // update display value
                         // if (!isEmpty(updated)) {

frontend/src/components/content_value/ContentValueList.vue

@@ -8,9 +8,9 @@ import { isEmpty, size } from 'lodash'
 import { types, types as redisTypes } from '@/consts/support_redis_type.js'
 import EditableTableColumn from '@/components/common/EditableTableColumn.vue'
 import useDialogStore from 'stores/dialog.js'
-import useConnectionStore from 'stores/connections.js'
 import bytes from 'bytes'
 import { decodeTypes, formatTypes } from '@/consts/value_view_type.js'
+import useBrowserStore from 'stores/browser.js'
 
 const i18n = useI18n()
 const themeVars = useThemeVars()
@@ -48,7 +48,7 @@ const keyName = computed(() => {
     return !isEmpty(props.keyCode) ? props.keyCode : props.keyPath
 })
 
-const connectionStore = useConnectionStore()
+const browserStore = useBrowserStore()
 const dialogStore = useDialogStore()
 const keyType = redisTypes.LIST
 const currentEditRow = ref({
@@ -99,14 +99,14 @@ const actionColumn = {
             },
             onDelete: async () => {
                 try {
-                    const { success, msg } = await connectionStore.removeListItem(
+                    const { success, msg } = await browserStore.removeListItem(
                         props.name,
                         props.db,
                         keyName.value,
                         row.no - 1,
                     )
                     if (success) {
-                        connectionStore.loadKeyValue(props.name, props.db, keyName.value).then((r) => {})
+                        browserStore.loadKeyValue(props.name, props.db, keyName.value).then((r) => {})
                         $message.success(i18n.t('dialogue.delete_key_succ', { key: '#' + row.no }))
                         // update display value
                         // if (!isEmpty(removed)) {
@@ -121,7 +121,7 @@ const actionColumn = {
             },
             onSave: async () => {
                 try {
-                    const { success, msg } = await connectionStore.updateListItem(
+                    const { success, msg } = await browserStore.updateListItem(
                         props.name,
                         props.db,
                         keyName.value,
@@ -129,7 +129,7 @@ const actionColumn = {
                         currentEditRow.value.value,
                     )
                     if (success) {
-                        connectionStore.loadKeyValue(props.name, props.db, keyName.value).then((r) => {})
+                        browserStore.loadKeyValue(props.name, props.db, keyName.value).then((r) => {})
                         $message.success(i18n.t('dialogue.save_value_succ'))
                         // update display value
                         // if (!isEmpty(updated)) {

frontend/src/components/content_value/ContentValueSet.vue

@@ -8,9 +8,9 @@ import { isEmpty, size } from 'lodash'
 import useDialogStore from 'stores/dialog.js'
 import { types, types as redisTypes } from '@/consts/support_redis_type.js'
 import EditableTableColumn from '@/components/common/EditableTableColumn.vue'
-import useConnectionStore from 'stores/connections.js'
 import bytes from 'bytes'
 import { decodeTypes, formatTypes } from '@/consts/value_view_type.js'
+import useBrowserStore from 'stores/browser.js'
 
 const i18n = useI18n()
 const themeVars = useThemeVars()
@@ -48,7 +48,7 @@ const keyName = computed(() => {
     return !isEmpty(props.keyCode) ? props.keyCode : props.keyPath
 })
 
-const connectionStore = useConnectionStore()
+const browserStore = useBrowserStore()
 const dialogStore = useDialogStore()
 const keyType = redisTypes.SET
 const currentEditRow = ref({
@@ -100,14 +100,14 @@ const actionColumn = {
             },
             onDelete: async () => {
                 try {
-                    const { success, msg } = await connectionStore.removeSetItem(
+                    const { success, msg } = await browserStore.removeSetItem(
                         props.name,
                         props.db,
                         keyName.value,
                         row.value,
                     )
                     if (success) {
-                        connectionStore.loadKeyValue(props.name, props.db, keyName.value).then((r) => {})
+                        browserStore.loadKeyValue(props.name, props.db, keyName.value).then((r) => {})
                         $message.success(i18n.t('dialogue.delete_key_succ', { key: row.value }))
                         // update display value
                         // props.value.splice(row.no - 1, 1)
@@ -120,7 +120,7 @@ const actionColumn = {
             },
             onSave: async () => {
                 try {
-                    const { success, msg } = await connectionStore.updateSetItem(
+                    const { success, msg } = await browserStore.updateSetItem(
                         props.name,
                         props.db,
                         keyName.value,
@@ -128,7 +128,7 @@ const actionColumn = {
                         currentEditRow.value.value,
                     )
                     if (success) {
-                        connectionStore.loadKeyValue(props.name, props.db, keyName.value).then((r) => {})
+                        browserStore.loadKeyValue(props.name, props.db, keyName.value).then((r) => {})
                         $message.success(i18n.t('dialogue.save_value_succ'))
                         // update display value
                         // props.value[row.no - 1] = currentEditRow.value.value

frontend/src/components/content_value/ContentValueStream.vue

@@ -7,10 +7,10 @@ import { NButton, NCode, NIcon, NInput, useThemeVars } from 'naive-ui'
 import { types, types as redisTypes } from '@/consts/support_redis_type.js'
 import EditableTableColumn from '@/components/common/EditableTableColumn.vue'
 import useDialogStore from 'stores/dialog.js'
-import useConnectionStore from 'stores/connections.js'
 import { includes, isEmpty, keys, some, values } from 'lodash'
 import bytes from 'bytes'
 import { decodeTypes, formatTypes } from '@/consts/value_view_type.js'
+import useBrowserStore from 'stores/browser.js'
 
 const i18n = useI18n()
 const themeVars = useThemeVars()
@@ -60,7 +60,7 @@ const filterOption = [
 ]
 const filterType = ref(1)
 
-const connectionStore = useConnectionStore()
+const browserStore = useBrowserStore()
 const dialogStore = useDialogStore()
 const keyType = redisTypes.STREAM
 const idColumn = reactive({
@@ -108,14 +108,14 @@ const actionColumn = {
             readonly: true,
             onDelete: async () => {
                 try {
-                    const { success, msg } = await connectionStore.removeStreamValues(
+                    const { success, msg } = await browserStore.removeStreamValues(
                         props.name,
                         props.db,
                         keyName.value,
                         row.id,
                     )
                     if (success) {
-                        connectionStore.loadKeyValue(props.name, props.db, keyName.value).then((r) => {})
+                        browserStore.loadKeyValue(props.name, props.db, keyName.value).then((r) => {})
                         $message.success(i18n.t('dialogue.delete_key_succ', { key: row.id }))
                         // update display value
                         // if (!isEmpty(removed)) {

frontend/src/components/content_value/ContentValueString.vue

@@ -10,12 +10,12 @@ import Close from '@/components/icons/Close.vue'
 import { types as redisTypes } from '@/consts/support_redis_type.js'
 import { ClipboardSetText } from 'wailsjs/runtime/runtime.js'
 import { isEmpty, toLower } from 'lodash'
-import useConnectionStore from 'stores/connections.js'
 import DropdownSelector from '@/components/content_value/DropdownSelector.vue'
 import Code from '@/components/icons/Code.vue'
 import Conversion from '@/components/icons/Conversion.vue'
 import EditFile from '@/components/icons/EditFile.vue'
 import bytes from 'bytes'
+import useBrowserStore from 'stores/browser.js'
 
 const i18n = useI18n()
 const themeVars = useThemeVars()
@@ -74,11 +74,11 @@ const viewLanguage = computed(() => {
 })
 
 const onViewTypeUpdate = (viewType) => {
-    connectionStore.loadKeyValue(props.name, props.db, keyName.value, viewType, props.decode)
+    browserStore.loadKeyValue(props.name, props.db, keyName.value, viewType, props.decode)
 }
 
 const onDecodeTypeUpdate = (decodeType) => {
-    connectionStore.loadKeyValue(props.name, props.db, keyName.value, props.viewAs, decodeType)
+    browserStore.loadKeyValue(props.name, props.db, keyName.value, props.viewAs, decodeType)
 }
 
 /**
@@ -110,12 +110,12 @@ const onCancelEdit = () => {
 /**
  * Save value
  */
-const connectionStore = useConnectionStore()
+const browserStore = useBrowserStore()
 const saving = ref(false)
 const onSaveValue = async () => {
     saving.value = true
     try {
-        const { success, msg } = await connectionStore.setKey(
+        const { success, msg } = await browserStore.setKey(
             props.name,
             props.db,
             keyName.value,
@@ -126,7 +126,7 @@ const onSaveValue = async () => {
             props.decode,
         )
         if (success) {
-            await connectionStore.loadKeyValue(props.name, props.db, keyName.value)
+            await browserStore.loadKeyValue(props.name, props.db, keyName.value)
             $message.success(i18n.t('dialogue.save_value_succ'))
         } else {
             $message.error(msg)

frontend/src/components/content_value/ContentValueWrapper.vue

@@ -8,10 +8,10 @@ import ContentValueSet from '@/components/content_value/ContentValueSet.vue'
 import ContentValueZset from '@/components/content_value/ContentValueZSet.vue'
 import ContentValueStream from '@/components/content_value/ContentValueStream.vue'
 import { useThemeVars } from 'naive-ui'
-import useConnectionStore from 'stores/connections.js'
+import useBrowserStore from 'stores/browser.js'
 
 const themeVars = useThemeVars()
-const connectionStore = useConnectionStore()
+const browserStore = useBrowserStore()
 
 const props = defineProps({
     blank: Boolean,
@@ -54,7 +54,7 @@ const valueComponents = {
  * @returns {Promise<null>}
  */
 const onReloadKey = async () => {
-    await connectionStore.loadKeyValue(props.name, props.db, props.key, props.viewAs)
+    await browserStore.loadKeyValue(props.name, props.db, props.key, props.viewAs)
 }
 </script>
 

frontend/src/components/content_value/ContentValueZSet.vue

@@ -8,9 +8,9 @@ import { types, types as redisTypes } from '@/consts/support_redis_type.js'
 import EditableTableColumn from '@/components/common/EditableTableColumn.vue'
 import { isEmpty } from 'lodash'
 import useDialogStore from 'stores/dialog.js'
-import useConnectionStore from 'stores/connections.js'
 import bytes from 'bytes'
 import { decodeTypes, formatTypes } from '@/consts/value_view_type.js'
+import useBrowserStore from 'stores/browser.js'
 
 const i18n = useI18n()
 const themeVars = useThemeVars()
@@ -60,7 +60,7 @@ const filterOption = [
 ]
 const filterType = ref(1)
 
-const connectionStore = useConnectionStore()
+const browserStore = useBrowserStore()
 const dialogStore = useDialogStore()
 const keyType = redisTypes.ZSET
 const currentEditRow = ref({
@@ -171,14 +171,14 @@ const actionColumn = {
             },
             onDelete: async () => {
                 try {
-                    const { success, msg } = await connectionStore.removeZSetItem(
+                    const { success, msg } = await browserStore.removeZSetItem(
                         props.name,
                         props.db,
                         keyName.value,
                         row.value,
                     )
                     if (success) {
-                        connectionStore.loadKeyValue(props.name, props.db, keyName.value).then((r) => {})
+                        browserStore.loadKeyValue(props.name, props.db, keyName.value).then((r) => {})
                         $message.success(i18n.t('dialogue.delete_key_succ', { key: row.value }))
                     } else {
                         $message.error(msg)
@@ -194,7 +194,7 @@ const actionColumn = {
                         $message.error(i18n.t('dialogue.spec_field_required', { key: i18n.t('common.value') }))
                         return
                     }
-                    const { success, msg } = await connectionStore.updateZSetItem(
+                    const { success, msg } = await browserStore.updateZSetItem(
                         props.name,
                         props.db,
                         keyName.value,
@@ -203,7 +203,7 @@ const actionColumn = {
                         currentEditRow.value.score,
                     )
                     if (success) {
-                        connectionStore.loadKeyValue(props.name, props.db, keyName.value).then((r) => {})
+                        browserStore.loadKeyValue(props.name, props.db, keyName.value).then((r) => {})
                         $message.success(i18n.t('dialogue.save_value_succ'))
                     } else {
                         $message.error(msg)

frontend/src/components/dialogs/AddFieldsDialog.vue

@@ -8,9 +8,9 @@ import { useI18n } from 'vue-i18n'
 import AddListValue from '@/components/new_value/AddListValue.vue'
 import AddHashValue from '@/components/new_value/AddHashValue.vue'
 import AddZSetValue from '@/components/new_value/AddZSetValue.vue'
-import useConnectionStore from 'stores/connections.js'
 import NewStreamValue from '@/components/new_value/NewStreamValue.vue'
 import { isEmpty, size, slice } from 'lodash'
+import useBrowserStore from 'stores/browser.js'
 
 const i18n = useI18n()
 const newForm = reactive({
@@ -78,7 +78,7 @@ watch(
     },
 )
 
-const connectionStore = useConnectionStore()
+const browserStore = useBrowserStore()
 const onAdd = async () => {
     try {
         const { server, db, key, keyCode, type } = newForm
@@ -92,14 +92,14 @@ const onAdd = async () => {
                 {
                     let data
                     if (newForm.opType === 1) {
-                        data = await connectionStore.prependListItem(server, db, keyName, value)
+                        data = await browserStore.prependListItem(server, db, keyName, value)
                     } else {
-                        data = await connectionStore.appendListItem(server, db, keyName, value)
+                        data = await browserStore.appendListItem(server, db, keyName, value)
                     }
                     const { success, msg } = data
                     if (success) {
                         if (newForm.reload) {
-                            connectionStore.loadKeyValue(server, db, keyName).then(() => {})
+                            browserStore.loadKeyValue(server, db, keyName).then(() => {})
                         }
                         $message.success(i18n.t('dialogue.handle_succ'))
                     } else {
@@ -110,16 +110,10 @@ const onAdd = async () => {
 
             case types.HASH:
                 {
-                    const { success, msg } = await connectionStore.addHashField(
+                    const { success, msg } = await browserStore.addHashField(server, db, keyName, newForm.opType, value)
-                        server,
-                        db,
-                        keyName,
-                        newForm.opType,
-                        value,
-                    )
                     if (success) {
                         if (newForm.reload) {
-                            connectionStore.loadKeyValue(server, db, keyName).then(() => {})
+                            browserStore.loadKeyValue(server, db, keyName).then(() => {})
                         }
                         $message.success(i18n.t('dialogue.handle_succ'))
                     } else {
@@ -130,10 +124,10 @@ const onAdd = async () => {
 
             case types.SET:
                 {
-                    const { success, msg } = await connectionStore.addSetItem(server, db, keyName, value)
+                    const { success, msg } = await browserStore.addSetItem(server, db, keyName, value)
                     if (success) {
                         if (newForm.reload) {
-                            connectionStore.loadKeyValue(server, db, keyName).then(() => {})
+                            browserStore.loadKeyValue(server, db, keyName).then(() => {})
                         }
                         $message.success(i18n.t('dialogue.handle_succ'))
                     } else {
@@ -144,16 +138,10 @@ const onAdd = async () => {
 
             case types.ZSET:
                 {
-                    const { success, msg } = await connectionStore.addZSetItem(
+                    const { success, msg } = await browserStore.addZSetItem(server, db, keyName, newForm.opType, value)
-                        server,
-                        db,
-                        keyName,
-                        newForm.opType,
-                        value,
-                    )
                     if (success) {
                         if (newForm.reload) {
-                            connectionStore.loadKeyValue(server, db, keyName).then(() => {})
+                            browserStore.loadKeyValue(server, db, keyName).then(() => {})
                         }
                         $message.success(i18n.t('dialogue.handle_succ'))
                     } else {
@@ -165,7 +153,7 @@ const onAdd = async () => {
             case types.STREAM:
                 {
                     if (size(value) > 2) {
-                        const { success, msg } = await connectionStore.addStreamValue(
+                        const { success, msg } = await browserStore.addStreamValue(
                             server,
                             db,
                             keyName,
@@ -174,7 +162,7 @@ const onAdd = async () => {
                         )
                         if (success) {
                             if (newForm.reload) {
-                                connectionStore.loadKeyValue(server, db, keyName).then(() => {})
+                                browserStore.loadKeyValue(server, db, keyName).then(() => {})
                             }
                             $message.success(i18n.t('dialogue.handle_succ'))
                         } else {

frontend/src/components/dialogs/ConnectionDialog.vue

@@ -9,6 +9,7 @@ import useConnectionStore from 'stores/connections.js'
 import FileOpenInput from '@/components/common/FileOpenInput.vue'
 import { KeyViewType } from '@/consts/key_view_type.js'
 import { useThemeVars } from 'naive-ui'
+import useBrowserStore from 'stores/browser.js'
 
 /**
  * Dialog for new or edit connection
@@ -17,6 +18,7 @@ import { useThemeVars } from 'naive-ui'
 const themeVars = useThemeVars()
 const dialogStore = useDialog()
 const connectionStore = useConnectionStore()
+const browserStore = useBrowserStore()
 const i18n = useI18n()
 
 const editName = ref('')
@@ -45,7 +47,7 @@ const closingConnection = computed(() => {
     if (isEmpty(editName.value)) {
         return false
     }
-    return connectionStore.isConnected(editName.value)
+    return browserStore.isConnected(editName.value)
 })
 
 const groupOptions = computed(() => {

frontend/src/components/dialogs/DeleteKeyDialog.vue

@@ -2,8 +2,8 @@
 import { reactive, watch } from 'vue'
 import useDialog from 'stores/dialog'
 import { useI18n } from 'vue-i18n'
-import useConnectionStore from 'stores/connections.js'
 import { isEmpty, size } from 'lodash'
+import useBrowserStore from 'stores/browser.js'
 
 const deleteForm = reactive({
     server: '',
@@ -16,7 +16,7 @@ const deleteForm = reactive({
 })
 
 const dialogStore = useDialog()
-const connectionStore = useConnectionStore()
+const browserStore = useBrowserStore()
 watch(
     () => dialogStore.deleteKeyDialogVisible,
     (visible) => {
@@ -36,7 +36,7 @@ watch(
 const scanAffectedKey = async () => {
     try {
         deleteForm.loadingAffected = true
-        const { keys = [] } = await connectionStore.scanKeys(deleteForm.server, deleteForm.db, deleteForm.key)
+        const { keys = [] } = await browserStore.scanKeys(deleteForm.server, deleteForm.db, deleteForm.key)
         deleteForm.affectedKeys = keys || []
         deleteForm.showAffected = true
     } finally {
@@ -53,7 +53,7 @@ const i18n = useI18n()
 const onConfirmDelete = async () => {
     try {
         const { server, db, key, async } = deleteForm
-        const success = await connectionStore.deleteKeyPrefix(server, db, key, async)
+        const success = await browserStore.deleteKeyPrefix(server, db, key, async)
         if (success) {
             $message.success(i18n.t('dialogue.handle_succ'))
         }

frontend/src/components/dialogs/FlushDbDialog.vue

@@ -2,7 +2,7 @@
 import { reactive, watch } from 'vue'
 import useDialog from 'stores/dialog'
 import { useI18n } from 'vue-i18n'
-import useConnectionStore from 'stores/connections.js'
+import useBrowserStore from 'stores/browser.js'
 
 const flushForm = reactive({
     server: '',
@@ -13,7 +13,7 @@ const flushForm = reactive({
 })
 
 const dialogStore = useDialog()
-const connectionStore = useConnectionStore()
+const browserStore = useBrowserStore()
 watch(
     () => dialogStore.flushDBDialogVisible,
     (visible) => {
@@ -31,7 +31,7 @@ const i18n = useI18n()
 const onConfirmFlush = async () => {
     try {
         const { server, db, async } = flushForm
-        const success = await connectionStore.flushDatabase(server, db, async)
+        const success = await browserStore.flushDatabase(server, db, async)
         if (success) {
             $message.success(i18n.t('dialogue.handle_succ'))
         }

frontend/src/components/dialogs/KeyFilterDialog.vue

@@ -2,8 +2,8 @@
 import { computed, reactive, ref, watch } from 'vue'
 import useDialog from 'stores/dialog'
 import { useI18n } from 'vue-i18n'
-import useConnectionStore from 'stores/connections.js'
 import { types } from '@/consts/support_redis_type.js'
+import useBrowserStore from 'stores/browser.js'
 
 const i18n = useI18n()
 const filterForm = reactive({
@@ -39,11 +39,11 @@ watch(
     },
 )
 
-const connectionStore = useConnectionStore()
+const browserStore = useBrowserStore()
 const onConfirm = () => {
     const { server, db, type, pattern } = filterForm
-    connectionStore.setKeyFilter(server, db, pattern, type)
+    browserStore.setKeyFilter(server, db, pattern, type)
-    connectionStore.reopenDatabase(server, db)
+    browserStore.reopenDatabase(server, db)
 }
 
 const onClose = () => {

frontend/src/components/dialogs/NewKeyDialog.vue

@@ -10,10 +10,10 @@ import NewListValue from '@/components/new_value/NewListValue.vue'
 import NewZSetValue from '@/components/new_value/NewZSetValue.vue'
 import NewSetValue from '@/components/new_value/NewSetValue.vue'
 import { useI18n } from 'vue-i18n'
-import useConnectionStore from 'stores/connections.js'
 import { NSpace } from 'naive-ui'
 import useTabStore from 'stores/tab.js'
 import NewStreamValue from '@/components/new_value/NewStreamValue.vue'
+import useBrowserStore from 'stores/browser.js'
 
 const i18n = useI18n()
 const newForm = reactive({
@@ -33,7 +33,7 @@ const formRules = computed(() => {
     }
 })
 const dbOptions = computed(() =>
-    map(keys(connectionStore.databases[newForm.server]), (key) => ({
+    map(keys(browserStore.databases[newForm.server]), (key) => ({
         label: key,
         value: parseInt(key),
     })),
@@ -101,7 +101,7 @@ const renderTypeLabel = (option) => {
     )
 }
 
-const connectionStore = useConnectionStore()
+const browserStore = useBrowserStore()
 const tabStore = useTabStore()
 const onAdd = async () => {
     await newFormRef.value?.validate().catch((err) => {
@@ -117,7 +117,7 @@ const onAdd = async () => {
         if (value == null) {
             value = defaultValue[type]
         }
-        const { success, msg, nodeKey } = await connectionStore.setKey(
+        const { success, msg, nodeKey } = await browserStore.setKey(
             server,
             db,
             key,
@@ -130,7 +130,7 @@ const onAdd = async () => {
         if (success) {
             // select current key
             tabStore.setSelectedKeys(server, nodeKey)
-            connectionStore.loadKeyValue(server, db, key).then(() => {})
+            browserStore.loadKeyValue(server, db, key).then(() => {})
         } else if (!isEmpty(msg)) {
             $message.error(msg)
         }

frontend/src/components/dialogs/RenameKeyDialog.vue

@@ -2,7 +2,7 @@
 import { reactive, watch } from 'vue'
 import useDialog from 'stores/dialog'
 import { useI18n } from 'vue-i18n'
-import useConnectionStore from 'stores/connections.js'
+import useBrowserStore from 'stores/browser.js'
 
 const renameForm = reactive({
     server: '',
@@ -12,7 +12,7 @@ const renameForm = reactive({
 })
 
 const dialogStore = useDialog()
-const connectionStore = useConnectionStore()
+const browserStore = useBrowserStore()
 watch(
     () => dialogStore.renameDialogVisible,
     (visible) => {
@@ -30,9 +30,9 @@ const i18n = useI18n()
 const onRename = async () => {
     try {
         const { server, db, key, newKey } = renameForm
-        const { success, msg } = await connectionStore.renameKey(server, db, key, newKey)
+        const { success, msg } = await browserStore.renameKey(server, db, key, newKey)
         if (success) {
-            await connectionStore.loadKeyValue(server, db, newKey)
+            await browserStore.loadKeyValue(server, db, newKey)
             $message.success(i18n.t('dialogue.handle_succ'))
         } else {
             $message.error(msg)

frontend/src/components/dialogs/SetTtlDialog.vue

@@ -2,9 +2,9 @@
 import { reactive, watch } from 'vue'
 import useDialog from 'stores/dialog'
 import useTabStore from 'stores/tab.js'
-import useConnectionStore from 'stores/connections.js'
 import Binary from '@/components/icons/Binary.vue'
 import { isEmpty } from 'lodash'
+import useBrowserStore from 'stores/browser.js'
 
 const ttlForm = reactive({
     server: '',
@@ -15,7 +15,7 @@ const ttlForm = reactive({
 })
 
 const dialogStore = useDialog()
-const connectionStore = useConnectionStore()
+const browserStore = useBrowserStore()
 const tabStore = useTabStore()
 
 watch(
@@ -51,7 +51,7 @@ const onConfirm = async () => {
             return
         }
         const key = isEmpty(ttlForm.keyCode) ? ttlForm.key : ttlForm.keyCode
-        const success = await connectionStore.setTTL(tab.name, tab.db, key, ttlForm.ttl)
+        const success = await browserStore.setTTL(tab.name, tab.db, key, ttlForm.ttl)
         if (success) {
             tabStore.updateTTL({
                 server: ttlForm.server,

frontend/src/components/sidebar/BrowserPane.vue

@@ -8,7 +8,6 @@ import { get } from 'lodash'
 import Refresh from '@/components/icons/Refresh.vue'
 import useDialogStore from 'stores/dialog.js'
 import { useI18n } from 'vue-i18n'
-import useConnectionStore from 'stores/connections.js'
 import { types } from '@/consts/support_redis_type.js'
 import Search from '@/components/icons/Search.vue'
 import Unlink from '@/components/icons/Unlink.vue'
@@ -24,7 +23,6 @@ const onInfo = () => {
 }
 
 const i18n = useI18n()
-const connectionStore = useConnectionStore()
 const onDisconnect = () => {
     browserTreeRef.value?.handleSelectContextMenu('server_close')
 }
@@ -55,7 +53,7 @@ const filterTypeOptions = computed(() => {
 // const viewType = ref(0)
 // const onSwitchView = (selectView) => {
 //     const { server } = tabStore.currentTab
-//     connectionStore.switchKeyView(server, selectView)
+//     browserStore.switchKeyView(server, selectView)
 // }
 </script>
 

frontend/src/components/sidebar/BrowserTree.vue

@@ -25,6 +25,7 @@ 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'
+import useBrowserStore from 'stores/browser.js'
 
 const props = defineProps({
     server: String,
@@ -37,6 +38,7 @@ const loading = ref(false)
 const loadingConnections = ref(false)
 const expandedKeys = ref([props.server])
 const connectionStore = useConnectionStore()
+const browserStore = useBrowserStore()
 const tabStore = useTabStore()
 const dialogStore = useDialogStore()
 
@@ -53,7 +55,7 @@ const selectedKeys = computed(() => {
 })
 
 const data = computed(() => {
-    const dbs = get(connectionStore.databases, props.server, [])
+    const dbs = get(browserStore.databases, props.server, [])
     return dbs
 })
 
@@ -229,7 +231,7 @@ const handleSelectContextMenu = (key) => {
     if (selectedKey == null) {
         return
     }
-    const node = connectionStore.getNode(selectedKey)
+    const node = browserStore.getNode(selectedKey)
     const { db = 0, key: nodeKey, redisKey: rk = '', redisKeyCode: rkc, label } = node || {}
     const redisKey = rkc || rk
     const redisKeyName = !!rkc ? label : redisKey
@@ -241,23 +243,23 @@ const handleSelectContextMenu = (key) => {
         case 'server_reload':
             expandedKeys.value = [props.server]
             tabStore.setSelectedKeys(props.server)
-            connectionStore.openConnection(props.server, true).then(() => {
+            browserStore.openConnection(props.server, true).then(() => {
                 $message.success(i18n.t('dialogue.reload_succ'))
             })
             break
         case 'server_close':
-            connectionStore.closeConnection(props.server)
+            browserStore.closeConnection(props.server)
             break
         case 'db_open':
             nextTick().then(() => expandKey(nodeKey))
             break
         case 'db_reload':
             resetExpandKey(props.server, db)
-            connectionStore.reopenDatabase(props.server, db)
+            browserStore.reopenDatabase(props.server, db)
             break
         case 'db_close':
             resetExpandKey(props.server, db, true)
-            connectionStore.closeDatabase(props.server, db)
+            browserStore.closeDatabase(props.server, db)
             break
         case 'db_flush':
             dialogStore.openFlushDBDialog(props.server, db)
@@ -267,21 +269,21 @@ const handleSelectContextMenu = (key) => {
             dialogStore.openNewKeyDialog(redisKey, props.server, db)
             break
         case 'db_filter':
-            const { match: pattern, type } = connectionStore.getKeyFilter(props.server, db)
+            const { match: pattern, type } = browserStore.getKeyFilter(props.server, db)
             dialogStore.openKeyFilterDialog(props.server, db, pattern, type)
             break
         // case 'key_reload':
-        //     connectionStore.loadKeys(props.server, db, redisKey)
+        //     browserStore.loadKeys(props.server, db, redisKey)
         //     break
         case 'value_reload':
-            connectionStore.loadKeyValue(props.server, db, redisKey)
+            browserStore.loadKeyValue(props.server, db, redisKey)
             break
         case 'key_remove':
             dialogStore.openDeleteKeyDialog(props.server, db, isEmpty(redisKey) ? '*' : redisKey + ':*')
             break
         case 'value_remove':
             $dialog.warning(i18n.t('dialogue.remove_tip', { name: redisKeyName }), () => {
-                connectionStore.deleteKey(props.server, db, redisKey).then((success) => {
+                browserStore.deleteKey(props.server, db, redisKey).then((success) => {
                     if (success) {
                         $message.success(i18n.t('dialogue.delete_key_succ', { key: redisKeyName }))
                     }
@@ -303,7 +305,7 @@ const handleSelectContextMenu = (key) => {
         case 'db_loadmore':
             if (node != null && !!!node.loading && !!!node.fullLoaded) {
                 node.loading = true
-                connectionStore
+                browserStore
                     .loadMoreKeys(props.server, db)
                     .then((end) => {
                         // fully loaded
@@ -320,7 +322,7 @@ const handleSelectContextMenu = (key) => {
         case 'db_loadall':
             if (node != null && !!!node.loading) {
                 node.loading = true
-                connectionStore
+                browserStore
                     .loadAllKeys(props.server, db)
                     .catch((e) => {
                         $message.error(e.message)
@@ -376,14 +378,14 @@ const onUpdateSelectedKeys = (keys, options) => {
                     const { key, db } = node
                     const redisKey = node.redisKeyCode || node.redisKey
                     if (!includes(selectedKeys.value, key)) {
-                        connectionStore.loadKeyValue(props.server, db, redisKey)
+                        browserStore.loadKeyValue(props.server, db, redisKey)
                     }
                     return
                 }
             }
         }
         // default is load blank key to display server status
-        connectionStore.loadKeyValue(props.server, 0)
+        browserStore.loadKeyValue(props.server, 0)
     } finally {
         tabStore.setSelectedKeys(props.server, keys)
     }
@@ -434,7 +436,7 @@ const renderLabel = ({ option }) => {
             return h('b', {}, { default: () => option.label })
         case ConnectionType.RedisDB:
             const { name: server, db, opened = false } = option
-            let { match: matchPattern, type: typeFilter } = connectionStore.getKeyFilter(server, db)
+            let { match: matchPattern, type: typeFilter } = browserStore.getKeyFilter(server, db)
             const items = []
             if (opened) {
                 items.push(`${option.label} (${option.keys || 0}/${Math.max(option.maxKeys || 0, option.keys || 0)})`)
@@ -457,8 +459,8 @@ const renderLabel = ({ option }) => {
                             },
                             onClose: () => {
                                 // remove type filter
-                                connectionStore.setKeyFilter(server, db, matchPattern)
+                                browserStore.setKeyFilter(server, db, matchPattern)
-                                connectionStore.reopenDatabase(server, db)
+                                browserStore.reopenDatabase(server, db)
                             },
                         },
                         { default: () => typeFilter },
@@ -476,8 +478,8 @@ const renderLabel = ({ option }) => {
                             size: 'small',
                             onClose: () => {
                                 // remove key match pattern
-                                connectionStore.setKeyFilter(server, db, '*', typeFilter)
+                                browserStore.setKeyFilter(server, db, '*', typeFilter)
-                                connectionStore.reopenDatabase(server, db)
+                                browserStore.reopenDatabase(server, db)
                             },
                         },
                         { default: () => matchPattern },
@@ -652,7 +654,7 @@ const onLoadTree = async (node) => {
         case ConnectionType.RedisDB:
             loading.value = true
             try {
-                await connectionStore.openDatabase(props.server, node.db)
+                await browserStore.openDatabase(props.server, node.db)
             } catch (e) {
                 $message.error(e.message)
                 node.isLeaf = undefined

frontend/src/components/sidebar/ConnectionPane.vue

@@ -6,12 +6,10 @@ import AddLink from '@/components/icons/AddLink.vue'
 import IconButton from '@/components/common/IconButton.vue'
 import Filter from '@/components/icons/Filter.vue'
 import ConnectionTree from './ConnectionTree.vue'
-import useConnectionStore from 'stores/connections.js'
 import { ref } from 'vue'
 
 const themeVars = useThemeVars()
 const dialogStore = useDialogStore()
-const connectionStore = useConnectionStore()
 const filterPattern = ref('')
 </script>
 

frontend/src/components/sidebar/ConnectionTree.vue

@@ -19,11 +19,13 @@ import Edit from '@/components/icons/Edit.vue'
 import { hexGammaCorrection, parseHexColor, toHexColor } from '@/utils/rgb.js'
 import IconButton from '@/components/common/IconButton.vue'
 import usePreferencesStore from 'stores/preferences.js'
+import useBrowserStore from 'stores/browser.js'
 
 const themeVars = useThemeVars()
 const i18n = useI18n()
 const connectingServer = ref('')
 const connectionStore = useConnectionStore()
+const browserStore = useBrowserStore()
 const tabStore = useTabStore()
 const prefStore = usePreferencesStore()
 const dialogStore = useDialogStore()
@@ -66,7 +68,7 @@ const menuOptions = {
         },
     ],
     [ConnectionType.Server]: ({ name }) => {
-        const connected = connectionStore.isConnected(name)
+        const connected = browserStore.isConnected(name)
         if (connected) {
             return [
                 {
@@ -192,7 +194,7 @@ const renderPrefix = ({ option }) => {
                 },
             )
         case ConnectionType.Server:
-            const connected = connectionStore.isConnected(option.name)
+            const connected = browserStore.isConnected(option.name)
             const color = getServerMarkColor(option.name)
             const icon = option.cluster === true ? Cluster : Server
             return h(
@@ -265,7 +267,7 @@ const renderSuffix = ({ option }) => {
     if (includes(selectedKeys.value, option.key)) {
         switch (option.type) {
             case ConnectionType.Server:
-                const connected = connectionStore.isConnected(option.name)
+                const connected = browserStore.isConnected(option.name)
                 return renderIconMenu(getServerMenu(connected))
             case ConnectionType.Group:
                 return renderIconMenu(getGroupMenu())
@@ -290,8 +292,8 @@ const onUpdateSelectedKeys = (keys, option) => {
 const openConnection = async (name) => {
     try {
         connectingServer.value = name
-        if (!connectionStore.isConnected(name)) {
+        if (!browserStore.isConnected(name)) {
-            await connectionStore.openConnection(name)
+            await browserStore.openConnection(name)
         }
         // check if connection already canceled before finish open
         if (!isEmpty(connectingServer.value)) {
@@ -388,9 +390,9 @@ const handleSelectContextMenu = (key) => {
             break
         case 'server_edit':
             // ask for close relevant connections before edit
-            if (connectionStore.isConnected(name)) {
+            if (browserStore.isConnected(name)) {
                 $dialog.warning(i18n.t('dialogue.edit_close_confirm'), () => {
-                    connectionStore.closeConnection(name)
+                    browserStore.closeConnection(name)
                     dialogStore.openEditDialog(name)
                 })
             } else {
@@ -404,7 +406,7 @@ const handleSelectContextMenu = (key) => {
             removeConnection(name)
             break
         case 'server_close':
-            connectionStore.closeConnection(name).then((closed) => {
+            browserStore.closeConnection(name).then((closed) => {
                 if (closed) {
                     $message.success(i18n.t('dialogue.handle_succ'))
                 }
@@ -475,7 +477,7 @@ const handleDrop = ({ node, dragNode, dropPosition }) => {
 
 const onCancelOpen = () => {
     if (!isEmpty(connectingServer.value)) {
-        connectionStore.closeConnection(connectingServer.value)
+        browserStore.closeConnection(connectingServer.value)
         connectingServer.value = ''
     }
 }

frontend/src/components/sidebar/NavMenu.vue

@@ -9,10 +9,10 @@ import Config from '@/components/icons/Config.vue'
 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 usePreferencesStore from 'stores/preferences.js'
 import Record from '@/components/icons/Record.vue'
 import { extraTheme } from '@/utils/extra_theme.js'
+import useBrowserStore from 'stores/browser.js'
 
 const themeVars = useThemeVars()
 
@@ -34,7 +34,7 @@ const renderIcon = (icon) => {
     return () => h(NIcon, null, { default: () => h(icon, { strokeWidth: 3 }) })
 }
 
-const connectionStore = useConnectionStore()
+const browserStore = useBrowserStore()
 const i18n = useI18n()
 const menuOptions = computed(() => {
     return [
@@ -42,7 +42,7 @@ const menuOptions = computed(() => {
             label: i18n.t('ribbon.browser'),
             key: 'browser',
             icon: renderIcon(Database),
-            show: connectionStore.anyConnectionOpened,
+            show: browserStore.anyConnectionOpened,
         },
         {
             label: i18n.t('ribbon.server'),

frontend/src/utils/theme.js

@@ -12,6 +12,7 @@ export const themeOverrides = {
         primaryColorSuppl: '#FF6B6B',
         borderRadius: '4px',
         borderRadiusSmall: '3px',
+        heightMedium: '32px',
         lineHeight: 1.5,
         scrollbarWidth: '8px',
         tabColor: '#FFFFFF',

main.go

@@ -29,6 +29,7 @@ func main() {
 	// Create an instance of the app structure
 	sysSvc := services.System()
 	connSvc := services.Connection()
+	browserSvc := services.Browser()
 	cliSvc := services.Cli()
 	prefSvc := services.Preferences()
 	prefSvc.SetAppVersion(version)
@@ -59,6 +60,7 @@ func main() {
 		OnStartup: func(ctx context.Context) {
 			sysSvc.Start(ctx)
 			connSvc.Start(ctx)
+			browserSvc.Start(ctx)
 			cliSvc.Start(ctx)
 
 			services.GA().SetSecretKey(gaMeasurementID, gaSecretKey)
@@ -68,12 +70,13 @@ func main() {
 			runtime2.WindowShow(ctx)
 		},
 		OnShutdown: func(ctx context.Context) {
-			connSvc.Stop()
+			browserSvc.Stop()
 			cliSvc.CloseAll()
 		},
 		Bind: []interface{}{
 			sysSvc,
 			connSvc,
+			browserSvc,
 			cliSvc,
 			prefSvc,
 		},