unnamed-ui
卡片

Agent Card

Agent card component with AI icon, title, and description

Agent Card 组件示例

基础卡片

智能写作助手
数据分析师
翻译官

不同尺寸

小型卡片
中型卡片
大型卡片
"use client";

import * as React from "react";
import { AgentCardPrimitive } from "@/components/wuhan/blocks/agent-card/agent-card-01";

/**
 * Agent Card 示例数据
 */
const agentExamples = [
  {
    title: "智能写作助手",
    description: "正在分析文档结构",
  },
  {
    title: "数据分析师",
    description: "正在处理数据报表",
  },
  {
    title: "翻译官",
    description: "多语言翻译",
  },
] as const;

export function AgentCardDemo() {
  return (
    <div className="w-full max-w-[650px] mx-auto p-4 space-y-4">
      {/* 标题 */}
      <h2 className="text-lg font-semibold text-[var(--Text-text-primary)] mb-4">
        Agent Card 组件示例
      </h2>

      {/* 基础展示 */}
      <div className="space-y-2">
        <h3 className="text-sm font-medium text-[var(--Text-text-secondary)]">
          基础卡片
        </h3>
        {agentExamples.map((agent, index) => (
          <AgentCardPrimitive
            key={index}
            title={agent.title}
            description={agent.description}
            size="md"
          />
        ))}
      </div>

      {/* 不同尺寸展示 */}
      <div className="mt-6 space-y-3">
        <h3 className="text-sm font-medium text-[var(--Text-text-secondary)]">
          不同尺寸
        </h3>
        <AgentCardPrimitive title="小型卡片" description="小尺寸" size="sm" />
        <AgentCardPrimitive
          title="中型卡片"
          description="中尺寸（默认）"
          size="md"
        />
        <AgentCardPrimitive title="大型卡片" description="大尺寸" size="lg" />
      </div>
    </div>
  );
}

Agent Card 组件用于展示 AI Agent 信息，支持图标、标题、描述，适用于 Agent 管理、智能助手展示等场景。

概述

  • 简洁设计：仅包含图标、标题和描述
  • 三种尺寸：sm / md / lg
  • 自定义图标：支持自定义左侧图标
  • 品牌背景：默认品牌浅色背景，hover 时有渐变叠加效果
  • 响应式：完全响应式设计
  • 类型安全：完整的 TypeScript 类型定义
  • 轻量级：基于原语组件构建，无额外依赖

快速开始

import { AgentCard } from "@/registry/wuhan/composed/agent-card/agent-card";

<AgentCard
  title="智能写作助手"
  description="正在分析文档结构"
/>

特性

  • 简洁直观：去除复杂状态，只保留核心信息
  • 灵活尺寸：支持 sm、md、lg 三种尺寸
  • 自定义图标：支持自定义左侧图标
  • 品牌视觉：品牌浅色背景，符合 AI 产品的视觉风格
  • 可访问性：支持 aria 属性，键盘导航友好
  • 响应式：自适应不同屏幕尺寸

安装

pnpm dlx shadcn@latest add http://localhost:3000/r/wuhan/agent-card.json

代码演示

基础

智能写作助手
数据分析师
翻译官
"use client";

import { AgentCardPrimitive } from "@/components/wuhan/blocks/agent-card/agent-card-01";

export function AgentCardBasicDemo() {
  return (
    <div className="w-full max-w-[650px] space-y-3">
      <AgentCardPrimitive
        title="智能写作助手"
        description="正在分析文档结构"
        size="md"
      />
      <AgentCardPrimitive
        title="数据分析师"
        description="正在处理数据报表"
        size="md"
      />
      <AgentCardPrimitive title="翻译官" description="多语言翻译" size="md" />
    </div>
  );
}

基础 Agent 卡片展示。

不同尺寸

小尺寸 (sm)

小型 Agent

中尺寸 (md)

中型 Agent

大尺寸 (lg)

大型 Agent
"use client";

import { AgentCardPrimitive } from "@/components/wuhan/blocks/agent-card/agent-card-01";

export function AgentCardSizesDemo() {
  return (
    <div className="w-full max-w-[650px] space-y-4">
      <div>
        <h3 className="text-sm font-medium text-[var(--Text-text-secondary)] mb-2">
          小尺寸 (sm)
        </h3>
        <AgentCardPrimitive
          title="小型 Agent"
          description="sm 尺寸"
          size="sm"
        />
      </div>
      <div>
        <h3 className="text-sm font-medium text-[var(--Text-text-secondary)] mb-2">
          中尺寸 (md)
        </h3>
        <AgentCardPrimitive
          title="中型 Agent"
          description="md 尺寸（默认）"
          size="md"
        />
      </div>
      <div>
        <h3 className="text-sm font-medium text-[var(--Text-text-secondary)] mb-2">
          大尺寸 (lg)
        </h3>
        <AgentCardPrimitive
          title="大型 Agent"
          description="lg 尺寸"
          size="lg"
        />
      </div>
    </div>
  );
}

支持 sm、md、lg 三种尺寸。

样式定制

自定义背景
紫色主题
绿色主题
"use client";

import { AgentCardPrimitive } from "@/components/wuhan/blocks/agent-card/agent-card-01";

