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

# Empty 状态配置 - 快速参考

## 🎯 快速开始

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

## 📋 所有配置项

| 属性 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| `image` | `string` | `''` | 空状态图片地址 |
| `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） |

## 🎨 常用配置示例

### 小图片 + 浅色文字
```javascript
{
  image: '/static/empty.png',
  text: '暂无数据',
  imageWidth: 300,
  imageHeight: 300,
  textColor: '#CCCCCC',
  textSize: 24,
}
```

### 大图片 + 粗体文字
```javascript
{
  image: '/static/empty.png',
  text: '还没有点亮记录',
  imageWidth: 600,
  imageHeight: 600,
  textColor: '#333333',
  textSize: 36,
  textWeight: 'bold',
}
```

### 紧凑布局
```javascript
{
  image: '/static/empty.png',
  text: '暂无内容',
  imageWidth: 250,
  imageHeight: 250,
  gap: 12,
  textSize: 24,
}
```

## 🔧 适用组件

- ✅ `lcb-product`
- ✅ `lcb-list`

## 💡 提示

1. **图片优先级**：如果不提供 `image`，则只显示文字
2. **文字优先级**：如果不提供 `text`，则只显示图片
3. **响应式单位**：所有尺寸使用 `rpx`，自动适配不同屏幕
4. **字重选项**：`'normal'` | `'bold'` | `100` | `200` | `300` | `400` | `500` | `600` | `700` | `800` | `900`