diff --git a/src/components/ArrayEditorTable.vue b/src/components/ArrayEditorTable.vue
index 2d8122531..17ff494e3 100644
--- a/src/components/ArrayEditorTable.vue
+++ b/src/components/ArrayEditorTable.vue
@@ -7,14 +7,14 @@
     </el-table-column>
     <el-table-column v-if="!disabled" width="100">
       <template #header>
-        <a href="javascript:;" class="btn" @click="addColumn">
+        <el-button link type="primary" @click="addColumn">
           {{ $t('Base.add') }}
-        </a>
+        </el-button>
       </template>
       <template #default="{ $index }">
-        <a href="javascript:;" class="btn" @click="deleteItem($index)">
+        <el-button link type="primary" @click="deleteItem($index)">
           {{ $t('Base.delete') }}
-        </a>
+        </el-button>
       </template>
     </el-table-column>
   </el-table>
diff --git a/src/components/Buttons/CreateButton.vue b/src/components/Buttons/CreateButton.vue
index 1aac8eb2f..7549e2208 100644
--- a/src/components/Buttons/CreateButton.vue
+++ b/src/components/Buttons/CreateButton.vue
@@ -1,8 +1,7 @@
 <template>
-  <el-button type="primary" :icon="Plus">
-    <template v-if="!$slots.default">
-      {{ t('Base.create') }}
-    </template>
+  <el-button type="primary" :icon="Plus" v-if="noText"></el-button>
+  <el-button type="primary" :icon="Plus" v-else>
+    <template v-if="!$slots.default">{{ t('Base.create') }}</template>
     <slot />
   </el-button>
 </template>
@@ -10,6 +9,11 @@
 <script setup lang="ts">
 import { Plus } from '@element-plus/icons-vue'
 import { useI18n } from 'vue-i18n'
+import { defineProps } from 'vue'
+
+defineProps<{
+  noText?: boolean
+}>()
 
 const { t } = useI18n()
 </script>
diff --git a/src/components/Buttons/RefreshButton.vue b/src/components/Buttons/RefreshButton.vue
index dda6e8b2a..c2566d07e 100644
--- a/src/components/Buttons/RefreshButton.vue
+++ b/src/components/Buttons/RefreshButton.vue
@@ -1,6 +1,7 @@
 <template>
-  <el-button type="primary" :icon="Refresh">
-    <template v-if="!$slots.default && !noText">
+  <el-button type="primary" :icon="Refresh" v-if="noText"></el-button>
+  <el-button type="primary" :icon="Refresh" v-else>
+    <template v-if="!$slots.default">
       {{ t('Base.refresh') }}
     </template>
     <slot />
diff --git a/src/components/Buttons/SearchButton.vue b/src/components/Buttons/SearchButton.vue
index e3ec63d8a..df2760d6f 100644
--- a/src/components/Buttons/SearchButton.vue
+++ b/src/components/Buttons/SearchButton.vue
@@ -1,6 +1,7 @@
 <template>
-  <el-button type="primary" plain :icon="Search">
-    <template v-if="!noText">{{ t('search') }}</template>
+  <el-button type="primary" plain :icon="Search" v-if="noText"></el-button>
+  <el-button type="primary" plain :icon="Search" v-else>
+    <template>{{ tl('search') }}</template>
   </el-button>
 </template>
 
@@ -13,5 +14,5 @@ defineProps<{
   noText?: boolean
 }>()
 
-const { t } = useI18nTl('Base')
+const { tl } = useI18nTl('Base')
 </script>
