heitu 组件库

$ import from 'heitu'_

自研 React 工具库:JSON 配置驱动的表单渲染器、canvas 自绘图表与引擎、以及一组通用 hooks。 下面的 demo 都是真实组件,可以直接操作。antd 的主色、圆角与字体已通过 ConfigProvider 对齐本站令牌——同一套组件,换了皮就不违和。

AI SKILLSnpm 包内置 · 安装即生效

包里自带 .claude/skills/ 四份技能文档——npm install heitu 之后,Claude Code 等 AI 编码工具无需翻源码, 直接掌握各组件的正确入口、参数与实机坑位:

  • heitu-formrenderJSON 驱动表单:配置、联动、异步选项、自定义控件
  • heitu-charts四种图表 props 速查 + 宽度陷阱、动画遮罩等实机坑位
  • heitu-canvasStage/图元/事件/Animate 全流程与 1.1.x 版本差异
  • heitu-hooks19 个 hooks 签名速查与容易踩的语义细节

内容按 TDD 方式维护:先让不带 skill 的 AI 实测踩坑(基线),再对照验证带 skill 后坑位全部规避,才随包发布。

NOTES
  • · FormRender 的 config 支持二维数组 (一行多项)、divider 分组、watch 字段联动与 service 异步选项。
  • · charts 直接操作 canvas,没有引入 G2/ECharts 这类重型依赖,包体积可控;四种图表含双轴柱线图。
  • · canvas 引擎是 charts 的底座:Stage 分层、 Rect / Circle / Line / Text / Group / Custom 六种图元、命中检测、拖拽与 Animate 补间,可脱离图表单独用。
  • · hooks 共 19 个,覆盖数据请求、DOM 观察、 存储、交互与工具五类,均可从 heitu/hooks 按需引入。