feat(dashboard): v0.7.4 — 热力图双击弹窗展示当日模型用量（Token/请求/费用/命中率）+ by_model 结构化升级

src/components/dashboard/DailyBars.tsx

@@ -97,7 +97,12 @@ export function DailyBars({ daily, dimension, names, unknownProviderLabel }: Dai
           const h = Math.max(4, Math.round(((d.totalTokens || 0) / max) * 170));
           const total = d.totalTokens || 1;
 
-          const breakdown = dimension === "provider" ? d.byProvider : d.byModel;
+          const breakdown =
+            dimension === "provider"
+              ? d.byProvider
+              : Object.fromEntries(
+                  Object.entries(d.byModel || {}).map(([k, v]) => [k, v.totalTokens])
+                );
           const segments = Object.entries(breakdown || {})
             .map(([key, tokens]) => ({
               key,

src/components/dashboard/DailyDetailModal.tsx

@@ -48,12 +48,15 @@ export function DailyDetailModal({ day, dimension, colorMap, unknownProviderLabe
   const total = day.totalTokens || 1;
   const isProvider = dimension === "provider";
 
-  // Flat per-model breakdown (model tab)
+  // Flat per-model breakdown (model tab) — structured TotalsRow per model
   const modelSegments = Object.entries(day.byModel || {})
-    .map(([model, tokens]) => ({
+    .map(([model, row]) => ({
       model,
-      tokens,
-      pct: (tokens / total) * 100,
+      tokens: row.totalTokens,
+      requests: row.requests,
+      costUsd: row.costUsd,
+      cacheHitRate: row.cacheHitRate,
+      pct: ((row.totalTokens || 0) / total) * 100,
     }))
     .sort((a, b) => b.tokens - a.tokens);
 
@@ -165,20 +168,22 @@ export function DailyDetailModal({ day, dimension, colorMap, unknownProviderLabe
               {modelSegments.length === 0 ? (
                 <div className="py-6 text-center text-sm text-content-muted">{t("noData")}</div>
               ) : (
-                <div className="space-y-1.5 max-h-72 overflow-y-auto pr-1">
+                <div className="space-y-2 max-h-72 overflow-y-auto pr-1">
                   {modelSegments.map((s, i) => (
-                    <div key={s.model} className="flex items-center gap-3 text-sm">
-                      <span className="inline-block h-2.5 w-2.5 rounded-sm shrink-0" style={{ backgroundColor: modelColor(i) }} />
-                      <div className="min-w-0 flex-1">
-                        <div className="flex items-baseline justify-between gap-2">
-                          <span className="truncate text-content-primary" title={s.model}>{modelName(s.model)}</span>
-                          <span className="shrink-0 text-xs text-content-muted tabular-nums">
-                            {fmtTokens(s.tokens)} <span className="text-content-muted">· {s.pct.toFixed(1)}%</span>
-                          </span>
-                        </div>
-                        <div className="mt-1 h-1.5 w-full overflow-hidden rounded-full bg-border">
-                          <div className="h-full rounded-full transition-all" style={{ width: `${Math.max(2, s.pct)}%`, backgroundColor: modelColor(i) }} />
-                        </div>
+                    <div key={s.model} className="rounded-lg bg-hover/50 px-3 py-2">
+                      <div className="flex items-center gap-2 text-sm">
+                        <span className="inline-block h-2.5 w-2.5 rounded-sm shrink-0" style={{ backgroundColor: modelColor(i) }} />
+                        <span className="truncate flex-1 text-content-primary" title={s.model}>{modelName(s.model)}</span>
+                        <span className="shrink-0 text-xs text-content-muted tabular-nums">{s.pct.toFixed(1)}%</span>
+                      </div>
+                      <div className="mt-1.5 h-1.5 w-full overflow-hidden rounded-full bg-border">
+                        <div className="h-full rounded-full transition-all" style={{ width: `${Math.max(2, s.pct)}%`, backgroundColor: modelColor(i) }} />
+                      </div>
+                      <div className="mt-1.5 flex flex-wrap gap-x-4 gap-y-0.5 text-xs text-content-muted tabular-nums">
+                        <span>{t("totalTokens")}: <span className="text-content-primary font-medium">{fmtTokens(s.tokens)}</span></span>
+                        <span>{t("requests")}: <span className="text-content-primary font-medium">{s.requests.toLocaleString()}</span></span>
+                        {s.costUsd > 0 && <span>{t("cost")}: <span className="text-content-primary font-medium">{money(s.costUsd)}</span></span>}
+                        <span>{t("cacheHitRate")}: <span className="text-content-primary font-medium">{fmtPct(s.cacheHitRate)}</span></span>
                       </div>
                     </div>
                   ))}

src/components/dashboard/DashboardPage.tsx

@@ -1,11 +1,14 @@
-import { useState, type ReactNode } from "react";
+import { useMemo, useState, type ReactNode } from "react";
+import { createPortal } from "react-dom";
 import { useDashboard, type DashboardRange } from "../../hooks/useDashboard";
 import { useCurrency } from "../../hooks/useCurrency";
 import { useTranslation } from "../../i18n";
 import { fmtInt, fmtPct, fmtTime, fmtTokens } from "../../lib/dashboard-format";
-import { DailyBars } from "./DailyBars";
+import { DailyBars, modelColor } from "./DailyBars";
+import { DailyDetailModal } from "./DailyDetailModal";
 import { Heatmap } from "./Heatmap";
 import { TrendLineChart } from "./TrendLineChart";
+import type { DailyRow, HeatmapCell } from "../../types/dashboard";
 
 const RANGES: DashboardRange[] = ["today", "7d", "30d", "all"];
 
@@ -56,6 +59,14 @@ export function DashboardPage() {
   const [showAllModels, setShowAllModels] = useState(false);
   const [recentPage, setRecentPage] = useState(1);
   const [trendTab, setTrendTab] = useState<"daily" | "model" | "provider">("daily");
+  const [heatmapSelected, setHeatmapSelected] = useState<DailyRow | null>(null);
+
+  const daily = data?.stats.daily ?? [];
+  const detailDates = useMemo(() => new Set(daily.map((d) => d.date)), [daily]);
+  const heatmapColorMap = useMemo(() => {
+    const unique = [...new Set(daily.flatMap((d) => Object.keys(d.byModel || {})))];
+    return Object.fromEntries(unique.map((m, i) => [m, modelColor(i)]));
+  }, [daily]);
 
   const RANGE_LABELS: Record<DashboardRange, string> = {
     today: t("rangeToday"),
@@ -92,13 +103,17 @@ export function DashboardPage() {
   if (!data) return null;
 
   const totals = data.stats.totals;
-  const daily = data.stats.daily;
   const models = data.stats.models;
   const recent = data.stats.recent;
   const heatmap = data.heatmap;
   const rangeTotals = data.rangeTotals;
   const visibleModels = showAllModels ? models : models.slice(0, 8);
 
+  const onHeatmapCellDoubleClick = (cell: HeatmapCell) => {
+    const row = daily.find((d) => d.date === cell.date);
+    if (row) setHeatmapSelected(row);
+  };
+
   // Recent pagination
   const RECENT_PAGE_SIZE = 30;
   const recentTotal = data.stats.recentTotal;
@@ -206,7 +221,7 @@ export function DashboardPage() {
 
       {/* Heatmap — full row */}
       <Card title={t("cardHeatmap")} subtitle={t("cardHeatmapSub")}>
-        <Heatmap heatmap={heatmap} />
+        <Heatmap heatmap={heatmap} detailDates={detailDates} onCellDoubleClick={onHeatmapCellDoubleClick} />
       </Card>
 
       {/* Usage-trend tabs + Model table side by side */}
@@ -451,6 +466,19 @@ export function DashboardPage() {
           {data.meta.home}
         </div>
       </div>
+
+      {/* Heatmap double-click detail modal */}
+      {heatmapSelected &&
+        createPortal(
+          <DailyDetailModal
+            day={heatmapSelected}
+            dimension="model"
+            colorMap={heatmapColorMap}
+            unknownProviderLabel={t("providerUnknown")}
+            onClose={() => setHeatmapSelected(null)}
+          />,
+          document.body,
+        )}
     </div>
   );
 }

src/components/dashboard/Heatmap.tsx

@@ -7,6 +7,10 @@ import type { HeatmapCell, HeatmapData } from "../../types/dashboard";
 
 interface HeatmapProps {
   heatmap: HeatmapData;
+  /** Set of dates (YYYY-MM-DD) that have detail data in the current range. */
+  detailDates?: Set<string>;
+  /** Called when a cell with detail data is double-clicked. */
+  onCellDoubleClick?: (cell: HeatmapCell) => void;
 }
 
 const LEVEL_BG = [
@@ -30,7 +34,7 @@ interface HoverState {
   y: number;
 }
 
-export function Heatmap({ heatmap }: HeatmapProps) {
+export function Heatmap({ heatmap, detailDates, onCellDoubleClick }: HeatmapProps) {
   const { t, lang } = useTranslation();
   const cells = heatmap?.cells || [];
   const monthLabels = heatmap?.monthLabels || [];
@@ -172,6 +176,7 @@ export function Heatmap({ heatmap }: HeatmapProps) {
                       );
                     }
                     const level = cell.level ?? 0;
+                    const hasDetail = detailDates ? detailDates.has(cell.date) : level > 0;
                     return (
                       <button
                         key={cell.date}
@@ -182,7 +187,8 @@ export function Heatmap({ heatmap }: HeatmapProps) {
                         onMouseLeave={hideTooltip}
                         onFocus={() => showTooltipFromFocus(cell)}
                         onBlur={hideTooltip}
-                        className={`rounded-[3px] ring-1 ring-inset ring-white/5 transition-transform hover:scale-[1.35] focus:scale-[1.35] outline-none ${LEVEL_BG[level] || LEVEL_BG[0]}`}
+                        onDoubleClick={hasDetail && onCellDoubleClick ? () => onCellDoubleClick(cell) : undefined}
+                        className={`rounded-[3px] ring-1 ring-inset ring-white/5 transition-transform outline-none ${LEVEL_BG[level] || LEVEL_BG[0]} ${hasDetail && onCellDoubleClick ? "cursor-pointer hover:scale-[1.35] focus:scale-[1.35]" : "cursor-default"}`}
                         style={{ width: CELL, height: CELL }}
                       />
                     );