fix: update some files

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

@@ -1,17 +1,12 @@
 <template>
-  <ElCard shadow="never" class="search-card">
-    <template #header>
-      <div class="card-header">
-        <span>资产查询</span>
-        <ElButton type="danger" @click="handleGoBack">返回上次搜索</ElButton>
-      </div>
-    </template>
+  <div class="search-area">
     <div class="iccid-search">
       <div class="iccid-input-wrapper">
         <ElInput
           v-model="searchIccid"
           placeholder="请输入虚拟号、ICCID、IMEI、SN或MSISDN"
           clearable
+          :prefix-icon="Search"
           class="asset-search-input"
           @focus="iccidInputFocused = true"
           @blur="iccidInputFocused = false"
@@ -42,16 +37,17 @@
         >
           同步
         </ElButton>
+        <ElButton type="default" plain :icon="Back" @click="handleGoBack"> 返回上次搜索 </ElButton>
       </div>
     </div>
-  </ElCard>
+  </div>
 </template>
 
 <script setup lang="ts">
   import { ref } from 'vue'
   import { useRoute } from 'vue-router'
-  import { ElCard, ElInput, ElButton } from 'element-plus'
-  import { Search, Refresh } from '@element-plus/icons-vue'
+  import { ElInput, ElButton } from 'element-plus'
+  import { Back, Search, Refresh } from '@element-plus/icons-vue'
   import { useAssetFormatters } from '../composables/useAssetFormatters'
 
   // Use formatters
@@ -135,103 +131,87 @@
 </script>
 
 <style scoped lang="scss">
