CampaignCard 活动卡片

业务组件

活动卡片 — 面向 ERP/企业场景的业务组件。

何时使用

需要活动卡片功能时使用本组件。

代码示例

基础用法

tsx

import { CampaignCard, Labels } from "@/components/business/campaign-card"

export function Basic() {
return (
  <div className="space-y-4">
<CampaignCard />
<Labels />
  </div>
)
}

样式变体

状态

status	说明	默认
`planned`		✓
`active`
`paused`
`ended`

API / Props

CampaignCard

Prop	Type	Default	说明
`className`	`string`	—	自定义样式类名
`name`	`string`	—	表单字段名
`status`	`"planned" \| "active" \| "paused" \| ...`	`planned`	状态
`startDate`	`string`	—
`endDate`	`string`	—
`budget`	`number`	—
`location`	`string`	—
`reachCount`	`number`	—
...rest	`React.HTMLAttributes`	—	透传原生 DOM 属性

注意事项

Client Component: 使用 "use client",依赖 React hooks/状态,需在客户端渲染。
CVA 变体: 通过 class-variance-authority 管理样式变体,类型安全。变体对象可导出复用。

📘 完整交互式示例与控件属性请查看 Storybook 文档。