feat: 优化用户详情排版

src/app/shop/admin/user/list/detail.vue

@@ -15,17 +15,6 @@
           <!-- 第一行表格 -->
           <el-table class="sa-table basic-info-table-1" :data="[state.basicInfoTableData[0]]" stripe border
             :show-header="true">
-            <el-table-column :label="t('modules.user.avatar')" width="180" align="center" :rowspan="2">
-              <template #default="{ row }">
-                <div class="avatar-section">
-                  <el-image :src="state.userDetail.headPic || '/static/images/shop/avatar.png'"
-                    style="width: 60px; height: 60px; border-radius: 8px" fit="cover" />
-                  <div class="user-name">{{ state.userDetail.name || '--' }}
-                    <span class="user-level ml-4px">V{{ state.userDetail.vipLevel || t('modules.user.noLevel') }}</span>
-                  </div>
-                </div>
-              </template>
-            </el-table-column>
             <el-table-column :label="t('modules.user.userId')" align="center">
               <template #default="{ row }">
                 {{ row.field1 || '--' }}
@@ -41,14 +30,19 @@
                 {{ row.field3 || '--' }}
               </template>
             </el-table-column>
+            <el-table-column :label="t('modules.user.accountName')" align="center">
+              <template #default="{ row }">
+                {{ state.userDetail.bankAccountName || '--' }}
+              </template>
+            </el-table-column>
             <el-table-column :label="t('modules.user.paymentBank')" align="center">
               <template #default="{ row }">
-                {{ row.field4 || '--' }}
+                {{ state.userDetail.bank || '--' }}
               </template>
             </el-table-column>
-            <el-table-column :label="t('modules.user.accountName')" align="center">
+            <el-table-column :label="t('modules.user.paymentAccount')" align="center">
               <template #default="{ row }">
-                {{ row.field5 || '--' }}
+                {{ state.userDetail.bankAccount || '--' }}
               </template>
             </el-table-column>
           </el-table>
@@ -56,28 +50,42 @@
           <!-- 第二行表格 -->
           <el-table class="sa-table basic-info-table-2" :data="[state.basicInfoTableData[1]]" stripe border
             :show-header="true">
-            <el-table-column label="" width="180" align="center">
+            <el-table-column :label="t('modules.user.vipLevel')" align="center" :rowspan="2">
               <template #default="{ row }">
-                <!-- 空白，因为头像已经在上面显示 -->
+                <div class="vip-section">
+                  <div class="user-name">
+                    <span class="user-level ml-4px">V{{ state.userDetail.vipLevel || t('modules.user.noLevel') }}</span>
+                  </div>
+                </div>
               </template>
             </el-table-column>
-            <el-table-column :label="t('modules.user.paymentAccount')" align="center">
+            <el-table-column :label="t('modules.user.userPhone')" align="center">
               <template #default="{ row }">
-                {{ row.field3 || '--' }}
+                {{ state.basicInfoTableData[1]?.field1 || '--' }}
               </template>
             </el-table-column>
-            <el-table-column :label="t('modules.user.userPhone')" align="center">
+            <el-table-column :label="t('modules.user.registrationTime')" align="center">
               <template #default="{ row }">
-                {{ row.field1 || '--' }}
+                {{ state.basicInfoTableData[1]?.field2 || '--' }}
               </template>
             </el-table-column>
-            <el-table-column :label="t('modules.user.registrationTime')" align="center">
+            <el-table-column label="" align="center">
               <template #default="{ row }">
-                {{ row.field2 || '--' }}
+                <!-- 空白，因为VIP等级已经在上面显示 -->
+              </template>
+            </el-table-column>
+            <el-table-column label="" align="center">
+              <template #default="{ row }">
+                <!-- 空白列，对应用户ID -->
               </template>
             </el-table-column>
