feat: ICCID新增复制, 宽度自适应

src/views/asset-management/asset-information/components/BasicInfoCard.vue

@@ -150,13 +150,22 @@
         v-if="cardInfo.cards && cardInfo.cards.length > 0"
         :data="sortedDeviceCards"
         border
-        style="margin-top: 16px"
+        style="width: 100%; margin-top: 16px"
       >
-        <ElTableColumn label="ICCID">
+        <ElTableColumn label="ICCID" min-width="180" show-overflow-tooltip>
           <template #default="scope">
+            <div style="display: flex; align-items: center; gap: 8px">
               <ElButton type="primary" link @click="handleNavigateToCardInfo(scope.row.iccid)">
                 {{ scope.row.iccid }}
               </ElButton>
+              <el-icon
+                class="copy-icon"
+                @click="handleCopyICCID(scope.row.iccid)"
+                style="cursor: pointer; color: #409eff"
+              >
+                <CopyDocument />
+              </el-icon>
+            </div>
           </template>
         </ElTableColumn>
         <ElTableColumn prop="msisdn" label="MSISDN" />
@@ -188,7 +197,7 @@
             {{ scope.row.real_name_at ? formatDateTime(scope.row.real_name_at) : '-' }}
           </template>
         </ElTableColumn>
-        <ElTableColumn label="操作" width="200" align="center">
+        <ElTableColumn label="操作" width="120" align="center">
           <template #default="scope">
             <!-- 根据网络状态显示启用或停用按钮 -->
             <ElButton
@@ -382,8 +391,10 @@
     ElTableColumn,
     ElButton,
     ElEmpty,
-    ElMessageBox
+    ElMessageBox,
+    ElMessage
   } from 'element-plus'
+  import { CopyDocument } from '@element-plus/icons-vue'
   import { useAssetFormatters } from '../composables/useAssetFormatters'
   import { formatDateTime } from '@/utils/business/format'
 
@@ -542,6 +553,16 @@
     emit('navigateToCard', iccid)
   }
 
+  // 复制ICCID
+  const handleCopyICCID = async (iccid: string) => {
+    try {
+      await navigator.clipboard.writeText(iccid)
+      ElMessage.success('ICCID已复制')
+    } catch {
+      ElMessage.error('复制失败')
+    }
+  }
+
   // 卡操作
   const handleEnableCard = () => {
     emit('enableCard')