用途:为 Docyrus 后端驱动的 React 应用构建仪表盘、分析页、KPI/指标视图和报表界面。该技能带有强制性约定:在看板场景中,图表、面板、指标卡三类组件的选择不是建议而是必须。
主要能力与固定组件栈:
- 所有图表/数据可视化统一使用 Bklit UI(@bklit 注册表),包含 LineChart、BarChart、AreaChart、PieChart、RingChart、GaugeChart 等,安装命令为 npx shadcn@latest add @bklit/<slug>;图表作为源码安装后组合使用(root → Grid → series → axes → ChartTooltip),统一从 @bklitui/ui/charts 导入。
- 所有看板卡片/面板统一使用 AwesomeCard(含 Header/Body/Value/Trend 等),安装命令为 pnpm dlx @docyrus/cli add @docyrus/ui-awesome-card。
- 所有统计/KPI/指标卡统一使用 AwesomeStats(数据驱动的指标卡),安装命令为 pnpm dlx @docyrus/cli add @docyrus/ui-awesome-stats。
选择规则:3 个及以上可对比指标用 AwesomeStats;单个指标或混合内容用 AwesomeCard;任何需要绘制的数据用 Bklit 图表。布局建议自上而下编排为:KPI 条(AwesomeStats)→ 图表面板(AwesomeCard 包裹 Bklit 图表)→ 表格/明细。
使用方式:先检测页面是否为看板/分析/概览/KPI/报表场景;用 npx shadcn@latest info --json 检查已安装项,再补齐缺失组件;确认 components.json 中已配置 @bklit 注册表;通过 Docyrus 集合与查询提供真实数据(.list() 加计算/pivot/公式),再组织成 AwesomeStats 的 items 数组与 Bklit 的数据数组;完成后做类型检查与视觉核对。
限制与注意:不得自行发明看板基础组件,禁止在看板中使用 Recharts、shadcn 图表原语或原生 <Card>,也不要手写 KPI 数值加趋势的网格;遇到需求未被满足时先查阅组件文档,多数可通过 props 解决。AwesomeStats 内置迷你图与 Intl.NumberFormat 格式化,页面主图表则用 Bklit。多租户场景应使用 AwesomeStats 的 format 与 @docyrus/app-utils 的 numberUtils/dateUtils,不要硬编码语言、货币或分隔符;图标遵循 hugeicons → fontawesome light → lucide 顺序。图表的具体组合、主题、动画与目录细节以 bklit-ui 技能为准。