-  .search-card {
+  .search-area {
+    position: relative;
+    z-index: 20;
     margin-bottom: 20px;
     overflow: visible;
-    background: var(--el-bg-color, #fff);
+  }
 
-    :deep(.el-card__header) {
-      padding: 16px 20px;
-      background: var(--el-fill-color-light);
-      border-bottom: 1px solid var(--el-border-color-lighter);
+  .iccid-search {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 12px;
+    align-items: flex-start;
+    overflow: visible;
 
-      .card-header {
-        display: flex;
-        gap: 12px;
-        align-items: center;
-        justify-content: space-between;
-      }
-    }
+    .iccid-input-wrapper {
+      position: relative;
+      flex: 1 1 360px;
+      min-width: 240px;
 
-    :deep(.el-card__body) {
-      padding: 16px 20px;
-      overflow: visible;
-    }
+      .asset-search-input {
+        width: 100%;
 
-    .iccid-search {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 12px;
-      align-items: flex-start;
-
-      .iccid-input-wrapper {
-        position: relative;
-        flex: 1 1 360px;
-        min-width: 240px;
-
-        .asset-search-input {
-          width: 100%;
+        :deep(.el-input__prefix) {
+          color: var(--el-text-color-secondary);
         }
+      }
 
-        .iccid-magnifier {
+      .iccid-magnifier {
+        position: absolute;
+        top: calc(100% + 12px);
+        left: 0;
+        z-index: 2000;
+        white-space: nowrap;
+
+        .magnifier-arrow {
           position: absolute;
-          top: calc(100% + 12px);
-          left: 0;
-          z-index: 1000;
-          white-space: nowrap;
+          top: -9px;
+          left: 80px;
+          width: 16px;
+          height: 16px;
+          background-color: var(--el-color-primary-light-9);
+          border-top: 2px solid var(--el-color-primary);
+          border-left: 2px solid var(--el-color-primary);
+          transform: rotate(45deg);
+        }
 
-          // 三角箭头 - 上边框样式
-          .magnifier-arrow {
-            position: absolute;
-            top: -9px;
-            left: 80px;
-            width: 16px;
-            height: 16px;
-            background-color: var(--el-bg-color, #fff);
-            border-top: 2px solid var(--el-color-primary);
-            border-left: 2px solid var(--el-color-primary);
-            transform: rotate(45deg);
-          }
-
-          // 内容区域
-          .magnifier-content {
-            max-width: min(720px, calc(100vw - 48px));
-            padding: 16px 24px;
-            font-family: 'Courier New', Consolas, monospace;
-            font-size: 28px;
-            font-weight: 600;
-            line-height: 1.4;
-            color: var(--el-text-color-primary);
-            letter-spacing: 3px;
-            overflow-wrap: anywhere;
-            white-space: normal;
-            background-color: var(--el-bg-color, #fff);
-            border: 2px solid var(--el-color-primary);
-            border-radius: 8px;
-            box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
-          }
+        .magnifier-content {
+          display: inline-block;
+          width: fit-content;
+          max-width: min(720px, calc(100vw - 48px));
+          padding: 14px 22px;
+          font-family: 'Courier New', Consolas, monospace;
+          font-size: 24px;
+          font-weight: 600;
+          line-height: 1.4;
+          color: var(--el-color-primary);
+          text-align: center;
+          letter-spacing: 1.5px;
+          overflow-wrap: anywhere;
+          white-space: normal;
+          background-color: var(--el-color-primary-light-9);
+          border: 2px solid var(--el-color-primary);
+          border-radius: 8px;
+          box-shadow: 0 8px 18px rgb(15 23 42 / 12%);
         }
       }
+    }
 
-      .operation-button-group {
-        display: flex;
-        gap: 12px;
-        margin-left: auto;
-      }
+    .operation-button-group {
+      display: flex;
+      gap: 12px;
+      margin-left: auto;
     }
   }
 
-  // 放大效果的过渡动画
   .zoom-fade-enter-active,
   .zoom-fade-leave-active {
     transition: all 0.2s ease;
   }
 
-  .zoom-fade-enter-from {
-    opacity: 0;
-    transform: scale(0.8) translateY(-10px);
-  }
-
+  .zoom-fade-enter-from,
   .zoom-fade-leave-to {
     opacity: 0;
     transform: scale(0.8) translateY(-10px);
@@ -244,66 +224,47 @@
   }
 
   @media (width <= 768px) {
-    .search-card {
-      top: 16px;
+    .search-area {
       margin-bottom: 16px;
+    }
 
-      :deep(.el-card__header) {
-        padding: 12px 16px;
-      }
+    .iccid-search {
+      flex-direction: column;
+      align-items: stretch;
 
-      :deep(.el-card__body) {
-        padding: 12px 16px;
-      }
+      .iccid-input-wrapper {
+        flex-basis: auto;
+        width: 100%;
+        min-width: 0;
 
-      :deep(.el-card__header) .card-header {
-        flex-direction: column;
-        align-items: stretch;
+        .iccid-magnifier {
+          right: 0;
+          left: 0;
+          white-space: normal;
 
-        .el-button {
-          width: 100%;
-          margin-left: 0;
-        }
-      }
+          .magnifier-arrow {
+            left: 24px;
+          }
 
-      .iccid-search {
-        flex-direction: column;
-        align-items: stretch;
-
-        .iccid-input-wrapper {
-          flex-basis: auto;
-          width: 100%;
-          min-width: 0;
-
-          .iccid-magnifier {
-            right: 0;
-            left: 0;
-            white-space: normal;
-
-            .magnifier-arrow {
-              left: 24px;
-            }
-
-            .magnifier-content {
-              display: block;
-              width: 100%;
-              padding: 12px 14px;
-              font-size: 18px;
-              letter-spacing: 1px;
-            }
+          .magnifier-content {
+            display: block;
+            width: 100%;
+            padding: 12px 14px;
+            font-size: 18px;
+            letter-spacing: 1px;
           }
         }
+      }
 
-        .search-action-button,
-        .operation-button-group,
-        .operation-button-group .el-button {
-          width: 100%;
-          margin-left: 0;
-        }
+      .search-action-button,
+      .operation-button-group,
+      .operation-button-group .el-button {
+        width: 100%;
+        margin-left: 0;
+      }
 
-        .operation-button-group {
-          margin-left: 0;
-        }
+      .operation-button-group {
+        margin-left: 0;
       }
     }
   }

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

@@ -40,7 +40,7 @@
         </div>
       </div>
     </template>
-    <ElDescriptions :column="descriptionsColumn" border>
+    <ElDescriptions :column="descriptionsColumn" direction="vertical" border>
       <!-- 卡专属字段 -->
       <template v-if="cardInfo?.asset_type === 'card'">
         <ElDescriptionsItem label="ICCID">{{ cardInfo?.iccid || '-' }}</ElDescriptionsItem>
@@ -214,7 +214,7 @@
       <ElDescriptions :column="descriptionsColumn" border>
         <ElDescriptionsItem v-if="previousExchangeAsset" label="前代资产">
           <div class="exchange-asset">
-            <ElTag type="success" size="small">换货新资产</ElTag>
+            <ElTag type="success" size="small">旧资产</ElTag>
             <ElButton
               v-if="previousExchangeAsset.can_view"
               type="primary"
@@ -251,230 +251,118 @@
 
     <!-- 设备绑定卡列表 -->
     <template v-if="cardInfo?.asset_type === 'device'">
-      <ElDivider content-position="left">绑定卡列表</ElDivider>
-      <ElTable
-        v-if="cardInfo.cards && cardInfo.cards.length > 0"
-        :data="sortedDeviceCards"
-        border
-        style="width: 100%; margin-top: 16px"
-      >
-        <ElTableColumn label="ICCID" width="220" show-overflow-tooltip>
-          <template #default="scope">
-            <div style="display: flex; align-items: center; justify-content: space-between">
-              <ElButton type="primary" link @click="handleNavigateToCardInfo(scope.row.iccid)">
-                {{ scope.row.iccid }}
+      <ElDivider class="info-section-divider" content-position="left">
+        <span class="section-divider-title">绑定卡列表</span>
+      </ElDivider>
+      <div v-if="cardInfo.cards && cardInfo.cards.length > 0" class="binding-card-list">
+        <ElCard v-for="bindingCard in sortedDeviceCards" :key="bindingCard.iccid" shadow="never">
+          <div class="binding-card-header">
+            <div class="binding-card-identifier">
+              <ElButton type="primary" link @click="handleNavigateToCardInfo(bindingCard.iccid)">
+                {{ bindingCard.iccid }}
               </ElButton>
-              <el-icon
-                class="copy-icon"
-                @click="handleCopyICCID(scope.row.iccid)"
-                style="color: var(--el-color-primary); cursor: pointer"
-              >
+              <el-icon class="copy-icon" @click="handleCopyICCID(bindingCard.iccid)" title="复制">
                 <CopyDocument />
               </el-icon>
             </div>
-          </template>
-        </ElTableColumn>
-        <ElTableColumn prop="msisdn" label="MSISDN" min-width="150" showOverflowTooltip />
+            <ElTag v-if="bindingCard.is_current" type="primary" size="small">当前</ElTag>
+          </div>
 
-        <ElTableColumn prop="carrier_name" label="运营商" min-width="120" showOverflowTooltip />
-        <ElTableColumn prop="slot_position" label="卡槽位置" width="130">
-          <template #default="scope">
-            <div style="display: flex; gap: 10px">
-              <span>SIM-{{ scope.row.slot_position }}</span>
-              <ElTag v-if="scope.row.is_current" type="primary" size="small">当前</ElTag>
-            </div>
-          </template>
-        </ElTableColumn>
-        <ElTableColumn label="网络状态" width="100">
-          <template #default="scope">
-            <ElTag :type="scope.row.network_status === 1 ? 'success' : 'danger'" size="small">
-              {{ scope.row.network_status === 1 ? '正常' : '停机' }}
-            </ElTag>
-          </template>
-        </ElTableColumn>
-        <ElTableColumn label="实名状态" width="100">
-          <template #default="scope">
-            <ElTag :type="getRealNameStatusType(scope.row.real_name_status)" size="small">
-              {{ getRealNameStatusName(scope.row.real_name_status) }}
-            </ElTag>
-          </template>
-        </ElTableColumn>
-        <ElTableColumn label="实名认证策略" width="120" showOverflowTooltip>
-          <template #default="scope">
-            {{ getRealnamePolicyName(scope.row.realname_policy) }}
-          </template>
-        </ElTableColumn>
-        <ElTableColumn label="实名时间" width="170">
-          <template #default="scope">
-            {{ scope.row.real_name_at ? formatDateTime(scope.row.real_name_at) : '-' }}
-          </template>
-        </ElTableColumn>
-        <ElTableColumn label="运营商停机原因" min-width="220" showOverflowTooltip>
-          <template #default="scope">
-            {{ scope.row.gateway_extend || '-' }}
-          </template>
-        </ElTableColumn>
-        <ElTableColumn label="操作" width="260" fixed="right">
-          <template #default="scope">
-            <!-- 根据网络状态显示启用或停用按钮 -->
+          <div class="binding-card-details">
+            <ElDescriptions :column="bindingCardColumns" direction="vertical">
+              <ElDescriptionsItem label="MSISDN">
+                {{ bindingCard.msisdn || '-' }}
+              </ElDescriptionsItem>
+              <ElDescriptionsItem label="运营商">
+                {{ bindingCard.carrier_name || '-' }}
+              </ElDescriptionsItem>
+              <ElDescriptionsItem label="卡槽位置">
+                SIM-{{ bindingCard.slot_position ?? '-' }}
+              </ElDescriptionsItem>
+              <ElDescriptionsItem label="网络状态">
+                <ElTag :type="bindingCard.network_status === 1 ? 'success' : 'danger'" size="small">
+                  {{ bindingCard.network_status === 1 ? '正常' : '停机' }}
+                </ElTag>
+              </ElDescriptionsItem>
+              <ElDescriptionsItem label="实名状态">
+                <ElTag :type="getRealNameStatusType(bindingCard.real_name_status)" size="small">
+                  {{ getRealNameStatusName(bindingCard.real_name_status) }}
+                </ElTag>
+              </ElDescriptionsItem>
+              <ElDescriptionsItem label="实名认证策略">
+                {{ getRealnamePolicyName(bindingCard.realname_policy) }}
+              </ElDescriptionsItem>
+              <ElDescriptionsItem label="实名时间">
+                {{ bindingCard.real_name_at ? formatDateTime(bindingCard.real_name_at) : '-' }}
+              </ElDescriptionsItem>
+              <ElDescriptionsItem label="运营商停机原因">
+                {{ bindingCard.gateway_extend || '-' }}
+              </ElDescriptionsItem>
+            </ElDescriptions>
+          </div>
+
+          <div class="binding-card-actions">
             <ElButton
-              v-if="scope.row.network_status === 0"
+              v-if="bindingCard.network_status === 0"
               type="success"
               size="small"
               link
-              :disabled="isBindingStartDisabled(scope.row)"
-              @click="handleEnableBindingCard(scope.row)"
+              :disabled="isBindingStartDisabled(bindingCard)"
+              @click="handleEnableBindingCard(bindingCard)"
               v-permission="'iot_info:start'"
             >
-              {{ getBindingStartButtonText(scope.row) }}
+              {{ getBindingStartButtonText(bindingCard) }}
             </ElButton>
             <ElButton
-              v-if="scope.row.network_status === 1"
+              v-if="bindingCard.network_status === 1"
               type="warning"
               size="small"
               link
-              :disabled="isBindingStopDisabled(scope.row)"
-              @click="handleDisableBindingCard(scope.row)"
+              :disabled="isBindingStopDisabled(bindingCard)"
+              @click="handleDisableBindingCard(bindingCard)"
               v-permission="'iot_info:stop'"
             >
-              {{ getBindingStopButtonText(scope.row) }}
+              {{ getBindingStopButtonText(bindingCard) }}
             </ElButton>
             <ElButton
               type="primary"
               size="small"
               link
-              @click="handleUpdateBindingCardRealnameStatus(scope.row)"
+              @click="handleUpdateBindingCardRealnameStatus(bindingCard)"
               v-permission="'bound_card:update_realname_status'"
             >
               更新实名状态
             </ElButton>
             <ElButton
-              v-if="getBindingCardAuditTarget(scope.row)"
+              v-if="getBindingCardAuditTarget(bindingCard)"
               type="primary"
               size="small"
               link
-              @click="openBindingCardAudit(scope.row)"
+              @click="openBindingCardAudit(bindingCard)"
             >
               卡审计
             </ElButton>
-          </template>
-        </ElTableColumn>
-      </ElTable>
+          </div>
+        </ElCard>
+      </div>
       <ElEmpty v-else description="暂无绑定卡" :image-size="80" style="margin-top: 16px" />
 
       <!-- 设备实时信息 -->
-      <ElDivider content-position="left">设备实时信息</ElDivider>
-      <div v-if="hasDeviceRealtimeSection" v-loading="realtimeLoading" style="margin-top: 16px">
-        <ElDescriptions :column="descriptionsColumn" border>
-          <!-- 基本状态 -->
-          <ElDescriptionsItem label="在线状态">
-            <ElTag :type="getOnlineStatusType(deviceRealtime?.online_status)" size="small">
-              {{ getOnlineStatusName(deviceRealtime?.online_status) }}
+      <ElDivider class="info-section-divider" content-position="left">
+        <span class="section-divider-title">设备实时信息</span>
+      </ElDivider>
+      <div v-if="hasDeviceRealtimeSection" v-loading="realtimeLoading" class="realtime-section">
+        <ElDescriptions :column="descriptionsColumn" direction="vertical" border>
+          <ElDescriptionsItem
+            v-for="item in realtimeDescriptionItems"
+            :key="item.key"
+            :label="item.label"
+            :span="item.span ?? 1"
+          >
+            <ElTag v-if="item.tagType" :type="item.tagType" size="small">
+              {{ item.value }}
             </ElTag>
-          </ElDescriptionsItem>
-          <ElDescriptionsItem label="电量">
-            {{
-              deviceRealtime?.battery_level !== null && deviceRealtime?.battery_level !== undefined
-                ? `${deviceRealtime?.battery_level}%`
-                : '-'
-            }}
-          </ElDescriptionsItem>
-
-          <!-- 时间信息 -->
-          <ElDescriptionsItem label="本次开机时长">
-            {{ formatDuration(deviceRealtime?.run_time) }}
-          </ElDescriptionsItem>
-          <ElDescriptionsItem label="本次联网时长">
-            {{ formatDuration(deviceRealtime?.connect_time) }}
-          </ElDescriptionsItem>
-          <ElDescriptionsItem label="最后在线时间">
-            {{ formatDateTime(deviceRealtime?.last_online_time) || '-' }}
-          </ElDescriptionsItem>
-          <ElDescriptionsItem label="实名同步时间">
-            {{ formatDateTime(cardInfo?.last_real_name_check_at) || '-' }}
-          </ElDescriptionsItem>
-          <ElDescriptionsItem label="卡状态同步时间">
-            {{ formatDateTime(cardInfo?.last_card_status_check_at) || '-' }}
-          </ElDescriptionsItem>
-          <ElDescriptionsItem label="流量同步时间">
-            {{ formatDateTime(cardInfo?.last_data_check_at) || '-' }}
-          </ElDescriptionsItem>
-
-          <!-- 信号信息 -->
-          <ElDescriptionsItem label="信号综合判断">
-            <ElTag :type="getSignalQualityType(deviceRealtime?.signal_quality)" size="small">
-              {{ getSignalQualityText(deviceRealtime?.signal_quality) }}
-            </ElTag>
-          </ElDescriptionsItem>
-          <ElDescriptionsItem label="信号较弱原因" :span="3">
-            {{ getSignalBadReasonText(deviceRealtime?.signal_bad_reason) }}
-          </ElDescriptionsItem>
-          <ElDescriptionsItem label="已连接设备数">
-            {{ deviceRealtime?.client_number ?? '-' }} / {{ deviceRealtime?.max_clients ?? '-' }}
-          </ElDescriptionsItem>
-
-          <!-- WiFi 信息 -->
-          <ElDescriptionsItem label="WiFi 状态">
-            <ElTag :type="deviceRealtime?.wifi_enabled ? 'success' : 'info'" size="small">
-              {{
-                deviceRealtime?.wifi_enabled === undefined
-                  ? '-'
-                  : deviceRealtime.wifi_enabled
-                    ? '已开启'
-                    : '已关闭'
-              }}
-            </ElTag>
-          </ElDescriptionsItem>
-          <ElDescriptionsItem label="WiFi 名称">
-            {{ deviceRealtime?.ssid || '-' }}
-          </ElDescriptionsItem>
-          <ElDescriptionsItem label="WiFi 密码">
-            {{ deviceRealtime?.wifi_password || '-' }}
-          </ElDescriptionsItem>
-
-          <!-- 网络信息 -->
-          <ElDescriptionsItem label="WAN IP">
-            {{ deviceRealtime?.wan_ip || '-' }}
-          </ElDescriptionsItem>
-          <ElDescriptionsItem label="LAN IP">
-            {{ deviceRealtime?.lan_ip || '-' }}
-          </ElDescriptionsItem>
-
-          <ElDescriptionsItem label="MAC 地址">
-            {{ deviceRealtime?.mac_address || '-' }}
-          </ElDescriptionsItem>
-          <ElDescriptionsItem label="IMSI">
-            {{ deviceRealtime?.imsi || '-' }}
-          </ElDescriptionsItem>
-
-          <!-- 设备配置 -->
-          <ElDescriptionsItem label="限速">
-            {{
-              deviceRealtime?.limit_speed === undefined
-                ? '-'
-                : deviceRealtime.limit_speed
-                  ? `${deviceRealtime.limit_speed} KB/s`
-                  : '不限速'
-            }}
-          </ElDescriptionsItem>
-          <ElDescriptionsItem label="固件版本">
-            {{ deviceRealtime?.software_version || '-' }}
-          </ElDescriptionsItem>
-          <ElDescriptionsItem label="切卡模式">
-            {{
-              deviceRealtime?.switch_mode === '0'
-                ? '自动'
-                : deviceRealtime?.switch_mode === '1'
-                  ? '手动'
-                  : '-'
-            }}
-          </ElDescriptionsItem>
-
-          <ElDescriptionsItem label="上报周期">
-            {{ deviceRealtime?.sync_interval ? `${deviceRealtime.sync_interval} 秒` : '-' }}
-          </ElDescriptionsItem>
-          <ElDescriptionsItem label="信息更新时间">
-            {{ formatDateTime(deviceRealtime?.last_update_time) || '-' }}
+            <span v-else>{{ item.value }}</span>
           </ElDescriptionsItem>
         </ElDescriptions>
       </div>
@@ -577,8 +465,6 @@
     ElTooltip,
     ElSwitch,
     ElDivider,
-    ElTable,
-    ElTableColumn,
     ElButton,
     ElAlert,
     ElEmpty,
@@ -825,9 +711,11 @@
   const descriptionsColumn = computed(() => {
     if (width.value <= 640) return 1
     if (width.value <= 1024) return 2
-    return 4
+    return 5
   })
 
+  const bindingCardColumns = computed(() => (width.value <= 640 ? 1 : 2))
+
   // Emits
   interface Emits {
     (e: 'update:pollingEnabled', value: boolean): void
@@ -871,6 +759,127 @@
   } = useAssetFormatters()
 
   // 排序后的设备卡列表（按卡槽位置排序，当前卡排在最前面）
+  const realtimeDescriptionItems = computed(() => {
+    const realtime = props.deviceRealtime
+
+    return [
+      {
+        key: 'status',
+        label: '在线状态',
+        value: getOnlineStatusName(realtime?.online_status),
+        tagType: getOnlineStatusType(realtime?.online_status)
+      },
+      {
+        key: 'battery',
+        label: '电量',
+        value:
+          realtime?.battery_level !== null && realtime?.battery_level !== undefined
+            ? `${realtime.battery_level}%`
+            : '-'
+      },
+      {
+        key: 'boot',
+        label: '本次开机时长',
+        value: formatDuration(realtime?.run_time)
+      },
+      {
+        key: 'connect',
+        label: '本次联网时长',
+        value: formatDuration(realtime?.connect_time)
+      },
+      {
+        key: 'online',
+        label: '最后在线时间',
+        value: formatDateTime(realtime?.last_online_time) || '-'
+      },
+      {
+        key: 'realname',
+        label: '实名同步时间',
+        value: formatDateTime(props.cardInfo?.last_real_name_check_at) || '-'
+      },
+      {
+        key: 'cardSync',
+        label: '卡状态同步时间',
+        value: formatDateTime(props.cardInfo?.last_card_status_check_at) || '-'
+      },
+      {
+        key: 'trafficSync',
+        label: '流量同步时间',
+        value: formatDateTime(props.cardInfo?.last_data_check_at) || '-'
+      },
+      {
+        key: 'signal',
+        label: '信号综合判断',
+        value: getSignalQualityText(realtime?.signal_quality),
+        tagType: getSignalQualityType(realtime?.signal_quality)
+      },
+      {
+        key: 'signalReason',
+        label: '信号较弱原因',
+        value: getSignalBadReasonText(realtime?.signal_bad_reason)
+      },
+      {
+        key: 'clients',
+        label: '已连接设备数',
+        value: `${realtime?.client_number ?? '-'} / ${realtime?.max_clients ?? '-'}`
+      },
+      {
+        key: 'wifi',
+        label: 'WiFi 状态',
+        value:
+          realtime?.wifi_enabled === undefined ? '-' : realtime.wifi_enabled ? '已开启' : '已关闭',
+        tagType: realtime?.wifi_enabled ? 'success' : 'info'
+      },
+      {
+        key: 'wifiName',
+        label: 'WiFi 名称',
+        value: realtime?.ssid || '-'
+      },
+      {
+        key: 'wifiPassword',
+        label: 'WiFi 密码',
+        value: realtime?.wifi_password || '-'
+      },
+      { key: 'wan', label: 'WAN IP', value: realtime?.wan_ip || '-' },
+      { key: 'lan', label: 'LAN IP', value: realtime?.lan_ip || '-' },
+      {
+        key: 'mac',
+        label: 'MAC 地址',
+        value: realtime?.mac_address || '-'
+      },
+      {
+        key: 'limit',
+        label: '限速',
+        value:
+          realtime?.limit_speed === undefined
+            ? '-'
+            : realtime.limit_speed
+              ? `${realtime.limit_speed} KB/s`
+              : '不限速'
+      },
+      {
+        key: 'switchMode',
+        label: '切卡模式',
+        value: realtime?.switch_mode === '0' ? '自动' : realtime?.switch_mode === '1' ? '手动' : '-'
+      },
+      {
+        key: 'interval',
+        label: '上报周期',
+        value: realtime?.sync_interval ? `${realtime.sync_interval} 秒` : '-'
+      },
+      {
+        key: 'firmware',
+        label: '固件版本',
+        value: realtime?.software_version || '-',
+        span: descriptionsColumn.value >= 5 ? 2 : 1
+      },
+      {
+        key: 'updated',
+        label: '信息更新时间',
+        value: formatDateTime(realtime?.last_update_time) || '-'
+      }
+    ]
+  })
   const sortedDeviceCards = computed(() => {
     if (!props.cardInfo?.cards || props.cardInfo.cards.length === 0) {
       return []
@@ -1084,16 +1093,96 @@
         }
       }
 
-      :deep(.el-descriptions__body) {
-        overflow-x: auto;
+      .info-section-divider {
+        display: flex;
+        height: 20px;
+        align-items: center;
+        border-top: 0;
+
+        :deep(.el-divider__text) {
+          position: static;
+          display: inline-flex;
+          padding: 0;
+          font-size: 15px;
+          font-weight: 600;
+          line-height: 20px;
+          color: var(--el-text-color-primary);
+          background-color: transparent;
+          transform: none;
+        }
+
+        .section-divider-title {
+          display: inline-flex;
+          gap: 8px;
+          align-items: center;
+
+          &::before {
+            width: 3px;
+            height: 16px;
+            content: '';
+            background-color: var(--el-color-primary);
+            border-radius: 2px;
+          }
+        }
       }
 
-      :deep(.el-descriptions__cell) {
-        word-break: break-word;
+      .binding-card-list {
+        display: grid;
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+        gap: 16px;
       }
 
-      :deep(.el-table) {
-        min-width: 760px;
+      .binding-card-header,
+      .binding-card-identifier,
+      .binding-card-actions {
+        display: flex;
+        align-items: center;
+      }
+
+      .binding-card-header {
+        justify-content: space-between;
+        padding-bottom: 12px;
+        border-bottom: 1px solid var(--el-border-color-lighter);
+      }
+
+      .binding-card-details {
+        padding-top: 12px;
+      }
+
+      .binding-card-identifier {
+        min-width: 0;
+
+        .el-button {
+          max-width: 100%;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+
+        .copy-icon {
+          flex: 0 0 auto;
+          margin-left: 6px;
+          color: var(--el-color-primary);
+          cursor: pointer;
+        }
+      }
+
+      .binding-card-actions {
+        flex-wrap: wrap;
+        gap: 8px;
+        padding-top: 12px;
+        margin-top: 12px;
+        border-top: 1px solid var(--el-border-color-lighter);
+
+        .el-button {
+          margin-left: 0;
+        }
+      }
+
+      @media (width <= 1200px) {
+        .binding-card-list {
+          grid-template-columns: repeat(2, minmax(0, 1fr));
+        }
       }
 
       .card-operations,
@@ -1120,6 +1209,11 @@
       }
 
       @media (width <= 768px) {
+        .binding-card-list {
+          grid-template-columns: 1fr;
+          gap: 12px;
+        }
+
         .card-header {
           flex-direction: column;
           align-items: flex-start;

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

@@ -186,7 +186,7 @@
       </div>
 
       <!-- 套餐详情表格 -->
-      <ElDescriptions :column="descriptionsColumn" border class="package-info-table">
+      <ElDescriptions :column="descriptionsColumn" direction="vertical" border>
         <ElDescriptionsItem label="订单号">
           {{ currentPackage.order_no || '-' }}
         </ElDescriptionsItem>
@@ -296,7 +296,7 @@
   const descriptionsColumn = computed(() => {
     if (width.value <= 640) return 1
     if (width.value <= 1024) return 2
-    return 3
+    return 5
   })
 
   const emit = defineEmits<{
@@ -450,18 +450,6 @@
       }
     }
 
-    .package-info-table {
-      margin-top: 0;
-    }
-
-    :deep(.el-descriptions__body) {
-      overflow-x: auto;
-    }
-
-    :deep(.el-descriptions__cell) {
-      word-break: break-word;
-    }
-
     @media (width <= 992px) {
       .flow-progress-card {
         .flow-stats-container {

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

@@ -12,21 +12,21 @@
       <!-- 钱包余额展示 -->
       <div class="wallet-balance-cards">
         <div class="balance-card total">
-          <div class="balance-icon">💰</div>
+          <div class="balance-icon"><Money /></div>
           <div class="balance-info">
             <div class="balance-label">总余额</div>
             <div class="balance-value">{{ formatAmount(walletInfo.balance) }}</div>
           </div>
         </div>
         <div class="balance-card available">
-          <div class="balance-icon">✅</div>
+          <div class="balance-icon"><CircleCheck /></div>
           <div class="balance-info">
             <div class="balance-label">可用余额</div>
             <div class="balance-value">{{ formatAmount(walletInfo.available_balance) }}</div>
           </div>
         </div>
         <div class="balance-card frozen">
-          <div class="balance-icon">🔒</div>
+          <div class="balance-icon"><Lock /></div>
           <div class="balance-info">
             <div class="balance-label">冻结余额</div>
             <div class="balance-value">{{ formatAmount(walletInfo.frozen_balance) }}</div>
@@ -40,6 +40,7 @@
 
 <script setup lang="ts">
   import { ElCard, ElTag, ElEmpty } from 'element-plus'
+  import { CircleCheck, Lock, Money } from '@element-plus/icons-vue'
   import { useAssetFormatters } from '../composables/useAssetFormatters'
 
   // Use formatters
@@ -91,6 +92,11 @@
           flex-shrink: 0;
           font-size: 26px;
           line-height: 1;
+
+          :deep(svg) {
+            width: 22px;
+            height: 22px;
+          }
         }
 
         .balance-info {

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

@@ -10,15 +10,15 @@
           <template v-if="walletInfo">
             <ElDivider class="wallet-divider" direction="vertical" />
             <span class="balance-item"
-              >💰 总余额 <strong>{{ formatAmount(walletInfo.balance) }}</strong></span
+              >总余额 <strong>{{ formatAmount(walletInfo.balance) }}</strong></span
             >
             <ElDivider class="wallet-divider" direction="vertical" />
             <span class="balance-item"
-              >✅ 可用 <strong>{{ formatAmount(walletInfo.available_balance) }}</strong></span
+              >可用 <strong>{{ formatAmount(walletInfo.available_balance) }}</strong></span
             >
             <ElDivider class="wallet-divider" direction="vertical" />
             <span class="balance-item"
-              >🔒 冻结 <strong>{{ formatAmount(walletInfo.frozen_balance) }}</strong></span
+              >冻结 <strong>{{ formatAmount(walletInfo.frozen_balance) }}</strong></span
             >
           </template>
         </div>

src/views/asset-management/asset-information/components/dialogs/DailyRecordsDialog.vue

@@ -1,5 +1,11 @@
 <template>
-  <ElDialog v-model="visible" title="套餐流量详单" width="900px" destroy-on-close>
+  <ElDialog
+    v-model="visible"
+    title="套餐流量详单"
+    width="900px"
+    modal-class="asset-information-dialog"
+    destroy-on-close
+  >
     <div v-if="data">
       <!-- 套餐信息摘要 -->
       <ElDescriptions :column="2" border style="margin-bottom: 20px">

src/views/asset-management/asset-information/components/dialogs/OrderHistoryDialog.vue

@@ -1,5 +1,11 @@
 <template>
-  <ElDialog v-model="visible" title="往期订单" width="60%" destroy-on-close>
+  <ElDialog
+    v-model="visible"
+    title="往期订单"
+    width="60%"
+    modal-class="asset-information-dialog"
+    destroy-on-close
+  >
     <div v-if="loading" style="padding: 40px 0; text-align: center">
       <ElIcon class="is-loading" :size="40"><Loading /></ElIcon>
     </div>
@@ -132,8 +138,7 @@
     ElPagination,
     ElAlert,
     ElEmpty,
-    ElIcon,
-    ElMessage
+    ElIcon
   } from 'element-plus'
   import { Loading } from '@element-plus/icons-vue'
   import { AssetService } from '@/api/modules'

src/views/asset-management/asset-information/components/dialogs/PackageRechargeDialog.vue

@@ -1,5 +1,11 @@
 <template>
-  <ElDialog v-model="visible" title="套餐充值" width="30%" @closed="handleDialogClosed">
+  <ElDialog
+    v-model="visible"
+    title="套餐充值"
+    width="30%"
+    modal-class="asset-information-dialog"
+    @closed="handleDialogClosed"
+  >
     <ElForm ref="formRef" :model="form" :rules="rules" label-width="80px">
       <ElFormItem label="资产信息">
         <span style="font-weight: bold; color: #409eff">

src/views/asset-management/asset-information/components/dialogs/SpeedLimitDialog.vue

@@ -5,7 +5,7 @@
     width="500px"
     :lock-scroll="true"
     :z-index="4000"
-    modal-class="speed-limit-modal"
+    modal-class="asset-information-dialog speed-limit-modal"
   >
     <ElForm ref="formRef" :model="form" :rules="rules" label-width="120px">
       <ElFormItem label="固定档位" prop="code">

src/views/asset-management/asset-information/components/dialogs/SwitchModeDialog.vue

@@ -1,5 +1,10 @@
 <template>
-  <ElDialog v-model="visible" title="设置切卡模式" width="500px">
+  <ElDialog
+    v-model="visible"
+    title="设置切卡模式"
+    width="500px"
+    modal-class="asset-information-dialog"
+  >
     <ElForm ref="formRef" :model="form" :rules="rules" label-width="96px">
       <ElFormItem label="设备标识">
         <span class="device-identifier">{{ deviceIdentifier || '-' }}</span>

src/views/asset-management/asset-information/components/dialogs/WiFiConfigDialog.vue

@@ -1,5 +1,11 @@
 <template>
-  <ElDialog v-model="visible" title="设置WiFi" width="30%" :append-to-body="true">
+  <ElDialog
+    v-model="visible"
+    title="设置WiFi"
+    width="30%"
+    modal-class="asset-information-dialog"
+    :append-to-body="true"
+  >
     <ElForm ref="formRef" :model="form" :rules="rules" label-width="80px" autocomplete="off">
       <ElFormItem label="WiFi状态" prop="enabled">
         <ElRadioGroup v-model="form.enabled">

src/views/asset-management/asset-information/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="single-card-page">
+  <div class="single-card-page asset-information-page">
     <!-- 资产查询区域 -->
     <AssetSearchCard
       ref="assetSearchCardRef"
@@ -12,54 +12,55 @@
     <!-- 卡片内容区域 -->
     <div v-if="cardInfo" class="card-content-area slide-in">
       <div class="main-content-layout">
-        <!-- 第一行：基本信息 -->
-        <div class="row full-width">
-          <BasicInfoCard
-            :card-info="cardInfo"
-            :device-realtime="deviceRealtime"
-            v-model:polling-enabled="pollingEnabled"
-            :realtime-loading="realtimeLoading"
-            :start-disabled="startDisabled"
-            :start-error-message="startFailureMessage"
-            :stop-disabled="stopDisabled"
-            :start-remaining-text="startRemainingText"
-            :stop-remaining-text="stopRemainingText"
-            :get-start-remaining-text="getStartRemainingText"
-            :get-stop-remaining-text="getStopRemainingText"
-            :is-start-disabled="isStartActionDisabled"
-            :is-stop-disabled="isStopActionDisabled"
-            @enable-card="handleEnableCard"
-            @disable-card="handleDisableCard"
-            @manual-deactivate="handleManualDeactivate"
-            @reboot-device="handleRebootDevice"
-            @reset-device="handleResetDevice"
-            @show-switch-card="showSwitchCardDialog"
-            @show-switch-mode="showSwitchModeDialog"
-            @show-set-wifi="showSetWiFiDialog"
-            @show-realname-policy="showRealnamePolicyDialog"
-            @show-speed-limit="speedLimitDialogVisible = true"
-            @show-update-realname-status="showUpdateRealnameStatusDialog"
-            @enable-binding-card="handleEnableBindingCard"
-            @disable-binding-card="handleDisableBindingCard"
-            @update-binding-card-realname-status="handleUpdateBindingCardRealnameStatus"
-            @navigate-to-asset="handleNavigateToAsset"
-            @navigate-to-card="handleNavigateToCard"
-            @navigate-to-device="handleNavigateToDevice"
-          />
-        </div>
+        <div class="overview-grid">
+          <!-- 第一层：资产概览与当前生效套餐，按信息高度纵向展开 -->
+          <div class="row overview-primary">
+            <BasicInfoCard
+              :card-info="cardInfo"
+              :device-realtime="deviceRealtime"
+              v-model:polling-enabled="pollingEnabled"
+              :realtime-loading="realtimeLoading"
+              :start-disabled="startDisabled"
+              :start-error-message="startFailureMessage"
+              :stop-disabled="stopDisabled"
+              :start-remaining-text="startRemainingText"
+              :stop-remaining-text="stopRemainingText"
+              :get-start-remaining-text="getStartRemainingText"
+              :get-stop-remaining-text="getStopRemainingText"
+              :is-start-disabled="isStartActionDisabled"
+              :is-stop-disabled="isStopActionDisabled"
+              @enable-card="handleEnableCard"
+              @disable-card="handleDisableCard"
+              @manual-deactivate="handleManualDeactivate"
+              @reboot-device="handleRebootDevice"
+              @reset-device="handleResetDevice"
+              @show-switch-card="showSwitchCardDialog"
+              @show-switch-mode="showSwitchModeDialog"
+              @show-set-wifi="showSetWiFiDialog"
+              @show-realname-policy="showRealnamePolicyDialog"
+              @show-speed-limit="speedLimitDialogVisible = true"
+              @show-update-realname-status="showUpdateRealnameStatusDialog"
+              @enable-binding-card="handleEnableBindingCard"
+              @disable-binding-card="handleDisableBindingCard"
+              @update-binding-card-realname-status="handleUpdateBindingCardRealnameStatus"
+              @navigate-to-asset="handleNavigateToAsset"
+              @navigate-to-card="handleNavigateToCard"
+              @navigate-to-device="handleNavigateToDevice"
+            />
+          </div>
 
-        <!-- 第二行：当前生效套餐 -->
-        <div class="row full-width">
-          <CurrentPackageCard
-            :current-package="currentPackage"
-            :loading="currentPackageLoading"
-            :error-msg="currentPackageErrorMsg"
-            :bound-device-id="cardInfo.bound_device_id"
-            :bound-device-no="cardInfo.bound_device_no"
-            :bound-device-name="cardInfo.bound_device_name"
-            @show-recharge="showRechargeDialog"
-            @navigate-to-device="handleNavigateToDevice"
-          />
+          <div class="row overview-secondary">
+            <CurrentPackageCard
+              :current-package="currentPackage"
+              :loading="currentPackageLoading"
+              :error-msg="currentPackageErrorMsg"
+              :bound-device-id="cardInfo.bound_device_id"
+              :bound-device-no="cardInfo.bound_device_no"
+              :bound-device-name="cardInfo.bound_device_name"
+              @show-recharge="showRechargeDialog"
+              @navigate-to-device="handleNavigateToDevice"
+            />
+          </div>
         </div>
 
         <!-- 第三行：套餐列表 -->
@@ -989,6 +990,12 @@
     }
 
     // 主内容布局
+    .overview-grid {
+      display: flex;
+      flex-direction: column;
+      gap: 24px;
+    }
+
     .main-content-layout {
       display: flex;
       flex-direction: column;
@@ -1057,6 +1064,10 @@
       }
 
       @media (width <= 768px) {
+        .overview-grid {
+          gap: 16px;
+        }
+
         gap: 16px;
 
         .row {
@@ -1636,3 +1647,118 @@
     }
   }
 </style>
+
+<style lang="scss" scoped>
+  .asset-information-page {
+    background: #ffffff;
+  }
+</style>
+
+<style lang="scss">
+  /* Dialogs are teleported to body, so their surface needs a page-level hook. */
+  .asset-information-dialog.el-dialog {
+    max-width: calc(100vw - 32px);
+    overflow: hidden;
+    border: 1px solid #e5eaf1;
+    border-radius: 14px;
+    box-shadow: 0 18px 50px rgb(15 23 42 / 18%);
+
+    .el-dialog__header {
+      padding: 20px 24px 16px;
+      margin: 0;
+      border-bottom: 1px solid #e5eaf1;
+    }
+
+    .el-dialog__title {
+      font-size: 16px;
+      font-weight: 650;
+      color: #172033;
+      letter-spacing: -0.01em;
+    }
+
+    .el-dialog__body {
+      padding: 22px 24px 20px;
+    }
+
+    .el-dialog__footer {
+      padding: 14px 24px 20px;
+      border-top: 1px solid #eef2f7;
+    }
+
+    .el-form-item {
+      margin-bottom: 18px;
+    }
+
+    .el-form-item__label {
+      color: #526078;
+    }
+
+    .el-button {
+      min-height: 34px;
+      border-radius: 8px;
+    }
+
+    .el-table {
+      --el-table-header-bg-color: #f8fafc;
+      --el-table-row-hover-bg-color: #f5f8ff;
+      --el-table-border-color: #e5eaf1;
+      border-radius: 9px;
+    }
+
+    .el-descriptions__label.el-descriptions__cell.is-bordered-label {
+      color: #526078;
+      background: #f8fafc;
+    }
+
+    .dialog-footer {
+      display: flex;
+      gap: 8px;
+      justify-content: flex-end;
+    }
+  }
+
+  @media (width <= 768px) {
+    .asset-information-dialog.el-dialog {
+      width: calc(100vw - 20px) !important;
+
+      .el-dialog__header {
+        padding: 16px 18px 13px;
+      }
+
+      .el-dialog__body {
+        max-height: calc(100vh - 150px);
+        padding: 18px;
+        overflow-y: auto;
+      }
+
+      .el-dialog__footer {
+        padding: 12px 18px 16px;
+      }
+    }
+  }
+
+  html.dark .asset-information-dialog.el-dialog {
+    border-color: #2b3a52;
+
+    .el-dialog__header,
+    .el-dialog__footer {
+      border-color: #2b3a52;
+    }
+
+    .el-dialog__title,
+    .el-form-item__label {
+      color: #e5edf8;
+    }
+
+    .el-table {
+      --el-table-header-bg-color: #202d42;
+      --el-table-row-hover-bg-color: #223451;
+      --el-table-border-color: #2b3a52;
+    }
+
+    .el-descriptions__label.el-descriptions__cell.is-bordered-label {
+      color: #afbdd0;
+      background: #202d42;
+    }
+  }
+</style>