mirror of https://github.com/catlog22/Claude-Code-Workflow.git synced 2026-03-01 15:03:57 +08:00

Files

catlog22 2fb93d20e0 feat: add queue management and terminal dashboard documentation in Chinese

- 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.

2026-03-01 10:52:46 +08:00

2.7 KiB

Raw Blame History

title, description, sidebar

title	description	sidebar
Badge 徽章	用于视觉分类的小型状态或标签组件	auto

Badge 徽章

概述

Badge 徽章组件用于以紧凑形式显示状态、类别或标签。它通常用于标签、状态指示器和计数。

语法演示

:::demo badge-variants 展示所有可用的徽章变体，包括默认、次要、破坏性、轮廓、成功、警告、信息、审查和渐变样式 :::

属性

变体说明

Default（默认）

主题色背景的主要徽章。用于主要标签和类别。

Secondary（次要）

次要信息的灰色徽章。

Destructive（破坏性）

红色徽章，用于错误、危险状态或负面状态指示。

Outline（轮廓）

只有文本和边框、无背景的徽章。用于微妙的标签。

Success（成功）

绿色徽章，用于成功状态、完成的操作或正面状态指示。

Warning（警告）

黄色/琥珀色徽章，用于警告、待处理状态或注意事项。

Info（信息）

蓝色徽章，用于信息内容或中性状态。

Review（审查）

紫色徽章，用于审查状态、待审查或反馈指示器。

Gradient（渐变）

带品牌渐变背景的徽章，用于特色或突出显示的项目。

使用示例

基础徽章

<Badge>默认</Badge>

状态指示器

<Badge variant="success">活跃</Badge>
<Badge variant="warning">待处理</Badge>
<Badge variant="destructive">失败</Badge>
<Badge variant="info">草稿</Badge>

计数徽章

<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>

分类标签

<div class="flex gap-2">
  <Badge variant="outline">React</Badge>
  <Badge variant="outline">TypeScript</Badge>
  <Badge variant="outline">Tailwind</Badge>
</div>

审查状态

<Badge variant="review">审查中</Badge>

渐变徽章

<Badge variant="gradient">特色</Badge>

2.7 KiB Raw Blame History Unescape Escape