数据大屏口径修正

databi/src/DatabiApp.jsx

@@ -254,6 +254,14 @@ export function DatabiApp() {
               <SelfGameScreen gameId={gameId} loading={selfGameLoading && !selfGameOverview} onGameChange={setGameId} overview={selfGameOverview} />
             ) : isReportView ? (
               <ReportOverview
+                grantDrilldownQuery={{
+                  appCode,
+                  countryId,
+                  endMs: rangeEndMs(range, timeZone),
+                  regionId,
+                  startMs: rangeStartMs(range, timeZone),
+                  statTz: timeZone
+                }}
                 loading={showSkeleton}
                 model={model}
                 onMetricTrend={setTrendModalItem}

databi/src/api.js

@@ -43,6 +43,20 @@ export async function fetchStatisticsOverview({ appCode, countryId, endMs, regio
   return fetchDatabiData("/v1/statistics/overview", { appCode, query });
 }
 
+export async function fetchPlatformGrantUsers({ appCode, countryId, endMs, page, pageSize, regionId, startMs, statDay, statTz }) {
+  return fetchDatabiData("/v1/statistics/platform-grants/users", {
+    appCode,
+    query: platformGrantQuery({ appCode, countryId, endMs, page, pageSize, regionId, startMs, statDay, statTz })
+  });
+}
+
+export async function fetchPlatformGrantRecords({ appCode, countryId, endMs, page, pageSize, regionId, startMs, statDay, statTz, userId }) {
+  return fetchDatabiData("/v1/statistics/platform-grants/records", {
+    appCode,
+    query: platformGrantQuery({ appCode, countryId, endMs, page, pageSize, regionId, startMs, statDay, statTz, userId })
+  });
+}
+
 export async function fetchSelfGameStatisticsOverview({ appCode, countryId, endMs, gameId, regionId, startMs, statTz }) {
   const query = { app_code: normalizeAppCode(appCode) || "lalu" };
   if (statTz) {
@@ -67,6 +81,38 @@ export async function fetchSelfGameStatisticsOverview({ appCode, countryId, endM
   return fetchDatabiData("/v1/statistics/self-games/overview", { appCode, query });
 }
 
+function platformGrantQuery({ appCode, countryId, endMs, page, pageSize, regionId, startMs, statDay, statTz, userId }) {
+  const query = { app_code: normalizeAppCode(appCode) || "lalu" };
+  if (statTz) {
+    query.stat_tz = statTz;
+  }
+  if (startMs) {
+    query.start_ms = String(startMs);
+  }
+  if (endMs) {
+    query.end_ms = String(endMs);
+  }
+  if (statDay) {
+    query.stat_day = statDay;
+  }
+  if (countryId) {
+    query.country_id = String(countryId);
+  }
+  if (regionId && regionId !== "all") {
+    query.region_id = String(regionId);
+  }
+  if (userId) {
+    query.user_id = String(userId);
+  }
+  if (page) {
+    query.page = String(page);
+  }
+  if (pageSize) {
+    query.page_size = String(pageSize);
+  }
+  return query;
+}
+
 export async function fetchFilterOptions({ appCode } = {}) {
   const [apps, regions, countries] = await Promise.all([
     fetchDatabiData(apiEndpointPath(API_OPERATIONS.listApps), { appCode }),

databi/src/components/ReportOverview.jsx

@@ -1,4 +1,5 @@
-import { Fragment, useCallback, useMemo, useState } from "react";
+import { Fragment, useCallback, useEffect, useMemo, useState } from "react";
+import { fetchPlatformGrantRecords, fetchPlatformGrantUsers } from "../api.js";
 import { EChart } from "../charts/EChart.jsx";
 import { createReportRevenueOption } from "../charts/options/createReportRevenueOption.js";
 import { formatCoin, formatMoneyFull, formatPercent } from "../utils/format.js";
@@ -34,7 +35,7 @@ const countryColumns = [
   { key: "gift_coin_spent", label: "礼物流水", render: (row) => formatOptionalCoin(row.gift_coin_spent), sortable: false },
   { key: "coin_total", label: "金币数量(总和)", render: (row) => formatOptionalCoin(row.coin_total), sortable: false },
   { key: "consumed_coin", label: "消耗金币", render: (row) => formatOptionalCoin(row.consumed_coin), sortable: false },
-  { key: "platform_grant_coin", label: "平台发放金币", render: (row) => formatOptionalCoin(row.platform_grant_coin), sortable: false },
+  { key: "platform_grant_coin", label: "平台发放金币", render: (row, context) => <PlatformGrantCoinCell context={context} row={row} />, sortable: false },
   { key: "manual_grant_coin", label: "人工发放金币", render: (row) => formatOptionalCoin(row.manual_grant_coin), sortable: false },
   { key: "salary_usd_minor", label: "工资总和(主播/代理)", render: (row) => formatOptionalMoney(row.salary_usd_minor), sortable: false },
   { key: "salary_transfer_coin", label: "工资兑换金币", render: (row) => formatOptionalCoin(row.salary_transfer_coin), sortable: false },
@@ -88,7 +89,7 @@ const metricColumns = [
   { key: "delta", label: "变化", render: (row) => <DeltaText value={row.delta} />, sortable: false }
 ];
 
-export function ReportOverview({ loading = false, model, onMetricTrend, onOpenLuckyGiftPools }) {
+export function ReportOverview({ grantDrilldownQuery, loading = false, model, onMetricTrend, onOpenLuckyGiftPools }) {
   const [activeTab, setActiveTab] = useState("country");
   const summaryCards = useMemo(() => createSummaryCards(model), [model]);
 
@@ -116,7 +117,7 @@ export function ReportOverview({ loading = false, model, onMetricTrend, onOpenLu
           ))}
         </div>
         <div className="report-tab-panel" role="tabpanel">
-          {activeTab === "country" ? <CountryReport loading={loading} rows={model.reportCountryRows} /> : null}
+          {activeTab === "country" ? <CountryReport grantDrilldownQuery={grantDrilldownQuery} loading={loading} rows={model.reportCountryRows} /> : null}
           {activeTab === "revenue" ? <RevenueReport loading={loading} rows={model.revenueSeries} /> : null}
           {activeTab === "gift" ? <GiftReport loading={loading} metrics={model.businessKpis} rows={model.giftRanking} /> : null}
           {activeTab === "lucky" ? <LuckyReport loading={loading} metrics={model.businessKpis} onOpenLuckyGiftPools={onOpenLuckyGiftPools} rows={model.luckyGiftPools} /> : null}
@@ -171,8 +172,11 @@ function ReportMetricCard({ card, loading, onOpenTrend }) {
   );
 }
 
-function CountryReport({ loading, rows }) {
+function CountryReport({ grantDrilldownQuery, loading, rows }) {
   const [expandedRowIds, setExpandedRowIds] = useState(() => new Set());
+  const [grantCountryModal, setGrantCountryModal] = useState(null);
+  const [grantUsersModal, setGrantUsersModal] = useState(null);
+  const [grantRecordsModal, setGrantRecordsModal] = useState(null);
   const toggleRow = useCallback((rowId) => {
     setExpandedRowIds((current) => {
       const next = new Set(current);
@@ -195,17 +199,66 @@ function CountryReport({ loading, rows }) {
       onToggle: () => toggleRow(row.row_id)
     };
   }), [expandedRowIds, rows, toggleRow]);
+  const openGrantUsers = useCallback((row) => {
+    setGrantCountryModal(null);
+    setGrantRecordsModal(null);
+    setGrantUsersModal({
+      countryLabel: row.country || "国家",
+      query: buildPlatformGrantQuery(grantDrilldownQuery, row)
+    });
+  }, [grantDrilldownQuery]);
+  const openGrantCountries = useCallback((row) => {
+    const countryRows = platformGrantCountryRows(row, rows);
+    if (!countryRows.length) {
+      return;
+    }
+    setGrantRecordsModal(null);
+    setGrantUsersModal(null);
+    setGrantCountryModal({
+      rows: countryRows,
+      title: row.row_type === "date_total" ? `${row.date_label} 平台发放金币` : "平台发放金币"
+    });
+  }, [rows]);
+  const grantContext = useMemo(() => ({
+    onOpenPlatformGrantCountries: openGrantCountries,
+    onOpenPlatformGrantUsers: openGrantUsers
+  }), [openGrantCountries, openGrantUsers]);
 
   return (
     <ReportPanel>
       <ReportTable
         columns={countryColumns}
+        context={grantContext}
         loading={loading}
         preserveOrder
-        renderExpandedRow={(row) => <CountryDetailTable dateLabel={row.date_label} rows={row.children || []} />}
+        renderExpandedRow={(row) => <CountryDetailTable context={grantContext} dateLabel={row.date_label} rows={row.children || []} />}
         rows={tableRows}
         wide
       />
+      {grantCountryModal ? (
+        <PlatformGrantCountryModal
+          modal={grantCountryModal}
+          onClose={() => setGrantCountryModal(null)}
+          onOpenUsers={openGrantUsers}
+        />
+      ) : null}
+      {grantUsersModal ? (
+        <PlatformGrantUsersModal
+          modal={grantUsersModal}
+          onClose={() => setGrantUsersModal(null)}
+          onOpenRecords={(userRow) => setGrantRecordsModal({
+            countryLabel: grantUsersModal.countryLabel,
+            query: { ...grantUsersModal.query, userId: userRow.user_id },
+            user: userRow
+          })}
+        />
+      ) : null}
+      {grantRecordsModal ? (
+        <PlatformGrantRecordsModal
+          modal={grantRecordsModal}
+          onClose={() => setGrantRecordsModal(null)}
+        />
+      ) : null}
     </ReportPanel>
   );
 }
@@ -290,7 +343,7 @@ function ReportMetricTable({ loading, rows }) {
   );
 }
 
-function ReportTable({ columns, defaultSort, loading, preserveOrder = false, renderExpandedRow, rows, wide = false }) {
+function ReportTable({ columns, context, defaultSort, loading, preserveOrder = false, renderExpandedRow, rows, wide = false }) {
   const sortableDefault = defaultSort || firstSortableColumn(columns);
   const [sortState, setSortState] = useState(sortableDefault);
   const sortedRows = useMemo(() => preserveOrder ? rows : sortRows(rows, sortState, columns), [columns, preserveOrder, rows, sortState]);
@@ -360,7 +413,7 @@ function ReportTable({ columns, defaultSort, loading, preserveOrder = false, ren
                       ].filter(Boolean).join(" ")}
                       key={column.key}
                     >
-                      {column.render ? column.render(row) : row[column.key]}
+                      {column.render ? column.render(row, context) : row[column.key]}
                     </td>
                   ))}
                 </tr>
@@ -378,7 +431,7 @@ function ReportTable({ columns, defaultSort, loading, preserveOrder = false, ren
   );
 }
 
-function CountryDetailTable({ dateLabel, rows }) {
+function CountryDetailTable({ context, dateLabel, rows }) {
   if (!rows.length) {
     return <div className="report-subtable-empty">当前无数据</div>;
   }
@@ -398,7 +451,7 @@ function CountryDetailTable({ dateLabel, rows }) {
             <tr key={reportRowKey(row, index)}>
               <td>{index + 1}</td>
               {countryDetailColumns.map((column) => (
-                <td className={column.align === "left" ? "is-left" : ""} key={column.key}>{column.render ? column.render(row) : row[column.key]}</td>
+                <td className={column.align === "left" ? "is-left" : ""} key={column.key}>{column.render ? column.render(row, context) : row[column.key]}</td>
               ))}
             </tr>
           ))}
@@ -408,6 +461,245 @@ function CountryDetailTable({ dateLabel, rows }) {
   );
 }
 
+function PlatformGrantCoinCell({ context, row }) {
+  const value = Number(row.platform_grant_coin || 0);
+  const clickable = value > 0 && (row.row_type === "country" ? context?.onOpenPlatformGrantUsers : context?.onOpenPlatformGrantCountries);
+  if (!clickable) {
+    return formatOptionalCoin(row.platform_grant_coin);
+  }
+  const label = row.row_type === "country"
+    ? `查看 ${row.country || "国家"} 平台发放金币用户明细`
+    : `查看 ${row.date_label || "全部"} 平台发放金币国家明细`;
+  return (
+    <button
+      aria-label={label}
+      className="report-link-button"
+      type="button"
+      onClick={(event) => {
+        event.stopPropagation();
+        if (row.row_type === "country") {
+          context.onOpenPlatformGrantUsers(row);
+          return;
+        }
+        context.onOpenPlatformGrantCountries(row);
+      }}
+    >
+      {formatCoin(value)}
+    </button>
+  );
+}
+
+function PlatformGrantCountryModal({ modal, onClose, onOpenUsers }) {
+  return (
+    <ReportDialog title={modal.title} onClose={onClose}>
+      <div className="report-modal-table-wrap">
+        <table className="report-modal-table">
+          <thead>
+            <tr>
+              <th>国家</th>
+              <th>平台发放金币</th>
+            </tr>
+          </thead>
+          <tbody>
+            {modal.rows.length ? modal.rows.map((row) => (
+              <tr key={reportRowKey(row, row.country_id || row.country)}>
+                <td>
+                  <button
+                    aria-label={`查看 ${row.country || "国家"} 平台发放金币用户明细`}
+                    className="report-link-button report-link-button--left"
+                    type="button"
+                    onClick={() => onOpenUsers(row)}
+                  >
+                    <CountryCell row={row} />
+                  </button>
+                </td>
+                <td>{formatOptionalCoin(row.platform_grant_coin)}</td>
+              </tr>
+            )) : (
+              <tr className="report-table-empty-row"><td colSpan={2}>当前无数据</td></tr>
+            )}
+          </tbody>
+        </table>
+      </div>
+    </ReportDialog>
+  );
+}
+
+function PlatformGrantUsersModal({ modal, onClose, onOpenRecords }) {
+  const pageSize = 20;
+  const [page, setPage] = useState(1);
+  const [data, setData] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+  useEffect(() => {
+    let active = true;
+    setLoading(true);
+    setError("");
+    fetchPlatformGrantUsers({ ...modal.query, page, pageSize })
+      .then((nextData) => {
+        if (active) {
+          setData(nextData || {});
+        }
+      })
+      .catch((err) => {
+        if (active) {
+          setError(err.message || "请求失败");
+          setData(null);
+        }
+      })
+      .finally(() => {
+        if (active) {
+          setLoading(false);
+        }
+      });
+    return () => {
+      active = false;
+    };
+  }, [modal.query, page]);
+  const items = Array.isArray(data?.items) ? data.items : [];
+  const total = Number(data?.total || 0);
+
+  return (
+    <ReportDialog title={`${modal.countryLabel} 平台发放金币用户`} onClose={onClose}>
+      <div className="report-modal-table-wrap">
+        <table className="report-modal-table">
+          <thead>
+            <tr>
+              <th>用户</th>
+              <th>平台发放金币</th>
+              <th>记录数</th>
+              <th>最近发放时间</th>
+            </tr>
+          </thead>
+          <tbody>
+            {loading ? <tr className="report-table-skeleton-row"><td colSpan={4}><span className="skeleton-block report-skeleton-line" /></td></tr> : null}
+            {!loading && error ? <tr className="report-table-empty-row"><td colSpan={4}>{error}</td></tr> : null}
+            {!loading && !error && !items.length ? <tr className="report-table-empty-row"><td colSpan={4}>当前无数据</td></tr> : null}
+            {!loading && !error ? items.map((item) => (
+              <tr key={item.user_id}>
+                <td>
+                  <button
+                    aria-label={`查看 ${platformGrantUserLabel(item)} 平台发放金币来源明细`}
+                    className="report-link-button report-link-button--left"
+                    type="button"
+                    onClick={() => onOpenRecords(item)}
+                  >
+                    <span className="report-user-cell">
+                      {item.avatar ? <img alt="" src={item.avatar} /> : null}
+                      <span>
+                        <b>{platformGrantUserLabel(item)}</b>
+                        <small>{platformGrantUserMeta(item)}</small>
+                      </span>
+                    </span>
+                  </button>
+                </td>
+                <td>{formatOptionalCoin(item.total_coin)}</td>
+                <td>{formatOptionalCoin(item.record_count)}</td>
+                <td>{formatDateTime(item.last_granted_at_ms)}</td>
+              </tr>
+            )) : null}
+          </tbody>
+        </table>
+      </div>
+      <ReportPagination page={page} pageSize={pageSize} total={total} onPageChange={setPage} />
+    </ReportDialog>
+  );
+}
+
+function PlatformGrantRecordsModal({ modal, onClose }) {
+  const pageSize = 20;
+  const [page, setPage] = useState(1);
+  const [data, setData] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+  useEffect(() => {
+    let active = true;
+    setLoading(true);
+    setError("");
+    fetchPlatformGrantRecords({ ...modal.query, page, pageSize })
+      .then((nextData) => {
+        if (active) {
+          setData(nextData || {});
+        }
+      })
+      .catch((err) => {
+        if (active) {
+          setError(err.message || "请求失败");
+          setData(null);
+        }
+      })
+      .finally(() => {
+        if (active) {
+          setLoading(false);
+        }
+      });
+    return () => {
+      active = false;
+    };
+  }, [modal.query, page]);
+  const items = Array.isArray(data?.items) ? data.items : [];
+  const total = Number(data?.total || 0);
+
+  return (
+    <ReportDialog title={`${platformGrantUserLabel(modal.user)} 平台发放金币来源`} onClose={onClose}>
+      <div className="report-modal-table-wrap">
+        <table className="report-modal-table">
+          <thead>
+            <tr>
+              <th>来源</th>
+              <th>金币</th>
+              <th>发放时间</th>
+              <th>事件 ID</th>
+            </tr>
+          </thead>
+          <tbody>
+            {loading ? <tr className="report-table-skeleton-row"><td colSpan={4}><span className="skeleton-block report-skeleton-line" /></td></tr> : null}
+            {!loading && error ? <tr className="report-table-empty-row"><td colSpan={4}>{error}</td></tr> : null}
+            {!loading && !error && !items.length ? <tr className="report-table-empty-row"><td colSpan={4}>当前无数据</td></tr> : null}
+            {!loading && !error ? items.map((item) => (
+              <tr key={item.event_id}>
+                <td>{platformGrantSourceLabel(item.event_type)}</td>
+                <td>{formatOptionalCoin(item.amount)}</td>
+                <td>{formatDateTime(item.occurred_at_ms)}</td>
+                <td><span className="report-event-id">{item.event_id || "--"}</span></td>
+              </tr>
+            )) : null}
+          </tbody>
+        </table>
+      </div>
+      <ReportPagination page={page} pageSize={pageSize} total={total} onPageChange={setPage} />
+    </ReportDialog>
+  );
+}
+
+function ReportDialog({ children, onClose, title }) {
+  return (
+    <div className="report-modal-backdrop">
+      <section aria-label={title} aria-modal="true" className="report-modal" role="dialog">
+        <header className="report-modal-head">
+          <h2>{title}</h2>
+          <button className="report-modal-close" type="button" onClick={onClose}>关闭</button>
+        </header>
+        <div className="report-modal-body">{children}</div>
+      </section>
+    </div>
+  );
+}
+
+function ReportPagination({ onPageChange, page, pageSize, total }) {
+  const totalPages = Math.max(1, Math.ceil(total / pageSize));
+  return (
+    <div className="report-pagination">
+      <span>共 {formatCoin(total)} 条</span>
+      <div>
+        <button disabled={page <= 1} type="button" onClick={() => onPageChange(page - 1)}>上一页</button>
+        <b>{page} / {totalPages}</b>
+        <button disabled={page >= totalPages} type="button" onClick={() => onPageChange(page + 1)}>下一页</button>
+      </div>
+    </div>
+  );
+}
+
 function CountryCell({ row }) {
   return (
     <span className="report-country-cell">
@@ -575,6 +867,108 @@ function compareValues(leftValue, rightValue, type) {
   return leftNumber - rightNumber;
 }
 
+function buildPlatformGrantQuery(baseQuery = {}, row = {}) {
+  const countryId = Number(row.country_id ?? row.countryId ?? baseQuery.countryId ?? 0);
+  const regionId = row.region_id ?? row.regionId ?? baseQuery.regionId;
+  return {
+    appCode: baseQuery.appCode,
+    countryId,
+    endMs: baseQuery.endMs,
+    regionId,
+    startMs: baseQuery.startMs,
+    statDay: row.stat_day || row.statDay || "",
+    statTz: baseQuery.statTz
+  };
+}
+
+function platformGrantCountryRows(row, rows) {
+  const sourceRows = row.row_type === "date_total" && Array.isArray(row.children) && row.children.length
+    ? row.children
+    : collectPlatformGrantCountryRows(rows);
+  return aggregatePlatformGrantCountryRows(sourceRows)
+    .filter((item) => Number(item.platform_grant_coin || 0) > 0)
+    .sort((left, right) => Number(right.platform_grant_coin || 0) - Number(left.platform_grant_coin || 0));
+}
+
+function collectPlatformGrantCountryRows(rows) {
+  const out = [];
+  rows.forEach((row) => {
+    if (row.row_type === "country") {
+      out.push(row);
+    }
+    if (Array.isArray(row.children)) {
+      out.push(...collectPlatformGrantCountryRows(row.children));
+    }
+  });
+  return out;
+}
+
+function aggregatePlatformGrantCountryRows(rows) {
+  const grouped = new Map();
+  rows.forEach((row) => {
+    const key = [row.country_id ?? row.country, row.region_id ?? ""].join(":");
+    const current = grouped.get(key);
+    if (!current) {
+      grouped.set(key, { ...row, platform_grant_coin: Number(row.platform_grant_coin || 0) });
+      return;
+    }
+    const nextStatDay = current.stat_day && row.stat_day && current.stat_day === row.stat_day ? current.stat_day : "";
+    grouped.set(key, {
+      ...current,
+      platform_grant_coin: Number(current.platform_grant_coin || 0) + Number(row.platform_grant_coin || 0),
+      stat_day: nextStatDay
+    });
+  });
+  return Array.from(grouped.values());
+}
+
+function platformGrantUserLabel(item = {}) {
+  return item.user?.display_user_id || item.display_user_id || item.user?.username || item.username || item.nickname || item.user_id || "用户";
+}
+
+function platformGrantUserMeta(item = {}) {
+  return [item.user?.username || item.username || item.nickname, item.user_id]
+    .filter((value, index, values) => value && values.indexOf(value) === index)
+    .join(" · ") || "--";
+}
+
+function platformGrantSourceLabel(value) {
+  switch (String(value || "").trim()) {
+    case "WalletLuckyGiftRewardCredited":
+      return "幸运礼物返奖";
+    case "WalletTaskRewardCredited":
+      return "任务奖励";
+    case "WalletWheelRewardCredited":
+      return "转盘奖励";
+    case "WalletRoomTurnoverRewardCredited":
+      return "房间流水奖励";
+    case "WalletInviteActivityRewardCredited":
+      return "邀请活动奖励";
+    case "WalletAgencyOpeningRewardCredited":
+      return "代理开通奖励";
+    case "WalletPlatformGrantCoinCredited":
+      return "平台发放";
+    default:
+      return value || "--";
+  }
+}
+
+function formatDateTime(value) {
+  const ms = Number(value || 0);
+  if (!ms) {
+    return "--";
+  }
+  return new Date(ms).toLocaleString("zh-CN", {
+    day: "2-digit",
+    hour: "2-digit",
+    hour12: false,
+    minute: "2-digit",
+    month: "2-digit",
+    second: "2-digit",
+    year: "numeric"
+  });
+}
+
 function formatSignedPercent(value) {
   if (value === undefined || value === null || Number.isNaN(Number(value))) {
     return "--";

databi/src/components/ReportOverview.test.jsx

@@ -1,9 +1,20 @@
-import { render, screen, within } from "@testing-library/react";
+import { render, screen, waitFor, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import { expect, test } from "vitest";
+import { beforeEach, expect, test, vi } from "vitest";
+import { fetchPlatformGrantRecords, fetchPlatformGrantUsers } from "../api.js";
 import { createDashboardModel } from "../data/createDashboardModel.js";
 import { ReportOverview } from "./ReportOverview.jsx";
 
+vi.mock("../api.js", () => ({
+  fetchPlatformGrantRecords: vi.fn(),
+  fetchPlatformGrantUsers: vi.fn()
+}));
+
+beforeEach(() => {
+  vi.mocked(fetchPlatformGrantRecords).mockReset();
+  vi.mocked(fetchPlatformGrantUsers).mockReset();
+});
+
 test("shows daily totals first and expands daily country details on demand", async () => {
   const user = userEvent.setup();
   const model = createDashboardModel({
@@ -67,3 +78,84 @@ test("shows daily totals first and expands daily country details on demand", asy
   expect(june5Row).toHaveAttribute("aria-expanded", "false");
   expect(screen.queryByText("巴西")).not.toBeInTheDocument();
 });
+
+test("drills platform grant coin from total to country users and user records", async () => {
+  const user = userEvent.setup();
+  vi.mocked(fetchPlatformGrantUsers).mockResolvedValue({
+    items: [{
+      display_user_id: "163001",
+      last_granted_at_ms: Date.UTC(2026, 5, 5, 10, 20, 30),
+      record_count: 2,
+      total_coin: 55,
+      user_id: "7001",
+      username: "Ana"
+    }],
+    page: 1,
+    pageSize: 20,
+    total: 1
+  });
+  vi.mocked(fetchPlatformGrantRecords).mockResolvedValue({
+    items: [
+      { amount: 33, event_id: "grant:task:7001", event_type: "WalletTaskRewardCredited", occurred_at_ms: Date.UTC(2026, 5, 5, 10, 20, 30), user_id: "7001" },
+      { amount: 22, event_id: "grant:lucky:7001", event_type: "WalletLuckyGiftRewardCredited", occurred_at_ms: Date.UTC(2026, 5, 5, 9, 20, 30), user_id: "7001" }
+    ],
+    page: 1,
+    pageSize: 20,
+    total: 2
+  });
+  const model = createDashboardModel({
+    country_breakdown: [
+      { country: "巴西", country_id: 86, platform_grant_coin: 55, region_id: 10 },
+      { country: "沙特", country_id: 966, platform_grant_coin: 12, region_id: 20 }
+    ],
+    daily_country_breakdown: [
+      { country: "巴西", country_id: 86, platform_grant_coin: 33, region_id: 10, stat_day: "2026-06-05" },
+      { country: "巴西", country_id: 86, platform_grant_coin: 22, region_id: 10, stat_day: "2026-06-06" },
+      { country: "沙特", country_id: 966, platform_grant_coin: 12, region_id: 20, stat_day: "2026-06-06" }
+    ],
+    daily_series: [
+      { platform_grant_coin: 33, stat_day: "2026-06-05" },
+      { platform_grant_coin: 34, stat_day: "2026-06-06" }
+    ],
+    platform_grant_coin: 67
+  }, { appCode: "lalu", countryId: 0, range: { end: "2026-06-06", start: "2026-06-05" } });
+
+  render(
+    <ReportOverview
+      grantDrilldownQuery={{
+        appCode: "lalu",
+        countryId: 0,
+        endMs: Date.UTC(2026, 5, 7),
+        regionId: "all",
+        startMs: Date.UTC(2026, 5, 5),
+        statTz: "Asia/Shanghai"
+      }}
+      model={model}
+    />
+  );
+
+  await user.click(screen.getByRole("button", { name: "查看 全部 平台发放金币国家明细" }));
+  expect(screen.getByRole("dialog", { name: "平台发放金币" })).toBeInTheDocument();
+
+  await user.click(screen.getByRole("button", { name: "查看 巴西 平台发放金币用户明细" }));
+  await waitFor(() => expect(fetchPlatformGrantUsers).toHaveBeenCalledWith(expect.objectContaining({
+    appCode: "lalu",
+    countryId: 86,
+    page: 1,
+    pageSize: 20,
+    regionId: 10,
+    statTz: "Asia/Shanghai"
+  })));
+  expect(await screen.findByRole("button", { name: "查看 163001 平台发放金币来源明细" })).toBeInTheDocument();
+
+  await user.click(screen.getByRole("button", { name: "查看 163001 平台发放金币来源明细" }));
+  await waitFor(() => expect(fetchPlatformGrantRecords).toHaveBeenCalledWith(expect.objectContaining({
+    countryId: 86,
+    page: 1,
+    pageSize: 20,
+    regionId: 10,
+    userId: "7001"
+  })));
+  expect(await screen.findByText("任务奖励")).toBeInTheDocument();
+  expect(screen.getByText("幸运礼物返奖")).toBeInTheDocument();
+});

databi/src/data/createDashboardModel.js

@@ -438,6 +438,7 @@ function normalizeCountryRow(item, index, totalRecharge) {
       ? numberValue(item.recharge_conversion_rate ?? item.rechargeConversionRate)
       : ratio(rechargeUsers, activeUsers),
     recharge_users: rechargeUsers,
+    region_id: numberValue(item.region_id ?? item.regionId),
     salary_usd_minor: readOptionalNumber(item, "salary_usd_minor", "salaryUsdMinor"),
     salary_transfer_coin: readOptionalNumber(item, "salary_transfer_coin", "salaryTransferCoin"),
     share: recharge / totalRecharge,

databi/src/styles/report.css

@@ -611,6 +611,39 @@
   font-style: normal;
 }
 
+.report-link-button {
+  display: inline-flex;
+  max-width: 100%;
+  min-width: 0;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: #126fb2;
+  cursor: pointer;
+  font: inherit;
+  font-weight: 780;
+  text-align: inherit;
+}
+
+.report-link-button:hover {
+  color: #075d99;
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+
+.report-link-button:focus-visible {
+  border-radius: 4px;
+  outline: 2px solid #1688d9;
+  outline-offset: 2px;
+}
+
+.report-link-button--left {
+  justify-content: flex-start;
+  text-align: left;
+}
+
 .report-country-cell {
   display: inline-flex;
   max-width: 220px;
@@ -711,6 +744,194 @@
   color: #8a98aa;
 }
 
+.report-modal-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 60;
+  display: grid;
+  place-items: center;
+  padding: 28px;
+  background: rgba(15, 23, 42, 0.28);
+}
+
+.report-modal {
+  display: grid;
+  width: min(960px, 100%);
+  max-height: min(760px, calc(100vh - 56px));
+  grid-template-rows: auto minmax(0, 1fr);
+  overflow: hidden;
+  border: 1px solid #d8e5f0;
+  border-radius: 8px;
+  background: #ffffff;
+  box-shadow: 0 20px 56px rgba(15, 23, 42, 0.22);
+}
+
+.report-modal-head {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 14px 16px;
+  border-bottom: 1px solid #edf2f7;
+}
+
+.report-modal-head h2 {
+  min-width: 0;
+  margin: 0;
+  overflow: hidden;
+  color: #172033;
+  font-size: 16px;
+  font-weight: 780;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.report-modal-close,
+.report-pagination button {
+  height: 30px;
+  padding: 0 12px;
+  border: 1px solid #c7d7e7;
+  border-radius: 8px;
+  background: #ffffff;
+  color: #126fb2;
+  cursor: pointer;
+  font: inherit;
+  font-size: 13px;
+  font-weight: 760;
+}
+
+.report-modal-close:hover,
+.report-pagination button:hover:not(:disabled) {
+  border-color: #1688d9;
+  background: #eef7ff;
+}
+
+.report-pagination button:disabled {
+  cursor: not-allowed;
+  opacity: 0.48;
+}
+
+.report-modal-body {
+  display: grid;
+  min-height: 0;
+  gap: 12px;
+  padding: 14px 16px 16px;
+  overflow: auto;
+}
+
+.report-modal-table-wrap {
+  min-width: 0;
+  overflow: auto;
+  border: 1px solid #e4ebf3;
+  border-radius: 8px;
+}
+
+.report-modal-table {
+  width: 100%;
+  min-width: 640px;
+  border-collapse: collapse;
+  background: #ffffff;
+}
+
+.report-modal-table th,
+.report-modal-table td {
+  height: 38px;
+  padding: 0 12px;
+  border-bottom: 1px solid #edf2f7;
+  color: #34445a;
+  font-size: 13px;
+  text-align: right;
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+}
+
+.report-modal-table th {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  background: #f8fafc;
+  color: #65748a;
+  font-size: 12px;
+  font-weight: 760;
+}
+
+.report-modal-table th:first-child,
+.report-modal-table td:first-child {
+  text-align: left;
+}
+
+.report-modal-table tbody tr:hover td {
+  background: #f7fbff;
+}
+
+.report-user-cell {
+  display: inline-flex;
+  max-width: 260px;
+  min-width: 0;
+  align-items: center;
+  gap: 8px;
+}
+
+.report-user-cell img {
+  width: 24px;
+  height: 24px;
+  flex: 0 0 auto;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+.report-user-cell > span {
+  display: grid;
+  min-width: 0;
+  gap: 1px;
+}
+
+.report-user-cell b,
+.report-user-cell small,
+.report-event-id {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.report-user-cell b {
+  color: #172033;
+  font-weight: 780;
+}
+
+.report-user-cell small {
+  color: #8a98aa;
+  font-size: 11px;
+  font-weight: 700;
+}
+
+.report-event-id {
+  display: inline-block;
+  max-width: 240px;
+  vertical-align: bottom;
+}
+
+.report-pagination {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  color: #65748a;
+  font-size: 13px;
+}
+
+.report-pagination > div {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.report-pagination b {
+  color: #34445a;
+  font-weight: 760;
+}
+
 .report-pair-cell {
   display: inline-flex;
   min-width: 118px;