样式修改

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 ? (

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();
 

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%;