用途
creating-dashboards 用于创建复杂的仪表盘界面，通过协调的部件（KPI 卡片、图表、表格、过滤器）聚合和呈现数据。仪表盘是数据驱动决策的集中指挥中心，将来自其他技能（data-viz、tables、design-tokens）的多种组件类型组合为统一的、带实时更新、响应式布局和交互式筛选的分析体验。
适用场景包括：构建商业智能或分析仪表盘、创建高管报告界面、实现实时监控系统、设计带指标和趋势的 KPI 展示、开发可定制的基于部件的布局、协调跨多个数据显示的过滤器、构建响应式数据密集型界面、实现拖拽式仪表盘编辑器、创建基于模板的分析系统、设计多租户 SaaS 仪表盘。
核心仪表盘元素
KPI 卡片结构包含：带时间周期的标签、大号主指标数字、带对比的趋势指示、迷你可视化（sparkline）。
部件容器结构包含：带部件名称和操作的标题栏、加载状态（骨架屏或旋转器）、带重试选项的错误边界、用于调整布局的尺寸手柄、设置菜单（导出、配置、刷新）。
仪表盘布局类型：固定布局（设计者定义放置位置，各用户一致）、可定制网格（用户拖拽、可调整部件大小、保存布局）、基于模板（预置模式、行业特定起点）。
全局仪表盘控件：日期范围选择器（影响所有部件）、过滤器面板（跨部件协调）、刷新控件（手动/自动刷新）、导出操作（PDF、图像、数据）、主题切换器（浅色/深色/自定义）。
实现方式
第一步，选择仪表盘架构。快速分析仪表盘可使用 Tremor，提供预置 KPI 卡片、图表和表格，代码量少，安装命令为 npm install @tremor/react。可定制仪表盘可使用 react-grid-layout，支持拖拽、可调整部件大小、用户自定义布局，安装命令为 npm install react-grid-layout。
第二步，设置全局状态管理。实现用于跨部件协调的过滤器上下文。
第三步，实现数据获取策略。可选并行加载（同时获取所有部件数据）、懒加载（先加载可见部件，滚动时加载其余）、缓存更新（先提供缓存再获取新数据）。
第四步，配置实时更新。服务器发送事件（推荐用于仪表盘），或使用 WebSocket（双向通信），或以智能轮询作为降级方案。
第五步，应用响应式设计。定义断点：桌面端（>1200px）多列网格，平板端（768-1200px）双列布局，移动端（<768px）单列堆叠。
快速开始（Tremor）
使用 Tremor 的 Card、Grid、Metric、Text、BadgeDelta、AreaChart 等组件可快速搭建 KPI 仪表盘。完整实现参见 examples/tremor-dashboard.tsx。
可定制仪表盘实现
使用 react-grid-layout 的 Responsive 与 WidthProvider 组件，结合 layouts 状态和 localStorage 持久化，实现支持拖拽和调整大小的仪表盘。完整示例（含部件目录）参见 examples/customizable-dashboard.tsx。
实时数据模式
服务器发送事件（推荐）：适用于从服务器到仪表的单向更新。WebSocket：适用于仪表盘需要向服务器发送命令的场景。智能轮询降级：适用于不支持 WebSocket/SSE 的环境，标签页不活跃时暂停。详细模式（含错误处理与重连）参见 references/real-time-updates.md。
性能优化
包括懒加载策略、并行数据获取、部件级缓存。可使用 python scripts/optimize-dashboard-performance.py --analyze dashboard-config.json 分析并优化仪表盘性能。
跨技能集成
数据可视化组件：引用 data-viz 技能创建图表部件。数据表格：引用 tables 技能提供数据网格。设计令牌：使用 design-tokens 技能保持主题一致。过滤器输入组件：可选使用 forms 技能提供过滤控件。
库选型指南
选择 Tremor：需要快速构建仪表盘、希望预置专业样式组件、项目使用 Tailwind CSS、构建标准分析界面、定制需求有限。
选择 react-grid-layout：用户需要自定义布局、需要拖拽、不同用户需要不同视图、构建仪表盘构建工具、灵活性优先。
组合使用：用 Tremor 作为部件内容（KPI、图表），用 react-grid-layout 管理布局。
附带资源
脚本（无需令牌执行）：scripts/generate-dashboard-layout.py（生成响应式网格配置）、scripts/calculate-kpi-metrics.py（计算趋势、对比、sparkline）、scripts/validate-widget-config.py（验证部件和过滤器配置）、scripts/optimize-dashboard-performance.py（分析和优化性能）、scripts/export-dashboard.py（导出仪表盘为多种格式）。可直接运行而无需加载到上下文，如 python scripts/calculate-kpi-metrics.py --data metrics.json --period monthly。
参考文档：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/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/dashboard-templates.json（预置仪表盘布局）、assets/widget-library.json（部件目录与配置）、assets/grid-layouts.json（响应式网格配置）、assets/kpi-formats.json（数字格式规则）、assets/theme-tokens.json（仪表盘专用设计令牌）。
仪表盘创建工作流
定义需求（固定还是可定制？实时还是静态？）；选择库（Tremor 求快，react-grid-layout 求灵活）；设置结构（全局状态、过滤器上下文、布局系统）；构建部件（KPI 卡片、图表来自 data-viz、表格来自 tables 技能）；实现数据流（获取策略、缓存、更新）；添加交互（过滤器、下钻、导出）；优化性能（懒加载、并行获取、缓存）；应用主题（使用 design-tokens 保持样式一致）；测试响应式（桌面、平板、移动断点）；部署与监控（跟踪性能与用户参与度）。
限制
资料未提供收费、价格、平台、效果或使用步骤等事实，相关内容暂未提供。具体实现细节请参见上述捆绑资源。