@tplc/business 0.7.24 → 0.7.26

package/CHANGELOG.md

@@ -2,6 +2,28 @@
 
 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.26](https://gitlab888.30jia.com.cn/tourism-front/zero-code-pro/compare/v0.7.25...v0.7.26) (2025-12-22)
+
+
+### ✨ Features | 新功能
+
+* 修改兼容尺寸 ([9079ff7](https://gitlab888.30jia.com.cn/tourism-front/zero-code-pro/commit/9079ff74d88162468a3528b533f9492ca7c2dfaa))
+* 新增优化版本 ([aac61bb](https://gitlab888.30jia.com.cn/tourism-front/zero-code-pro/commit/aac61bbc06a90fc8ade33c8c1765f4df5d4ba37e))
+
+### [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)
 
 

package/components/lcb-action-view/lcb-action-view.vue

@@ -72,7 +72,7 @@
       :submitRequestInfo="submitRequestInfo"
       v-if="['144'].includes(getJumpType(jumpType)) && showPay && requestInfo && submitRequestInfo"
     />
-    <SharePopup v-model="showPoster" :params="requestParam" />
+    <SharePopup v-model="showPoster" :params="requestParam" v-if="showPoster" />
     <CustomPopup
       v-model="showCustomPopup"
       v-if="['145'].includes(getJumpType(jumpType)) && showCustomPopup"

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

@@ -1,9 +1,6 @@
 <template>
   <lcb-block v-bind="$props" v-if="showArea">
-    <lcb-action-view
-      v-bind="actionProps"
-      :renderMode="actionProps?.jumpType ? 'button' : 'noClick'"
-    >
+    <lcb-action-view v-bind="actionProps" v-if="actionProps?.jumpType">
       <view :style="containerStyle" class="h-full">
         <view
           v-for="(item, index) in list"
@@ -15,11 +12,21 @@
         </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"
+        :style="getItemStyle(index)"
+      >
+        <slot :item="item" />
+      </view>
+    </view>
   </lcb-block>
 </template>
 
 <script setup lang="ts">
-import { computed, watch, ref } from 'vue'
+import { computed, watch } from 'vue'
 import { LcbAreaProps } from './types'
 import { getFlexStyle, transformValueUnit } from '@tplc/business/utils/transform'
 import { get } from 'lodash-es'
@@ -114,16 +121,17 @@ 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
-  const jumpUrl = props.action?.jumpUrl
-  if (!jumpUrl) {
-    return props.action
-  }
 
   return {
     ...props.action,

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,64 +1,37 @@
 <template>
   <template v-if="mode === 'noStyle'">{{ innerValue }}</template>
-  <view class="w-full h-full" :style="wrapperStyle" v-else-if="shouldRender">
-    <lcb-block
-      v-bind="blockProps"
-      :customClass="`${customClass} border-solid`"
-      :customStyle="blockCustomStyle"
-    >
-      <lcb-action-view
-        v-bind="actionProps"
-        @avatar="onAvatar"
-        @click="handleClick"
-        :customStyle="actionPaddingStyle"
-        :renderMode="!actionProps?.jumpType && mode !== 'image' ? 'noClick' : 'button'"
-      >
-        <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>
-      </lcb-action-view>
-    </lcb-block>
-  </view>
+  <lcb-block
+    v-bind="blockProps"
+    :customClass="`${customClass} border-solid w-full h-full`"
+    :customStyle="blockCustomStyle"
+    v-else-if="shouldRender"
+  >
+    <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({
@@ -101,14 +74,6 @@ const shouldRender = computed(() => {
   return !!dynamicValue.value
 })
 
-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 dynamicValue.value || props.url
@@ -121,17 +86,17 @@ 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
   }
 
+  // 优化: 提前返回,避免不必要的计算
+  if (props.dynamicActionKey) {
+    return get(innerDynamicData.value, props.dynamicActionKey)
+  }
+
   return {
     ...props.action,
     jumpUrl: getDynamicData(jumpUrl, {
@@ -140,46 +105,14 @@ const actionProps = computed(() => {
   }
 })
 
-const onAvatar = (headImgUrl) => {
-  userStore?.updateUser(
-    {
-      headImgUrl,
-    },
-    true,
-  )
-}
-
-// 优化: 缓存样式对象,避免在模板中创建新对象
-const innerStyle = computed(() => {
-  return getFlexStyle(props.align)
-})
-
-const innerItemStyle = computed(() => {
-  return getFlexStyle(props.itemAlign)
-})
-
-// 优化: 将 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,
+  ...getFlexStyle(props.itemAlign),
+  ...getFlexStyle(props.align),
 }))
 
-// 优化: 分离 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,

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

@@ -13,7 +13,7 @@
 
 <script setup lang="ts">
 import { transformValueUnit } from '@tplc/business/utils/transform'
-import { computed, ref, watch, shallowRef } from 'vue'
+import { computed, watch, shallowRef } from 'vue'
 import useDynamicData from '../../hooks/useDynamicData'
 import { dynamicRequest } from '../../utils/request'
 import { LcbWrapperListProps } from './types'
@@ -32,7 +32,6 @@ const props = withDefaults(defineProps<LcbWrapperListProps>(), {
 const { userStore, innerDynamicData } = useDynamicData()
 // 使用 shallowRef 优化大数组的响应式性能
 const renderList = shallowRef<unknown[]>([])
-const isLoading = ref(false)
 
 // 优化:检查是否需要转换,避免不必要的遍历
 const transformStringArrayToObjectArray = (data: unknown[]): unknown[] => {
@@ -48,33 +47,18 @@ const transformStringArrayToObjectArray = (data: unknown[]): unknown[] => {
   })
 }
 
-// 优化:使用 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)
+    // 防止重复请求
+    let data: unknown[] = []
+    const result = await dynamicRequest(dataSource, dynamicData, userInfo)
+    if (result) {
+      data = result
     }
-
-    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 防抖
+    // 使用 shallowRef 时需要重新赋值整个数组
+    renderList.value = Array.isArray(data) ? transformStringArrayToObjectArray(data) : []
   },
   { immediate: true },
 )
@@ -84,9 +68,6 @@ 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%'
@@ -104,7 +85,7 @@ const listStyle = computed(() => {
     width: '100%',
     display: props.display,
     'flex-direction': props.flexDirection,
-    gap: gapValue.value,
+    gap: transformValueUnit(props.gap),
     'align-items': 'stretch',
     'grid-template-columns': `repeat(${props.gridColumns}, minmax(0, 1fr))`,
     'overflow-x': props.scrollX ? 'auto' : 'hidden',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tplc/business",
-  "version": "0.7.24",
+  "version": "0.7.26",
   "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
+      }
+}