diff --git a/src/components/Buttons/ShowMoreButton.vue b/src/components/Buttons/ShowMoreButton.vue
new file mode 100644
index 000000000..8112636a4
--- /dev/null
+++ b/src/components/Buttons/ShowMoreButton.vue
@@ -0,0 +1,36 @@
+<template>
+  <el-tooltip :content="!showMoreQuery ? t('Base.showMore') : t('Base.lessMore')" placement="top">
+    <el-button
+      class="icon-button"
+      plain
+      :icon="showMoreQuery ? ArrowUp : ArrowDown"
+      @click="showMoreQuery = !showMoreQuery"
+    >
+    </el-button>
+  </el-tooltip>
+</template>
+
+<script setup lang="ts">
+import { ArrowUp, ArrowDown } from '@element-plus/icons-vue'
+import { useI18n } from 'vue-i18n'
+import { defineProps, defineEmits, computed } from 'vue'
+
+const { t } = useI18n()
+
+const props = defineProps<{
+  modelValue: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: boolean): void
+}>()
+
+const showMoreQuery = computed({
+  get() {
+    return props.modelValue
+  },
+  set(value) {
+    emit('update:modelValue', value)
+  },
+})
+</script>
diff --git a/src/components/Buttons/index.ts b/src/components/Buttons/index.ts
index 6edce5559..fb78192a6 100644
--- a/src/components/Buttons/index.ts
+++ b/src/components/Buttons/index.ts
@@ -3,3 +3,4 @@ export { default as SearchButton } from './SearchButton.vue'
 export { default as TableButton } from './TableButton.vue'
 export { default as RefreshButton } from './RefreshButton.vue'
 export { default as ResetButton } from './ResetButton.vue'
+export { default as ShowMoreButton } from './ShowMoreButton.vue'
diff --git a/src/components/ObjectArrayEditor.vue b/src/components/ObjectArrayEditor.vue
index 1e453d044..8b7236612 100644
--- a/src/components/ObjectArrayEditor.vue
+++ b/src/components/ObjectArrayEditor.vue
@@ -22,8 +22,8 @@
           <CustomFormItem :prop="getProp($index, key)" :rules="getFormItemRules(key)">
             <SchemaFormItem
               v-model="arr[$index][key]"
-              :type="(value.type as any)"
-              :symbols="(value.symbols as string[] | number[] | undefined)"
+              :type="(value as any).type"
+              :symbols="(value as any).symbols"
               :custom-props="value.componentProps"
               :property="value"
               :items="value.items"
@@ -34,14 +34,14 @@
     </el-table-column>
     <el-table-column width="80px" v-if="!disabled">
       <template #header>
-        <a href="javascript:;" @click="addItem">
+        <el-button link type="primary" @click="addItem">
           {{ $t('Base.add') }}
-        </a>
+        </el-button>
       </template>
       <template #default="{ $index }">
-        <a href="javascript:;" @click="deleteItem($index)">
+        <el-button link type="primary" @click="deleteItem($index)">
           {{ $t('Base.delete') }}
-        </a>
+        </el-button>
       </template>
     </el-table-column>
   </el-table>
@@ -61,8 +61,8 @@
           >
             <SchemaFormItem
               v-model="item[key]"
-              :type="(value.type as any)"
-              :symbols="(value.symbols  as string[] | number[] | undefined)"
+              :type="(value as any).type"
+              :symbols="(value as any).symbols"
             />
           </CustomFormItem>
         </div>
diff --git a/src/components/global-components.ts b/src/components/global-components.ts
index 83153c5d2..8793ab858 100644
--- a/src/components/global-components.ts
+++ b/src/components/global-components.ts
@@ -1,5 +1,12 @@
 import CustomInputPassword from './CustomInputPassword.vue'
-import { CreateButton, TableButton, RefreshButton, SearchButton } from './Buttons'
+import {
+  CreateButton,
+  TableButton,
+  RefreshButton,
+  SearchButton,
+  ResetButton,
+  ShowMoreButton,
+} from './Buttons'
 import type { App } from 'vue'
 
 export default {
@@ -9,5 +16,7 @@ export default {
     app.component('TableButton', TableButton)
     app.component('RefreshButton', RefreshButton)
     app.component('SearchButton', SearchButton)
+    app.component('ResetButton', ResetButton)
+    app.component('ShowMoreButton', ShowMoreButton)
   },
 }
diff --git a/src/i18n/General.ts b/src/i18n/General.ts
index 04d1b1f3e..7f2e16c0f 100644
--- a/src/i18n/General.ts
+++ b/src/i18n/General.ts
@@ -255,4 +255,28 @@ export default {
     zh: '持久会话中消息保留时长，超期的消息不会发送到订阅者。',
     en: 'The duration of message retention in a persistent session,  messages that expire are not delivered to subscribers.',
   },
