fix: update some files

2026-08-19 18:14:20 +08:00
parent fe357f56d9
commit 4d023e7666
4 changed files with 135 additions and 87 deletions
--- a/src/views/asset-management/asset-information/components/BasicInfoCard.vue
+++ b/src/views/asset-management/asset-information/components/BasicInfoCard.vue
@@ -40,7 +40,7 @@
        </div>
      </div>
    </template>
-    <ElDescriptions :column="descriptionsColumn" direction="vertical" border>
+    <ElDescriptions :column="descriptionsColumn" direction="vertical" border size="large">
      <!-- 卡专属字段 -->
      <template v-if="cardInfo?.asset_type === 'card'">
        <ElDescriptionsItem label="ICCID">{{ cardInfo?.iccid || '-' }}</ElDescriptionsItem>
@@ -211,7 +211,7 @@

    <template v-if="previousExchangeAsset || nextExchangeAsset">
      <ElDivider content-position="left">换货链路</ElDivider>
-      <ElDescriptions :column="descriptionsColumn" border>
+      <ElDescriptions :column="descriptionsColumn" border size="large">
        <ElDescriptionsItem v-if="previousExchangeAsset" label="前代资产">
          <div class="exchange-asset">
            <ElTag type="success" size="small">旧资产</ElTag>
@@ -338,7 +338,7 @@
            <ElButton
              v-if="bindingCard.network_status === 0"
              type="success"
-              size="small"
+              size="default"
              :disabled="isBindingStartDisabled(bindingCard)"
              @click="handleEnableBindingCard(bindingCard)"
              v-permission="'iot_info:start'"
@@ -348,7 +348,7 @@
            <ElButton
              v-if="bindingCard.network_status === 1"
              type="warning"
-              size="small"
+              size="default"
              :disabled="isBindingStopDisabled(bindingCard)"
              @click="handleDisableBindingCard(bindingCard)"
              v-permission="'iot_info:stop'"
@@ -357,7 +357,7 @@
            </ElButton>
            <ElButton
              type="primary"
-              size="small"
+              size="default"
              @click="handleUpdateBindingCardRealnameStatus(bindingCard)"
              v-permission="'bound_card:update_realname_status'"
            >
@@ -366,7 +366,7 @@
            <ElButton
              v-if="getBindingCardAuditTarget(bindingCard)"
              type="primary"
-              size="small"
+              size="default"
              @click="openBindingCardAudit(bindingCard)"
            >
              卡审计
@@ -383,7 +383,12 @@
        <span class="section-divider-title">设备实时信息</span>
      </ElDivider>
      <div v-if="hasDeviceRealtimeSection" v-loading="realtimeLoading" class="realtime-section">
-        <ElDescriptions :column="descriptionsColumn" direction="vertical" border>
+        <ElDescriptions
+          :column="descriptionsColumn"
+          direction="vertical"
+          border
+          size="large"
+        >
          <ElDescriptionsItem
            v-for="item in realtimeDescriptionItems"
            :key="item.key"
