---

name: 文档 description: 为 Terrae 组件生成或更新文档 argument-hint: [组件名称]

文档技能

为 Terrae 组件生成或更新文档。

参考

使用 src/app/docs/lines-animated/page.tsx 作为组件文档结构和模式的参考。

说明

1. 确定文档类型 询问用户需要什么：

   • 组件文档页面
   • 周志条目
   • README 更新
   • API 参考

2. 对于组件文档 位置：src/app/docs/{组件名称}/page.tsx 示例位置：src/app/docs/_components/examples/{示例名称}.tsx

   结构：

   • 标题和描述（在 DocsLayout 中）
   • 安装部分
   • 第一个示例（紧接在安装之后，不要标题/描述）
   • 其他示例（每个都有 DocsSection 标题和描述）
   • 动画模式或类似功能说明（如果适用）
   • 属性表
   • 使用场景网格（正好 2 个使用场景，不要更多）
   • 性能提示

3. 示例组件模式

   • 对容器 div 使用 h-full w-full（不要使用固定高度如 h-[400px]）

   • ComponentPreview 包装器处理尺寸

   • 始终从环境变量获取 accessToken

   • 示例结构：

     export const ExampleName = () => {
       const accessToken = process.env.NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN || ""
     
       return (
         <div className="h-full w-full">
           <Map accessToken={accessToken} center={CENTER} zoom={10}>
             {/* 组件放在这里 */}
           </Map>
         </div>
       )
     }
     

4. 对于周志条目 位置：src/app/docs/weeklog/page.tsx

   在顶部添加新条目，包含：

   • 日期
   • 变更摘要
   • 相关组件的链接

5. 文档模式

   • 使用带有正确语法高亮的代码块
   • 包含可工作的示例
   • 展示基本和高级用法
   • 记录所有属性及其类型和默认值
   • 在有助于理解的地方添加视觉示例
   • 使用 DocsCode 进行内联代码引用
   • 使用 DocsLink 处理外部链接

6. 审查流程

   • 在保存前向用户展示文档
   • 征求反馈并进行调整
   • 仅在用户批准后保存