@tplc/business/components/lcb-empty/README.md

# lcb-empty 组件

通用的空状态展示组件，用于在列表、数据为空时显示友好的提示信息。

## 功能特性

- ✅ 支持自定义图片和文字
- ✅ 支持自定义图片尺寸
- ✅ 支持自定义文字样式（颜色、大小、粗细）
- ✅ 支持自定义图片与文字的间距
- ✅ 支持自定义内边距
- ✅ 响应式设计，使用 rpx 单位

## Props

### LcbEmptyProps

| 属性 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| `image` | `string` | `undefined` | 空状态图片地址 |
| `text` | `string` | `'暂无数据'` | 空状态文字 |
| `imageWidth` | `number` | `400` | 图片宽度（rpx） |
| `imageHeight` | `number` | `400` | 图片高度（rpx） |
| `textColor` | `string` | `'#999999'` | 文字颜色 |
| `textSize` | `number` | `28` | 文字大小（rpx） |
| `textWeight` | `string \| number` | `'normal'` | 文字粗细 |
| `gap` | `number` | `24` | 图片与文字间距（rpx） |
| `minHeight` | `number` | `400` | 最小高度（rpx） |
| `paddingTop` | `number` | `0` | 内边距 - 上（rpx） |
| `paddingRight` | `number` | `0` | 内边距 - 右（rpx） |
| `paddingBottom` | `number` | `0` | 内边距 - 下（rpx） |
| `paddingLeft` | `number` | `0` | 内边距 - 左（rpx） |

## 使用示例

### 基础使用

```vue
<template>
  <lcb-empty
    image="/static/empty.png"
    text="暂无数据"
  />
</template>
```

### 完整配置

```vue
<template>
  <lcb-empty
    image="/static/empty.png"
    text="还没有点亮记录"
    :imageWidth="500"
    :imageHeight="500"
    textColor="#666666"
    :textSize="32"
    textWeight="bold"
    :gap="32"
    :minHeight="600"
    :paddingTop="40"
    :paddingBottom="40"
  />
</template>
```

### 只显示图片

```vue
<template>
  <lcb-empty
    image="/static/empty.png"
    text=""
  />
</template>
```

### 只显示文字

```vue
<template>
  <lcb-empty text="暂无数据" />
</template>
```

## 在其他组件中使用

### lcb-product

```vue
<template>
  <lcb-product
    :items="[]"
    :emptyProps="{
      image: '/static/empty.png',
      text: '还没有点亮记录',
      imageWidth: 500,
      imageHeight: 500,
    }"
  />
</template>
```

### lcb-list

```vue
<template>
  <lcb-list
    pageFilterType="product-filter"
    :emptyProps="{
      image: '/static/empty.png',
      text: '还没有点亮记录',
    }"
  />
</template>
```

### lcb-wrapper-list

```vue
<template>
  <lcb-wrapper-list
    :dataSource="dataSource"
    :emptyProps="{
      image: '/static/empty.png',
      text: '暂无数据',
      imageWidth: 400,
      imageHeight: 400,
    }"
  >
    <template #default="{ data }">
      <view>{{ data }}</view>
    </template>
  </lcb-wrapper-list>
</template>
```

## 样式定制

### 文字粗细选项

`textWeight` 支持以下值：
- `'normal'` - 正常
- `'bold'` - 粗体
- `100` - 细体
- `200` - 特细
- `300` - 细
- `400` - 正常（等同于 'normal'）
- `500` - 中等
- `600` - 半粗
- `700` - 粗（等同于 'bold'）
- `800` - 特粗
- `900` - 黑体

## 布局说明

组件采用 Flexbox 垂直居中布局：
- 图片和文字垂直排列
- 内容水平居中
- 图片使用 `aspectFit` 模式保持比例
- 文字自动换行，最大宽度 100%

## 注意事项

1. **单位说明**：所有尺寸属性（如 `imageWidth`、`textSize`、`gap` 等）的单位都是 `rpx`
2. **可选元素**：图片和文字都是可选的，可以只显示其中一个
3. **响应式**：使用 `rpx` 单位确保在不同设备上显示一致
4. **内边距继承**：在 `lcb-product`、`lcb-list`、`lcb-wrapper-list` 等父组件中使用时，会自动继承父组件的内边距设置

## 相关组件

- `lcb-product` - 商品列表组件（支持 empty 状态）
- `lcb-list` - 通用列表组件（支持 empty 状态）
- `lcb-wrapper-list` - 包装列表组件（支持 empty 状态）

## 更新日志

### v1.0.0 (2026-01-19)

- 🎉 初始版本
- ✅ 从 `lcb-product` 中抽离成独立组件
- ✅ 支持在多个组件中复用
- ✅ 完整的类型支持