diff --git a/nezha-fronted/src/components/common/table/alert/alertRuleTable.vue b/nezha-fronted/src/components/common/table/alert/alertRuleTable.vue
index c1e1eff3e..59666a275 100644
--- a/nezha-fronted/src/components/common/table/alert/alertRuleTable.vue
+++ b/nezha-fronted/src/components/common/table/alert/alertRuleTable.vue
@@ -121,16 +121,18 @@
           </el-popover>
         </template>
         <template v-else-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[item.prop]' :showInfo='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 === '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]' :showInfo='scope.row[item.prop]'>
+                  <template slot="copy-text">
+                     {{scope.row[item.prop]?scope.row[item.prop]:'-'}}
+                  </template>
+              </copy>
           </template>
         <span v-else-if="item.prop === 'id'" :id="'globalSearch' + scope.row.id">{{scope.row[item.prop]}}</span>
         <span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
@@ -188,10 +190,11 @@
 <script>
 import table from '@/components/common/mixin/table'
 import deleteButton from '@/components/common/deleteButton'
+import copy from '@/components/common/copy'
 import chartDataFormat from '@/components/chart/chartDataFormat'
 export default {
   name: 'alertRuleTable',
-  components: { deleteButton },
+  components: { deleteButton, copy },
   mixins: [table],
   props: {
     loading: Boolean
diff --git a/nezha-fronted/src/components/common/table/alert/alertSilenceTable.vue b/nezha-fronted/src/components/common/table/alert/alertSilenceTable.vue
index 6133d380f..d650e63df 100644
--- a/nezha-fronted/src/components/common/table/alert/alertSilenceTable.vue
+++ b/nezha-fronted/src/components/common/table/alert/alertSilenceTable.vue
@@ -97,10 +97,11 @@
           {{ utcTimeToTimezoneStr(scope.row[item.prop]) }}
         </template>
         <template v-else-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[item.prop]' :showInfo='scope.row[item.prop]'>
+                  <template slot="copy-text">
+                     {{scope.row[item.prop]?scope.row[item.prop]:'-'}}
+                  </template>
+              </copy>
         </template>
         <span v-else-if="scope.row[item.prop]">{{
           scope.row[item.prop] || "-"
@@ -201,11 +202,13 @@ import { calcDurationByStringTimeB } from '@/components/common/js/tools'
 import nzAlertTag from '../../../page/alert/nzAlertTag'
 import { sameLabels } from '@/components/common/js/constants'
 import deleteButton from '@/components/common/deleteButton'
+import copy from '@/components/common/copy'
 export default {
   name: 'alertSilenceTable',
   components: {
     nzAlertTag,
-    deleteButton
+    deleteButton,
+    copy
   },
   mixins: [table],
   props: {
diff --git a/nezha-fronted/src/components/common/table/asset/assetMetaTable.vue b/nezha-fronted/src/components/common/table/asset/assetMetaTable.vue
index e12dbdbf3..b0d27392d 100644
--- a/nezha-fronted/src/components/common/table/asset/assetMetaTable.vue
+++ b/nezha-fronted/src/components/common/table/asset/assetMetaTable.vue
@@ -36,22 +36,25 @@
       </template>
       <template slot-scope="scope" :column="item">
         <div v-if="item.prop === 'group'">
-           <div class="document-copy-block">
-              <span class="document-copy-text"> {{scope.row[item.prop] ? scope.row[item.prop].name : '-'}}</span>
-              <i v-if="scope.row[item.prop]" class="nz-icon nz-icon-override" style="visibility: hidden" @click="onCopy(scope.row[item.prop].name)" :title="$t('overall.copyText')"></i>
-            </div>
+          <copy :copyData='scope.row[item.prop].name' :showInfo='scope.row[item.prop]'>
+                  <template slot="copy-text">
+                     {{scope.row[item.prop]?scope.row[item.prop].name:'-'}}
+                  </template>
+              </copy>
         </div>
         <div v-else-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[item.prop]' :showInfo='scope.row[item.prop]'>
+                  <template slot="copy-text">
+                     {{scope.row[item.prop]?scope.row[item.prop]:'-'}}
+                  </template>
+              </copy>
           </div>
         <div v-else-if="item.prop === 'metaKey'">
-            <div class="document-copy-block">
-              <span class="document-copy-text">{{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]' :showInfo='scope.row[item.prop]'>
+                  <template slot="copy-text">
+                     {{scope.row[item.prop]?scope.row[item.prop]:'-'}}
+                  </template>
+              </copy>
           </div>
         <div v-else-if=" item.prop === 'display' ">
           <div v-if="scope.row[item.prop] === 1">Enabled</div>
@@ -127,10 +130,11 @@
 <script>
 import table from '@/components/common/mixin/table'
 import deleteButton from '@/components/common/deleteButton'
+import copy from '@/components/common/copy'
 export default {
   name: 'assetLabelTable',
   mixins: [table],
-  components: { deleteButton },
+  components: { deleteButton, copy },
   props: {
     loading: Boolean
   },
diff --git a/nezha-fronted/src/components/common/table/asset/assetTable.vue b/nezha-fronted/src/components/common/table/asset/assetTable.vue
index f6c9ed838..903049e7c 100644
--- a/nezha-fronted/src/components/common/table/asset/assetTable.vue
+++ b/nezha-fronted/src/components/common/table/asset/assetTable.vue
@@ -111,10 +111,11 @@
             <span v-else> - </span>
           </template>
           <template v-else-if="item.prop === 'sn'">
-            <div class="document-copy-block">
-              <span class="document-copy-text">{{scope.row.sn ? scope.row.sn : '-'}}</span>
-              <i v-if="scope.row.sn" class="nz-icon nz-icon-override" style="visibility: hidden" @click="onCopy(scope.row.sn)" :title="$t('overall.copyText')"></i>
-            </div>
+            <copy :copyData='scope.row[item.prop]' :showInfo='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 === 'talon'">
             <div v-if="scope.row['clientState']===1">
diff --git a/nezha-fronted/src/components/common/table/settings/agentTable.vue b/nezha-fronted/src/components/common/table/settings/agentTable.vue
index a17d890c2..85b9dff8a 100644
--- a/nezha-fronted/src/components/common/table/settings/agentTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/agentTable.vue
@@ -53,16 +53,18 @@
           <!-- </el-popover> -->
         </span>
         <template v-else-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[item.prop]' :showInfo='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 === 'host'">
-            <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]' :showInfo='scope.row[item.prop]'>
+                  <template slot="copy-text">
+                     {{scope.row[item.prop]?scope.row[item.prop]:'-'}}
+                  </template>
+              </copy>
           </template>
         <span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
         <template v-else>-</template>
@@ -128,6 +130,7 @@ import table from '@/components/common/mixin/table'
 import { agent } from '@/components/common/js/constants'
 import alertStateInfo from '@/components/common/alert/alertStateInfo'
 import deleteButton from '@/components/common/deleteButton'
+import copy from '@/components/common/copy'
 export default {
   name: 'agentTable',
   props: {
@@ -135,7 +138,7 @@ export default {
   },
   mixins: [table],
   components: {
-    alertStateInfo, deleteButton
+    alertStateInfo, deleteButton, copy
   },
   data () {
     return {
diff --git a/nezha-fronted/src/components/common/table/settings/chartTmplTable.vue b/nezha-fronted/src/components/common/table/settings/chartTmplTable.vue
index 96782229a..2591fd70a 100644
--- a/nezha-fronted/src/components/common/table/settings/chartTmplTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/chartTmplTable.vue
@@ -42,10 +42,11 @@
         {{findTypeLabel(scope.row)}}
         </span>
         <template v-else-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[item.prop]' :showInfo='scope.row[item.prop]'>
+                  <template slot="copy-text">
+                     {{scope.row[item.prop]?scope.row[item.prop]:'-'}}
+                  </template>
+              </copy>
           </template>
         <span v-else-if="scope.row[item.prop]">{{scope.row[item.prop] || '-'}}</span>
         <template v-else>-</template>
@@ -102,10 +103,11 @@
 import table from '@/components/common/mixin/table'
 import { chart as chartConstant } from '@/components/common/js/constants'
 import deleteButton from '@/components/common/deleteButton'
+import copy from '@/components/common/copy'
 export default {
   name: 'chartTmplTable',
   mixins: [table],
-  components: { deleteButton },
+  components: { deleteButton, copy },
   props: {
     loading: Boolean
   },
diff --git a/nezha-fronted/src/components/common/table/settings/credentialsTable.vue b/nezha-fronted/src/components/common/table/settings/credentialsTable.vue
index 2fb25f88c..4cfe8867a 100644
--- a/nezha-fronted/src/components/common/table/settings/credentialsTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/credentialsTable.vue
@@ -42,10 +42,11 @@
           <template v-else>-</template>
         </template>
         <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[item.prop]' :showInfo='scope.row[item.prop]'>
+                  <template slot="copy-text">
+                     {{scope.row[item.prop]?scope.row[item.prop]:'-'}}
+                  </template>
+              </copy>
         </template>
         <template v-if="item.prop === 'type'">
           <template v-if="scope.row.type">
@@ -114,12 +115,13 @@
 <script>
 import table from '@/components/common/mixin/table'
 import deleteButton from '@/components/common/deleteButton'
+import copy from '@/components/common/copy'
 export default {
   name: 'credentialsTable',
   props: {
     loading: Boolean
   },
-  components: { deleteButton },
+  components: { deleteButton, copy },
   mixins: [table],
   data () {
     return {
diff --git a/nezha-fronted/src/components/common/table/settings/dcTable.vue b/nezha-fronted/src/components/common/table/settings/dcTable.vue
index 82a3f19fd..d9981e791 100644
--- a/nezha-fronted/src/components/common/table/settings/dcTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/dcTable.vue
@@ -90,10 +90,11 @@
           </span>
         </template>
         <template v-else-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[item.prop]' :showInfo='scope.row[item.prop]'>
+                  <template slot="copy-text">
+                     {{scope.row[item.prop]?scope.row[item.prop]:'-'}}
+                  </template>
+          </copy>
           </template>
         <span v-else-if="item.prop === 'id'" :id="'globalSearch' + scope.row.id">{{scope.row[item.prop]}}</span>
         <template v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</template>
@@ -152,11 +153,12 @@ import table from '@/components/common/mixin/table'
 import { showTableTooltip, hideTableTooltip } from '@/components/common/js/tools'
 import alertDaysInfo from '@/components/common/alert/alertDaysInfo'
 import deleteButton from '@/components/common/deleteButton'
+import copy from '@/components/common/copy'
 export default {
   name: 'dcTable',
   mixins: [table],
   components: {
-    alertDaysInfo, deleteButton
+    alertDaysInfo, deleteButton, copy
   },
   props: {
     loading: Boolean
diff --git a/nezha-fronted/src/components/common/table/settings/exprTmplTable.vue b/nezha-fronted/src/components/common/table/settings/exprTmplTable.vue
index 8f6b1d3e8..a69adc7c6 100644
--- a/nezha-fronted/src/components/common/table/settings/exprTmplTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/exprTmplTable.vue
@@ -36,16 +36,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[item.prop]' :showInfo='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 === 'expression'">
-            <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]' :showInfo='scope.row[item.prop]'>
+                  <template slot="copy-text">
+                     {{scope.row[item.prop]?scope.row[item.prop]:'-'}}
+                  </template>
+              </copy>
           </template>
         <span v-else-if="scope.row[item.prop]">{{scope.row[item.prop] || '-'}}</span>
         <template v-else>-</template>
@@ -99,10 +101,11 @@
 <script>
 import table from '@/components/common/mixin/table'
 import deleteButton from '@/components/common/deleteButton'
+import copy from '@/components/common/copy'
 export default {
   name: 'exprTmplTable',
   mixins: [table],
-  components: { deleteButton },
+  components: { deleteButton, copy },
   props: {
     loading: Boolean
   },
diff --git a/nezha-fronted/src/components/common/table/settings/ipamTable.vue b/nezha-fronted/src/components/common/table/settings/ipamTable.vue
index 6a3d2abf9..d75572aa9 100644
--- a/nezha-fronted/src/components/common/table/settings/ipamTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/ipamTable.vue
@@ -36,20 +36,22 @@
       <template slot-scope="scope" :column="item">
         <span v-if="item.prop === 'dc'">{{scope.row[item.prop]?scope.row[item.prop].name:'-'}}</span>
         <template v-else-if="item.prop === 'CIDR'">
-           <div class="document-copy-block">
-              <span class="document-copy-text">{{ scope.row.addr }}/{{scope.row.mask}}</span>
-              <i v-if="scope.row.addr || scope.row.mask" class="nz-icon nz-icon-override" style="visibility: hidden" @click="onCopy(scope.row.addr + '/' + scope.row.mask)" :title="$t('overall.copyText')"></i>
-            </div>
+          <copy :copyData='scope.row.addr + "/" + scope.row.mask' :showInfo='scope.row.addr || scope.row.mask'>
+                  <template slot="copy-text">
+                     {{ scope.row.addr }}/{{scope.row.mask}}
+                  </template>
+          </copy>
         </template>
         <span v-else-if="item.prop === 'type'">
           <template v-if="scope.row.type === 4">IPV4</template>
           <template v-else-if="scope.row.type === 6">IPV6</template>
         </span>
         <template v-else-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[item.prop]' :showInfo='scope.row[item.prop]'>
+                  <template slot="copy-text">
+                     {{scope.row[item.prop]?scope.row[item.prop]:'-'}}
+                  </template>
+              </copy>
           </template>
         <span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
         <span v-else>-</span>
@@ -105,11 +107,13 @@
 <script>
 import table from '@/components/common/mixin/table'
 import deleteButton from '@/components/common/deleteButton'
+import copy from '@/components/common/copy'
 export default {
   name: 'ipamTable',
   mixins: [table],
   components: {
-    deleteButton
+    deleteButton,
+    copy
   },
   props: {
     loading: Boolean
diff --git a/nezha-fronted/src/components/common/table/settings/mibTable.vue b/nezha-fronted/src/components/common/table/settings/mibTable.vue
index 6acc475ae..b2170274e 100644
--- a/nezha-fronted/src/components/common/table/settings/mibTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/mibTable.vue
@@ -43,10 +43,11 @@
             </div>
         </template>
         <template v-else-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[item.prop]' :showInfo='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 === 'modelsDetail' && scope.row['modelsDetail'] && scope.row['modelsDetail'].length >0" >
           <div style="height: 100%">
@@ -129,11 +130,12 @@
 <script>
 import table from '@/components/common/mixin/table'
 import deleteButton from '@/components/common/deleteButton'
+import copy from '@/components/common/copy'
 import axios from 'axios'
 export default {
   name: 'mibTable',
   mixins: [table],
-  components: { deleteButton },
+  components: { deleteButton, copy },
   props: {
     loading: Boolean
   },
diff --git a/nezha-fronted/src/components/common/table/settings/modelTable.vue b/nezha-fronted/src/components/common/table/settings/modelTable.vue
index 6d1edbaea..adc2a5838 100644
--- a/nezha-fronted/src/components/common/table/settings/modelTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/modelTable.vue
@@ -43,22 +43,25 @@
           </template>
         </template>
         <template v-else-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[item.prop]' :showInfo='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 === 'brand'">
-          <div class="document-copy-block">
-              <span class="document-copy-text">{{scope.row.brand.name}}</span>
-              <i v-if="scope.row.brand.name" class="nz-icon nz-icon-override" style="visibility: hidden" @click="onCopy(scope.row.brand.name)" :title="$t('overall.copyText')"></i>
-            </div>
+          <copy :copyData='scope.row.brand.name' :showInfo='scope.row.brand.name'>
+                  <template slot="copy-text">
+                     {{scope.row.brand.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.name : '-'}}</span>
-              <i v-if="scope.row.type" class="nz-icon nz-icon-override" style="visibility: hidden" @click="onCopy(scope.row.type.name)" :title="$t('overall.copyText')"></i>
-            </div>
+          <copy :copyData='scope.row.type.name' :showInfo='scope.row[item.prop]'>
+                  <template slot="copy-text">
+                     {{scope.row.type ? scope.row.type.name : '-'}}
+                  </template>
+          </copy>
          </template>
         <span v-else-if="item.prop === 'createTime'">{{utcTimeToTimezoneStr(scope.row[item.prop])}}</span>
         <template v-else-if="item.prop === 'assetNum'">
@@ -122,10 +125,11 @@
 <script>
 import table from '@/components/common/mixin/table'
 import deleteButton from '@/components/common/deleteButton'
+import copy from '@/components/common/copy'
 export default {
   name: 'modelTable',
   mixins: [table],
-  components: { deleteButton },
+  components: { deleteButton, copy },
   props: {
     loading: Boolean
   },
diff --git a/nezha-fronted/src/components/common/table/settings/moduleTable.vue b/nezha-fronted/src/components/common/table/settings/moduleTable.vue
index 58e0ee09d..21b39a996 100644
--- a/nezha-fronted/src/components/common/table/settings/moduleTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/moduleTable.vue
@@ -38,19 +38,21 @@
       </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[item.prop]}}</span>
-              <i v-if="scope.row[item.prop]" class="nz-icon nz-icon-override" style="visibility: hidden" @click="onCopy(scope.row.name)" :title="$t('overall.copyText')"></i>
-          </div>
+          <copy :copyData='scope.row[item.prop]' :showInfo='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 === 'type'">
           {{scope.row[item.prop]}}
         </template>
         <template v-else-if="item.prop === 'project'">
-          <div class="document-copy-block">
-              <span class="document-copy-text">{{scope.row[item.prop].name}}</span>
-              <i v-if="scope.row[item.prop].name" class="nz-icon nz-icon-override" style="visibility: hidden" @click="onCopy(scope.row[item.prop].name)" :title="$t('overall.copyText')"></i>
-          </div>
+          <copy :copyData='scope.row[item.prop].name' :showInfo='scope.row[item.prop].name'>
+                  <template slot="copy-text">
+                     {{scope.row[item.prop].name}}
+                  </template>
+          </copy>
         </template>
         <template v-else-if="item.prop === 'endpointNum'">
           <span class="endpoint-num"  @click="showBottomBox('endpoint', scope.row)">
@@ -132,10 +134,11 @@
 <script>
 import table from '@/components/common/mixin/table'
 import deleteButton from '@/components/common/deleteButton'
+import copy from '@/components/common/copy'
 export default {
   name: 'moduleTable',
   mixins: [table],
-  components: { deleteButton },
+  components: { deleteButton, copy },
   props: {
     loading: Boolean
   },
diff --git a/nezha-fronted/src/components/common/table/settings/projectTable.vue b/nezha-fronted/src/components/common/table/settings/projectTable.vue
index 77323811c..73ad0f555 100644
--- a/nezha-fronted/src/components/common/table/settings/projectTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/projectTable.vue
@@ -39,6 +39,7 @@
       </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[item.prop]}}</span>
               <i v-if="scope.row[item.prop]" class="nz-icon nz-icon-override" style="visibility: hidden" @click="onCopy(scope.row.name)" :title="$t('overall.copyText')"></i>
diff --git a/nezha-fronted/src/components/common/table/settings/roleTable.vue b/nezha-fronted/src/components/common/table/settings/roleTable.vue
index 6bdc78f85..98426efff 100644
--- a/nezha-fronted/src/components/common/table/settings/roleTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/roleTable.vue
@@ -37,16 +37,18 @@
       <template slot-scope="scope" :column="item">
         <template v-if="item.prop === 'name'">
           <template v-if="scope.row.i18n">
-            <div class="document-copy-block">
-              <span class="document-copy-text">{{$t(scope.row.i18n)}}</span>
-              <i v-if="$t(scope.row.i18n)" class="nz-icon nz-icon-override" style="visibility: hidden" @click="onCopy($t(scope.row.i18n))" :title="$t('overall.copyText')"></i>
-            </div>
+            <copy :copyData='$t(scope.row.i18n)' :showInfo='$t(scope.row.i18n)'>
+                  <template slot="copy-text">
+                     {{$t(scope.row.i18n)}}
+                  </template>
+            </copy>
           </template>
           <template v-else-if="scope.row.name">
-            <div class="document-copy-block">
-              <span class="document-copy-text">{{scope.row.name}}</span>
-              <i v-if="$t(scope.row.name)" class="nz-icon nz-icon-override" style="visibility: hidden" @click="onCopy($t(scope.row.name))" :title="$t('overall.copyText')"></i>
-            </div>
+            <copy :copyData='$t(scope.row.name)' :showInfo='$t(scope.row.name)'>
+                  <template slot="copy-text">
+                     {{scope.row.name}}
+                  </template>
+              </copy>
           </template>
         </template>
         <span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
@@ -102,10 +104,11 @@
 <script>
 import table from '@/components/common/mixin/table'
 import deleteButton from '@/components/common/deleteButton'
+import copy from '@/components/common/copy'
 export default {
   name: 'roleTable',
   mixins: [table],
-  components: { deleteButton },
+  components: { deleteButton, copy },
   props: {
     loading: Boolean
   },
diff --git a/nezha-fronted/src/components/common/table/settings/userTable.vue b/nezha-fronted/src/components/common/table/settings/userTable.vue
index 7b9315af4..ab8175cd3 100644
--- a/nezha-fronted/src/components/common/table/settings/userTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/userTable.vue
@@ -79,10 +79,11 @@
           <span v-else-if="scope.row[item.prop] === 'zh'">简体中文</span>
         </template>
         <template v-else-if="item.prop === 'email'">
-          <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]' :showInfo='scope.row[item.prop]'>
+                  <template slot="copy-text">
+                     {{scope.row[item.prop]?scope.row[item.prop]:'-'}}
+                  </template>
+          </copy>
         </template>
         <span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
         <span v-else>-</span>
@@ -140,10 +141,11 @@
 <script>
 import table from '@/components/common/mixin/table'
 import deleteButton from '@/components/common/deleteButton'
+import copy from '@/components/common/copy'
 export default {
   name: 'userTable',
   mixins: [table],
-  components: { deleteButton },
+  components: { deleteButton, copy },
   props: {
     loading: Boolean
   },