-            <el-table-column label="" align="center" />
-            <el-table-column label="" align="center" />
+            <el-table-column label="" align="center">
+              <template #default="{ row }">
+                <!-- 空白列，对应状态 -->
+              </template>
+            </el-table-column>
+
+
           </el-table>
         </div>
       </div>
@@ -95,13 +103,13 @@
           <el-table-column :label="t('modules.user.availableGroups')" align="center">
             <template #default="{ row }">{{ row.groupNum }}</template>
           </el-table-column>
-          <el-table-column :label="t('modules.user.totalCommission')" width="150" align="center">
+          <el-table-column :label="t('modules.user.totalCommission')" align="center">
             <template #default="{ row }">৳ {{ row.totalEarnings }}</template>
           </el-table-column>
-          <el-table-column :label="t('modules.user.settledCommission')" width="150" align="center">
+          <el-table-column :label="t('modules.user.settledCommission')" align="center">
             <template #default="{ row }">৳ {{ row.settledEarnings }}</template>
           </el-table-column>
-          <el-table-column :label="t('modules.user.totalRecharge')" min-width="120" align="center">
+          <el-table-column :label="t('modules.user.totalRecharge')" align="center">
             <template #default="{ row }">৳ {{ row.rechargeAmount }}</template>
           </el-table-column>
         </el-table>
@@ -117,13 +125,13 @@
           <el-table-column :label="t('modules.user.commissionBalance')" align="center">
             <template #default="{ row }">৳ {{ row.earningsBalance }}</template>
           </el-table-column>
-          <el-table-column :label="t('modules.user.last7DaysCommission')" width="150" align="center">
+          <el-table-column :label="t('modules.user.last7DaysCommission')" align="center">
             <template #default="{ row }">৳ {{ row.l7DEarnings }}</template>
           </el-table-column>
-          <el-table-column :label="t('modules.user.pendingCommission')" width="150" align="center">
+          <el-table-column :label="t('modules.user.pendingCommission')" align="center">
             <template #default="{ row }">৳ {{ row.pendingEarnings }}</template>
           </el-table-column>
-          <el-table-column :label="t('modules.user.totalWithdraw')" min-width="120" align="center">
+          <el-table-column :label="t('modules.user.totalWithdraw')" align="center">
             <template #default="{ row }">৳ {{ row.withdrawAmount }}</template>
           </el-table-column>
         </el-table>
@@ -135,7 +143,7 @@
           <el-tab-pane :label="t('modules.user.orderRecords')" name="orders">
             <el-skeleton v-if="state.loading.orders" :rows="5" animated />
             <el-table v-else class="sa-table" :data="state.orders" stripe border>
-              <el-table-column sortable="custom" prop="orderId" :label="t('modules.order.orderNumber')" min-width="150">
+              <el-table-column sortable="custom" prop="orderId" :label="t('modules.order.orderNumber')" min->
                 <template #default="{ row }">
                   <div class="order-info">
                     <div class="order-sn">{{ row.orderId }}</div>
@@ -154,7 +162,7 @@
                   <div v-else>-</div>
                 </template>
               </el-table-column>
-              <el-table-column :label="t('modules.goods.specification')" min-width="120" align="center">
+              <el-table-column :label="t('modules.goods.specification')" align="center">
                 <template #default="{ row }">
                   <div v-if="row.orderInfoVO && row.orderInfoVO.length > 0">
                     {{ row.orderInfoVO[0].sku || '-' }}
@@ -189,7 +197,7 @@
                   </el-tag>
                 </template>
               </el-table-column>
-              <el-table-column :label="t('modules.order.logistics')" min-width="150" align="center">
+              <el-table-column :label="t('modules.order.logistics')" min- align="center">
                 <template #default="{ row }">
                   <div v-if="row.deliveryId">
                     <div class="delivery-name">{{ row.deliveryName || t('modules.order.courier') }}：{{ row.deliveryId }}
