Back to Details

creating-dashboards

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Creating Dashboards

仪表盘创建指南

Purpose

用途

This skill enables the creation of sophisticated dashboard interfaces that aggregate and present data through coordinated widgets including KPI cards, charts, tables, and filters. Dashboards serve as centralized command centers for data-driven decision making, combining multiple component types from other skills (data-viz, tables, design-tokens) into unified analytics experiences with real-time updates, responsive layouts, and interactive filtering.
此技能可用于创建复杂的仪表盘界面，通过KPI卡片、图表、表格和筛选器等协同组件聚合并展示数据。仪表盘作为数据驱动决策的集中指挥中心，将其他技能（data-viz、tables、design-tokens）中的多种组件类型整合为统一的分析体验，具备实时更新、响应式布局和交互式筛选功能。

When to Use

适用场景

Activate this skill when:
  • Building business intelligence or analytics dashboards
  • Creating executive reporting interfaces
  • Implementing real-time monitoring systems
  • Designing KPI displays with metrics and trends
  • Developing customizable widget-based layouts
  • Coordinating filters across multiple data displays
  • Building responsive data-heavy interfaces
  • Implementing drag-and-drop dashboard editors
  • Creating template-based analytics systems
  • Designing multi-tenant SaaS dashboards
在以下场景中启用此技能：
  • 构建商业智能或分析仪表盘
  • 创建高管报告界面
  • 实现实时监控系统
  • 设计包含指标与趋势的KPI展示
  • 开发基于可自定义组件的布局
  • 实现跨多个数据展示组件的筛选器协同
  • 构建数据密集型响应式界面
  • 实现拖拽式仪表盘编辑器
  • 创建基于模板的分析系统
  • 设计多租户SaaS仪表盘

Core Dashboard Elements

仪表盘核心元素

KPI Card Anatomy

KPI卡片结构

┌────────────────────────────┐
│ Revenue (This Month)       │ ← Label with time period
│                            │
│  $1,245,832               │ ← Big number (primary metric)
│  ↑ 15.3% vs last month    │ ← Trend indicator with comparison
│  ▂▃▅▆▇█ (sparkline)       │ ← Mini visualization
└────────────────────────────┘
┌────────────────────────────┐
│ Revenue (This Month)       │ ← 带时间周期的标签
│                            │
│  $1,245,832               │ ← 主指标大数字
│  ↑ 15.3% vs last month    │ ← 带对比的趋势指示器
│  ▂▃▅▆▇█ (sparkline)       │ ← 迷你可视化图
└────────────────────────────┘

Widget Container Structure

组件容器结构

  • Title bar with widget name and actions
  • Loading state (skeleton or spinner)
  • Error boundary with retry option
  • Resize handles for adjustable layouts
  • Settings menu (export, configure, refresh)
  • 包含组件名称与操作按钮的标题栏
  • 加载状态（骨架屏或加载动画）
  • 带重试选项的错误边界
  • 用于调整布局的缩放手柄
  • 设置菜单（导出、配置、刷新）

Dashboard Layout Types

仪表盘布局类型

Fixed Layout: Designer-defined placement, consistent across users Customizable Grid: User drag-and-drop, resizable widgets, saved layouts Template-Based: Pre-built patterns, industry-specific starting points
固定布局：由设计师定义组件位置，在所有用户端保持一致 可自定义网格布局：支持用户拖拽调整、组件缩放，可保存布局 基于模板的布局：预构建的模式，提供行业特定的起始模板

Global Dashboard Controls

全局仪表盘控制

  • Date range picker (affects all widgets)
  • Filter panel (coordinated across widgets)
  • Refresh controls (manual/auto-refresh)
  • Export actions (PDF, image, data)
  • Theme switcher (light/dark/custom)
  • 日期范围选择器（影响所有组件）
  • 筛选面板（跨组件协同）
  • 刷新控制（手动/自动刷新）
  • 导出功能（PDF、图片、数据）
  • 主题切换器（亮色/暗色/自定义）

