mcpField
B
bklit-studio

bklit-studio

github.com/bklit设计与 UI1.8k627 次安装今天更新
代码仓库

关于 bklit-studio

面向 monorepo 贡献者的图表开发技能，指导在 Bklit Studio 中制作和编辑图表、连接控件与图层，并为后续发布做准备。

主要功能

  1. 01以 Studio 作为图表编辑器
  2. 02说明图表预览与代码生成
  3. 03梳理图层和属性控件
  4. 04介绍新增图表与属性
  5. 05指向发布和验证指南

适用场景

  1. 01在 Studio 中制作图表原型
  2. 02编辑图表图层、数据或动画
  3. 03添加图表属性或可见性控件

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/bklit/bklit-ui --skill bklit-studio

安装后在 Claude Code 中输入/bklit-studio确认已加载。

详细介绍

Bklit Studio 技能（图表开发）

仅供 Monorepo 贡献者使用。 每当你构建、编辑或试验图表时，都要自动使用此技能，并在通过 bklit-ship 发布之前完成。

/studio 中的 Studio 是唯一的开发界面：包含完整的编辑器外壳、组件树、属性、动效、代码生成和注册表预览。不要创建 apps/web/app/playground/。

使用时机（自动触发）

  • 构建、试验或编辑图表（新图表或现有图表）
  • 调整属性、图层、数据、样式或动画
  • 提及 Studio、/studio、注册表预览或图表控件
  • 继续之前的 playground 任务 → 改用 Studio

快速开始

pnpm dev   # repo root

打开 **http://localhost:3000/studio**（可选查询参数：`?chart=line-chart`）。

任务URL
编辑现有图表/studio?chart=<slug> — slug 位于 packages/studio/src/chart-slugs.ts
盈亏折线模式/studio?chart=line-chart&lineChartMode=profitLoss

编辑器布局

区域用途
左侧图表类型（完整 Studio 中）、图层列表、数据控件、动画
中间画布、标尺、可调整大小的框架、重播／扰乱
右侧所选图层的属性

面板规则： 动画 → 左侧（在图表配置中使用 motionPanel）；单图层属性 → 右侧；可见性 → 图层上的眼睛图标（通过 URL 状态中的 hiddenComponents 控制）。

实现位置（现有图表）

在 packages/studio 和 packages/ui 中编辑图表，而不是 apps/web/components/playground/。

关注点路径
图表预览 + 代码生成packages/studio/src/lib/registry.tsx（render、generateCode）
图层树（组件面板）packages/studio/src/lib/studio-components.ts（resolve*Components）
控件组（属性）packages/studio/src/lib/registry-control-groups.ts
URL／默认状态packages/studio/src/lib/studio-parsers.ts
图表 UIpackages/ui/src/charts/
Slugpackages/studio/src/chart-slugs.ts + registry.tsx 中的 studioRegistry
仅供 Studio 使用的预览packages/studio/src/components/charts/*-studio-preview.tsx
registry.tsx 中 render 的模式

复用已提交的辅助函数（不要重新实现）：

  • StudioChartShell + studioCartesianLegendItems — 图例网格 + showLegend
  • StudioVisibleLayer + componentId — 将渲染与图层可见性关联起来（line.grid、line.series.0 等）
  • getStudioCssRevealPropsForPreview — 动效／显现
  • isStudioComponentVisible(state, componentId) — 条件子项
  • seriesStrokePropsFromState、fadeEdgesPropValue、chartTooltipPropsFromState

参考实现：registry.tsx 中的 lineConfig.render。

新图表（尚未加入注册表）

  1. 在 packages/ui/src/charts/ 中实现组件（先实现最简 API）。
  2. 将 slug 添加到 packages/studio/src/chart-slugs.ts。
  3. 在 registry.tsx 的 studioRegistry 中添加 StudioChartConfig：
    • render(state, ctx) — 通过 StudioShell 在 EditorChartFrame 中预览
    • 在 studio-components.ts 中添加 resolveComponents
    • 添加 controlGroups／resolveControlGroups
    • 为代码面板添加 generateCode
  4. 打开 /studio?chart=<new-slug> 并迭代调整。
  5. 稳定后，按照 bklit-ship 的流程处理文档、图库和 shadcn 注册表。

添加属性或图层

  1. 如果 StudioUrlState 中缺少对应项，则将键添加到 studio-parsers.ts 中的 StudioUrlState／defaultStudioState。
  2. 在 registry-control-groups.ts 中为右侧图层添加控件，或在 studio-components.ts 中为相应组件添加 controlGroups。
  3. 在 registry.tsx 的 render 中接入属性（并在 packages/ui 的图表代码中接入）。
  4. 如果属性会影响动画 → 确保图表配置中设置了 motionPanel: true。
  5. 在 Studio 中验证：图层列表、可见性切换、属性、重播。

发布

API 稳定后，阅读 .agents/skills/bklit-ship/SKILL.md — 原型代码应已位于 packages/ui + packages/studio 中；无需迁移 playground 路由。

已弃用：/playground

本地 /playground 路由和 bklit-playground 技能已弃用。/playground 会重定向到 /studio。请勿在新工作中复制 playground-editor-shell 或 apps/web/components/playground/。

文件参考

项目路径
Studio 应用路由apps/web/app/studio/page.tsx (StudioShell)
Studio 软件包packages/studio/
Studio 技能.agents/skills/bklit-studio/SKILL.md
发布检查清单.agents/skills/bklit-ship/SKILL.md
性能审计.agents/skills/bklit-studio-chart-performance/SKILL.md

评论

支持 Markdown