TabCrudPage Tab Crud Page

业务组件

TabCrudPage — tab crud page component.

## 何时使用 / When to Use

适用于Tab Crud Page相关场景。

Use when you need a tab crud page.

## 代码示例 / Examples

### 基础用法 / Basic Usage

<CodeBlock code={`import { TabCrudPage } from "@chaos_team/chaos-ui/business"

export function Basic() {
  return <TabCrudPage />
}`} lang="tsx" />


## API / Props

### TabCrudPage

| Prop | Type | Default | 说明 / Description |
|---|---|---|---|
| `className` | `string` | — | 自定义样式类名 <br/> Custom CSS class |
| `tabs` | `Array<T>` | — | 选项卡定义列表 |
| `active` | `string` | — | 当前激活选项卡 id（受控） |
| `defaultActive` | `string` | — | 默认激活选项卡 id（非受控） |
| `onTabChange` | `() => void` | — | 切换选项卡回调 |
| `onCreate` | `() => void` | — | 点击“新建”回调；不传则隐藏按钮 |
| `query` | `string` | — | 搜索关键字（受控） |
| `onQueryChange` | `() => void` | — | 搜索关键字变化回调 |
| ...rest | `React.HTMLAttributes` | — | 透传原生 DOM 属性 <br/> Inherits standard HTML attributes |

## 注意事项 / Notes

- **Client Component**: 使用 `"use client"`,依赖 React hooks/状态,需在客户端渲染。

> 📘 完整交互式示例与控件属性请查看 [Storybook 文档](?path=/docs/business-tabcrudpage--docs)。