@tplc/business/components/lcb-product/EMPTY_USAGE.md

# Empty 状态配置说明

## 功能概述

`lcb-product` 和 `lcb-list` 组件现在支持通过 `emptyProps` 配置空状态的展示，包括图片、文字以及样式定制。

## 配置项说明

### EmptyProps 接口

```typescript
interface EmptyProps {
  /** 空状态图片地址 */
  image?: string
  /** 空状态文字 */
  text?: string
  /** 图片宽度（rpx） */
  imageWidth?: number
  /** 图片高度（rpx） */
  imageHeight?: number
  /** 文字颜色 */
  textColor?: string
  /** 文字大小（rpx） */
  textSize?: number
  /** 文字粗细 */
  textWeight?: 'normal' | 'bold' | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
  /** 图片与文字的间距（rpx） */
  gap?: number
}
```

## 默认配置

```javascript
{
  image: '',
  text: '还没有点亮记录',
  imageWidth: 400,
  imageHeight: 400,
  textColor: '#999999',
  textSize: 28,
  textWeight: 'normal',
  gap: 24,
}
```

## 使用示例

### 基础使用

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

### 完整配置

```vue
<template>
  <lcb-product
    :items="productList"
    :emptyProps="{
      image: '/static/empty.png',
      text: '还没有点亮记录',
      imageWidth: 500,
      imageHeight: 500,
      textColor: '#666666',
      textSize: 32,
      textWeight: 'bold',
      gap: 32,
    }"
  />
</template>
```

### 在 lcb-list 中使用

```vue
<template>
  <lcb-list
    pageFilterType="product-filter"
    :emptyProps="{
      image: '/static/empty.png',
      text: '还没有点亮记录',
      imageWidth: 400,
      imageHeight: 400,
      textColor: '#999999',
      textSize: 28,
      textWeight: 'normal',
      gap: 24,
    }"
  />
</template>
```

### 自定义不同的文字和样式

```vue
<template>
  <!-- 粗体大号文字 -->
  <lcb-product
    :items="[]"
    :emptyProps="{
      image: '/static/empty.png',
      text: '暂无内容',
      textSize: 36,
      textWeight: 'bold',
      textColor: '#333333',
    }"
  />

  <!-- 浅色文字 -->
  <lcb-product
    :items="[]"
    :emptyProps="{
      image: '/static/empty.png',
      text: '暂无数据',
      textSize: 26,
      textWeight: 300,
      textColor: '#CCCCCC',
    }"
  />
</template>
```

## 注意事项

1. **图片尺寸**：`imageWidth` 和 `imageHeight` 单位为 rpx（响应式像素）
2. **文字大小**：`textSize` 单位为 rpx
3. **间距**：`gap` 单位为 rpx，控制图片和文字之间的垂直间距
4. **文字粗细**：`textWeight` 支持 CSS 标准的字重值
5. **空状态显示时机**：当数据加载完成且列表为空时自动显示

## 效果预览

空状态展示效果：
- 居中显示图片
- 图片下方展示文字
- 可自定义所有视觉样式
- 响应式设计，适配不同屏幕尺寸