diff --git a/nezha-fronted/src/components/common/copy.vue b/nezha-fronted/src/components/common/copy.vue
new file mode 100644
index 000000000..abc4de9ad
--- /dev/null
+++ b/nezha-fronted/src/components/common/copy.vue
@@ -0,0 +1,32 @@
+<template>
+  <div class="document-copy-block">
+    <span class="document-copy-text">
+        <slot name="copy-text"></slot>
+    </span>
+    <i v-if="copyData" class="nz-icon nz-icon-override" style="visibility: hidden" @click="onCopy(copyData)" :title="$t('overall.copyText')"></i>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'copy',
+  props: {
+    copyData: String
+  },
+  data () {
+    return {
+    }
+  },
+  methods: {
+    onCopy (txt) {
+      this.$copyText(txt).then(() => {
+        this.$message.success({ message: this.$t('overall.copySuccess') })
+      })
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>
diff --git a/nezha-fronted/src/components/common/table/settings/issueTable.vue b/nezha-fronted/src/components/common/table/settings/issueTable.vue
index 0f94c409a..b33319034 100644
--- a/nezha-fronted/src/components/common/table/settings/issueTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/issueTable.vue
@@ -37,16 +37,18 @@
       </template>
       <template slot-scope="scope" :column="item">
         <template v-if="item.prop === 'name'">
-           <div class="document-copy-block">
-              <span class="document-copy-text">{{scope.row.name ? scope.row.name : '-'}}</span>
-              <i v-if="scope.row.name" class="nz-icon nz-icon-override" style="visibility: hidden" @click="onCopy(scope.row.name)" :title="$t('overall.copyText')"></i>
-            </div>
+          <copy :copyData='scope.row.name'>
+              <template slot="copy-text">
+                 {{scope.row.name ? scope.row.name : '-'}}
+              </template>
+            </copy>
         </template>
         <template v-else-if="item.prop === 'type'">
-           <div class="document-copy-block">
-              <span class="document-copy-text">{{scope.row.type ? scope.row.type : '-'}}</span>
-              <i v-if="scope.row.type" class="nz-icon nz-icon-override" style="visibility: hidden" @click="onCopy(scope.row.type)" :title="$t('overall.copyText')"></i>
-            </div>
+          <copy :copyData='scope.row.type'>
+              <template slot="copy-text">
+                 {{scope.row.type ? scope.row.type : '-'}}
+              </template>
+            </copy>
         </template>
         <template v-else-if="item.prop === 'reporter'">
           <template>{{scope.row[item.prop] ? scope.row[item.prop].name : '-'}}</template>
@@ -120,9 +122,14 @@
 
 <script>
 import table from '@/components/common/mixin/table'
+import copy from '@/components/common/copy'
 export default {
   name: 'issueTable',
   mixins: [table],
+  components: {
+    copy
+  },
+
   props: {
     loading: Boolean
   },
diff --git a/nezha-fronted/src/components/common/table/settings/recordRuleTable.vue b/nezha-fronted/src/components/common/table/settings/recordRuleTable.vue
index 5deee73aa..09a1f603b 100644
--- a/nezha-fronted/src/components/common/table/settings/recordRuleTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/recordRuleTable.vue
@@ -38,10 +38,11 @@
       </template>
       <template slot-scope="scope" :column="item">
         <template v-if="item.prop === 'name'">
-           <div class="document-copy-block">
-              <span class="document-copy-text">{{scope.row.name ? scope.row.name : '-'}}</span>
-              <i v-if="scope.row.name" class="nz-icon nz-icon-override" style="visibility: hidden" @click="onCopy(scope.row.name)" :title="$t('overall.copyText')"></i>
-            </div>
+           <copy :copyData='scope.row.name'>
+              <template slot="copy-text">
+                 {{scope.row.name ? scope.row.name : '-'}}
+              </template>
+            </copy>
         </template>
         <template v-else-if="item.prop === 'type'">
           <template v-if="scope.row[item.prop]">
@@ -51,10 +52,11 @@
           <template v-else>{{"-"}}</template>
         </template>
         <template v-else-if="item.prop === 'expr'">
-          <div class="document-copy-block">
-              <span class="document-copy-text">{{scope.row[item.prop] ? scope.row[item.prop] : '-'}}</span>
-              <i v-if="scope.row[item.prop]" class="nz-icon nz-icon-override" style="visibility: hidden" @click="onCopy(scope.row[item.prop])" :title="$t('overall.copyText')"></i>
-            </div>
+            <copy :copyData='scope.row[item.prop]'>
+              <template slot="copy-text">
+                 {{scope.row[item.prop] ? scope.row[item.prop] : '-'}}
+              </template>
+            </copy>
         </template>
         <template v-else-if="item.prop === 'inr'">
           <template>{{scope.row[item.prop] ? scope.row[item.prop] : '-'}}</template>
@@ -134,13 +136,15 @@
 
 <script>
 import lodash from 'lodash'
+import copy from '@/components/common/copy'
 import table from '@/components/common/mixin/table'
 import nzAlertTag from '../../../page/alert/nzAlertTag'
 import alertLabelMixin from '@/components/common/mixin/alertLabelMixin'
 export default {
   name: 'recordRuleTable',
   components: {
-    nzAlertTag
+    nzAlertTag,
+    copy
   },
   mixins: [table, alertLabelMixin],
   props: {