@tplc/business 0.7.80 → 0.7.82

package/components/lcb-product/EMPTY_IMPLEMENTATION.md

@@ -0,0 +1,152 @@
+# 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`，确保有足够的显示空间

package/components/lcb-product/EMPTY_QUICK_REF.md

@@ -0,0 +1,77 @@
+# 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`

package/components/lcb-product/EMPTY_USAGE.md

@@ -0,0 +1,147 @@
+# 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. **空状态显示时机**：当数据加载完成且列表为空时自动显示
+
+## 效果预览
+
+空状态展示效果：
+- 居中显示图片
+- 图片下方展示文字
+- 可自定义所有视觉样式
+- 响应式设计，适配不同屏幕尺寸

package/components/lcb-product/lcb-product.vue

@@ -200,12 +200,32 @@ const horizontalRows = computed(() => {
 
   return rows
 })
+
+// 计算是否显示空状态
+const showEmpty = computed(() => {
+  return !loading.value && renderList.value.length === 0
+})
+
+// 合并默认空状态配置（添加内边距）
+const mergedEmptyProps = computed(() => {
+  return {
+    ...props.emptyProps,
+    paddingTop: props.emptyProps?.paddingTop ?? props.paddingVertical ?? 0,
+    paddingRight: props.emptyProps?.paddingRight ?? props.paddingHorizontal ?? 0,
+    paddingBottom: props.emptyProps?.paddingBottom ?? props.paddingVertical ?? 0,
+    paddingLeft: props.emptyProps?.paddingLeft ?? props.paddingHorizontal ?? 0,
+  }
+})
 </script>
 
 <template>
   <lcb-block v-bind="loading ? blockProps[0] : {}">
     <ProductSkeleton :loading="loading" v-bind="$props">
+      <!-- Empty 状态 -->
+      <lcb-empty v-if="showEmpty" v-bind="mergedEmptyProps" />
+
       <lcb-block
+        v-else
         v-bind="{
           ...$props,
           shadowColor: blockShadowColor,

package/components/lcb-product/types.ts

@@ -1,4 +1,5 @@
 import { LcbBlockProps } from '../lcb-block/types'
+import { LcbEmptyProps } from '../lcb-empty/types'
 
 export interface LcbProductProps extends LcbBlockProps {
   // Define the component's prop types here
@@ -47,4 +48,5 @@ export interface LcbProductProps extends LcbBlockProps {
   itemVerticalPadding?: number
   itemHorizontalPadding?: number
   rows?: number // horizontal 模式下的行数，默认为 1
+  emptyProps?: LcbEmptyProps // 空状态配置
 }

package/components/lcb-wrapper-list/lcb-wrapper-list.vue

@@ -10,7 +10,10 @@
     :height="props.pageProps?.pagingUsePageScroll ? undefined : props.pageProps?.pagingHeight"
     v-if="props.pageProps?.pagingEnabled"
   >
-    <lcb-block v-bind="$props" :custom-style="listStyle">
+    <!-- Empty 状态 -->
+    <lcb-empty v-if="showEmpty" v-bind="mergedEmptyProps" />
+
+    <lcb-block v-else v-bind="$props" :custom-style="listStyle">
       <view
         v-for="(item, index) in renderList"
         :key="getItemKey(item, index)"
@@ -21,16 +24,22 @@
       </view>
     </lcb-block>
   </z-paging>
-  <lcb-block v-bind="$props" :custom-style="listStyle" v-else>
-    <view
-      v-for="(item, index) in renderList"
-      :key="getItemKey(item, index)"
-      class="flex-shrink-0"
-      :style="itemStyle"
-    >
-      <slot :data="item" :list="list" />
-    </view>
-  </lcb-block>
+
+  <template v-else>
+    <!-- Empty 状态 -->
+    <lcb-empty v-if="showEmpty" v-bind="mergedEmptyProps" />
+
+    <lcb-block v-else v-bind="$props" :custom-style="listStyle">
+      <view
+        v-for="(item, index) in renderList"
+        :key="getItemKey(item, index)"
+        class="flex-shrink-0"
+        :style="itemStyle"
+      >
+        <slot :data="item" :list="list" />
+      </view>
+    </lcb-block>
+  </template>
 </template>
 
 <script setup lang="ts">
@@ -155,6 +164,22 @@ const listStyle = computed(() => {
     'white-space': props.scrollX ? 'nowrap' : 'normal',
   }
 })
+
+// 计算是否显示空状态
+const showEmpty = computed(() => {
+  return renderList.value.length === 0
+})
+
+// 合并默认空状态配置（添加内边距）
+const mergedEmptyProps = computed(() => {
+  return {
+    ...props.emptyProps,
+    paddingTop: props.emptyProps?.paddingTop ?? props.paddingVertical ?? 0,
+    paddingRight: props.emptyProps?.paddingRight ?? props.paddingHorizontal ?? 0,
+    paddingBottom: props.emptyProps?.paddingBottom ?? props.paddingVertical ?? 0,
+    paddingLeft: props.emptyProps?.paddingLeft ?? props.paddingHorizontal ?? 0,
+  }
+})
 </script>
 
 <style lang="scss" scoped></style>

