@tplc/business 0.4.118 → 0.4.120

package/CHANGELOG.md

@@ -2,6 +2,41 @@
 
 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.4.120](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/compare/v0.4.119...v0.4.120) (2025-05-23)
+
+
+### ✨ Features | 新功能
+
+* 支持wrapper list ([8727bb8](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/8727bb8d2b55f9d9d5d521175662777649acfada))
+* 新增tabs title ([9aad0cf](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/9aad0cfe0c510616b21b3656a2d6b73b7c11fcfd))
+* 暂时提交字段 ([d2378a3](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/d2378a3fe2d6a68a6a32573aae61085d67bcb6e7))
+* 暂时支持列表 ([a0e6b7b](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/a0e6b7b3e2c1e013427c5ab659005818ace3b092))
+* 调整按钮信息 ([17424ef](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/17424ef9e93fcda51e5b79de86a94c5e818f152b))
+
+### [0.4.119](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/compare/v0.4.115...v0.4.119) (2025-05-21)
+
+
+### 🚀 Chore | 构建/工程依赖/工具
+
+* **release:** 0.4.115 ([15cc0e1](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/15cc0e19900cf11bb7e8ac16cfc9c5e67e1b1bf6))
+* **release:** 0.4.116 ([55d9a73](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/55d9a737f40a44ea1170a4b63e8c6cba0f03e535))
+* **release:** 0.4.117 ([3b53e8e](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/3b53e8eb27df03cfe005f41ef899141021ecf9e4))
+* **release:** 0.4.118 ([c953fde](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/c953fdefd8171082bc6e7c265905cbcd423f2cdd))
+
+
+### ✨ Features | 新功能
+
+* button 预览图片修改 ([1e27b47](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/1e27b4719962edb6d1223f159b75c7784aea4066))
+* 修改脚本 ([fa308af](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/fa308afcd6221c79d32947881b81c13288d6bc72))
+* 反选判断 ([6dea74e](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/6dea74e65d9843766f7911eff2b01b00d72320d6))
+* 新增button enablePreview ([ab91670](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/ab91670293731aa12ce7f76a6dc2e8f63c77a3dd))
+* 暂时提交 ([0921daa](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/0921daa2e8226bbedafeb64a5e3c2e0522228c82))
+* 暂时提交area支持list 还差样式 ([a815d4b](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/a815d4be226a97ef91a63cbce90cdb51feb4540d))
+* 补充文档 ([45cffbd](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/45cffbd548e36ac779c44e6caee637c0b858a432))
+* 调整button位置 ([f13c6ee](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/f13c6ee1d678b7e24d1d71286ee10ea82a27d7d3))
+* 调整数据 ([f5e0fd2](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/f5e0fd2ccd9153d089949ce24620cd222bfc47ea))
+* 调整配置 ([426199e](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/426199e2b441a2bf17288add847874218d0f2032))
+
 ### [0.4.118](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/compare/v0.4.117...v0.4.118) (2025-05-19)
 
 

package/action.d.ts

@@ -22,7 +22,7 @@ export interface DataSource {
   source?: 'remote' | 'context' | 'user'
   requestInfo?: {
     requestUrl: string
-    requestParams: Record<string, unknown>
+    requestParams: string
   }
   /** 动态key */
   dependKey?: string

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

@@ -1,16 +1,34 @@
 <template>
   <lcb-block v-bind="$props" v-if="showArea">
-    <view v-for="(item, index) in renderList" :key="index">
-      <lcb-area-item v-bind="$props" :data="item" />
+    <view
+      class="h-full"
+      :style="{
+        display: display,
+        gap: transformValueUnit(gap),
+        overflowX: scrollX ? 'auto' : 'initial',
+        ...innerStyle,
+      }"
+    >
+      <view
+        v-for="(item, index) in list"
+        :key="item.id"
+        class="slot-wrapper"
+        :style="{
+          ...getStyle(index),
+          overflowX,
+        }"
+      >
+        <slot :item="item" />
+      </view>
     </view>
   </lcb-block>
 </template>
 
 <script setup lang="ts">