export function AgentCardCustomStyleDemo() {
  return (
    <div className="w-full max-w-[650px] space-y-3">
      <AgentCardPrimitive
        title="自定义背景"
        description="使用自定义样式的 Agent 卡片"
        className="bg-blue-50 hover:bg-blue-100"
      />
      <AgentCardPrimitive
        title="紫色主题"
        description="紫色背景的 Agent 卡片"
        className="bg-purple-50 hover:bg-purple-100"
      />
      <AgentCardPrimitive
        title="绿色主题"
        description="绿色背景的 Agent 卡片"
        className="bg-green-50 hover:bg-green-100"
      />
    </div>
  );
}

通过 className 自定义样式，可以修改背景色、hover 效果等。

自定义图标

写作助手
计算引擎
翻译官
"use client";

import { AgentCard } from "@/components/composed/agent-card/agent-card";
import { Bot, Cpu, Sparkles } from "lucide-react";

export function AgentCardCustomIconDemo() {
  return (
    <div className="w-full max-w-[650px] space-y-3">
      <AgentCard
        title="写作助手"
        description="智能写作辅助"
        icon={<Bot className="size-5 text-[var(--Text-text-brand)]" />}
      />
      <AgentCard
        title="计算引擎"
        description="高性能计算"
        icon={<Cpu className="size-5 text-[var(--Text-text-brand)]" />}
      />
      <AgentCard
        title="翻译官"
        description="多语言翻译"
        icon={<Sparkles className="size-5 text-[var(--Text-text-brand)]" />}
      />
    </div>
  );
}

使用自定义图标替代默认的 AI 图标。

Agent 列表

我的 Agent

智能写作助手
数据分析师
翻译官
代码审查员
"use client";

import { AgentCardList } from "@/components/composed/agent-card/agent-card";

export function AgentCardListDemo() {
  const agents = [
    {
      id: "1",
      title: "智能写作助手",
      description: "正在分析文档结构",
    },
    {
      id: "2",
      title: "数据分析师",
      description: "正在处理数据报表",
    },
    {
      id: "3",
      title: "翻译官",
      description: "多语言翻译",
    },
    {
      id: "4",
      title: "代码审查员",
      description: "正在审查代码",
    },
  ];

  return (
    <div className="w-full max-w-[650px]">
      <AgentCardList title="我的 Agent" agents={agents} size="md" />
    </div>
  );
}

使用 AgentCardList 组件展示多个 Agent 卡片。

API

AgentCard

Agent 卡片主组件，提供完整的 Agent 卡片功能。

Props

PropTypeDefaultDescription
titleReact.ReactNode"Agent"标题
descriptionReact.ReactNode-描述文本
iconReact.ReactNodeAgentCardAiIcon左侧图标
size"sm" | "md" | "lg""md"尺寸
classNamestring-自定义类名

AgentCardList

Agent 卡片列表组件，展示多个 Agent 卡片。

Props

PropTypeDefaultDescription
titlestring"Agent 列表"列表标题
agentsAgentItem[][]Agent 列表数据
size"sm" | "md" | "lg""md"尺寸
classNamestring-自定义类名

AgentItem

Agent 项类型定义。

interface AgentItem {
  /** 唯一标识符 */
  id: string;
  /** Agent 标题 */
  title: string;
  /** Agent 描述 */
  description?: string;
  /** 自定义图标 */
  icon?: React.ReactNode;
}

AgentCardPrimitive

自包含的 Agent 卡片原语组件，提供更灵活的定制能力。

import { AgentCardPrimitive } from "@/registry/wuhan/blocks/agent-card/agent-card-01";

<AgentCardPrimitive
  title="智能写作助手"
  description="正在分析文档结构"
  size="md"
/>

AgentCardPrimitive Props

PropTypeDefaultDescription
titleReact.ReactNode-标题
descriptionReact.ReactNode-描述文本
iconReact.ReactNode-左侧图标
size"sm" | "md" | "lg""md"尺寸
classNamestring-容器自定义类名

使用场景

  • Agent 管理：展示当前可用的 AI Agent
  • 智能助手：展示智能助手卡片
  • 任务分配：展示可用的 Agent
  • 系统监控：展示系统 Agent

最佳实践

  1. 简洁设计：去除复杂状态，只保留核心信息
  2. 尺寸选择：根据使用场景选择合适的尺寸（sm/md/lg）
  3. 自定义图标：根据业务需求自定义图标，增强视觉效果
  4. 列表展示：使用 AgentCardList 展示多个 Agent

原语组件

AgentCard 基于以下原语组件构建：

  • AgentCardContainerPrimitive - 容器（品牌浅色背景 + hover 渐变）
  • AgentCardHeaderPrimitive - 头部（图标 + 标题 + 描述）
  • AgentCardPrimitive - 完整组件（自包含）
  • AgentCardAiIcon - 默认 AI 图标

如需更灵活的定制，可以直接使用这些原语组件。

Goal Card

Goal card component with AI icon, title, description, and circular progress indicator

Select Card

Card selection component with single/multiple selection modes

On this page

概述快速开始特性安装代码演示基础不同尺寸样式定制自定义图标Agent 列表APIAgentCardPropsAgentCardListPropsAgentItemAgentCardPrimitiveAgentCardPrimitive Props使用场景最佳实践原语组件