# PisellSuperTabs

通用导航框架封装的全能型 Tab 组件，用于构建多种导航模式（如菜单、标签页、导航栏等）。

## 快速开始

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

const tabs = [
  { key: 'home', label: '首页' },
  { key: 'products', label: '产品' },
  { key: 'about', label: '关于' },
];

<PisellSuperTabs
  dataSource={tabs}
  defaultValue="home"
  gridProps={{
    direction: 'horizontal',
    gap: 16,
  }}
  renderItem={(item, index, active) => (
    <PisellCards.TabCard
      {...item}
      active={{ value: active }}
    />
  )}
/>
```

## 核心特性

✅ **受控/非受控模式**：灵活的状态管理  
✅ **数据驱动**：通过 dataSource 控制所有内容  
✅ **完全可定制**：renderItem 可以渲染任意内容  
✅ **极致配置化**：透传 PisellBasicGrid 和 PisellScrollView 的所有配置  
✅ **多种布局**：横向、竖向、网格、等分等  
✅ **滚动支持**：横向滚动、竖向滚动、吸附滚动等  

## 设计理念

组件采用**职责分离**的设计原则：

```
PisellScrollView (滚动容器)
  └─ PisellBasicGrid (布局引擎)
       └─ renderItem (渲染函数)
            └─ PisellCards.XXX (业务 Card)
```

## 适用场景

- 顶部横向导航栏
- 侧边竖向菜单
- 底部图标导航
- 多级嵌套导航
- 锚点导航

## 文档

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

## API

### Props

| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| dataSource | 数据源 | `T[]` | `[]` |
| rowKey | 唯一标识字段 | `string \| function` | `'key'` |
| value | 当前激活的 Tab key（受控） | `string` | - |
| defaultValue | 默认激活的 Tab key（非受控） | `string` | - |
| onChange | Tab 切换回调 | `function` | - |
| renderItem | 自定义渲染函数 | `function` | - |
| gridProps | PisellBasicGrid 配置 | `object` | `{}` |
| scrollViewProps | PisellScrollView 配置 | `object` | `{}` |

详细 API 请参考 [使用文档](./docs/PisellSuperTabs.md)

## 文件结构

```
PisellSuperTabs/
├── index.tsx                      # 组件导出
├── PisellSuperTabs.tsx            # 组件主实现
├── PisellSuperTabs.less           # 组件样式
├── PisellSuperTabs.test.tsx       # 单元测试
├── types.ts                       # TS 类型定义
├── hooks/                         # 自定义 Hooks
│   ├── index.ts
│   └── useTabsState.ts            # Tab 状态管理
├── utils/                         # 工具函数
│   ├── index.ts
│   └── getRowKey.ts               # 获取 rowKey
├── components/                    # 子组件（预留）
│   └── index.tsx
└── docs/                          # 文档
    ├── PisellSuperTabs.md
    ├── PisellSuperTabs.$tab-design.md
    ├── PisellSuperTabs.$tab-dev.md
    └── PisellSuperTabs.$tab-test.md
```

## 版本

- **当前版本**：1.0.0
- **组件类型**：Pro Components
- **组件分类**：Navigation

