From 653fc664dc2ff2cef08b4c6596b0da584519e1ab Mon Sep 17 00:00:00 2001
From: zhx <zhx@haiyi.com>
Date: Mon, 29 Jun 2026 12:22:04 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 databi/src/components/ReportOverview.jsx      | 18 ++++++++--
 databi/src/components/ReportOverview.test.jsx |  7 +++-
 databi/src/styles/report.css                  | 34 +++++++++++++++++++
 3 files changed, 55 insertions(+), 4 deletions(-)

diff --git a/databi/src/components/ReportOverview.jsx b/databi/src/components/ReportOverview.jsx
index 2550208..0ffb191 100644
--- a/databi/src/components/ReportOverview.jsx
+++ b/databi/src/components/ReportOverview.jsx
@@ -15,7 +15,7 @@ const reportTabs = [
 ];
 
 const countryColumns = [
-  { align: "left", key: "date_label", label: "日期", render: (row) => <DateCell row={row} />, sortable: false },
+  { align: "left", key: "date_label", label: "日期", render: (row) => <DateCell row={row} />, sortable: false, stickyLeft: true },
   { align: "left", key: "country", label: "国家", render: (row) => <CountryCell row={row} />, sortable: false },
   { key: "registrations", label: "注册", render: (row) => formatOptionalCoin(row.registrations), sortable: false },
   { key: "active_users", label: "活跃用户", render: (row) => formatOptionalCoin(row.active_users), sortable: false },
@@ -315,8 +315,12 @@ function ReportTable({ columns, defaultSort, loading, preserveOrder = false, ren
             {columns.map((column) => {
               const isSortable = !preserveOrder && column.sortable !== false;
               const isActive = sortState?.key === column.key;
+              const headerClassName = [
+                isSortable ? "is-sortable" : "",
+                column.stickyLeft ? "is-sticky-left" : ""
+              ].filter(Boolean).join(" ");
               return (
-                <th className={isSortable ? "is-sortable" : ""} key={column.key}>
+                <th className={headerClassName} key={column.key}>
                   {isSortable ? (
                     <button
                       className={["report-sort-button", column.align === "left" ? "report-sort-button--left" : "", isActive ? "is-active" : ""].filter(Boolean).join(" ")}
@@ -349,7 +353,15 @@ function ReportTable({ columns, defaultSort, loading, preserveOrder = false, ren
                 >
                   <td>{reportRowIndex(row, index)}</td>
                   {columns.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" : "",
+                        column.stickyLeft ? "is-sticky-left" : ""
+                      ].filter(Boolean).join(" ")}
+                      key={column.key}
+                    >
+                      {column.render ? column.render(row) : row[column.key]}
+                    </td>
                   ))}
                 </tr>
                 {row.expanded && renderExpandedRow ? (
diff --git a/databi/src/components/ReportOverview.test.jsx b/databi/src/components/ReportOverview.test.jsx
index bbb3569..c8498bc 100644
--- a/databi/src/components/ReportOverview.test.jsx
+++ b/databi/src/components/ReportOverview.test.jsx
@@ -41,11 +41,15 @@ test("shows daily totals first and expands daily country details on demand", asy
     recharge_usd_minor: 35000
   }, { appCode: "lalu", countryId: 0, range: { end: "2026-06-06", start: "2026-06-05" } });
 
-  render(<ReportOverview model={model} />);
+  const { container } = render(<ReportOverview model={model} />);
 
   expect(screen.queryByText("巴西")).not.toBeInTheDocument();
   expect(screen.queryByText("沙特")).not.toBeInTheDocument();
 
+  const stickyDateHeader = container.querySelector(".report-table--wide th.is-sticky-left");
+  expect(stickyDateHeader).toHaveTextContent("日期");
+  expect(container.querySelector(".report-table--wide td.is-sticky-left .report-date-cell")).toBeTruthy();
+
   const june5Row = screen.getByRole("button", { name: "展开 2026-06-05 国家明细" });
   expect(june5Row).toHaveAttribute("aria-expanded", "false");
 
@@ -54,6 +58,7 @@ test("shows daily totals first and expands daily country details on demand", asy
   expect(june5Row).toHaveAttribute("aria-expanded", "true");
   const detailRows = within(screen.getByRole("table", { name: "2026-06-05 国家明细" })).getAllByRole("row");
   expect(detailRows).toHaveLength(3);
+  expect(container.querySelector(".report-subtable .is-sticky-left")).toBeNull();
   expect(screen.getByText("巴西")).toBeInTheDocument();
   expect(screen.getByText("沙特")).toBeInTheDocument();
 
diff --git a/databi/src/styles/report.css b/databi/src/styles/report.css
index fff67e8..0ce2850 100644
--- a/databi/src/styles/report.css
+++ b/databi/src/styles/report.css
@@ -478,22 +478,51 @@
   text-align: left;
 }
 
+.report-table th.is-sticky-left,
+.report-table td.is-sticky-left {
+  position: sticky;
+  left: 0;
+  z-index: 2;
+  box-shadow: 1px 0 0 #dbe7f2, 16px 0 18px -20px rgba(27, 39, 56, 0.48);
+}
+
+.report-table th.is-sticky-left {
+  z-index: 4;
+  background: #f8fafc;
+}
+
+.report-table td.is-sticky-left {
+  background: #ffffff;
+}
+
 .report-table tbody tr:hover td {
   background: #f7fbff;
 }
 
+.report-table tbody tr:hover td.is-sticky-left {
+  background: #f7fbff;
+}
+
 .report-row-total td {
   background: #eef7ff;
   color: #172033;
   font-weight: 780;
 }
 
+.report-row-total td.is-sticky-left {
+  background: #eef7ff;
+}
+
 .report-row-date-total td {
   background: #f7fafc;
   color: #243044;
   font-weight: 760;
 }
 
+.report-row-date-total td.is-sticky-left {
+  background: #f7fafc;
+}
+
 .report-row-expandable {
   cursor: pointer;
 }
@@ -509,6 +538,11 @@
   background: #e9f5ff;
 }
 
+.report-row-total:hover td.is-sticky-left,
+.report-row-date-total:hover td.is-sticky-left {
+  background: #e9f5ff;
+}
+
 .report-sort-button {
   display: flex;
   width: 100%;