feat(admin): 管理端列表分页、控制台图表与赛事导入

- 玩家/代理/赛事/注单/审计列表分页，默认每页 10 条，无页面滚动条布局

- ECharts 控制台概览、注单管理中文化与列宽优化

- zhibo 赛事字段迁移与导入，玩家编辑可改所属代理

- 管理端 API 分页与 dashboard 统计接口

Co-authored-by: Cursor <cursoragent@cursor.com>

apps/admin/src/views/agent/Bets.vue

@@ -1,25 +1,105 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue';
 import api from '../../api';
+import { formatAmount } from '../../utils/format-amount';
+import { betStatusLabel, betStatusTagType, betTypeLabel } from '../../utils/bet-labels';
 
-const bets = ref<unknown[]>([]);
+interface BetRow {
+  id: string;
+  betNo: string;
+  betType?: string;
+  stake: string | number;
+  status: string;
+  placedAt?: string;
+  user?: { username?: string };
+}
 
-onMounted(async () => {
-  const { data } = await api.get('/agent/bets');
-  bets.value = data.data.items;
-});
+const bets = ref<BetRow[]>([]);
+const total = ref(0);
+const page = ref(1);
+const pageSize = ref(10);
+
+onMounted(load);
+
+async function load() {
+  const { data } = await api.get('/agent/bets', {
+    params: { page: page.value, pageSize: pageSize.value },
+  });
+  bets.value = (data.data.items ?? []) as BetRow[];
+  total.value = data.data.total ?? 0;
+}
+
+function onPageChange(p: number) {
+  page.value = p;
+  load();
+}
+
+function onSizeChange(size: number) {
+  pageSize.value = size;
+  page.value = 1;
+  load();
+}
 </script>
 
 <template>
