用 Widget 制作图表与交互产物
从项目资料生成图表、流程图、界面草图或小工具，并检查内容与交互。
核心能力把数据变成可查看的产物#
@Widget 适合图表、流程图、界面草图和小型交互工具。结果显示在会话中，可以展开到旁边的 Widget 面板，再继续提修改要求。
本例生成一个三个月工单量图表，数据全部给出，不需要你先准备附件。
准备这份示例数据#
以下为教程示例，不是实际业务统计。单位为“张”。
month,tickets
2026-04,42
2026-05,58
2026-06,50
预期总数是 150，最高月份是 2026-05，共 58 张。后面用这些数值检查产物，避免只看图表是否好看。
创建第一个 Widget#
在输入框输入 @，选择 Widget，再复制下面的完整任务：
制作一个工单量 Widget，使用以下全部数据：
month,tickets
2026-04,42
2026-05,58
2026-06,50
显示按月份排序的柱状图，以及同一份数据的表格。
标题为“三个月工单量”，单位为“张”，柱形轴从 0 开始。
每根柱标出原始数值，并显示总数和最高月份。
标注来源：“Onevium 教程示例数据，不代表真实业务”。
提供“全部月份 / 仅四月和六月”的切换，图和总数同步变化。
不要连接外部数据接口，不补造其他月份，不生成预测。
等待生成结束后，先查看会话内产物。将鼠标移到产物上方，点击 Expand / 展开，在 Widget 面板中查看更大的结果。
按数据与交互验收#
| 操作 | 应有结果 |
|---|---|
| 显示全部月份 | 三根柱和三行数据分别为 42、58、50，总数 150 |
| 检查最高月份 | 2026-05，58 张 |
| 切换为仅四月和六月 | 只显示 42 和 50，总数为 92；不继续显示旧总数 150 |
| 切回全部月份 | 三个月的数据和总数恢复 |
| 检查标题、单位与来源 | 与任务完全一致，来源明确标为示例 |
如果按钮没有改变图表或数字，就还没有完成交互验收。不要把静态外观当作筛选已经实现。
在当前会话继续修改#
例如发送：
保留刚才 Widget 的全部数据和筛选逻辑。
把月份显示为“四月、五月、六月”，并在表格中新增占总数比例。
比例按当前筛选结果计算，保留一位小数。
不要改变原始工单数或示例来源说明。
再次操作筛选，检查总数和百分比是否同步更新。需要精确定位时，写明 Widget 标题、具体标签和期望变化。
已保存到会话的普通 SVG 产物可能显示 Edit / 编辑 入口，进入画布后编辑会自动保存。HTML、图表模板等其他类型并不都支持同一套画布编辑；继续在会话提出修改要求即可。
放大查看并编辑 Mermaid 图表#
Mermaid 用文本描述结构，再在会话里渲染成图。先用一个小例子练习：
用 Mermaid 流程图展示这份示例文档流程：
收到需求 → 起草 → 审查 → 发布。
保留四个步骤及其顺序。这是流程示意，不代表已经执行。
- 等图表渲染完成，点击图表或放大查看，通过缩放、拖动核对标签和连线。
- 点击图表或放大窗口中的在画布中打开。面板会同时显示 Mermaid 源码和预览；面板较窄时上下排列。
- 把源码中的“审查”改成“审查并核对链接”。等待预览正确渲染，再点保存图表。
- 确认显示已保存，回到原会话，检查只有目标标签发生变化；重新打开图表核对保存后的源码。
保存图表会更新原会话消息中的 Mermaid 代码块，不会创建项目文件，也不同于 SVG 画布的自动保存。需要项目副本时，另行要求助手把 Mermaid 源码写入指定的 .mmd 文件，再检查文件是否存在。
出现仅供预览：无法定位原消息时，当前面板不能编辑或写回消息。如果保存失败并提示原图可能已被修改，先复制保留编辑后的源码，再重新打开当前图表，比对变化后处理。预览显示正确，不代表已经保存成功。
配置图表类型与交互内容#
打开设置 → 工具 → 图表与交互内容 → 配置。配置按钮不可用时，先开启该工具组。弹窗分开控制三类选项：
| 选项 | 控制什么 |
|---|---|
| 常用及更多图表类型 | 告诉模型可用的 Mermaid 类型，例如 Flowchart、Sequence、ER、Gantt；按本次任务选择 |
| 交互内容 | HTML 交互控件、Chart.js 图表、界面原型、SVG 插画、简单图示和 Drawio 泳道图的指导模块 |
| 提示词详细程度 | 精简、均衡、丰富调整生成指令的详细程度，不是图片分辨率或图表缩放比例 |
上面的工单示例需要保留图表（Chart.js）和交互控件（HTML）；Mermaid 练习需要开启 Flowchart。这些设置用于后续生成指导，不会自动重画会话中已有的产物。
没有选中任何 Mermaid 类型时，会去掉 Mermaid 的生成指导；仍开启的 SVG 或 HTML 模块可以生成其他可视化内容。部分额外类型会提示固定配色或额外依赖，语法错误也可能需要手动修正。使用前查看类型旁的说明，保存前核对实际预览。其他工具控制见工具设置参考。
复制图片、下载与保留源文件#
Widget 产物完成后的工具栏提供 Copy image / 复制图片 和 Download / 下载。这里复制和下载的是图片，下载文件为 PNG；不会自动得到可继续编辑的 HTML 或 SVG 源码。
若需要保留可编辑版本，请另行要求：
把这个 Widget 的可编辑源文件保存到本项目的 artifacts/tickets-widget.html。
保留示例数据和筛选功能，返回实际文件路径。
如果当前产物不是 HTML，先说明实际格式和合适的保存方式。
不要发布到网站。
检查目标文件确实存在并能再次打开。SVG 画布的自动保存位置属于会话产物，也不等于已经写入项目文件。
常见问题#
| 现象 | 处理方法 |
|---|---|
| 没有可展开的产物 | 查看工具是否执行完成；确认返回的是 Widget，而不只是代码说明 |
| 数字错误 | 重新贴出数据和计算规则，要求修正逻辑后再调外观 |
| 筛选按钮无效 | 明确指出操作与预期总数，例如“仅四月和六月应为 92” |
| 没有编辑按钮 | 检查产物类型；通过会话修改，不假设所有类型都支持 SVG 画布 |
| 下载后不能交互 | PNG 是静态图片；需要交互时要求保存并打开可编辑源文件 |
| Mermaid 的保存图表按钮不可用 | 确认能定位原消息、源码有改动，且预览已经正确渲染 |
| Mermaid 保存失败 | 离开前先复制编辑后的源码，重新打开原图并核对当前内容 |
下一步#
其他能力入口见工具菜单。使用真实网页数据前，可通过浏览器核对来源；源文件与修改记录见文件、终端与 Review。