@tplc/business 0.7.23 → 0.7.25

package/CHANGELOG.md

@@ -2,6 +2,41 @@
 
 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.25](https://gitlab888.30jia.com.cn/tourism-front/zero-code-pro/compare/v0.7.23...v0.7.25) (2025-12-22)
+
+
+### 🚀 Chore | 构建/工程依赖/工具
+
+* **release:** 0.7.24 ([a8d4228](https://gitlab888.30jia.com.cn/tourism-front/zero-code-pro/commit/a8d4228a98f33d853e333cecf223731cf737091a))
+
+
+### ✨ Features | 新功能
+
+* 优化lcb ([4508077](https://gitlab888.30jia.com.cn/tourism-front/zero-code-pro/commit/45080773f73d2f9329de373d2b713eb5b644dea0))
+* 优化渲染 ([7ad9de0](https://gitlab888.30jia.com.cn/tourism-front/zero-code-pro/commit/7ad9de0f1effd3ba99d341927ce71ae8de2deec6))
+* 去掉异步 ([ee2e200](https://gitlab888.30jia.com.cn/tourism-front/zero-code-pro/commit/ee2e2000d17f36ba049727aab365631b8652ab50))
+
+### [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)
 
 

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

@@ -1,31 +1,27 @@
 <template>
   <lcb-block v-bind="$props" v-if="showArea">
-    <lcb-action-view
-      v-bind="actionProps"
-      :renderMode="actionProps?.jumpType ? 'button' : 'noClick'"
-    >
-      <view
-        :style="{
-          display: display,
-          gap: transformValueUnit(gap),
-          overflowX: scrollX ? 'auto' : 'hidden',
-          ...innerStyle,
-        }"
-        class="h-full"
-      >
+    <lcb-action-view v-bind="actionProps" v-if="actionProps?.jumpType">
+      <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>
       </view>
     </lcb-action-view>
+    <view :style="containerStyle" class="h-full" v-else>
+      <view
+        v-for="(item, index) in list"
+        :key="item.id"
+        class="slot-wrapper z-1"
+        :style="getItemStyle(index)"
+      >
+        <slot :item="item" />
+      </view>
+    </view>
   </lcb-block>
 </template>
 
@@ -51,29 +47,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 +121,27 @@ const getData = async () => {
 
 /** 处理跳转链接中的动态参数 */
 const actionProps = computed(() => {
+  const jumpUrl = props.action?.jumpUrl
+  if (!jumpUrl) {
+    return props.action
+  }
+
+  // 优化: 提前返回,避免不必要的计算
   if (props.dynamicActionKey) {
     return get(innerDynamicData.value, props.dynamicActionKey)
   }
+
+  // 优化: 只在 jumpUrl 存在时才调用 getDynamicData
+
   return {
     ...props.action,
-    jumpUrl: getDynamicData(props.action?.jumpUrl, {
+    jumpUrl: getDynamicData(jumpUrl, {
       store: innerDynamicData.value,
     }),
   }
 })
+
+// 优化: 移除 deep: true,只监听引用变化
 watch(
   () => props.dataSource,
   () => {
@@ -105,43 +149,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
   }
-  return true
+
+  if (props.dependKeyCompareValue) {
+    const compareValue = `${props.dependKeyCompareValue}`
+    return compareValues(value, compareValue, props.compareType || '=')
+  }
+
+  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/components/lcb-button-action/index.vue

@@ -0,0 +1,77 @@
+<template>
+  <lcb-action-view
+    v-bind="actionProps"
+    @avatar="onAvatar"
+    @click="handleClick"
+    :customStyle="actionPaddingStyle"
+    :renderMode="!actionProps?.jumpType && mode !== 'image' ? 'noClick' : 'button'"
+  >
+    <lcb-button-content
+      v-bind="props"
+      :innerValue="innerValue"
+      :store="store"
+      :dynamicValue="dynamicValue"
+    />
+  </lcb-action-view>
+</template>
+
+<script setup lang="ts">
+import { LcbButtonProps } from '../../types'
+import { computed } from 'vue'
+import { getDynamicData } from '../../../../utils/utils'
+import { transformValueUnit } from '../../../../utils/transform'
+import { LcbActionViewProps } from '../../../lcb-action-view/types'
+import LcbButtonContent from '../lcb-button-content/index.vue'
+defineOptions({
+  name: 'LcbButtonActionContent',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared',
+  },
+})
+const props = defineProps<
+  LcbButtonProps & {
+    innerValue?: string
+    actionProps: LcbActionViewProps
+    store: any
+    userStore: any
+    dynamicValue?: string
+  }
+>()
+// 优化: 分离 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 onAvatar = (headImgUrl) => {
+  props.userStore?.updateUser(
+    {
+      headImgUrl,
+    },
+    true,
+  )
+}
+
+const handleClick = () => {
+  if (props.mode === 'image' && innerValue.value && props.enablePreview) {
+    uni.previewImage({
+      urls: [innerValue.value],
+      current: innerValue.value,
+    })
+  }
+}
+const innerValue = computed(() => {
+  if (props.mode === 'image') {
+    return props.dynamicValue || props.url
+  }
+  return getDynamicData(props.text, {
+    store: props.store,
+    defaultText: props.textDefaultValue,
+  })
+})
+</script>

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

@@ -0,0 +1,53 @@
+<template>
+  <view class="!flex items-center justify-center" :style="iconGapStyle">
+    <wd-icon
+      v-if="icon"
+      :name="icon"
+      class-prefix="lcb"
+      :size="transformValueUnit(iconSize)"
+      :color="iconColor"
+    />
+    <template v-if="mode === 'image'">
+      <wd-img
+        :src="innerValue"
+        :width="transformValueUnit(imageWidth)"
+        :mode="imageHeight ? 'aspectFill' : 'widthFix'"
+        :height="imageHeight ? transformValueUnit(imageHeight) : 'auto'"
+      />
+    </template>
+    <template v-else-if="mode === 'qrcode'">
+      <wd-qr-code :size="qrCodeSize" canvasId="qrCode" :value="innerValue" 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"
+      class="whitespace-pre-wrap"
+      :class="lineClamp ? `line-clamp-${lineClamp}` : ''"
+    >
+      {{ innerValue }}
+    </text>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { LcbButtonProps } from '../../types'
+import { transformValueUnit } from '../../../../utils/transform'
+import { computed } from 'vue'
+defineOptions({
+  name: 'LcnButtonContent',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared',
+  },
+})
+const props = defineProps<
+  LcbButtonProps & { innerValue?: string; store: any; dynamicValue?: string }
+>()
+
+// 优化: 将 iconGap 样式单独提取,避免模板字符串
+const iconGapStyle = computed(() => `gap: ${props.iconGap}rpx`)
+</script>

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

@@ -1,74 +1,37 @@
 <template>
   <template v-if="mode === 'noStyle'">{{ innerValue }}</template>
-  <view
-    class="w-full h-full"
-    :style="{
-      ...innerStyle,
-    }"
-    v-else-if="dynamicKey && hideWhenDynamicKeyNotExist ? dynamicValue : true"
+  <lcb-block
+    v-bind="blockProps"
+    :customClass="`${customClass} border-solid w-full h-full`"
+    :customStyle="blockCustomStyle"
+    v-else-if="shouldRender"
   >
-    <lcb-block
-      v-bind="styleOptions[0]"
-      :customClass="`${customClass} border-solid`"
-      :customStyle="{
-        width: props.fillWidth ? '100%' : 'fit-content',
-        height: props.fillHeight ? '100%' : 'fit-content',
-        ...innerItemStyle,
-      }"
-    >
-      <lcb-action-view
-        v-bind="actionProps"
-        @avatar="onAvatar"
-        @click="handleClick"
-        :customStyle="styleOptions[1]"
-        :renderMode="!actionProps?.jumpType && mode !== 'image' ? 'noClick' : 'button'"
-      >
-        <view class="!flex items-center justify-center" :style="`gap: ${iconGap}rpx`">
-          <wd-icon
-            v-if="icon"
-            :name="icon"
-            class-prefix="lcb"
-            :size="transformValueUnit(iconSize)"
-            :color="iconColor"
-          />
-          <template v-if="mode === 'image'">
-            <wd-img
-              :src="innerValue"
-              :width="transformValueUnit(imageWidth)"
-              :mode="imageHeight ? 'aspectFill' : 'widthFix'"
-              :height="imageHeight ? transformValueUnit(imageHeight) : 'auto'"
-            />
-          </template>
-          <template v-else-if="mode === 'qrcode'">
-            <wd-qr-code
-              :size="qrCodeSize"
-              canvasId="qrCode"
-              :value="innerValue"
-              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"
-            class="whitespace-pre-wrap"
-            :class="lineClamp ? `line-clamp-${lineClamp}` : ''"
-          >
-            {{ innerValue }}
-          </text>
-        </view>
-      </lcb-action-view>
-    </lcb-block>
-  </view>
+    <lcb-button-action
+      v-bind="props"
+      v-if="actionProps?.jumpType || mode === 'image'"
+      :innerValue="innerValue"
+      :actionProps="actionProps"
+      :store="store"
+      :userStore="userStore"
+      :dynamicValue="dynamicValue"
+    />
+    <lcb-button-content
+      v-else
+      v-bind="props"
+      :innerValue="innerValue"
+      :store="store"
+      :dynamicValue="dynamicValue"
+    />
+  </lcb-block>
 </template>
 
 <script setup lang="ts">
 import { get } from 'lodash-es'
 import { computed } from 'vue'
 import useDynamicData from '../../hooks/useDynamicData'
-import { getFlexStyle, transformValueUnit } from '../../utils/transform'
+import { getFlexStyle } from '../../utils/transform'
+import LcbButtonAction from './components/lcb-button-action/index.vue'
+import LcbButtonContent from './components/lcb-button-content/index.vue'
 import { getDynamicData } from '../../utils/utils'
 import { LcbButtonProps } from './types'
 defineOptions({
@@ -90,6 +53,7 @@ const props = withDefaults(defineProps<LcbButtonProps>(), {
 })
 const { userStore, innerDynamicData } = useDynamicData()
 
+// 优化: 缓存 store 数据源
 const store = computed(() => {
   return props.keyFromUser ? userStore?.userInfo : innerDynamicData.value
 })
@@ -102,14 +66,14 @@ const dynamicValue = computed(() => {
   return value
 })
 
-const handleClick = () => {
-  if (props.mode === 'image' && innerValue.value && props.enablePreview) {
-    uni.previewImage({
-      urls: [innerValue.value],
-      current: innerValue.value,
-    })
+// 优化: 提取条件渲染逻辑,避免在模板中重复计算
+const shouldRender = computed(() => {
+  if (!props.dynamicKey || !props.hideWhenDynamicKeyNotExist) {
+    return true
   }
-}
+  return !!dynamicValue.value
+})
+
 const innerValue = computed(() => {
   if (props.mode === 'image') {
     return dynamicValue.value || props.url
@@ -122,33 +86,34 @@ const innerValue = computed(() => {
 
 /** 处理跳转链接中的动态参数 */
 const actionProps = computed(() => {
+  // 优化: 只在 jumpUrl 存在时才调用 getDynamicData
+  const jumpUrl = props.action?.jumpUrl
+  if (!jumpUrl) {
+    return props.action
+  }
+
+  // 优化: 提前返回,避免不必要的计算
   if (props.dynamicActionKey) {
     return get(innerDynamicData.value, props.dynamicActionKey)
   }
+
   return {
     ...props.action,
-    jumpUrl: getDynamicData(props.action?.jumpUrl, {
+    jumpUrl: getDynamicData(jumpUrl, {
       store: store.value,
     }),
   }
 })
-const onAvatar = (headImgUrl) => {
-  userStore?.updateUser(
-    {
-      headImgUrl,
-    },
-    true,
-  )
-}
-const innerStyle = computed(() => {
-  return getFlexStyle(props.align)
-})
 
-const innerItemStyle = computed(() => {
-  return getFlexStyle(props.itemAlign)
-})
+// 优化: 将 block customStyle 单独提取
+const blockCustomStyle = computed(() => ({
+  width: props.fillWidth ? '100%' : 'fit-content',
+  height: props.fillHeight ? '100%' : 'fit-content',
+  ...getFlexStyle(props.itemAlign),
+  ...getFlexStyle(props.align),
+}))
 
-const styleOptions = computed<[Record<string, any>, string]>(() => {
+const blockProps = computed(() => {
   const {
     paddingVertical,
     paddingHorizontal,
@@ -158,9 +123,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-wrapper-list/lcb-wrapper-list.vue

@@ -2,20 +2,18 @@
   <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" />
+      <slot :data="item" />
     </view>
   </lcb-block>
 </template>
 
 <script setup lang="ts">
 import { transformValueUnit } from '@tplc/business/utils/transform'
-import { computed, ref, watchEffect } from 'vue'
+import { computed, watch, shallowRef } from 'vue'
 import useDynamicData from '../../hooks/useDynamicData'
 import { dynamicRequest } from '../../utils/request'
 import { LcbWrapperListProps } from './types'
@@ -32,9 +30,15 @@ const props = withDefaults(defineProps<LcbWrapperListProps>(), {
   flexDirection: 'column',
 })
 const { userStore, innerDynamicData } = useDynamicData()
-const renderList = ref<unknown[]>([{ walletAmount: 1 }])
+// 使用 shallowRef 优化大数组的响应式性能
+const renderList = shallowRef<unknown[]>([])
 
+// 优化:检查是否需要转换,避免不必要的遍历
 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,21 +47,41 @@ 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(
+  () => [props.dataSource, innerDynamicData.value, userStore?.userInfo] as const,
+
+  async ([dataSource, dynamicData, userInfo]) => {
+    // 防止重复请求
+    let data: unknown[] = []
+    const result = await dynamicRequest(dataSource, dynamicData, userInfo)
+    if (result) {
+      data = result
+    }
+    // 使用 shallowRef 时需要重新赋值整个数组
+    renderList.value = Array.isArray(data) ? transformStringArrayToObjectArray(data) : []
+  },
+  { immediate: true },
+)
+
+// 优化:缓存 key 获取逻辑,减少属性访问
+const getItemKey = (item: any, index: number) => {
+  return item?.id ?? item?.key ?? index
+}
+
+// 优化:简化条件判断逻辑
+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,
@@ -67,7 +91,6 @@ const listStyle = computed(() => {
     '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.23",
+  "version": "0.7.25",
   "keywords": [
     "业务组件"
   ],

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

@@ -1,6 +1,7 @@
 import { LcbAreaProps } from './types'
 declare function __VLS_template(): {
   default?(_: { item: LcbAreaProps }): any
+  default?(_: { item: LcbAreaProps }): any
 }
 declare const __VLS_component: import('vue').DefineComponent<
   __VLS_WithDefaults<

package/types/components/lcb-button/components/lcb-button-action/index.vue.d.ts

@@ -0,0 +1,49 @@
+import { LcbButtonProps } from '../../types'
+import { LcbActionViewProps } from '../../../lcb-action-view/types'
+declare const _default: import('vue').DefineComponent<
+  __VLS_TypePropsToOption<
+    LcbButtonProps & {
+      innerValue?: string
+      actionProps: LcbActionViewProps
+      store: any
+      userStore: any
+      dynamicValue?: string
+    }
+  >,
+  {},
+  unknown,
+  {},
+  {},
+  import('vue').ComponentOptionsMixin,
+  import('vue').ComponentOptionsMixin,
+  {},
+  string,
+  import('vue').PublicProps,
+  Readonly<
+    import('vue').ExtractPropTypes<
+      __VLS_TypePropsToOption<
+        LcbButtonProps & {
+          innerValue?: string
+          actionProps: LcbActionViewProps
+          store: any
+          userStore: any
+          dynamicValue?: string
+        }
+      >
+    >
+  >,
+  {},
+  {}
+>
+export default _default
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T
+type __VLS_TypePropsToOption<T> = {
+  [K in keyof T]-?: {} extends Pick<T, K>
+    ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>
+      }
+    : {
+        type: import('vue').PropType<T[K]>
+        required: true
+      }
+}

package/types/components/lcb-button/components/lcb-button-content/index.vue.d.ts

@@ -0,0 +1,44 @@
+import { LcbButtonProps } from '../../types'
+declare const _default: import('vue').DefineComponent<
+  __VLS_TypePropsToOption<
+    LcbButtonProps & {
+      innerValue?: string
+      store: any
+      dynamicValue?: string
+    }
+  >,
+  {},
+  unknown,
+  {},
+  {},
+  import('vue').ComponentOptionsMixin,
+  import('vue').ComponentOptionsMixin,
+  {},
+  string,
+  import('vue').PublicProps,
+  Readonly<
+    import('vue').ExtractPropTypes<
+      __VLS_TypePropsToOption<
+        LcbButtonProps & {
+          innerValue?: string
+          store: any
+          dynamicValue?: string
+        }
+      >
+    >
+  >,
+  {},
+  {}
+>
+export default _default
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T
+type __VLS_TypePropsToOption<T> = {
+  [K in keyof T]-?: {} extends Pick<T, K>
+    ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>
+      }
+    : {
+        type: import('vue').PropType<T[K]>
+        required: true
+      }
+}

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

@@ -1,6 +1,6 @@
 import { LcbWrapperListProps } from './types'
 declare function __VLS_template(): {
-  default?(_: { data: unknown; list: import('../lcb-area/types').LcbAreaProps[] | undefined }): any
+  default?(_: { data: unknown }): any
 }
 declare const __VLS_component: import('vue').DefineComponent<
   __VLS_WithDefaults<