Implementation Approach

实现方案

1. Choose Dashboard Architecture

1. 选择仪表盘架构

For Quick Analytics Dashboard → Use Tremor Pre-built KPI cards, charts, and tables with minimal code:
bash
npm install @tremor/react
For Customizable Dashboard → Use react-grid-layout Drag-and-drop, resizable widgets, user-defined layouts:
bash
npm install react-grid-layout
快速构建分析仪表盘 → 使用Tremor 预构建的KPI卡片、图表和表格，代码量极少：
bash
npm install @tremor/react
构建可自定义仪表盘 → 使用react-grid-layout 支持拖拽、组件缩放、用户自定义布局：
bash
npm install react-grid-layout

2. Set Up Global State Management

2. 搭建全局状态管理

Implement filter context for cross-widget coordination:
tsx
// Dashboard context for shared filters
const DashboardContext = createContext({
  filters: { dateRange: null, categories: [] },
  setFilters: () => {},
  refreshInterval: 30000
});

// Wrap dashboard with provider
<DashboardContext.Provider value={dashboardState}>
  <FilterPanel />
  <WidgetGrid />
</DashboardContext.Provider>
实现筛选器上下文以支持跨组件协同：
tsx
// 用于共享筛选器的仪表盘上下文
const DashboardContext = createContext({
  filters: { dateRange: null, categories: [] },
  setFilters: () => {},
  refreshInterval: 30000
});

// 使用Provider包裹仪表盘
<DashboardContext.Provider value={dashboardState}>
  <FilterPanel />
  <WidgetGrid />
</DashboardContext.Provider>

3. Implement Data Fetching Strategy

3. 实现数据获取策略

Parallel Loading: Fetch all widget data simultaneously Lazy Loading: Load visible widgets first, others on scroll Cached Updates: Serve from cache while fetching fresh data
并行加载：同时获取所有组件的数据 懒加载：先加载可见组件，其余组件在滚动时加载 缓存更新：在获取新数据时先从缓存返回数据

4. Configure Real-Time Updates

4. 配置实时更新

Server-Sent Events (Recommended for Dashboards):
tsx
const eventSource = new EventSource('/api/dashboard/stream');
eventSource.onmessage = (event) => {
  const update = JSON.parse(event.data);
  updateWidget(update.widgetId, update.data);
};
Server-Sent Events（仪表盘推荐方案）：
tsx
const eventSource = new EventSource('/api/dashboard/stream');
eventSource.onmessage = (event) => {
  const update = JSON.parse(event.data);
  updateWidget(update.widgetId, update.data);
};

5. Apply Responsive Design

5. 应用响应式设计

Define breakpoints for different screen sizes:
  • Desktop (>1200px): Multi-column grid
  • Tablet (768-1200px): 2-column layout
  • Mobile (<768px): Single column stack
为不同屏幕尺寸定义断点：
  • 桌面端（>1200px）：多列网格
  • 平板端（768-1200px）：2列布局
  • 移动端（<768px）：单列堆叠

Quick Start with Tremor

基于Tremor的快速入门

Basic KPI Dashboard

基础KPI仪表盘

tsx
import { Card, Grid, Metric, Text, BadgeDelta, AreaChart } from '@tremor/react';

function QuickDashboard({ data }) {
  return (
    <Grid numItems={1} numItemsSm={2} numItemsLg={4} className="gap-4">
      {/* KPI Cards */}
      <Card>
        <Text>Total Revenue</Text>
        <Metric>$45,231.89</Metric>
        <BadgeDelta deltaType="increase">+12.5%</BadgeDelta>
      </Card>

      <Card>
        <Text>Active Users</Text>
        <Metric>1,234</Metric>
        <BadgeDelta deltaType="decrease">-2.3%</BadgeDelta>
      </Card>

      {/* Chart Widget */}
      <Card className="lg:col-span-2">
        <Text>Revenue Trend</Text>
        <AreaChart
          data={data.revenue}
          index="date"
          categories={["revenue"]}
          valueFormatter={(value) => `$${value.toLocaleString()}`}
        />
      </Card>
    </Grid>
  );
}
For complete implementation, see 
examples/tremor-dashboard.tsx
.
tsx
import { Card, Grid, Metric, Text, BadgeDelta, AreaChart } from '@tremor/react';

