说明目录
Garden 使用说明内置组件

组件总览

9 个内置 garden 组件的用途、围栏名称与使用约束。

当标准 Markdown 段落、列表或表格不够表达时，可以在文章里使用 ```garden <name> 代码块插入内置组件。所有组件名均使用英文，内部使用 YAML（interactive 在 --- 下方使用声明式标签）编写参数。

9个组件速查表

组件名代码块围栏适用场景必填字段或下限
知识卡片```garden card介绍论文、开源项目或模块要点至少填 description 或 points
数字指标```garden stat并排展示 2～4 组关键数值与单位每项必填 label 与 value
并排对比```garden compare左右并列对比 2～3 种方案或改动前后差异items 至少 2 项，每格不超过约 60 字
时间线```garden timeline按先后顺序串联排查记录或演进阶段items 至少 2 项
条形图表```garden chart用数据绘制比例条形图（自带可展开数据表）data 至少 2 行
分区结构图```garden figure带分区按钮高亮与说明的 SVG / 图片结构图svg 或 image 二选一
嵌入网页片段```garden html在沙盒 iframe 中运行独立 HTML/JS 演示src 或 code 二选一
可调公式与参数```garden interactive提供滑杆或单选控件实时计算非平凡公式含输入控件且公式不能是单次乘法
文件下载与预览```garden file提供本地或远程文件下载与页内预览src 或 files 二选一

编写与检查规则

  1. 优先使用标准 Markdown：普通文字说明、有序列表和常规对比表格直接用 Markdown 编写，只有结构化组件能明显提升可读性时才用 garden 围栏。
  2. 不要重复展示同一组数据：chart 组件下方自带「查看数据表」折叠区，同一小节内不需要再重复手写一张相同数据的 Markdown 表格。
  3. 支持行内格式：各组件的 text、description、caption、points 等文本字段均支持行内 **加粗**、`行内代码` 和 <u>荧光笔下划线</u>。
  4. 本地预览全部组件样式：运行 npx garden ui catalog 会在 .garden/ui-catalog.html 生成组件画廊页面，可在浏览器中直接打开查看。
目录