[色子游戏]玩家钱包流水记录-优化样式

saiadmin-artd/src/views/plugin/dice/player_wallet_record/index/index.vue

@@ -46,6 +46,12 @@
         @pagination:size-change="handleSizeChange"
         @pagination:current-change="handleCurrentChange"
       >
+        <!-- 类型：不同类型不同底色 tag，放大一倍 -->
+        <template #type="{ row }">
+          <ElTag class="wallet-type-tag" size="large" :type="typeTagType(row.type)">
+            {{ typeFormatter(row) }}
+          </ElTag>
+        </template>
         <!-- 操作列 -->
         <template #operation="{ row }">
           <div class="flex gap-2">
@@ -113,6 +119,18 @@
     return '-'
   }
 
+  // 类型对应 tag 底色：0 充值 1 提现 2 购买 3 加点 4 扣点
+  const typeTagType = (
+    t: unknown
+  ): 'success' | 'warning' | 'danger' | 'info' | 'primary' => {
+    if (t === 0) return 'success'
+    if (t === 1) return 'warning'
+    if (t === 2) return 'primary'
+    if (t === 3) return 'success'
+    if (t === 4) return 'danger'
+    return 'info'
+  }
+
   // 操作人：关联管理员用户名
   const operatorFormatter = (row: Record<string, any>) => {
     const op = row.operator ?? row.operator_id
@@ -144,30 +162,52 @@
     core: {
       apiFn: api.list,
       columnsFactory: () => [
-        { type: 'selection' },
+        { type: 'selection', align: 'center' },
-        { prop: 'id', label: 'ID', width: 80 },
+        { prop: 'id', label: 'ID', width: 80, align: 'center' },
-        { prop: 'player_id', label: '用户', width: 120, formatter: usernameFormatter },
+        {
-        { prop: 'coin', label: '平台币变化', width: 110 },
+          prop: 'player_id',
-        { prop: 'type', label: '类型', width: 120, formatter: typeFormatter },
+          label: '用户',
+          width: 120,
+          align: 'center',
+          formatter: usernameFormatter
+        },
+        { prop: 'coin', label: '平台币变化', width: 110, align: 'center' },
+        {
+          prop: 'type',
+          label: '类型',
+          width: 140,
+          align: 'center',
+          useSlot: true,
+          formatter: typeFormatter
+        },
         {
           prop: 'user_id',
           label: '操作人',
           width: 100,
+          align: 'center',
           formatter: operatorFormatter
         },
-        { prop: 'wallet_before', label: '钱包操作前', width: 110 },
+        { prop: 'wallet_before', label: '钱包操作前', width: 110, align: 'center' },
-        { prop: 'wallet_after', label: '钱包操作后', width: 110 },
+        { prop: 'wallet_after', label: '钱包操作后', width: 110, align: 'center' },
         {
           prop: 'remark',
           label: '备注',
           width: 100,
+          align: 'center',
           showOverflowTooltip: true
         },
-        { prop: 'total_draw_count', label: '总抽奖次数' },
+        { prop: 'total_draw_count', label: '总抽奖次数', align: 'center' },
-        { prop: 'paid_draw_count', label: '购买抽奖次数' },
+        { prop: 'paid_draw_count', label: '购买抽奖次数', align: 'center' },
-        { prop: 'free_draw_count', label: '赠送抽奖次数' },
+        { prop: 'free_draw_count', label: '赠送抽奖次数', align: 'center' },
-        { prop: 'create_time', label: '创建时间', width: 170 },
+        { prop: 'create_time', label: '创建时间', width: 170, align: 'center' },
-        { prop: 'operation', label: '操作', width: 100, fixed: 'right', useSlot: true }
+        {
+          prop: 'operation',
+          label: '操作',
+          width: 100,
+          align: 'center',
+          fixed: 'right',
+          useSlot: true
+        }
       ]
     }
   })
@@ -184,3 +224,11 @@
     selectedRows
   } = useSaiAdmin()
 </script>
+
+<style lang="scss" scoped>
+  /* 类型 tag 放大一倍（large + scale） */
+  :deep(.wallet-record-type-tag) {
+    transform: scale(0.8);
+    transform-origin: center;
+  }
+</style>