.

src/components/WalletAddress.vue

@@ -0,0 +1,32 @@
+<template>
+    <div class="flex items-center">
+        <ElIcon class="cursor-pointer mr-1" @click.stop="copyAddress">
+            <Copy />
+        </ElIcon>
+        <span>{{ truncatedAddress }}</span>
+    </div>
+</template>
+<script setup>
+import { computed } from 'vue'
+import { useClipboard } from '@vueuse/core'
+import { ElIcon, ElMessage } from 'element-plus'
+import { Copy } from '@vicons/tabler'
+const props = defineProps({
+    address: {
+        type: String,
+        required: true
+    }
+})
+function truncateAddress(address) {
+    if (address && address.length > 10) return address.slice(0, 6) + '...' + address.slice(-4)
+    return address
+}
+const truncatedAddress = computed(() => truncateAddress(props.address))
+function copyAddress() {
+    const { copy } = useClipboard({
+        legacy: true
+    })
+    copy(props.address)
+    ElMessage.success('复制成功')
+}
+</script>

src/views/HomeView.vue

@@ -59,7 +59,7 @@
                 </div>
                 <div class="flex items-center mt-4">
                     <ElButton type="primary" @click="mint" :loading="minting">mint</ElButton>
-                </div>
+                </div> 
             </div>
         </ElCard>
 
@@ -73,12 +73,7 @@
                 <ElTableColumn prop="name" label="名称"></ElTableColumn>
                 <ElTableColumn prop="address" label="地址" min-width="150">
                     <template #default="{ row }">
-                        <div class="flex items-center address-column">
-                            <ElIcon class="cursor-pointer mr-1" @click="copyAddress(row.address)">
-                                <Copy />
-                            </ElIcon>
-                            <span>{{ truncateAddress(row.address) }}</span>
-                        </div>
+                        <WalletAddress :address="row.address" />
                     </template>
                 </ElTableColumn>
                 <ElTableColumn prop="ethBalance" label="ETH余额" min-width="160" />
@@ -113,9 +108,9 @@ import { ref, onMounted, inject, watch } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { http } from '@/plugins/http'
 import { ethers, Wallet } from 'ethers'
-import { Copy, ArrowNarrowRight, ArrowsRightLeft } from '@vicons/tabler'
-import { useClipboard, useFileDialog, useIntervalFn } from '@vueuse/core'
-
+import { ArrowNarrowRight, ArrowsRightLeft } from '@vicons/tabler'
+import { useFileDialog, useIntervalFn } from '@vueuse/core'
+import WalletAddress from '@/components/WalletAddress.vue'
 const network = inject('network')
 watch(network, () => {
     getAccounts()
@@ -219,16 +214,7 @@ async function getAccounts() {
 }
 useIntervalFn(getAccounts, 10000)
 getAccounts()
-function copyAddress(address) {
-    const { copy } = useClipboard({
-        legacy: true
-    })
-    copy(address)
-    ElMessage.success('复制成功')
-}
-function truncateAddress(address) {
-    return address.slice(0, 6) + '...' + address.slice(-4)
-}
+
 async function deleteAccount(account) {
     try {
         await ElMessageBox.confirm(`确认删除？`, '确认', {