diff --git a/frontend/src/components/content_value/ContentSlog.vue b/frontend/src/components/content_value/ContentSlog.vue
index b513a2c..ae49a95 100644
--- a/frontend/src/components/content_value/ContentSlog.vue
+++ b/frontend/src/components/content_value/ContentSlog.vue
@@ -178,8 +178,8 @@ const onListLimitChanged = (limit) => {
             <n-form-item :label="$t('slog.limit')">
                 <n-input-number
                     v-model:value="data.listLimit"
-                    :min="1"
                     :max="9999"
+                    :min="1"
                     style="width: 120px"
                     @update:value="onListLimitChanged" />
             </n-form-item>
diff --git a/frontend/src/components/dialogs/AddFieldsDialog.vue b/frontend/src/components/dialogs/AddFieldsDialog.vue
index a76d31e..75b2c6a 100644
--- a/frontend/src/components/dialogs/AddFieldsDialog.vue
+++ b/frontend/src/components/dialogs/AddFieldsDialog.vue
@@ -197,7 +197,6 @@ const onClose = () => {
     <n-modal
         v-model:show="dialogStore.addFieldsDialogVisible"
         :closable="false"
-        :close-on-esc="false"
         :mask-closable="false"
         :negative-button-props="{ size: 'medium' }"
         :negative-text="$t('common.cancel')"
@@ -205,9 +204,11 @@ const onClose = () => {
         :positive-text="$t('common.confirm')"
         :show-icon="false"
         :title="title ? $t(title) : ''"
+        close-on-esc
         preset="dialog"
         style="width: 600px"
         transform-origin="center"
+        @esc="onClose"
         @positive-click="onAdd"
         @negative-click="onClose">
         <n-scrollbar style="max-height: 500px">
diff --git a/frontend/src/components/dialogs/ConnectionDialog.vue b/frontend/src/components/dialogs/ConnectionDialog.vue
index 3767b15..f04cedd 100644
--- a/frontend/src/components/dialogs/ConnectionDialog.vue
+++ b/frontend/src/components/dialogs/ConnectionDialog.vue
@@ -329,14 +329,15 @@ const pasteFromClipboard = async () => {
     <n-modal
         v-model:show="dialogStore.connDialogVisible"
         :closable="false"
-        :close-on-esc="false"
         :mask-closable="false"
         :on-after-leave="resetForm"
         :show-icon="false"
         :title="isEditMode ? $t('dialogue.connection.edit_title') : $t('dialogue.connection.new_title')"
+        close-on-esc
         preset="dialog"
         style="width: 600px"
-        transform-origin="center">
+        transform-origin="center"
+        @esc="onClose">
         <n-spin :show="closingConnection">
             <n-tabs
                 v-model:value="tab"
diff --git a/frontend/src/components/dialogs/DecoderDialog.vue b/frontend/src/components/dialogs/DecoderDialog.vue
index 40b96b5..3f7fa79 100644
--- a/frontend/src/components/dialogs/DecoderDialog.vue
+++ b/frontend/src/components/dialogs/DecoderDialog.vue
@@ -75,7 +75,6 @@ const onClose = () => {}
     <n-modal
         v-model:show="dialogStore.decodeDialogVisible"
         :closable="false"
-        :close-on-esc="false"
         :mask-closable="false"
         :negative-button-props="{ focusable: false, size: 'medium' }"
         :negative-text="$t('common.cancel')"
@@ -83,8 +82,10 @@ const onClose = () => {}
         :positive-text="$t('common.confirm')"
         :show-icon="false"
         :title="editName ? $t('dialogue.decoder.edit_name') : $t('dialogue.decoder.name')"
+        close-on-esc
         preset="dialog"
         transform-origin="center"
+        @esc="onClose"
         @positive-click="onAddOrUpdate"
         @negative-click="onClose">
         <n-form :model="decoderForm" :show-require-mark="false" label-align="left" label-placement="top">
diff --git a/frontend/src/components/dialogs/DeleteKeyDialog.vue b/frontend/src/components/dialogs/DeleteKeyDialog.vue
index b5e2c0a..8723e1a 100644
--- a/frontend/src/components/dialogs/DeleteKeyDialog.vue
+++ b/frontend/src/components/dialogs/DeleteKeyDialog.vue
@@ -93,12 +93,13 @@ const onClose = () => {
     <n-modal
         v-model:show="dialogStore.deleteKeyDialogVisible"
         :closable="false"
-        :close-on-esc="false"
         :mask-closable="false"
         :show-icon="false"
         :title="$t('interface.batch_delete_key')"
+        close-on-esc
         preset="dialog"
-        transform-origin="center">
+        transform-origin="center"
+        @esc="onClose">
         <n-spin :show="loading">
             <n-form :model="deleteForm" :show-require-mark="false" label-placement="top">
                 <n-grid :x-gap="10">
diff --git a/frontend/src/components/dialogs/ExportKeyDialog.vue b/frontend/src/components/dialogs/ExportKeyDialog.vue
index e653ffa..b702e10 100644
--- a/frontend/src/components/dialogs/ExportKeyDialog.vue
+++ b/frontend/src/components/dialogs/ExportKeyDialog.vue
@@ -64,12 +64,13 @@ const onClose = () => {
     <n-modal
         v-model:show="dialogStore.exportKeyDialogVisible"
         :closable="false"
-        :close-on-esc="false"
         :mask-closable="false"
         :show-icon="false"
         :title="$t('dialogue.export.name')"
+        close-on-esc
         preset="dialog"
-        transform-origin="center">
+        transform-origin="center"
+        @esc="onClose">
         <n-spin :show="loading">
             <n-form :model="exportKeyForm" :show-require-mark="false" label-placement="top">
                 <n-grid :x-gap="10">
diff --git a/frontend/src/components/dialogs/FlushDbDialog.vue b/frontend/src/components/dialogs/FlushDbDialog.vue
index 33e2927..f1ce1a2 100644
--- a/frontend/src/components/dialogs/FlushDbDialog.vue
+++ b/frontend/src/components/dialogs/FlushDbDialog.vue
@@ -54,12 +54,13 @@ const onClose = () => {
     <n-modal
         v-model:show="dialogStore.flushDBDialogVisible"
         :closable="false"
-        :close-on-esc="false"
         :mask-closable="false"
         :show-icon="false"
         :title="$t('interface.flush_db')"
+        close-on-esc
         preset="dialog"
-        transform-origin="center">
+        transform-origin="center"
+        @esc="onClose">
         <n-spin :show="loading">
             <n-form :model="flushForm" :show-require-mark="false" label-placement="top">
                 <n-form-item :label="$t('dialogue.key.server')">
diff --git a/frontend/src/components/dialogs/GroupDialog.vue b/frontend/src/components/dialogs/GroupDialog.vue
index eb6f0dc..a85a3c3 100644
--- a/frontend/src/components/dialogs/GroupDialog.vue
+++ b/frontend/src/components/dialogs/GroupDialog.vue
@@ -89,7 +89,6 @@ const onClose = () => {
     <n-modal
         v-model:show="dialogStore.groupDialogVisible"
         :closable="false"
-        :close-on-esc="false"
         :mask-closable="false"
         :negative-button-props="{ size: 'medium' }"
         :negative-text="$t('common.cancel')"
@@ -97,8 +96,10 @@ const onClose = () => {
         :positive-text="$t('common.confirm')"
         :show-icon="false"
         :title="isRenameMode ? $t('dialogue.group.rename') : $t('dialogue.group.new')"
+        close-on-esc
         preset="dialog"
         transform-origin="center"
+        @esc="onClose"
         @positive-click="onConfirm"
         @negative-click="onClose">
         <n-form
diff --git a/frontend/src/components/dialogs/ImportKeyDialog.vue b/frontend/src/components/dialogs/ImportKeyDialog.vue
index 0fd85c0..cc5d6f2 100644
--- a/frontend/src/components/dialogs/ImportKeyDialog.vue
+++ b/frontend/src/components/dialogs/ImportKeyDialog.vue
@@ -103,12 +103,13 @@ const onClose = () => {
     <n-modal
         v-model:show="dialogStore.importKeyDialogVisible"
         :closable="false"
-        :close-on-esc="false"
         :mask-closable="false"
         :show-icon="false"
         :title="$t('dialogue.import.name')"
+        close-on-esc
         preset="dialog"
-        transform-origin="center">
+        transform-origin="center"
+        @esc="onClose">
         <n-spin :show="loading">
             <n-form :model="importKeyForm" :show-require-mark="false" label-placement="top">
                 <n-grid :x-gap="10">
diff --git a/frontend/src/components/dialogs/KeyFilterDialog.vue b/frontend/src/components/dialogs/KeyFilterDialog.vue
index 42b27c2..e3e6097 100644
--- a/frontend/src/components/dialogs/KeyFilterDialog.vue
+++ b/frontend/src/components/dialogs/KeyFilterDialog.vue
@@ -47,7 +47,6 @@ const onClose = () => {
     <n-modal
         v-model:show="dialogStore.keyFilterDialogVisible"
         :closable="false"
-        :close-on-esc="false"
         :mask-closable="false"
         :negative-button-props="{ size: 'medium' }"
         :negative-text="$t('common.cancel')"
@@ -55,9 +54,11 @@ const onClose = () => {
         :positive-text="$t('common.confirm')"
         :show-icon="false"
         :title="$t('dialogue.filter.set_key_filter')"
+        close-on-esc
         preset="dialog"
         style="width: 450px"
         transform-origin="center"
+        @esc="onClose"
         @positive-click="onConfirm"
         @negative-click="onClose">
         <n-form
diff --git a/frontend/src/components/dialogs/NewKeyDialog.vue b/frontend/src/components/dialogs/NewKeyDialog.vue
index 0924402..018de4f 100644
--- a/frontend/src/components/dialogs/NewKeyDialog.vue
+++ b/frontend/src/components/dialogs/NewKeyDialog.vue
@@ -191,13 +191,14 @@ const onImport = () => {
     <n-modal
         v-model:show="dialogStore.newKeyDialogVisible"
         :closable="false"
-        :close-on-esc="false"
         :mask-closable="false"
         :show-icon="false"
         :title="$t('dialogue.key.new')"
+        close-on-esc
         preset="dialog"
         style="width: 600px"
-        transform-origin="center">
+        transform-origin="center"
+        @esc="onClose">
         <n-scrollbar ref="scrollRef" style="max-height: 500px">
             <n-form
                 ref="newFormRef"
diff --git a/frontend/src/components/dialogs/PreferencesDialog.vue b/frontend/src/components/dialogs/PreferencesDialog.vue
index 9e756a8..e4dceae 100644
--- a/frontend/src/components/dialogs/PreferencesDialog.vue
+++ b/frontend/src/components/dialogs/PreferencesDialog.vue
@@ -192,13 +192,14 @@ const onClose = () => {
         v-model:show="dialogStore.preferencesDialogVisible"
         :auto-focus="false"
         :closable="false"
-        :close-on-esc="false"
         :mask-closable="false"
         :show-icon="false"
         :title="$t('preferences.name')"
+        close-on-esc
         preset="dialog"
         style="width: 640px"
-        transform-origin="center">
+        transform-origin="center"
+        @esc="onClose">
         <!-- FIXME: set loading will slow down appear animation of dialog in linux -->
         <!-- <n-spin :show="loading"> -->
         <n-tabs
diff --git a/frontend/src/components/dialogs/RenameKeyDialog.vue b/frontend/src/components/dialogs/RenameKeyDialog.vue
index 2050313..7b935ed 100644
--- a/frontend/src/components/dialogs/RenameKeyDialog.vue
+++ b/frontend/src/components/dialogs/RenameKeyDialog.vue
@@ -53,7 +53,6 @@ const onClose = () => {
     <n-modal
         v-model:show="dialogStore.renameDialogVisible"
         :closable="false"
-        :close-on-esc="false"
         :mask-closable="false"
         :negative-button-props="{ focusable: false, size: 'medium' }"
         :negative-text="$t('common.cancel')"
@@ -61,8 +60,10 @@ const onClose = () => {
         :positive-text="$t('common.confirm')"
         :show-icon="false"
         :title="$t('interface.rename_key')"
+        close-on-esc
         preset="dialog"
         transform-origin="center"
+        @esc="onClose"
         @positive-click="onRename"
         @negative-click="onClose">
         <n-form
diff --git a/frontend/src/components/dialogs/SetTtlDialog.vue b/frontend/src/components/dialogs/SetTtlDialog.vue
index d87dd7b..5024ff1 100644
--- a/frontend/src/components/dialogs/SetTtlDialog.vue
+++ b/frontend/src/components/dialogs/SetTtlDialog.vue
@@ -93,7 +93,6 @@ const onConfirm = async () => {
     <n-modal
         v-model:show="dialogStore.ttlDialogVisible"
         :closable="false"
-        :close-on-esc="false"
         :mask-closable="false"
         :negative-button-props="{ focusable: false, size: 'medium' }"
         :negative-text="$t('common.cancel')"
@@ -103,8 +102,10 @@ const onConfirm = async () => {
         :positive-text="$t('common.save')"
         :show-icon="false"
         :title="title"
+        close-on-esc
         preset="dialog"
-        transform-origin="center">
+        transform-origin="center"
+        @esc="onClose">
         <n-form :model="ttlForm" :show-require-mark="false" label-placement="top">
             <n-form-item v-if="!isBatchAction" :label="$t('common.key')">
                 <n-input :value="ttlForm.key" readonly />
diff --git a/frontend/src/components/sidebar/Ribbon.vue b/frontend/src/components/sidebar/Ribbon.vue
index bbbd64e..e78f196 100644
--- a/frontend/src/components/sidebar/Ribbon.vue
+++ b/frontend/src/components/sidebar/Ribbon.vue
@@ -204,11 +204,7 @@ const exThemeVars = computed(() => {
         </div>
 
         <!-- wechat official modal -->
-        <n-modal
-            :show="showWechat"
-            transform-origin="center"
-            @close="showWechat = false"
-            @mask-click="showWechat = false">
+        <n-modal v-model:show="showWechat" close-on-esc mask-closable transform-origin="center">
             <n-image :src="wechatUrl" :width="400" preview-disabled />
         </n-modal>
     </div>