@@ -1192,7 +1197,6 @@

      .binding-card-header {
        justify-content: space-between;
-        padding-bottom: 12px;
      }

      .binding-card-details {
@@ -1209,7 +1213,7 @@
        gap: 16px;
        min-height: 42px;
        min-width: 0;
-        padding: 10px 12px;
+        padding: 0 12px;
        border-bottom: 1px solid var(--el-border-color-lighter);

        &:last-child {
@@ -1249,6 +1253,9 @@
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
+          font-size: 16px;
+          font-weight: 600;
+          line-height: 24px;
        }

        .copy-icon {
--- a/src/views/asset-management/asset-information/components/CurrentPackageCard.vue
+++ b/src/views/asset-management/asset-information/components/CurrentPackageCard.vue
@@ -181,7 +181,7 @@
      </div>

      <!-- 套餐详情表格 -->
-      <ElDescriptions :column="descriptionsColumn" direction="vertical" border>
+      <ElDescriptions :column="descriptionsColumn" direction="vertical" border size="large">
        <ElDescriptionsItem label="订单号">
          {{ currentPackage.order_no || '-' }}
        </ElDescriptionsItem>
--- a/src/views/asset-management/asset-information/components/PackageListCard.vue
+++ b/src/views/asset-management/asset-information/components/PackageListCard.vue
@@ -32,15 +32,20 @@
        <ElTable :data="packageList" class="package-table" border>
          <ElTableColumn label="订单号" width="240">
            <template #default="scope">
-              <ElButton
-                type="primary"
-                link
-                @click="handleOrderNoClick(scope.row)"
-                v-if="hasAuth('order:package_list_detail')"
-              >
-                {{ scope.row.order_no }}
-              </ElButton>
-              <span v-else>{{ scope.row.order_no }}</span>
+              <div class="order-no-cell">
+                <ElTooltip :content="scope.row.order_no" placement="top" :show-after="300">
+                  <ElButton
+                    class="order-no-link"
+                    type="primary"
+                    link
+                    @click="handleOrderNoClick(scope.row)"
+                    v-if="hasAuth('order:package_list_detail')"
+                  >
+                    {{ scope.row.order_no }}
+                  </ElButton>
+                  <span v-else class="order-no-text">{{ scope.row.order_no }}</span>
+                </ElTooltip>
+              </div>
            </template>
          </ElTableColumn>
          <ElTableColumn label="套餐名称" width="200" show-overflow-tooltip>
@@ -369,7 +374,8 @@
    ElInputNumber,
    ElDatePicker,
    ElSelect,
-    ElOption
+    ElOption,
+    ElTooltip
  } from 'element-plus'
  import { ElMessage } from 'element-plus'
  import type { FormInstance, FormRules } from 'element-plus'
@@ -729,6 +735,35 @@
            white-space: nowrap;
          }

+          .order-no-cell {
+            width: 100%;
+            min-width: 0;
+
+            :deep(.el-tooltip__trigger) {
+              display: block;
+              width: 100%;
+              min-width: 0;
+            }
+
+            .order-no-link,
+            .order-no-text {
+              display: block;
+              width: 100%;
+              min-width: 0;
+              max-width: 100%;
+              overflow: hidden;
+              text-align: left;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+            }
+
+            .order-no-link {
+              padding: 0;
+              margin-left: 0;
+              justify-content: flex-start;
+            }
+          }
+
          .package-actions {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
--- a/src/views/asset-management/asset-information/components/WalletTransactionCard.vue
+++ b/src/views/asset-management/asset-information/components/WalletTransactionCard.vue
@@ -2,25 +2,30 @@
  <ElCard shadow="never" class="info-card wallet-info" v-loading="walletLoading">
    <template #header>
      <div class="card-header wallet-header">
-        <div class="header-left">
+        <div class="wallet-header-top">
          <span class="wallet-title">钱包</span>
-          <ElTag v-if="walletInfo" :type="getWalletStatusType(walletInfo.status)" size="small">
+          <ElTag
+            v-if="walletInfo"
+            class="wallet-status-tag"
+            :type="getWalletStatusType(walletInfo.status)"
+            size="large"
+          >
            {{ walletInfo.status_text || '-' }}
          </ElTag>
-          <template v-if="walletInfo">
-            <ElDivider class="wallet-divider" direction="vertical" />
-            <span class="balance-item"
-              >总余额 <strong>{{ formatAmount(walletInfo.balance) }}</strong></span
-            >
-            <ElDivider class="wallet-divider" direction="vertical" />
-            <span class="balance-item"
-              >可用 <strong>{{ formatAmount(walletInfo.available_balance) }}</strong></span
-            >
-            <ElDivider class="wallet-divider" direction="vertical" />
-            <span class="balance-item"
-              >冻结 <strong>{{ formatAmount(walletInfo.frozen_balance) }}</strong></span
-            >
-          </template>
+        </div>
+        <div v-if="walletInfo" class="wallet-balance-summary">
+          <div class="balance-item">
+            <span class="balance-label">总余额</span>
+            <strong>{{ formatAmount(walletInfo.balance) }}</strong>
+          </div>
+          <div class="balance-item">
+            <span class="balance-label">可用</span>
+            <strong>{{ formatAmount(walletInfo.available_balance) }}</strong>
+          </div>
+          <div class="balance-item">
+            <span class="balance-label">冻结</span>
+            <strong>{{ formatAmount(walletInfo.frozen_balance) }}</strong>
+          </div>
        </div>
        <div v-if="!props.boundDeviceId" class="filter-section">
          <ElSelect
@@ -173,8 +178,7 @@
    ElDatePicker,
    ElPagination,
    ElEmpty,
-    ElMessage,
-    ElDivider
+    ElMessage
  } from 'element-plus'
  import { useAssetFormatters } from '../composables/useAssetFormatters'
  import { formatDateTime } from '@/utils/business/format'