function QuickDashboard({ data }) {
  return (
    <Grid numItems={1} numItemsSm={2} numItemsLg={4} className="gap-4">
      {/* KPI卡片 */}
      <Card>
        <Text>总营收</Text>
        <Metric>$45,231.89</Metric>
        <BadgeDelta deltaType="increase">+12.5%</BadgeDelta>
      </Card>

      <Card>
        <Text>活跃用户数</Text>
        <Metric>1,234</Metric>
        <BadgeDelta deltaType="decrease">-2.3%</BadgeDelta>
      </Card>

      {/* 图表组件 */}
      <Card className="lg:col-span-2">
        <Text>营收趋势</Text>
        <AreaChart
          data={data.revenue}
          index="date"
          categories={["revenue"]}
          valueFormatter={(value) => `$${value.toLocaleString()}`}
        />
      </Card>
    </Grid>
  );
}
完整实现示例请查看 
examples/tremor-dashboard.tsx
。

Customizable Dashboard Implementation

可自定义仪表盘实现

Drag-and-Drop Grid Layout

拖拽式网格布局

tsx
import { Responsive, WidthProvider } from 'react-grid-layout';
import 'react-grid-layout/css/styles.css';

const ResponsiveGridLayout = WidthProvider(Responsive);

function CustomizableDashboard() {
  const [layouts, setLayouts] = useState(getStoredLayouts());

  return (
    <ResponsiveGridLayout
      layouts={layouts}
      breakpoints={{ lg: 1200, md: 996, sm: 768 }}
      cols={{ lg: 12, md: 10, sm: 6 }}
      rowHeight={60}
      onLayoutChange={(layout, layouts) => {
        setLayouts(layouts);
        localStorage.setItem('dashboardLayout', JSON.stringify(layouts));
      }}
      draggableHandle=".widget-header"
    >
      <div key="kpi1">
        <KPIWidget data={kpiData} />
      </div>
      <div key="chart1">
        <ChartWidget data={chartData} />
      </div>
      <div key="table1">
        <TableWidget data={tableData} />
      </div>
    </ResponsiveGridLayout>
  );
}
For full example with widget catalog, see 
examples/customizable-dashboard.tsx
.
tsx
import { Responsive, WidthProvider } from 'react-grid-layout';
import 'react-grid-layout/css/styles.css';

const ResponsiveGridLayout = WidthProvider(Responsive);

function CustomizableDashboard() {
  const [layouts, setLayouts] = useState(getStoredLayouts());

  return (
    <ResponsiveGridLayout
      layouts={layouts}
      breakpoints={{ lg: 1200, md: 996, sm: 768 }}
      cols={{ lg: 12, md: 10, sm: 6 }}
      rowHeight={60}
      onLayoutChange={(layout, layouts) => {
        setLayouts(layouts);
        localStorage.setItem('dashboardLayout', JSON.stringify(layouts));
      }}
      draggableHandle=".widget-header"
    >
      <div key="kpi1">
        <KPIWidget data={kpiData} />
      </div>
      <div key="chart1">
        <ChartWidget data={chartData} />
      </div>
      <div key="table1">
        <TableWidget data={tableData} />
      </div>
    </ResponsiveGridLayout>
  );
}
包含组件库的完整示例请查看 
examples/customizable-dashboard.tsx
。

Real-Time Data Patterns

实时数据模式

Server-Sent Events (Recommended)

Server-Sent Events（推荐方案）