-import { computed, inject, Ref, watchEffect, ref } from 'vue'
+import { computed, inject, Ref } from 'vue'
 import { LcbAreaProps } from './types'
+import { transformValueUnit } from '@tplc/business/utils/transform'
 import { get } from 'lodash-es'
-import LcbAreaItem from './components/LcbAreaItem/index.vue'
 import { PAGE_PROVIDE_KEY } from '@tplc/business/constants'
 defineOptions({
   name: 'LcbArea',
@@ -20,15 +38,37 @@ defineOptions({
     styleIsolation: 'shared',
   },
 })
-const pageInfo = inject(PAGE_PROVIDE_KEY) as Ref<Record<string, any>>
-const userStore = uni.$lcb.userStore?.()
 const props = withDefaults(defineProps<LcbAreaProps>(), {
   displayFlex: 'row',
   display: 'flex',
   overflowX: 'initial',
-  mode: 'single',
+})
+const pageInfo = inject(PAGE_PROVIDE_KEY) as Ref<Record<string, any>>
+const innerStyle = computed(() => {
+  // col-span-2
+  if (props.display === 'grid') {
+    return {
+      gridTemplateColumns: `repeat(${props.gridColumns}, minmax(0, 1fr))`,
+    }
+  }
+  return {
+    flexDirection: props.displayFlex,
+    alignItems: 'stretch',
+  }
 })
 
+const getStyle = (index: number) => {
+  const flex = props.areaFlexs?.[index]?.flex ?? 1
+  return {
+    gridColumn:
+      props.areaItems?.[index]?.colSpan && props.display === 'grid'
+        ? `span ${props.areaItems?.[index]?.colSpan} / span ${props.areaItems?.[index]?.colSpan}`
+        : undefined,
+    flex: props.display === 'flex' ? flex || 'auto' : undefined,
+    flexShrink: props.display === 'flex' ? (props.flexShrink ?? 1) : undefined,
+  }
+}
+
 const showArea = computed(() => {
   if (props.dependKey) {
     const userStore = uni.$lcb.userStore?.()
@@ -43,28 +83,16 @@ const showArea = computed(() => {
   }
   return true
 })
+</script>
 
-const renderList = ref<unknown[]>([])
-
-watchEffect(async () => {
-  if (props.mode === 'single') {
-    renderList.value = [props.list]
-  } else {
-    if (props.dataSource?.source === 'remote') {
-      if (props.dataSource.requestInfo?.requestUrl) {
-        const { data } = await uni.$lcb.http.post(
-          props.dataSource.requestInfo.requestUrl,
-          props.dataSource.requestInfo.requestParams,
-        )
-        renderList.value = data as unknown[]
-      }
-    } else if (props.dataSource?.dependKey) {
-      renderList.value = get(
-        props.dataSource?.source === 'context' ? pageInfo.value : userStore?.userInfo,
-        props.dataSource?.dependKey,
-        [],
-      )
-    }
+<style lang="scss" scoped>
+// 小程序的情况
+// #ifdef MP-WEIXIN
+.slot-wrapper {
+  :deep(> view) {
+    width: 100%;
+    height: 100%;
   }
-})
-</script>
+}
+// #endif
+</style>

package/components/lcb-area/types.ts

@@ -1,8 +1,5 @@
-import { DataSource } from '../../action'
 import { LcbBlockProps } from '../lcb-block/types'
 export interface LcbAreaProps extends LcbBlockProps {
-  mode?: 'single' | 'multiple'
-  dataSource?: DataSource
   id?: number
   fixed?: boolean
   unDraggable?: boolean

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

@@ -8,7 +8,7 @@
     v-else-if="dynamicKey && hideWhenDynamicKeyNotExist ? dynamicValue : true"
   >
     <lcb-block
-      v-bind="$props"
+      v-bind="styleOptions[0]"
       :customClass="`${customClass} border-solid`"
       :customStyle="{
         width: props.fillWidth ? '100%' : 'fit-content',
@@ -16,7 +16,12 @@
         ...innerItemStyle,
       }"
     >
-      <lcb-action-view v-bind="actionProps" @avatar="onAvatar" @click="handleClick">
+      <lcb-action-view
+        v-bind="actionProps"
+        @avatar="onAvatar"
+        @click="handleClick"
+        :customStyle="styleOptions[1]"
+      >
         <view class="!flex items-center justify-center" :style="`gap: ${iconGap}rpx`">
           <wd-icon
             v-if="icon"
@@ -45,7 +50,7 @@
 <script setup lang="ts">
 import { computed, inject, Ref } from 'vue'
 import { LcbButtonProps } from './types'
-import { PAGE_PROVIDE_KEY } from '../../constants'
+import { PAGE_PROVIDE_KEY, WRAPPER_ITEM_KEY } from '../../constants'
 import { getFlexStyle, transformValueUnit } from '../../utils/transform'
 import { getDynamicData } from '../../utils/utils'
 import { get } from 'lodash-es'
@@ -66,16 +71,20 @@ const props = withDefaults(defineProps<LcbButtonProps>(), {
   iconSize: 24,
 })
 const pageInfo = inject(PAGE_PROVIDE_KEY) as Ref<Record<string, any>>
+const wrapperItemData = inject(WRAPPER_ITEM_KEY) as Ref<Record<string, any>>
 const userStore = uni.$lcb.userStore?.()
+const store = computed(() => {
+  return props.keyFromUser
+    ? userStore?.userInfo
+    : wrapperItemData
+      ? wrapperItemData.value
+      : pageInfo.value
+})
 
 const dynamicValue = computed(() => {
   let value = props.textDefaultValue
   if (props.dynamicKey) {
-    value = get(
-      props.keyFromUser ? userStore?.userInfo : pageInfo.value,
-      props.dynamicKey,
-      props.textDefaultValue,
-    )
+    value = get(store.value, props.dynamicKey, props.textDefaultValue)
   }
   return value
 })
@@ -93,7 +102,7 @@ const innerValue = computed(() => {
     return dynamicValue.value || props.url
   }
   return getDynamicData(props.text, {
-    store: props.keyFromUser ? userStore?.userInfo : pageInfo.value,
+    store: store.value,
     defaultText: props.textDefaultValue,
   })
 })
@@ -103,7 +112,7 @@ const actionProps = computed(() => {
   return {
     ...props.action,
     jumpUrl: getDynamicData(props.action?.jumpUrl, {
-      store: props.keyFromUser ? userStore?.userInfo : pageInfo.value,
+      store: store.value,
     }),
   }
 })
@@ -118,7 +127,23 @@ const onAvatar = (headImgUrl) => {
 const innerStyle = computed(() => {
   return getFlexStyle(props.align)
 })
+
 const innerItemStyle = computed(() => {
   return getFlexStyle(props.itemAlign)
 })
+
+const styleOptions = computed<[Record<string, any>, string]>(() => {
+  const {
+    paddingVertical,
+    paddingHorizontal,
+    paddingTop,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    ...other
+  } = props
+
+  const actionStyle = `width: 100%; padding:${transformValueUnit(paddingTop || paddingVertical)} ${transformValueUnit(paddingRight || paddingHorizontal)} ${transformValueUnit(paddingBottom || paddingVertical)} ${transformValueUnit(paddingLeft || paddingHorizontal)}`
+  return [other, actionStyle]
+})
 </script>

package/components/lcb-tabs/components/Imgs/index.vue

@@ -9,21 +9,30 @@
         gap: transformValueUnit(gap),
       }"
     >
-      <wd-img
+      <view
         v-for="(item, index) in items"
         :key="index"
+        class="flex flex-col items-center justify-center"
         :class="{
+          'lcb-tag-active': current === index,
           'inline-block': tagsMode === 'scroll',
         }"
         :style="{
           fontSize: transformValueUnit(itemFontSize),
+          width: transformValueUnit(imgWidth),
+          gap: transformValueUnit(imgTitleGap),
+          color: current === index ? activeColor : inactiveColor,
         }"
-        :width="transformValueUnit(imgWidth)"
-        height="auto"
-        mode="widthFix"
-        :src="current === index ? item.activeUrl : item.inactiveUrl"
         @click="handleTagClick(item.name, index)"
-      />
+      >
+        <wd-img
+          :width="transformValueUnit(imgWidth)"
+          height="auto"
+          mode="widthFix"
+          :src="current === index ? item.activeUrl : item.inactiveUrl"
+        />
+        <view v-if="showTitle" class="truncate px-2">{{ item.title }}</view>
+      </view>
     </view>
   </lcb-block>
 </template>
@@ -33,7 +42,11 @@ import { ref } from 'vue'
 import useSyncForm from '../../../../hooks/useSyncForm'
 import { transformValueUnit } from '../../../../utils/transform'
 import { LcbTabsProps } from '../../types'
-const props = withDefaults(defineProps<LcbTabsProps>(), {})
+const props = withDefaults(defineProps<LcbTabsProps>(), {
+  imgTitleGap: 24,
+  activeColor: 'var(--wot-color-theme)',
+  inactiveColor: '#333333',
+})
 const { syncForm } = useSyncForm(props.dynamicScope)
 const current = ref(0)
 defineOptions({
@@ -54,7 +67,3 @@ const handleTagClick = (name: string, index: number) => {
 }
 handleTagClick(props.items?.[0].name, 0)
 </script>
-
-<style lang="scss" scoped>
-@import '@tplc/wot/components/common/abstracts/variable';
-</style>

package/components/lcb-tabs/types.ts

@@ -9,6 +9,7 @@ export interface LcbTabsProps extends LcbBlockProps {
     activeUrl?: string
     inactiveUrl?: string
   }[]
+  showTitle?: boolean
   lineWidth?: number
   lineHeight?: number
   slidable?: 'always' | 'auto'
@@ -19,4 +20,7 @@ export interface LcbTabsProps extends LcbBlockProps {
   gap?: number
   dynamicScope?: string
   imgWidth?: number
+  imgTitleGap?: number
+  activeColor?: string
+  inactiveColor?: string
 }

package/components/lcb-wrapper-list/components/WrapperItem/index.vue

@@ -0,0 +1,34 @@
+<template>
+  <slot />
+</template>
+
+<script setup lang="ts">
+import { WRAPPER_ITEM_KEY } from '../../../../constants'
+import { provide, ref, watch } from 'vue'
+
+defineOptions({
+  name: 'LcbWrapperItem',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared',
+  },
+})
+const props = defineProps<{
+  data?: unknown
+}>()
+const data = ref(props.data)
+provide(WRAPPER_ITEM_KEY, data)
+
+watch(
+  () => props.data,
+  (newVal) => {
+    data.value = newVal
+  },
+  {
+    deep: true,
+  },
+)
+</script>
+
+<style lang="scss" scoped></style>

package/components/lcb-wrapper-list/lcb-wrapper-list.vue

@@ -0,0 +1,82 @@
+<template>
+  <lcb-block v-bind="$props" :custom-style="listStyle" v-if="renderList.length">
+    <view
+      v-for="(item, index) in renderList"
+      :key="index"
+      class="flex-shrink-0"
+      :style="{
+        width: width ? transformValueUnit(width) : '100%',
+      }"
+    >
+      <WrapperItem :data="item">
+        <block v-for="com in list" :key="com.id">
+          <slot :item="com" />
+        </block>
+      </WrapperItem>
+    </view>
+  </lcb-block>
+</template>
+
+<script setup lang="ts">
+import { computed, inject, Ref, ref, watchEffect } from 'vue'
+import { LcbWrapperListProps } from './types'
+import { get } from 'lodash-es'
+import { PAGE_PROVIDE_KEY } from '@tplc/business/constants'
+import { transformValueUnit } from '@tplc/business/utils/transform'
+import WrapperItem from './components/WrapperItem/index.vue'
+defineOptions({
+  name: 'LcbWrapperList',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared',
+  },
+})
+const props = withDefaults(defineProps<LcbWrapperListProps>(), {
+  display: 'flex',
+  flexDirection: 'column',
+})
+const pageInfo = inject(PAGE_PROVIDE_KEY) as Ref<Record<string, any>>
+const userStore = uni.$lcb.userStore?.()
+const renderList = ref<unknown[]>([
+  { walletAmount: 1 },
+  { walletAmount: 2 },
+  { walletAmount: 3 },
+  { walletAmount: 4 },
+])
+
+watchEffect(async () => {
+  if (props.dataSource?.source === 'remote') {
+    if (props.dataSource.requestInfo?.requestUrl) {
+      const { data } = await uni.$lcb.http.post(
+        props.dataSource.requestInfo.requestUrl,
+        JSON.parse(props.dataSource.requestInfo.requestParams || '{}'),
+      )
+      renderList.value = data as unknown[]
+    }
+  } else if (props.dataSource?.dependKey) {
+    renderList.value = get(
+      props.dataSource?.source === 'context' ? pageInfo.value : userStore?.userInfo,
+      props.dataSource?.dependKey,
+      [],
+    )
+  } else {
+    renderList.value = []
+  }
+})
+const listStyle = computed(() => {
+  const style = {
+    width: '100%',
+    display: props.display,
+    'flex-direction': props.flexDirection,
+    gap: transformValueUnit(props.gap),
+    'align-items': 'stretch',
+    'grid-template-columns': `repeat(${props.gridColumns}, minmax(0, 1fr))`,
+    'overflow-x': props.scrollX ? 'auto' : 'hidden',
+    'white-space': props.scrollX ? 'nowrap' : 'normal',
+  }
+  return style
+})
+</script>
+
+<style lang="scss" scoped></style>

