diff --git a/.gitignore b/.gitignore
index 59b4e9e..a870df5 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,5 +1,6 @@
 build/bin
 node_modules
 frontend/dist
+frontend/wailsjs
 .vscode
 .idea
diff --git a/build/windows/icon.ico b/build/windows/icon.ico
index 4f9ed85..b58053a 100644
Binary files a/build/windows/icon.ico and b/build/windows/icon.ico differ
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 0685614..7fd662b 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -17,7 +17,7 @@ import useConnectionStore from './stores/connections.js'
 import { useI18n } from 'vue-i18n'
 import { darkTheme, lightTheme, useOsTheme } from 'naive-ui'
 import KeyFilterDialog from './components/dialogs/KeyFilterDialog.vue'
-import { WindowSetDarkTheme, WindowSetLightTheme } from '../wailsjs/runtime/runtime.js'
+import { WindowSetDarkTheme, WindowSetLightTheme } from 'wailsjs/runtime/runtime.js'
 
 hljs.registerLanguage('json', json)
 hljs.registerLanguage('plaintext', plaintext)
diff --git a/frontend/src/assets/images/logo-universal.png b/frontend/src/assets/images/logo-universal.png
deleted file mode 100644
index e9913c1..0000000
Binary files a/frontend/src/assets/images/logo-universal.png and /dev/null differ
diff --git a/frontend/src/components/common/EditableTableColumn.vue b/frontend/src/components/common/EditableTableColumn.vue
index 11d3d41..f0f9ea3 100644
--- a/frontend/src/components/common/EditableTableColumn.vue
+++ b/frontend/src/components/common/EditableTableColumn.vue
@@ -1,9 +1,9 @@
 <script setup>
 import IconButton from './IconButton.vue'
