@tplc/business 0.7.73 → 0.7.75

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.75](https://gitlab888.30jia.com.cn/tourism-front/zero-code-pro/compare/v0.7.74...v0.7.75) (2026-01-18)
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* **lcb-map:** replace loading GIF with a webp image and remove the old GIF file ([6f69363](https://gitlab888.30jia.com.cn/tourism-front/zero-code-pro/commit/6f693637439cc77ff651713dd3708da23c3712d0))
+
+
+### ✨ Features | 新功能
+
+* **lcb-area:** add IS_EDITOR_MODE constant and optimize lcb-area and lcb-block components for fixed positioning and style caching ([ba958ae](https://gitlab888.30jia.com.cn/tourism-front/zero-code-pro/commit/ba958ae70cdfb74068799319d2ef4226738a6065))
+
+### [0.7.74](https://gitlab888.30jia.com.cn/tourism-front/zero-code-pro/compare/v0.7.73...v0.7.74) (2026-01-17)
+
+
+### ✨ Features | 新功能
+
+* **lcb-product:** add headImgStyle property to LcbProductProps and LcbProductItemProps, update ItemValue component to use wd-img for head image rendering ([2ae9d8f](https://gitlab888.30jia.com.cn/tourism-front/zero-code-pro/commit/2ae9d8f51700a275ce37a53faebcb1109f753094))
+
 ### [0.7.73](https://gitlab888.30jia.com.cn/tourism-front/zero-code-pro/compare/v0.7.72...v0.7.73) (2026-01-17)
 
 

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

@@ -26,7 +26,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, watch } from 'vue'
+import { computed, watch, shallowRef } from 'vue'
 import { LcbAreaProps } from './types'
 import { getFlexStyle, transformValueUnit } from '@tplc/business/utils/transform'
 import { get } from 'lodash-es'
@@ -48,65 +48,84 @@ const props = withDefaults(defineProps<LcbAreaProps>(), {
 })
 const { userStore, innerDynamicData, pageInfo } = useDynamicData()
 
-// 缓存 gap 的单位转换
-const gapValue = computed(() => transformValueUnit(props.gap))
+// 优化：使用 shallowRef 缓存 flex 样式
+const itemAlignStyleCache = shallowRef<Record<string, any> | null>(null)
+const cachedItemAlign = shallowRef<string>('')
 
-// 优化容器样式计算，合并为一个 computed
-const containerStyle = computed(() => {
-  const baseStyle = {
-    display: props.display,
-    gap: gapValue.value,
-    overflowX: (props.scrollX ? 'auto' : 'hidden') as 'auto' | 'hidden',
+const getItemAlignStyle = () => {
+  const align = props.itemAlign
+  if (!align) return {}
+  if (align === cachedItemAlign.value && itemAlignStyleCache.value) {
+    return itemAlignStyleCache.value
   }
+  cachedItemAlign.value = align
+  itemAlignStyleCache.value = getFlexStyle(align)
+  return itemAlignStyleCache.value
+}
+
+// 优化：缓存 gap 和容器样式计算
+const containerStyle = computed(() => {
+  const gapValue = transformValueUnit(props.gap)
+  const overflowX = (props.scrollX ? 'auto' : 'hidden') as 'auto' | 'hidden'
 
   if (props.display === 'grid') {
     return {
-      ...baseStyle,
+      display: 'grid',
+      gap: gapValue,
+      overflowX,
       gridTemplateColumns: `repeat(${props.gridColumns}, minmax(0, 1fr))`,
     }
   }
 
   return {
-    ...baseStyle,
+    display: 'flex',
+    gap: gapValue,
+    overflowX,
     flexDirection: props.displayFlex,
     alignItems: 'stretch',
   }
 })
 
-// 缓存 itemAlign 的 flex 样式，避免每个 item 都重复计算
-const itemAlignStyle = computed(() => getFlexStyle(props.itemAlign))
-
-// 优化: 缓存公共样式部分
-const commonItemStyle = computed(() => ({
-  ...itemAlignStyle.value,
-  overflowX: props.overflowX,
-}))
-
-// 优化: 缓存每个 item 的样式,避免重复计算
+// 优化: 使用 Map 缓存每个 item 的样式，只在依赖变化时重新计算
 const itemStylesCache = computed(() => {
+  if (!props.list?.length) return new Map<number, Record<string, any>>()
+
   const isGrid = props.display === 'grid'
   const isFlex = props.display === 'flex'
   const flexShrink = props.flexShrink ?? 1
+  const itemAlignStyle = getItemAlignStyle()
+  const overflowX = props.overflowX
+
+  const cache = new Map<number, Record<string, any>>()
 
-  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',
-      }
-    }) || []
-  )
+  for (let i = 0; i < props.list.length; i++) {
+    const flex = props.areaFlexs?.[i]?.flex ?? 1
+    const colSpan = props.areaItems?.[i]?.colSpan
+
+    const style: Record<string, any> = {
+      ...itemAlignStyle,
+      overflowX,
+    }
+
+    if (isGrid && colSpan) {
+      style.gridColumn = `span ${colSpan} / span ${colSpan}`
+    }
+
+    if (isFlex) {
+      style.flex = flex ?? 'auto'
+      style.flexShrink = flexShrink
+      style.width = flex ? '100%' : 'auto'
+    }
+
+    cache.set(i, style)
+  }
+
+  return cache
 })
 
-// 优化: 使用缓存的样式
+// 优化: 直接从 Map 获取缓存的样式
 const getItemStyle = (index: number) => {
-  return itemStylesCache.value[index] || commonItemStyle.value
+  return itemStylesCache.value.get(index) || { overflowX: props.overflowX }
 }
 
 const getData = async () => {
@@ -140,26 +159,20 @@ watch(
   },
 )
 
-// 优化: 提取比较逻辑,减少重复代码
+// 优化: 提取比较逻辑,减少重复代码 - 使用静态对象减少创建
+const compareOperations = {
+  '=': (value: any, compareValue: string) => `${value}` === compareValue,
+  '>=': (value: any, compareValue: string) => value >= compareValue,
+  '<=': (value: any, compareValue: string) => value <= compareValue,
+  '>': (value: any, compareValue: string) => value > compareValue,
+  '<': (value: any, compareValue: string) => value < compareValue,
+  '!=': (value: any, compareValue: string) => value !== compareValue,
+  includes: (value: any, compareValue: string) => value?.includes?.(compareValue) ?? false,
+} as const
+
 const compareValues = (value = '', 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 operation = compareOperations[compareType as keyof typeof compareOperations]
+  return operation ? operation(value, compareValue) : `${value}` === compareValue
 }
 
 // 优化: 缓存数据源

package/components/lcb-area/types.ts

@@ -23,7 +23,6 @@ export interface LcbAreaProps extends LcbBlockProps {
   keyFromUser?: boolean
   reverse?: boolean
   dependKeyCompareValue?: string
-  position?: 'relative' | 'absolute'
   compareType?: '=' | '>=' | '<=' | '>' | '<' | '!=' | 'includes'
   dataSource?: DataSource
   action?: LcbActionViewProps

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

@@ -1,19 +1,16 @@
 <template>
-  <view
-    :style="getFinalStyle"
-    class="box-border overflow-hidden relative"
-    :class="props.customClass"
-  >
+  <view :style="getFinalStyle" class="box-border overflow-hidden" :class="props.customClass">
     <slot />
   </view>
 </template>
 
 <script setup lang="ts">
 import { get } from 'lodash-es'
-import { computed } from 'vue'
+import { computed, inject, ref, shallowRef } from 'vue'
 import useDynamicData from '../../hooks/useDynamicData'
 import { getFlexStyle, transformValueUnit } from '../../utils/transform'
 import { LcbBlockInnerProps } from './types'
+import { IS_EDITOR_MODE } from '../../constants'
 defineOptions({
   name: 'LcbBlock',
   options: {
@@ -32,19 +29,42 @@ const props = withDefaults(defineProps<LcbBlockInnerProps>(), {
   position: 'relative',
 })
 const { userStore, innerDynamicData } = useDynamicData()
+const isEditorMode = inject(IS_EDITOR_MODE, ref(false))
+
+// 使用 shallowRef 缓存 flex 样式，避免重复计算
+const flexStyleCache = shallowRef<Record<string, any> | null>(null)
+const cachedAlign = shallowRef<string>('')
+
+const getFlexStyleCached = (align: string | undefined) => {
+  if (!align) return {}
+  if (align === cachedAlign.value && flexStyleCache.value) {
+    return flexStyleCache.value
+  }
+  cachedAlign.value = align
+  flexStyleCache.value = getFlexStyle(align)
+  return flexStyleCache.value
+}
+
 const dynamicBgImage = computed(() => {
-  return (
-    (props.dynamicBgImage && get(innerDynamicData.value, props.dynamicBgImage)) ||
-    props.backgroundImage
-  )
+  // 优化：如果没有动态背景图，直接返回静态背景图
+  if (!props.dynamicBgImage) return props.backgroundImage
+  return get(innerDynamicData.value, props.dynamicBgImage) || props.backgroundImage
 })
-// 透明度+颜色
+
+// 透明度+颜色 - 优化：减少字符串拼接
 const innerBackgroundColor = computed(() => {
-  if (!props.backgroundColor) return ''
-  if (props.backgroundColor.length === 7) {
-    return props.backgroundColor + Math.floor(props.opacity * 255).toString(16)
+  const bgColor = props.backgroundColor
+  if (!bgColor) return ''
+  // 如果已经是 8 位（包含透明度），直接返回
+  if (bgColor.length === 9) return bgColor
+  // 如果是 7 位，添加透明度
+  if (bgColor.length === 7) {
+    const alpha = Math.floor(props.opacity * 255)
+      .toString(16)
+      .padStart(2, '0')
+    return bgColor + alpha
   }
-  return props.backgroundColor
+  return bgColor
 })
 
 const getInnerStyle = computed(() => {
@@ -58,46 +78,44 @@ const getInnerStyle = computed(() => {
   return {}
 })
 
-// 缓存 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}`
-})
+// 优化：合并 padding/margin/borderRadius 计算，减少函数调用
+const spacingStyles = computed(() => {
+  const pTop = props.paddingTop ?? props.paddingVertical ?? 0
+  const pRight = props.paddingRight ?? props.paddingHorizontal ?? 0
+  const pBottom = props.paddingBottom ?? props.paddingVertical ?? 0
+  const pLeft = props.paddingLeft ?? props.paddingHorizontal ?? 0
 
-// 缓存 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}`
-})
+  const mTop = props.floatUp ? -props.floatUp : (props.marginTop ?? 0)
+  const mRight = props.marginRight ?? props.marginHorizontal ?? 0
+  const mBottom = props.marginBottom ?? 0
+  const mLeft = props.marginLeft ?? props.marginHorizontal ?? 0
+
+  const topR = props.topRadius ?? props.radius
+  const bottomR = props.bottomRadius ?? props.radius
 
-// 缓存 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}`
+  return {
+    padding: `${transformValueUnit(pTop)} ${transformValueUnit(pRight)} ${transformValueUnit(pBottom)} ${transformValueUnit(pLeft)}`,
+    margin: `${transformValueUnit(mTop)} ${transformValueUnit(mRight)} ${transformValueUnit(mBottom)} ${transformValueUnit(mLeft)}`,
+    borderRadius:
+      topR || bottomR
+        ? `${transformValueUnit(topR)} ${transformValueUnit(topR)} ${transformValueUnit(bottomR)} ${transformValueUnit(bottomR)}`
+        : undefined,
+  }
 })
 
-// 优化 background 字符串拼接
+// 优化：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,
+  // 优化：减少对象创建和条件判断
+  const style: Record<string, any> = {
+    ...spacingStyles.value,
     color: props.color,
     background: backgroundStyle.value,
     fontSize: transformValueUnit(props.fontSize),
@@ -106,14 +124,49 @@ const getFinalStyle = computed(() => {
     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,
+  }
+
+  // 优化：只在需要时添加 boxShadow
+  if (props.shadowColor && props.shadowSize) {
+    style.boxShadow = `0px 0px ${props.blurSize}px ${props.shadowSize}px ${props.shadowColor}`
+  }
+
+  const actualPosition = props.position
+
+  // 优化：只在编辑器模式下输出调试信息
+  if (isEditorMode.value && (actualPosition === 'fixed' || actualPosition === 'absolute')) {
+    console.log('[lcb-block] Position Debug:', {
+      propsPosition: props.position,
+      actualPosition,
+      top: props.top,
+      left: props.left,
+      right: props.right,
+      bottom: props.bottom,
+      zIndex: props.zIndex,
+      width: props.width,
+      height: props.height,
+    })
+  }
+
+  // 处理定位相关的样式 - 优化：合并条件判断
+  if (actualPosition === 'absolute' || actualPosition === 'fixed') {
+    if (props.top !== undefined) style.top = transformValueUnit(props.top)
+    if (props.left !== undefined) style.left = transformValueUnit(props.left)
+    if (props.right !== undefined) style.right = transformValueUnit(props.right)
+    if (props.bottom !== undefined) style.bottom = transformValueUnit(props.bottom)
+    if (props.width !== undefined) style.width = transformValueUnit(props.width)
+    if (props.height !== undefined) style.height = transformValueUnit(props.height)
+  } else if (actualPosition === 'relative') {
+    if (props.top !== undefined) style.top = transformValueUnit(props.top)
+    if (props.left !== undefined) style.left = transformValueUnit(props.left)
+  }
+
+  // 优化：最后再合并其他样式，减少对象展开次数
+  return {
+    ...style,
     ...props.customStyle,
-    ...getFlexStyle(props.align),
+    ...getFlexStyleCached(props.align),
     ...getInnerStyle.value,
   }
 })

package/components/lcb-block/types.ts

@@ -30,7 +30,7 @@ export interface LcbBlockProps {
   marginLeft?: number
   marginRight?: number
   zIndex?: number
-  position?: 'relative' | 'absolute'
+  position?: 'relative' | 'absolute' | 'fixed'
   color?: string
   fontSize?: number
   fontWeight?: number
@@ -59,6 +59,13 @@ export interface LcbBlockProps {
   // 动态样式集合
   dynamicStyleOptions?: DynamicOptions
   dynamicBgImage?: string
+  // fixed/absolute 定位相关
+  top?: number
+  left?: number
+  right?: number
+  bottom?: number
+  width?: number
+  height?: number
 }
 export interface LcbBlockInnerProps extends LcbBlockProps {
   [key: string]: any

package/components/lcb-gap/types.ts

@@ -1,7 +1,6 @@
 import { LcbBlockProps } from '../lcb-block/types'
 
 export interface LcbGapProps extends LcbBlockProps {
-  height?: number | string
   safeAreaBottom?: boolean
   bgColor?: string
   safeAreaTop?: boolean

package/components/lcb-map/lcb-map.vue

@@ -82,7 +82,10 @@
       </view>
       <!-- loading 加载地球gif -->
       <view class="absolute top-0 left-0 w-full h-full flex-center z-2" v-if="isLoading">
-        <image src="./images/earth.gif" class="w-137rpx h-120rpx mt--180rpx" />
+        <image
+          src="https://oss.30jia.com.cn/material/0/1001/1462205640919076864/20260117220318/earth.webp"
+          class="w-137rpx h-120rpx mt--180rpx"
+        />
       </view>
     </view>
   </view>

package/constants.ts

@@ -15,3 +15,5 @@ export const PAGE_DYNAMIC_DATA = 'page_dynamic_data'
 export const WRAPPER_ITEM_KEY = 'wrapper_item_key'
 /** 是否显示tabbar */
 export const SHOW_TABBAR = 'show_tabbar'
+/** 是否在编辑器模式 */
+export const IS_EDITOR_MODE = 'is_editor_mode'

package/package.json

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

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

@@ -23,7 +23,6 @@ export interface LcbAreaProps extends LcbBlockProps {
   keyFromUser?: boolean
   reverse?: boolean
   dependKeyCompareValue?: string
-  position?: 'relative' | 'absolute'
   compareType?: '=' | '>=' | '<=' | '>' | '<' | '!=' | 'includes'
   dataSource?: DataSource
   action?: LcbActionViewProps

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

@@ -29,7 +29,7 @@ export interface LcbBlockProps {
   marginLeft?: number
   marginRight?: number
   zIndex?: number
-  position?: 'relative' | 'absolute'
+  position?: 'relative' | 'absolute' | 'fixed'
   color?: string
   fontSize?: number
   fontWeight?: number
@@ -56,6 +56,12 @@ export interface LcbBlockProps {
     | 'bottom-right'
   dynamicStyleOptions?: DynamicOptions
   dynamicBgImage?: string
+  top?: number
+  left?: number
+  right?: number
+  bottom?: number
+  width?: number
+  height?: number
 }
 export interface LcbBlockInnerProps extends LcbBlockProps {
   [key: string]: any

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

@@ -1,6 +1,5 @@
 import { LcbBlockProps } from '../lcb-block/types'
 export interface LcbGapProps extends LcbBlockProps {
-  height?: number | string
   safeAreaBottom?: boolean
   bgColor?: string
   safeAreaTop?: boolean

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

@@ -20,13 +20,19 @@ declare const __VLS_component: import('vue').DefineComponent<
   >,
   {
     mode: 'map' | 'list'
+    width: number
+    height: number
     backgroundColor: string
     color: string
     customStyle: Record<string, any>
     customClass: string
     zIndex: number
+    left: number
+    top: number
+    bottom: number
+    right: number
     radius: number
-    position: 'relative' | 'absolute'
+    position: 'relative' | 'absolute' | 'fixed'
     backgroundImage: string
     border: boolean
     imageRadius: number

package/types/constants.d.ts

@@ -15,3 +15,5 @@ export declare const PAGE_DYNAMIC_DATA = 'page_dynamic_data'
 export declare const WRAPPER_ITEM_KEY = 'wrapper_item_key'
 /** 是否显示tabbar */
 export declare const SHOW_TABBAR = 'show_tabbar'
+/** 是否在编辑器模式 */
+export declare const IS_EDITOR_MODE = 'is_editor_mode'