package/components/lcb-wrapper-list/types.ts

@@ -0,0 +1,13 @@
+import { LcbAreaProps } from '../lcb-area/types'
+import { DataSource } from '../../action'
+import { LcbBlockProps } from '../lcb-block/types'
+export interface LcbWrapperListProps extends LcbBlockProps {
+  dataSource?: DataSource
+  gap?: number
+  width?: number
+  display?: 'flex' | 'grid'
+  flexDirection?: 'row' | 'column'
+  gridColumns?: number
+  scrollX?: boolean
+  list?: LcbAreaProps[]
+}

package/constants.ts

@@ -11,3 +11,5 @@ export const USER_BASIC_INFO = 'user_basic_info'
 export const LIST_FORM_CHOOSER_VALUES = 'list_form_chooser_values'
 /** 页面动态数据 */
 export const PAGE_DYNAMIC_DATA = 'page_dynamic_data'
+/** 列表页表单选择项 */
+export const WRAPPER_ITEM_KEY = 'wrapper_item_key'

package/global.d.ts

@@ -47,6 +47,7 @@ declare module 'vue' {
     'lcb-vip': (typeof import('@tplc/business/components/lcb-vip/lcb-vip.vue'))['default']
     'lcb-waterfall-item': (typeof import('@tplc/business/components/lcb-waterfall/lcb-waterfall-item.vue'))['default']
     'lcb-waterfall': (typeof import('@tplc/business/components/lcb-waterfall/lcb-waterfall.vue'))['default']
+    'lcb-wrapper-list': (typeof import('@tplc/business/components/lcb-wrapper-list/lcb-wrapper-list.vue'))['default']
   }
 }
 

