feat(admin): show game consume ranking modal

apps/src/api/legacy/datav.ts

@@ -116,6 +116,30 @@ export async function countryDashboardGameMetrics(
   });
 }
 
+export async function countryDashboardGameSummaries(
+  params: Record<string, any> = {},
+) {
+  return requestClient.get<{
+    current: number;
+    records: CountryDashboardGameMetric[];
+    size: number;
+    total: number;
+  }>('/datav/country-dashboard/game-metrics/games', {
+    params,
+  });
+}
+
+export async function countryDashboardGameCountryRank(
+  params: Record<string, any> = {},
+) {
+  return requestClient.get<CountryDashboardGameMetric[]>(
+    '/datav/country-dashboard/game-metrics/country-rank',
+    {
+      params,
+    },
+  );
+}
+
 export async function latestActiveUserCountryCode(params: Record<string, any> = {}) {
   return requestClient.get<Array<Record<string, any>>>(
     '/datav/active/user-country-code',

apps/src/views/statistics/datav.vue

@@ -42,7 +42,8 @@ import utc from 'dayjs/plugin/utc';
 
 import {
   countryDashboard,
-  countryDashboardGameMetrics,
+  countryDashboardGameCountryRank,
+  countryDashboardGameSummaries,
   countryDashboardRechargeDetails,
 } from '#/api/legacy/datav';
 import SysOriginSelect from '#/components/sys-origin-select.vue';
@@ -103,6 +104,10 @@ const gameMetricSorter = reactive<{
   field: 'consumeAmount',
   order: 'descend',
 });
+const gameCountryRankOpen = ref(false);
+const gameCountryRankLoading = ref(false);
+const gameCountryRankRecords = ref<CountryDashboardGameMetric[]>([]);
+const selectedGameMetric = ref<null | Partial<CountryDashboardGameMetric>>(null);
 const gameQuery = reactive<{
   gameKeyword: string;
   gameProvider?: string;
@@ -128,6 +133,13 @@ const { renderEcharts: renderLuckyChart } = useEcharts(luckyChartRef);
 type ChartOption = Parameters<typeof renderUserRechargeChart>[0];
 
 const accessCodes = computed(() => accessStore.accessCodes || []);
+const gameCountryRankTitle = computed(() => {
+  const game = selectedGameMetric.value;
+  if (!game) {
+    return '国家消耗排名';
+  }
+  return `${gameDisplayText(game)} 国家消耗排名`;
+});
 const sysOriginOptions = computed(() => {
   const options = getAllowedSysOrigins(accessCodes.value);
   return options.length > 0 ? options : getAllowedSysOrigins([]);
@@ -337,12 +349,10 @@ const gameMetricIntegerColumns = new Set(['orderCount', 'userCount']);
 const gameMetricPercentColumns = new Set(['payoutRate', 'profitRate']);
 
 const gameMetricColumns: any[] = [
-  { dataIndex: 'periodName', fixed: 'left' as const, key: 'periodName', title: '日期/周期', width: 120 },
+  { align: 'right' as const, dataIndex: 'rank', fixed: 'left' as const, key: 'rank', title: '排名', width: 72 },
-  { dataIndex: 'countryName', key: 'countryName', title: '国家', width: 150 },
+  { dataIndex: 'gameName', fixed: 'left' as const, key: 'gameName', title: '游戏', width: 240 },
-  { dataIndex: 'countryCode', key: 'countryCode', title: 'Code', width: 86 },
+  { dataIndex: 'gameProvider', key: 'gameProvider', title: '游戏厂商', width: 130 },
-  { dataIndex: 'gameProvider', key: 'gameProvider', title: '游戏厂商', width: 120 },
+  { dataIndex: 'gameId', key: 'gameId', title: '游戏 ID', width: 150 },
-  { dataIndex: 'gameId', key: 'gameId', title: '游戏 ID', width: 130 },
-  { dataIndex: 'gameName', key: 'gameName', title: '游戏名称', width: 180 },
   {
     align: 'right' as const,
     dataIndex: 'consumeAmount',
@@ -352,44 +362,6 @@ const gameMetricColumns: any[] = [
     title: '消耗',
     width: 130,
   },
-  {
-    align: 'right' as const,
-    dataIndex: 'payoutAmount',
-    key: 'payoutAmount',
-    sortDirections: ['descend', 'ascend'],
-    sorter: true,
-    title: '返奖',
-    width: 130,
-  },
-  {
-    align: 'right' as const,
-    dataIndex: 'profitAmount',
-    key: 'profitAmount',
-    sortDirections: ['descend', 'ascend'],
-    sorter: true,
-    title: '收益',
-    width: 130,
-  },
-  { align: 'right' as const, dataIndex: 'payoutRate', key: 'payoutRate', title: '返奖率', width: 110 },
-  { align: 'right' as const, dataIndex: 'profitRate', key: 'profitRate', title: '收益率', width: 110 },
-  {
-    align: 'right' as const,
-    dataIndex: 'userCount',
-    key: 'userCount',
-    sortDirections: ['descend', 'ascend'],
-    sorter: true,
-    title: '游戏用户数',
-    width: 130,
-  },
-  {
-    align: 'right' as const,
-    dataIndex: 'orderCount',
-    key: 'orderCount',
-    sortDirections: ['descend', 'ascend'],
-    sorter: true,
-    title: '流水笔数',
-    width: 120,
-  },
   { dataIndex: 'refreshedAt', key: 'refreshedAt', title: '更新时间', width: 170 },
 ];
 const gameTableScrollX = gameMetricColumns.reduce(
@@ -397,6 +369,18 @@ const gameTableScrollX = gameMetricColumns.reduce(
   0,
 );
 
+const gameCountryRankColumns: any[] = [
+  { align: 'right' as const, dataIndex: 'rank', key: 'rank', title: '排名', width: 72 },
+  { dataIndex: 'countryName', key: 'countryName', title: '国家', width: 180 },
+  { dataIndex: 'countryCode', key: 'countryCode', title: 'Code', width: 100 },
+  { align: 'right' as const, dataIndex: 'consumeAmount', key: 'consumeAmount', title: '消耗', width: 150 },
+  { dataIndex: 'refreshedAt', key: 'refreshedAt', title: '更新时间', width: 170 },
+];
+const gameCountryRankScrollX = gameCountryRankColumns.reduce(
+  (totalWidth, item) => totalWidth + Number(item.width || 0),
+  0,
+);
+
 const rechargeDetailColumns: any[] = [
   { dataIndex: 'createTime', key: 'createTime', title: '时间', width: 170 },
   { dataIndex: 'sourceType', key: 'sourceType', title: '来源', width: 120 },
@@ -589,6 +573,9 @@ async function loadDashboard() {
     };
     if (activeTableTab.value === 'game') {
       await loadGameMetrics();
+      if (gameCountryRankOpen.value) {
+        await loadGameCountryRank();
+      }
     }
   } catch (error) {
     dashboard.value = null;
@@ -624,7 +611,7 @@ async function loadGameMetrics() {
   }
   gameMetricLoading.value = true;
   try {
-    const result = await countryDashboardGameMetrics(buildGameMetricParams());
+    const result = await countryDashboardGameSummaries(buildGameMetricParams());
     gameMetricRecords.value = result.records || [];
     gameMetricPagination.total = Number(result.total || 0);
     gameMetricPagination.current = Number(result.current || gameMetricPagination.current || 1);
@@ -642,6 +629,39 @@ async function loadGameMetrics() {
   }
 }
 
+function buildGameCountryRankParams(record: Partial<CountryDashboardGameMetric>) {
+  return {
+    ...buildParams(),
+    countryCodes: selectedCountryCodes.value.join(',') || undefined,
+    gameId: record.gameId,
+    gameProvider: record.gameProvider,
+    rankLimit: 200,
+  };
+}
+
+async function loadGameCountryRank(record = selectedGameMetric.value) {
+  if (!record?.gameId || !record.gameProvider || !canQuery.value) {
+    return;
+  }
+  gameCountryRankLoading.value = true;
+  try {
+    gameCountryRankRecords.value = await countryDashboardGameCountryRank(
+      buildGameCountryRankParams(record),
+    );
+  } catch {
+    gameCountryRankRecords.value = [];
+    message.error('游戏国家排名加载失败');
+  } finally {
+    gameCountryRankLoading.value = false;
+  }
+}
+
+async function openGameCountryRank(record: Partial<CountryDashboardGameMetric>) {
+  selectedGameMetric.value = record;
+  gameCountryRankOpen.value = true;
+  await loadGameCountryRank(record);
+}
+
 async function handleGameMetricTableChange(
   pagination: Record<string, any>,
   _filters: Record<string, any>,
@@ -697,13 +717,19 @@ function rechargeDetailRowKey(record: Record<string, any>) {
 }
 
 function gameMetricRowKey(record: Record<string, any>) {
-  return [
+  return [record.gameProvider, record.gameId].join('-');
-    record.periodKey,
+}
-    record.statTimezone,
+
-    record.countryCode,
+function gameCountryRankRowKey(record: Record<string, any>) {
-    record.gameProvider,
+  return [record.countryCode, record.gameProvider, record.gameId].join('-');
-    record.gameId,
+}
-  ].join('-');
+
+function gameMetricRank(index: number) {
+  return (gameMetricPagination.current - 1) * gameMetricPagination.pageSize + index + 1;
+}
+
+function gameDisplayText(record: Partial<CountryDashboardGameMetric>) {
+  return record.gameName || record.gameId || '-';
 }
 
 function rechargeSourceName(sourceType: string) {
@@ -1131,6 +1157,9 @@ watch(selectedCountryCodes, () => {
   if (activeTableTab.value === 'game') {
     gameMetricPagination.current = 1;
     void loadGameMetrics();
+    if (gameCountryRankOpen.value) {
+      void loadGameCountryRank();
+    }
   }
 });
 
@@ -1357,9 +1386,22 @@ onBeforeUnmount(() => {
                 size="small"
                 @change="handleGameMetricTableChange"
               >
-                <template #bodyCell="{ column, record }">
+                <template #bodyCell="{ column, index, record }">
+                  <template v-if="column.key === 'rank'">
+                    <span class="number-cell">{{ gameMetricRank(index) }}</span>
+                  </template>
+                  <template v-else-if="column.key === 'gameName'">
+                    <Button
+                      class="game-link-button"
+                      size="small"
+                      type="link"
+                      @click="openGameCountryRank(record)"
+                    >
+                      {{ gameDisplayText(record) }}
+                    </Button>
+                  </template>
                   <template
-                    v-if="
+                    v-else-if="
                       gameMetricNumberColumns.has(String(column.dataIndex)) ||
                         gameMetricPercentColumns.has(String(column.dataIndex))
                     "
@@ -1453,6 +1495,34 @@ onBeforeUnmount(() => {
           </template>
         </Table>
       </Modal>
+      <Modal
+        v-model:open="gameCountryRankOpen"
+        :footer="null"
+        :title="gameCountryRankTitle"
+        width="860px"
+      >
+        <Table
+          :columns="gameCountryRankColumns"
+          :data-source="gameCountryRankRecords"
+          :loading="gameCountryRankLoading"
+          :pagination="false"
+          :row-key="gameCountryRankRowKey"
+          :scroll="{ x: gameCountryRankScrollX, y: 520 }"
+          size="small"
+        >
+          <template #bodyCell="{ column, index, record }">
+            <template v-if="column.key === 'rank'">
+              <span class="number-cell">{{ index + 1 }}</span>
+            </template>
+            <template v-else-if="column.key === 'consumeAmount'">
+              <span class="number-cell">{{ formatAmount(record.consumeAmount) }}</span>
+            </template>
+            <template v-else-if="column.key === 'countryName'">
+              {{ record.countryName || record.countryCode || '-' }}
+            </template>
+          </template>
+        </Table>
+      </Modal>
     </div>
   </div>
 </template>
@@ -1633,6 +1703,17 @@ onBeforeUnmount(() => {
   font-variant-numeric: tabular-nums;
 }
 
+.game-link-button {
+  height: auto;
+  padding: 0;
+  white-space: normal;
+}
+
+.game-link-button :deep(span) {
+  overflow-wrap: anywhere;
+  text-align: left;
+}
+
 .summary-value-cell {
   display: block;
   font-weight: 700;