-import Delete from '../icons/Delete.vue'
-import Edit from '../icons/Edit.vue'
-import Close from '../icons/Close.vue'
-import Save from '../icons/Save.vue'
+import Delete from '@/components/icons/Delete.vue'
+import Edit from '@/components/icons/Edit.vue'
+import Close from '@/components/icons/Close.vue'
+import Save from '@/components/icons/Save.vue'
 
 const props = defineProps({
     bindKey: String,
diff --git a/frontend/src/components/common/RedisTypeTag.vue b/frontend/src/components/common/RedisTypeTag.vue
index 6927e8a..037362f 100644
--- a/frontend/src/components/common/RedisTypeTag.vue
+++ b/frontend/src/components/common/RedisTypeTag.vue
@@ -1,6 +1,6 @@
 <script setup>
 import { computed } from 'vue'
-import { typesBgColor, typesColor, validType } from '../../consts/support_redis_type.js'
+import { typesBgColor, typesColor, validType } from '@/consts/support_redis_type.js'
 
 const props = defineProps({
     type: {
diff --git a/frontend/src/components/content/ContentLogPane.vue b/frontend/src/components/content/ContentLogPane.vue
index 3ea2a72..b9f7a63 100644
--- a/frontend/src/components/content/ContentLogPane.vue
+++ b/frontend/src/components/content/ContentLogPane.vue
@@ -1,8 +1,8 @@
 <script setup>
 import { computed, nextTick, onActivated, reactive, ref } from 'vue'
-import IconButton from '../common/IconButton.vue'
-import Refresh from '../icons/Refresh.vue'
-import useConnectionStore from '../../stores/connections.js'
+import IconButton from '@/components/common/IconButton.vue'
+import Refresh from '@/components/icons/Refresh.vue'
+import useConnectionStore from 'stores/connections.js'
 import { map, uniqBy } from 'lodash'
 import { useI18n } from 'vue-i18n'
 import dayjs from 'dayjs'
@@ -132,7 +132,7 @@ onActivated(() => {
 </template>
 
 <style scoped lang="scss">
-@import 'content';
+@import '@/styles/content';
 
 .content-container {
     padding: 5px;
diff --git a/frontend/src/components/content/ContentPane.vue b/frontend/src/components/content/ContentPane.vue
index 1cc07dc..92161cc 100644
--- a/frontend/src/components/content/ContentPane.vue
+++ b/frontend/src/components/content/ContentPane.vue
@@ -1,19 +1,19 @@
 <script setup>
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
-import { types } from '../../consts/support_redis_type.js'
-import ContentValueHash from '../content_value/ContentValueHash.vue'
-import ContentValueList from '../content_value/ContentValueList.vue'
-import ContentValueString from '../content_value/ContentValueString.vue'
-import ContentValueSet from '../content_value/ContentValueSet.vue'
-import ContentValueZset from '../content_value/ContentValueZSet.vue'
+import { types } from '@/consts/support_redis_type.js'
+import ContentValueHash from '@/components/content_value/ContentValueHash.vue'
+import ContentValueList from '@/components/content_value/ContentValueList.vue'
+import ContentValueString from '@/components/content_value/ContentValueString.vue'
+import ContentValueSet from '@/components/content_value/ContentValueSet.vue'
+import ContentValueZset from '@/components/content_value/ContentValueZSet.vue'
 import { get, isEmpty, map, toUpper } from 'lodash'
-import useTabStore from '../../stores/tab.js'
+import useTabStore from 'stores/tab.js'
 import { useDialog } from 'naive-ui'
-import useConnectionStore from '../../stores/connections.js'
+import useConnectionStore from 'stores/connections.js'
 import { useI18n } from 'vue-i18n'
-import { useConfirmDialog } from '../../utils/confirm_dialog.js'
-import ContentServerStatus from '../content_value/ContentServerStatus.vue'
-import ContentValueStream from '../content_value/ContentValueStream.vue'
+import { useConfirmDialog } from '@/utils/confirm_dialog.js'
+import ContentServerStatus from '@/components/content_value/ContentServerStatus.vue'
+import ContentValueStream from '@/components/content_value/ContentValueStream.vue'
 
 const serverInfo = ref({})
 const autoRefresh = ref(false)
@@ -183,7 +183,7 @@ const onCloseTab = (tabIndex) => {
 </template>
 
 <style lang="scss" scoped>
-@import 'content';
+@import '@/styles/content';
 
 .content-container {
     padding: 5px;
diff --git a/frontend/src/components/content/ContentServerPane.vue b/frontend/src/components/content/ContentServerPane.vue
index dc18db5..8a9ca14 100644
--- a/frontend/src/components/content/ContentServerPane.vue
+++ b/frontend/src/components/content/ContentServerPane.vue
@@ -1,6 +1,6 @@
 <script setup>
-import AddLink from '../icons/AddLink.vue'
-import useDialogStore from '../../stores/dialog.js'
+import AddLink from '@/components/icons/AddLink.vue'
+import useDialogStore from 'stores/dialog.js'
 
 const dialogStore = useDialogStore()
 </script>
@@ -22,7 +22,7 @@ const dialogStore = useDialogStore()
 </template>
 
 <style lang="scss" scoped>
-@import 'content';
+@import '@/styles/content';
 
 .content-container {
     justify-content: center;
diff --git a/frontend/src/components/content/ContentValueTab.vue b/frontend/src/components/content/ContentValueTab.vue
index bf3d2b2..5b832dd 100644
--- a/frontend/src/components/content/ContentValueTab.vue
+++ b/frontend/src/components/content/ContentValueTab.vue
@@ -1,8 +1,8 @@
 <script setup>
 import { ref } from 'vue'
-import { ConnectionType } from '../../consts/connection_type.js'
-import Close from '../icons/Close.vue'
-import useConnectionStore from '../../stores/connections.js'
+import { ConnectionType } from '@/consts/connection_type.js'
+import Close from '@/components/icons/Close.vue'
+import useConnectionStore from 'stores/connections.js'
 import { useThemeVars } from 'naive-ui'
 
 const emit = defineEmits(['switchTab', 'closeTab', 'update:modelValue'])
diff --git a/frontend/src/components/content_value/ContentServerStatus.vue b/frontend/src/components/content_value/ContentServerStatus.vue
index 0ae35fe..76ba201 100644
--- a/frontend/src/components/content_value/ContentServerStatus.vue
+++ b/frontend/src/components/content_value/ContentServerStatus.vue
@@ -1,10 +1,10 @@
 <script setup>
 import { get, isEmpty, map, mapValues, pickBy, split, sum, toArray, toNumber } from 'lodash'
 import { computed, ref } from 'vue'
-import Help from '../icons/Help.vue'
-import IconButton from '../common/IconButton.vue'
-import Filter from '../icons/Filter.vue'
-import Refresh from '../icons/Refresh.vue'
+import Help from '@/components/icons/Help.vue'
+import IconButton from '@/components/common/IconButton.vue'
+import Filter from '@/components/icons/Filter.vue'
+import Refresh from '@/components/icons/Refresh.vue'
 
 const props = defineProps({
     server: String,
diff --git a/frontend/src/components/content_value/ContentToolbar.vue b/frontend/src/components/content_value/ContentToolbar.vue
index 88ce51a..3a58f6e 100644
--- a/frontend/src/components/content_value/ContentToolbar.vue
+++ b/frontend/src/components/content_value/ContentToolbar.vue
@@ -1,18 +1,18 @@
 <script setup>
-import { validType } from '../../consts/support_redis_type.js'
-import useDialog from '../../stores/dialog.js'
-import Delete from '../icons/Delete.vue'
-import Edit from '../icons/Edit.vue'
-import Refresh from '../icons/Refresh.vue'
-import Timer from '../icons/Timer.vue'
-import RedisTypeTag from '../common/RedisTypeTag.vue'
+import { validType } from '@/consts/support_redis_type.js'
+import useDialog from 'stores/dialog.js'
+import Delete from '@/components/icons/Delete.vue'
+import Edit from '@/components/icons/Edit.vue'
+import Refresh from '@/components/icons/Refresh.vue'
+import Timer from '@/components/icons/Timer.vue'
+import RedisTypeTag from '@/components/common/RedisTypeTag.vue'
 import { useI18n } from 'vue-i18n'
 import { useMessage } from 'naive-ui'
-import IconButton from '../common/IconButton.vue'
-import useConnectionStore from '../../stores/connections.js'
-import { useConfirmDialog } from '../../utils/confirm_dialog.js'
-import Copy from '../icons/Copy.vue'
-import { ClipboardSetText } from '../../../wailsjs/runtime/runtime.js'
+import IconButton from '@/components/common/IconButton.vue'
+import useConnectionStore from 'stores/connections.js'
+import { useConfirmDialog } from '@/utils/confirm_dialog.js'
+import Copy from '@/components/icons/Copy.vue'
+import { ClipboardSetText } from 'wailsjs/runtime/runtime.js'
 
 const props = defineProps({
     server: String,
diff --git a/frontend/src/components/content_value/ContentValueHash.vue b/frontend/src/components/content_value/ContentValueHash.vue
index cc0ffa4..edb577d 100644
--- a/frontend/src/components/content_value/ContentValueHash.vue
+++ b/frontend/src/components/content_value/ContentValueHash.vue
@@ -2,12 +2,12 @@
 import { computed, h, reactive, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import ContentToolbar from './ContentToolbar.vue'
-import AddLink from '../icons/AddLink.vue'
+import AddLink from '@/components/icons/AddLink.vue'
 import { NButton, NCode, NIcon, NInput, useMessage } from 'naive-ui'
-import { types, types as redisTypes } from '../../consts/support_redis_type.js'
-import EditableTableColumn from '../common/EditableTableColumn.vue'
-import useDialogStore from '../../stores/dialog.js'
-import useConnectionStore from '../../stores/connections.js'
+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'
 
 const i18n = useI18n()
 
@@ -120,7 +120,7 @@ const actionColumn = {
                         props.name,
                         props.db,
                         props.keyPath,
-                        row.key
+                        row.key,
                     )
                     if (success) {
                         connectionStore.loadKeyValue(props.name, props.db, props.keyPath).then((r) => {})
@@ -146,7 +146,7 @@ const actionColumn = {
                         props.keyPath,
                         row.key,
                         currentEditRow.value.key,
-                        currentEditRow.value.value
+                        currentEditRow.value.value,
                     )
                     if (success) {
                         connectionStore.loadKeyValue(props.name, props.db, props.keyPath).then((r) => {})
diff --git a/frontend/src/components/content_value/ContentValueList.vue b/frontend/src/components/content_value/ContentValueList.vue
index e950e9d..c05ec68 100644
--- a/frontend/src/components/content_value/ContentValueList.vue
+++ b/frontend/src/components/content_value/ContentValueList.vue
@@ -2,13 +2,13 @@
 import { computed, h, reactive, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import ContentToolbar from './ContentToolbar.vue'
-import AddLink from '../icons/AddLink.vue'
+import AddLink from '@/components/icons/AddLink.vue'
 import { NButton, NCode, NIcon, NInput, useMessage } from 'naive-ui'
 import { size } from 'lodash'
-import { types, types as redisTypes } from '../../consts/support_redis_type.js'
-import EditableTableColumn from '../common/EditableTableColumn.vue'
-import useDialogStore from '../../stores/dialog.js'
-import useConnectionStore from '../../stores/connections.js'
+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'
 
 const i18n = useI18n()
 
@@ -77,7 +77,7 @@ const actionColumn = {
                         props.name,
                         props.db,
                         props.keyPath,
-                        row.no - 1
+                        row.no - 1,
                     )
                     if (success) {
                         connectionStore.loadKeyValue(props.name, props.db, props.keyPath).then((r) => {})
@@ -100,7 +100,7 @@ const actionColumn = {
                         props.db,
                         props.keyPath,
                         currentEditRow.value.no - 1,
-                        currentEditRow.value.value
+                        currentEditRow.value.value,
                     )
                     if (success) {
                         connectionStore.loadKeyValue(props.name, props.db, props.keyPath).then((r) => {})
diff --git a/frontend/src/components/content_value/ContentValueSet.vue b/frontend/src/components/content_value/ContentValueSet.vue
index 55f126b..b93f5cd 100644
--- a/frontend/src/components/content_value/ContentValueSet.vue
+++ b/frontend/src/components/content_value/ContentValueSet.vue
@@ -2,13 +2,13 @@
 import { computed, h, reactive, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import ContentToolbar from './ContentToolbar.vue'
-import AddLink from '../icons/AddLink.vue'
+import AddLink from '@/components/icons/AddLink.vue'
 import { NButton, NCode, NIcon, NInput, useMessage } from 'naive-ui'
 import { size } from 'lodash'
-import useDialogStore from '../../stores/dialog.js'
-import { types, types as redisTypes } from '../../consts/support_redis_type.js'
-import EditableTableColumn from '../common/EditableTableColumn.vue'
-import useConnectionStore from '../../stores/connections.js'
+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'
 
 const i18n = useI18n()
 const props = defineProps({
@@ -78,7 +78,7 @@ const actionColumn = {
                         props.name,
                         props.db,
                         props.keyPath,
-                        row.value
+                        row.value,
                     )
                     if (success) {
                         connectionStore.loadKeyValue(props.name, props.db, props.keyPath).then((r) => {})
@@ -99,7 +99,7 @@ const actionColumn = {
                         props.db,
                         props.keyPath,
                         row.value,
-                        currentEditRow.value.value
+                        currentEditRow.value.value,
                     )
                     if (success) {
                         connectionStore.loadKeyValue(props.name, props.db, props.keyPath).then((r) => {})
diff --git a/frontend/src/components/content_value/ContentValueStream.vue b/frontend/src/components/content_value/ContentValueStream.vue
index ac7a37e..7cabc9b 100644
--- a/frontend/src/components/content_value/ContentValueStream.vue
+++ b/frontend/src/components/content_value/ContentValueStream.vue
@@ -2,12 +2,12 @@
 import { computed, h, reactive, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import ContentToolbar from './ContentToolbar.vue'
-import AddLink from '../icons/AddLink.vue'
+import AddLink from '@/components/icons/AddLink.vue'
 import { NButton, NCode, NIcon, NInput, useMessage } from 'naive-ui'
-import { types, types as redisTypes } from '../../consts/support_redis_type.js'
-import EditableTableColumn from '../common/EditableTableColumn.vue'
-import useDialogStore from '../../stores/dialog.js'
-import useConnectionStore from '../../stores/connections.js'
+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, keys, some, values } from 'lodash'
 
 const i18n = useI18n()
diff --git a/frontend/src/components/content_value/ContentValueString.vue b/frontend/src/components/content_value/ContentValueString.vue
index 62d7024..7fcfbc0 100644
--- a/frontend/src/components/content_value/ContentValueString.vue
+++ b/frontend/src/components/content_value/ContentValueString.vue
@@ -2,17 +2,18 @@
 import { computed, onMounted, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import ContentToolbar from './ContentToolbar.vue'
-import Copy from '../icons/Copy.vue'
-import Save from '../icons/Save.vue'
+import Copy from '@/components/icons/Copy.vue'
+import Save from '@/components/icons/Save.vue'
 import { useMessage, useThemeVars } from 'naive-ui'
-import { types } from '../../consts/value_view_type.js'
-import Close from '../icons/Close.vue'
-import Edit from '../icons/Edit.vue'
-import { IsJson } from '../../utils/check_string_format.js'
-import { types as redisTypes } from '../../consts/support_redis_type.js'
-import { ClipboardSetText } from '../../../wailsjs/runtime/runtime.js'
+import { types } from '@/consts/value_view_type.js'
+import Close from '@/components/icons/Close.vue'
+import Edit from '@/components/icons/Edit.vue'
+import { IsJson } from '@/utils/check_string_format.js'
+import { types as redisTypes } from '@/consts/support_redis_type.js'
+import { ClipboardSetText } from 'wailsjs/runtime/runtime.js'
 import { toLower } from 'lodash'
-import useConnectionStore from '../../stores/connections.js'
+import useConnectionStore from 'stores/connections.js'
+
 const themeVars = useThemeVars()
 
 const props = defineProps({
@@ -70,7 +71,7 @@ watch(
     () => props.value,
     (value) => {
         autoDetectFormat()
-    }
+    },
 )
 
 const keyType = redisTypes.STRING
@@ -148,7 +149,7 @@ const onSaveValue = async () => {
             props.keyPath,
             toLower(keyType),
             editValue.value,
-            -1
+            -1,
         )
         if (success) {
             await connectionStore.loadKeyValue(props.name, props.db, props.keyPath)
diff --git a/frontend/src/components/content_value/ContentValueZSet.vue b/frontend/src/components/content_value/ContentValueZSet.vue
index d594547..4da189e 100644
--- a/frontend/src/components/content_value/ContentValueZSet.vue
+++ b/frontend/src/components/content_value/ContentValueZSet.vue
@@ -2,13 +2,13 @@
 import { computed, h, reactive, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import ContentToolbar from './ContentToolbar.vue'
-import AddLink from '../icons/AddLink.vue'
+import AddLink from '@/components/icons/AddLink.vue'
 import { NButton, NCode, NIcon, NInput, NInputNumber, useMessage } from 'naive-ui'
-import { types, types as redisTypes } from '../../consts/support_redis_type.js'
-import EditableTableColumn from '../common/EditableTableColumn.vue'
-import { isEmpty, replace } from 'lodash'
-import useDialogStore from '../../stores/dialog.js'
-import useConnectionStore from '../../stores/connections.js'
+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'
 
 const i18n = useI18n()
 
@@ -150,7 +150,7 @@ const actionColumn = {
                         props.name,
                         props.db,
                         props.keyPath,
-                        row.value
+                        row.value,
                     )
                     if (success) {
                         connectionStore.loadKeyValue(props.name, props.db, props.keyPath).then((r) => {})
@@ -175,7 +175,7 @@ const actionColumn = {
                         props.keyPath,
                         row.value,
                         newValue,
-                        currentEditRow.value.score
+                        currentEditRow.value.score,
                     )
                     if (success) {
                         connectionStore.loadKeyValue(props.name, props.db, props.keyPath).then((r) => {})
diff --git a/frontend/src/components/dialogs/AddFieldsDialog.vue b/frontend/src/components/dialogs/AddFieldsDialog.vue
index 16406ec..c6b793c 100644
--- a/frontend/src/components/dialogs/AddFieldsDialog.vue
+++ b/frontend/src/components/dialogs/AddFieldsDialog.vue
@@ -1,16 +1,16 @@
 <script setup>
 import { computed, reactive, watch } from 'vue'
-import { types } from '../../consts/support_redis_type'
-import useDialog from '../../stores/dialog'
-import NewStringValue from '../new_value/NewStringValue.vue'
-import NewSetValue from '../new_value/NewSetValue.vue'
+import { types } from '@/consts/support_redis_type.js'
+import useDialog from 'stores/dialog'
+import NewStringValue from '@/components/new_value/NewStringValue.vue'
+import NewSetValue from '@/components/new_value/NewSetValue.vue'
 import { useI18n } from 'vue-i18n'
 import { useMessage } from 'naive-ui'
-import AddListValue from '../new_value/AddListValue.vue'
-import AddHashValue from '../new_value/AddHashValue.vue'
-import AddZSetValue from '../new_value/AddZSetValue.vue'
-import useConnectionStore from '../../stores/connections.js'
-import NewStreamValue from '../new_value/NewStreamValue.vue'
+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 { size, slice } from 'lodash'
 
 const i18n = useI18n()
diff --git a/frontend/src/components/dialogs/ConnectionDialog.vue b/frontend/src/components/dialogs/ConnectionDialog.vue
index b4da914..2c68214 100644
--- a/frontend/src/components/dialogs/ConnectionDialog.vue
+++ b/frontend/src/components/dialogs/ConnectionDialog.vue
@@ -2,11 +2,11 @@
 import { get, isEmpty, map } from 'lodash'
 import { computed, nextTick, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { TestConnection } from '../../../wailsjs/go/services/connectionService.js'
-import useDialog from '../../stores/dialog'
+import { TestConnection } from 'wailsjs/go/services/connectionService.js'
+import useDialog from 'stores/dialog'
 import { useMessage } from 'naive-ui'
-import Close from '../icons/Close.vue'
-import useConnectionStore from '../../stores/connections.js'
+import Close from '@/components/icons/Close.vue'
+import useConnectionStore from 'stores/connections.js'
 
 /**
  * Dialog for new or edit connection
@@ -110,7 +110,7 @@ watch(
             editName.value = get(dialogStore.connParam, 'name', '')
             generalForm.value = dialogStore.connParam || connectionStore.newDefaultConnection()
         }
-    }
+    },
 )
 
 const onTestConnection = async () => {
diff --git a/frontend/src/components/dialogs/DeleteKeyDialog.vue b/frontend/src/components/dialogs/DeleteKeyDialog.vue
index 975af49..fab4094 100644
--- a/frontend/src/components/dialogs/DeleteKeyDialog.vue
+++ b/frontend/src/components/dialogs/DeleteKeyDialog.vue
@@ -1,9 +1,9 @@
 <script setup>
 import { reactive, watch } from 'vue'
-import useDialog from '../../stores/dialog'
+import useDialog from 'stores/dialog'
 import { useMessage } from 'naive-ui'
 import { useI18n } from 'vue-i18n'
-import useConnectionStore from '../../stores/connections.js'
+import useConnectionStore from 'stores/connections.js'
 import { isEmpty, size } from 'lodash'
 
 const deleteForm = reactive({
@@ -29,7 +29,7 @@ watch(
             deleteForm.loadingAffected = false
             deleteForm.affectedKeys = []
         }
-    }
+    },
 )
 
 const scanAffectedKey = async () => {
diff --git a/frontend/src/components/dialogs/GroupDialog.vue b/frontend/src/components/dialogs/GroupDialog.vue
index 82a891e..d5de5ed 100644
--- a/frontend/src/components/dialogs/GroupDialog.vue
+++ b/frontend/src/components/dialogs/GroupDialog.vue
@@ -1,9 +1,9 @@
 <script setup>
 import { computed, reactive, ref, watch } from 'vue'
-import useDialog from '../../stores/dialog'
+import useDialog from 'stores/dialog'
 import { useMessage } from 'naive-ui'
 import { useI18n } from 'vue-i18n'
-import useConnectionStore from '../../stores/connections.js'
+import useConnectionStore from 'stores/connections.js'
 import { isEmpty } from 'lodash'
 
 /**
@@ -25,7 +25,7 @@ watch(
         if (visible) {
             groupForm.name = editGroup.value = dialogStore.editGroup
         }
-    }
+    },
 )
 
 const i18n = useI18n()
diff --git a/frontend/src/components/dialogs/KeyFilterDialog.vue b/frontend/src/components/dialogs/KeyFilterDialog.vue
index 93d7ba6..3e787e6 100644
--- a/frontend/src/components/dialogs/KeyFilterDialog.vue
+++ b/frontend/src/components/dialogs/KeyFilterDialog.vue
@@ -1,9 +1,9 @@
 <script setup>
 import { computed, reactive, ref, watch } from 'vue'
-import useDialog from '../../stores/dialog'
+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 useConnectionStore from 'stores/connections.js'
+import { types } from '@/consts/support_redis_type.js'
 
 const i18n = useI18n()
 const filterForm = reactive({
@@ -37,7 +37,7 @@ watch(
             filterForm.type = type || ''
             filterForm.pattern = pattern || '*'
         }
-    }
+    },
 )
 
 const connectionStore = useConnectionStore()
diff --git a/frontend/src/components/dialogs/NewKeyDialog.vue b/frontend/src/components/dialogs/NewKeyDialog.vue
index aa43041..47c39d5 100644
--- a/frontend/src/components/dialogs/NewKeyDialog.vue
+++ b/frontend/src/components/dialogs/NewKeyDialog.vue
@@ -1,18 +1,18 @@
 <script setup>
 import { computed, h, reactive, ref, watch } from 'vue'
-import { types, typesColor } from '../../consts/support_redis_type'
-import useDialog from '../../stores/dialog'
+import { types, typesColor } from '@/consts/support_redis_type.js'
+import useDialog from 'stores/dialog'
 import { isEmpty, keys, map } from 'lodash'
-import NewStringValue from '../new_value/NewStringValue.vue'
-import NewHashValue from '../new_value/NewHashValue.vue'
-import NewListValue from '../new_value/NewListValue.vue'
-import NewZSetValue from '../new_value/NewZSetValue.vue'
-import NewSetValue from '../new_value/NewSetValue.vue'
+import NewStringValue from '@/components/new_value/NewStringValue.vue'
+import NewHashValue from '@/components/new_value/NewHashValue.vue'
+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 useConnectionStore from 'stores/connections.js'
 import { NSpace, useMessage } from 'naive-ui'
-import useTabStore from '../../stores/tab.js'
-import NewStreamValue from '../new_value/NewStreamValue.vue'
+import useTabStore from 'stores/tab.js'
+import NewStreamValue from '@/components/new_value/NewStreamValue.vue'
 
 const i18n = useI18n()
 const newForm = reactive({
diff --git a/frontend/src/components/dialogs/PreferencesDialog.vue b/frontend/src/components/dialogs/PreferencesDialog.vue
index c77bce8..d8699d4 100644
--- a/frontend/src/components/dialogs/PreferencesDialog.vue
+++ b/frontend/src/components/dialogs/PreferencesDialog.vue
@@ -1,8 +1,8 @@
 <script setup>
 import { ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
-import useDialog from '../../stores/dialog'
-import usePreferencesStore from '../../stores/preferences.js'
+import useDialog from 'stores/dialog'
+import usePreferencesStore from 'stores/preferences.js'
 import { useMessage } from 'naive-ui'
 
 const prefStore = usePreferencesStore()
diff --git a/frontend/src/components/dialogs/RenameKeyDialog.vue b/frontend/src/components/dialogs/RenameKeyDialog.vue
index efcbb3e..0e33d0a 100644
--- a/frontend/src/components/dialogs/RenameKeyDialog.vue
+++ b/frontend/src/components/dialogs/RenameKeyDialog.vue
@@ -1,9 +1,9 @@
 <script setup>
 import { reactive, watch } from 'vue'
-import useDialog from '../../stores/dialog'
+import useDialog from 'stores/dialog'
 import { useMessage } from 'naive-ui'
 import { useI18n } from 'vue-i18n'
-import useConnectionStore from '../../stores/connections.js'
+import useConnectionStore from 'stores/connections.js'
 
 const renameForm = reactive({
     server: '',
@@ -24,7 +24,7 @@ watch(
             renameForm.key = key
             renameForm.newKey = key
         }
-    }
+    },
 )
 
 const i18n = useI18n()
diff --git a/frontend/src/components/dialogs/SetTtlDialog.vue b/frontend/src/components/dialogs/SetTtlDialog.vue
index 3187db2..0c4f22a 100644
--- a/frontend/src/components/dialogs/SetTtlDialog.vue
+++ b/frontend/src/components/dialogs/SetTtlDialog.vue
@@ -1,8 +1,8 @@
 <script setup>
 import { reactive, ref, watch } from 'vue'
-import useDialog from '../../stores/dialog'
-import useTabStore from '../../stores/tab.js'
-import useConnectionStore from '../../stores/connections.js'
+import useDialog from 'stores/dialog'
+import useTabStore from 'stores/tab.js'
+import useConnectionStore from 'stores/connections.js'
 
 const ttlForm = reactive({
     ttl: -1,
@@ -34,7 +34,7 @@ watch(
                 currentKey.value = tab.key
             }
         }
-    }
+    },
 )
 
 const onClose = () => {
diff --git a/frontend/src/components/new_value/AddHashValue.vue b/frontend/src/components/new_value/AddHashValue.vue
index 84f99bc..98926f6 100644
--- a/frontend/src/components/new_value/AddHashValue.vue
+++ b/frontend/src/components/new_value/AddHashValue.vue
@@ -1,9 +1,9 @@
 <script setup>
 import { ref } from 'vue'
 import { flatMap, reject } from 'lodash'
-import Add from '../icons/Add.vue'
-import Delete from '../icons/Delete.vue'
-import IconButton from '../common/IconButton.vue'
+import Add from '@/components/icons/Add.vue'
+import Delete from '@/components/icons/Delete.vue'
+import IconButton from '@/components/common/IconButton.vue'
 import { useI18n } from 'vue-i18n'
 
 const props = defineProps({
@@ -39,7 +39,7 @@ const onUpdate = (val) => {
     val = reject(val, { key: '' })
     emit(
         'update:value',
-        flatMap(val, (item) => [item.key, item.value])
+        flatMap(val, (item) => [item.key, item.value]),
     )
 }
 </script>
diff --git a/frontend/src/components/new_value/AddListValue.vue b/frontend/src/components/new_value/AddListValue.vue
index 0043a0f..9aa450f 100644
--- a/frontend/src/components/new_value/AddListValue.vue
+++ b/frontend/src/components/new_value/AddListValue.vue
@@ -1,9 +1,9 @@
 <script setup>
 import { ref } from 'vue'
 import { compact } from 'lodash'
-import Add from '../icons/Add.vue'
-import Delete from '../icons/Delete.vue'
-import IconButton from '../common/IconButton.vue'
+import Add from '@/components/icons/Add.vue'
+import Delete from '@/components/icons/Delete.vue'
+import IconButton from '@/components/common/IconButton.vue'
 import { useI18n } from 'vue-i18n'
 
 const props = defineProps({
diff --git a/frontend/src/components/new_value/AddZSetValue.vue b/frontend/src/components/new_value/AddZSetValue.vue
index 48ea466..15b3770 100644
--- a/frontend/src/components/new_value/AddZSetValue.vue
+++ b/frontend/src/components/new_value/AddZSetValue.vue
@@ -1,9 +1,9 @@
 <script setup>
 import { defineOptions, ref } from 'vue'
 import { isEmpty, reject } from 'lodash'
-import Add from '../icons/Add.vue'
-import Delete from '../icons/Delete.vue'
-import IconButton from '../common/IconButton.vue'
+import Add from '@/components/icons/Add.vue'
+import Delete from '@/components/icons/Delete.vue'
+import IconButton from '@/components/common/IconButton.vue'
 import { useI18n } from 'vue-i18n'
 
 const props = defineProps({
diff --git a/frontend/src/components/new_value/NewHashValue.vue b/frontend/src/components/new_value/NewHashValue.vue
index 09ec90a..a301174 100644
--- a/frontend/src/components/new_value/NewHashValue.vue
+++ b/frontend/src/components/new_value/NewHashValue.vue
@@ -1,9 +1,9 @@
 <script setup>
 import { ref } from 'vue'
 import { flatMap, isEmpty, reject } from 'lodash'
-import Add from '../icons/Add.vue'
-import Delete from '../icons/Delete.vue'
-import IconButton from '../common/IconButton.vue'
+import Add from '@/components/icons/Add.vue'
+import Delete from '@/components/icons/Delete.vue'
+import IconButton from '@/components/common/IconButton.vue'
 
 const props = defineProps({
     value: Array,
diff --git a/frontend/src/components/new_value/NewListValue.vue b/frontend/src/components/new_value/NewListValue.vue
index 8186467..23e9b68 100644
--- a/frontend/src/components/new_value/NewListValue.vue
+++ b/frontend/src/components/new_value/NewListValue.vue
@@ -1,9 +1,9 @@
 <script setup>
 import { ref } from 'vue'
 import { compact, isEmpty } from 'lodash'
-import Add from '../icons/Add.vue'
-import Delete from '../icons/Delete.vue'
-import IconButton from '../common/IconButton.vue'
+import Add from '@/components/icons/Add.vue'
+import Delete from '@/components/icons/Delete.vue'
+import IconButton from '@/components/common/IconButton.vue'
 
 const props = defineProps({
     value: Array,
diff --git a/frontend/src/components/new_value/NewSetValue.vue b/frontend/src/components/new_value/NewSetValue.vue
index 9ef2ae5..63d3652 100644
--- a/frontend/src/components/new_value/NewSetValue.vue
+++ b/frontend/src/components/new_value/NewSetValue.vue
@@ -1,9 +1,9 @@
 <script setup>
 import { ref } from 'vue'
 import { compact, isEmpty, uniq } from 'lodash'
-import Add from '../icons/Add.vue'
-import Delete from '../icons/Delete.vue'
-import IconButton from '../common/IconButton.vue'
+import Add from '@/components/icons/Add.vue'
+import Delete from '@/components/icons/Delete.vue'
+import IconButton from '@/components/common/IconButton.vue'
 
 const props = defineProps({
     value: Array,
diff --git a/frontend/src/components/new_value/NewStreamValue.vue b/frontend/src/components/new_value/NewStreamValue.vue
index 6a2ef58..20d05c0 100644
--- a/frontend/src/components/new_value/NewStreamValue.vue
+++ b/frontend/src/components/new_value/NewStreamValue.vue
@@ -1,9 +1,9 @@
 <script setup>
 import { defineOptions, ref } from 'vue'
 import { flatMap, isEmpty, reject } from 'lodash'
-import Add from '../icons/Add.vue'
-import Delete from '../icons/Delete.vue'
-import IconButton from '../common/IconButton.vue'
+import Add from '@/components/icons/Add.vue'
+import Delete from '@/components/icons/Delete.vue'
+import IconButton from '@/components/common/IconButton.vue'
 
 const props = defineProps({
     value: Array,
diff --git a/frontend/src/components/new_value/NewZSetValue.vue b/frontend/src/components/new_value/NewZSetValue.vue
index e3ae373..f64db5f 100644
--- a/frontend/src/components/new_value/NewZSetValue.vue
+++ b/frontend/src/components/new_value/NewZSetValue.vue
@@ -1,9 +1,9 @@
 <script setup>
 import { ref } from 'vue'
 import { flatMap, isEmpty, reject } from 'lodash'
-import Add from '../icons/Add.vue'
-import Delete from '../icons/Delete.vue'
-import IconButton from '../common/IconButton.vue'
+import Add from '@/components/icons/Add.vue'
+import Delete from '@/components/icons/Delete.vue'
+import IconButton from '@/components/common/IconButton.vue'
 
 const props = defineProps({
     value: Array,
diff --git a/frontend/src/components/sidebar/BrowserPane.vue b/frontend/src/components/sidebar/BrowserPane.vue
index 4ca7047..00675c7 100644
--- a/frontend/src/components/sidebar/BrowserPane.vue
+++ b/frontend/src/components/sidebar/BrowserPane.vue
@@ -1,20 +1,19 @@
 <script setup>
 import { useMessage, useThemeVars } from 'naive-ui'
-import AddLink from '../icons/AddLink.vue'
+import AddLink from '@/components/icons/AddLink.vue'
 import BrowserTree from './BrowserTree.vue'
-import IconButton from '../common/IconButton.vue'
-import useTabStore from '../../stores/tab.js'
+import IconButton from '@/components/common/IconButton.vue'
+import useTabStore from 'stores/tab.js'
 import { computed, reactive } from 'vue'
 import { get } from 'lodash'
-import Delete from '../icons/Delete.vue'
-import Refresh from '../icons/Refresh.vue'
-import useDialogStore from '../../stores/dialog.js'
-import { useConfirmDialog } from '../../utils/confirm_dialog.js'
+import Delete from '@/components/icons/Delete.vue'
+import Refresh from '@/components/icons/Refresh.vue'
+import useDialogStore from 'stores/dialog.js'
+import { useConfirmDialog } from '@/utils/confirm_dialog.js'
 import { useI18n } from 'vue-i18n'
-import useConnectionStore from '../../stores/connections.js'
-import Filter from '../icons/Filter.vue'
-import { types } from '../../consts/support_redis_type.js'
-import Search from '../icons/Search.vue'
+import useConnectionStore from 'stores/connections.js'
+import { types } from '@/consts/support_redis_type.js'
+import Search from '@/components/icons/Search.vue'
 
 const themeVars = useThemeVars()
 const dialogStore = useDialogStore()
diff --git a/frontend/src/components/sidebar/BrowserTree.vue b/frontend/src/components/sidebar/BrowserTree.vue
index 204e1a5..2186b84 100644
--- a/frontend/src/components/sidebar/BrowserTree.vue
+++ b/frontend/src/components/sidebar/BrowserTree.vue
@@ -1,28 +1,28 @@
 <script setup>
 import { computed, h, nextTick, onMounted, reactive, ref } from 'vue'
-import { ConnectionType } from '../../consts/connection_type.js'
+import { ConnectionType } from '@/consts/connection_type.js'
 import { NIcon, NSpace, NTag, useDialog, useMessage } from 'naive-ui'
-import Key from '../icons/Key.vue'
-import ToggleDb from '../icons/ToggleDb.vue'
+import Key from '@/components/icons/Key.vue'
+import ToggleDb from '@/components/icons/ToggleDb.vue'
 import { find, get, includes, indexOf, isEmpty, remove } from 'lodash'
 import { useI18n } from 'vue-i18n'
-import Refresh from '../icons/Refresh.vue'
-import CopyLink from '../icons/CopyLink.vue'
-import Add from '../icons/Add.vue'
-import Layer from '../icons/Layer.vue'
-import Delete from '../icons/Delete.vue'
-import Connect from '../icons/Connect.vue'
-import useDialogStore from '../../stores/dialog.js'
-import { ClipboardSetText } from '../../../wailsjs/runtime/runtime.js'
-import useConnectionStore from '../../stores/connections.js'
-import { useConfirmDialog } from '../../utils/confirm_dialog.js'
-import ToggleServer from '../icons/ToggleServer.vue'
-import Unlink from '../icons/Unlink.vue'
-import Filter from '../icons/Filter.vue'
-import Close from '../icons/Close.vue'
-import { typesBgColor, typesColor } from '../../consts/support_redis_type.js'
-import useTabStore from '../../stores/tab.js'
-import IconButton from '../common/IconButton.vue'
+import Refresh from '@/components/icons/Refresh.vue'
+import CopyLink from '@/components/icons/CopyLink.vue'
+import Add from '@/components/icons/Add.vue'
+import Layer from '@/components/icons/Layer.vue'
+import Delete from '@/components/icons/Delete.vue'
+import Connect from '@/components/icons/Connect.vue'
+import useDialogStore from 'stores/dialog.js'
+import { ClipboardSetText } from 'wailsjs/runtime/runtime.js'
+import useConnectionStore from 'stores/connections.js'
+import { useConfirmDialog } from '@/utils/confirm_dialog.js'
+import ToggleServer from '@/components/icons/ToggleServer.vue'
+import Unlink from '@/components/icons/Unlink.vue'
+import Filter from '@/components/icons/Filter.vue'
+import Close from '@/components/icons/Close.vue'
+import { typesBgColor, typesColor } from '@/consts/support_redis_type.js'
+import useTabStore from 'stores/tab.js'
+import IconButton from '@/components/common/IconButton.vue'
 
 const props = defineProps({
     server: String,
diff --git a/frontend/src/components/sidebar/ConnectionPane.vue b/frontend/src/components/sidebar/ConnectionPane.vue
index b220678..ee1c505 100644
--- a/frontend/src/components/sidebar/ConnectionPane.vue
+++ b/frontend/src/components/sidebar/ConnectionPane.vue
@@ -1,13 +1,13 @@
 <script setup>
-import useDialogStore from '../../stores/dialog.js'
+import useDialogStore from 'stores/dialog.js'
 import { NIcon, useThemeVars } from 'naive-ui'
-import AddGroup from '../icons/AddGroup.vue'
-import AddLink from '../icons/AddLink.vue'
-import IconButton from '../common/IconButton.vue'
-import Filter from '../icons/Filter.vue'
+import AddGroup from '@/components/icons/AddGroup.vue'
+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 Unlink from '../icons/Unlink.vue'
-import useConnectionStore from '../../stores/connections.js'
+import Unlink from '@/components/icons/Unlink.vue'
+import useConnectionStore from 'stores/connections.js'
 import { ref } from 'vue'
 
 const themeVars = useThemeVars()
diff --git a/frontend/src/components/sidebar/ConnectionTree.vue b/frontend/src/components/sidebar/ConnectionTree.vue
index 9e82cbb..3546809 100644
--- a/frontend/src/components/sidebar/ConnectionTree.vue
+++ b/frontend/src/components/sidebar/ConnectionTree.vue
@@ -1,21 +1,21 @@
 <script setup>
-import useDialogStore from '../../stores/dialog.js'
+import useDialogStore from 'stores/dialog.js'
 import { h, nextTick, reactive, ref } from 'vue'
-import useConnectionStore from '../../stores/connections.js'
+import useConnectionStore from 'stores/connections.js'
 import { NIcon, useDialog, useMessage, useThemeVars } from 'naive-ui'
-import { ConnectionType } from '../../consts/connection_type.js'
-import ToggleFolder from '../icons/ToggleFolder.vue'
-import ToggleServer from '../icons/ToggleServer.vue'
+import { ConnectionType } from '@/consts/connection_type.js'
+import ToggleFolder from '@/components/icons/ToggleFolder.vue'
+import ToggleServer from '@/components/icons/ToggleServer.vue'
 import { debounce, indexOf, isEmpty } from 'lodash'
-import Config from '../icons/Config.vue'
-import Delete from '../icons/Delete.vue'
-import Unlink from '../icons/Unlink.vue'
-import CopyLink from '../icons/CopyLink.vue'
-import Connect from '../icons/Connect.vue'
+import Config from '@/components/icons/Config.vue'
+import Delete from '@/components/icons/Delete.vue'
+import Unlink from '@/components/icons/Unlink.vue'
+import CopyLink from '@/components/icons/CopyLink.vue'
+import Connect from '@/components/icons/Connect.vue'
 import { useI18n } from 'vue-i18n'
-import useTabStore from '../../stores/tab.js'
-import Edit from '../icons/Edit.vue'
-import { useConfirmDialog } from '../../utils/confirm_dialog.js'
+import useTabStore from 'stores/tab.js'
+import Edit from '@/components/icons/Edit.vue'
+import { useConfirmDialog } from '@/utils/confirm_dialog.js'
 
 const themeVars = useThemeVars()
 const i18n = useI18n()
@@ -130,7 +130,7 @@ const renderPrefix = ({ option }) => {
                 { size: 20 },
                 {
                     default: () => h(ToggleFolder, { modelValue: opened }),
-                }
+                },
             )
         case ConnectionType.Server:
             const connected = connectionStore.isConnected(option.name)
@@ -139,7 +139,7 @@ const renderPrefix = ({ option }) => {
                 { size: 20 },
                 {
                     default: () => h(ToggleServer, { modelValue: !!connected }),
-                }
+                },
             )
     }
 }
@@ -330,7 +330,10 @@ const handleDrop = ({ node, dragNode, dropPosition }) => {
 </script>
 
 <template>
+    <n-empty v-if="isEmpty(connectionStore.connections)" class="empty-content" :description="$t('empty_server_list')" />
     <n-tree
+        v-else
+        class="fill-height"
         :animated="false"
         :block-line="true"
         :block-node="true"
@@ -347,7 +350,6 @@ const handleDrop = ({ node, dragNode, dropPosition }) => {
         :render-suffix="renderSuffix"
         @drop="handleDrop"
         :pattern="props.filterPattern"
-        class="fill-height"
         virtual-scroll
     />
 
@@ -383,4 +385,6 @@ const handleDrop = ({ node, dragNode, dropPosition }) => {
     />
 </template>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+@import '@/styles/content';
+</style>
diff --git a/frontend/src/components/sidebar/NavMenu.vue b/frontend/src/components/sidebar/NavMenu.vue
index 4d159ab..d5dcfbe 100644
--- a/frontend/src/components/sidebar/NavMenu.vue
+++ b/frontend/src/components/sidebar/NavMenu.vue
@@ -1,17 +1,17 @@
 <script setup>
 import { computed, h } from 'vue'
 import { NIcon, useThemeVars } from 'naive-ui'
-import ToggleDb from '../icons/ToggleDb.vue'
+import ToggleDb from '@/components/icons/ToggleDb.vue'
 import { useI18n } from 'vue-i18n'
-import ToggleServer from '../icons/ToggleServer.vue'
-import IconButton from '../common/IconButton.vue'
-import Config from '../icons/Config.vue'
-import useDialogStore from '../../stores/dialog.js'
-import Github from '../icons/Github.vue'
-import { BrowserOpenURL } from '../../../wailsjs/runtime/runtime.js'
-import Log from '../icons/Log.vue'
-import useConnectionStore from '../../stores/connections.js'
-import Help from '../icons/Help.vue'
+import ToggleServer from '@/components/icons/ToggleServer.vue'
+import IconButton from '@/components/common/IconButton.vue'
+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 Log from '@/components/icons/Log.vue'
+import useConnectionStore from 'stores/connections.js'
+import Help from '@/components/icons/Help.vue'
 
 const themeVars = useThemeVars()
 
diff --git a/frontend/src/langs/en.json b/frontend/src/langs/en.json
index 429585b..f3a1b58 100644
--- a/frontend/src/langs/en.json
+++ b/frontend/src/langs/en.json
@@ -132,6 +132,7 @@
   "spec_field_required": "\"{key}\" should not be blank",
   "nonexist_tab_content": "The selected key does not exist. Please retry",
   "empty_server_content": "Connect server from left list",
+  "empty_server_list": "No redis server",
   "reload_when_succ": "Reload immediately after success",
   "server": "Server",
   "browser": "Browser",
diff --git a/frontend/src/langs/zh-cn.json b/frontend/src/langs/zh-cn.json
index c14fac9..fae0565 100644
--- a/frontend/src/langs/zh-cn.json
+++ b/frontend/src/langs/zh-cn.json
@@ -134,6 +134,7 @@
   "spec_field_required": "{key} 不能为空",
   "nonexist_tab_content": "所选键不存在，请尝试刷新重试",
   "empty_server_content": "可以从左边选择并打开连接",
+  "empty_server_list": "还没添加Redis服务器",
   "reload_when_succ": "操作成功后立即重新加载",
   "server": "服务器",
   "browser": "浏览器",
diff --git a/frontend/src/stores/connections.js b/frontend/src/stores/connections.js
index ec6d338..0b1ca86 100644
--- a/frontend/src/stores/connections.js
+++ b/frontend/src/stores/connections.js
@@ -30,10 +30,10 @@ import {
     SetSetItem,
     UpdateSetItem,
     UpdateZSetValue,
-} from '../../wailsjs/go/services/connectionService.js'
-import { ConnectionType } from '../consts/connection_type.js'
+} from 'wailsjs/go/services/connectionService.js'
+import { ConnectionType } from '@/consts/connection_type.js'
 import useTabStore from './tab.js'
-import { types } from '../consts/support_redis_type.js'
+import { types } from '@/consts/support_redis_type.js'
 
 const useConnectionStore = defineStore('connections', {
     /**
diff --git a/frontend/src/stores/preferences.js b/frontend/src/stores/preferences.js
index 3aee42c..46c830f 100644
--- a/frontend/src/stores/preferences.js
+++ b/frontend/src/stores/preferences.js
@@ -1,12 +1,12 @@
 import { defineStore } from 'pinia'
-import { lang } from '../langs/index.js'
+import { lang } from '@/langs/index.js'
 import { camelCase, clone, find, get, isEmpty, isObject, map, set, snakeCase, split } from 'lodash'
 import {
     GetFontList,
     GetPreferences,
     RestorePreferences,
     SetPreferences,
-} from '../../wailsjs/go/services/preferencesService.js'
+} from 'wailsjs/go/services/preferencesService.js'
 import { useI18n } from 'vue-i18n'
 
 const usePreferencesStore = defineStore('preferences', {
diff --git a/frontend/vite.config.js b/frontend/vite.config.js
index 3fcbf95..fc50389 100644
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@@ -25,6 +25,8 @@ export default defineConfig({
     resolve: {
         alias: {
             '@': rootPath + 'src',
+            stores: rootPath + 'src/stores',
+            wailsjs: rootPath + 'wailsjs',
         },
     },
 })