package/package.json

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

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

@@ -1,12 +1,14 @@
 import { LcbAreaProps } from './types'
-declare const _default: import('vue').DefineComponent<
+declare function __VLS_template(): {
+  default?(_: { item: LcbAreaProps }): any
+}
+declare const __VLS_component: import('vue').DefineComponent<
   __VLS_WithDefaults<
     __VLS_TypePropsToOption<LcbAreaProps>,
     {
       displayFlex: string
       display: string
       overflowX: string
-      mode: string
     }
   >,
   {},
@@ -26,19 +28,21 @@ declare const _default: import('vue').DefineComponent<
           displayFlex: string
           display: string
           overflowX: string
-          mode: string
         }
       >
     >
   >,
   {
-    mode: 'single' | 'multiple'
     display: 'flex' | 'grid'
     displayFlex: 'row' | 'column'
     overflowX: 'hidden' | 'initial' | 'auto'
   },
   {}
 >
+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
@@ -52,6 +56,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-area/types.d.ts

@@ -1,8 +1,5 @@
-import { DataSource } from '../../action'
 import { LcbBlockProps } from '../lcb-block/types'
 export interface LcbAreaProps extends LcbBlockProps {
-  mode?: 'single' | 'multiple'
-  dataSource?: DataSource
   id?: number
   fixed?: boolean
   unDraggable?: boolean

package/types/components/lcb-tabs/components/Imgs/index.vue.d.ts

@@ -1,6 +1,13 @@
 import { LcbTabsProps } from '../../types'
 declare const _default: import('vue').DefineComponent<
-  __VLS_WithDefaults<__VLS_TypePropsToOption<LcbTabsProps>, {}>,
+  __VLS_WithDefaults<
+    __VLS_TypePropsToOption<LcbTabsProps>,
+    {
+      imgTitleGap: number
+      activeColor: string
+      inactiveColor: string
+    }
+  >,
   {},
   unknown,
   {},
@@ -11,9 +18,22 @@ declare const _default: import('vue').DefineComponent<
   string,
   import('vue').PublicProps,
   Readonly<
-    import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<LcbTabsProps>, {}>>
+    import('vue').ExtractPropTypes<
+      __VLS_WithDefaults<
+        __VLS_TypePropsToOption<LcbTabsProps>,
+        {
+          imgTitleGap: number
+          activeColor: string
+          inactiveColor: string
+        }
+      >
+    >
   >,
-  {},
+  {
+    inactiveColor: string
+    activeColor: string
+    imgTitleGap: number
+  },
   {}
 >
 export default _default

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

@@ -8,6 +8,7 @@ export interface LcbTabsProps extends LcbBlockProps {
     activeUrl?: string
     inactiveUrl?: string
   }[]
+  showTitle?: boolean
   lineWidth?: number
   lineHeight?: number
   slidable?: 'always' | 'auto'
@@ -18,4 +19,7 @@ export interface LcbTabsProps extends LcbBlockProps {
   gap?: number
   dynamicScope?: string
   imgWidth?: number
+  imgTitleGap?: number
+  activeColor?: string
+  inactiveColor?: string
 }

package/types/components/lcb-wrapper-list/components/WrapperItem/index.vue.d.ts

@@ -0,0 +1,47 @@
+declare function __VLS_template(): {
+  default?(_: {}): any
+}
+declare const __VLS_component: import('vue').DefineComponent<
+  __VLS_TypePropsToOption<{
+    data?: unknown
+  }>,
+  {},
+  unknown,
+  {},
+  {},
+  import('vue').ComponentOptionsMixin,
+  import('vue').ComponentOptionsMixin,
+  {},
+  string,
+  import('vue').PublicProps,
+  Readonly<
+    import('vue').ExtractPropTypes<
+      __VLS_TypePropsToOption<{
+        data?: unknown
+      }>
+    >
+  >,
+  {},
+  {}
+>
+declare const _default: __VLS_WithTemplateSlots<
+  typeof __VLS_component,
+  ReturnType<typeof __VLS_template>
+>
+export default _default
+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>
+    ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>
+      }
+    : {
+        type: import('vue').PropType<T[K]>
+        required: true
+      }
+}

