refactor(global): extract ResetButton component

src/components/Buttons/ResetButton.vue

@@ -0,0 +1,12 @@
+<template>
+  <el-button :icon="RefreshLeft">
+    {{ t('Base.reset') }}
+  </el-button>
+</template>
+
+<script lang="ts" setup>
+import { RefreshLeft } from '@element-plus/icons-vue'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+</script>

src/components/Buttons/index.ts

@@ -0,0 +1,5 @@
+export { default as CreateButton } from './CreateButton.vue'
+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'

src/components/global-components.ts

@@ -1,8 +1,5 @@
 import CustomInputPassword from './CustomInputPassword.vue'
-import CreateButton from './CreateButton.vue'
-import TableButton from './TableButton.vue'
-import RefreshButton from './RefreshButton.vue'
-import SearchButton from './SearchButton.vue'
+import { CreateButton, TableButton, RefreshButton, SearchButton } from './Buttons'
 import type { App } from 'vue'
 
 export default {

src/views/Clients/Clients.vue

@@ -71,9 +71,7 @@
         </template>
         <el-col v-bind="{ sm: 12, md: 12, lg: showMoreQuery ? 12 : 6 }" class="col-oper">
           <SearchButton @click="handleSearch" />
-          <el-button :icon="RefreshLeft" @click="handleReset">
-            {{ $t('Base.reset') }}
-          </el-button>
+          <ResetButton @click="handleReset" />
           <el-tooltip
             :content="!showMoreQuery ? $t('Base.showMore') : $t('Base.lessMore')"
             placement="top"
@@ -185,7 +183,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, RefreshLeft } from '@element-plus/icons-vue'
+import { ArrowDown, ArrowUp, Delete } from '@element-plus/icons-vue'
 import { isEmptyObj } from '@emqx/shared-ui-utils'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { computed } from 'vue'

src/views/General/BannedClient.vue

@@ -32,9 +32,7 @@
 
         <el-col v-bind="colProps" class="buttons-wrap">
           <SearchButton @click="refreshListData" />
-          <el-button :icon="RefreshLeft" @click="handleReset">
-            {{ t('Base.reset') }}
-          </el-button>
+          <ResetButton @click="handleReset" />
         </el-col>
       </el-row>
     </el-form>
@@ -94,7 +92,7 @@ import useBannedType from '@/hooks/Auth/useBannedType'
 import useI18nTl from '@/hooks/useI18nTl'
 import usePaginationWithHasNext from '@/hooks/usePaginationWithHasNext'
 import { BannedItem } from '@/types/systemModule'
-import { RefreshLeft, Remove } from '@element-plus/icons-vue'
+import { Remove } from '@element-plus/icons-vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import moment from 'moment'
 import { Banned } from 'src/types/auth'

src/views/Retained/Retained.vue

@@ -12,9 +12,7 @@
         </el-col>
         <el-col :span="8">
           <SearchButton @click="handleSearch" />
-          <el-button :icon="RefreshLeft" @click="handleReset">
-            {{ $t('Base.reset') }}
-          </el-button>
+          <ResetButton @click="handleReset" />
         </el-col>
       </el-row>
     </el-form>
@@ -106,7 +104,7 @@ import CommonPagination from '@/components/commonPagination.vue'
 import useI18nTl from '@/hooks/useI18nTl'
 import usePaginationWithHasNext from '@/hooks/usePaginationWithHasNext'
 import { RetainerMessage } from '@/types/extension'
-import { RefreshLeft, Remove, Setting } from '@element-plus/icons-vue'
+import { Remove, Setting } from '@element-plus/icons-vue'
 import { ElMessage, ElMessageBox, ElMessageBox as MB } from 'element-plus'
 
 const { tl, t } = useI18nTl('Extension')

src/views/RuleEngine/Rule/components/RuleFilterForm.vue

@@ -110,9 +110,7 @@
       </template>
       <el-col v-bind="colProps" class="col-oper">
         <SearchButton @click="searchRule" />
-        <el-button :icon="RefreshLeft" @click="handleReset">
-          {{ $t('Base.reset') }}
-        </el-button>
+        <ResetButton @click="handleReset" />
         <el-tooltip
           :content="!showMoreQuery ? $t('Base.showMore') : $t('Base.lessMore')"
           placement="top"
@@ -137,7 +135,7 @@ 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, RefreshLeft } from '@element-plus/icons-vue'
+import { ArrowDown, ArrowUp } from '@element-plus/icons-vue'
 import { omit } from 'lodash'
 import type { Ref } from 'vue'
 import { computed, defineEmits, defineProps, ref } from 'vue'

src/views/Subscriptions/Subscriptions.vue

@@ -60,9 +60,7 @@
         </template>
         <el-col class="col-oper" v-bind="colProps">
           <SearchButton @click="handleSearch" />
-          <el-button :icon="RefreshLeft" @click="handleReset">
-            {{ $t('Base.reset') }}
-          </el-button>
+          <ResetButton @click="handleReset" />
           <el-tooltip
             :content="!showMoreQuery ? $t('Base.showMore') : $t('Base.lessMore')"
             placement="top"
@@ -131,7 +129,7 @@ import InfoTooltip from '@/components/InfoTooltip.vue'
 import useMQTTVersion5NewConfig from '@/hooks/useMQTTVersion5NewConfig'
 import usePaginationWithHasNext from '@/hooks/usePaginationWithHasNext'
 import useClusterNodes from '@/hooks/useClusterNodes'
-import { ArrowDown, ArrowUp, RefreshLeft } from '@element-plus/icons-vue'
+import { ArrowDown, ArrowUp } from '@element-plus/icons-vue'
 import CommonPagination from '../../components/commonPagination.vue'
 import 'element-plus/theme-chalk/display.css'
 

src/views/Topics/Topics.vue

@@ -12,9 +12,7 @@
         </el-col>
         <el-col :span="8">
           <SearchButton @click="handleSearch" />
-          <el-button :icon="RefreshLeft" @click="handleReset">
-            {{ $t('Base.reset') }}
-          </el-button>
+          <ResetButton @click="handleReset" />
         </el-col>
       </el-row>
     </el-form>
@@ -49,7 +47,6 @@ export default defineComponent({
 <script lang="ts" setup>
 import { listTopics } from '@/api/common'
 import CommonPagination from '../../components/commonPagination.vue'
-import { RefreshLeft } from '@element-plus/icons-vue'
 import useI18nTl from '@/hooks/useI18nTl'
 import usePaginationWithHasNext from '@/hooks/usePaginationWithHasNext'
 import CommonOverflowTooltip from '@/components/CommonOverflowTooltip.vue'