mirror of
https://github.com/catlog22/Claude-Code-Workflow.git
synced 2026-03-05 16:13:08 +08:00
Backend:
- Fix readLegacyFiles to handle { name, prefix }[] role format
- Add roles backfill in getEffectiveTeamMeta when meta.json exists
- Ensure pipeline_stages and roles flow correctly to API response
Team Skills:
- Add pipeline metadata initialization to all 16 team skill coordinator roles
- Each skill now reports pipeline_stages and roles to meta.json at session init
Documentation:
- Update command references and component documentation
- Add numerical-analysis-workflow skill spec
- Sync zh/en translations for commands and components
2.3 KiB
2.3 KiB
title, description, sidebar
| title | description | sidebar |
|---|---|---|
| Card 卡片 | 用于分组相关内容的容器组件 | auto |
Card 卡片
概述
卡片组件是一个通用的容器,用于分组相关的内容和操作。它由多个子组件组成,协同工作以创建连贯的卡片布局。
语法演示
:::demo card-variants 展示不同的卡片布局,包括页眉、内容、页脚和渐变边框变体 :::
组件
卡片组件包含以下子组件:
| 组件 | 用途 |
|---|---|
Card |
带有边框和背景的主容器 |
CardHeader |
带有内边距的页眉部分 |
CardTitle |
标题元素 |
CardDescription |
带有次要颜色的描述文本 |
CardContent |
带有顶部内边距的内容区域 |
CardFooter |
用于操作的页脚部分 |
CardGradientBorder |
带有渐变边框的卡片 |
属性
所有 Card 组件接受标准 HTML div 属性:
| 组件 | 属性 |
|---|---|
Card |
className?: string |
CardHeader |
className?: string |
CardTitle |
className?: string, children?: ReactNode |
CardDescription |
className?: string, children?: ReactNode |
CardContent |
className?: string |
CardFooter |
className?: string |
CardGradientBorder |
className?: string |
使用示例
基础卡片
<Card>
<CardContent>
<p>这是一个带有内容的基础卡片。</p>
</CardContent>
</Card>
带页眉的卡片
<Card>
<CardHeader>
<CardTitle>卡片标题</CardTitle>
<CardDescription>卡片描述放在这里</CardDescription>
</CardHeader>
<CardContent>
<p>卡片内容放在这里。</p>
</CardContent>
</Card>
带页脚的完整卡片
<Card>
<CardHeader>
<CardTitle>项目设置</CardTitle>
<CardDescription>管理您的项目配置</CardDescription>
</CardHeader>
<CardContent>
<p>配置您的项目设置和偏好。</p>
</CardContent>
<CardFooter>
<Button>保存更改</Button>
</CardFooter>
</Card>
带渐变边框的卡片
<CardGradientBorder>
<CardHeader>
<CardTitle>特色卡片</CardTitle>
</CardHeader>
<CardContent>
<p>此卡片具有渐变边框效果。</p>
</CardContent>
</CardGradientBorder>