@tplc/business/components/CHANGELOG_EMPTY.md

# 更新日志 - Empty 状态支持

**日期**: 2026-01-19

## ✨ 新增功能

创建了独立的 `lcb-empty` 组件，并为 `lcb-product`、`lcb-list` 和 `lcb-wrapper-list` 组件新增了 Empty 空状态支持。

### 功能特性

- ✅ 支持自定义空状态图片
- ✅ 支持自定义空状态文字
- ✅ 支持自定义图片尺寸（宽度和高度）
- ✅ 支持自定义文字样式（颜色、大小、粗细）
- ✅ 支持自定义图片与文字的间距
- ✅ 通过独立的 `emptyProps` 属性配置

### 配置项

```typescript
interface LcbEmptyProps {
  image?: string           // 空状态图片地址
  text?: string            // 空状态文字，默认: '暂无数据'
  imageWidth?: number      // 图片宽度（rpx），默认: 400
  imageHeight?: number     // 图片高度（rpx），默认: 400
  textColor?: string       // 文字颜色，默认: '#999999'
  textSize?: number        // 文字大小（rpx），默认: 28
  textWeight?: string      // 文字粗细，默认: 'normal'
  gap?: number             // 图片与文字间距（rpx），默认: 24
  minHeight?: number       // 最小高度（rpx），默认: 400
  paddingTop?: number      // 内边距上，默认: 0
  paddingRight?: number    // 内边距右，默认: 0
  paddingBottom?: number   // 内边距下，默认: 0
  paddingLeft?: number     // 内边距左，默认: 0
}
```

### 使用示例

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

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

<!-- lcb-wrapper-list 组件 -->
<lcb-wrapper-list
  :dataSource="dataSource"
  :emptyProps="{
    image: '/static/empty.png',
    text: '暂无数据',
  }"
>
  <template #default="{ data }">
    <view>{{ data }}</view>
  </template>
</lcb-wrapper-list>

<!-- 直接使用 lcb-empty 组件 -->
<lcb-empty
  image="/static/empty.png"
  text="还没有点亮记录"
/>
```

## 📁 修改的文件

### 新增组件
- `packages/business/components/lcb-empty/lcb-empty.vue`
  - 独立的空状态组件
  - 可在多个组件中复用

- `packages/business/components/lcb-empty/types.ts`
  - `LcbEmptyProps` 接口定义

- `packages/business/components/lcb-empty/README.md`
  - 组件使用文档

### 类型定义
- `packages/business/components/lcb-product/types.ts`
  - 导入 `LcbEmptyProps` 接口
  - 在 `LcbProductProps` 中添加 `emptyProps` 属性

- `packages/business/components/lcb-list/types.ts`
  - 导入 `LcbEmptyProps` 接口
  - 在 `LcbListProps` 中添加 `emptyProps` 属性

- `packages/business/components/lcb-wrapper-list/types.ts`
  - 导入 `LcbEmptyProps` 接口
  - 在 `LcbWrapperListProps` 中添加 `emptyProps` 属性

### 组件实现
- `packages/business/components/lcb-product/lcb-product.vue`
  - 使用 `lcb-empty` 组件替换原有空状态实现
  - 新增 `showEmpty` 和 `mergedEmptyProps` 计算属性

- `packages/business/components/lcb-list/lcb-list.vue`
  - 将 `emptyProps` 透传给 `lcb-product` 组件

- `packages/business/components/lcb-wrapper-list/lcb-wrapper-list.vue`
  - 添加空状态显示逻辑
  - 使用 `lcb-empty` 组件
  - 新增 `showEmpty` 和 `mergedEmptyProps` 计算属性

### 静态资源
- `packages/engine/src/static/empty.png`
  - 添加默认空状态图片

### 文档
- `packages/business/components/lcb-product/EMPTY_USAGE.md` - 详细使用文档
- `packages/business/components/lcb-product/EMPTY_IMPLEMENTATION.md` - 实现说明
- `packages/business/components/lcb-product/EMPTY_QUICK_REF.md` - 快速参考

### 示例
- `packages/engine/src/pages/lcb-product/empty-demo.vue` - 完整示例页面

## 🔄 兼容性

- ✅ 向下兼容，不影响现有功能
- ✅ 可选配置，不配置时使用默认值
- ✅ 支持所有 `lcb-product` 的布局模式（list、grid、waterfall、horizontal）

## 📝 注意事项

1. 所有尺寸单位使用 `rpx`（响应式像素）
2. 空状态在数据加载完成且列表为空时自动显示
3. 图片和文字都是可选的，可以只显示其中一个
4. 空状态会继承父组件的内边距设置

## 🎯 适用场景

- 商品列表为空时的提示
- 搜索无结果时的展示
- 筛选条件过滤后无数据的提示
- 用户收藏、点亮等记录为空的展示

## 📚 相关文档

- [详细使用说明](./EMPTY_USAGE.md)
- [实现文档](./EMPTY_IMPLEMENTATION.md)
- [快速参考](./EMPTY_QUICK_REF.md)