@tplc/business 0.7.26 → 0.7.28

package/CHANGELOG.md

@@ -2,6 +2,25 @@
 
 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.28](https://gitlab888.30jia.com.cn/tourism-front/zero-code-pro/compare/v0.7.27...v0.7.28) (2025-12-22)
+
+
+### ✨ Features | 新功能
+
+* area ([33ad1e4](https://gitlab888.30jia.com.cn/tourism-front/zero-code-pro/commit/33ad1e459d9b104d664a4aed33bcf08b52a0f02c))
+* 修改尺寸 ([83ae159](https://gitlab888.30jia.com.cn/tourism-front/zero-code-pro/commit/83ae159dc058fa0486745149d45f19d7d3a5050a))
+
+### [0.7.27](https://gitlab888.30jia.com.cn/tourism-front/zero-code-pro/compare/v0.7.26...v0.7.27) (2025-12-22)
+
+
+### ✨ Features | 新功能
+
+* 修改样式兼容 ([7b286d6](https://gitlab888.30jia.com.cn/tourism-front/zero-code-pro/commit/7b286d6a299da10f79d02b9565e6e681ce61c494))
+* 兼容area ([3974374](https://gitlab888.30jia.com.cn/tourism-front/zero-code-pro/commit/39743742aa8426e34d0bd2b321c48e2b1ef2aa37))
+* 兼容padding ([267de42](https://gitlab888.30jia.com.cn/tourism-front/zero-code-pro/commit/267de42fc3e2f539b5fa47bd8ef2389f8eb57207))
+* 暂时不用处理 ([5c15637](https://gitlab888.30jia.com.cn/tourism-front/zero-code-pro/commit/5c15637f45bb06a32c8e42a36b01ab98cf1d71a8))
+* 样式调整 ([bd83b18](https://gitlab888.30jia.com.cn/tourism-front/zero-code-pro/commit/bd83b1815a283f7dcd602dc02ca7644e0c5f2d6d))
+
 ### [0.7.26](https://gitlab888.30jia.com.cn/tourism-front/zero-code-pro/compare/v0.7.25...v0.7.26) (2025-12-22)
 
 

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

@@ -1,5 +1,5 @@
 <template>
-  <lcb-block v-bind="$props" v-if="showArea">
+  <lcb-block v-bind="$props" :customClass="`lcb-area`" v-if="showArea">
     <lcb-action-view v-bind="actionProps" v-if="actionProps?.jumpType">
       <view :style="containerStyle" class="h-full">
         <view
@@ -203,13 +203,11 @@ const showArea = computed(() => {
 
 <style lang="scss" scoped>
 .slot-wrapper {
-  :deep(> view) {
-    width: 100%;
-    height: auto;
-  }
+  :deep(> view),
   :deep(> button) {
-    width: 100%;
+    width: 100% !important;
     height: auto;
+    box-sizing: border-box; // 强化布局，防止溢出
   }
 }
 </style>

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

@@ -3,7 +3,6 @@
     v-bind="actionProps"
     @avatar="onAvatar"
     @click="handleClick"
-    :customStyle="actionPaddingStyle"
     :renderMode="!actionProps?.jumpType && mode !== 'image' ? 'noClick' : 'button'"
   >
     <lcb-button-content
@@ -19,7 +18,6 @@
 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({
@@ -39,14 +37,6 @@ const props = defineProps<
     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(

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

@@ -49,5 +49,7 @@ const props = defineProps<
 >()
 
 // 优化: 将 iconGap 样式单独提取,避免模板字符串
-const iconGapStyle = computed(() => `gap: ${props.iconGap}rpx`)
+const iconGapStyle = computed(() => {
+  return `gap: ${props.iconGap}rpx;`
+})
 </script>

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

@@ -1,37 +1,64 @@
 <template>
   <template v-if="mode === 'noStyle'">{{ innerValue }}</template>
-  <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>
+  <view class="w-full h-full" :style="wrapperStyle" v-else-if="shouldRender">
+    <lcb-block
+      v-bind="blockProps"
+      :customClass="`${customClass} border-solid lcb-button`"
+      :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>
 </template>
 
 <script setup lang="ts">
 import { get } from 'lodash-es'
 import { computed } from 'vue'
 import useDynamicData from '../../hooks/useDynamicData'
-import { getFlexStyle } from '../../utils/transform'
-import LcbButtonAction from './components/lcb-button-action/index.vue'
-import LcbButtonContent from './components/lcb-button-content/index.vue'
+import { getFlexStyle, transformValueUnit } from '../../utils/transform'
 import { getDynamicData } from '../../utils/utils'
 import { LcbButtonProps } from './types'
 defineOptions({
@@ -74,6 +101,14 @@ 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
@@ -86,17 +121,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, {
@@ -105,14 +140,46 @@ 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',
-  ...getFlexStyle(props.itemAlign),
-  ...getFlexStyle(props.align),
+  ...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,

package/package.json

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