+  enableForceShutdown: {
+    zh: '启用强制关闭',
+    en: 'Enable Force Shutdown',
+  },
+  enableForceShutdownDesc: {
+    zh: '启用 <code>force_shutdown</code>（强制关闭）功能，当进程堆内存或邮箱大小超过设定值时强制关闭进程',
+    en: 'Enable <code>force_shutdown</code> feature. Process will be forcibly shutdown when heap memory or mailbox size exceeds the set value',
+  },
+  maxHeapSize: {
+    zh: '最大堆内存',
+    en: 'Max Heap Size',
+  },
+  maxHeapSizeDesc: {
+    zh: '进程的最大堆内存大小。如果启用了强制关闭功能，超过此限制的进程将自动退出或被强制终止。进程消息队列（邮箱）中的消息也是堆的一部分。进程关闭可分为以下两种情况：\n- 进程在运行时主动检查当前堆大小，发现超出限制后主动退出\n- 底层调度系统在为进程执行垃圾回收后检查当前堆大小，发现超出限制后强制终止进程\n\n注意：上述两种情况产生的错误日志会有所不同。前者生成的日志类似于 <code>...errorContext: connection_shutdown, reason: #{max => 2097152, reason => proc_heap_too_large, value => 2787348}..</code>，后者生成的日志类似于 <code>...Context: maximum heap size reached...</code>。',
+    en: 'The maximum heap size of the process. If the force_shutdown is enabled, processes that exceed this limit will automatically exit or be forcibly killed. Messages in the process message queue (mailbox) are also part of the heap. The shutdown of a process can be divided into the following two situations:\n- The process actively checks the current heap size during its own operation, and actively exits after finding that it exceeds the limit.\n- The underlying scheduling system checks the current heap size after performing garbage collection for the process, and forcibly kills the process after finding that it exceeds the limit.\n\nNote: The Error logs generated by the above two will be different. The log generated by the former is similar to <code>...errorContext: connection_shutdown, reason: #{max => 2097152, reason => proc_heap_too_large, value => 2787348}..</code>, and the log generated by the latter is similar to <code>...Context: maximum heap size reached...</code>.',
+  },
+  maxMailboxSize: {
+    zh: '最大邮箱大小',
+    en: 'Max Mailbox Size',
+  },
+  maxMailboxSizeDesc: {
+    zh: 'EMQX 为每个客户端连接创建至少一个轻量级进程。每个进程都有自己的消息队列（邮箱）来保存来自其他进程（如 MQTT 消息）的消息，以便进程可以随时从消息队列（邮箱）中读取消息。如果系统繁忙或进程因繁忙的套接字而挂起，消息队列可能会积累大量消息。为避免过度使用内存，当进程的消息队列长度超过此值时，EMQX 将强制关闭该进程。',
+    en: 'EMQX creates at least one lightweight process for each client connection. Each process has its own message queue (aka mailbox) to hold messages from other processes (e.g. MQTT messages) so that the process can read messages from the message queue (mailbox) at any time. If the system is busy or the process hangs due to a busy socket (see <code>high_watermark</code>), the message queue can accumulate many messages. To avoid excessive memory usage, EMQX will force a process to shut down when the length of its message queue exceeds <code>max_mailbox_size</code>.',
+  },
 }
diff --git a/src/i18n/components.ts b/src/i18n/components.ts
index 4e1974c5c..fc1fcc794 100644
--- a/src/i18n/components.ts
+++ b/src/i18n/components.ts
@@ -287,6 +287,10 @@ export default {
     zh: '会话持久化',
     en: 'Durable Sessions',
   },
+  'mqtt-force-shutdown': {
+    zh: '强制关闭',
+    en: 'Force Shutdown',
+  },
   /* For Quick Panel Start */
   'rule-create': {
     zh: '创建规则',
diff --git a/src/router/index.ts b/src/router/index.ts
index 3c4656b73..f5c76989a 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -504,6 +504,11 @@ export const routes: Array<RouteRecordRaw> = [
         name: 'mqtt-system-topic',
         component: () => import('@/views/Config/BasicConfig/SystemTopics.vue'),
       },
+      {
+        path: 'force-shutdown',
+        name: 'mqtt-force-shutdown',
+        component: () => import('@/views/Config/BasicConfig/ForceShutdown.vue'),
+      },
     ],
   },
   // log config
@@ -617,7 +622,7 @@ export function toLogin(path?: string): void {
   currentPath !== '/login' &&
     router.push({
       path: '/login',
-      query: { to: path ? path : currentPath ?? undefined },
+      query: { to: path ? path : (currentPath ?? undefined) },
     })
 }
 
