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

# Empty 状态功能实现总结

## 修改的文件

### 1. 类型定义文件

#### `/packages/business/components/lcb-product/types.ts`
- 新增 `EmptyProps` 接口，定义空状态配置项
- 在 `LcbProductProps` 中添加 `emptyProps?: EmptyProps` 属性

#### `/packages/business/components/lcb-list/types.ts`
- 导入 `EmptyProps` 类型
- 在 `LcbListProps` 中添加 `emptyProps?: EmptyProps` 属性

### 2. 组件文件

#### `/packages/business/components/lcb-product/lcb-product.vue`
**修改内容：**
- 在 props 默认值中添加 `emptyProps` 的默认配置
- 新增 `showEmpty` 计算属性，判断是否显示空状态
- 新增 `mergedEmptyProps` 计算属性，合并默认配置和用户配置
- 在模板中添加空状态显示逻辑：
  - 当 `showEmpty` 为 `true` 时显示空状态
  - 空状态包含图片和文字
  - 所有样式属性可配置

#### `/packages/business/components/lcb-list/lcb-list.vue`
**修改内容：**
- 将 `emptyProps` 透传给内部的 `lcb-product` 组件

### 3. 静态资源

#### `/packages/engine/src/static/empty.png`
- 添加默认的空状态图片（从用户提供的图片复制）

### 4. 文档文件

#### `/packages/business/components/lcb-product/EMPTY_USAGE.md`
- 创建详细的使用文档
- 包含配置项说明、默认值、使用示例等

#### `/packages/engine/src/pages/lcb-product/empty-demo.vue`
- 创建完整的示例页面
- 展示多种配置场景

## EmptyProps 配置项

```typescript
interface EmptyProps {
  image?: string           // 空状态图片地址
  text?: string            // 空状态文字
  imageWidth?: number      // 图片宽度（rpx）
  imageHeight?: number     // 图片高度（rpx）
  textColor?: string       // 文字颜色
  textSize?: number        // 文字大小（rpx）
  textWeight?: string      // 文字粗细
  gap?: number             // 图片与文字的间距（rpx）
}
```

## 默认配置

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

## 使用示例

### lcb-product 组件

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

### lcb-list 组件

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

## 功能特点

1. ✅ **完全可配置**：所有视觉属性都可以自定义
2. ✅ **默认值友好**：即使不配置也有合理的默认显示
3. ✅ **类型安全**：完整的 TypeScript 类型支持
4. ✅ **响应式设计**：使用 rpx 单位，适配不同屏幕
5. ✅ **独立配置**：通过 `emptyProps` 单独配置，不影响其他属性
6. ✅ **兼容性好**：不影响现有功能，向下兼容

## 显示逻辑

空状态在以下条件同时满足时显示：
- 数据加载完成（`loading === false`）
- 数据列表为空（`renderList.length === 0`）

## 样式特性

1. **图片**：
   - 支持自定义宽高
   - 使用 `aspectFit` 模式保持比例
   - 可选显示（如果不提供 image 则不显示图片）

2. **文字**：
   - 支持自定义颜色
   - 支持自定义字号
   - 支持自定义字重（normal、bold、100-900）
   - 可选显示（如果不提供 text 则不显示文字）

3. **布局**：
   - 垂直居中对齐
   - 图片在上，文字在下
   - 可自定义间距

## 注意事项

1. 所有尺寸单位使用 `rpx`（响应式像素）
2. 图片路径可以是相对路径或绝对 URL
3. 空状态会继承父组件的内边距设置
4. 最小高度为 `400rpx`，确保有足够的显示空间