@cs2dak/react 0.2.1 → 1.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cs2dak/react",
-  "version": "0.2.1",
+  "version": "1.0.0",
   "type": "module",
   "license": "MIT",
   "exports": {
@@ -9,9 +9,9 @@
   },
   "dependencies": {
     "lucide-react": "^0.468.0",
-    "@cs2dak/maps": "0.2.1",
-    "@cs2dak/core": "0.2.1",
-    "@cs2dak/contract": "0.2.1"
+    "@cs2dak/contract": "1.0.0",
+    "@cs2dak/presentation": "1.0.0",
+    "@cs2dak/maps": "0.2.1"
   },
   "peerDependencies": {
     "react": ">=18",

package/src/components/EconomyConversionPanel.tsx

@@ -1,5 +1,4 @@
-import type { EconomyConversion } from "@cs2dak/core";
-import { economyLabelCn } from "@cs2dak/core";
+import { economyLabelCn, type EconomyConversion } from "@cs2dak/presentation";
 
 export interface EconomyConversionPanelProps {
   /** One team's per-economy-type conversion (from buildEconomyConversion). */

package/src/components/EconomyPanel.tsx

@@ -1,4 +1,5 @@
 import type { EconomyPoint } from "@cs2dak/contract";
+import { ECONOMY_LABEL_SHORT } from "@cs2dak/presentation";
 
 export interface EconomyPanelProps {
   points: EconomyPoint[];
@@ -9,14 +10,6 @@ export interface EconomyPanelProps {
 const width = 760;
 const height = 260;
 const pad = { left: 48, right: 18, top: 24, bottom: 34 };
-const economyLabels = {
-  pistol: "手枪",
-  eco: "Eco",
-  semi: "半起",
-  force: "强起",
-  full: "长枪",
-  conversion: "长枪"
-} as const;
 const economyColors = {
   pistol: "rgba(255, 198, 77, 0.18)",
   eco: "rgba(104, 115, 129, 0.18)",
@@ -111,8 +104,8 @@ export function EconomyPanel({ points, teamAName, teamBName }: EconomyPanelProps
         {" 每回合装备价值；背景色为每队经济类型"}
       </div>
       <div className="dak-economy-legend" aria-label="经济类型图例">
-        {(Object.keys(economyLabels) as Array<keyof typeof economyLabels>).map((type) => (
-          <span key={type}><i style={{ background: economyColors[type] }} />{economyLabels[type]}</span>
+        {Object.keys(ECONOMY_LABEL_SHORT).map((type) => (
+          <span key={type}><i style={{ background: economyColors[type as keyof typeof economyColors] }} />{ECONOMY_LABEL_SHORT[type]}</span>
         ))}
       </div>
       <div className="dak-economy-rounds">
@@ -129,8 +122,8 @@ export function EconomyPanel({ points, teamAName, teamBName }: EconomyPanelProps
                   {upsetLabels[upsetType]}
                 </span>
               )}
-              <span className={point.winnerTeamKey === "teamA" ? "dak-economy-winner" : undefined}>{teamAName}: {economyLabels[point.teamAEconomy]}</span>
-              <span className={point.winnerTeamKey === "teamB" ? "dak-economy-winner" : undefined}>{teamBName}: {economyLabels[point.teamBEconomy]}</span>
+              <span className={point.winnerTeamKey === "teamA" ? "dak-economy-winner" : undefined}>{teamAName}: {ECONOMY_LABEL_SHORT[point.teamAEconomy]}</span>
+              <span className={point.winnerTeamKey === "teamB" ? "dak-economy-winner" : undefined}>{teamBName}: {ECONOMY_LABEL_SHORT[point.teamBEconomy]}</span>
             </div>
           );
         })}

package/src/components/KillFeed.tsx

@@ -1,4 +1,4 @@
-import { displayWeaponName } from "@cs2dak/core";
+import { displayWeaponName } from "@cs2dak/presentation";
 import type { WorkspaceKillEvent } from "@cs2dak/contract";
 
 export interface KillFeedProps {

package/src/components/MatchWorkspace.tsx

@@ -1,5 +1,5 @@
 import type { MatchWorkspaceModel, WorkspaceReplayFrame, WorkspaceReplayRound, WorkspaceSpatialPoint } from "@cs2dak/contract";
-import { displayWeaponName } from "@cs2dak/core";
+import { displayWeaponName, sideLabel, economyLabelCn } from "@cs2dak/presentation";
 import { getMapCalibration, worldToRadar } from "@cs2dak/maps";
 import { Activity, BarChart3, ChevronLeft, ChevronRight, Crosshair, Film, Gauge, ListChecks, Map, Pause, Play, ShieldCheck, Table2, Users } from "lucide-react";
 import { useEffect, useMemo, useState, type ReactNode } from "react";
@@ -234,7 +234,7 @@ function PlayerStoryPanel({ model }: MatchWorkspaceProps) {
                   <b className="dak-mono">{fact.kills}/{fact.deaths}/{fact.assists}</b>
                 </div>
                 <div className="dak-player-round-meta">
-                  <span>{economyLabel(fact.economyType)}</span>
+                  <span>{economyLabelCn(fact.economyType) || "未知经济"}</span>
                   <span>{fact.survived ? "存活" : "阵亡"}</span>
                   {fact.openingDuel !== "none" && <span>{openingDuelLabel(fact.openingDuel)}</span>}
                 </div>
@@ -565,21 +565,6 @@ function summarizePlayerRoundFacts(facts: MatchWorkspaceModel["players"][number]
   );
 }
 
-function sideLabel(side: string) {
-  return side === "t" ? "进攻方" : "防守方";
-}
-
-function economyLabel(type: string | null) {
-  const labels: Record<string, string> = {
-    pistol: "手枪局",
-    eco: "ECO",
-    semi: "半起",
-    force: "强起",
-    full: "长枪",
-    conversion: "长枪"
-  };
-  return type ? labels[type] ?? type : "未知经济";
-}
 
 function openingDuelLabel(openingDuel: string) {
   if (openingDuel === "won") return "首杀";

package/src/components/SeasonLeaderboard.test.ts

@@ -0,0 +1,55 @@
+import React from "react";
+import { describe, expect, it } from "vitest";
+import { renderToStaticMarkup } from "react-dom/server";
+import type { SeasonLeaderboardModel } from "@cs2dak/contract";
+import { SeasonLeaderboard } from "./SeasonLeaderboard";
+
+// 组件只读 views + rows.metrics/name/playerKey；用最小 fixture 而非重建完整 schema。
+const model = {
+  version: "cs2-demo-analysis-kit/leaderboard-0.1",
+  weightsVersion: "test",
+  matchCount: 1,
+  provenance: { cohortVersion: "cs2-demo-analysis-kit/cohort-1.0", sourceSchemaVersion: "cs2-demo-format/2.0", matches: [] },
+  views: [
+    {
+      key: "core",
+      label: "Core",
+      defaultSort: "rivalhubRR",
+      columns: [
+        { key: "rivalhubRR", label: "RR", format: "rating", description: null },
+        { key: "hsPercent", label: "HS%", format: "percent", description: null },
+        { key: "kd", label: "K/D", format: "ratio", description: null }
+      ]
+    }
+  ],
+  rows: [
+    { playerKey: "steam:1", name: "Alice", steamIds: ["1"], externalUserId: null, teamKeys: [], mapCount: 1, confidence: 0.5, prism: null, metrics: { rivalhubRR: 1.234, hsPercent: 55.5, kd: 1.4 } },
+    { playerKey: "steam:2", name: "Bob", steamIds: ["2"], externalUserId: null, teamKeys: [], mapCount: 1, confidence: 0.5, prism: null, metrics: { rivalhubRR: 0.9, hsPercent: 48, kd: null } }
+  ]
+} as unknown as SeasonLeaderboardModel;
+
+describe("SeasonLeaderboard", () => {
+  it("formats metrics per column format and renders null as —", () => {
+    const html = renderToStaticMarkup(React.createElement(SeasonLeaderboard, { model }));
+    expect(html).toContain("Alice");
+    expect(html).toContain("Bob");
+    expect(html).toContain("1.23"); // rating: 2 位小数
+    expect(html).toContain("55.5%"); // percent: 0–100 + %
+    expect(html).toContain("—"); // Bob 的 K/D 为 null
+  });
+
+  it("sorts by the default sort column descending, nulls last", () => {
+    const html = renderToStaticMarkup(React.createElement(SeasonLeaderboard, { model }));
+    // 默认按 rivalhubRR 降序：Alice(1.234) 在 Bob(0.9) 前
+    expect(html.indexOf("Alice")).toBeLessThan(html.indexOf("Bob"));
+  });
+
+  it("marks rows interactive when onPlayerClick is provided", () => {
+    const html = renderToStaticMarkup(
+      React.createElement(SeasonLeaderboard, { model, onPlayerClick: () => {} })
+    );
+    expect(html).toContain("dak-row-clickable");
+    expect(html).toContain('role="button"');
+    expect(html).toContain("查看 Alice 详情");
+  });
+});

package/src/components/SeasonLeaderboard.tsx

@@ -0,0 +1,128 @@
+import { useMemo, useState } from "react";
+import type {
+  LeaderboardFormat,
+  LeaderboardMetricKey,
+  LeaderboardViewKey,
+  SeasonLeaderboardModel
+} from "@cs2dak/contract";
+
+export interface SeasonLeaderboardProps {
+  model: SeasonLeaderboardModel;
+  /**
+   * 提供后每行可点击（鼠标 + 键盘），回报该选手的 playerKey。
+   * 让嵌入产品（RivalHub）接导航而不必 fork 本组件。
+   */
+  onPlayerClick?: (playerKey: string) => void;
+}
+
+/** 按 format 把原始值渲染为展示文本；缺失统一显示 “—”（不伪造 0）。 */
+function formatMetric(value: number | null | undefined, format: LeaderboardFormat): string {
+  if (value == null) return "—";
+  switch (format) {
+    case "integer":
+      return String(Math.round(value));
+    case "rating":
+    case "ratio":
+      return value.toFixed(2);
+    case "adr":
+      return value.toFixed(1);
+    case "percent":
+      return `${value.toFixed(1)}%`;
+  }
+}
+
+export function SeasonLeaderboard({ model, onPlayerClick }: SeasonLeaderboardProps) {
+  const [viewKey, setViewKey] = useState<LeaderboardViewKey>(model.views[0]?.key ?? "core");
+  const view = model.views.find((v) => v.key === viewKey) ?? model.views[0];
+  const [sortKey, setSortKey] = useState<LeaderboardMetricKey>(view.defaultSort);
+
+  function selectView(next: LeaderboardViewKey) {
+    setViewKey(next);
+    const nextView = model.views.find((v) => v.key === next);
+    if (nextView) setSortKey(nextView.defaultSort);
+  }
+
+  // 排序在客户端：降序，缺失（null）始终排在最后。
+  const rows = useMemo(() => {
+    return [...model.rows].sort((a, b) => {
+      const va = a.metrics[sortKey];
+      const vb = b.metrics[sortKey];
+      if (va == null && vb == null) return 0;
+      if (va == null) return 1;
+      if (vb == null) return -1;
+      return vb - va;
+    });
+  }, [model.rows, sortKey]);
+
+  return (
+    <div className="dak-leaderboard">
+      <div className="dak-tabs" role="tablist">
+        {model.views.map((v) => (
+          <button
+            key={v.key}
+            type="button"
+            role="tab"
+            aria-selected={v.key === viewKey}
+            className={v.key === viewKey ? "dak-tab dak-tab-active" : "dak-tab"}
+            onClick={() => selectView(v.key)}
+          >
+            {v.label}
+          </button>
+        ))}
+      </div>
+
+      <table className="dak-table">
+        <thead>
+          <tr>
+            <th>#</th>
+            <th>选手</th>
+            {view.columns.map((col) => (
+              <th
+                key={col.key}
+                title={col.description ?? undefined}
+                aria-sort={col.key === sortKey ? "descending" : undefined}
+                className={col.key === sortKey ? "dak-col-sorted" : "dak-col-sortable"}
+                onClick={() => setSortKey(col.key)}
+              >
+                {col.label}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {rows.map((row, i) => (
+            <tr
+              key={row.playerKey}
+              className={onPlayerClick ? "dak-row-clickable" : undefined}
+              onClick={onPlayerClick ? () => onPlayerClick(row.playerKey) : undefined}
+              onKeyDown={
+                onPlayerClick
+                  ? (e) => {
+                      if (e.key === "Enter" || e.key === " ") {
+                        e.preventDefault();
+                        onPlayerClick(row.playerKey);
+                      }
+                    }
+                  : undefined
+              }
+              tabIndex={onPlayerClick ? 0 : undefined}
+              role={onPlayerClick ? "button" : undefined}
+              aria-label={onPlayerClick ? `查看 ${row.name} 详情` : undefined}
+            >
+              <td className="dak-mono">{i + 1}</td>
+              <td>{row.name}</td>
+              {view.columns.map((col) => (
+                <td
+                  key={col.key}
+                  className={col.key === sortKey ? "dak-mono dak-col-sorted" : "dak-mono"}
+                >
+                  {formatMetric(row.metrics[col.key], col.format)}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}

package/src/index.ts

@@ -1,9 +1,13 @@
-export { MatchWorkspace, AdminQaWorkspace } from "./components/MatchWorkspace";
-export { DemoAnalysisDashboard } from "./components/DemoAnalysisDashboard";
+export { MatchWorkspace } from "./components/MatchWorkspace";
 export { ScoreboardTable } from "./components/ScoreboardTable";
 export { RoundTimeline } from "./components/RoundTimeline";
 export { EconomyPanel } from "./components/EconomyPanel";
-export { EconomyConversionPanel } from "./components/EconomyConversionPanel";
 export { HeatmapCanvas } from "./components/HeatmapCanvas";
 export { KillFeed } from "./components/KillFeed";
 export { QaReportPanel } from "./components/QaReportPanel";
+export { SeasonLeaderboard } from "./components/SeasonLeaderboard";
+
+// AdminQaWorkspace 和 EconomyConversionPanel 保留在源文件中但不再从公共 API 导出：
+// 仓库内零消费者，等待 DAK Studio 建设时重新决定公共面。
+// import { AdminQaWorkspace } from "./components/MatchWorkspace";
+// import { EconomyConversionPanel } from "./components/EconomyConversionPanel";

package/src/theme.css

@@ -151,6 +151,15 @@
   background: linear-gradient(180deg, rgba(255, 122, 33, 0.2), rgba(255, 122, 33, 0.08));
 }
 
+.dak-leaderboard .dak-col-sortable {
+  cursor: pointer;
+}
+
+.dak-leaderboard .dak-col-sorted {
+  color: var(--dak-fg);
+  background: rgba(255, 122, 33, 0.08);
+}
+
 .dak-grid {
   display: grid;
   grid-template-columns: minmax(0, 1.24fr) minmax(380px, 0.76fr);

package/src/components/DemoAnalysisDashboard.tsx

@@ -1,178 +0,0 @@
-import type { DemoViewModel } from "@cs2dak/contract";
-import { Activity, Crosshair, Gauge, ListChecks, Map, ShieldAlert, Table2 } from "lucide-react";
-import { useMemo, useState, type ReactNode } from "react";
-import { EconomyPanel } from "./EconomyPanel";
-import { HeatmapCanvas } from "./HeatmapCanvas";
-import { QaReportPanel } from "./QaReportPanel";
-import { RoundTimeline } from "./RoundTimeline";
-import { ScoreboardTable } from "./ScoreboardTable";
-
-export interface DemoAnalysisDashboardProps {
-  model: DemoViewModel;
-}
-
-type ViewKey = "overview" | "rounds" | "spatial" | "qa";
-
-export function DemoAnalysisDashboard({ model }: DemoAnalysisDashboardProps) {
-  const [view, setView] = useState<ViewKey>("overview");
-  const topPlayer = model.scoreboard[0];
-  const economySwing = useMemo(
-    () => model.economy.reduce((max, point) => Math.max(max, Math.abs(point.advantage)), 0),
-    [model.economy]
-  );
-
-  return (
-    <main className="dak-shell">
-      <div className="dak-workspace">
-        <header className="dak-header">
-          <div>
-            <div className="dak-eyebrow">CS2 Demo Analysis Kit</div>
-            <h1 className="dak-title">{model.title}</h1>
-            <p className="dak-subtitle">{model.subtitle}</p>
-          </div>
-          <div className="dak-scoreblock">
-            <div className="dak-scoreline">{model.scoreline}</div>
-            <div className="dak-mapline">{model.map.name}</div>
-          </div>
-        </header>
-
-        <section className="dak-kpi-strip">
-          <Metric icon={<Gauge size={16} />} label="最高 V2 RR" value={topPlayer ? topPlayer.accountRR.toFixed(3) : "0.000"} detail={topPlayer?.name ?? "暂无选手"} />
-          <Metric icon={<Crosshair size={16} />} label="最高 ADR" value={topPlayer ? topPlayer.adr.toFixed(1) : "0.0"} detail="来自伤害统计" />
-          <Metric icon={<Activity size={16} />} label="最大装备差" value={`$${economySwing.toLocaleString()}`} detail={`${model.economy.length} 回合`} />
-          <Metric icon={<ShieldAlert size={16} />} label="数据检查" value={model.qa.summary.issueCount.toString()} detail={model.qa.ok ? "通过" : "需要检查"} />
-        </section>
-
-        <nav className="dak-tabs" aria-label="Analysis views">
-          <TabButton active={view === "overview"} icon={<Table2 size={16} />} label="总览" onClick={() => setView("overview")} />
-          <TabButton active={view === "rounds"} icon={<ListChecks size={16} />} label="回合" onClick={() => setView("rounds")} />
-          <TabButton active={view === "spatial"} icon={<Map size={16} />} label="地图" onClick={() => setView("spatial")} />
-          <TabButton active={view === "qa"} icon={<ShieldAlert size={16} />} label="检查" onClick={() => setView("qa")} />
-        </nav>
-
-        {view === "overview" && (
-          <div className="dak-grid">
-            <section className="dak-stack">
-              <Panel title="选手数据 / RR">
-              <ScoreboardTable rows={model.scoreboard} />
-              </Panel>
-              <Panel title="经济走势">
-              <EconomyPanel
-                points={model.economy}
-                teamAName={model.teams.teamA.name}
-                teamBName={model.teams.teamB.name}
-              />
-              </Panel>
-            </section>
-
-            <aside className="dak-stack">
-              <Panel title="地图热力图">
-                <HeatmapCanvas map={model.map} points={model.heatmap} />
-              </Panel>
-              <Panel title="回合事件">
-              <RoundTimeline events={model.timeline} />
-              </Panel>
-            </aside>
-          </div>
-        )}
-
-        {view === "rounds" && (
-          <div className="dak-grid dak-grid-even">
-            <Panel title="回合事件">
-              <RoundTimeline events={model.timeline} />
-            </Panel>
-            <Panel title="选手回合明细">
-              <div className="dak-roundfact-list">
-                {model.playerRoundFacts.slice(0, 80).map((fact) => (
-                  <div className="dak-roundfact-row" key={`${fact.roundNumber}-${fact.steamId64}`}>
-                    <span className="dak-badge">R{fact.roundNumber}</span>
-                    <span>{fact.name}</span>
-                    <span className="dak-muted">{sideLabel(fact.side)} · {economyLabel(fact.economyType)}</span>
-                    <span className="dak-mono">{fact.kills}/{fact.deaths}/{fact.assists}</span>
-                    <span className="dak-tags">{fact.kastTags.length > 0 ? fact.kastTags.map(kastLabel).join("、") : "无贡献回合"}</span>
-                  </div>
-                ))}
-              </div>
-            </Panel>
-          </div>
-        )}
-
-        {view === "spatial" && (
-          <div className="dak-grid dak-grid-even">
-            <Panel title="热力图">
-              <HeatmapCanvas map={model.map} points={model.heatmap} />
-            </Panel>
-            <Panel title="经济走势">
-              <EconomyPanel points={model.economy} teamAName={model.teams.teamA.name} teamBName={model.teams.teamB.name} />
-            </Panel>
-          </div>
-        )}
-
-        {view === "qa" && (
-          <Panel title="数据检查">
-            <QaReportPanel report={model.qa} />
-          </Panel>
-        )}
-      </div>
-    </main>
-  );
-}
-
-function sideLabel(side: string) {
-  return side === "t" ? "进攻方" : "防守方";
-}
-
-function economyLabel(type: string | null) {
-  const labels: Record<string, string> = {
-    pistol: "手枪局",
-    eco: "ECO",
-    semi: "半起",
-    force: "强起",
-    full: "长枪",
-    conversion: "长枪"
-  };
-  return type ? labels[type] ?? type : "未知经济";
-}
-
-function kastLabel(tag: string) {
-  const labels: Record<string, string> = {
-    kill: "击杀",
-    assist: "助攻",
-    survive: "存活",
-    trade: "被补枪"
-  };
-  return labels[tag] ?? tag;
-}
-
-function Metric({ icon, label, value, detail }: { icon: ReactNode; label: string; value: string; detail: string }) {
-  return (
-    <div className="dak-metric">
-      <div className="dak-metric-icon">{icon}</div>
-      <div>
-        <div className="dak-metric-label">{label}</div>
-        <div className="dak-metric-value">{value}</div>
-        <div className="dak-metric-detail">{detail}</div>
-      </div>
-    </div>
-  );
-}
-
-function TabButton({ active, icon, label, onClick }: { active: boolean; icon: ReactNode; label: string; onClick: () => void }) {
-  return (
-    <button className={active ? "dak-tab dak-tab-active" : "dak-tab"} type="button" onClick={onClick}>
-      {icon}
-      <span>{label}</span>
-    </button>
-  );
-}
-
-function Panel({ title, children }: { title: string; children: ReactNode }) {
-  return (
-    <section className="dak-panel">
-      <div className="dak-panel-header">
-        <h2 className="dak-panel-title">{title}</h2>
-      </div>
-      <div className="dak-panel-body">{children}</div>
-    </section>
-  );
-}