fix: update some files

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;
           }
         }