@@ -198,17 +206,17 @@
                   <div v-else>{{ t('modules.order.notShipped') }}</div>
                 </template>
               </el-table-column>
-              <el-table-column :label="t('modules.order.orderTime')" min-width="150" align="center">
+              <el-table-column :label="t('modules.order.orderTime')" min- align="center">
                 <template #default="{ row }">
                   <div>{{ row.createTime }}</div>
                 </template>
               </el-table-column>
-              <el-table-column :label="t('modules.order.payTime')" min-width="150" align="center">
+              <el-table-column :label="t('modules.order.payTime')" min- align="center">
                 <template #default="{ row }">
                   <div>{{ row.payTime || '-' }}</div>
                 </template>
               </el-table-column>
-              <el-table-column :label="t('common.actions')" min-width="120" align="center">
+              <el-table-column :label="t('common.actions')" align="center">
                 <template #default="{ row }">
                   <el-button type="primary" link @click="viewOrder(row)">{{ t('common.detail') }}</el-button>
                   <el-button v-if="row.status === 3 && row.pinkStatus === 1" type="danger" link
@@ -244,8 +252,8 @@
           <el-tab-pane :label="t('modules.user.commissionRecords')" name="commissions">
             <el-skeleton v-if="state.loading.commissions" :rows="5" animated />
             <el-table v-else class="sa-table" :data="state.commissions" stripe border>
-              <el-table-column :label="t('modules.user.commissionId')" prop="id" min-width="120" align="center" />
-              <el-table-column :label="t('modules.user.commissionType')" min-width="150">
+              <el-table-column :label="t('modules.user.commissionId')" prop="id" align="center" />
+              <el-table-column :label="t('modules.user.commissionType')" min->
                 <template #default="{ row }">
                   <span class="sa-table-line-1">{{ getBizTypeText(row.bizType) }}</span>
                 </template>
@@ -255,7 +263,7 @@
                   <span class="sa-table-line-1">{{ row.memo || '-' }}</span>
                 </template>
               </el-table-column>
-              <el-table-column :label="t('modules.user.commissionAmount')" min-width="120" align="center">
+              <el-table-column :label="t('modules.user.commissionAmount')" align="center">
                 <template #default="{ row }"> ৳{{ row.amount || 0 }} </template>
               </el-table-column>
               <el-table-column :label="t('modules.user.commissionStatus')" min-width="100" align="center">
@@ -277,8 +285,7 @@
           <el-tab-pane :label="t('modules.user.rechargeRecords')" name="recharges">
             <el-skeleton v-if="state.loading.recharges" :rows="5" animated />
             <el-table v-else class="sa-table" :data="state.recharges" stripe border>
-              <el-table-column prop="orderNo" :label="t('modules.user.rechargeOrderNo')" min-width="180"
-                sortable="custom">
+              <el-table-column prop="orderNo" :label="t('modules.user.rechargeOrderNo')" min- sortable="custom">
                 <template #default="{ row }">
                   <span class="sa-table-line-1">{{ row.orderNo || '-' }}</span>
                 </template>
@@ -295,7 +302,7 @@
                   {{ getCurrencyText(row.currency) }}
                 </template>
               </el-table-column>
-              <el-table-column :label="t('modules.user.amount')" min-width="120" align="center">
+              <el-table-column :label="t('modules.user.amount')" align="center">
                 <template #default="{ row }"> ৳{{ row.amount || 0 }} </template>
               </el-table-column>
               <el-table-column :label="t('common.status')" min-width="100" align="center">
@@ -327,8 +334,7 @@
           <el-tab-pane :label="t('modules.user.withdrawRecords')" name="withdraws">
             <el-skeleton v-if="state.loading.withdraws" :rows="5" animated />
             <el-table v-else class="sa-table" :data="state.withdraws" stripe border>
