mirror of
https://github.com/catlog22/Claude-Code-Workflow.git
synced 2026-03-01 15:03:57 +08:00
2fb93d20e0
- Introduced comprehensive documentation for the queue management feature, detailing its pain points, core functionalities, and component structure. - Added terminal dashboard documentation, highlighting its layout, core features, and usage examples. - Created an index page in Chinese for Claude Code Workflow, summarizing its purpose and core features, along with quick links to installation and guides.
120 lines
2.7 KiB
Markdown
120 lines
2.7 KiB
Markdown
---
|
||
title: Badge 徽章
|
||
description: 用于视觉分类的小型状态或标签组件
|
||
sidebar: auto
|
||
---
|
||
|
||
# Badge 徽章
|
||
|
||
## 概述
|
||
|
||
Badge 徽章组件用于以紧凑形式显示状态、类别或标签。它通常用于标签、状态指示器和计数。
|
||
|
||
## 语法演示
|
||
|
||
:::demo badge-variants
|
||
展示所有可用的徽章变体，包括默认、次要、破坏性、轮廓、成功、警告、信息、审查和渐变样式
|
||
:::
|
||
|
||
## 属性
|
||
|
||
<PropsTable :props="[
|
||
{ name: 'variant', type: '\'default\' | \'secondary\' | \'destructive\' | \'outline\' | \'success\' | \'warning\' | \'info\' | \'review\' | \'gradient\'', required: false, default: '\'default\'', description: '视觉样式变体' },
|
||
{ name: 'className', type: 'string', required: false, default: '-', description: '自定义 CSS 类名' },
|
||
{ name: 'children', type: 'ReactNode', required: true, default: '-', description: '徽章内容' }
|
||
]" />
|
||
|
||
## 变体说明
|
||
|
||
### Default（默认）
|
||
|
||
主题色背景的主要徽章。用于主要标签和类别。
|
||
|
||
### Secondary（次要）
|
||
|
||
次要信息的灰色徽章。
|
||
|
||
### Destructive（破坏性）
|
||
|
||
红色徽章，用于错误、危险状态或负面状态指示。
|
||
|
||
### Outline（轮廓）
|
||
|
||
只有文本和边框、无背景的徽章。用于微妙的标签。
|
||
|
||
### Success（成功）
|
||
|
||
绿色徽章，用于成功状态、完成的操作或正面状态指示。
|
||
|
||
### Warning（警告）
|
||
|
||
黄色/琥珀色徽章，用于警告、待处理状态或注意事项。
|
||
|
||
### Info（信息）
|
||
|
||
蓝色徽章，用于信息内容或中性状态。
|
||
|
||
### Review（审查）
|
||
|
||
紫色徽章，用于审查状态、待审查或反馈指示器。
|
||
|
||
### Gradient（渐变）
|
||
|
||
带品牌渐变背景的徽章，用于特色或突出显示的项目。
|
||
|
||
## 使用示例
|
||
|
||
### 基础徽章
|
||
|
||
```vue
|
||
<Badge>默认</Badge>
|
||
```
|
||
|
||
### 状态指示器
|
||
|
||
```vue
|
||
<Badge variant="success">活跃</Badge>
|
||
<Badge variant="warning">待处理</Badge>
|
||
<Badge variant="destructive">失败</Badge>
|
||
<Badge variant="info">草稿</Badge>
|
||
```
|
||
|
||
### 计数徽章
|
||
|
||
```vue
|
||
<div class="relative">
|
||
<Bell />
|
||
<Badge variant="destructive" class="absolute -top-2 -right-2 h-5 w-5 rounded-full p-0 flex items-center justify-center text-xs">
|
||
3
|
||
</Badge>
|
||
</div>
|
||
```
|
||
|
||
### 分类标签
|
||
|
||
```vue
|
||
<div class="flex gap-2">
|
||
<Badge variant="outline">React</Badge>
|
||
<Badge variant="outline">TypeScript</Badge>
|
||
<Badge variant="outline">Tailwind</Badge>
|
||
</div>
|
||
```
|
||
|
||
### 审查状态
|
||
|
||
```vue
|
||
<Badge variant="review">审查中</Badge>
|
||
```
|
||
|
||
### 渐变徽章
|
||
|
||
```vue
|
||
<Badge variant="gradient">特色</Badge>
|
||
```
|
||
|
||
## 相关组件
|
||
|
||
- [Card 卡片](/zh-CN/components/ui/card)
|
||
- [Button 按钮](/zh-CN/components/ui/button)
|
||
- [Avatar 头像](/zh-CN/components/ui/avatar)
|