@tplc/business 0.7.27 → 0.7.28

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 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)
 
 

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

@@ -203,11 +203,9 @@ const showArea = computed(() => {
 
 <style lang="scss" scoped>
 .slot-wrapper {
-  // 合并公共样式，避免重复
-  :deep(> .lcb-action-btn),
-  :deep(> .lcb-button),
-  :deep(> .lcb-area) {
-    width: 100%;
+  :deep(> view),
+  :deep(> button) {
+    width: 100% !important;
     height: auto;
     box-sizing: border-box; // 强化布局，防止溢出
   }

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

@@ -1,38 +1,64 @@
 <template>
   <template v-if="mode === 'noStyle'">{{ innerValue }}</template>
-  <lcb-block
-    v-bind="props"
-    :customClass="`${customClass} border-solid lcb-button`"
-    :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({
@@ -75,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
@@ -87,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, {
@@ -106,13 +140,58 @@ 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,
+    paddingHorizontal,
+    paddingTop,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    ...other
+  } = props
+  return other
+})
 </script>
 <style lang="scss" scoped>
 @for $i from 1 through 3 {

package/package.json

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