bklit-studio

用途

Bklit Studio 是一项面向 bklit-ui monorepo 贡献者的图表开发技能，仅限 monorepo 贡献者使用。当你在构建、编辑或原型化图表时，该技能会自动启用，并应在通过 bklit-ship 发布之前使用。

触发场景包括：

• 构建、原型化或编辑图表（新建或已有）
• 调整属性、图层、数据、样式或动画
• 提及 Studio、/studio、注册表预览或图表控件
• 从先前的 playground 任务继续工作 → 改用 Studio

Studio 开发界面

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

启动方式：

pnpm dev   # repo root

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

常用任务 URL：

任务	URL
编辑已有图表	/studio?chart=<slug> — slug 见 packages/studio/src/chart-slugs.ts
Profit/loss line 模式	/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
图表 UI	packages/ui/src/charts/
Slug	packages/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 — 动效 / reveal
• 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 registry。

添加属性或图层

1. 如果缺少，在 studio-parsers.ts 的 StudioUrlState / defaultStudioState 中添加 key。
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

限制

该技能仅限 bklit-ui monorepo 贡献者使用。除上述内容外，关于收费、价格、平台支持、效果等具体信息暂未提供。