Best for unidirectional updates from server to dashboard:
tsx
function useSSEUpdates(endpoint) {
  useEffect(() => {
    const eventSource = new EventSource(endpoint);

    eventSource.onmessage = (event) => {
      const update = JSON.parse(event.data);
      // Update specific widget or all widgets
      dispatch({ type: 'UPDATE_WIDGET', payload: update });
    };

    return () => eventSource.close();
  }, [endpoint]);
}
最适合从服务器到仪表盘的单向更新：
tsx
function useSSEUpdates(endpoint) {
  useEffect(() => {
    const eventSource = new EventSource(endpoint);

    eventSource.onmessage = (event) => {
      const update = JSON.parse(event.data);
      // 更新单个或所有组件
      dispatch({ type: 'UPDATE_WIDGET', payload: update });
    };

    return () => eventSource.close();
  }, [endpoint]);
}

WebSocket (For Bidirectional)

WebSocket（双向通信场景）

Use when dashboard needs to send commands back to server:
tsx
const ws = new WebSocket('ws://localhost:3000/dashboard');
ws.onmessage = (event) => {
  const data = JSON.parse(event.data);
  updateDashboard(data);
};
// Send filter changes to server
ws.send(JSON.stringify({ type: 'FILTER_CHANGE', filters }));
当仪表盘需要向服务器发送指令时使用：
tsx
const ws = new WebSocket('ws://localhost:3000/dashboard');
ws.onmessage = (event) => {
  const data = JSON.parse(event.data);
  updateDashboard(data);
};
// 向服务器发送筛选器变更
ws.send(JSON.stringify({ type: 'FILTER_CHANGE', filters }));

Smart Polling Fallback

智能轮询降级方案

For environments without WebSocket/SSE support:
tsx
function useSmartPolling(fetchData, interval = 30000) {
  const [isPaused, setIsPaused] = useState(false);

  useEffect(() => {
    if (isPaused || document.hidden) return;

    const timer = setInterval(fetchData, interval);
    return () => clearInterval(timer);
  }, [isPaused, interval]);

  // Pause when tab inactive
  useEffect(() => {
    const handleVisibilityChange = () => {
      setIsPaused(document.hidden);
    };
    document.addEventListener('visibilitychange', handleVisibilityChange);
    return () => document.removeEventListener('visibilitychange', handleVisibilityChange);
  }, []);
}
For detailed patterns including error handling and reconnection, see 
references/real-time-updates.md
.
适用于不支持WebSocket/SSE的环境：
tsx
function useSmartPolling(fetchData, interval = 30000) {
  const [isPaused, setIsPaused] = useState(false);

  useEffect(() => {
    if (isPaused || document.hidden) return;

    const timer = setInterval(fetchData, interval);
    return () => clearInterval(timer);
  }, [isPaused, interval]);

  // 标签页非活跃时暂停轮询
  useEffect(() => {
    const handleVisibilityChange = () => {
      setIsPaused(document.hidden);
    };
    document.addEventListener('visibilitychange', handleVisibilityChange);
    return () => document.removeEventListener('visibilitychange', handleVisibilityChange);
  }, []);
}
有关错误处理和重连的详细模式，请查看 
references/real-time-updates.md
。

Performance Optimization

性能优化

Lazy Loading Strategy

懒加载策略

tsx
function DashboardGrid({ widgets }) {
  const [visibleWidgets, setVisibleWidgets] = useState(new Set());

  return widgets.map(widget => (
    <LazyLoad
      key={widget.id}
      height={widget.height}
      offset={100}
      once
      placeholder={<WidgetSkeleton />}
    >
      <Widget {...widget} />
    </LazyLoad>
  ));
}
tsx
function DashboardGrid({ widgets }) {
  const [visibleWidgets, setVisibleWidgets] = useState(new Set());

  return widgets.map(widget => (
    <LazyLoad
      key={widget.id}
      height={widget.height}
      offset={100}
      once
      placeholder={<WidgetSkeleton />}
    >
      <Widget {...widget} />
    </LazyLoad>
  ));
}