package/types/components/{lcb-area/components/LcbAreaItem/index.vue.d.ts → lcb-wrapper-list/lcb-wrapper-list.vue.d.ts}

@@ -1,15 +1,14 @@
-import { LcbAreaProps } from '../../types'
+import { LcbWrapperListProps } from './types'
 declare function __VLS_template(): {
-  default?(_: { item: LcbAreaProps }): any
+  default?(_: { item: import('../lcb-area/types').LcbAreaProps }): any
 }
 declare const __VLS_component: import('vue').DefineComponent<
   __VLS_WithDefaults<
-    __VLS_TypePropsToOption<
-      LcbAreaProps & {
-        data?: unknown
-      }
-    >,
-    {}
+    __VLS_TypePropsToOption<LcbWrapperListProps>,
+    {
+      display: string
+      flexDirection: string
+    }
   >,
   {},
   unknown,
@@ -23,16 +22,18 @@ declare const __VLS_component: import('vue').DefineComponent<
   Readonly<
     import('vue').ExtractPropTypes<
       __VLS_WithDefaults<
-        __VLS_TypePropsToOption<
-          LcbAreaProps & {
-            data?: unknown
-          }
-        >,
-        {}
+        __VLS_TypePropsToOption<LcbWrapperListProps>,
+        {
+          display: string
+          flexDirection: string
+        }
       >
     >
   >,
