8-bit组件文档编写Skill fumadocs-component-docs

---

名称: fumadocs-component-docs 描述: 创建包含安装、使用示例和预览部分的组件文档。适用于记录 8-bit 组件，提供适当的结构和示例。

组件文档模式

创建全面的 8-bit 组件文档，遵循标准结构。

组件预览结构

使用 ComponentPreview 包装组件示例，并提供真实数据：

<ComponentPreview title="8-bit 组件名称组件" name="component-name">
  <div className="md:min-w-[300px] min-w-[200px] flex flex-col gap-8">
    <div>
      <p className="text-sm text-muted-foreground mb-2">
        第一个变体的描述
      </p>
      <ComponentName prop={value} />
    </div>
    <div>
      <p className="text-sm text-muted-foreground mb-2">
        第二个变体的描述
      </p>
      <ComponentName prop={value} variant="retro" />
    </div>
  </div>
</ComponentPreview>

简单组件示例

对于基本组件如 Button：

<ComponentPreview title="8-bit 按钮组件" name="button">
  <Button>按钮</Button>
</ComponentPreview>

复杂组件示例

对于具有多个子组件的组件如 Sheet：

<ComponentPreview title="8-bit Sheet 组件" name="sheet">
  <Sheet>
    <SheetTrigger asChild>
      <Button variant="outline">打开</Button>
    </SheetTrigger>
    <SheetContent>
      <SheetHeader>
        <SheetTitle>编辑个人资料</SheetTitle>
        <SheetDescription className="text-xs">
          在这里更改您的个人资料。
        </SheetDescription>
      </SheetHeader>
      <div className="p-4 flex flex-col gap-4">
        <Label>名称</Label>
        <Input placeholder="项目名称" />
      </div>
      <SheetFooter className="flex-row-reverse">
        <SheetClose asChild>
          <Button size="sm">保存更改</Button>
        </SheetClose>
      </SheetFooter>
    </SheetContent>
  </Sheet>
</ComponentPreview>

使用部分模式

单一导入（简单组件）：

```tsx
import { Button } from "@/components/ui/8bit/button"

**多个导入**（复杂组件）：

```mdx
```tsx
import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/8bit/sheet"

### 属性文档

对于具有属性表格的组件，使用表格：

```mdx
### 属性

| 属性 | 类型 | 默认值 | 描述 |
|------|------|---------|-------------|
| variant | `string` | `"default"` | 视觉风格变体 |
| size | `string` | `"default"` | 按钮大小 |
| asChild | `boolean` | `false` | 是否将属性合并到子元素 |

变体示例

在预览中展示多个变体：

<ComponentPreview title="8-bit 健康条组件" name="health-bar">
  <div className="md:min-w-[300px] min-w-[200px] flex flex-col gap-8">
    <div>
      <p className="text-sm text-muted-foreground mb-2">
        默认健康条
      </p>
      <HealthBar value={75} />
    </div>
    <div>
      <p className="text-sm text-muted-foreground mb-2">
        复古健康条
      </p>
      <HealthBar value={45} variant="retro" />
    </div>
  </div>
</ComponentPreview>

复制命令按钮

放置在 ComponentPreview 之前：

<div className="flex flex-col md:flex-row items-center justify-end gap-2 mb-2">
  <CopyCommandButton
    copyCommand="pnpm dlx shadcn@latest add @8bitcn/component-name"
    command="pnpm dlx shadcn@latest add @8bitcn/component-name"
  />
</div>

关键原则

1. 预览优先 - 在解释之前展示组件
2. 多个变体 - 演示不同的属性组合
3. 真实数据 - 在示例中使用有意义的数值
4. 导入完整性 - 包含所有使用的导入
5. 代码块标签 - 对 TypeScript 使用 ```tsx
6. 8-bit 组件 - 从 @/components/ui/8bit/ 导入
7. 一致的间距 - 使用 gap-4、p-4、mb-2 等模式

参考示例

• content/docs/components/button.mdx - 简单组件模式
• content/docs/components/health-bar.mdx - 变体演示
• content/docs/components/sheet.mdx - 复杂子组件模式