diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 7fd662b..efe4692 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -88,25 +88,23 @@ const theme = computed(() => {
         class="fill-height"
     >
         <n-global-style />
-        <n-message-provider>
-            <n-dialog-provider>
-                <n-spin v-show="initializing" :theme-overrides="{ opacitySpinning: 0 }">
-                    <div id="launch-container" />
-                </n-spin>
-                <app-content v-if="!initializing" class="flex-item-expand" />
+        <n-dialog-provider>
+            <n-spin v-show="initializing" :theme-overrides="{ opacitySpinning: 0 }">
+                <div id="launch-container" />
+            </n-spin>
+            <app-content v-if="!initializing" class="flex-item-expand" />
 
-                <!-- top modal dialogs -->
-                <connection-dialog />
-                <group-dialog />
-                <new-key-dialog />
-                <key-filter-dialog />
-                <add-fields-dialog />
-                <rename-key-dialog />
-                <delete-key-dialog />
-                <set-ttl-dialog />
-                <preferences-dialog />
-            </n-dialog-provider>
-        </n-message-provider>
+            <!-- top modal dialogs -->
+            <connection-dialog />
+            <group-dialog />
+            <new-key-dialog />
+            <key-filter-dialog />
+            <add-fields-dialog />
+            <rename-key-dialog />
+            <delete-key-dialog />
+            <set-ttl-dialog />
+            <preferences-dialog />
+        </n-dialog-provider>
     </n-config-provider>
 </template>
 
diff --git a/frontend/src/components/content_value/ContentToolbar.vue b/frontend/src/components/content_value/ContentToolbar.vue
index 6127431..2766588 100644
--- a/frontend/src/components/content_value/ContentToolbar.vue
+++ b/frontend/src/components/content_value/ContentToolbar.vue
@@ -7,12 +7,12 @@ 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 '@/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'
+import { useMessage } from '@/utils/message.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 edb577d..71e1868 100644
--- a/frontend/src/components/content_value/ContentValueHash.vue
+++ b/frontend/src/components/content_value/ContentValueHash.vue
@@ -3,14 +3,15 @@ import { computed, h, reactive, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import ContentToolbar from './ContentToolbar.vue'
 import AddLink from '@/components/icons/AddLink.vue'
-import { NButton, NCode, NIcon, NInput, useMessage } from 'naive-ui'
+import { NButton, NCode, NIcon, NInput } 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 { useMessage } from '@/utils/message.js'
 
 const i18n = useI18n()
-
+const message = useMessage()
 const props = defineProps({
     name: String,
     db: Number,
@@ -197,7 +198,6 @@ const tableData = computed(() => {
     }
     return data
 })
-const message = useMessage()
 const onAddRow = () => {
     dialogStore.openAddFieldsDialog(props.name, props.db, props.keyPath, types.HASH)
 }
diff --git a/frontend/src/components/content_value/ContentValueList.vue b/frontend/src/components/content_value/ContentValueList.vue
index c05ec68..5793991 100644
--- a/frontend/src/components/content_value/ContentValueList.vue
+++ b/frontend/src/components/content_value/ContentValueList.vue
@@ -3,15 +3,16 @@ import { computed, h, reactive, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import ContentToolbar from './ContentToolbar.vue'
 import AddLink from '@/components/icons/AddLink.vue'
-import { NButton, NCode, NIcon, NInput, useMessage } from 'naive-ui'
+import { NButton, NCode, NIcon, NInput } from 'naive-ui'
 import { 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 { useMessage } from '@/utils/message.js'
 
 const i18n = useI18n()
-
+const message = useMessage()
 const props = defineProps({
     name: String,
     db: Number,
@@ -151,7 +152,7 @@ const tableData = computed(() => {
     }
     return data
 })
-const message = useMessage()
+
 const onAddValue = (value) => {
     dialogStore.openAddFieldsDialog(props.name, props.db, props.keyPath, types.LIST)
 }
diff --git a/frontend/src/components/content_value/ContentValueSet.vue b/frontend/src/components/content_value/ContentValueSet.vue
index b93f5cd..9d04d10 100644
--- a/frontend/src/components/content_value/ContentValueSet.vue
+++ b/frontend/src/components/content_value/ContentValueSet.vue
@@ -3,14 +3,16 @@ import { computed, h, reactive, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import ContentToolbar from './ContentToolbar.vue'
 import AddLink from '@/components/icons/AddLink.vue'
-import { NButton, NCode, NIcon, NInput, useMessage } from 'naive-ui'
+import { NButton, NCode, NIcon, NInput } 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 '@/components/common/EditableTableColumn.vue'
 import useConnectionStore from 'stores/connections.js'
+import { useMessage } from '@/utils/message.js'
 
 const i18n = useI18n()
+const message = useMessage()
 const props = defineProps({
     name: String,
     db: Number,
@@ -147,7 +149,6 @@ const tableData = computed(() => {
     return data
 })
 
-const message = useMessage()
 const onAddValue = (value) => {
     dialogStore.openAddFieldsDialog(props.name, props.db, props.keyPath, types.SET)
 }
diff --git a/frontend/src/components/content_value/ContentValueStream.vue b/frontend/src/components/content_value/ContentValueStream.vue
index 7cabc9b..6f793ee 100644
--- a/frontend/src/components/content_value/ContentValueStream.vue
+++ b/frontend/src/components/content_value/ContentValueStream.vue
@@ -3,15 +3,16 @@ import { computed, h, reactive, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import ContentToolbar from './ContentToolbar.vue'
 import AddLink from '@/components/icons/AddLink.vue'
-import { NButton, NCode, NIcon, NInput, useMessage } from 'naive-ui'
+import { NButton, NCode, NIcon, NInput } 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, keys, some, values } from 'lodash'
+import { useMessage } from '@/utils/message.js'
 
 const i18n = useI18n()
-
+const message = useMessage()
 const props = defineProps({
     name: String,
     db: Number,
@@ -120,7 +121,7 @@ const tableData = computed(() => {
     }
     return data
 })
-const message = useMessage()
+
 const onAddRow = () => {
     dialogStore.openAddFieldsDialog(props.name, props.db, props.keyPath, types.STREAM)
 }
diff --git a/frontend/src/components/content_value/ContentValueString.vue b/frontend/src/components/content_value/ContentValueString.vue
index bccc4e5..312ca4f 100644
--- a/frontend/src/components/content_value/ContentValueString.vue
+++ b/frontend/src/components/content_value/ContentValueString.vue
@@ -4,7 +4,7 @@ import { useI18n } from 'vue-i18n'
 import ContentToolbar from './ContentToolbar.vue'
 import Copy from '@/components/icons/Copy.vue'
 import Save from '@/components/icons/Save.vue'
-import { useMessage, useThemeVars } from 'naive-ui'
+import { useThemeVars } from 'naive-ui'
 import { types } from '@/consts/value_view_type.js'
 import Close from '@/components/icons/Close.vue'
 import Edit from '@/components/icons/Edit.vue'
@@ -13,7 +13,10 @@ 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 { useMessage } from '@/utils/message.js'
 
+const i18n = useI18n()
+const message = useMessage()
 const themeVars = useThemeVars()
 
 const props = defineProps({
@@ -106,8 +109,6 @@ const viewLanguage = computed(() => {
             return 'plaintext'
     }
 })
-const i18n = useI18n()
-const message = useMessage()
 
 /**
  * Copy value
diff --git a/frontend/src/components/content_value/ContentValueZSet.vue b/frontend/src/components/content_value/ContentValueZSet.vue
index 02e25fe..c64ed71 100644
--- a/frontend/src/components/content_value/ContentValueZSet.vue
+++ b/frontend/src/components/content_value/ContentValueZSet.vue
@@ -3,15 +3,16 @@ import { computed, h, reactive, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import ContentToolbar from './ContentToolbar.vue'
 import AddLink from '@/components/icons/AddLink.vue'
-import { NButton, NCode, NIcon, NInput, NInputNumber, useMessage } from 'naive-ui'
+import { NButton, NCode, NIcon, NInput, NInputNumber } from 'naive-ui'
 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 { useMessage } from '@/utils/message.js'
 
 const i18n = useI18n()
-
+const message = useMessage()
 const props = defineProps({
     name: String,
     db: Number,
@@ -220,7 +221,7 @@ const tableData = computed(() => {
     }
     return data
 })
-const message = useMessage()
+
 const onAddRow = () => {
     dialogStore.openAddFieldsDialog(props.name, props.db, props.keyPath, types.ZSET)
 }
diff --git a/frontend/src/components/dialogs/AddFieldsDialog.vue b/frontend/src/components/dialogs/AddFieldsDialog.vue
index c6b793c..3234ba2 100644
--- a/frontend/src/components/dialogs/AddFieldsDialog.vue
+++ b/frontend/src/components/dialogs/AddFieldsDialog.vue
@@ -5,7 +5,7 @@ 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 { useMessage } from '@/utils/message.js'
 import AddListValue from '@/components/new_value/AddListValue.vue'
 import AddHashValue from '@/components/new_value/AddHashValue.vue'
 import AddZSetValue from '@/components/new_value/AddZSetValue.vue'
diff --git a/frontend/src/components/dialogs/ConnectionDialog.vue b/frontend/src/components/dialogs/ConnectionDialog.vue
index 5add45e..cc8c33c 100644
--- a/frontend/src/components/dialogs/ConnectionDialog.vue
+++ b/frontend/src/components/dialogs/ConnectionDialog.vue
@@ -4,7 +4,7 @@ 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 { useMessage } from 'naive-ui'
+import { useMessage } from '@/utils/message.js'
 import Close from '@/components/icons/Close.vue'
 import useConnectionStore from 'stores/connections.js'
 
diff --git a/frontend/src/components/dialogs/DeleteKeyDialog.vue b/frontend/src/components/dialogs/DeleteKeyDialog.vue
index 26fa8f4..ee98767 100644
--- a/frontend/src/components/dialogs/DeleteKeyDialog.vue
+++ b/frontend/src/components/dialogs/DeleteKeyDialog.vue
@@ -1,7 +1,7 @@
 <script setup>
 import { reactive, watch } from 'vue'
 import useDialog from 'stores/dialog'
-import { useMessage } from 'naive-ui'
+import { useMessage } from '@/utils/message.js'
 import { useI18n } from 'vue-i18n'
 import useConnectionStore from 'stores/connections.js'
 import { isEmpty, size } from 'lodash'
diff --git a/frontend/src/components/dialogs/GroupDialog.vue b/frontend/src/components/dialogs/GroupDialog.vue
index d5de5ed..19b1aac 100644
--- a/frontend/src/components/dialogs/GroupDialog.vue
+++ b/frontend/src/components/dialogs/GroupDialog.vue
@@ -1,7 +1,7 @@
 <script setup>
 import { computed, reactive, ref, watch } from 'vue'
 import useDialog from 'stores/dialog'
-import { useMessage } from 'naive-ui'
+import { useMessage } from '@/utils/message.js'
 import { useI18n } from 'vue-i18n'
 import useConnectionStore from 'stores/connections.js'
 import { isEmpty } from 'lodash'
diff --git a/frontend/src/components/dialogs/NewKeyDialog.vue b/frontend/src/components/dialogs/NewKeyDialog.vue
index f13cf85..efcf52c 100644
--- a/frontend/src/components/dialogs/NewKeyDialog.vue
+++ b/frontend/src/components/dialogs/NewKeyDialog.vue
@@ -10,9 +10,10 @@ 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, useMessage } from 'naive-ui'
+import { NSpace } from 'naive-ui'
 import useTabStore from 'stores/tab.js'
 import NewStreamValue from '@/components/new_value/NewStreamValue.vue'
+import { useMessage } from '@/utils/message.js'
 
 const i18n = useI18n()
 const newForm = reactive({
diff --git a/frontend/src/components/dialogs/PreferencesDialog.vue b/frontend/src/components/dialogs/PreferencesDialog.vue
index d073c00..e97c633 100644
--- a/frontend/src/components/dialogs/PreferencesDialog.vue
+++ b/frontend/src/components/dialogs/PreferencesDialog.vue
@@ -3,7 +3,7 @@ import { ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import useDialog from 'stores/dialog'
 import usePreferencesStore from 'stores/preferences.js'
-import { useMessage } from 'naive-ui'
+import { useMessage } from '@/utils/message.js'
 
 const prefStore = usePreferencesStore()
 
diff --git a/frontend/src/components/dialogs/RenameKeyDialog.vue b/frontend/src/components/dialogs/RenameKeyDialog.vue
index 0e33d0a..8dd884e 100644
--- a/frontend/src/components/dialogs/RenameKeyDialog.vue
+++ b/frontend/src/components/dialogs/RenameKeyDialog.vue
@@ -1,7 +1,7 @@
 <script setup>
 import { reactive, watch } from 'vue'
 import useDialog from 'stores/dialog'
-import { useMessage } from 'naive-ui'
+import { useMessage } from '@/utils/message.js'
 import { useI18n } from 'vue-i18n'
 import useConnectionStore from 'stores/connections.js'
 
diff --git a/frontend/src/components/sidebar/BrowserPane.vue b/frontend/src/components/sidebar/BrowserPane.vue
index 7759bd7..437ed06 100644
--- a/frontend/src/components/sidebar/BrowserPane.vue
+++ b/frontend/src/components/sidebar/BrowserPane.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { useMessage, useThemeVars } from 'naive-ui'
+import { useThemeVars } from 'naive-ui'
 import AddLink from '@/components/icons/AddLink.vue'
 import BrowserTree from './BrowserTree.vue'
 import IconButton from '@/components/common/IconButton.vue'
@@ -9,7 +9,6 @@ import { get } from 'lodash'
 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 { types } from '@/consts/support_redis_type.js'
@@ -36,7 +35,6 @@ const onNewKey = () => {
 
 const i18n = useI18n()
 const connectionStore = useConnectionStore()
-const message = useMessage()
 const onDeleteKey = () => {
     browserTreeRef.value?.handleSelectContextMenu('value_remove')
 }
diff --git a/frontend/src/components/sidebar/BrowserTree.vue b/frontend/src/components/sidebar/BrowserTree.vue
index 5442137..0c90ef1 100644
--- a/frontend/src/components/sidebar/BrowserTree.vue
+++ b/frontend/src/components/sidebar/BrowserTree.vue
@@ -1,7 +1,7 @@
 <script setup>
 import { computed, h, nextTick, onMounted, reactive, ref } from 'vue'
 import { ConnectionType } from '@/consts/connection_type.js'
-import { NIcon, NSpace, NTag, useDialog, useMessage } from 'naive-ui'
+import { NIcon, NSpace, NTag, useDialog } from 'naive-ui'
 import Key from '@/components/icons/Key.vue'
 import ToggleDb from '@/components/icons/ToggleDb.vue'
 import { find, get, includes, indexOf, isEmpty, remove } from 'lodash'
@@ -23,6 +23,7 @@ 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'
+import { useMessage } from '@/utils/message.js'
 
 const props = defineProps({
     server: String,
@@ -218,6 +219,82 @@ const expandKey = (key) => {
     }
 }
 
+const confirmDialog = useConfirmDialog()
+const handleSelectContextMenu = (key) => {
+    contextMenuParam.show = false
+    const selectedKey = get(selectedKeys.value, 0)
+    if (selectedKey == null) {
+        return
+    }
+    const node = connectionStore.getNode(selectedKey)
+    const { db, key: nodeKey, redisKey } = node || {}
+    switch (key) {
+        case 'server_reload':
+            expandedKeys.value = [props.server]
+            tabStore.setSelectedKeys(props.server)
+            connectionStore.openConnection(props.server, true).then(() => {
+                message.success(i18n.t('reload_succ'))
+            })
+            break
+        case 'server_close':
+            connectionStore.closeConnection(props.server)
+            break
+        case 'db_open':
+            nextTick().then(() => expandKey(nodeKey))
+            break
+        case 'db_reload':
+            connectionStore.reopenDatabase(props.server, db)
+            break
+        case 'db_close':
+            remove(expandedKeys.value, (k) => k === `${props.server}/db${db}`)
+            connectionStore.closeDatabase(props.server, db)
+            break
+        case 'db_newkey':
+        case 'key_newkey':
+            dialogStore.openNewKeyDialog(redisKey, props.server, db)
+            break
+        case 'db_filter':
+            const { match: pattern, type } = connectionStore.getKeyFilter(props.server, db)
+            dialogStore.openKeyFilterDialog(props.server, db, pattern, type)
+            break
+        case 'key_reload':
+            connectionStore.loadKeys(props.server, db, redisKey)
+            break
+        case 'value_reload':
+            connectionStore.loadKeyValue(props.server, db, redisKey)
+            break
+        case 'key_remove':
+            dialogStore.openDeleteKeyDialog(props.server, db, isEmpty(redisKey) ? '*' : redisKey + ':*')
+            break
+        case 'value_remove':
+            confirmDialog.warning(i18n.t('remove_tip', { name: redisKey }), () => {
+                connectionStore.deleteKey(props.server, db, redisKey).then((success) => {
+                    if (success) {
+                        message.success(i18n.t('delete_key_succ', { key: redisKey }))
+                    }
+                })
+            })
+            break
+        case 'key_copy':
+        case 'value_copy':
+            ClipboardSetText(redisKey)
+                .then((succ) => {
+                    if (succ) {
+                        message.success(i18n.t('copy_succ'))
+                    }
+                })
+                .catch((e) => {
+                    message.error(e.message)
+                })
+            break
+        default:
+            console.warn('TODO: handle context menu:' + key)
+    }
+}
+defineExpose({
+    handleSelectContextMenu,
+})
+
 const message = useMessage()
 const dialog = useDialog()
 const onUpdateExpanded = (value, option, meta) => {
@@ -505,81 +582,6 @@ const onLoadTree = async (node) => {
     }
 }
 
-const confirmDialog = useConfirmDialog()
-defineExpose({
-    handleSelectContextMenu: (key) => {
-        contextMenuParam.show = false
-        const selectedKey = get(selectedKeys.value, 0)
-        if (selectedKey == null) {
-            return
-        }
-        const node = connectionStore.getNode(selectedKey)
-        const { db, key: nodeKey, redisKey } = node || {}
-        switch (key) {
-            case 'server_reload':
-                expandedKeys.value = [props.server]
-                tabStore.setSelectedKeys(props.server)
-                connectionStore.openConnection(props.server, true).then(() => {
-                    message.success(i18n.t('reload_succ'))
-                })
-                break
-            case 'server_close':
-                connectionStore.closeConnection(props.server)
-                break
-            case 'db_open':
-                nextTick().then(() => expandKey(nodeKey))
-                break
-            case 'db_reload':
-                connectionStore.reopenDatabase(props.server, db)
-                break
-            case 'db_close':
-                remove(expandedKeys.value, (k) => k === `${props.server}/db${db}`)
-                connectionStore.closeDatabase(props.server, db)
-                break
-            case 'db_newkey':
-            case 'key_newkey':
-                dialogStore.openNewKeyDialog(redisKey, props.server, db)
-                break
-            case 'db_filter':
-                const { match: pattern, type } = connectionStore.getKeyFilter(props.server, db)
-                dialogStore.openKeyFilterDialog(props.server, db, pattern, type)
-                break
-            case 'key_reload':
-                connectionStore.loadKeys(props.server, db, redisKey)
-                break
-            case 'value_reload':
-                connectionStore.loadKeyValue(props.server, db, redisKey)
-                break
-            case 'key_remove':
-                dialogStore.openDeleteKeyDialog(props.server, db, isEmpty(redisKey) ? '*' : redisKey + ':*')
-                break
-            case 'value_remove':
-                confirmDialog.warning(i18n.t('remove_tip', { name: redisKey }), () => {
-                    connectionStore.deleteKey(props.server, db, redisKey).then((success) => {
-                        if (success) {
-                            message.success(i18n.t('delete_key_succ', { key: redisKey }))
-                        }
-                    })
-                })
-                break
-            case 'key_copy':
-            case 'value_copy':
-                ClipboardSetText(redisKey)
-                    .then((succ) => {
-                        if (succ) {
-                            message.success(i18n.t('copy_succ'))
-                        }
-                    })
-                    .catch((e) => {
-                        message.error(e.message)
-                    })
-                break
-            default:
-                console.warn('TODO: handle context menu:' + key)
-        }
-    },
-})
-
 const handleOutsideContextMenu = () => {
     contextMenuParam.show = false
 }
diff --git a/frontend/src/components/sidebar/ConnectionTree.vue b/frontend/src/components/sidebar/ConnectionTree.vue
index 5f9c274..d7e7388 100644
--- a/frontend/src/components/sidebar/ConnectionTree.vue
+++ b/frontend/src/components/sidebar/ConnectionTree.vue
@@ -2,7 +2,7 @@
 import useDialogStore from 'stores/dialog.js'
 import { h, nextTick, reactive, ref } from 'vue'
 import useConnectionStore from 'stores/connections.js'
-import { NIcon, useDialog, useMessage, useThemeVars } from 'naive-ui'
+import { NIcon, useDialog, useThemeVars } from 'naive-ui'
 import { ConnectionType } from '@/consts/connection_type.js'
 import ToggleFolder from '@/components/icons/ToggleFolder.vue'
 import ToggleServer from '@/components/icons/ToggleServer.vue'
@@ -16,6 +16,7 @@ import { useI18n } from 'vue-i18n'
 import useTabStore from 'stores/tab.js'
 import Edit from '@/components/icons/Edit.vue'
 import { useConfirmDialog } from '@/utils/confirm_dialog.js'
+import { useMessage } from '@/utils/message.js'
 
 const themeVars = useThemeVars()
 const i18n = useI18n()
diff --git a/frontend/src/utils/message.js b/frontend/src/utils/message.js
new file mode 100644
index 0000000..bf75811
--- /dev/null
+++ b/frontend/src/utils/message.js
@@ -0,0 +1,23 @@
+import { createDiscreteApi } from 'naive-ui'
+
+const { message } = createDiscreteApi(['message'])
+
+export function useMessage() {
+    return {
+        error: (content, option = null) => {
+            message.error(content, option)
+        },
+        info: (content, option = null) => {
+            message.info(content, option)
+        },
+        loading: (content, option = null) => {
+            message.loading(content, option)
+        },
+        success: (content, option = null) => {
+            message.success(content, option)
+        },
+        warning: (content, option = null) => {
+            message.warning(content, option)
+        },
+    }
+}