[ai slop, not humna veirifed] feat(overview): add presentation and comparison controls / 新增总览演示与对比控件

packages/app/cypress/e2e/overview.cy.ts

@@ -158,7 +158,7 @@ describe('Overview page', () => {
     cy.location('search', { timeout: 15_000 }).should('eq', '?tier=75&engine=all');
     cy.window().its('__overviewNavigationSentinel').should('eq', 'preserved');
 
-    cy.get('[data-overview-comparison="history"]').click();
+    cy.get('[data-overview-comparison="30d"]').click();
     cy.wait('@overviewJson');
     cy.location('search', { timeout: 15_000 }).should('eq', '?tier=75&engine=all&compare=30d');
     cy.window().its('__overviewNavigationSentinel').should('eq', 'preserved');
@@ -290,7 +290,7 @@ describe('Overview page', () => {
     cy.get('[data-testid="overview-engine-scope-switcher"]')
       .find('[data-overview-engine-scope="all"]')
       .should('have.attr', 'href', '/overview?engine=all&ref=b300');
-    cy.get('[data-overview-comparison="history"]').should(
+    cy.get('[data-overview-comparison="30d"]').should(
       'have.attr',
       'href',
       '/overview?ref=b300&compare=30d',
@@ -311,14 +311,14 @@ describe('Overview page', () => {
     cy.get('[data-testid="overview-methodology"]').should('contain.text', 'GB200 NVL72 baseline');
   });
 
-  it('switches between B200 and 30-day comparison without losing page state', () => {
+  it('switches among hardware and development-speed windows without losing page state', () => {
     cy.viewport(1280, 900);
     cy.visit('/overview');
 
     cy.get('[data-testid="overview-page"]')
       .children('[data-testid="overview-comparison-switcher"]')
       .should('have.length', 1)
-      .and('have.class', 'justify-center');
+      .and('have.class', 'items-center');
     cy.get('[data-testid="overview-comparison-switcher"]')
       .should('have.attr', 'aria-label', 'Compare')
       .within(() => {
@@ -331,15 +331,21 @@ describe('Overview page', () => {
             expect(style.borderBottomWidth).to.equal('2px');
             expect(style.backgroundColor).to.match(/rgba\(0, 0, 0, 0\)|transparent/);
           });
-        cy.get('[data-overview-comparison="history"]')
+        cy.get('[data-overview-comparison="7d"]')
+          .should('have.attr', 'href', '/overview?compare=7d')
+          .and('have.text', '1 week');
+        cy.get('[data-overview-comparison="60d"]')
+          .should('have.attr', 'href', '/overview?compare=60d')
+          .and('have.text', '2 months');
+        cy.get('[data-overview-comparison="30d"]')
           .should('have.attr', 'href', '/overview?compare=30d')
-          .and('have.text', '30-day change')
+          .and('have.text', '30 days')
           .click();
       });
 
     cy.location('search').should('eq', '?compare=30d');
     cy.get('[data-testid="overview-comparison-switcher"]')
-      .find('[data-overview-comparison="history"]')
+      .find('[data-overview-comparison="30d"]')
       .should('have.attr', 'aria-current', 'true')
       .and('match', 'span');
     cy.get('[data-testid="overview-desktop-matrix"] thead').should('contain.text', 'B200');
@@ -360,14 +366,54 @@ describe('Overview page', () => {
       .should('have.attr', 'aria-label', '对比方式')
       .within(() => {
         cy.get('[data-overview-comparison="hardware"]').should('have.text', '对比 B200');
-        cy.get('[data-overview-comparison="history"]')
+        cy.get('[data-overview-comparison="30d"]')
           .should('have.attr', 'aria-current', 'true')
-          .and('have.text', '30 天变化');
+          .and('have.text', '30 天');
       });
     cy.contains('当前成本及其相对 30–60 天前最近一次有效平台结果的变化。').should('exist');
     cy.contains('缺少有效 30 天对比的平台仅显示当前成本。').should('exist');
   });
 
+  it('customizes platform columns and opens a focused presentation view', () => {
+    cy.viewport(1280, 900);
+    cy.visit('/overview?compare=60d');
+
+    cy.get('[data-testid="overview-hardware-select"]')
+      .should('have.attr', 'aria-label', 'Visible platform columns')
+      .click();
+    cy.contains('[role="option"]', 'B300').click();
+
+    cy.location('search').should('eq', '?compare=60d&hw=b200%2Cmi355x%2Cgb200%2Cgb300');
+    cy.get('[data-testid="overview-desktop-matrix"] thead th').then(($headers) => {
+      expect([...$headers].map((header) => header.textContent?.trim())).to.deep.equal([
+        'Model · Scenario',
+        'B200',
+        'MI355X',
+        'GB200 NVL72',
+        'GB300 NVL72',
+      ]);
+    });
+    cy.get('[data-testid="overview-platform"][data-hardware="b300"]').should('not.exist');
+
+    cy.get('[data-testid="overview-presentation-toggle"]')
+      .should('have.text', 'Presentation view')
+      .click();
+    cy.get('[data-testid="overview-page"]')
+      .should('have.attr', 'data-presentation', 'true')
+      .and('have.class', 'fixed');
+    cy.get('[data-testid="overview-desktop-matrix"]').should('be.visible');
+    cy.get('[data-testid="overview-mobile-list"]').should('not.be.visible');
+    cy.get('body').should('have.css', 'overflow', 'hidden');
+    cy.get('[data-testid="overview-presentation-toggle"]').should(
+      'have.text',
+      'Exit presentation view',
+    );
+
+    cy.get('body').type('{esc}');
+    cy.get('[data-testid="overview-page"]').should('have.attr', 'data-presentation', 'false');
+    cy.get('body').should('not.have.css', 'overflow', 'hidden');
+  });
+
   it('compares each platform with its own validated result from 30–60 days earlier', () => {
     cy.viewport(1280, 900);
     cy.visit('/overview?compare=30d');

packages/app/src/app/(dashboard)/overview/page.tsx

@@ -7,6 +7,8 @@ import { enAlternates } from '@/lib/i18n';
 import {
   resolveOverviewComparisonMode,
   resolveOverviewEngineScope,
+  resolveOverviewHardware,
+  resolveOverviewHistoryDays,
   resolveOverviewModelScope,
   resolveOverviewReferenceHardware,
   resolveOverviewTier,
@@ -47,6 +49,8 @@ export default async function OverviewPage({ searchParams }: Props) {
     resolveOverviewComparisonMode(sp.compare),
     resolveOverviewReferenceHardware(sp.ref),
     resolveOverviewModelScope(sp.models),
+    resolveOverviewHistoryDays(sp.compare),
+    resolveOverviewHardware(sp.hw),
   );
   return <OverviewPageContent data={data} locale="en" />;
 }

packages/app/src/app/api/v1/overview/route.test.ts

@@ -37,12 +37,15 @@ describe('GET /api/v1/overview', () => {
     mockGetOverviewPageData.mockResolvedValueOnce(data);
 
     const response = await GET(
-      request('/api/v1/overview?tier=75&engine=all&compare=30d&ref=b300&models=all'),
+      request('/api/v1/overview?tier=75&engine=all&compare=60d&ref=b300&models=all&hw=b300,gb300'),
     );
 
     expect(response.status).toBe(200);
     expect(await response.json()).toEqual(data);
-    expect(mockGetOverviewPageData).toHaveBeenCalledWith(75, 'all', 'history', 'b300', 'all');
+    expect(mockGetOverviewPageData).toHaveBeenCalledWith(75, 'all', 'history', 'b300', 'all', 60, [
+      'b300',
+      'gb300',
+    ]);
     expect(mockCachedJson).toHaveBeenCalledWith(data);
   });
 
@@ -59,6 +62,8 @@ describe('GET /api/v1/overview', () => {
       'hardware',
       'b200',
       'default',
+      30,
+      ['b200', 'mi355x', 'b300', 'gb200', 'gb300'],
     );
   });
 

packages/app/src/app/api/v1/overview/route.ts

@@ -4,6 +4,8 @@ import { cachedJson } from '@/lib/api-cache';
 import {
   resolveOverviewComparisonMode,
   resolveOverviewEngineScope,
+  resolveOverviewHardware,
+  resolveOverviewHistoryDays,
   resolveOverviewModelScope,
   resolveOverviewReferenceHardware,
   resolveOverviewTier,
@@ -22,6 +24,8 @@ export async function GET(request: NextRequest) {
       resolveOverviewComparisonMode(params.get('compare') ?? undefined),
       resolveOverviewReferenceHardware(params.get('ref') ?? undefined),
       resolveOverviewModelScope(params.get('models') ?? undefined),
+      resolveOverviewHistoryDays(params.get('compare') ?? undefined),
+      resolveOverviewHardware(params.get('hw') ?? undefined),
     );
     return cachedJson(data);
   } catch (error) {

packages/app/src/app/zh/(dashboard)/overview/page.tsx

@@ -7,6 +7,8 @@ import { ZH_OG_LOCALE, zhAlternates } from '@/lib/i18n';
 import {
   resolveOverviewComparisonMode,
   resolveOverviewEngineScope,
+  resolveOverviewHardware,
+  resolveOverviewHistoryDays,
   resolveOverviewModelScope,
   resolveOverviewReferenceHardware,
   resolveOverviewTier,
@@ -48,6 +50,8 @@ export default async function ZhOverviewPage({ searchParams }: Props) {
     resolveOverviewComparisonMode(sp.compare),
     resolveOverviewReferenceHardware(sp.ref),
     resolveOverviewModelScope(sp.models),
+    resolveOverviewHistoryDays(sp.compare),
+    resolveOverviewHardware(sp.hw),
   );
   return <OverviewPageContent data={data} locale="zh" />;
 }

packages/app/src/components/overview/overview-hardware-select.tsx

@@ -0,0 +1,83 @@
+'use client';
+
+import { MultiSelect } from '@/components/ui/multi-select';
+import { track } from '@/lib/analytics';
+import {
+  OVERVIEW_HARDWARE,
+  overviewHardwareLabel,
+  type OverviewComparisonMode,
+  type OverviewEngineScope,
+  type OverviewHardware,
+  type OverviewHistoryDays,
+  type OverviewModelScope,
+  type OverviewReferenceHardware,
+  type OverviewTier,
+} from '@/lib/overview-data';
+import { overviewHref } from '@/lib/overview-links';
+
+import { useOverviewNavigation } from './overview-navigation';
+import type { OverviewLocale } from './overview-scorecard';
+
+export function OverviewHardwareSelect({
+  locale,
+  tier,
+  engineScope,
+  comparisonMode,
+  referenceHardware,
+  modelScope,
+  historyDays,
+  value,
+  ariaLabel,
+}: {
+  locale: OverviewLocale;
+  tier: OverviewTier;
+  engineScope: OverviewEngineScope;
+  comparisonMode: OverviewComparisonMode;
+  referenceHardware: OverviewReferenceHardware;
+  modelScope: OverviewModelScope;
+  historyDays: OverviewHistoryDays;
+  value: OverviewHardware[];
+  ariaLabel: string;
+}) {
+  const navigation = useOverviewNavigation();
+  const options = OVERVIEW_HARDWARE.map((hardware) => ({
+    value: hardware,
+    label: overviewHardwareLabel(hardware),
+  }));
+
+  return (
+    <div>
+      <MultiSelect
+        triggerTestId="overview-hardware-select"
+        ariaLabel={ariaLabel}
+        options={options}
+        value={value}
+        minSelections={1}
+        showClearAll={false}
+        searchable={false}
+        plainSelectedText
+        showSelectionSummary={false}
+        size="sm"
+        className="min-h-11 min-w-56"
+        onChange={(nextValues) => {
+          const selected = OVERVIEW_HARDWARE.filter((hardware) => nextValues.includes(hardware));
+          const href = overviewHref(
+            locale,
+            tier,
+            engineScope,
+            comparisonMode,
+            referenceHardware,
+            modelScope,
+            historyDays,
+            selected,
+          );
+          track('overview_selector_changed', {
+            control: 'hardware',
+            value: selected.join(','),
+          });
+          navigation.push(href, ['hw']);
+        }}
+      />
+    </div>
+  );
+}

packages/app/src/components/overview/overview-navigation.test.tsx

@@ -30,6 +30,8 @@ function pageData(tier: OverviewTier): OverviewPageData {
     comparisonMode: 'hardware',
     referenceHardware: 'b200',
     modelScope: 'default',
+    historyDays: 30,
+    visibleHardware: ['b200', 'mi355x', 'b300', 'gb200', 'gb300'],
     historicalWindow: null,
   };
 }