diff --git a/src/style/normalize.scss b/src/style/normalize.scss
index 01effec83..a651da2dc 100644
--- a/src/style/normalize.scss
+++ b/src/style/normalize.scss
@@ -256,6 +256,7 @@
     & + .el-dropdown {
       margin-left: 0;
       margin-right: 12px;
+      vertical-align: middle;
     }
   }
 }
diff --git a/src/types/config.d.ts b/src/types/config.d.ts
index 8174238b7..efe7b1c7c 100644
--- a/src/types/config.d.ts
+++ b/src/types/config.d.ts
@@ -1,4 +1,5 @@
 import { ComponentPublicInstance } from 'vue'
+import { EmqxForceShutdown } from './schemas/configs.schemas'
 
 export interface SubTabComponent extends ComponentPublicInstance {
   index: number
@@ -171,7 +172,7 @@ export interface Zone {
   mqtt: Mqtt
   stats: Stats
   flapping_detect: FlappingDetect
-  force_shutdown: ForceShutdown
+  force_shutdown: EmqxForceShutdown
   conn_congestion: ConnCongestion
   force_gc: ForceGc
   overload_protection: OverloadProtection
@@ -220,12 +221,6 @@ export interface FlappingDetect {
   ban_time: string
 }
 
-export interface ForceShutdown {
-  enable: boolean
-  max_message_queue_len: number
-  max_heap_size: string
-}
-
 export interface ConnCongestion {
   enable_alarm: boolean
   min_alarm_sustain_duration: string
diff --git a/src/views/Auth/components/AuthnManager.vue b/src/views/Auth/components/AuthnManager.vue
index be1ebc193..40353ab74 100644
--- a/src/views/Auth/components/AuthnManager.vue
+++ b/src/views/Auth/components/AuthnManager.vue
@@ -32,7 +32,7 @@
           <authn-users-import @uploadedData="loadData" />
         </template>
         <el-tooltip :content="$t('Base.add')" placement="top">
-          <CreateButton class="icon-button" @click="addCommand"><span /></CreateButton>
+          <CreateButton class="icon-button" @click="addCommand" no-text />
         </el-tooltip>
       </div>
     </div>
@@ -149,7 +149,7 @@ const prop = defineProps({
 })
 
 const { t } = useI18n()
-let record = ref<DataManagerItem>(createRawUserForm())
+const record = ref<DataManagerItem>(createRawUserForm())
 const tableData = ref([])
 const lockTable = ref(false)
 const dialogVisible = ref(false)
@@ -255,7 +255,7 @@ const handleDelete = (row: DataManagerItem) => {
 }
 
 const save = async () => {
-  let validation = await recordForm.value.validate()
+  const validation = await recordForm.value.validate()
   if (!validation) {
     return
   }
diff --git a/src/views/Auth/components/AuthzManager.vue b/src/views/Auth/components/AuthzManager.vue
index eb39b9817..7f373c913 100644
--- a/src/views/Auth/components/AuthzManager.vue
+++ b/src/views/Auth/components/AuthzManager.vue
@@ -24,7 +24,9 @@
         </template>
       </div>
       <el-tooltip :content="$t('Base.add')" placement="top">
-        <CreateButton class="icon-button" @click="handleAdd"><span /></CreateButton>
+        <CreateButton class="icon-button" @click="handleAdd">
+          <template v-if="false"></template>
+        </CreateButton>
       </el-tooltip>
     </div>
     <el-table
@@ -211,28 +213,30 @@
               </el-table-column>
               <el-table-column align="right" max-width="160px">
                 <template #header>
-                  <a href="javascript:;" class="btn" @click="addColumn">
+                  <el-button link type="primary" class="btn" @click="addColumn">
                     {{ $t('Base.add') }}
-                  </a>
+                  </el-button>
                 </template>
                 <template #default="{ row, $index }">
-                  <a
-                    href="javascript:;"
-                    :class="['btn', { disabled: $index === 0 }]"
+                  <el-button
+                    link
+                    type="primary"
+                    :disabled="$index === 0"
                     @click="handleUp(row, $index)"
                   >
                     {{ $t('Base.up') }}
-                  </a>
-                  <a
-                    href="javascript:;"
-                    :class="['btn', { disabled: $index === rulesData.length - 1 }]"
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    :disabled="$index === rulesData.length - 1"
                     @click="handleDown(row, $index)"
                   >
                     {{ $t('Base.down') }}
-                  </a>
-                  <a href="javascript:;" class="btn" @click="deleteItem(row, $index)">
+                  </el-button>
+                  <el-button link type="primary" class="btn" @click="deleteItem(row, $index)">
                     {{ $t('Base.delete') }}
-                  </a>
+                  </el-button>
                 </template>
               </el-table-column>
             </el-table>
@@ -661,12 +665,13 @@ export default defineComponent({
   }
   .form-table {
     .cell {
-      .btn.disabled {
-        cursor: not-allowed;
-        color: var(--color-text-placeholder);
-      }
-      .btn + .btn {
-        margin-left: 8px;
+      .el-button {
+        padding: 0;
+        margin-right: 0;
+        border: none;
+        & + .el-button {
+          margin-left: 8px;
+        }
       }
     }
   }
diff --git a/src/views/Clients/Clients.vue b/src/views/Clients/Clients.vue
index d5c83f2c8..ea1049022 100644
--- a/src/views/Clients/Clients.vue
+++ b/src/views/Clients/Clients.vue
@@ -74,18 +74,7 @@
         <el-col v-bind="{ sm: 12, md: 12, lg: showMoreQuery ? 12 : 6 }" class="col-oper">
           <SearchButton @click="handleSearch" />
           <ResetButton @click="handleReset" />
-          <el-tooltip
-            :content="!showMoreQuery ? $t('Base.showMore') : $t('Base.lessMore')"
-            placement="top"
-          >
-            <el-button
-              class="icon-button"
-              plain
-              :icon="showMoreQuery ? ArrowUp : ArrowDown"
-              @click="showMoreQuery = !showMoreQuery"
-            >
-            </el-button>
-          </el-tooltip>
+          <ShowMoreButton v-model="showMoreQuery" />
         </el-col>
       </el-row>
     </el-form>
@@ -185,7 +174,7 @@ import { useCursorPagination } from '@/hooks/usePagination'
 import usePaginationRemember from '@/hooks/usePaginationRemember'
 import { Client } from '@/types/client'
 import { CheckStatus } from '@/types/enum'
-import { ArrowDown, ArrowUp, Delete } from '@element-plus/icons-vue'
+import { Delete } from '@element-plus/icons-vue'
 import { isEmptyObj } from '@emqx/shared-ui-utils'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { computed } from 'vue'
diff --git a/src/views/Config/BasicConfig/ForceShutdown.vue b/src/views/Config/BasicConfig/ForceShutdown.vue
new file mode 100644
index 000000000..4bb8db673
--- /dev/null
+++ b/src/views/Config/BasicConfig/ForceShutdown.vue
@@ -0,0 +1,155 @@
+<template>
+  <div class="force-shutdown app-wrapper">
+    <el-card class="allow-overflow">
+      <el-skeleton v-if="configLoading" :rows="12" animated />
+      <div class="schema-form" v-else>
+        <el-form
+          ref="forceShutdownForm"
+          class="configuration-form"
+          label-position="right"
+          require-asterisk-position="left"
+          hide-required-asterisk
+          :label-width="store.state.lang === 'zh' ? 138 : 210"
+          :model="forceShutdownConfig"
+          :validate-on-rule-change="false"
+          @keyup.enter="updateConfigData()"
+        >
+          <el-row>
+            <el-col :span="21" class="custom-col">
+              <el-form-item prop="enable">
+                <template #label>
+                  <FormItemLabel
+                    :label="tl('enableForceShutdown')"
+                    :desc="tl('enableForceShutdownDesc')"
+                    desc-marked
+                  />
+                </template>
+                <el-switch v-model="forceShutdownConfig.enable" />
+              </el-form-item>
+            </el-col>
+
+            <el-col :span="21" class="custom-col">
+              <el-form-item prop="max_heap_size">
+                <template #label>
+                  <FormItemLabel
+                    :label="tl('maxHeapSize')"
+                    :desc="tl('maxHeapSizeDesc')"
+                    desc-marked
+                  />
+                </template>
+                <InputWithUnit
+                  v-model="forceShutdownConfig.max_heap_size"
+                  :units="['KB', 'MB', 'GB']"
+                  :disabled="!configEnable"
+                />
+              </el-form-item>
+            </el-col>
+
+            <el-col :span="21" class="custom-col">
+              <el-form-item prop="max_mailbox_size">
+                <template #label>
+                  <FormItemLabel
+                    :label="tl('maxMailboxSize')"
+                    :desc="tl('maxMailboxSizeDesc')"
+                    desc-marked
+                  />
+                </template>
+                <CustomInputNumber
+                  v-model.number="forceShutdownConfig.max_mailbox_size"
+                  placeholder="1000"
+                  :min="0"
+                  :disabled="!configEnable"
+                />
+              </el-form-item>
+            </el-col>
+
+            <el-col :span="24" class="btn-col">
+              <el-button type="primary" :loading="saveLoading" @click="updateConfigData()">
+                {{ $t('Base.saveChanges') }}
+              </el-button>
+            </el-col>
+          </el-row>
+        </el-form>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { getDefaultZoneConfigs, updateDefaultZoneConfigs } from '@/api/config'
+import CustomInputNumber from '@/components/CustomInputNumber.vue'
+import FormItemLabel from '@/components/FormItemLabel.vue'
+import InputWithUnit from '@/components/InputWithUnit.vue'
+import useConfFooterStyle from '@/hooks/useConfFooterStyle'
+import useDataNotSaveConfirm from '@/hooks/useDataNotSaveConfirm'
+import useI18nTl from '@/hooks/useI18nTl'
+import { Zone } from '@/types/config'
+import { ElMessage } from 'element-plus'
+import { isEqual, cloneDeep } from 'lodash'
+import { onMounted, ref, computed } from 'vue'
+import { useStore } from 'vuex'
+import { EmqxForceShutdown } from '@/types/schemas/configs.schemas'
+
+const { t, tl } = useI18nTl('General')
+
+const configLoading = ref(false)
+const saveLoading = ref(false)
+const store = useStore()
+let rawData: any = undefined
+
+const forceShutdownConfig = ref<EmqxForceShutdown>({
+  enable: false,
+  max_heap_size: '32MB',
+  max_mailbox_size: 1000,
+})
+
+const configEnable = computed(() => forceShutdownConfig.value?.enable === true)
+
+const checkDataIsChanged = () => !isEqual(forceShutdownConfig.value, rawData)
+useDataNotSaveConfirm(checkDataIsChanged)
+
+const loadData = async () => {
+  try {
+    configLoading.value = true
+    const res = await getDefaultZoneConfigs()
+    forceShutdownConfig.value = res.force_shutdown
+    rawData = cloneDeep(forceShutdownConfig.value)
+  } catch (error) {
+    //
+  } finally {
+    configLoading.value = false
+  }
+}
+
+const updateConfigData = async () => {
+  saveLoading.value = true
+  try {
+    const zoneData: Zone = await getDefaultZoneConfigs()
+    zoneData.force_shutdown = forceShutdownConfig.value
+    await updateDefaultZoneConfigs(zoneData)
+    ElMessage.success(t('Base.updateSuccess'))
+    rawData = cloneDeep(forceShutdownConfig.value)
+  } catch (err) {
+    loadData()
+  } finally {
+    saveLoading.value = false
+  }
+}
+
+const { addObserverToFooter } = useConfFooterStyle()
+
+onMounted(async () => {
+  await loadData()
+  addObserverToFooter()
+})
+</script>
+
+<style lang="scss" scoped>
+.custom-col {
+  padding-right: 0;
+}
+.btn-col {
+  margin-top: 16px;
+  text-align: right;
+}
+</style>
diff --git a/src/views/Dashboard/components/NodesGraphCard.vue b/src/views/Dashboard/components/NodesGraphCard.vue
index aaf34253b..fe764531a 100644
--- a/src/views/Dashboard/components/NodesGraphCard.vue
+++ b/src/views/Dashboard/components/NodesGraphCard.vue
@@ -12,9 +12,9 @@
         <div class="node-info" v-if="currentInfo">
           <div class="node-card-header">
             <div class="node-title">{{ tl('nodeData') }}</div>
-            <a class="nodes-link" href="javascript:;" @click="$router.push('nodes')">
+            <router-link class="nodes-link" :to="{ name: 'nodes' }">
               {{ tl('viewNodes') }}<el-icon><Right /></el-icon>
-            </a>
+            </router-link>
           </div>
           <div class="node-card-body">
             <el-row :gutter="26">
@@ -155,10 +155,10 @@ const { nodes, loadData: getNodes } = useClusterNodes({
  * first time get node data, select the first node
  */
 let isInitialized = false
-let stats: Ref<Array<NodeStatisticalData>> = ref([])
-let graph: Ref<undefined | HTMLElement> = ref(undefined)
+const stats: Ref<Array<NodeStatisticalData>> = ref([])
+const graph: Ref<undefined | HTMLElement> = ref(undefined)
 const currentNodeName = ref('')
-let infoLoading: Ref<boolean> = ref(true)
+const infoLoading: Ref<boolean> = ref(true)
 
 const currentInfo = computed(() => {
   if (!currentNodeName.value || nodes.value.length === 0 || stats.value.length === 0) {
@@ -170,7 +170,7 @@ const currentInfo = computed(() => {
 const { transMsNumToSimpleStr } = useDurationStr()
 const { syncPolling } = useSyncPolling()
 
-let getStats = async () => {
+const getStats = async () => {
   try {
     stats.value = await loadStats()
   } catch (error) {
@@ -186,7 +186,7 @@ const getNodeInfoByName = (nodeName: string) => {
 
 const { tl } = useI18nTl('Dashboard')
 
-let calcMemoryPercentage = computed(() => {
+const calcMemoryPercentage = computed(() => {
   return calcPercentage(
     currentInfo.value.node['memory_used'],
     currentInfo.value.node['memory_total'],
diff --git a/src/views/Diagnose/LogTrace/LogTrace.vue b/src/views/Diagnose/LogTrace/LogTrace.vue
index d09c40981..31d0e2486 100644
--- a/src/views/Diagnose/LogTrace/LogTrace.vue
+++ b/src/views/Diagnose/LogTrace/LogTrace.vue
@@ -10,17 +10,9 @@
     <el-table :data="traceTable" v-loading="traceTbLoading" class="data-table">
       <el-table-column :label="$t('LogTrace.name')" prop="name" :min-width="100">
         <template #default="{ row }">
-          <a
-            href="javascript:;"
-            @click="
-              $router.push({
-                name: 'log-trace-detail',
-                params: { id: row.name },
-              })
-            "
-          >
+          <router-link :to="{ name: 'log-trace-detail', params: { id: row.name } }">
             {{ row.name }}
-          </a>
+          </router-link>
         </template>
       </el-table-column>
       <el-table-column :label="$t('LogTrace.type')" prop="type" :min-width="100">
diff --git a/src/views/Gateway/components/topicEditList.vue b/src/views/Gateway/components/topicEditList.vue
index d465ea6a8..042bc3420 100644
--- a/src/views/Gateway/components/topicEditList.vue
+++ b/src/views/Gateway/components/topicEditList.vue
@@ -23,14 +23,14 @@
         </el-table-column>
         <el-table-column width="80">
           <template #header>
-            <TableButton size="small" @click="addTopic()" :disabled="disableAdd()">
-              {{ t('Base.add') }}
-            </TableButton>
+            <el-button link type="primary" @click="addTopic()" :disabled="disableAdd()">
+              {{ $t('Base.add') }}
+            </el-button>
           </template>
           <template #default="{ row }">
-            <TableButton @click="delTopic(row)">
+            <el-button link type="primary" @click="delTopic(row)">
               {{ $t('Base.delete') }}
-            </TableButton>
+            </el-button>
           </template>
         </el-table-column>
       </el-table>
diff --git a/src/views/RuleEngine/Rule/components/RuleFilterForm.vue b/src/views/RuleEngine/Rule/components/RuleFilterForm.vue
index 6cf976360..5f7f9d105 100644
--- a/src/views/RuleEngine/Rule/components/RuleFilterForm.vue
+++ b/src/views/RuleEngine/Rule/components/RuleFilterForm.vue
@@ -107,18 +107,7 @@
       <el-col v-bind="colProps" class="col-oper">
         <SearchButton @click="searchRule" />
         <ResetButton @click="handleReset" />
-        <el-tooltip
-          :content="!showMoreQuery ? $t('Base.showMore') : $t('Base.lessMore')"
-          placement="top"
-        >
-          <el-button
-            class="icon-button"
-            plain
-            :icon="showMoreQuery ? ArrowUp : ArrowDown"
-            @click="showMoreQuery = !showMoreQuery"
-          >
-          </el-button>
-        </el-tooltip>
+        <ShowMoreButton v-model="showMoreQuery" />
       </el-col>
     </el-row>
   </el-form>
@@ -131,7 +120,6 @@ import useSourceList from '@/hooks/Rule/action/useSourceList'
 import useBridgeTypeValue from '@/hooks/Rule/bridge/useBridgeTypeValue'
 import useI18nTl from '@/hooks/useI18nTl'
 import { FilterParamsForQueryRules } from '@/types/rule'
-import { ArrowDown, ArrowUp } from '@element-plus/icons-vue'
 import { omit } from 'lodash'
 import type { Ref } from 'vue'
 import { computed, ref } from 'vue'
diff --git a/src/views/RuleEngine/components/RuleForm.vue b/src/views/RuleEngine/components/RuleForm.vue
index 3d567d6f7..a0c51739b 100644
--- a/src/views/RuleEngine/components/RuleForm.vue
+++ b/src/views/RuleEngine/components/RuleForm.vue
@@ -79,6 +79,9 @@
         <el-button @click="$router.push({ name: 'rule' })">
           {{ savedAfterDataChange ? tl('backToRuleList') : $t('Base.cancel') }}
         </el-button>
+        <el-button type="primary" plain :disabled="disabled" @click="saveAsCopy" v-if="isEdit">
+          {{ tl('saveAsCopy') }}
+        </el-button>
         <el-button
           type="primary"
           :disabled="disabled || isDataSaveButtonDisabled"
@@ -87,9 +90,6 @@
         >
           {{ isEdit ? $t('Base.update') : $t('Base.save') }}
         </el-button>
-        <el-button type="primary" plain :disabled="disabled" @click="saveAsCopy" v-if="isEdit">
-          {{ tl('saveAsCopy') }}
-        </el-button>
       </el-col>
     </el-row>
   </div>
diff --git a/src/views/Subscriptions/Subscriptions.vue b/src/views/Subscriptions/Subscriptions.vue
index f939ef3ba..eef42e9da 100644
--- a/src/views/Subscriptions/Subscriptions.vue
+++ b/src/views/Subscriptions/Subscriptions.vue
@@ -61,18 +61,7 @@
         <el-col class="col-oper" v-bind="colProps">
           <SearchButton @click="handleSearch" />
           <ResetButton @click="handleReset" />
-          <el-tooltip
-            :content="!showMoreQuery ? $t('Base.showMore') : $t('Base.lessMore')"
-            placement="top"
-          >
-            <el-button
-              class="icon-button"
-              plain
-              :icon="showMoreQuery ? ArrowUp : ArrowDown"
-              @click="showMoreQuery = !showMoreQuery"
-            >
-            </el-button>
-          </el-tooltip>
+          <ShowMoreButton v-model="showMoreQuery" />
         </el-col>
       </el-row>
     </el-form>
@@ -129,7 +118,6 @@ import InfoTooltip from '@/components/InfoTooltip.vue'
 import useMQTTVersion5NewConfig from '@/hooks/useMQTTVersion5NewConfig'
 import usePaginationWithHasNext from '@/hooks/usePaginationWithHasNext'
 import useClusterNodes from '@/hooks/useClusterNodes'
-import { ArrowDown, ArrowUp } from '@element-plus/icons-vue'
 import CommonPagination from '../../components/commonPagination.vue'
 import 'element-plus/theme-chalk/display.css'
 
@@ -163,8 +151,8 @@ const handleReset = () => {
 }
 const genQueryParams = (params: Record<string, any>) => {
   const { clientid, qos, share_group, node, match_topic } = params
-  let newParams: Record<string, any> = {
-    clientid: clientid === '' ? undefined : clientid ?? undefined,
+  const newParams: Record<string, any> = {
+    clientid: clientid === '' ? undefined : (clientid ?? undefined),
     qos: qos === '' ? undefined : qos,
     share_group: share_group || undefined,
     node: node || undefined,