@tplc/business 0.7.74 → 0.7.76

package/CHANGELOG.md

@@ -2,6 +2,30 @@
 
 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.76](https://gitlab888.30jia.com.cn/tourism-front/zero-code-pro/compare/v0.7.75...v0.7.76) (2026-01-18)
+
+
+### ♻️ Code Refactoring | 代码重构
+
+* **types:** remove unused properties from LcbGapProps and LcbAreaProps, enhance LcbBlockProps with additional positioning attributes ([3e5dd22](https://gitlab888.30jia.com.cn/tourism-front/zero-code-pro/commit/3e5dd22dca2a854fc7760ef7f824c3b23a1c59db))
+
+
+### ✨ Features | 新功能
+
+* **lcb-form:** enhance form component with customizable title styles and conditional submit button visibility ([6b24629](https://gitlab888.30jia.com.cn/tourism-front/zero-code-pro/commit/6b246290e9a8a066353b461fd4cfdba62477c388))
+
+### [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)
 
 

package/components/FORM_KEY_USAGE.md

@@ -0,0 +1,192 @@
+# FormKey 功能使用说明
+
+## 功能概述
+
+该功能允许 `lcb-form` 组件将表单数据通过 `formKey` 注册到页面上下文 (`PAGE_PROVIDE_KEY`) 中，然后 `lcb-button` 组件可以通过指定 `formKeys` 在发送请求时自动携带对应表单的数据。
+
+## 使用方法
+
+### 1. 在 lcb-form 中设置 formKey
+
+```vue
+<lcb-form 
+  :fields="formFields"
+  formKey="userForm"
+  v-model="formData"
+/>
+```
+
+- `formKey`: 表单的唯一标识符，可以是任意字符串
+- 设置 `formKey` 后，表单数据会自动注册到 `PAGE_PROVIDE_KEY` 中
+
+### 2. 在 lcb-button 中关联 formKeys
+
+#### 方式一：直接在 button 上设置 formKeys
+
+```vue
+<lcb-button
+  text="提交"
+  :formKeys="['userForm']"
+  :action="{
+    jumpType: 17,
+    requestInfo: {
+      requestUrl: '/api/user/submit',
+      requestParams: {
+        type: 'create'
+      }
+    }
+  }"
+/>
+```
+
+#### 方式二：在 action 的 requestInfo 中设置 formKeys
+
+```vue
+<lcb-button
+  text="提交"
+  :action="{
+    jumpType: 17,
+    requestInfo: {
+      requestUrl: '/api/user/submit',
+      requestParams: {
+        type: 'create'
+      },
+      formKeys: ['userForm']
+    }
+  }"
+/>
+```
+
+### 3. 关联多个表单
+
+一个按钮可以同时关联多个表单：
+
+```vue
+<lcb-button
+  text="提交"
+  :formKeys="['userForm', 'addressForm']"
+  :action="{
+    jumpType: 17,
+    requestInfo: {
+      requestUrl: '/api/user/submit',
+      requestParams: {
+        type: 'create'
+      }
+    }
+  }"
+/>
+```
+
+或在 requestInfo 中：
+
+```vue
+<lcb-button
+  text="提交"
+  :action="{
+    jumpType: 17,
+    requestInfo: {
+      requestUrl: '/api/user/submit',
+      requestParams: {
+        type: 'create'
+      },
+      formKeys: ['userForm', 'addressForm']
+    }
+  }"
+/>
+```
+
+## 数据合并规则
+
+当按钮发送请求时，数据合并顺序为：
+
+1. 先使用 `requestParams` 中的原始参数
+2. 然后依次合并 `formKeys` 对应的表单数据
+3. **formKeys 的数据会覆盖 requestParams 中的同名字段**
+
+### 示例
+
+假设有以下配置：
+
+```javascript
+// 表单数据
+formData = {
+  name: '张三',
+  age: 25
+}
+
+// requestParams
+requestParams = {
+  type: 'create',
+  age: 20
+}
+```
+
+最终发送的请求参数为：
+
+```javascript
+{
+  type: 'create',  // 来自 requestParams
+  name: '张三',    // 来自 formKeys
+  age: 25          // 来自 formKeys，覆盖了 requestParams 中的 age: 20
+}
+```
+
+## 完整示例
+
+```vue
+<template>
+  <view>
+    <!-- 用户信息表单 -->
+    <lcb-form 
+      :fields="userFields"
+      formKey="userForm"
+      v-model="userData"
+    />
+    
+    <!-- 地址信息表单 -->
+    <lcb-form 
+      :fields="addressFields"
+      formKey="addressForm"
+      v-model="addressData"
+    />
+    
+    <!-- 提交按钮，同时提交两个表单的数据 -->
+    <lcb-button
+      text="提交"
+      :formKeys="['userForm', 'addressForm']"
+      :action="{
+        jumpType: 17,
+        requestInfo: {
+          requestUrl: '/api/user/submit',
+          requestParams: {
+            submitType: 'complete'
+          }
+        }
+      }"
+    />
+  </view>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const userData = ref({})
+const addressData = ref({})
+
+const userFields = [
+  // ... 表单字段配置
+]
+
+const addressFields = [
+  // ... 表单字段配置
+]
+</script>
+```
+
+## 注意事项
+
+1. **无需表单验证**: 按钮发送请求时不会触发表单验证，直接提交数据
+2. **formKey 必须唯一**: 在同一个页面中，不同表单的 `formKey` 应该保持唯一
+3. **数据覆盖**: formKeys 的数据会覆盖 requestParams 中的同名字段
+4. **formKeys 优先级**: 如果 button 和 requestInfo 中都设置了 formKeys，button 的 formKeys 会传递给 requestInfo
+5. **数组类型**: formKeys 统一使用数组类型，即使只绑定一个表单也需要使用数组：`['formKey']`

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

@@ -227,8 +227,25 @@ const onActionClick = async () => {
       }
       break
     case '17':
-      if ('requestInfo' in props && props.requestInfo)
-        await uni.$lcb.http.post(props.requestInfo.requestUrl, props.requestInfo.requestParams)
+      if ('requestInfo' in props && props.requestInfo) {
+        // 准备请求参数
+        let finalParams = { ...props.requestInfo.requestParams }
+
+        // 如果有 formKeys，从 PAGE_PROVIDE_KEY 中获取表单数据并合并（formKeys 数据覆盖 requestParams）
+        if (props.requestInfo.formKeys && Array.isArray(props.requestInfo.formKeys)) {
+          props.requestInfo.formKeys.forEach((key) => {
+            const formData = pageInfo.value?.[key]
+            if (formData) {
+              finalParams = {
+                ...finalParams,
+                ...formData,
+              }
+            }
+          })
+        }
+
+        await uni.$lcb.http.post(props.requestInfo.requestUrl, finalParams)
+      }
       /** 请求之后刷新schemaPage */
       if ('requestInfo' in props && props.requestInfo?.refreshSchemaPage) {
         uni.$emit('refreshSchemaPage')

package/components/lcb-action-view/types.ts

@@ -23,6 +23,8 @@ export type LcbActionViewProps = {
     requestParams: Record<string, any>
     /** 请求之后刷新schemapage */
     refreshSchemaPage?: boolean
+    /** 绑定的表单 keys，请求时会将对应表单数据合并到 requestParams */
+    formKeys?: string[]
   }
   submitRequestInfo?: {
     requestUrl: string

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-button/lcb-button.vue

@@ -128,12 +128,25 @@ const innerValue = computed(() => {
 })
 
 const actionProps = computed(() => {
-  return resolveActionProps({
+  const resolvedProps = resolveActionProps({
     dynamicActionKey: props.dynamicActionKey,
     action: props.action as any,
     innerDynamicData: innerDynamicData.value,
     templateStore: store.value,
   })
+
+  // 如果 button 有 formKeys，传递给 action 的 requestInfo
+  if (props.formKeys && resolvedProps.requestInfo) {
+    return {
+      ...resolvedProps,
+      requestInfo: {
+        ...resolvedProps.requestInfo,
+        formKeys: props.formKeys,
+      },
+    }
+  }
+
+  return resolvedProps
 })
 
 const onAvatar = (headImgUrl) => {

package/components/lcb-button/types.ts

@@ -40,4 +40,6 @@ export interface LcbButtonProps extends LcbBlockProps {
   lineClamp?: number
   progressProps?: ExtractPropTypes<typeof progressProps>
   fontFamily?: string
+  // 绑定的表单 keys，请求时会将对应表单数据一并提交
+  formKeys?: string[]
 }

package/components/lcb-form/lcb-form.vue

@@ -6,7 +6,6 @@
         <wd-cell
           v-for="field in fields"
           :key="field.entryFormFieldConfigId"
-          :title="field.fieldCustomName"
           :required="field.requiredFlag"
           :prop="field.field"
           :title-width="!vertical ? '230rpx' : '100%'"
@@ -22,6 +21,11 @@
               : []
           "
         >
+          <template #title>
+            <view :style="titleStyle">
+              {{ field.fieldCustomName }}
+            </view>
+          </template>
           <wd-input
             v-if="field.frontInputType === 'input'"
             :placeholder="field.frontPlaceholder || t('请输入') + field.fieldCustomName"
@@ -155,7 +159,7 @@
       </wd-cell-group>
       <view
         :class="{ 'bottom-fixed': bottomFixed, 'mt-3': !bottomFixed }"
-        v-if="submitText || agreementType"
+        v-if="(showSubmitButton && submitText) || agreementType"
       >
         <view class="text-center text-3 mt-3" v-if="agreementType && fields">
           <wd-checkbox v-model="form.agreement">
@@ -177,7 +181,7 @@
           block
           size="large"
           custom-class="!w-90% mt-3 !mx-auto"
-          v-if="fields && submitText"
+          v-if="fields && submitText && showSubmitButton"
         >
           {{ t(submitText) }}
         </wd-button>
@@ -188,12 +192,14 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch } from 'vue'
+import { ref, watch, computed, inject, Ref } from 'vue'
 import { LcbFormField, LcbFormProps } from './types'
 import { customUpload } from '../../utils/utils'
 import { useTranslate } from '@tplc/wot'
 import { DateTimeType } from '@tplc/wot/types/components/wd-datetime-picker-view/types'
 import dayjs from 'dayjs/esm'
+import { transformValueUnit } from '../../utils/transform'
+import { PAGE_PROVIDE_KEY } from '../../constants'
 defineOptions({
   name: 'LcbForm',
   options: {
@@ -214,8 +220,29 @@ const props = withDefaults(defineProps<LcbFormProps>(), {
   submitText: '提交',
   affirmText: '同意',
   bottomFixed: true,
+  showSubmitButton: true,
   vertical: false,
+  titleFontSize: 28,
+  titleFontWeight: 'normal',
+})
+
+// 注入页面上下文
+const pageInfo = inject(PAGE_PROVIDE_KEY) as Ref<Record<string, any>>
+
+// 计算 title 样式
+const titleStyle = computed(() => {
+  return {
+    color: props.titleColor,
+    fontSize: transformValueUnit(props.titleFontSize),
+    fontWeight: props.titleFontWeight,
+    fontFamily: props.titleFontFamily,
+  }
 })
+
+defineSlots<{
+  title(props: { field: LcbFormField }): any
+}>()
+
 const fields = ref<LcbFormField[]>(props.fields)
 const customInputs = ref<Record<string, string>>({})
 const customField = 'custom'
@@ -356,8 +383,12 @@ watch(
   form,
   (newVal) => {
     formData.value = newVal
+    // 如果设置了 formKey，将表单数据同步到 PAGE_PROVIDE_KEY
+    if (props.formKey && pageInfo.value) {
+      pageInfo.value[props.formKey] = newVal
+    }
   },
-  { deep: true },
+  { deep: true, immediate: true },
 )
 </script>
 

package/components/lcb-form/types.ts

@@ -80,5 +80,14 @@ export interface LcbFormProps extends LcbBlockProps {
   affirmText?: string
   // 底部悬浮
   bottomFixed?: boolean
+  // 是否显示提交按钮
+  showSubmitButton?: boolean
   vertical?: boolean
+  // 标题样式配置
+  titleColor?: string
+  titleFontSize?: number
+  titleFontWeight?: string | number
+  titleFontFamily?: string
+  // 表单唯一标识，用于在 PAGE_PROVIDE_KEY 中注册表单数据
+  formKey?: string
 }

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/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.74",
+  "version": "0.7.76",
   "keywords": [
     "业务组件"
   ],

package/types/components/lcb-action-view/types.d.ts

@@ -21,6 +21,8 @@ export type LcbActionViewProps = {
     requestParams: Record<string, any>
     /** 请求之后刷新schemapage */
     refreshSchemaPage?: boolean
+    /** 绑定的表单 keys，请求时会将对应表单数据合并到 requestParams */
+    formKeys?: string[]
   }
   submitRequestInfo?: {
     requestUrl: string

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-button/types.d.ts

@@ -36,4 +36,5 @@ export interface LcbButtonProps extends LcbBlockProps {
   lineClamp?: number
   progressProps?: ExtractPropTypes<typeof progressProps>
   fontFamily?: string
+  formKeys?: string[]
 }

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

@@ -1,16 +1,24 @@
-import { LcbFormProps } from './types'
+import { LcbFormField, LcbFormProps } from './types'
 declare let __VLS_typeProps: LcbFormProps
 type __VLS_PublicProps = {
   modelValue?: Record<string, any>
 } & typeof __VLS_typeProps
-declare const _default: import('vue').DefineComponent<
+declare function __VLS_template(): Readonly<{
+  title(props: { field: LcbFormField }): any
+}> & {
+  title(props: { field: LcbFormField }): any
+}
+declare const __VLS_component: import('vue').DefineComponent<
   __VLS_WithDefaults<
     __VLS_TypePropsToOption<__VLS_PublicProps>,
     {
       submitText: string
       affirmText: string
       bottomFixed: boolean
+      showSubmitButton: boolean
       vertical: boolean
+      titleFontSize: number
+      titleFontWeight: string
     }
   >,
   {},
@@ -32,7 +40,10 @@ declare const _default: import('vue').DefineComponent<
           submitText: string
           affirmText: string
           bottomFixed: boolean
+          showSubmitButton: boolean
           vertical: boolean
+          titleFontSize: number
+          titleFontWeight: string
         }
       >
     >
@@ -41,12 +52,19 @@ declare const _default: import('vue').DefineComponent<
   },
   {
     vertical: boolean
+    titleFontSize: number
+    titleFontWeight: string | number
     submitText: string
     affirmText: string
     bottomFixed: boolean
+    showSubmitButton: boolean
   },
   {}
 >
+declare const _default: __VLS_WithTemplateSlots<
+  typeof __VLS_component,
+  ReturnType<typeof __VLS_template>
+>
 export default _default
 type __VLS_WithDefaults<P, D> = {
   [K in keyof Pick<P, keyof P>]: K extends keyof D
@@ -60,6 +78,11 @@ type __VLS_WithDefaults<P, D> = {
 type __VLS_Prettify<T> = {
   [K in keyof T]: T[K]
 } & {}
+type __VLS_WithTemplateSlots<T, S> = T & {
+  new (): {
+    $slots: S
+  }
+}
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T
 type __VLS_TypePropsToOption<T> = {
   [K in keyof T]-?: {} extends Pick<T, K>

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

@@ -78,5 +78,11 @@ export interface LcbFormProps extends LcbBlockProps {
   agreementType?: string
   affirmText?: string
   bottomFixed?: boolean
+  showSubmitButton?: boolean
   vertical?: boolean
+  titleColor?: string
+  titleFontSize?: number
+  titleFontWeight?: string | number
+  titleFontFamily?: string
+  formKey?: string
 }

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/components/lcb-search/lcb-search.vue.d.ts

@@ -85,6 +85,7 @@ declare const _default: import('vue').DefineComponent<
                 requestUrl: string
                 requestParams: Record<string, any>
                 refreshSchemaPage?: boolean
+                formKeys?: string[]
               }
               submitRequestInfo?: {
                 requestUrl: string
@@ -194,6 +195,7 @@ declare const _default: import('vue').DefineComponent<
                 requestUrl: string
                 requestParams: Record<string, any>
                 refreshSchemaPage?: boolean
+                formKeys?: string[]
               }
               submitRequestInfo?: {
                 requestUrl: string
@@ -280,6 +282,7 @@ declare const _default: import('vue').DefineComponent<
                 requestUrl: string
                 requestParams: Record<string, any>
                 refreshSchemaPage?: boolean
+                formKeys?: string[]
               }
               submitRequestInfo?: {
                 requestUrl: string
@@ -366,6 +369,7 @@ declare const _default: import('vue').DefineComponent<
                 requestUrl: string
                 requestParams: Record<string, any>
                 refreshSchemaPage?: boolean
+                formKeys?: string[]
               }
               submitRequestInfo?: {
                 requestUrl: string
@@ -451,6 +455,7 @@ declare const _default: import('vue').DefineComponent<
                 requestUrl: string
                 requestParams: Record<string, any>
                 refreshSchemaPage?: boolean
+                formKeys?: string[]
               }
               submitRequestInfo?: {
                 requestUrl: string
@@ -542,6 +547,7 @@ declare const _default: import('vue').DefineComponent<
                 requestUrl: string
                 requestParams: Record<string, any>
                 refreshSchemaPage?: boolean
+                formKeys?: string[]
               }
               submitRequestInfo?: {
                 requestUrl: string
@@ -627,6 +633,7 @@ declare const _default: import('vue').DefineComponent<
                 requestUrl: string
                 requestParams: Record<string, any>
                 refreshSchemaPage?: boolean
+                formKeys?: string[]
               }
               submitRequestInfo?: {
                 requestUrl: string
@@ -712,6 +719,7 @@ declare const _default: import('vue').DefineComponent<
                 requestUrl: string
                 requestParams: Record<string, any>
                 refreshSchemaPage?: boolean
+                formKeys?: string[]
               }
               submitRequestInfo?: {
                 requestUrl: string
@@ -801,6 +809,7 @@ declare const _default: import('vue').DefineComponent<
                 requestUrl: string
                 requestParams: Record<string, any>
                 refreshSchemaPage?: boolean
+                formKeys?: string[]
               }
               submitRequestInfo?: {
                 requestUrl: string
@@ -887,6 +896,7 @@ declare const _default: import('vue').DefineComponent<
                 requestUrl: string
                 requestParams: Record<string, any>
                 refreshSchemaPage?: boolean
+                formKeys?: string[]
               }
               submitRequestInfo?: {
                 requestUrl: string

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'