# TabCard LowCode Meta 配置

TabCard 组件的低代码元数据配置。

## 文件说明

- `meta.ts` - 组件元数据配置，包含 Props 定义、Setter 配置等
- `snippets.ts` - 组件物料片段，定义了多种预设的组件模板

## 配置概览

### 组件信息

- **组件名称**: `PisellCards.TabCard`
- **组件标题**: 标签卡片
- **分类**: 基础组件
- **包名**: `@pisell/materials`
- **导出方式**: `PisellCards.TabCard`（命名空间导出）

### Props 配置分组

#### 1. 基础配置
- `tabKey` - 标签标识（必填）
  - 类型：string | number
  - Setter: StringSetter, NumberSetter, VariableSetter
  
- `label` - 标签文本（必填）
  - 类型：string | ReactNode
  - Setter: PisellI18nSetter, StringSetter, SlotSetter
  
- `icon` - 图标
  - 类型：ReactNode
  - Setter: SlotSetter（默认值：Icon 组件）
  
- `direction` - 布局方向
  - 类型：'horizontal' | 'vertical'
  - Setter: RadioGroupSetter（水平/垂直）
  - 默认值：'horizontal'
  
- `size` - 尺寸
  - 类型：'small' | 'medium' | 'large'
  - Setter: RadioGroupSetter（小/中/大）
  - 默认值：'medium'
  
- `className` - 样式类名
  - 类型：string
  - Setter: StringSetter

#### 2. 徽章配置
- `badge` - 徽章配置对象
  - `badge.count` - 徽章数字或文本
  - `badge.dot` - 是否显示小红点
  - `badge.color` - 徽章颜色
  - `badge.offset` - 徽章偏移位置 [x, y]

#### 3. 状态配置
- `active` - 激活状态
  - `active.value` - 是否激活
  - `active.className` - 激活状态类名
  - `active.style` - 激活状态样式
  - `active.extra` - 激活状态额外内容
  
- `disabled` - 禁用状态
  - `disabled.value` - 是否禁用
  - `disabled.className` - 禁用状态类名
  - `disabled.style` - 禁用状态样式
  - `disabled.extra` - 禁用状态额外内容
  
- `loading` - 加载状态
  - `loading.value` - 是否加载中
  - `loading.className` - 加载状态类名
  - `loading.style` - 加载状态样式
  - `loading.extra` - 加载状态额外内容

#### 4. 高级配置
- `render` - 自定义渲染函数
  - 类型：Function
  - Setter: FunctionSetter
  
- `children` - 子内容
  - 类型：ReactNode
  - Setter: SlotSetter

### 事件配置

- `onClick` - 点击事件
  - 参数：`(tabKey, event) => void`
  - 模板：
    ```javascript
    onClick(tabKey, event) {
      console.log('onClick', tabKey, event);
    }
    ```

### 物料片段

提供了 4 个预设的组件模板：

1. **基础 TabCard** - 最简单的标签卡片
2. **带图标的 TabCard** - 包含图标的标签
3. **带徽章的 TabCard** - 包含消息数量徽章
4. **垂直布局 TabCard** - 图标在上、文本在下的垂直布局

## 使用方式

在低代码编辑器中：

1. 从组件面板拖拽 "标签卡片" 到画布
2. 在属性面板配置组件属性
3. 设置点击事件处理逻辑
4. 配置状态绑定（active、disabled、loading）

## 示例配置

### 基础示例

```json
{
  "componentName": "PisellCards.TabCard",
  "props": {
    "tabKey": "home",
    "label": "首页"
  }
}
```

### 完整示例

```json
{
  "componentName": "PisellCards.TabCard",
  "props": {
    "tabKey": "messages",
    "label": "消息",
    "icon": {
      "type": "JSSlot",
      "value": [{
        "componentName": "Icon",
        "props": {
          "type": "MessageOutlined",
          "size": 16
        }
      }]
    },
    "badge": {
      "count": 5,
      "color": "red"
    },
    "active": {
      "value": "{{state.activeTab === 'messages'}}"
    },
    "onClick": {
      "type": "JSFunction",
      "value": "function(tabKey, event) { this.setState({ activeTab: tabKey }); }"
    }
  }
}
```

## 注意事项

1. **tabKey 必填**：每个 TabCard 必须有唯一的 tabKey
2. **label 必填**：标签必须有显示文本
3. **状态配置**：active、disabled、loading 是对象类型，需要配置 value 字段
4. **图标配置**：使用 SlotSetter，可以插入 Icon 组件或其他 ReactNode
5. **事件处理**：onClick 事件会传递 tabKey 和 event 两个参数

## 开发建议

### 状态绑定

使用状态绑定实现标签切换：

```javascript
// 在页面 state 中定义 activeTab
state = {
  activeTab: 'home'
}

// TabCard 配置
{
  "active": {
    "value": "{{state.activeTab === 'home'}}"
  },
  "onClick": {
    "type": "JSFunction",
    "value": "function(tabKey) { this.setState({ activeTab: tabKey }); }"
  }
}
```

### 动态徽章

使用变量绑定动态更新徽章数字：

```javascript
{
  "badge": {
    "count": "{{state.unreadCount}}"
  }
}
```

### 禁用条件

根据条件禁用标签：

```javascript
{
  "disabled": {
    "value": "{{!state.hasPermission}}",
    "extra": "无权限"
  }
}
```

## 相关文档

- [TabCard 使用文档](../../src/components/PisellCards/docs/PisellCards.md)
- [TabCard 设计文档](../../src/components/PisellCards/docs/PisellCards.$tab-design.md)
- [TabCard 开发文档](../../src/components/PisellCards/docs/PisellCards.$tab-dev.md)
- [LowCode Engine Setter 文档](https://lowcode-engine.cn/site/docs/guide/appendix/setters)