Parallel Data Fetching

并行数据获取

tsx
// Fetch all widget data simultaneously
const loadDashboard = async () => {
  const [kpis, charts, tables] = await Promise.all([
    fetchKPIs(),
    fetchChartData(),
    fetchTableData()
  ]);

  return { kpis, charts, tables };
};
tsx
// 同时获取所有组件的数据
const loadDashboard = async () => {
  const [kpis, charts, tables] = await Promise.all([
    fetchKPIs(),
    fetchChartData(),
    fetchTableData()
  ]);

  return { kpis, charts, tables };
};

Widget-Level Caching

组件级缓存

tsx
function CachedWidget({ id, fetcher, ttl = 60000 }) {
  const cache = useRef({ data: null, timestamp: 0 });

  const getData = async () => {
    const now = Date.now();
    if (cache.current.data && now - cache.current.timestamp < ttl) {
      return cache.current.data;
    }

    const fresh = await fetcher();
    cache.current = { data: fresh, timestamp: now };
    return fresh;
  };

  // Use cached data while fetching fresh
  return <Widget data={cache.current.data} onRefresh={getData} />;
}
To analyze and optimize dashboard performance, run:
bash
python scripts/optimize-dashboard-performance.py --analyze dashboard-config.json
tsx
function CachedWidget({ id, fetcher, ttl = 60000 }) {
  const cache = useRef({ data: null, timestamp: 0 });

  const getData = async () => {
    const now = Date.now();
    if (cache.current.data && now - cache.current.timestamp < ttl) {
      return cache.current.data;
    }

    const fresh = await fetcher();
    cache.current = { data: fresh, timestamp: now };
    return fresh;
  };

  // 获取新数据时先使用缓存数据
  return <Widget data={cache.current.data} onRefresh={getData} />;
}
要分析并优化仪表盘性能，请运行：
bash
python scripts/optimize-dashboard-performance.py --analyze dashboard-config.json

Cross-Skill Integration

跨技能集成

Using Data Visualization Components

使用数据可视化组件

Reference the 
data-viz
skill for chart widgets:
tsx
// Use charts from data-viz skill
import { createChart } from '../data-viz/chart-factory';

const revenueChart = createChart('area', {
  data: revenueData,
  xAxis: 'date',
  yAxis: 'revenue',
  theme: dashboardTheme
});
参考
data-viz
技能获取图表组件：
tsx
// 使用data-viz技能中的图表
import { createChart } from '../data-viz/chart-factory';

const revenueChart = createChart('area', {
  data: revenueData,
  xAxis: 'date',
  yAxis: 'revenue',
  theme: dashboardTheme
});

Integrating Data Tables

集成数据表格

Reference the 
tables
skill for data grids:
tsx
// Use advanced tables from tables skill
import { DataGrid } from '../tables/data-grid';

<DataGrid
  data={transactions}
  columns={columnDefs}
  pagination={true}
  sorting={true}
  filtering={true}
/>
参考
tables
技能获取数据网格：
tsx
// 使用tables技能中的高级表格
import { DataGrid } from '../tables/data-grid';

<DataGrid
  data={transactions}
  columns={columnDefs}
  pagination={true}
  sorting={true}
  filtering={true}
/>

Applying Design Tokens

应用设计令牌

Use the 
design-tokens
skill for consistent theming:
tsx
// Dashboard-specific tokens from design-tokens skill
const dashboardTokens = {
  '--dashboard-bg': 'var(--color-bg-secondary)',
  '--widget-bg': 'var(--color-white)',
  '--widget-shadow': 'var(--shadow-lg)',
  '--kpi-value-size': 'var(--font-size-4xl)',
  '--kpi-trend-positive': 'var(--color-success)',
  '--kpi-trend-negative': 'var(--color-error)'
};
使用
design-tokens
技能实现一致的主题：
tsx
// 来自design-tokens技能的仪表盘专属令牌
const dashboardTokens = {
  '--dashboard-bg': 'var(--color-bg-secondary)',
  '--widget-bg': 'var(--color-white)',
  '--widget-shadow': 'var(--shadow-lg)',
  '--kpi-value-size': 'var(--font-size-4xl)',
  '--kpi-trend-positive': 'var(--color-success)',
  '--kpi-trend-negative': 'var(--color-error)'
};