-  {},
+  {
+    display: 'flex' | 'grid'
+    flexDirection: 'row' | 'column'
+  },
   {}
 >
 declare const _default: __VLS_WithTemplateSlots<

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

@@ -0,0 +1,13 @@
+import { LcbAreaProps } from '../lcb-area/types'
+import { DataSource } from '../../action'
+import { LcbBlockProps } from '../lcb-block/types'
+export interface LcbWrapperListProps extends LcbBlockProps {
+  dataSource?: DataSource
+  gap?: number
+  width?: number
+  display?: 'flex' | 'grid'
+  flexDirection?: 'row' | 'column'
+  gridColumns?: number
+  scrollX?: boolean
+  list?: LcbAreaProps[]
+}

package/types/constants.d.ts

@@ -11,3 +11,5 @@ export declare const USER_BASIC_INFO = 'user_basic_info'
 export declare const LIST_FORM_CHOOSER_VALUES = 'list_form_chooser_values'
 /** 页面动态数据 */
 export declare const PAGE_DYNAMIC_DATA = 'page_dynamic_data'
+/** 列表页表单选择项 */
+export declare const WRAPPER_ITEM_KEY = 'wrapper_item_key'

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

@@ -1,81 +0,0 @@
-<template>
-  <view
-    class="h-full"
-    :style="{
-      display: display,
-      gap: transformValueUnit(gap),
-      overflowX: scrollX ? 'auto' : 'initial',
-      ...innerStyle,
-    }"
-  >
-    <view
-      v-for="(item, index) in list"
-      :key="item.id"
-      class="slot-wrapper"
-      :style="{
-        ...getStyle(index),
-        overflowX,
-      }"
-    >
-      <slot :item="item" />
-    </view>
-  </view>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-import { LcbAreaProps } from '../../types'
-import { transformValueUnit } from '@tplc/business/utils/transform'
-defineOptions({
-  name: 'LcbAreaItem',
-  options: {
-    addGlobalClass: true,
-    virtualHost: true,
-    styleIsolation: 'shared',
-  },
-})
-const props = withDefaults(
-  defineProps<
-    LcbAreaProps & {
-      data?: unknown
-    }
-  >(),
-  {},
-)
-
-const getStyle = (index: number) => {
-  const flex = props.areaFlexs?.[index]?.flex ?? 1
-  return {
-    gridColumn:
-      props.areaItems?.[index]?.colSpan && props.display === 'grid'
-        ? `span ${props.areaItems?.[index]?.colSpan} / span ${props.areaItems?.[index]?.colSpan}`
-        : undefined,
-    flex: props.display === 'flex' ? flex || 'auto' : undefined,
-    flexShrink: props.display === 'flex' ? (props.flexShrink ?? 1) : undefined,
-  }
-}
-const innerStyle = computed(() => {
-  // col-span-2
-  if (props.display === 'grid') {
-    return {
-      gridTemplateColumns: `repeat(${props.gridColumns}, minmax(0, 1fr))`,
-    }
-  }
-  return {
-    flexDirection: props.displayFlex,
-    alignItems: 'stretch',
-  }
-})
-</script>
-
-<style lang="scss" scoped>
-// 小程序的情况
-// #ifdef MP-WEIXIN
-.slot-wrapper {
-  :deep(> view) {
-    width: 100%;
-    height: 100%;
-  }
-}
-// #endif
-</style>