-              <el-table-column prop="orderNo" :label="t('modules.user.withdrawOrderNo')" min-width="180"
-                sortable="custom">
+              <el-table-column prop="orderNo" :label="t('modules.user.withdrawOrderNo')" min- sortable="custom">
                 <template #default="{ row }">
                   <span class="sa-table-line-1">{{ row.orderNo || '-' }}</span>
                 </template>
@@ -340,7 +346,7 @@
                   </el-tag>
                 </template>
               </el-table-column>
-              <el-table-column :label="t('modules.user.withdrawChannel')" min-width="120" align="center">
+              <el-table-column :label="t('modules.user.withdrawChannel')" align="center">
                 <template #default="{ row }">
                   <el-tag :type="getChannelType(row.channel)">
                     {{ getChannelText(row.channel) }}
@@ -352,7 +358,7 @@
                   {{ getCurrencyText(row.currency) }}
                 </template>
               </el-table-column>
-              <el-table-column :label="t('modules.user.withdrawAmount')" min-width="120" align="center">
+              <el-table-column :label="t('modules.user.withdrawAmount')" align="center">
                 <template #default="{ row }"> ৳{{ row.amount || 0 }} </template>
               </el-table-column>
               <el-table-column :label="t('common.status')" min-width="100" align="center">
@@ -362,7 +368,7 @@
                   </el-tag>
                 </template>
               </el-table-column>
-              <el-table-column :label="t('modules.user.paymentBank')" min-width="150" align="center">
+              <el-table-column :label="t('modules.user.paymentBank')" min- align="center">
                 <template #default="{ row }">
                   {{ row.bank || '-' }}
                 </template>
@@ -398,7 +404,7 @@
           <el-tab-pane :label="t('modules.user.shippingAddresses')" name="addresses">
             <el-skeleton v-if="state.loading.addresses" :rows="5" animated />
             <el-table v-else class="sa-table" :data="state.addresses" stripe border>
-              <el-table-column :label="t('modules.user.recipient')" prop="realName" min-width="120" align="center" />
+              <el-table-column :label="t('modules.user.recipient')" prop="realName" align="center" />
               <el-table-column :label="t('modules.user.userPhone')" prop="phone" min-width="130" align="center" />
               <el-table-column :label="t('modules.user.detailedAddress')" min-width="400">
                 <template #default="{ row }">
@@ -457,8 +463,8 @@ const props = defineProps({
 
 // 分页数据
 const { pageData } = usePagination();
-// 设置默认每页5条
-pageData.size = 5;
+// 设置默认每颒20条
+pageData.size = 20;
 
 const state = reactive({
   userDetail: {},
@@ -835,7 +841,8 @@ onMounted(() => {
       color: var(--sa-title);
     }
 
-    .avatar-section {
+    .avatar-section,
+    .vip-section {
       text-align: center;
 
       .user-name {
@@ -851,6 +858,20 @@ onMounted(() => {
       }
     }
 
+    .payment-info {
+      text-align: center;
+      line-height: 1.6;
+
+      div {
+        margin-bottom: 4px;
+        font-size: 13px;
+
+        &:last-child {
+          margin-bottom: 0;
+        }
+      }
+    }
+
     .info-item {
       display: flex;
       align-items: center;

src/locales/en-US/index.json

@@ -1022,6 +1022,8 @@
       "editProfile": "Edit Profile",
       "basicInfo": "Basic Information",
       "avatar": "Avatar",
+      "vipLevel": "VIP Level",
+      "paymentInfo": "Payment Information",
       "noLevel": "No Level",
       "paymentBank": "Payment Bank",
       "accountName": "Account Name",

src/locales/zh-CN/index.json

@@ -1019,6 +1019,8 @@
       "editProfile": "编辑资料",
       "basicInfo": "基本信息",
       "avatar": "头像",
+      "vipLevel": "VIP等级",
+      "paymentInfo": "收款信息",
       "noLevel": "暂无等级",
       "paymentBank": "收款银行",
       "accountName": "账户名称",