SuperAPI AI 工具集

bklit-ui-migrate

前端与建站

查看项目

更新于 10-17 04:35

技能介绍

用途

bklit-ui-migrate 用于把项目里基于 Recharts 的图表迁移到 Bklit UI。资料说明 Bklit 图表属于 shadcn 注册表组件,通过 npx shadcn@latest add @bklit/<slug> 把源码复制进用户项目,从用户自己的别名导入,例如 @/components/charts/line-chart;明确禁止从 @bklitui/ui/charts 导入(那是 bklit 私有 monorepo 包)。

主要能力

  • 检测与盘点:提供零依赖脚本 scripts/detect-recharts.mjs(Node ≥ 18,无需安装),可输出表格或 JSON,扫描 recharts 导入(含 import * as RechartsPrimitive)、shadcn 包装组件导入,按文件报告所用组件、图表根及行号、显著属性(stackId、layout="vertical"、syncId、XAxis type="number"、Treemap、LabelList、ErrorBar、自定义 shape/content、Brush 等)、建议的 bklit 目标、需安装的 slug 与分类;并列出谁仍导入 components/ui/chart.tsx。
  • 分类:每个图表分为 Clean(全部组件与属性可映射,数据可能仍需重塑)、Needs workaround(可转换但有妥协)、Keep on Recharts(保留原样)。需要给出理由并引用具体属性。
  • 按需安装注册表项:如 line-chart / bar-chart / y-axis / legend,以及 pie-chart、radar-chart、ring-chart、gauge-chart、funnel-chart、sankey-chart、sunburst-chart、reference-area、markers 等。
  • 逐文件转换:重塑数据(时间序列的 x 需为 Date;饼图 { label, value, color? }[];雷达图 metric + 归一化 0–100;环形图 { label, value, maxValue, color? }[];漏斗图 { label, value, color? }[];Sankey 不变),映射组件与属性,保留数据、颜色和标签,保持组件公开 API 不变。
  • 导入重写与冲突处理:新旧库存在同名导出(ChartTooltip、LineChart、Line、XAxis、Legend 等),在仍需保留 Recharts 图表的文件中需为一方起别名。
  • 清理与验证:仅当无文件导入时才删除 components/ui/chart.tsx;仅当检测器不再报告 recharts 导入时才卸载依赖;每文件后做类型检查与 lint,最后构建并做明暗模式视觉比对。

使用方式

技能按步骤执行:先做盘点(step 1)和分类(step 2)并展示给用户,确认后才开始改写。安装示例:npx shadcn@latest add @bklit/line-chart @bklit/bar-chart @bklit/y-axis @bklit/legend(也可用 pnpm dlx 或 bunx --bun)。转换时一次处理一个文件,遇到“需要变通”的转换先征询用户。

关键规则与限制

  • 不得臆造属性:prop-map.md 中没有对应行的 Recharts 属性即为空缺,需查阅 rules/gaps.md。资料明确 bklit 没有 XAxis 的 tickFormatter、YAxis 的 domain、stackId、layout、connectNulls、syncId。
  • Line / Area / Composed / Scatter 是时间序列图表,x 值必须是 Date(或 ISO 字符串 / epoch 毫秒);类别型 x 需改用 BarChart 或变通方案。
  • 保留数据、颜色与标签:同样的系列、同样的颜色(从 ChartConfig 解析)、同样的 tooltip 与图例人类可读标签。
  • 部分迁移是合法结果:保留在 Recharts 的图表不得改动,需在总结中说明原因。
  • 资料未提供该技能自身的收费、价格、平台支持范围或迁移效果数据。

适用场景

适用于已有 Recharts 或 shadcn/ui 图表包装、希望逐步迁移到 Bklit UI 的 React 项目,尤其是希望先盘点影响面、再受控逐文件转换的团队。迁移后的配色、令牌、排版与动效再设计可交给 bklit-ui-design 技能,一般 bklit 组合问题可参考 bklit-ui 技能。