@@ -384,35 +388,61 @@
    &.wallet-info {
      .wallet-header {
        display: flex;
-        flex-wrap: wrap;
+        flex-direction: column;
        gap: 16px;
-        align-items: center;
-        justify-content: space-between;
+        align-items: stretch;
+        min-width: 0;

-        .header-left {
+        .wallet-header-top {
          display: flex;
-          flex-wrap: wrap;
-          gap: 8px;
          align-items: center;
+          justify-content: space-between;
+          width: 100%;
+        }

-          .wallet-title {
-            font-size: 15px;
-            font-weight: 500;
-          }
+        .wallet-title {
+          font-size: 16px;
+          font-weight: 600;
+          white-space: nowrap;
+        }

-          .wallet-divider {
-            flex-shrink: 0;
-          }
+        .wallet-balance-summary {
+          display: grid;
+          grid-template-columns: repeat(3, minmax(0, 1fr));
+          gap: 12px;
+          width: 100%;
+          min-width: 0;
+        }

-          .balance-item {
+        .balance-item {
+          display: flex;
+          align-items: center;
+          justify-content: flex-start;
+          gap: 8px;
+          min-width: 0;
+          padding: 8px 12px;
+          white-space: nowrap;
+          background: var(--el-fill-color-lighter);
+          border: 1px solid var(--el-border-color-lighter);
+          border-radius: 8px;
+
+          .balance-label {
            font-size: 13px;
-            color: var(--el-text-color-regular);
-
-            strong {
-              font-weight: 600;
-              color: var(--el-text-color-primary);
-            }
+            color: var(--el-text-color-secondary);
          }
+
+          strong {
+            font-size: 18px;
+            font-weight: 700;
+            line-height: 24px;
+            color: var(--el-text-color-primary);
+          }
+        }
+
+        .wallet-status-tag {
+          padding: 8px 14px;
+          font-size: 14px;
+          font-weight: 700;
        }

        .filter-section {
@@ -421,6 +451,7 @@
          gap: 10px;
          align-items: center;
          justify-content: flex-end;
+          width: 100%;
          min-width: 0;

          .transaction-type-select {
@@ -462,30 +493,14 @@

      @media (width <= 1200px) {
        .wallet-header {
-          flex-direction: column;
-          align-items: flex-start;
-
-          .header-left,
          .filter-section {
-            width: 100%;
-          }
-
-          .filter-section {
-            justify-content: flex-start;
+            justify-content: flex-end;
          }
        }
      }

      @media (width <= 768px) {
        .wallet-header {
-          flex-direction: column;
-          align-items: stretch;
-
-          .header-left,
-          .filter-section {
-            width: 100%;
-          }
-
          .filter-section {
            flex-direction: column;
            align-items: stretch;
@@ -502,18 +517,9 @@
            }
          }

-          .header-left {
-            flex-direction: column;
-            gap: 6px;
-            align-items: flex-start;
-
-            .wallet-divider {
-              display: none;
-            }
-
-            .balance-item {
-              width: 100%;
-            }
+          .wallet-balance-summary {
+            grid-template-columns: 1fr;
+            gap: 8px;
          }
        }