dashboard-design

这段内容是审核时保存的快照。外部来源才是完整且最新的版本。

---
name: dashboard-design
description: Design effective dashboards with clear layouts, KPI displays, data grids, and real-time updates. Covers dashboard patterns, information hierarchy, responsive grids, widget design, and admin panel layouts. Use for building analytics dashboards, admin interfaces, and monitoring displays.
---

# Dashboard Design

Create effective dashboards that present data clearly and enable quick decision-making.

## Instructions

1. **Prioritize key metrics** - Most important KPIs should be immediately visible
2. **Use consistent card layouts** - Establish a grid system and stick to it
3. **Design for scanning** - Users should grasp status at a glance
4. **Enable drill-down** - Summary to detail progression
5. **Consider real-time needs** - Update frequencies and loading states

## Dashboard Layout Patterns

### KPI Cards

```tsx
interface KPICardProps {
  title: string;
  value: string | number;
  change?: number;
  changeLabel?: string;
  icon?: React.ReactNode;
}

function KPICard({ title, value, change, changeLabel, icon }: KPICardProps) {
  const isPositive = change && change > 0;
  const isNegative = change && change < 0;

  return (
    <div className="bg-white rounded-lg shadow p-6">
      <div className="flex items-center justify-between">
        <span className="text-sm font-medium text-gray-500">{title}</span>
        {icon && <span className="text-gray-400">{icon}</span>}
      </div>
      <div className="mt-2">
        <span className="text-3xl font-bold text-gray-900">{value}</span>
      </div>
      {change !== undefined && (
        <div className="mt-2 flex items-center">
          <span
            className={`text-sm font-medium ${
              isPositive ? 'text-green-600' : isNegative ? 'text-red-600' : 'text-gray-500'
            }`}
          >
            {isPositive && '+'}
            {change}%
          </span>
          {changeLabel && (
            <span className="ml-2 text-sm text-gray-500">{changeLabel}</span>
          )}
        </div>
      )}
    </div>
  );
}
```

### Dashboard Grid

```tsx
function DashboardLayout({ children }: { children: React.ReactNode }) {
  return (
    <div className="min-h-screen bg-gray-100">
      {/* Header */}
      <header className="bg-white shadow-sm">
        <div className="max-w-7xl mx-auto px-4 py-4 flex items-center justify-between">
          <h1 className="text-2xl font-bold text-gray-900">Dashboard</h1>
          <div className="flex items-center gap-4">
            <DateRangePicker />
            <RefreshButton />
          </div>
        </div>
      </header>

      {/* Main Content */}
      <main className="max-w-7xl mx-auto px-4 py-6">
        {/* KPI Row */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
          <KPICard title="Total Revenue" value="$45,231" change={12.5} changeLabel="vs last month" />
          <KPICard title="Orders" value="1,234" change={-2.3} changeLabel="vs last month" />
          <KPICard title="Customers" value="5,678" change={8.1} changeLabel="vs last month" />
          <KPICard title="Avg. Order" value="$36.70" change={4.2} changeLabel="vs last month" />
        </div>

        {/* Charts Row */}
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
          <ChartCard title="Revenue Over Time">
            <RevenueChart />
          </ChartCard>
          <ChartCard title="Sales by Category">
            <CategoryChart />
          </ChartCard>
        </div>

        {/* Table Section */}
        <div className="bg-white rounded-lg shadow">
          <DataTable />
        </div>
      </main>
    </div>
  );
}
```

### Chart Card Component

```tsx
interface ChartCardProps {
  title: string;
  subtitle?: string;
  action?: React.ReactNode;
  children: React.ReactNode;
}

function ChartCard({ title, subtitle, action, children }: ChartCardProps) {
  return (
    <div className="bg-white rounded-lg shadow">
      <div className="px-6 py-