Filter Input Components

筛选器输入组件

Optionally use the 
forms
skill for filter controls:
tsx
// Advanced filter inputs from forms skill
import { DateRangePicker, MultiSelect } from '../forms/inputs';

<FilterPanel>
  <DateRangePicker onChange={handleDateChange} />
  <MultiSelect options={categories} onChange={handleCategoryFilter} />
</FilterPanel>
可选择使用
forms
技能中的筛选控件：
tsx
// 使用forms技能中的高级筛选输入框
import { DateRangePicker, MultiSelect } from '../forms/inputs';

<FilterPanel>
  <DateRangePicker onChange={handleDateChange} />
  <MultiSelect options={categories} onChange={handleCategoryFilter} />
</FilterPanel>

Library Selection Guide

库选择指南

Choose Tremor When:

选择Tremor的场景：

  • Need to build dashboards quickly
  • Want pre-styled, professional components
  • Using Tailwind CSS in your project
  • Building standard analytics interfaces
  • Limited customization requirements
  • 需要快速构建仪表盘
  • 想要预样式化的专业组件
  • 项目中使用Tailwind CSS
  • 构建标准分析界面
  • 自定义需求有限

Choose react-grid-layout When:

选择react-grid-layout的场景：

  • Users need to customize layouts
  • Drag-and-drop is required
  • Different users need different views
  • Building a dashboard builder tool
  • Maximum flexibility is priority
  • 用户需要自定义布局
  • 需要拖拽功能
  • 不同用户需要不同视图
  • 构建仪表盘生成工具
  • 优先考虑最大灵活性

Combine Both When:

同时使用两者的场景：

  • Use Tremor for widget contents (KPIs, charts)
  • Use react-grid-layout for layout management
  • Get best of both worlds
  • 使用Tremor开发组件内容（KPI、图表）
  • 使用react-grid-layout管理布局
  • 兼顾两者优势

Bundled Resources

配套资源

Scripts (Token-Free Execution)

脚本（无需令牌即可执行）

  • scripts/generate-dashboard-layout.py
    - Generate responsive grid configurations
  • scripts/calculate-kpi-metrics.py
    - Calculate trends, comparisons, sparklines
  • scripts/validate-widget-config.py
    - Validate widget and filter configurations
  • scripts/optimize-dashboard-performance.py
    - Analyze and optimize performance
  • scripts/export-dashboard.py
    - Export dashboards to various formats
Run scripts directly without loading into context:
bash
python scripts/calculate-kpi-metrics.py --data metrics.json --period monthly
  • scripts/generate-dashboard-layout.py
    - 生成响应式网格配置
  • scripts/calculate-kpi-metrics.py
    - 计算趋势、对比数据和迷你走势图
  • scripts/validate-widget-config.py
    - 验证组件和筛选器配置
  • scripts/optimize-dashboard-performance.py
    - 分析并优化性能
  • scripts/export-dashboard.py
    - 将仪表盘导出为多种格式
直接运行脚本无需加载上下文：
bash
python scripts/calculate-kpi-metrics.py --data metrics.json --period monthly

References (Detailed Patterns)

