From bd45f7a2246a45aea83a2ba0db5fbefaeaea05b6 Mon Sep 17 00:00:00 2001
From: sexygoat <1538832180@qq.com>
Date: Sat, 7 Mar 2026 11:59:16 +0800
Subject: [PATCH] =?UTF-8?q?=E8=AF=A6=E6=83=85=E6=B7=BB=E5=8A=A0=E6=9D=83?=
 =?UTF-8?q?=E9=99=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/locales/langs/zh.json                     |    4 -
 .../asset-management/device-list/index.vue    |   16 +-
 .../device-management/devices/detail.vue      |  495 ----
 src/views/device-management/devices/index.vue | 2048 -----------------
 4 files changed, 10 insertions(+), 2553 deletions(-)
 delete mode 100644 src/views/device-management/devices/detail.vue
 delete mode 100644 src/views/device-management/devices/index.vue

diff --git a/src/locales/langs/zh.json b/src/locales/langs/zh.json
index 5a319c0..65729be 100644
--- a/src/locales/langs/zh.json
+++ b/src/locales/langs/zh.json
@@ -424,10 +424,6 @@
       "enterpriseCards": "企业卡管理",
       "customerCommission": "客户账号佣金"
     },
-    "deviceManagement": {
-      "title": "设备管理",
-      "devices": "设备管理"
-    },
     "product": {
       "title": "商品管理",
       "simCard": "号卡管理",
diff --git a/src/views/asset-management/device-list/index.vue b/src/views/asset-management/device-list/index.vue
index a052fea..0a24635 100644
--- a/src/views/asset-management/device-list/index.vue
+++ b/src/views/asset-management/device-list/index.vue
@@ -803,12 +803,16 @@
 
   // 跳转到设备详情页面
   const goToDeviceSearchDetail = (deviceNo: string) => {
-    router.push({
-      path: '/asset-management/device-detail',
-      query: {
-        device_no: deviceNo
-      }
-    })
+    if (hasAuth('device:view_detail')) {
+      router.push({
+        path: '/asset-management/device-detail',
+        query: {
+          device_no: deviceNo
+        }
+      })
+    } else {
+      ElMessage.warning('您没有查看详情的权限')
+    }
   }
 
   // 查看设备绑定的卡片
diff --git a/src/views/device-management/devices/detail.vue b/src/views/device-management/devices/detail.vue
deleted file mode 100644
index eaa0088..0000000
--- a/src/views/device-management/devices/detail.vue
+++ /dev/null
@@ -1,495 +0,0 @@
-<template>
-  <div class="device-detail-page">
-    <!-- 页面头部 -->
-    <ElPageHeader :icon="ArrowLeft" title="返回" @back="handleBack">
-      <template #content>
-        <span class="page-title">设备详情</span>
-      </template>
-      <template #extra>
-        <ElButton type="primary" @click="handleRefresh" :loading="loading">
-          <Icon name="refresh" /> 刷新
-        </ElButton>
-      </template>
-    </ElPageHeader>
-
-    <!-- 加载状态 -->
-    <div v-if="loading && !deviceDetail" class="loading-container">
-      <ElIcon class="is-loading" :size="60"><Loading /></ElIcon>
-      <div class="loading-text">加载中...</div>
-    </div>
-
-    <!-- 详情内容 -->
-    <div v-else-if="deviceDetail" class="detail-content">
-      <!-- 设备基本信息卡片 -->
-      <ElCard shadow="never" class="info-card">
-        <template #header>
-          <div class="card-header">
-            <span class="header-title">
-              <Icon name="mobile" /> 设备基本信息
-            </span>
-          </div>
-        </template>
-        <ElDescriptions :column="3" border>
-          <ElDescriptionsItem label="当前卡号">
-            <span class="code-text">{{ deviceDetail.currentCardNumber }}</span>
-          </ElDescriptionsItem>
-          <ElDescriptionsItem label="当前运营商">
-            <ElTag :type="getOperatorType(deviceDetail.currentOperator)">
-              {{ deviceDetail.currentOperator }}
-            </ElTag>
-          </ElDescriptionsItem>
-          <ElDescriptionsItem label="当前IMEI">
-            <span class="code-text">{{ deviceDetail.currentIMEI }}</span>
-          </ElDescriptionsItem>
-
-          <ElDescriptionsItem label="设备号码">
-            <span class="code-text">{{ deviceDetail.deviceNumber }}</span>
-          </ElDescriptionsItem>
-          <ElDescriptionsItem label="设备代理">
-            {{ deviceDetail.deviceAgent || '--' }}
-          </ElDescriptionsItem>
-          <ElDescriptionsItem label="过期时间">
-            <span :class="{ 'expired-date': isExpired(deviceDetail.expiryTime) }">
-              {{ deviceDetail.expiryTime }}
-            </span>
-          </ElDescriptionsItem>
-
-          <ElDescriptionsItem label="实名状态">
-            <ElTag :type="getStatusType(deviceDetail.realNameStatus)">
-              {{ deviceDetail.realNameStatus }}
-            </ElTag>
-          </ElDescriptionsItem>
-          <ElDescriptionsItem label="运营商状态">
-            <ElTag :type="getStatusType(deviceDetail.operatorStatus)">
-              {{ deviceDetail.operatorStatus }}
-            </ElTag>
-          </ElDescriptionsItem>
-          <ElDescriptionsItem label="设备状态">
-            <ElTag :type="getStatusType(deviceDetail.deviceStatus)">
-              {{ deviceDetail.deviceStatus }}
-            </ElTag>
-          </ElDescriptionsItem>
-        </ElDescriptions>
-      </ElCard>
-
-      <!-- 流量统计卡片 -->
-      <ElCard shadow="never" class="info-card">
-        <template #header>
-          <div class="card-header">
-            <span class="header-title">
-              <Icon name="chart-bar" /> 流量统计
-            </span>
-          </div>
-        </template>
-        <div class="traffic-stats-grid">
-          <div class="stat-item total">
-            <div class="stat-label">总计流量</div>
-            <div class="stat-value">{{ deviceDetail.totalTraffic }}</div>
-          </div>
-          <div class="stat-item used">
-            <div class="stat-label">已用流量</div>
-            <div class="stat-value">{{ deviceDetail.usedTraffic }}</div>
-            <ElProgress
-              :percentage="getUsagePercentage(deviceDetail.usedTraffic, deviceDetail.totalTraffic)"
-              :color="
-                getTrafficColor(
-                  getUsagePercentage(deviceDetail.usedTraffic, deviceDetail.totalTraffic)
-                )
-              "
-              :stroke-width="8"
-            />
-          </div>
-          <div class="stat-item remaining">
-            <div class="stat-label">剩余流量</div>
-            <div class="stat-value">{{ deviceDetail.remainingTraffic }}</div>
-          </div>
-        </div>
-      </ElCard>
-
-      <!-- 双卡信息卡片 -->
-      <ElCard shadow="never" class="info-card">
-        <template #header>
-          <div class="card-header">
-            <span class="header-title">
-              <Icon name="credit-card" /> 双卡信息
-            </span>
-          </div>
-        </template>
-        <div class="dual-cards-container">
-          <!-- 卡1信息 -->
-          <div class="card-column">
-            <div class="card-title">卡1信息</div>
-            <ElDescriptions :column="1" border>
-              <ElDescriptionsItem label="ICCID">
-                <span class="code-text">{{ deviceDetail.card1.iccid }}</span>
-              </ElDescriptionsItem>
-              <ElDescriptionsItem label="接入号">
-                <span class="code-text">{{ deviceDetail.card1.accessNumber }}</span>
-              </ElDescriptionsItem>
-              <ElDescriptionsItem label="虚拟号">
-                <span class="code-text">{{ deviceDetail.card1.virtualNumber }}</span>
-              </ElDescriptionsItem>
-              <ElDescriptionsItem label="IMEI">
-                <span class="code-text">{{ deviceDetail.card1.imei }}</span>
-              </ElDescriptionsItem>
-              <ElDescriptionsItem label="代理商">
-                {{ deviceDetail.card1.agent || '--' }}
-              </ElDescriptionsItem>
-              <ElDescriptionsItem label="实名状态">
-                <ElTag :type="getStatusType(deviceDetail.card1.realNameStatus)">
-                  {{ deviceDetail.card1.realNameStatus }}
-                </ElTag>
-              </ElDescriptionsItem>
-              <ElDescriptionsItem label="运营商">
-                <ElTag :type="getOperatorType(deviceDetail.card1.operator)">
-                  {{ deviceDetail.card1.operator }}
-                </ElTag>
-              </ElDescriptionsItem>
-              <ElDescriptionsItem label="网卡状态">
-                <ElTag :type="getStatusType(deviceDetail.card1.cardStatus)">
-                  {{ deviceDetail.card1.cardStatus }}
-                </ElTag>
-              </ElDescriptionsItem>
-              <ElDescriptionsItem label="过期时间">
-                {{ deviceDetail.card1.expiryTime }}
-              </ElDescriptionsItem>
-              <ElDescriptionsItem label="套餐系列">
-                {{ deviceDetail.card1.packageSeries || '--' }}
-              </ElDescriptionsItem>
-              <ElDescriptionsItem label="总流量">
-                {{ deviceDetail.card1.totalTraffic }}
-              </ElDescriptionsItem>
-              <ElDescriptionsItem label="已使用流量">
-                <span class="traffic-info used">{{ deviceDetail.card1.usedTraffic }}</span>
-              </ElDescriptionsItem>
-              <ElDescriptionsItem label="剩余流量">
-                <span class="traffic-info remaining">{{ deviceDetail.card1.remainingTraffic }}</span>
-              </ElDescriptionsItem>
-            </ElDescriptions>
-          </div>
-
-          <!-- 卡2信息 -->
-          <div class="card-column">
-            <div class="card-title">卡2信息</div>
-            <ElDescriptions :column="1" border>
-              <ElDescriptionsItem label="ICCID">
-                <span class="code-text">{{ deviceDetail.card2.iccid }}</span>
-              </ElDescriptionsItem>
-              <ElDescriptionsItem label="接入号">
-                <span class="code-text">{{ deviceDetail.card2.accessNumber }}</span>
-              </ElDescriptionsItem>
-              <ElDescriptionsItem label="虚拟号">
-                <span class="code-text">{{ deviceDetail.card2.virtualNumber || '--' }}</span>
-              </ElDescriptionsItem>
-              <ElDescriptionsItem label="IMEI">
-                <span class="code-text">{{ deviceDetail.card2.imei }}</span>
-              </ElDescriptionsItem>
-              <ElDescriptionsItem label="代理商">
-                {{ deviceDetail.card2.agent || '--' }}
-              </ElDescriptionsItem>
-              <ElDescriptionsItem label="实名状态">
-                <ElTag :type="getStatusType(deviceDetail.card2.realNameStatus)">
-                  {{ deviceDetail.card2.realNameStatus }}
-                </ElTag>
-              </ElDescriptionsItem>
-              <ElDescriptionsItem label="运营商">
-                <ElTag :type="getOperatorType(deviceDetail.card2.operator)">
-                  {{ deviceDetail.card2.operator }}
-                </ElTag>
-              </ElDescriptionsItem>
-              <ElDescriptionsItem label="网卡状态">
-                <ElTag :type="getStatusType(deviceDetail.card2.cardStatus)">
-                  {{ deviceDetail.card2.cardStatus }}
-                </ElTag>
-              </ElDescriptionsItem>
-              <ElDescriptionsItem label="过期时间">
-                {{ deviceDetail.card2.expiryTime || '--' }}
-              </ElDescriptionsItem>
-              <ElDescriptionsItem label="套餐系列">
-                {{ deviceDetail.card2.packageSeries || '--' }}
-              </ElDescriptionsItem>
-              <ElDescriptionsItem label="总流量">
-                {{ deviceDetail.card2.totalTraffic }}
-              </ElDescriptionsItem>
-              <ElDescriptionsItem label="已使用流量">
-                <span class="traffic-info used">{{ deviceDetail.card2.usedTraffic }}</span>
-              </ElDescriptionsItem>
-              <ElDescriptionsItem label="剩余流量">
-                <span class="traffic-info remaining">{{ deviceDetail.card2.remainingTraffic }}</span>
-              </ElDescriptionsItem>
-            </ElDescriptions>
-          </div>
-        </div>
-      </ElCard>
-    </div>
-
-    <!-- 未找到设备 -->
-    <ElCard v-else shadow="never" class="empty-card">
-      <ElEmpty description="未找到该设备信息" />
-    </ElCard>
-  </div>
-</template>
-
-<script setup lang="ts">
-  import { useRouter, useRoute } from 'vue-router'
-  import { DeviceService } from '@/api/modules'
-  import { ElMessage, ElIcon } from 'element-plus'
-  import { ArrowLeft, Loading } from '@element-plus/icons-vue'
-
-  defineOptions({ name: 'DeviceDetail' })
-
-  const router = useRouter()
-  const route = useRoute()
-
-  const loading = ref(false)
-  const deviceDetail = ref<any>(null)
-  const iccid = ref<string>('')
-
-  onMounted(() => {
-    iccid.value = (route.query.iccid as string) || ''
-    if (iccid.value) {
-      loadDeviceDetail()
-    } else {
-      ElMessage.error('缺少ICCID参数')
-    }
-  })
-
-  // 加载设备详情
-  const loadDeviceDetail = async () => {
-    loading.value = true
-    try {
-      const res = await DeviceService.getDeviceByIccid(iccid.value)
-      if (res.code === 0) {
-        deviceDetail.value = res.data
-      } else {
-        ElMessage.error(res.msg || '获取设备详情失败')
-      }
-    } catch (error) {
-      console.error('获取设备详情失败:', error)
-      ElMessage.error('获取设备详情失败')
-    } finally {
-      loading.value = false
-    }
-  }
-
-  // 返回上一页
-  const handleBack = () => {
-    router.back()
-  }
-
-  // 刷新
-  const handleRefresh = () => {
-    loadDeviceDetail()
-  }
-
-  // 获取运营商标签类型
-  const getOperatorType = (operator: string) => {
-    switch (operator) {
-      case '中国移动':
-      case 'gs联动1':
-        return 'success'
-      case '中国联通':
-        return 'primary'
-      case '中国电信':
-      case 'gs电信':
-        return 'warning'
-      default:
-        return 'info'
-    }
-  }
-
-  // 获取状态标签类型
-  const getStatusType = (status: string) => {
-    switch (status) {
-      case '正常':
-      case '已实名':
-      case '在线':
-        return 'success'
-      case '停机':
-      case '离线':
-        return 'danger'
-      case '未实名':
-        return 'warning'
-      case '接口异常':
-        return 'info'
-      default:
-        return 'info'
-    }
-  }
-
-  // 判断是否过期
-  const isExpired = (expiryTime: string) => {
-    return new Date(expiryTime) < new Date()
-  }
-
-  // 计算流量使用百分比
-  const getUsagePercentage = (used: string, total: string) => {
-    const usedGB = parseFloat(used.replace('GB', ''))
-    const totalGB = parseFloat(total.replace('GB', ''))
-    return Math.round((usedGB / totalGB) * 100)
-  }
-
-  // 获取流量进度条颜色
-  const getTrafficColor = (percentage: number) => {
-    if (percentage < 50) return 'var(--el-color-success)'
-    if (percentage < 80) return 'var(--el-color-warning)'
-    return 'var(--el-color-danger)'
-  }
-</script>
-
-<style lang="scss" scoped>
-  .device-detail-page {
-    padding: 20px;
-
-    .page-title {
-      font-size: 18px;
-      font-weight: 600;
-      color: var(--el-text-color-primary);
-    }
-
-    .loading-container {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      min-height: 400px;
-      text-align: center;
-
-      .loading-text {
-        margin-top: 16px;
-        font-size: 14px;
-        color: var(--el-text-color-secondary);
-      }
-    }
-
-    .detail-content {
-      margin-top: 20px;
-
-      .info-card {
-        margin-bottom: 20px;
-
-        .card-header {
-          display: flex;
-          align-items: center;
-          justify-content: space-between;
-
-          .header-title {
-            display: flex;
-            gap: 8px;
-            align-items: center;
-            font-size: 16px;
-            font-weight: 600;
-            color: var(--el-text-color-primary);
-          }
-        }
-
-        .code-text {
-          padding: 3px 8px;
-          font-family: 'SF Mono', Monaco, Inconsolata, 'Roboto Mono', monospace;
-          font-size: 13px;
-          font-weight: 500;
-          color: var(--el-text-color-regular);
-          background: var(--el-fill-color-light);
-          border: 1px solid var(--el-border-color-lighter);
-          border-radius: 4px;
-        }
-
-        .traffic-info {
-          font-weight: 600;
-
-          &.used {
-            color: var(--el-color-warning);
-          }
-
-          &.remaining {
-            color: var(--el-color-success);
-          }
-        }
-      }
-    }
-
-    .traffic-stats-grid {
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-      gap: 16px;
-
-      .stat-item {
-        padding: 20px;
-        text-align: center;
-        background: var(--el-fill-color-extra-light);
-        border: 1px solid var(--el-border-color-lighter);
-        border-radius: 8px;
-
-        .stat-label {
-          margin-bottom: 10px;
-          font-size: 14px;
-          font-weight: 500;
-          color: var(--el-text-color-secondary);
-        }
-
-        .stat-value {
-          margin-bottom: 12px;
-          font-size: 18px;
-          font-weight: 600;
-        }
-
-        &.total .stat-value {
-          color: var(--el-color-primary);
-        }
-
-        &.used .stat-value {
-          color: var(--el-color-warning);
-        }
-
-        &.remaining .stat-value {
-          color: var(--el-color-success);
-        }
-      }
-    }
-
-    .dual-cards-container {
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      gap: 20px;
-
-      .card-column {
-        .card-title {
-          display: inline-block;
-          padding-bottom: 10px;
-          margin-bottom: 16px;
-          font-size: 16px;
-          font-weight: 600;
-          color: var(--el-text-color-primary);
-          border-bottom: 2px solid var(--el-color-primary);
-        }
-      }
-    }
-
-    .empty-card {
-      min-height: 400px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    .expired-date {
-      font-weight: 600;
-      color: var(--el-color-danger);
-    }
-  }
-
-  :deep(.el-page-header) {
-    margin-bottom: 20px;
-  }
-
-  :deep(.el-descriptions__label) {
-    font-weight: 500;
-  }
-
-  // 响应式设计
-  @media (width <= 1200px) {
-    .dual-cards-container {
-      grid-template-columns: 1fr;
-    }
-  }
-</style>
diff --git a/src/views/device-management/devices/index.vue b/src/views/device-management/devices/index.vue
deleted file mode 100644
index f6f69d4..0000000
--- a/src/views/device-management/devices/index.vue
+++ /dev/null
@@ -1,2048 +0,0 @@
-<template>
-  <div class="device-management-page">
-    <!-- ICCID搜索区域 -->
-    <div class="search-bar">
-      <div class="search-input-group">
-        <ElInput
-          v-model="iccidSearch"
-          placeholder="输入ICCID号搜索设备（如：8986062469001557883）"
-          clearable
-          @keyup.enter="handleSearch"
-          @clear="handleClear"
-          class="search-input"
-        >
-        </ElInput>
-        <ElButton type="primary" @click="handleSearch" :loading="loading"> 搜索 </ElButton>
-        <ElButton
-          v-if="deviceInfo"
-          type="success"
-          @click="showDeviceOperationDialog = true"
-          :disabled="!deviceInfo"
-        >
-          <Icon name="cog" /> 设备操作
-        </ElButton>
-      </div>
-    </div>
-
-    <!-- 设备信息展示区域 -->
-    <div v-if="deviceInfo" class="device-content">
-      <!-- 设备信息Tab页 -->
-      <ElTabs v-model="activeTab" class="device-tabs" type="card">
-        <ElTabPane label="设备概览" name="overview">
-          <div class="tab-content">
-            <!-- 设备基本信息 -->
-            <div class="device-basic-section">
-              <div class="section-header">
-                <h3><Icon name="mobile" /> 设备基本信息</h3>
-                <ElButton type="primary" @click="refreshDevice" :loading="loading">
-                  <Icon name="refresh" /> 刷新
-                </ElButton>
-              </div>
-            </div>
-
-            <div class="basic-info-grid">
-              <div class="info-item">
-                <div class="info-label">当前卡号：</div>
-                <div class="info-value">
-                  <ElTag type="primary" size="large">{{ deviceInfo.currentCardNumber }}</ElTag>
-                </div>
-              </div>
-              <div class="info-item">
-                <div class="info-label">当前运营商：</div>
-                <div class="info-value">
-                  <ElTag :type="getOperatorType(deviceInfo.currentOperator)" size="large">
-                    {{ deviceInfo.currentOperator }}
-                  </ElTag>
-                </div>
-              </div>
-              <div class="info-item">
-                <div class="info-label">当前IMEI：</div>
-                <div class="info-value">
-                  <span class="code-text">{{ deviceInfo.currentIMEI }}</span>
-                </div>
-              </div>
-              <div class="info-item">
-                <div class="info-label">设备号码:</div>
-                <div class="info-value">
-                  <span class="code-text">{{ deviceInfo.deviceNumber }}</span>
-                </div>
-              </div>
-              <div class="info-item">
-                <div class="info-label">设备代理：</div>
-                <div class="info-value">{{ deviceInfo.deviceAgent }}</div>
-              </div>
-              <div class="info-item">
-                <div class="info-label">实名状态：</div>
-                <div class="info-value">
-                  <ElTag :type="getStatusType(deviceInfo.realNameStatus)" size="large">
-                    {{ deviceInfo.realNameStatus }}
-                  </ElTag>
-                </div>
-              </div>
-              <div class="info-item">
-                <div class="info-label">运营商状态：</div>
-                <div class="info-value">
-                  <ElTag :type="getStatusType(deviceInfo.operatorStatus)" size="large">
-                    {{ deviceInfo.operatorStatus }}
-                  </ElTag>
-                </div>
-              </div>
-              <div class="info-item">
-                <div class="info-label">设备状态：</div>
-                <div class="info-value">
-                  <ElTag :type="getStatusType(deviceInfo.deviceStatus)" size="large">
-                    {{ deviceInfo.deviceStatus }}
-                  </ElTag>
-                </div>
-              </div>
-              <div class="info-item">
-                <div class="info-label">过期时间：</div>
-                <div class="info-value">
-                  <span :class="{ 'expired-date': isExpired(deviceInfo.expiryTime) }">
-                    {{ deviceInfo.expiryTime }}
-                  </span>
-                </div>
-              </div>
-            </div>
-
-            <!-- 流量统计 -->
-            <div class="traffic-stats">
-              <h4><Icon name="chart-bar" /> 流量统计</h4>
-              <div class="traffic-grid">
-                <div class="traffic-item total">
-                  <div class="traffic-label">总计流量</div>
-                  <div class="traffic-value">{{ deviceInfo.totalTraffic }}</div>
-                </div>
-                <div class="traffic-item used">
-                  <div class="traffic-label">已用流量</div>
-                  <div class="traffic-value">{{ deviceInfo.usedTraffic }}</div>
-                  <ElProgress
-                    :percentage="
-                      getUsagePercentage(deviceInfo.usedTraffic, deviceInfo.totalTraffic)
-                    "
-                    :color="
-                      getTrafficColor(
-                        getUsagePercentage(deviceInfo.usedTraffic, deviceInfo.totalTraffic)
-                      )
-                    "
-                    :stroke-width="8"
-                  />
-                </div>
-                <div class="traffic-item remaining">
-                  <div class="traffic-label">剩余流量</div>
-                  <div class="traffic-value">{{ deviceInfo.remainingTraffic }}</div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </ElTabPane>
-
-        <ElTabPane label="双卡管理" name="cards">
-          <div class="tab-content">
-            <!-- 双卡信息对比 -->
-            <div class="dual-card-section">
-              <div class="section-header">
-                <h3><Icon name="credit-card" /> 双卡信息对比</h3>
-              </div>
-            </div>
-          </div>
-
-          <div class="dual-cards-container">
-            <div class="card-column">
-              <div class="card-title">卡1信息</div>
-              <div class="card-info-list">
-                <div class="card-info-item">
-                  <span class="label">ICCID：</span>
-                  <span class="value code-text clickable" @click.stop="goToDetail(deviceInfo.card1.iccid)">
-                    {{ deviceInfo.card1.iccid }}
-                  </span>
-                </div>
-                <div class="card-info-item">
-                  <span class="label">接入号：</span>
-                  <span class="value code-text">{{ deviceInfo.card1.accessNumber }}</span>
-                </div>
-                <div class="card-info-item">
-                  <span class="label">虚拟号：</span>
-                  <span class="value code-text">{{ deviceInfo.card1.virtualNumber }}</span>
-                </div>
-                <div class="card-info-item">
-                  <span class="label">IMEI：</span>
-                  <span class="value code-text">{{ deviceInfo.card1.imei }}</span>
-                </div>
-                <div class="card-info-item">
-                  <span class="label">代理商：</span>
-                  <span class="value">{{ deviceInfo.card1.agent }}</span>
-                </div>
-                <div class="card-info-item">
-                  <span class="label">实名状态：</span>
-                  <ElTag :type="getStatusType(deviceInfo.card1.realNameStatus)">
-                    {{ deviceInfo.card1.realNameStatus }}
-                  </ElTag>
-                  <ElButton link type="primary" @click="handleRealNameQuery(1)">查询</ElButton>
-                </div>
-                <div class="card-info-item">
-                  <span class="label">运营商：</span>
-                  <ElTag :type="getOperatorType(deviceInfo.card1.operator)">
-                    {{ deviceInfo.card1.operator }}
-                  </ElTag>
-                </div>
-                <div class="card-info-item">
-                  <span class="label">运营商状态：</span>
-                  <ElTag :type="getStatusType(deviceInfo.card1.operatorStatus)">
-                    {{ deviceInfo.card1.operatorStatus }}
-                  </ElTag>
-                </div>
-                <div class="card-info-item">
-                  <span class="label">网卡状态：</span>
-                  <ElTag :type="getStatusType(deviceInfo.card1.cardStatus)">
-                    {{ deviceInfo.card1.cardStatus }}
-                  </ElTag>
-                </div>
-                <div class="card-info-item">
-                  <span class="label">过期时间：</span>
-                  <span class="value">{{ deviceInfo.card1.expiryTime }}</span>
-                </div>
-                <div class="card-info-item">
-                  <span class="label">当前限速：</span>
-                  <span class="value">{{ deviceInfo.card1.speedLimit }}</span>
-                  <ElButton link type="primary" @click="handleSpeedQuery(1)">查询</ElButton>
-                </div>
-                <div class="card-info-item">
-                  <span class="label">总流量：</span>
-                  <span class="value traffic-info">{{ deviceInfo.card1.totalTraffic }}</span>
-                </div>
-                <div class="card-info-item">
-                  <span class="label">已使用流量：</span>
-                  <span class="value traffic-info used">{{ deviceInfo.card1.usedTraffic }}</span>
-                </div>
-                <div class="card-info-item">
-                  <span class="label">剩余流量：</span>
-                  <span class="value traffic-info remaining">{{
-                    deviceInfo.card1.remainingTraffic
-                  }}</span>
-                </div>
-                <div class="card-info-item">
-                  <span class="label">实际使用流量：</span>
-                  <span class="value traffic-info">{{ deviceInfo.card1.actualUsedTraffic }}</span>
-                </div>
-                <div class="card-info-item">
-                  <span class="label">套餐系列：</span>
-                  <span class="value">{{ deviceInfo.card1.packageSeries }}</span>
-                </div>
-                <div class="card-info-item">
-                  <span class="label">当前套餐：</span>
-                  <div class="package-list">
-                    <div
-                      v-for="pkg in deviceInfo.card1.currentPackages"
-                      :key="pkg.id"
-                      class="package-item"
-                    >
-                      {{ pkg.name }} {{ pkg.expiry }} {{ pkg.traffic }}
-                    </div>
-                  </div>
-                </div>
-              </div>
-
-              <!-- 卡1操作按钮 -->
-              <div class="card-operations">
-                <h5>常规操作</h5>
-                <div class="operation-buttons">
-                  <ElButton @click="handleCardOperation('restore', 1)">复机</ElButton>
-                  <ElButton @click="handleCardOperation('suspend', 1)">停机</ElButton>
-                  <ElButton @click="handleCardOperation('trafficDetail', 1)">流量详单</ElButton>
-                  <ElButton @click="handleCardOperation('record', 1)">停复机记录</ElButton>
-                </div>
-                <div class="operation-buttons">
-                  <ElButton @click="handleCardOperation('speedLimit', 1)">单卡限速</ElButton>
-                  <ElButton @click="handleCardOperation('instantSpeed', 1)">即时限速</ElButton>
-                  <ElButton @click="handleCardOperation('noPolling', 1)">不轮询网卡</ElButton>
-                </div>
-              </div>
-            </div>
-
-            <div class="card-divider"></div>
-
-            <div class="card-column">
-              <div class="card-title">卡2信息</div>
-              <div class="card-info-list">
-                <div class="card-info-item">
-                  <span class="label">ICCID：</span>
-                  <span class="value code-text clickable" @click.stop="goToDetail(deviceInfo.card2.iccid)">
-                    {{ deviceInfo.card2.iccid }}
-                  </span>
-                </div>
-                <div class="card-info-item">
-                  <span class="label">接入号：</span>
-                  <span class="value code-text">{{ deviceInfo.card2.accessNumber }}</span>
-                </div>
-                <div class="card-info-item">
-                  <span class="label">虚拟号：</span>
-                  <span class="value code-text">{{ deviceInfo.card2.virtualNumber || '-' }}</span>
-                </div>
-                <div class="card-info-item">
-                  <span class="label">IMEI：</span>
-                  <span class="value code-text">{{ deviceInfo.card2.imei }}</span>
-                </div>
-                <div class="card-info-item">
-                  <span class="label">代理商：</span>
-                  <span class="value">{{ deviceInfo.card2.agent || '-' }}</span>
-                </div>
-                <div class="card-info-item">
-                  <span class="label">实名状态：</span>
-                  <ElTag :type="getStatusType(deviceInfo.card2.realNameStatus)">
-                    {{ deviceInfo.card2.realNameStatus }}
-                  </ElTag>
-                  <ElButton link type="primary" @click="handleRealNameQuery(2)">查询</ElButton>
-                </div>
-                <div class="card-info-item">
-                  <span class="label">运营商：</span>
-                  <ElTag :type="getOperatorType(deviceInfo.card2.operator)">
-                    {{ deviceInfo.card2.operator }}
-                  </ElTag>
-                </div>
-                <div class="card-info-item">
-                  <span class="label">运营商状态：</span>
-                  <ElTag :type="getStatusType(deviceInfo.card2.operatorStatus)">
-                    {{ deviceInfo.card2.operatorStatus }}
-                  </ElTag>
-                </div>
-                <div class="card-info-item">
-                  <span class="label">网卡状态：</span>
-                  <ElTag :type="getStatusType(deviceInfo.card2.cardStatus)">
-                    {{ deviceInfo.card2.cardStatus }}
-                  </ElTag>
-                </div>
-                <div class="card-info-item">
-                  <span class="label">过期时间：</span>
-                  <span class="value">{{ deviceInfo.card2.expiryTime || '-' }}</span>
-                </div>
-                <div class="card-info-item">
-                  <span class="label">当前限速：</span>
-                  <span class="value">{{ deviceInfo.card2.speedLimit }}</span>
-                  <ElButton link type="primary" @click="handleSpeedQuery(2)">查询</ElButton>
-                </div>
-                <div class="card-info-item">
-                  <span class="label">总流量：</span>
-                  <span class="value traffic-info">{{ deviceInfo.card2.totalTraffic }}</span>
-                </div>
-                <div class="card-info-item">
-                  <span class="label">已使用流量：</span>
-                  <span class="value traffic-info used">{{ deviceInfo.card2.usedTraffic }}</span>
-                </div>
-                <div class="card-info-item">
-                  <span class="label">剩余流量：</span>
-                  <span class="value traffic-info remaining">{{
-                    deviceInfo.card2.remainingTraffic
-                  }}</span>
-                </div>
-                <div class="card-info-item">
-                  <span class="label">实际使用流量：</span>
-                  <span class="value traffic-info">{{ deviceInfo.card2.actualUsedTraffic }}</span>
-                </div>
-                <div class="card-info-item">
-                  <span class="label">套餐系列：</span>
-                  <span class="value">{{ deviceInfo.card2.packageSeries }}</span>
-                </div>
-                <div class="card-info-item">
-                  <span class="label">当前套餐：</span>
-                  <div class="package-list">
-                    <div
-                      v-for="pkg in deviceInfo.card2.currentPackages"
-                      :key="pkg.id"
-                      class="package-item"
-                    >
-                      {{ pkg.name }} {{ pkg.traffic }}
-                    </div>
-                  </div>
-                </div>
-              </div>
-
-              <!-- 卡2操作按钮 -->
-              <div class="card-operations">
-                <h5>常规操作</h5>
-                <div class="operation-buttons">
-                  <ElButton @click="handleCardOperation('restore', 2)">复机</ElButton>
-                  <ElButton @click="handleCardOperation('suspend', 2)">停机</ElButton>
-                  <ElButton @click="handleCardOperation('trafficDetail', 2)">流量详单</ElButton>
-                  <ElButton @click="handleCardOperation('record', 2)">停复机记录</ElButton>
-                </div>
-                <div class="operation-buttons">
-                  <ElButton @click="handleCardOperation('speedLimit', 2)">单卡限速</ElButton>
-                  <ElButton @click="handleCardOperation('instantSpeed', 2)">即时限速</ElButton>
-                  <ElButton @click="handleCardOperation('noPolling', 2)">不轮询网卡</ElButton>
-                </div>
-              </div>
-            </div>
-          </div>
-        </ElTabPane>
-
-        <ElTabPane label="设备操作" name="operations">
-          <!-- 管理操作卡片区域 -->
-          <div class="management-operation-cards">
-            <!-- 套餐管理卡片 -->
-            <div class="management-card package-card">
-              <div class="card-header">
-                <div class="card-title">
-                  <h4>套餐管理</h4>
-                  <p>管理设备套餐、流量和过期时间</p>
-                </div>
-              </div>
-              <div class="card-actions">
-                <div style="width: 100%">
-                  <ElButton style="width: 100%" size="large" @click="handlePackageRecharge">
-                    套餐充值
-                  </ElButton>
-                </div>
-                <div>
-                  <ElButton style="width: 100%" size="large" @click="handleChangeExpiryTime">
-                    更改过期时间
-                  </ElButton>
-                </div>
-                <div>
-                  <ElButton style="width: 100%" size="large" @click="handleTrafficAdjustment">
-                    增减流量
-                  </ElButton>
-                </div>
-              </div>
-            </div>
-
-            <!-- 优惠活动卡片 -->
-            <div class="management-card promotion-card">
-              <div class="card-header">
-                <div class="card-title">
-                  <h4>优惠活动</h4>
-                  <p>优惠券、赠送套餐和续充服务</p>
-                </div>
-              </div>
-              <div class="card-actions">
-                <div style="width: 100%">
-                  <ElButton style="width: 100%" size="large" @click="handleCoupon">
-                    <Icon name="ticket" /> 优惠券
-                  </ElButton>
-                </div>
-                <div style="width: 100%">
-                  <ElButton style="width: 100%" size="large" @click="handleGiftPackage">
-                    <Icon name="gift" /> 赠送套餐
-                  </ElButton>
-                </div>
-                <div style="width: 100%">
-                  <ElButton style="width: 100%" size="large" @click="handleRenewal">
-                    <Icon name="redo" /> 续充
-                  </ElButton>
-                </div>
-              </div>
-            </div>
-
-            <!-- 设备信息卡片 -->
-            <div class="management-card device-info-card">
-              <div class="card-header">
-                <div class="card-title">
-                  <h4>设备信息</h4>
-                  <p>设备标签、主卡和虚拟号码信息</p>
-                </div>
-              </div>
-              <div class="card-actions">
-                <div class="device-info-row">
-                  <div class="info-item">
-                    <span class="label">设备标签：</span>
-                    <ElTag v-if="deviceInfo.deviceTag" size="small">
-                      {{ deviceInfo.deviceTag }}
-                    </ElTag>
-                    <span v-else class="empty-value">未设置</span>
-                  </div>
-                  <div class="info-item">
-                    <span class="label">当前主卡：</span>
-                    <ElTag type="primary" size="small" class="main-card-tag">
-                      {{ deviceInfo.mainCard }}
-                    </ElTag>
-                  </div>
-                  <div class="info-item">
-                    <span class="label">虚拟号码：</span>
-                    <span class="virtual-number-display">
-                      {{
-                        deviceInfo.virtualNumber && deviceInfo.virtualNumber !== '*主卡：*'
-                          ? deviceInfo.virtualNumber
-                          : '使用主卡号码'
-                      }}
-                    </span>
-                  </div>
-                </div>
-                <div style="width: 100%; margin-top: 12px">
-                  <ElButton
-                    type="primary"
-                    @click="handleChangeMainCard"
-                    size="large"
-                    style="width: 100%"
-                  >
-                    <Icon name="edit" /> 变更主卡
-                  </ElButton>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <!-- 设备操作区域 -->
-          <div class="device-operations-section">
-            <!-- 操作按钮区域 -->
-            <div class="device-operation-actions">
-              <h4><Icon name="tools" /> 设备操作</h4>
-              <div class="operation-button-grid">
-                <ElButton size="large" @click="showDeviceOperationDialog = true">
-                  <Icon name="cog" /> 设备设置
-                </ElButton>
-                <ElButton size="large" @click="handleSwitchCard">
-                  <Icon name="exchange" /> 切换使用卡
-                </ElButton>
-                <ElButton size="large" @click="handleRestart">
-                  <Icon name="refresh" /> 重启设备
-                </ElButton>
-                <ElButton size="large" @click="handleFactoryReset">
-                  <Icon name="trash" /> 恢复出厂
-                </ElButton>
-              </div>
-            </div>
-          </div>
-        </ElTabPane>
-
-        <ElTabPane label="历史记录" name="history">
-          <div class="tab-content">
-            <!-- 往期订单表格 -->
-            <div class="order-history-section">
-              <div class="section-header">
-                <h3><Icon name="list" /> 往期订单</h3>
-              </div>
-
-              <ElTable :data="orderHistory" border>
-                <ElTableColumn prop="orderNumber" label="订单号" />
-                <ElTableColumn prop="packageName" label="套餐名称" />
-                <ElTableColumn prop="packageType" label="套餐类型" />
-                <ElTableColumn prop="orderType" label="订单类型" />
-                <ElTableColumn prop="packageTraffic" label="套餐流量" />
-                <ElTableColumn prop="nextMonthEffect" label="次月生效">
-                  <template #default="scope">
-                    <ElTag :type="scope.row.nextMonthEffect ? 'warning' : 'success'">
-                      {{ scope.row.nextMonthEffect ? '是' : '否' }}
-                    </ElTag>
-                  </template>
-                </ElTableColumn>
-                <ElTableColumn prop="remark" label="备注" />
-                <ElTableColumn prop="orderTime" label="订购时间" />
-                <ElTableColumn prop="operator" label="操作人" />
-              </ElTable>
-            </div>
-
-            <!-- 推送详情表格 -->
-            <div class="push-details-section">
-              <div class="section-header">
-                <h3><Icon name="bell" /> 推送详情</h3>
-              </div>
-
-              <ElTable :data="pushDetails" border>
-                <ElTableColumn prop="pushTime" label="推送时间" />
-                <ElTableColumn prop="imei" label="IMEI" />
-                <ElTableColumn prop="deviceNumber" label="设备号" />
-                <ElTableColumn prop="wifiName" label="WIFI名称" />
-                <ElTableColumn prop="wifiPassword" label="WIFI密码" />
-                <ElTableColumn prop="signal" label="信号">
-                  <template #default="scope">
-                    <div class="signal-strength-container">
-                      <span class="signal-icon">{{ getSignalIcon(scope.row.signal) }}</span>
-                      <span class="signal-value" :class="getSignalStrengthClass(scope.row.signal)">
-                        {{ scope.row.signal }}%
-                      </span>
-                    </div>
-                  </template>
-                </ElTableColumn>
-                <ElTableColumn prop="hotspotStatus" label="热点状态">
-                  <template #default="scope">
-                    <ElTag :type="scope.row.hotspotStatus === '开启' ? 'success' : 'danger'">
-                      {{ scope.row.hotspotStatus }}
-                    </ElTag>
-                  </template>
-                </ElTableColumn>
-                <ElTableColumn prop="hotspotConnections" label="热点链接数" />
-                <ElTableColumn prop="iccid1" label="ICCID1" />
-                <ElTableColumn prop="operator1" label="运营商1" />
-                <ElTableColumn prop="realNameStatus1" label="实名状态1">
-                  <template #default="scope">
-                    <ElTag :type="getStatusType(scope.row.realNameStatus1)">
-                      {{ scope.row.realNameStatus1 }}
-                    </ElTag>
-                  </template>
-                </ElTableColumn>
-                <ElTableColumn prop="inUse1" label="是否在用1">
-                  <template #default="scope">
-                    <ElTag :type="scope.row.inUse1 ? 'success' : 'info'">
-                      {{ scope.row.inUse1 ? '是' : '否' }}
-                    </ElTag>
-                  </template>
-                </ElTableColumn>
-                <ElTableColumn prop="cardStatus1" label="卡状态1">
-                  <template #default="scope">
-                    <ElTag :type="getStatusType(scope.row.cardStatus1)">
-                      {{ scope.row.cardStatus1 }}
-                    </ElTag>
-                  </template>
-                </ElTableColumn>
-              </ElTable>
-            </div>
-          </div>
-        </ElTabPane>
-      </ElTabs>
-    </div>
-
-    <!-- 没有搜索结果时的提示 -->
-    <ElCard v-else-if="searched && !deviceInfo" shadow="never" class="no-result-card">
-      <ElEmpty description="未找到相关设备信息">
-        <template #image>
-          <Icon name="search" style="font-size: 60px; color: var(--el-text-color-placeholder)" />
-        </template>
-      </ElEmpty>
-    </ElCard>
-
-    <!-- 默认提示 -->
-    <ElCard v-else shadow="never" class="default-card">
-      <ElEmpty description="请输入ICCID号搜索设备信息">
-        <template #image>
-          <Icon name="mobile" style="font-size: 60px; color: var(--el-text-color-placeholder)" />
-        </template>
-        <template #description>
-          <div class="empty-description">
-            <p>请输入ICCID号搜索设备信息</p>
-            <p class="example-text">示例：8986062469001557883</p>
-          </div>
-        </template>
-      </ElEmpty>
-    </ElCard>
-
-    <!-- 变更主卡弹框 -->
-    <ElDialog
-      v-model="showChangeMainCardDialog"
-      title="变更主卡"
-      width="520px"
-      :before-close="handleCloseChangeMainCard"
-      class="change-main-card-dialog"
-    >
-      <div class="dialog-content">
-        <ElForm :model="changeMainCardForm" label-width="90px" label-position="left">
-          <ElFormItem label="虚拟号：">
-            <ElInput
-              v-model="changeMainCardForm.virtualNumber"
-              placeholder="请输入虚拟号"
-              clearable
-              size="large"
-            />
-          </ElFormItem>
-          <ElFormItem label="主卡：">
-            <ElSelect
-              v-model="changeMainCardForm.mainCard"
-              placeholder="请选择主卡"
-              style="width: 100%"
-              size="large"
-            >
-              <ElOption
-                v-if="deviceInfo?.card1"
-                :label="`卡1 (${deviceInfo.card1.iccid})`"
-                :value="deviceInfo.card1.iccid"
-              />
-              <ElOption
-                v-if="deviceInfo?.card2"
-                :label="`卡2 (${deviceInfo.card2.iccid})`"
-                :value="deviceInfo.card2.iccid"
-              />
-            </ElSelect>
-          </ElFormItem>
-        </ElForm>
-      </div>
-
-      <template #footer>
-        <div class="dialog-footer">
-          <ElButton @click="handleCloseChangeMainCard" size="large">取消</ElButton>
-          <ElButton type="primary" @click="handleConfirmChangeMainCard" size="large">
-            确认
-          </ElButton>
-        </div>
-      </template>
-    </ElDialog>
-
-    <!-- 设备操作弹框 -->
-    <ElDialog
-      v-model="showDeviceOperationDialog"
-      title="设备操作"
-      width="650px"
-      :before-close="handleCloseDeviceOperation"
-      class="device-operation-dialog"
-    >
-      <div class="dialog-content">
-        <ElForm :model="deviceOperationData" label-width="100px" label-position="left">
-          <div class="form-row">
-            <ElFormItem label="ICCID：">
-              <ElInput
-                v-model="deviceOperationData.iccid"
-                placeholder="请输入ICCID"
-                clearable
-                size="large"
-              />
-            </ElFormItem>
-            <ElFormItem label="在线人数：">
-              <ElInput
-                v-model="deviceOperationData.onlineCount"
-                placeholder="请输入在线人数"
-                clearable
-                size="large"
-              />
-            </ElFormItem>
-          </div>
-
-          <div class="form-row">
-            <ElFormItem label="WIFI名称：">
-              <ElInput
-                v-model="deviceOperationData.wifiName"
-                placeholder="请输入WIFI名称"
-                clearable
-                size="large"
-              />
-            </ElFormItem>
-            <ElFormItem label="WIFI密码：">
-              <ElInput
-                v-model="deviceOperationData.wifiPassword"
-                placeholder="请输入WIFI密码"
-                clearable
-                size="large"
-                type="password"
-                show-password
-              />
-            </ElFormItem>
-          </div>
-
-          <div class="form-row">
-            <ElFormItem label="限速(整数)：">
-              <ElInputNumber
-                v-model="deviceOperationData.speedLimit"
-                placeholder="请输入限速值"
-                :min="1"
-                :max="1000"
-                size="large"
-                style="width: 100%"
-              />
-            </ElFormItem>
-          </div>
-        </ElForm>
-
-        <div class="operation-actions">
-          <h4>设备操作</h4>
-          <div class="action-buttons">
-            <ElButton type="primary" @click="handleSwitchCard" size="large">
-              <Icon name="exchange" /> 切换使用卡
-            </ElButton>
-            <ElButton type="warning" @click="handleRestart" size="large">
-              <Icon name="refresh" /> 重启设备
-            </ElButton>
-            <ElButton type="danger" @click="handleFactoryReset" size="large">
-              <Icon name="trash" /> 恢复出厂
-            </ElButton>
-          </div>
-        </div>
-      </div>
-
-      <template #footer>
-        <div class="dialog-footer">
-          <ElButton @click="handleCloseDeviceOperation" size="large">关闭</ElButton>
-          <ElButton type="primary" @click="handleConfirmDeviceOperation" size="large">
-            保存设置
-          </ElButton>
-        </div>
-      </template>
-    </ElDialog>
-  </div>
-</template>
-
-<script setup lang="ts">
-  import { ElMessage } from 'element-plus'
-  import { useRouter } from 'vue-router'
-
-  defineOptions({ name: 'DeviceManagement' })
-
-  const router = useRouter()
-  const iccidSearch = ref('')
-  const loading = ref(false)
-  const searched = ref(false)
-  const deviceInfo = ref<any>(null)
-  const showOrderHistory = ref(false)
-  const activeTab = ref('overview')
-  const deviceOperationData = ref({
-    iccid: '',
-    onlineCount: '',
-    wifiName: '',
-    wifiPassword: '',
-    speedLimit: null
-  })
-
-  // 变更主卡弹框相关
-  const showChangeMainCardDialog = ref(false)
-  const changeMainCardForm = ref({
-    virtualNumber: '',
-    mainCard: ''
-  })
-
-  // 设备操作弹框相关
-  const showDeviceOperationDialog = ref(false)
-
-  // 模拟设备数据 - 完整匹配您提供的数据结构
-  const mockDeviceData = {
-    '8986062469001557883': {
-      currentCardNumber: '8986062469001557883',
-      currentOperator: 'gs联动1',
-      currentIMEI: '864128071857878',
-      deviceNumber: '864128071857878',
-      deviceAgent: 'Alan',
-      realNameStatus: '已实名',
-      operatorStatus: '接口异常',
-      deviceStatus: '正常',
-      expiryTime: '2026-02-23',
-      totalTraffic: '3000.00GB',
-      usedTraffic: '19.67GB',
-      remainingTraffic: '2980.33GB',
-      deviceTag: null,
-      mainCard: '8986062469001557883',
-      virtualNumber: '*主卡：*',
-      card1: {
-        iccid: '8986062469001557883',
-        accessNumber: '861400591057883',
-        virtualNumber: '864128071857878',
-        imei: '864128071857878',
-        agent: 'Alan',
-        realNameStatus: '已实名',
-        operator: 'gs联动1',
-        operatorStatus: '接口异常',
-        cardStatus: '正常',
-        expiryTime: '2026-02-23',
-        speedLimit: 'undefined',
-        totalTraffic: '3072000MB',
-        usedTraffic: '20141.21MB',
-        remainingTraffic: '3051858.79MB',
-        actualUsedTraffic: '20141.21MB',
-        packageSeries: 'SD-25年新春设备套餐',
-        currentPackages: [
-          {
-            id: 1,
-            name: '随身MIFI全国不限量年卡套餐（12个月）',
-            expiry: '2025-11-23',
-            traffic: '3072000MB'
-          },
-          {
-            id: 2,
-            name: '随身MIFI全国不限量年卡套餐（12个月）',
-            expiry: '2025-12-23',
-            traffic: '3072000MB'
-          },
-          {
-            id: 3,
-            name: '随身MIFI全国不限量年卡套餐（12个月）',
-            expiry: '2026-01-23',
-            traffic: '3072000MB'
-          },
-          {
-            id: 4,
-            name: '随身MIFI全国不限量年卡套餐（12个月）',
-            expiry: '2026-02-23',
-            traffic: '3072000MB'
-          }
-        ]
-      },
-      card2: {
-        iccid: '8986112422108131838',
-        accessNumber: '1410854446542',
-        virtualNumber: '',
-        imei: '864128071857878',
-        agent: '',
-        realNameStatus: '未实名',
-        operator: 'gs电信',
-        operatorStatus: '接口异常',
-        cardStatus: '停机',
-        expiryTime: '',
-        speedLimit: 'undefined',
-        totalTraffic: '0MB',
-        usedTraffic: '0.00MB',
-        remainingTraffic: '0.00MB',
-        actualUsedTraffic: '0.00MB',
-        packageSeries: '测试',
-        currentPackages: [
-          {
-            id: 5,
-            name: '电信充电宝套餐',
-            traffic: '1024000MB'
-          }
-        ]
-      }
-    }
-  }
-
-  // 搜索处理
-  const handleSearch = async () => {
-    if (!iccidSearch.value.trim()) {
-      ElMessage.warning('请输入ICCID号')
-      return
-    }
-
-    loading.value = true
-    searched.value = true
-
-    try {
-      // 模拟API调用
-      await new Promise((resolve) => setTimeout(resolve, 800))
-
-      // 搜索设备信息
-      deviceInfo.value = mockDeviceData[iccidSearch.value] || null
-
-      if (!deviceInfo.value) {
-        ElMessage.info('未找到该ICCID对应的设备信息')
-      }
-    } catch (error) {
-      console.error('搜索失败:', error)
-      ElMessage.error('搜索失败，请重试')
-    } finally {
-      loading.value = false
-    }
-  }
-
-  // 清空搜索
-  const handleClear = () => {
-    deviceInfo.value = null
-    searched.value = false
-  }
-
-  // 刷新设备信息
-  const refreshDevice = () => {
-    if (iccidSearch.value) {
-      handleSearch()
-    }
-  }
-
-  // 获取运营商标签类型
-  const getOperatorType = (operator: string) => {
-    switch (operator) {
-      case '中国移动':
-        return 'success'
-      case '中国联通':
-        return 'primary'
-      case '中国电信':
-        return 'warning'
-      default:
-        return 'info'
-    }
-  }
-
-  // 获取状态标签类型
-  const getStatusType = (status: string) => {
-    switch (status) {
-      case '正常':
-      case '已实名':
-      case '在线':
-        return 'success'
-      case '停机':
-      case '离线':
-        return 'danger'
-      case '未实名':
-        return 'warning'
-      default:
-        return 'info'
-    }
-  }
-
-  // 判断是否过期
-  const isExpired = (expiryTime: string) => {
-    return new Date(expiryTime) < new Date()
-  }
-
-  // 计算流量使用百分比
-  const getUsagePercentage = (used: string, total: string) => {
-    const usedGB = parseFloat(used.replace('GB', ''))
-    const totalGB = parseFloat(total.replace('GB', ''))
-    return Math.round((usedGB / totalGB) * 100)
-  }
-
-  // 获取流量进度条颜色
-  const getTrafficColor = (percentage: number) => {
-    if (percentage < 50) return 'var(--el-color-success)'
-    if (percentage < 80) return 'var(--el-color-warning)'
-    return 'var(--el-color-danger)'
-  }
-
-  // 获取信号强度图标
-  const getSignalIcon = (signal: number) => {
-    if (signal >= 90) return '📶' // 5格信号
-    if (signal >= 70) return '📶' // 4格信号
-    if (signal >= 50) return '📱' // 3格信号
-    if (signal >= 30) return '📞' // 2格信号
-    if (signal >= 10) return '📱' // 1格信号
-    return '❌' // 无信号
-  }
-
-  // 获取信号强度样式类
-  const getSignalStrengthClass = (signal: number) => {
-    if (signal >= 70) return 'signal-excellent'
-    if (signal >= 50) return 'signal-good'
-    if (signal >= 30) return 'signal-fair'
-    return 'signal-poor'
-  }
-
-  // 套餐充值
-  const handlePackageRecharge = () => {
-    ElMessage.success('套餐充值功能')
-  }
-
-  // 更改过期时间
-  const handleChangeExpiryTime = () => {
-    ElMessage.success('更改过期时间功能')
-  }
-
-  // 增减流量
-  const handleTrafficAdjustment = () => {
-    ElMessage.success('增减流量功能')
-  }
-
-  // 优惠券
-  const handleCoupon = () => {
-    ElMessage.success('优惠券功能')
-  }
-
-  // 赠送套餐
-  const handleGiftPackage = () => {
-    ElMessage.success('赠送套餐功能')
-  }
-
-  // 续充
-  const handleRenewal = () => {
-    ElMessage.success('续充功能')
-  }
-
-  // 设置为已访问状态 - 订单历史现在默认显示
-  const handleOrderHistory = () => {
-    activeTab.value = 'history'
-    ElMessage.success('切换到历史记录')
-  }
-
-  // 设备操作
-  const handleSwitchCard = () => {
-    ElMessage.success('切换使用卡')
-  }
-
-  const handleRestart = () => {
-    ElMessage.success('重启设备')
-  }
-
-  const handleFactoryReset = () => {
-    ElMessage.success('恢复出厂设置')
-  }
-
-  // 关闭设备操作弹框
-  const handleCloseDeviceOperation = () => {
-    showDeviceOperationDialog.value = false
-  }
-
-  // 确认设备操作设置
-  const handleConfirmDeviceOperation = () => {
-    ElMessage.success('设备设置已保存')
-    handleCloseDeviceOperation()
-  }
-
-  // 变更主卡
-  const handleChangeMainCard = () => {
-    // 初始化表单数据
-    if (deviceInfo.value) {
-      changeMainCardForm.value.virtualNumber = deviceInfo.value.virtualNumber || ''
-      changeMainCardForm.value.mainCard = deviceInfo.value.mainCard || ''
-    }
-    showChangeMainCardDialog.value = true
-  }
-
-  // 关闭变更主卡弹框
-  const handleCloseChangeMainCard = () => {
-    showChangeMainCardDialog.value = false
-    // 重置表单
-    changeMainCardForm.value = {
-      virtualNumber: '',
-      mainCard: ''
-    }
-  }
-
-  // 确认变更主卡
-  const handleConfirmChangeMainCard = () => {
-    if (!changeMainCardForm.value.mainCard) {
-      ElMessage.warning('请选择主卡')
-      return
-    }
-
-    // 更新设备信息中的主卡和虚拟号
-    if (deviceInfo.value) {
-      deviceInfo.value.mainCard = changeMainCardForm.value.mainCard
-      deviceInfo.value.virtualNumber = changeMainCardForm.value.virtualNumber || '*主卡：*'
-    }
-
-    ElMessage.success('主卡变更成功')
-    handleCloseChangeMainCard()
-  }
-
-  // 实名状态查询
-  const handleRealNameQuery = (cardNumber) => {
-    ElMessage.success(`查询卡${cardNumber}实名状态`)
-  }
-
-  // 限速查询
-  const handleSpeedQuery = (cardNumber) => {
-    ElMessage.success(`查询卡${cardNumber}当前限速`)
-  }
-
-  // 卡操作
-  const handleCardOperation = (operation, cardNumber) => {
-    const operationMap = {
-      restore: '复机',
-      suspend: '停机',
-      trafficDetail: '流量详单',
-      record: '停复机记录',
-      speedLimit: '单卡限速',
-      instantSpeed: '即时限速',
-      noPolling: '不轮询网卡'
-    }
-    ElMessage.success(`对卡${cardNumber}执行${operationMap[operation]}操作`)
-  }
-
-  // 跳转到设备详情页
-  const goToDetail = (iccid: string) => {
-    router.push({
-      path: '/asset-management/device-detail',
-      query: {
-        iccid: iccid
-      }
-    })
-  }
-
-  // 订单历史数据
-  const orderHistory = reactive([
-    {
-      orderNumber: 'ORD202411080001',
-      packageName: '随身MIFI全国不限量年卡套餐',
-      packageType: '流量套餐',
-      orderType: '续费订单',
-      packageTraffic: '3072000MB',
-      nextMonthEffect: false,
-      remark: '正常续费',
-      orderTime: '2024-11-08 10:30:00',
-      operator: '系统'
-    },
-    {
-      orderNumber: 'ORD202410080001',
-      packageName: '电信充电宝套餐',
-      packageType: '流量套餐',
-      orderType: '新购订单',
-      packageTraffic: '1024000MB',
-      nextMonthEffect: true,
-      remark: '下月生效',
-      orderTime: '2024-10-08 09:15:23',
-      operator: 'admin'
-    }
-  ])
-
-  // 推送详情数据
-  const pushDetails = reactive([
-    {
-      pushTime: '2024-11-08 14:30:00',
-      imei: '864128071857878',
-      deviceNumber: '864128071857878',
-      wifiName: 'MIFI_4G5F9A',
-      wifiPassword: '12345678',
-      signal: 85,
-      hotspotStatus: '开启',
-      hotspotConnections: 2,
-      iccid1: '8986062469001557883',
-      operator1: 'gs联通1',
-      realNameStatus1: '已实名',
-      inUse1: true,
-      cardStatus1: '正常'
-    },
-    {
-      pushTime: '2024-11-08 14:15:00',
-      imei: '864128071857878',
-      deviceNumber: '864128071857878',
-      wifiName: 'MIFI_4G5F9A',
-      wifiPassword: '12345678',
-      signal: 78,
-      hotspotStatus: '开启',
-      hotspotConnections: 1,
-      iccid1: '8986062469001557883',
-      operator1: 'gs联通1',
-      realNameStatus1: '已实名',
-      inUse1: true,
-      cardStatus1: '正常'
-    }
-  ])
-</script>
-
-<style lang="scss" scoped>
-  .device-management-page {
-    max-width: 1400px;
-    padding: 0;
-    margin: 0 auto;
-
-    // 紧凑的搜索栏
-    .search-bar {
-      padding: 12px 20px;
-      margin-bottom: 16px;
-      background: var(--el-bg-color-page);
-      border: 1px solid var(--el-border-color-light);
-      border-radius: 8px;
-
-      .search-input-group {
-        display: flex;
-        gap: 8px;
-        align-items: center;
-        max-width: 430px;
-
-        .search-input {
-          flex: 1;
-        }
-      }
-    }
-
-    .device-content {
-      display: flex;
-      flex-direction: column;
-    }
-
-    // Tab页面样式
-    .device-tabs {
-      padding: 24px;
-      background: var(--el-bg-color);
-      border: 1px solid var(--el-border-color-light);
-      border-radius: 8px;
-
-      .tab-content {
-        padding: 0;
-        margin-top: 20px;
-      }
-    }
-
-    // 通用部分头部样式
-    .section-header {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      padding-bottom: 16px;
-      margin-top: 30px;
-      margin-bottom: 24px;
-      border-bottom: 1px solid var(--el-border-color-light);
-
-      h3 {
-        display: flex;
-        gap: 10px;
-        align-items: center;
-        margin: 0;
-        font-size: 18px;
-        font-weight: 600;
-        color: var(--el-text-color-primary);
-      }
-
-      .device-tags {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 8px;
-        align-items: center;
-        font-size: 13px;
-
-        .device-label,
-        .main-card-label,
-        .virtual-number-label {
-          font-weight: 500;
-          color: var(--el-text-color-secondary);
-        }
-
-        .virtual-number {
-          font-weight: 500;
-          color: var(--el-text-color-primary);
-        }
-      }
-    }
-
-    // 基本信息网格布局优化
-    .basic-info-grid {
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-      gap: 16px;
-      margin-bottom: 24px;
-
-      .info-item {
-        padding: 16px;
-        background: var(--el-fill-color-extra-light);
-        border: 1px solid var(--el-border-color-lighter);
-        border-radius: 6px;
-        transition: all 0.2s ease;
-
-        .info-label {
-          margin-bottom: 10px;
-          font-size: 14px;
-          font-weight: 500;
-          color: var(--el-text-color-secondary);
-        }
-
-        .info-value {
-          font-size: 15px;
-          font-weight: 500;
-          color: var(--el-text-color-primary);
-        }
-      }
-    }
-
-    // 流量统计优化
-    .traffic-stats {
-      padding: 20px;
-      margin-top: 20px;
-      background: var(--el-fill-color-extra-light);
-      border: 1px solid var(--el-border-color-lighter);
-      border-radius: 8px;
-
-      h4 {
-        display: flex;
-        gap: 10px;
-        align-items: center;
-        margin: 0 0 20px;
-        font-size: 16px;
-        font-weight: 600;
-        color: var(--el-text-color-primary);
-      }
-
-      .traffic-grid {
-        display: grid;
-        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
-        gap: 16px;
-
-        .traffic-item {
-          padding: 16px;
-          text-align: center;
-          background: var(--el-bg-color);
-          border: 1px solid var(--el-border-color-lighter);
-          border-radius: 6px;
-          transition: all 0.2s ease;
-
-          .traffic-label {
-            margin-bottom: 10px;
-            font-size: 13px;
-            font-weight: 500;
-            color: var(--el-text-color-secondary);
-          }
-
-          .traffic-value {
-            margin-bottom: 12px;
-            font-size: 17px;
-            font-weight: 600;
-            color: var(--el-color-primary);
-          }
-
-          &.total .traffic-value {
-            color: var(--el-color-primary);
-          }
-
-          &.used .traffic-value {
-            color: var(--el-color-warning);
-          }
-
-          &.remaining .traffic-value {
-            color: var(--el-color-success);
-          }
-        }
-      }
-    }
-
-    .code-text {
-      padding: 3px 6px;
-      font-family: 'SF Mono', Monaco, Inconsolata, 'Roboto Mono', monospace;
-      font-size: 13px;
-      font-weight: 500;
-      color: var(--el-text-color-regular);
-      background: var(--el-fill-color-light);
-      border: 1px solid var(--el-border-color-lighter);
-      border-radius: 4px;
-
-      &.clickable {
-        color: var(--el-color-primary);
-        cursor: pointer;
-        text-decoration: underline;
-
-        &:hover {
-          opacity: 0.8;
-        }
-      }
-    }
-
-    .expired-date {
-      font-weight: 600;
-      color: var(--el-color-danger);
-    }
-
-    // 双卡信息对比优化
-    .dual-cards-container {
-      display: grid;
-      grid-template-columns: 1fr auto 1fr;
-      gap: 20px;
-      align-items: start;
-
-      .card-column {
-        padding: 16px;
-        background: var(--el-fill-color-extra-light);
-        border: 1px solid var(--el-border-color-lighter);
-        border-radius: 8px;
-
-        .card-title {
-          display: inline-block;
-          padding-bottom: 10px;
-          margin-bottom: 18px;
-          font-size: 16px;
-          font-weight: 600;
-          color: var(--el-text-color-primary);
-          border-bottom: 2px solid var(--el-color-primary);
-        }
-
-        .card-info-list {
-          display: flex;
-          flex-direction: column;
-          gap: 8px;
-
-          .card-info-item {
-            display: flex;
-            align-items: center;
-            padding: 10px;
-            background: var(--el-bg-color);
-            border: 1px solid var(--el-border-color-lighter);
-            border-radius: 4px;
-            transition: all 0.2s ease;
-
-            .label {
-              min-width: 75px;
-              font-size: 13px;
-              font-weight: 500;
-              color: var(--el-text-color-secondary);
-            }
-
-            .value {
-              flex: 1;
-              margin-right: 8px;
-              font-size: 14px;
-              font-weight: 500;
-              color: var(--el-text-color-primary);
-            }
-
-            .traffic-info {
-              font-weight: 600;
-              color: var(--el-color-primary);
-
-              &.used {
-                color: var(--el-color-warning);
-              }
-
-              &.remaining {
-                color: var(--el-color-success);
-              }
-            }
-
-            .package-list {
-              flex: 1;
-
-              .package-item {
-                padding: 6px 10px;
-                margin-bottom: 4px;
-                font-size: 11px;
-                color: var(--el-color-primary);
-                background: var(--el-fill-color-light);
-                border: 1px solid var(--el-border-color-lighter);
-                border-radius: 3px;
-
-                &:last-child {
-                  margin-bottom: 0;
-                }
-              }
-            }
-          }
-        }
-
-        .card-operations {
-          padding-top: 16px;
-          margin-top: 16px;
-          border-top: 1px solid var(--el-border-color-lighter);
-
-          h5 {
-            margin: 0 0 14px;
-            font-size: 14px;
-            font-weight: 600;
-            color: var(--el-text-color-primary);
-          }
-
-          .operation-buttons {
-            display: flex;
-            flex-wrap: wrap;
-            gap: 6px;
-            margin-bottom: 8px;
-
-            &:last-child {
-              margin-bottom: 0;
-            }
-          }
-        }
-      }
-
-      .card-divider {
-        align-self: stretch;
-        width: 1px;
-        min-height: 200px;
-        background: var(--el-border-color);
-        border-radius: 1px;
-      }
-    }
-
-    // 管理操作和设备操作优化
-    .management-operations,
-    .device-operations {
-      border-radius: 12px;
-      box-shadow: 0 2px 12px 0 rgb(0 0 0 / 6%);
-
-      .card-header {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        padding: 20px 24px;
-        margin: -20px -24px 20px;
-        border-bottom: 1px solid var(--el-border-color-lighter);
-
-        .header-title {
-          display: flex;
-          gap: 8px;
-          align-items: center;
-          font-size: 16px;
-          font-weight: 600;
-          color: var(--el-text-color-primary);
-        }
-
-        .device-tags {
-          display: flex;
-          gap: 12px;
-          align-items: center;
-          font-size: 14px;
-
-          .device-label,
-          .main-card-label,
-          .virtual-number-label {
-            font-weight: 500;
-            color: var(--el-text-color-secondary);
-          }
-
-          .virtual-number {
-            font-weight: 500;
-            color: var(--el-text-color-primary);
-          }
-        }
-      }
-
-      // 操作分类和设备操作优化
-      .operation-categories {
-        display: grid;
-        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-        gap: 16px;
-
-        .operation-category {
-          padding: 16px;
-          background: var(--el-fill-color-extra-light);
-          border: 1px solid var(--el-border-color-lighter);
-          border-radius: 6px;
-
-          h4 {
-            display: flex;
-            gap: 8px;
-            align-items: center;
-            margin: 0 0 16px;
-            font-size: 15px;
-            font-weight: 600;
-            color: var(--el-text-color-primary);
-          }
-
-          .operation-buttons {
-            display: flex;
-            flex-wrap: wrap;
-            gap: 6px;
-          }
-        }
-      }
-
-      .device-operation-form {
-        padding: 16px;
-        margin-top: 16px;
-        background: var(--el-fill-color-extra-light);
-        border: 1px solid var(--el-border-color-lighter);
-        border-radius: 6px;
-
-        .form-row {
-          display: grid;
-          grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-          gap: 16px;
-          margin-bottom: 16px;
-
-          &:last-child {
-            margin-bottom: 0;
-          }
-
-          .form-item {
-            display: flex;
-            flex-direction: column;
-          }
-        }
-      }
-    }
-
-    // 表格样式优化
-    .order-history-table,
-    .push-details-table {
-      border-radius: 12px;
-      box-shadow: 0 2px 12px 0 rgb(0 0 0 / 6%);
-
-      .card-header {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        padding: 20px 24px;
-        margin: -20px -24px 20px;
-        border-bottom: 1px solid var(--el-border-color-lighter);
-
-        .header-title {
-          display: flex;
-          gap: 8px;
-          align-items: center;
-          font-size: 16px;
-          font-weight: 600;
-          color: var(--el-text-color-primary);
-        }
-      }
-    }
-
-    .no-result-card,
-    .default-card {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      min-height: 400px;
-      border-radius: 12px;
-      box-shadow: 0 2px 12px 0 rgb(0 0 0 / 6%);
-
-      .empty-description {
-        text-align: center;
-
-        p {
-          margin: 8px 0;
-          font-size: 16px;
-          color: var(--el-text-color-primary);
-        }
-
-        .example-text {
-          font-family: 'SF Mono', Monaco, Inconsolata, 'Roboto Mono', monospace;
-          font-size: 14px;
-          color: var(--el-text-color-secondary);
-        }
-      }
-    }
-
-    // 响应式设计
-    @media (width <= 1200px) {
-      .dual-cards-container {
-        grid-template-columns: 1fr;
-
-        .card-divider {
-          display: none;
-        }
-      }
-
-      .operation-categories {
-        grid-template-columns: 1fr;
-      }
-    }
-
-    @media (width <= 768px) {
-      padding: 0 16px;
-
-      .basic-info-grid {
-        grid-template-columns: 1fr;
-      }
-
-      .traffic-grid {
-        grid-template-columns: 1fr;
-      }
-
-      .search-container .search-input-group {
-        flex-direction: column;
-
-        .search-input {
-          width: 100%;
-        }
-      }
-
-      .device-operation-form .form-row {
-        grid-template-columns: 1fr;
-      }
-    }
-  }
-
-  // Element Plus 组件样式覆盖
-  :deep(.el-card__body) {
-    padding: 24px;
-  }
-
-  :deep(.el-tag) {
-    font-weight: 500;
-    border-radius: 4px;
-  }
-
-  :deep(.el-button) {
-    font-weight: 500;
-    border-radius: 6px;
-    transition: all 0.2s ease;
-  }
-
-  :deep(.el-progress) {
-    line-height: 1.5;
-
-    .el-progress-bar {
-      border-radius: 4px;
-    }
-  }
-
-  :deep(.el-input) {
-    .el-input__inner {
-      border-radius: 6px;
-    }
-  }
-
-  :deep(.el-table) {
-    overflow: hidden;
-    border-radius: 8px;
-
-    th {
-      font-weight: 600;
-      color: var(--el-text-color-primary);
-      background-color: var(--el-fill-color-extra-light);
-    }
-  }
-
-  :deep(.el-descriptions__body) {
-    .el-descriptions__table {
-      .el-descriptions__cell {
-        padding: 16px;
-      }
-    }
-  }
-
-  // 弹框样式
-  .change-main-card-dialog,
-  .device-operation-dialog {
-    .dialog-content {
-      padding: 10px 0;
-    }
-
-    .form-row {
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      gap: 20px;
-      margin-bottom: 20px;
-
-      &:last-child {
-        margin-bottom: 0;
-      }
-    }
-
-    .operation-actions {
-      padding-top: 20px;
-      margin-top: 30px;
-      border-top: 1px solid var(--el-border-color-lighter);
-
-      h4 {
-        margin: 0 0 16px;
-        font-size: 15px;
-        font-weight: 600;
-        color: var(--el-text-color-primary);
-      }
-
-      .action-buttons {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 12px;
-      }
-    }
-
-    .dialog-footer {
-      display: flex;
-      gap: 12px;
-      justify-content: flex-end;
-    }
-  }
-
-  // 搜索栏适配设备操作按钮
-  .search-bar {
-    .search-input-group {
-      max-width: 600px;
-    }
-  }
-
-  // 设备信息卡片样式
-  .device-info-cards {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-    gap: 16px;
-    margin-bottom: 24px;
-
-    .info-card {
-      padding: 20px;
-      background: var(--el-fill-color-extra-light);
-      border: 1px solid var(--el-border-color-lighter);
-      border-radius: 8px;
-      transition: all 0.2s ease;
-
-      .card-label {
-        margin-bottom: 12px;
-        font-size: 16px;
-        font-weight: 600;
-        color: var(--el-text-color-secondary);
-      }
-
-      .card-value {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 12px;
-        align-items: center;
-
-        .main-card-tag {
-          font-family: 'SF Mono', Monaco, Inconsolata, 'Roboto Mono', monospace;
-        }
-
-        .virtual-number-display {
-          padding: 6px 12px;
-          font-family: 'SF Mono', Monaco, Inconsolata, 'Roboto Mono', monospace;
-          font-size: 15px;
-          font-weight: 500;
-          color: var(--el-text-color-primary);
-          background: var(--el-fill-color-light);
-          border: 1px solid var(--el-border-color-lighter);
-          border-radius: 6px;
-        }
-
-        .empty-value {
-          color: var(--el-text-color-placeholder);
-        }
-
-        .change-btn {
-          margin-left: 8px;
-        }
-      }
-    }
-  }
-
-  // 设备操作按钮区域
-  .device-operation-actions {
-    padding: 20px;
-    background: var(--el-fill-color-extra-light);
-    border: 1px solid var(--el-border-color-lighter);
-    border-radius: 8px;
-
-    h4 {
-      display: flex;
-      gap: 8px;
-      align-items: center;
-      margin: 0 0 16px;
-      font-size: 16px;
-      font-weight: 600;
-      color: var(--el-text-color-primary);
-    }
-
-    .operation-button-grid {
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
-      gap: 12px;
-    }
-  }
-
-  // 管理操作卡片样式
-  .management-operation-cards {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
-    gap: 20px;
-    margin-top: 20px;
-    margin-bottom: 24px;
-
-    .management-card {
-      overflow: hidden;
-      background: var(--el-bg-color);
-      border: 2px solid var(--el-border-color-lighter);
-      border-radius: 12px;
-      transition: all 0.3s ease;
-
-      .card-header {
-        display: flex;
-        gap: 16px;
-        align-items: center;
-        padding: 24px 24px 16px;
-        border-bottom: 1px solid var(--el-border-color-lighter);
-
-        .card-icon {
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          width: 50px;
-          height: 50px;
-          font-size: 24px;
-          color: white;
-          border-radius: 12px;
-        }
-
-        .card-title {
-          flex: 1;
-
-          h4 {
-            margin: 0 0 4px;
-            font-size: 18px;
-            font-weight: 600;
-            color: var(--el-text-color-primary);
-          }
-
-          p {
-            margin: 0;
-            font-size: 13px;
-            line-height: 1.4;
-            color: var(--el-text-color-secondary);
-          }
-        }
-      }
-
-      .card-actions {
-        display: flex;
-        flex-direction: column;
-        gap: 12px;
-        padding: 20px 24px 24px;
-      }
-
-      &.promotion-card {
-        .card-icon.promotion-icon {
-          background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
-        }
-      }
-
-      &.history-card {
-        .card-icon.history-icon {
-          background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
-        }
-      }
-
-      &.device-info-card {
-        .card-icon.device-info-icon {
-          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-        }
-
-        .device-info-row {
-          display: flex;
-          flex-direction: column;
-          gap: 12px;
-
-          .info-item {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            padding: 8px 12px;
-            background: var(--el-fill-color-light);
-            border: 1px solid var(--el-border-color-lighter);
-            border-radius: 6px;
-            transition: all 0.2s ease;
-
-            .label {
-              min-width: 80px;
-              font-size: 14px;
-              font-weight: 500;
-              color: var(--el-text-color-secondary);
-            }
-
-            .empty-value {
-              font-size: 13px;
-              color: var(--el-text-color-placeholder);
-            }
-
-            .main-card-tag {
-              font-family: 'SF Mono', Monaco, Inconsolata, 'Roboto Mono', monospace;
-            }
-
-            .virtual-number-display {
-              padding: 4px 8px;
-              font-family: 'SF Mono', Monaco, Inconsolata, 'Roboto Mono', monospace;
-              font-size: 13px;
-              font-weight: 500;
-              color: var(--el-text-color-primary);
-              background: var(--el-fill-color);
-              border: 1px solid var(--el-border-color-lighter);
-              border-radius: 4px;
-            }
-          }
-        }
-      }
-    }
-  }
-
-  // 信号强度容器样式
-  .signal-strength-container {
-    display: flex;
-    gap: 8px;
-    align-items: center;
-    justify-content: center;
-
-    .signal-icon {
-      display: inline-block;
-      font-size: 18px;
-    }
-
-    .signal-value {
-      font-size: 13px;
-      font-weight: 600;
-
-      &.signal-excellent {
-        color: var(--el-color-success);
-      }
-
-      &.signal-good {
-        color: var(--el-color-primary);
-      }
-
-      &.signal-fair {
-        color: var(--el-color-warning);
-      }
-
-      &.signal-poor {
-        color: var(--el-color-danger);
-      }
-    }
-  }
-
-  // 响应式调整
-  @media (width <= 1200px) {
-    .management-operation-cards {
-      grid-template-columns: 1fr;
-    }
-  }
-
-  @media (width <= 768px) {
-    .device-info-cards {
-      grid-template-columns: 1fr;
-    }
-
-    .operation-button-grid {
-      grid-template-columns: 1fr;
-    }
-
-    .management-operation-cards {
-      .management-card {
-        .card-actions {
-          gap: 8px;
-        }
-      }
-    }
-  }
-</style>