# PisellCards

PisellCards 是一个卡片组件的命名空间容器，用于收纳各种卡片组件。

## 快速开始

```tsx
import { PisellCards } from '@pisell/materials';

// 使用 TabCard
<PisellCards.TabCard
  tabKey="home"
  label="首页"
  active={{ value: true }}
  onClick={(key) => console.log(key)}
/>
```

## 已实现的卡片组件

### TabCard - 标签卡片

标签卡片组件，用于导航、分类切换、筛选等场景。

**Props:**
- `tabKey` - 标签唯一标识（必填）
- `label` - 标签文本（必填）
- `icon` - 标签图标
- `badge` - 徽章配置
- `direction` - 布局方向（horizontal | vertical）
- `size` - 标签尺寸（small | medium | large）
- `active` - 激活状态
- `disabled` - 禁用状态
- `loading` - 加载状态

## 文档

- [使用文档](./docs/PisellCards.md) - 组件使用说明和示例
- [设计文档](./docs/PisellCards.$tab-design.md) - 设计思路和规范
- [开发文档](./docs/PisellCards.$tab-dev.md) - 开发指南和最佳实践
- [测试文档](./docs/PisellCards.$tab-test.md) - 测试用例和覆盖率

## 扩展开发

如果需要开发新的业务卡片组件：

1. 基于 `PisellBasicCardProps` 扩展 Props
2. 实现状态处理逻辑（active、disabled、loading）
3. 收纳到 `PisellCards` 命名空间下

详见 [设计文档](./docs/PisellCards.$tab-design.md)。

## 文件结构

```
PisellCards/
├── index.tsx                    # 主入口
├── PisellCards.tsx              # 命名空间定义
├── types.ts                     # PisellBasicCardProps 类型
├── components/                  # 卡片组件目录
│   └── TabCard/                 # TabCard 组件
│       ├── TabCard.tsx
│       ├── TabCard.less
│       ├── TabCard.test.tsx
│       └── types.ts
└── docs/                        # 文档
    ├── PisellCards.md
    ├── PisellCards.$tab-design.md
    ├── PisellCards.$tab-dev.md
    └── PisellCards.$tab-test.md
```

## 开发命令

```bash
# 运行测试
npm test

# 生成覆盖率报告
npm test -- --coverage

# Watch 模式
npm test -- --watch
```

## 注意事项

- **PisellBasicCard 不是实体组件**，仅仅是类型定义
- 所有业务卡片都应该收纳到 `PisellCards` 命名空间下
- 状态优先级：loading > disabled > active



