@tplc/business 0.7.75 → 0.7.76

package/CHANGELOG.md

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

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-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/package.json

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