参考文档（详细模式）

  • references/kpi-card-patterns.md
    - KPI card design patterns and variations
  • references/layout-strategies.md
    - Grid systems and responsive approaches
  • references/real-time-updates.md
    - WebSocket, SSE, and polling implementations
  • references/filter-coordination.md
    - Cross-widget filter synchronization
  • references/performance-optimization.md
    - Advanced optimization techniques
  • references/library-guide.md
    - Detailed Tremor and react-grid-layout guides
  • references/kpi-card-patterns.md
    - KPI卡片设计模式与变体
  • references/layout-strategies.md
    - 网格系统与响应式方案
  • references/real-time-updates.md
    - WebSocket、SSE和轮询实现
  • references/filter-coordination.md
    - 跨组件筛选器同步
  • references/performance-optimization.md
    - 高级优化技巧
  • references/library-guide.md
    - Tremor与react-grid-layout详细指南

Examples (Complete Implementations)

示例（完整实现）

  • examples/sales-dashboard.tsx
    - Full sales analytics dashboard
  • examples/monitoring-dashboard.tsx
    - Real-time monitoring with alerts
  • examples/executive-dashboard.tsx
    - Polished executive reporting
  • examples/customizable-dashboard.tsx
    - Drag-and-drop with persistence
  • examples/tremor-dashboard.tsx
    - Quick Tremor implementation
  • examples/filter-context.tsx
    - Global filter coordination
  • examples/sales-dashboard.tsx
    - 完整的销售分析仪表盘
  • examples/monitoring-dashboard.tsx
    - 带告警的实时监控仪表盘
  • examples/executive-dashboard.tsx
    - 精致的高管报告仪表盘
  • examples/customizable-dashboard.tsx
    - 带持久化功能的拖拽式仪表盘
  • examples/tremor-dashboard.tsx
    - Tremor快速实现示例
  • examples/filter-context.tsx
    - 全局筛选器协同示例

Assets (Templates & Configurations)

资源文件（模板与配置）

  • assets/dashboard-templates.json
    - Pre-built dashboard layouts
  • assets/widget-library.json
    - Widget catalog and configurations
  • assets/grid-layouts.json
    - Responsive grid configurations
  • assets/kpi-formats.json
    - Number formatting rules
  • assets/theme-tokens.json
    - Dashboard-specific design tokens
  • assets/dashboard-templates.json
    - 预构建仪表盘布局
  • assets/widget-library.json
    - 组件库与配置
  • assets/grid-layouts.json
    - 响应式网格配置
  • assets/kpi-formats.json
    - 数字格式化规则
  • assets/theme-tokens.json
    - 仪表盘专属设计令牌

Dashboard Creation Workflow

仪表盘创建工作流

  1. Define Requirements: Fixed or customizable? Real-time or static?
  2. Choose Libraries: Tremor for quick, react-grid-layout for flexible
  3. Set Up Structure: Global state, filter context, layout system
  4. Build Widgets: KPI cards, charts (data-viz), tables (tables skill)
  5. Implement Data Flow: Fetching strategy, caching, updates
  6. Add Interactivity: Filters, drill-downs, exports
  7. Optimize Performance: Lazy loading, parallel fetching, caching
  8. Apply Theming: Use design-tokens for consistent styling
  9. Test Responsiveness: Desktop, tablet, mobile breakpoints
  10. Deploy & Monitor: Track performance, user engagement
For specific patterns and detailed implementations, explore the bundled resources referenced above.
  1. 需求定义：固定布局还是可自定义布局？实时还是静态数据？
  2. 库选择：快速构建选Tremor，灵活布局选react-grid-layout
  3. 结构搭建：全局状态、筛选器上下文、布局系统
  4. 组件开发：KPI卡片、图表（data-viz）、表格（tables技能）
  5. 数据流实现：数据获取策略、缓存、更新机制
  6. 添加交互：筛选器、钻取功能、导出功能
  7. 性能优化：懒加载、并行获取、缓存
  8. 主题应用：使用design-tokens实现一致样式
  9. 响应式测试：桌面、平板、移动端断点测试
  10. 部署与监控：跟踪性能、用户参与度
如需特定模式和详细实现，请探索上述配套资源。