@tplc/business 0.7.22 → 0.7.24

package/CHANGELOG.md

@@ -2,6 +2,35 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.7.24](https://gitlab888.30jia.com.cn/tourism-front/zero-code-pro/compare/v0.7.19...v0.7.24) (2025-12-21)
+
+
+### 🚀 Chore | 构建/工程依赖/工具
+
+* **release:** 0.7.20 ([3c69dbe](https://gitlab888.30jia.com.cn/tourism-front/zero-code-pro/commit/3c69dbe444fc50cc4f470ffa316a379c739dab4a))
+* **release:** 0.7.21 ([2c0db34](https://gitlab888.30jia.com.cn/tourism-front/zero-code-pro/commit/2c0db34f5ec241cc0297d68a5755c7ae7a75dcb8))
+* **release:** 0.7.22 ([31f6a87](https://gitlab888.30jia.com.cn/tourism-front/zero-code-pro/commit/31f6a874afdc82a4a58a8ef610194757666144d0))
+* **release:** 0.7.23 ([9c56ffd](https://gitlab888.30jia.com.cn/tourism-front/zero-code-pro/commit/9c56ffd1c060c2d81105a1049654f80081674d10))
+* **release:** 1.0.16 ([6ab5880](https://gitlab888.30jia.com.cn/tourism-front/zero-code-pro/commit/6ab588048db6a5b3d58529ad239f895c989d6d03))
+
+
+### ✨ Features | 新功能
+
+* 优化lcb ([4508077](https://gitlab888.30jia.com.cn/tourism-front/zero-code-pro/commit/45080773f73d2f9329de373d2b713eb5b644dea0))
+* 优化pay ([fdead3a](https://gitlab888.30jia.com.cn/tourism-front/zero-code-pro/commit/fdead3a80ca5d7de1de0eff9745e35e2c4fca6db))
+* 兼容点击 ([8027588](https://gitlab888.30jia.com.cn/tourism-front/zero-code-pro/commit/8027588f38760e3de6b01205ec982eceb91f0e86))
+* 新增progress ([474bcac](https://gitlab888.30jia.com.cn/tourism-front/zero-code-pro/commit/474bcac7c08cb234e1d6945036d8ca4d64fa4f88))
+* 更新wot-number ([f700988](https://gitlab888.30jia.com.cn/tourism-front/zero-code-pro/commit/f700988b15ec08eef0d1b8c140483eca8e0afed4))
+* 调整数据结构 ([b6f0d24](https://gitlab888.30jia.com.cn/tourism-front/zero-code-pro/commit/b6f0d24a26d3d4dbf05ca855ed687d6819eb7c0f))
+
+### [0.7.23](https://gitlab888.30jia.com.cn/tourism-front/zero-code-pro/compare/v1.0.16...v0.7.23) (2025-12-18)
+
+
+### ✨ Features | 新功能
+
+* 新增progress ([474bcac](https://gitlab888.30jia.com.cn/tourism-front/zero-code-pro/commit/474bcac7c08cb234e1d6945036d8ca4d64fa4f88))
+* 更新wot-number ([f700988](https://gitlab888.30jia.com.cn/tourism-front/zero-code-pro/commit/f700988b15ec08eef0d1b8c140483eca8e0afed4))
+
 ### [0.7.22](https://gitlab888.30jia.com.cn/tourism-front/zero-code-pro/compare/v0.7.21...v0.7.22) (2025-12-17)
 
 

package/components/lcb-area/lcb-area.vue

@@ -4,23 +4,12 @@
       v-bind="actionProps"
       :renderMode="actionProps?.jumpType ? 'button' : 'noClick'"
     >
-      <view
-        :style="{
-          display: display,
-          gap: transformValueUnit(gap),
-          overflowX: scrollX ? 'auto' : 'hidden',
-          ...innerStyle,
-        }"
-        class="h-full"
-      >
+      <view :style="containerStyle" class="h-full">
         <view
           v-for="(item, index) in list"
           :key="item.id"
           class="slot-wrapper z-1"
-          :style="{
-            ...getStyle(index),
-            overflowX,
-          }"
+          :style="getItemStyle(index)"
         >
           <slot :item="item" />
         </view>
@@ -30,7 +19,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, watch } from 'vue'
+import { computed, watch, ref } from 'vue'
 import { LcbAreaProps } from './types'
 import { getFlexStyle, transformValueUnit } from '@tplc/business/utils/transform'
 import { get } from 'lodash-es'
@@ -51,29 +40,66 @@ const props = withDefaults(defineProps<LcbAreaProps>(), {
   overflowX: 'initial',
 })
 const { userStore, innerDynamicData, pageInfo } = useDynamicData()
-const innerStyle = computed(() => {
+
+// 缓存 gap 的单位转换
+const gapValue = computed(() => transformValueUnit(props.gap))
+
+// 优化容器样式计算，合并为一个 computed
+const containerStyle = computed(() => {
+  const baseStyle = {
+    display: props.display,
+    gap: gapValue.value,
+    overflowX: (props.scrollX ? 'auto' : 'hidden') as 'auto' | 'hidden',
+  }
+
   if (props.display === 'grid') {
     return {
+      ...baseStyle,
       gridTemplateColumns: `repeat(${props.gridColumns}, minmax(0, 1fr))`,
     }
   }
+
   return {
+    ...baseStyle,
     flexDirection: props.displayFlex,
     alignItems: 'stretch',
   }
 })
-const getStyle = (index: number) => {
-  const flex = props.areaFlexs?.[index]?.flex ?? 1
-  return {
-    ...getFlexStyle(props.itemAlign),
-    gridColumn:
-      props.areaItems?.[index]?.colSpan && props.display === 'grid'
-        ? `span ${props.areaItems?.[index]?.colSpan} / span ${props.areaItems?.[index]?.colSpan}`
-        : undefined,
-    flex: props.display === 'flex' ? flex || 'auto' : undefined,
-    flexShrink: props.display === 'flex' ? (props.flexShrink ?? 1) : undefined,
-    width: flex ? '100%' : 'auto',
-  }
+
+// 缓存 itemAlign 的 flex 样式，避免每个 item 都重复计算
+const itemAlignStyle = computed(() => getFlexStyle(props.itemAlign))
+
+// 优化: 缓存公共样式部分
+const commonItemStyle = computed(() => ({
+  ...itemAlignStyle.value,
+  overflowX: props.overflowX,
+}))
+
+// 优化: 缓存每个 item 的样式,避免重复计算
+const itemStylesCache = computed(() => {
+  const isGrid = props.display === 'grid'
+  const isFlex = props.display === 'flex'
+  const flexShrink = props.flexShrink ?? 1
+
+  return (
+    props.list?.map((_, index) => {
+      const flex = props.areaFlexs?.[index]?.flex ?? 1
+      const colSpan = props.areaItems?.[index]?.colSpan
+
+      return {
+        ...commonItemStyle.value,
+        gridColumn: colSpan && isGrid ? `span ${colSpan} / span ${colSpan}` : undefined,
+        flex: isFlex ? flex || 'auto' : undefined,
+        flexShrink: isFlex ? flexShrink : undefined,
+        width: flex ? '100%' : 'auto',
+      }
+    }) || []
+  )
+})
+
+// 优化: 使用缓存的样式
+const getItemStyle = (index: number) => {
+  return itemStylesCache.value[index] || commonItemStyle.value
 }
 
 const getData = async () => {
@@ -88,16 +114,26 @@ const getData = async () => {
 
 /** 处理跳转链接中的动态参数 */
 const actionProps = computed(() => {
+  // 优化: 提前返回,避免不必要的计算
   if (props.dynamicActionKey) {
     return get(innerDynamicData.value, props.dynamicActionKey)
   }
+
+  // 优化: 只在 jumpUrl 存在时才调用 getDynamicData
+  const jumpUrl = props.action?.jumpUrl
+  if (!jumpUrl) {
+    return props.action
+  }
+
   return {
     ...props.action,
-    jumpUrl: getDynamicData(props.action?.jumpUrl, {
+    jumpUrl: getDynamicData(jumpUrl, {
       store: innerDynamicData.value,
     }),
   }
 })
+
+// 优化: 移除 deep: true,只监听引用变化
 watch(
   () => props.dataSource,
   () => {
@@ -105,43 +141,55 @@ watch(
   },
   {
     immediate: true,
-    deep: true,
   },
 )
+
+// 优化: 提取比较逻辑,减少重复代码
+const compareValues = (value: any, compareValue: string, compareType: string) => {
+  switch (compareType) {
+    case '=':
+      return `${value}` === compareValue
+    case '>=':
+      return value >= compareValue
+    case '<=':
+      return value <= compareValue
+    case '>':
+      return value > compareValue
+    case '<':
+      return value < compareValue
+    case '!=':
+      return value !== compareValue
+    case 'includes':
+      return value?.includes?.(compareValue) ?? false
+    default:
+      return `${value}` === compareValue
+  }
+}
+
+// 优化: 缓存数据源
+const dependDataSource = computed(() => {
+  return props.keyFromUser ? userStore?.userInfo : innerDynamicData.value
+})
+
 const showArea = computed(() => {
-  if (props.dependKey) {
-    const value = get(
-      props.keyFromUser ? userStore?.userInfo : innerDynamicData.value,
-      props.dependKey,
-    )
-
-    if (props.dependKeyCompareValue) {
-      const compareValue = `${props.dependKeyCompareValue}`
-      switch (props.compareType) {
-        case '=':
-          return `${value}` === compareValue
-        case '>=':
-          return value >= compareValue
-        case '<=':
-          return value <= compareValue
-        case '>':
-          return value > compareValue
-        case '<':
-          return value < compareValue
-        case '!=':
-          return value !== compareValue
-        case 'includes':
-          return value.includes(compareValue)
-        default:
-          return `${value}` === compareValue
-      }
-    }
-    if (value === undefined) {
-      return false
-    }
-    return props.reverse ? !value : Boolean(value)
+  // 优化: 提前返回,避免不必要的计算
+  if (!props.dependKey) {
+    return true
+  }
+
+  const value = get(dependDataSource.value, props.dependKey)
+
+  // 优化: 合并 undefined 检查
+  if (value === undefined) {
+    return false
+  }
+
+  if (props.dependKeyCompareValue) {
+    const compareValue = `${props.dependKeyCompareValue}`
+    return compareValues(value, compareValue, props.compareType || '=')
   }
-  return true
+
+  return props.reverse ? !value : Boolean(value)
 })
 </script>
 

package/components/lcb-block/lcb-block.vue

@@ -1,27 +1,8 @@
 <template>
   <view
-    :style="{
-      width: position === 'absolute' ? '100%' : '',
-      padding: `${transformValueUnit(paddingTop || paddingVertical || 0)} ${transformValueUnit(paddingRight || paddingHorizontal || 0)} ${transformValueUnit(paddingBottom || paddingVertical || 0)} ${transformValueUnit(paddingLeft || paddingHorizontal || 0)}`,
-      borderRadius: `${transformValueUnit(topRadius || radius)} ${transformValueUnit(topRadius || radius)} ${transformValueUnit(bottomRadius || radius)} ${transformValueUnit(bottomRadius || radius)}`,
-      color,
-      background: `${backgroundPosition} / ${backgroundSize} ${backgroundRepeat} url('${dynamicBgImage}'), ${innerBackgroundColor || 'transparent'}`,
-      fontSize: transformValueUnit(fontSize),
-      fontWeight,
-      borderColor,
-      zIndex,
-      position,
-      borderWidth: transformValueUnit(borderWidth),
-      boxShadow:
-        shadowColor && shadowSize ? `0px 0px ${blurSize}px ${shadowSize}px ${shadowColor}` : '',
-      textAlign,
-      margin: `${transformValueUnit(floatUp ? -floatUp : marginTop || 0)} ${transformValueUnit(marginRight || marginHorizontal || 0)} ${transformValueUnit(marginBottom || 0)} ${transformValueUnit(marginLeft || marginHorizontal || 0)}`,
-      ...customStyle,
-      ...getFlexStyle(align),
-      ...getInnerStyle,
-    }"
+    :style="getFinalStyle"
     class="box-border overflow-hidden relative"
-    :class="customClass"
+    :class="props.customClass"
   >
     <slot />
   </view>
@@ -69,11 +50,11 @@ const innerBackgroundColor = computed(() => {
 const getInnerStyle = computed(() => {
   const innerStyle = Object.keys(props.dynamicStyleOptions || {}).reduce(
     (acc, key) => {
-      const currentOptions = props.dynamicStyleOptions[key]
+      const currentOptions = props.dynamicStyleOptions?.[key]
       if (key) {
         const data = get(
-          currentOptions.keyFrom === 'user' ? userStore?.userInfo : innerDynamicData.value,
-          currentOptions.dynamicKey,
+          currentOptions?.keyFrom === 'user' ? userStore?.userInfo : innerDynamicData.value,
+          currentOptions?.dynamicKey || '',
         )
         if (data) {
           acc[key] = data
@@ -86,4 +67,64 @@ const getInnerStyle = computed(() => {
   )
   return innerStyle
 })
+
+// 缓存 padding 计算结果，减少 transformValueUnit 调用次数
+const paddingStyle = computed(() => {
+  const top = transformValueUnit(props.paddingTop || props.paddingVertical || 0)
+  const right = transformValueUnit(props.paddingRight || props.paddingHorizontal || 0)
+  const bottom = transformValueUnit(props.paddingBottom || props.paddingVertical || 0)
+  const left = transformValueUnit(props.paddingLeft || props.paddingHorizontal || 0)
+  return `${top} ${right} ${bottom} ${left}`
+})
+
+// 缓存 margin 计算结果
+const marginStyle = computed(() => {
+  const top = transformValueUnit(props.floatUp ? -props.floatUp : props.marginTop || 0)
+  const right = transformValueUnit(props.marginRight || props.marginHorizontal || 0)
+  const bottom = transformValueUnit(props.marginBottom || 0)
+  const left = transformValueUnit(props.marginLeft || props.marginHorizontal || 0)
+  return `${top} ${right} ${bottom} ${left}`
+})
+
+// 缓存 borderRadius 计算结果，避免重复计算
+const borderRadiusStyle = computed(() => {
+  const topR = props.topRadius || props.radius
+  const bottomR = props.bottomRadius || props.radius
+  const topValue = transformValueUnit(topR)
+  const bottomValue = transformValueUnit(bottomR)
+  return `${topValue} ${topValue} ${bottomValue} ${bottomValue}`
+})
+
+// 优化 background 字符串拼接
+const backgroundStyle = computed(() => {
+  const bgImage = dynamicBgImage.value
+  const bgColor = innerBackgroundColor.value || 'transparent'
+  if (!bgImage) return bgColor
+  return `${props.backgroundPosition} / ${props.backgroundSize} ${props.backgroundRepeat} url('${bgImage}'), ${bgColor}`
+})
+
+const getFinalStyle = computed(() => {
+  return {
+    width: props.position === 'absolute' ? '100%' : '',
+    padding: paddingStyle.value,
+    borderRadius: borderRadiusStyle.value,
+    color: props.color,
+    background: backgroundStyle.value,
+    fontSize: transformValueUnit(props.fontSize),
+    fontWeight: props.fontWeight,
+    borderColor: props.borderColor,
+    zIndex: props.zIndex,
+    position: props.position,
+    borderWidth: transformValueUnit(props.borderWidth),
+    boxShadow:
+      props.shadowColor && props.shadowSize
+        ? `0px 0px ${props.blurSize}px ${props.shadowSize}px ${props.shadowColor}`
+        : '',
+    textAlign: props.textAlign,
+    margin: marginStyle.value,
+    ...props.customStyle,
+    ...getFlexStyle(props.align),
+    ...getInnerStyle.value,
+  }
+})
 </script>

package/components/lcb-button/lcb-button.vue

@@ -1,29 +1,19 @@
 <template>
   <template v-if="mode === 'noStyle'">{{ innerValue }}</template>
-  <view
-    class="w-full h-full"
-    :style="{
-      ...innerStyle,
-    }"
-    v-else-if="dynamicKey && hideWhenDynamicKeyNotExist ? dynamicValue : true"
-  >
+  <view class="w-full h-full" :style="wrapperStyle" v-else-if="shouldRender">
     <lcb-block
-      v-bind="styleOptions[0]"
+      v-bind="blockProps"
       :customClass="`${customClass} border-solid`"
-      :customStyle="{
-        width: props.fillWidth ? '100%' : 'fit-content',
-        height: props.fillHeight ? '100%' : 'fit-content',
-        ...innerItemStyle,
-      }"
+      :customStyle="blockCustomStyle"
     >
       <lcb-action-view
         v-bind="actionProps"
         @avatar="onAvatar"
         @click="handleClick"
-        :customStyle="styleOptions[1]"
+        :customStyle="actionPaddingStyle"
         :renderMode="!actionProps?.jumpType && mode !== 'image' ? 'noClick' : 'button'"
       >
-        <view class="!flex items-center justify-center" :style="`gap: ${iconGap}rpx`">
+        <view class="!flex items-center justify-center" :style="iconGapStyle">
           <wd-icon
             v-if="icon"
             :name="icon"
@@ -47,6 +37,9 @@
               v-if="innerValue"
             />
           </template>
+          <template v-else-if="mode === 'progress'">
+            <wd-progress :value="innerValue" v-bind="progressProps" />
+          </template>
           <text
             v-else
             style="line-height: 1.54"
@@ -87,6 +80,7 @@ const props = withDefaults(defineProps<LcbButtonProps>(), {
 })
 const { userStore, innerDynamicData } = useDynamicData()
 
+// 优化: 缓存 store 数据源
 const store = computed(() => {
   return props.keyFromUser ? userStore?.userInfo : innerDynamicData.value
 })
@@ -99,6 +93,14 @@ const dynamicValue = computed(() => {
   return value
 })
 
+// 优化: 提取条件渲染逻辑,避免在模板中重复计算
+const shouldRender = computed(() => {
+  if (!props.dynamicKey || !props.hideWhenDynamicKeyNotExist) {
+    return true
+  }
+  return !!dynamicValue.value
+})
+
 const handleClick = () => {
   if (props.mode === 'image' && innerValue.value && props.enablePreview) {
     uni.previewImage({
@@ -119,16 +121,25 @@ const innerValue = computed(() => {
 
 /** 处理跳转链接中的动态参数 */
 const actionProps = computed(() => {
+  // 优化: 提前返回,避免不必要的计算
   if (props.dynamicActionKey) {
     return get(innerDynamicData.value, props.dynamicActionKey)
   }
+
+  // 优化: 只在 jumpUrl 存在时才调用 getDynamicData
+  const jumpUrl = props.action?.jumpUrl
+  if (!jumpUrl) {
+    return props.action
+  }
+
   return {
     ...props.action,
-    jumpUrl: getDynamicData(props.action?.jumpUrl, {
+    jumpUrl: getDynamicData(jumpUrl, {
       store: store.value,
     }),
   }
 })
+
 const onAvatar = (headImgUrl) => {
   userStore?.updateUser(
     {
@@ -137,6 +148,8 @@ const onAvatar = (headImgUrl) => {
     true,
   )
 }
+
+// 优化: 缓存样式对象,避免在模板中创建新对象
 const innerStyle = computed(() => {
   return getFlexStyle(props.align)
 })
@@ -145,7 +158,29 @@ const innerItemStyle = computed(() => {
   return getFlexStyle(props.itemAlign)
 })
 
-const styleOptions = computed<[Record<string, any>, string]>(() => {
+// 优化: 将 wrapper 样式单独提取
+const wrapperStyle = computed(() => innerStyle.value)
+
+// 优化: 将 iconGap 样式单独提取,避免模板字符串
+const iconGapStyle = computed(() => `gap: ${props.iconGap}rpx`)
+
+// 优化: 将 block customStyle 单独提取
+const blockCustomStyle = computed(() => ({
+  width: props.fillWidth ? '100%' : 'fit-content',
+  height: props.fillHeight ? '100%' : 'fit-content',
+  ...innerItemStyle.value,
+}))
+
+// 优化: 分离 padding 计算和 block props,避免解构整个 props
+const actionPaddingStyle = computed(() => {
+  const top = transformValueUnit(props.paddingTop || props.paddingVertical)
+  const right = transformValueUnit(props.paddingRight || props.paddingHorizontal)
+  const bottom = transformValueUnit(props.paddingBottom || props.paddingVertical)
+  const left = transformValueUnit(props.paddingLeft || props.paddingHorizontal)
+  return `width: 100%; padding:${top} ${right} ${bottom} ${left}`
+})
+
+const blockProps = computed(() => {
   const {
     paddingVertical,
     paddingHorizontal,
@@ -155,9 +190,7 @@ const styleOptions = computed<[Record<string, any>, string]>(() => {
     paddingRight,
     ...other
   } = props
-
-  const actionStyle = `width: 100%; padding:${transformValueUnit(paddingTop || paddingVertical)} ${transformValueUnit(paddingRight || paddingHorizontal)} ${transformValueUnit(paddingBottom || paddingVertical)} ${transformValueUnit(paddingLeft || paddingHorizontal)}`
-  return [other, actionStyle]
+  return other
 })
 </script>
 <style lang="scss" scoped>

package/components/lcb-button/types.ts

@@ -1,10 +1,12 @@
+import { progressProps } from '@tplc/wot/components/wd-progress/types'
 import { LcbActionViewProps } from '../lcb-action-view/types'
 import { LcbBlockProps } from '../lcb-block/types'
+import { ExtractPropTypes } from 'vue'
 
 export interface LcbButtonProps extends LcbBlockProps {
   text: string
   action?: LcbActionViewProps
-  mode: 'image' | 'text' | 'noStyle' | 'qrcode'
+  mode: 'image' | 'text' | 'noStyle' | 'qrcode' | 'progress'
   url?: string
   imageWidth?: number
   imageHeight?: number
@@ -36,4 +38,5 @@ export interface LcbButtonProps extends LcbBlockProps {
   // 动态action key
   dynamicActionKey?: string
   lineClamp?: number
+  progressProps?: ExtractPropTypes<typeof progressProps>
 }

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

@@ -2,11 +2,9 @@
   <lcb-block v-bind="$props" :custom-style="listStyle" v-if="renderList.length">
     <view
       v-for="(item, index) in renderList"
-      :key="index"
+      :key="getItemKey(item, index)"
       class="flex-shrink-0"
-      :style="{
-        width: childrenAutoWidth ? 'auto' : width ? transformValueUnit(width) : '100%',
-      }"
+      :style="itemStyle"
     >
       <slot :data="item" :list="list" />
     </view>
@@ -15,7 +13,7 @@
 
 <script setup lang="ts">
 import { transformValueUnit } from '@tplc/business/utils/transform'
-import { computed, ref, watchEffect } from 'vue'
+import { computed, ref, watch, shallowRef } from 'vue'
 import useDynamicData from '../../hooks/useDynamicData'
 import { dynamicRequest } from '../../utils/request'
 import { LcbWrapperListProps } from './types'
@@ -32,9 +30,16 @@ const props = withDefaults(defineProps<LcbWrapperListProps>(), {
   flexDirection: 'column',
 })
 const { userStore, innerDynamicData } = useDynamicData()
-const renderList = ref<unknown[]>([{ walletAmount: 1 }])
+// 使用 shallowRef 优化大数组的响应式性能
+const renderList = shallowRef<unknown[]>([])
+const isLoading = ref(false)
 
+// 优化:检查是否需要转换,避免不必要的遍历
 const transformStringArrayToObjectArray = (data: unknown[]): unknown[] => {
+  // 如果第一个元素已经是对象,假设整个数组都是对象
+  if (data.length > 0 && typeof data[0] === 'object' && data[0] !== null) {
+    return data
+  }
   return data.map((item) => {
     if (typeof item === 'string') {
       return { label: item }
@@ -43,31 +48,68 @@ const transformStringArrayToObjectArray = (data: unknown[]): unknown[] => {
   })
 }
 
-watchEffect(async () => {
-  let data: unknown[] = []
-  const dynamicData = await dynamicRequest(
-    props.dataSource,
-    innerDynamicData.value,
-    userStore?.userInfo,
-  )
-  if (dynamicData) {
-    data = dynamicData
+// 优化:使用 watch 替代 watchEffect,明确依赖并添加防抖和加载状态
+let loadingTimer: ReturnType<typeof setTimeout> | null = null
+watch(
+  () => [props.dataSource, innerDynamicData.value, userStore?.userInfo] as const,
+  async ([dataSource, dynamicData, userInfo]) => {
+    // 防抖处理,避免频繁请求
+    if (loadingTimer) {
+      clearTimeout(loadingTimer)
+    }
+
+    loadingTimer = setTimeout(async () => {
+      // 防止重复请求
+      if (isLoading.value) return
+
+      isLoading.value = true
+      try {
+        let data: unknown[] = []
+        const result = await dynamicRequest(dataSource, dynamicData, userInfo)
+        if (result) {
+          data = result
+        }
+        // 使用 shallowRef 时需要重新赋值整个数组
+        renderList.value = Array.isArray(data) ? transformStringArrayToObjectArray(data) : []
+      } finally {
+        isLoading.value = false
+      }
+    }, 100) // 100ms 防抖
+  },
+  { immediate: true },
+)
+
+// 优化:缓存 key 获取逻辑,减少属性访问
+const getItemKey = (item: any, index: number) => {
+  return item?.id ?? item?.key ?? index
+}
+
+// 优化:提取 gap 计算,避免在 listStyle 中重复计算
+const gapValue = computed(() => transformValueUnit(props.gap))
+
+// 优化:简化条件判断逻辑
+const itemStyle = computed(() => {
+  let width = '100%'
+  if (props.childrenAutoWidth) {
+    width = 'auto'
+  } else if (props.width) {
+    width = transformValueUnit(props.width)
   }
-  // 转换字符串数组为对象数组的辅助函数
-  renderList.value = Array.isArray(data) ? transformStringArrayToObjectArray(data) : []
+  return { width }
 })
+
+// 优化:减少对象创建,使用固定的样式对象
 const listStyle = computed(() => {
-  const style = {
+  return {
     width: '100%',
     display: props.display,
     'flex-direction': props.flexDirection,
-    gap: transformValueUnit(props.gap),
+    gap: gapValue.value,
     'align-items': 'stretch',
     'grid-template-columns': `repeat(${props.gridColumns}, minmax(0, 1fr))`,
     'overflow-x': props.scrollX ? 'auto' : 'hidden',
     'white-space': props.scrollX ? 'nowrap' : 'normal',
   }
-  return style
 })
 </script>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tplc/business",
-  "version": "0.7.22",
+  "version": "0.7.24",
   "keywords": [
     "业务组件"
   ],
@@ -11,7 +11,7 @@
   },
   "peerDependencies": {
     "vue": ">=3.2.47",
-    "@tplc/wot": "1.0.15"
+    "@tplc/wot": "1.0.16"
   },
   "engines": {
     "node": ">=18",

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

@@ -1,9 +1,11 @@
+import { progressProps } from '@tplc/wot/components/wd-progress/types'
 import { LcbActionViewProps } from '../lcb-action-view/types'
 import { LcbBlockProps } from '../lcb-block/types'
+import { ExtractPropTypes } from 'vue'
 export interface LcbButtonProps extends LcbBlockProps {
   text: string
   action?: LcbActionViewProps
-  mode: 'image' | 'text' | 'noStyle' | 'qrcode'
+  mode: 'image' | 'text' | 'noStyle' | 'qrcode' | 'progress'
   url?: string
   imageWidth?: number
   imageHeight?: number
@@ -32,4 +34,5 @@ export interface LcbButtonProps extends LcbBlockProps {
     | 'bottom-right'
   dynamicActionKey?: string
   lineClamp?: number
+  progressProps?: ExtractPropTypes<typeof progressProps>
 }