-  <h2>下级注单</h2>
-  <el-table :data="bets">
-    <el-table-column prop="betNo" label="注单号" />
-    <el-table-column label="玩家">
-      <template #default="{ row }">
-        {{ (row as { user?: { username: string } }).user?.username }}
-      </template>
-    </el-table-column>
-    <el-table-column prop="stake" label="投注额" />
-    <el-table-column prop="status" label="状态" />
-  </el-table>
+  <div class="admin-list-page">
+    <div class="page-header">
+      <h2 class="page-title">注单查询</h2>
+      <span class="page-desc">下级玩家的全部投注记录</span>
+    </div>
+
+    <el-card class="data-card" shadow="never">
+      <div class="table-wrap">
+        <el-table :data="bets" stripe>
+          <el-table-column prop="id" label="单号" width="56" align="center" />
+          <el-table-column prop="betNo" label="流水编号" width="168" show-overflow-tooltip>
+            <template #default="{ row }">
+              <span class="bet-no">{{ row.betNo }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="玩家" min-width="100">
+            <template #default="{ row }">{{ row.user?.username ?? '—' }}</template>
+          </el-table-column>
+          <el-table-column label="类型" width="88" align="center">
+            <template #default="{ row }">
+              <el-tag v-if="row.betType" type="info" size="small" effect="plain">
+                {{ betTypeLabel(row.betType) }}
+              </el-tag>
+              <span v-else>—</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="投注额" width="110" align="right">
+            <template #default="{ row }">{{ formatAmount(row.stake) }}</template>
+          </el-table-column>
+          <el-table-column label="状态" width="96" align="center">
+            <template #default="{ row }">
+              <el-tag :type="betStatusTagType(row.status)" size="small">
+                {{ betStatusLabel(row.status) }}
+              </el-tag>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="pager">
+        <el-pagination
+          v-model:current-page="page"
+          v-model:page-size="pageSize"
+          :total="total"
+          :page-sizes="[10, 20, 50, 100]"
+          layout="total, sizes, prev, pager, next"
+          background
+          @current-change="onPageChange"
+          @size-change="onSizeChange"
+        />
+      </div>
+    </el-card>
+  </div>
 </template>
+
+<style scoped>
+.page-header { display: flex; align-items: baseline; gap: 12px; }
+.page-title  { font-size: 20px; font-weight: 700; color: #e0e0e0; }
+.page-desc   { font-size: 13px; color: #3a3a3a; }
+.data-card   { border-radius: 12px; }
+.bet-no { font-size: 12px; color: #ccc; font-family: ui-monospace, monospace; word-break: break-all; }
+</style>

apps/admin/src/views/agent/Dashboard.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue';
 import api from '../../api';
+import { formatAmount } from '../../utils/format-amount';
 
 const summary = ref<Record<string, unknown>>({});
 
@@ -8,28 +9,96 @@ onMounted(async () => {
   const { data } = await api.get('/agent/reports/summary');
   summary.value = data.data;
 });
+
+function fmtCount(val: unknown) {
+  return (Number(val) || 0).toLocaleString('zh-CN', { maximumFractionDigits: 0 });
+}
 </script>
 
 <template>
-  <h2>代理概览</h2>
-  <el-row :gutter="16" style="margin-top: 16px">
+  <div class="page-header">
+    <h2 class="page-title">代理概览</h2>
+    <span class="page-desc">实时数据总览</span>
+  </div>
+
+  <el-row :gutter="20" class="stat-row">
     <el-col :span="6">
-      <el-statistic
-        title="授信额度"
-        :value="Number((summary.profile as { creditLimit?: string })?.creditLimit) || 0"
-      />
+      <div class="stat-card c-blue">
+        <div class="stat-top">
+          <span class="stat-label">授信额度</span>
+          <span class="stat-badge">¥</span>
+        </div>
+        <div class="stat-value">{{ formatAmount((summary.profile as { creditLimit?: string })?.creditLimit) }}</div>
+        <div class="stat-foot">总额度</div>
+      </div>
     </el-col>
     <el-col :span="6">
-      <el-statistic
-        title="已用额度"
-        :value="Number((summary.profile as { usedCredit?: string })?.usedCredit) || 0"
-      />
+      <div class="stat-card c-orange">
+        <div class="stat-top">
+          <span class="stat-label">已用额度</span>
+          <span class="stat-badge">¥</span>
+        </div>
+        <div class="stat-value">{{ formatAmount((summary.profile as { usedCredit?: string })?.usedCredit) }}</div>
+        <div class="stat-foot">已占用</div>
+      </div>
     </el-col>
     <el-col :span="6">
-      <el-statistic title="直属玩家" :value="(summary.directPlayerCount as number) || 0" />
+      <div class="stat-card c-green">
+        <div class="stat-top">
+          <span class="stat-label">直属玩家</span>
+          <span class="stat-badge">人</span>
+        </div>
+        <div class="stat-value">{{ fmtCount(summary.directPlayerCount) }}</div>
+        <div class="stat-foot">玩家数</div>
+      </div>
     </el-col>
     <el-col :span="6">
-      <el-statistic title="今日投注" :value="Number(summary.todayStake) || 0" :precision="2" />
+      <div class="stat-card c-purple">
+        <div class="stat-top">
+          <span class="stat-label">今日投注</span>
+          <span class="stat-badge">¥</span>
+        </div>
+        <div class="stat-value">{{ formatAmount(summary.todayStake) }}</div>
+        <div class="stat-foot">人民币</div>
+      </div>
     </el-col>
   </el-row>
 </template>
+
+<style scoped>
+.page-header { display: flex; align-items: baseline; gap: 12px; margin-bottom: 24px; }
+.page-title  { font-size: 20px; font-weight: 700; color: #e0e0e0; }
+.page-desc   { font-size: 13px; color: #3a3a3a; }
+
+.stat-card {
+  border-radius: 12px;
+  padding: 22px 20px 18px;
+  border: 1px solid #1e1e1e;
+  transition: transform 0.2s, border-color 0.2s;
+  backdrop-filter: blur(10px);
+}
+.stat-card:hover { transform: translateY(-2px); border-color: #2a2a2a; }
+.stat-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
+.stat-label { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
+.stat-badge { width: 30px; height: 30px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
+.stat-value { font-size: 28px; font-weight: 800; line-height: 1; margin-bottom: 8px; letter-spacing: -1px; }
+.stat-foot  { font-size: 11px; opacity: 0.4; font-weight: 600; letter-spacing: 0.04em; }
+
+.c-blue   { background: rgba(22,78,180,0.1); color: #60a5fa; }
+.c-blue   .stat-badge { background: rgba(96,165,250,0.12); color: #60a5fa; }
+.c-orange { background: rgba(180,80,0,0.1); color: #fb923c; }
+.c-orange .stat-badge { background: rgba(251,146,60,0.12); color: #fb923c; }
+.c-green {
+  background: linear-gradient(145deg, rgba(36, 143, 84, 0.18), rgba(20, 92, 56, 0.08));
+  border: 1px solid var(--green-border);
+  color: var(--green-text);
+}
+.c-green .stat-badge {
+  background: var(--primary-grad);
+  border: 1px solid var(--green-border);
+  color: #fff;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
+}
+.c-purple { background: rgba(100,40,200,0.1); color: #a78bfa; }
+.c-purple .stat-badge { background: rgba(167,139,250,0.12); color: #a78bfa; }
+</style>

apps/admin/src/views/agent/Players.vue

@@ -2,6 +2,7 @@
 import { ref, onMounted } from 'vue';
 import api from '../../api';
 import { ElMessage } from 'element-plus';
+import { formatAmount, formatAmountFull } from '../../utils/format-amount';
 
 const players = ref<unknown[]>([]);
 const form = ref({ username: '', password: 'Player@123' });
@@ -41,28 +42,97 @@ async function withdraw(playerId: string, amount: number) {
 </script>
 
 <template>
-  <h2>直属玩家</h2>
-  <el-form inline style="margin-bottom: 16px">
-    <el-input v-model="form.username" placeholder="用户名" />
-    <el-button type="primary" @click="create">创建玩家</el-button>
-  </el-form>
-  <el-form inline style="margin-bottom: 16px">
-    <el-input v-model="depositForm.playerId" placeholder="玩家ID" style="width: 100px" />
-    <el-input-number v-model="depositForm.amount" :min="1" />
-    <el-button type="success" @click="deposit">上分</el-button>
-  </el-form>
-  <el-table :data="players">
-    <el-table-column prop="id" label="ID" />
-    <el-table-column prop="username" label="用户名" />
-    <el-table-column label="余额">
-      <template #default="{ row }">
-        {{ (row as { wallet?: { availableBalance: string } }).wallet?.availableBalance }}
-      </template>
-    </el-table-column>
-    <el-table-column label="操作">
-      <template #default="{ row }">
-        <el-button size="small" @click="withdraw((row as { id: string }).id, 50)">下分50</el-button>
-      </template>
-    </el-table-column>
-  </el-table>
+  <div class="admin-list-page">
+  <div class="page-header">
+    <h2 class="page-title">直属玩家</h2>
+    <span class="page-desc">管理你名下的直属玩家</span>
+  </div>
+
+  <el-card class="tool-card" shadow="never">
+    <div class="tool-row">
+      <div class="tool-section">
+        <div class="tool-section-title">创建玩家</div>
+        <el-form inline>
+          <el-form-item label="用户名">
+            <el-input v-model="form.username" placeholder="输入用户名" style="width: 150px" />
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="create">+ 创建玩家</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+      <div class="tool-divider" />
+      <div class="tool-section">
+        <div class="tool-section-title">上分操作</div>
+        <el-form inline>
+          <el-form-item label="玩家ID">
+            <el-input v-model="depositForm.playerId" placeholder="玩家ID" style="width: 110px" />
+          </el-form-item>
+          <el-form-item label="金额">
+            <el-input-number v-model="depositForm.amount" :min="1" style="width: 130px" />
+          </el-form-item>
+          <el-form-item>
+            <el-button type="success" @click="deposit">上分</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+    </div>
+  </el-card>
+
+  <el-card class="data-card" shadow="never">
+    <div class="table-wrap">
+    <el-table :data="players" stripe>
+      <el-table-column prop="id" label="ID" width="80" />
+      <el-table-column prop="username" label="用户名" min-width="120" />
+      <el-table-column label="可用余额" min-width="100" align="right">
+        <template #default="{ row }">
+          <template v-if="(row as { wallet?: { availableBalance: string } }).wallet?.availableBalance != null">
+            <el-tooltip
+              :content="formatAmountFull((row as { wallet: { availableBalance: string } }).wallet.availableBalance)"
+              placement="top"
+            >
+              <span>{{ formatAmount((row as { wallet: { availableBalance: string } }).wallet.availableBalance) }}</span>
+            </el-tooltip>
+          </template>
+          <span v-else>—</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" width="120" align="center">
+        <template #default="{ row }">
+          <el-button size="small" type="warning" plain @click="withdraw((row as { id: string }).id, 50)">下分 50</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    </div>
+  </el-card>
+  </div>
 </template>
+
+<style scoped>
+.page-header { display: flex; align-items: baseline; gap: 12px; margin-bottom: 20px; }
+.page-title  { font-size: 20px; font-weight: 700; color: #e0e0e0; }
+.page-desc   { font-size: 13px; color: #3a3a3a; }
+.tool-card   { margin-bottom: 16px; border-radius: 12px; }
+.data-card   { border-radius: 12px; }
+
+.tool-row {
+  display: flex;
+  gap: 0;
+  align-items: flex-start;
+}
+.tool-section { flex: 1; padding-right: 24px; }
+.tool-section-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: #666;
+  margin-bottom: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+.tool-divider {
+  width: 1px;
+  background: #eee;
+  align-self: stretch;
+  margin: 0 24px 0 0;
+}
+</style>

apps/admin/src/views/agent/SubAgents.vue

@@ -2,6 +2,7 @@
 import { ref, onMounted } from 'vue';
 import api from '../../api';
 import { ElMessage } from 'element-plus';
+import { formatAmount, formatAmountFull } from '../../utils/format-amount';
 
 const agents = ref<unknown[]>([]);
 const form = ref({ username: '', password: 'Agent@123', creditLimit: 10000 });
@@ -21,19 +22,58 @@ async function create() {
 </script>
 
 <template>
-  <h2>下级代理（仅一级代理可见）</h2>
-  <el-form inline style="margin-bottom: 16px">
-    <el-input v-model="form.username" placeholder="用户名" />
-    <el-input-number v-model="form.creditLimit" />
-    <el-button type="primary" @click="create">创建二级代理</el-button>
-  </el-form>
-  <el-table :data="agents">
-    <el-table-column label="用户名">
-      <template #default="{ row }">
-        {{ (row as { user?: { username: string } }).user?.username }}
-      </template>
-    </el-table-column>
-    <el-table-column prop="creditLimit" label="额度" />
-    <el-table-column prop="usedCredit" label="已用" />
-  </el-table>
+  <div class="admin-list-page">
+  <div class="page-header">
+    <h2 class="page-title">下级代理</h2>
+    <span class="page-desc">仅一级代理可见</span>
+  </div>
+
+  <el-card class="tool-card" shadow="never">
+    <el-form inline>
+      <el-form-item label="用户名">
+        <el-input v-model="form.username" placeholder="代理用户名" style="width: 150px" />
+      </el-form-item>
+      <el-form-item label="授信额度">
+        <el-input-number v-model="form.creditLimit" :min="0" :step="1000" style="width: 150px" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="create">+ 创建二级代理</el-button>
+      </el-form-item>
+    </el-form>
+  </el-card>
+
+  <el-card class="data-card" shadow="never">
+    <div class="table-wrap">
+    <el-table :data="agents" stripe>
+      <el-table-column label="用户名" min-width="140">
+        <template #default="{ row }">
+          {{ (row as { user?: { username: string } }).user?.username }}
+        </template>
+      </el-table-column>
+      <el-table-column label="授信额度" min-width="100" align="right">
+        <template #default="{ row }">
+          <el-tooltip :content="formatAmountFull((row as { creditLimit: string }).creditLimit)" placement="top">
+            <span>{{ formatAmount((row as { creditLimit: string }).creditLimit) }}</span>
+          </el-tooltip>
+        </template>
+      </el-table-column>
+      <el-table-column label="已用额度" min-width="100" align="right">
+        <template #default="{ row }">
+          <el-tooltip :content="formatAmountFull((row as { usedCredit: string }).usedCredit)" placement="top">
+            <span>{{ formatAmount((row as { usedCredit: string }).usedCredit) }}</span>
+          </el-tooltip>
+        </template>
+      </el-table-column>
+    </el-table>
+    </div>
+  </el-card>
+  </div>
 </template>
+
+<style scoped>
+.page-header { display: flex; align-items: baseline; gap: 12px; margin-bottom: 20px; }
+.page-title  { font-size: 20px; font-weight: 700; color: #e0e0e0; }
+.page-desc   { font-size: 13px; color: #3a3a3a; }
+.tool-card   { margin-bottom: 16px; border-radius: 12px; }
+.data-card   { border-radius: 12px; }
+</style>