package/components/lcb-wrapper-list/types.ts

@@ -1,6 +1,8 @@
 import { LcbAreaProps } from '../lcb-area/types'
 import { DataSource } from '../../action'
 import { LcbBlockProps } from '../lcb-block/types'
+import { LcbEmptyProps } from '../lcb-empty/types'
+
 export interface LcbWrapperListProps extends LcbBlockProps {
   dataSource?: DataSource
   gap?: number
@@ -29,4 +31,5 @@ export interface LcbWrapperListProps extends LcbBlockProps {
      */
     pagingHeight?: string
   }
+  emptyProps?: LcbEmptyProps // 空状态配置
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tplc/business",
-  "version": "0.7.80",
+  "version": "0.7.82",
   "keywords": [
     "业务组件"
   ],

package/types/components/lcb-empty/types.d.ts

@@ -0,0 +1,28 @@
+export interface LcbEmptyProps {
+  /** 空状态图片地址 */
+  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
+  /** 最小高度（rpx） */
+  minHeight?: number
+  /** 内边距 - 上（rpx） */
+  paddingTop?: number
+  /** 内边距 - 右（rpx） */
+  paddingRight?: number
+  /** 内边距 - 下（rpx） */
+  paddingBottom?: number
+  /** 内边距 - 左（rpx） */
+  paddingLeft?: number
+}

package/types/components/lcb-img-nav/lcb-img-nav.vue.d.ts

@@ -75,6 +75,7 @@ declare const _default: import('vue').DefineComponent<
     paddingHorizontal: number
     paddingVertical: number
     textColor: string
+    textSize: number
     pictureDistribution: 3 | 4 | 5
     iconRadius: number
     iconBorderColor: string
@@ -84,7 +85,6 @@ declare const _default: import('vue').DefineComponent<
     divider: boolean
     arrowColor: string
     arrowSize: number
-    textSize: number
     urlKey: string
     titleKey: string
     titleBottom: number

package/types/components/lcb-list/lcb-list.vue.d.ts

@@ -108,6 +108,7 @@ declare const __VLS_component: import('vue').DefineComponent<
     mapTagMode: 'single' | 'multiple'
     mapConfigParams: string
     tagPosition: 'left' | 'right'
+    emptyProps: import('../lcb-empty/types').LcbEmptyProps
   },
   {}
 >

package/types/components/lcb-list/types.d.ts

@@ -1,6 +1,7 @@
 import { PageListProps } from './components/FilterList/type'
 import { LcbProductProps } from '../lcb-product/types'
 import { LcbBlockProps } from '../lcb-block/types'
+import { LcbEmptyProps } from '../lcb-empty/types'
 export interface LcbListProps extends LcbBlockProps {
   pageFilterType?: string
   pageListProps?: PageListProps
@@ -42,6 +43,7 @@ export interface LcbListProps extends LcbBlockProps {
   mapTagMode?: 'single' | 'multiple'
   mapConfigParams?: string
   tagPosition?: 'left' | 'right'
+  emptyProps?: LcbEmptyProps
 }
 export interface Option {
   label: string

package/types/components/lcb-product/types.d.ts

@@ -1,4 +1,5 @@
 import { LcbBlockProps } from '../lcb-block/types'
+import { LcbEmptyProps } from '../lcb-empty/types'
 export interface LcbProductProps extends LcbBlockProps {
   listType?: 'list' | 'horizontal' | 'grid' | 'waterfall'
   shadowColor?: string
@@ -43,4 +44,5 @@ export interface LcbProductProps extends LcbBlockProps {
   itemVerticalPadding?: number
   itemHorizontalPadding?: number
   rows?: number
+  emptyProps?: LcbEmptyProps
 }

package/types/components/lcb-user-top/lcb-user-top.vue.d.ts

@@ -107,9 +107,9 @@ declare const _default: import('vue').DefineComponent<
     paddingBottom: number
     paddingLeft: number
     paddingRight: number
-    iconType: 0 | 1
     textColor: string
     textSize: number
+    iconType: 0 | 1
     photoRound: boolean
     photoSize: number
     titleMarginTop: number

package/types/components/lcb-wrapper-list/types.d.ts

@@ -1,6 +1,7 @@
 import { LcbAreaProps } from '../lcb-area/types'
 import { DataSource } from '../../action'
 import { LcbBlockProps } from '../lcb-block/types'
+import { LcbEmptyProps } from '../lcb-empty/types'
 export interface LcbWrapperListProps extends LcbBlockProps {
   dataSource?: DataSource
   gap?: number
@@ -29,4 +30,5 @@ export interface LcbWrapperListProps extends LcbBlockProps {
      */
     pagingHeight?: string
   }
+  emptyProps?: LcbEmptyProps
 }