@tplc/business 0.5.18 → 0.5.19

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.5.19](https://gitlab888.30jia.com.cn/tourism-front/zero-code-pro/compare/v0.5.18...v0.5.19) (2025-10-16)
+
+
+### ✨ Features | 新功能
+
+* tab支持变更属性 ([3e8390b](https://gitlab888.30jia.com.cn/tourism-front/zero-code-pro/commit/3e8390be463525f4988d5ae36034a83d69031dc2))
+* 支持 stackRight stackLeft ([81d1fd4](https://gitlab888.30jia.com.cn/tourism-front/zero-code-pro/commit/81d1fd488395196cf28ef6a8df269564d87376bd))
+
 ### [0.5.18](https://gitlab888.30jia.com.cn/tourism-front/zero-code-pro/compare/v0.5.17...v0.5.18) (2025-10-14)
 
 

package/components/lcb-block/types.ts

@@ -40,7 +40,7 @@ export interface LcbBlockProps {
   borderColor?: string
   borderWidth?: number
   textAlign?: 'left' | 'center' | 'right'
-  customStyle?: StyleValue
+  customStyle?: Record<string, any>
   align?:
     | 'top-left'
     | 'top-center'

package/components/lcb-swiper/lcb-swiper.vue

@@ -11,16 +11,7 @@
         :key="i"
         class="carousel-block"
         @click="changeBlock(item)"
-        :style="{
-          left: item.left,
-          top: item.top,
-          zIndex: item.zIndex,
-          width: itemWidth + 'rpx',
-          height: itemHeight + 'rpx',
-          transition: item.transition + 's all',
-          transform: 'translate3d(-50%, -50%, 0) scale(' + item.scale + ')',
-          opacity: item.opacity,
-        }"
+        :style="getItemStyle(item)"
       >
         <lcb-action-view
           v-bind="item.item.link"
@@ -54,10 +45,11 @@ defineOptions({
 })
 
 const props = withDefaults(defineProps<LcbSwiperProps>(), {
-  mode: 'multiple',
   itemWidth: 450,
   itemHeight: 300,
   enableOpacity: false,
+  mode: 'stackCenter',
+  scaleStep: 0.1,
 })
 type DataRecord = Record<string, any>
 
@@ -92,23 +84,53 @@ const slotStyles = ref<SlotStyle[]>([])
 
 const visible = computed<number>(() => {
   if (props.visibleCount && props.visibleCount > 0) return props.visibleCount
-  if (props.mode === 'single') return 3
-  if (props.mode === 'multiple') return 5
   return 5
 })
 
-function buildSlots(n: number): SlotStyle[] {
+function buildSlots(n: number, mode: string): SlotStyle[] {
   const center = Math.floor(n / 2)
   const spacing = 14 // percent per slot
-  const scaleStep = 0.15
+  const stepValue = props.scaleStep || 0.1 // 使用 props 中的缩放步长（仅用于 stackLeft/Right）
+
   return Array.from({ length: n }, (_, i) => {
     const d = Math.abs(i - center)
+
+    let leftValue: string
+    let topValue: string
+    let scale: number
+    let zIndex: number
+
+    let opacity: number
+
+    if (mode === 'stackLeft') {
+      // 左排列：从左到右，依次缩小
+      leftValue = `calc(0% + ${i * 8}%)`
+      topValue = '50%'
+      scale = Math.max(1 - i * stepValue, 0.5) // 根据 scaleStep 缩放
+      zIndex = n - i // 第1张在最上层
+      opacity = props.enableOpacity ? (i === 0 ? 1 : i === 1 ? 0.8 : 0.6) : 1
+    } else if (mode === 'stackRight') {
+      // 右排列：从右到左，依次缩小
+      leftValue = `calc(100% - ${i * 8}%)`
+      topValue = '50%'
+      scale = Math.max(1 - i * stepValue, 0.5) // 根据 scaleStep 缩放
+      zIndex = n - i // 第1张在最上层
+      opacity = props.enableOpacity ? (i === 0 ? 1 : i === 1 ? 0.8 : 0.6) : 1
+    } else {
+      // 居中：从中心向两侧分布，使用固定的 0.15 缩放步长
+      leftValue = `calc(50% + ${(i - center) * spacing}%)`
+      topValue = '50%'
+      scale = Math.max(1 - d * 0.15, 0.6) // center 模式使用固定 0.15
+      zIndex = 100 - d
+      opacity = props.enableOpacity ? (d === 0 ? 1 : d === 1 ? 0.4 : 0.7) : 1
+    }
+
     return {
-      left: `calc(50% + ${(i - center) * spacing}% )`,
-      top: '50%',
-      zIndex: 100 - d,
-      scale: Math.max(1 - d * scaleStep, 0.6),
-      opacity: props.enableOpacity ? (d === 0 ? 1 : d === 1 ? 0.4 : 0.7) : 1,
+      left: leftValue,
+      top: topValue,
+      zIndex,
+      scale,
+      opacity,
       transition: 0.2,
     }
   })
@@ -118,7 +140,7 @@ function initData() {
   datalist.value = Array.isArray(props.items) ? props.items.slice() : []
   const desired = visible.value
   const n = Math.min(desired, datalist.value.length)
-  slotStyles.value = buildSlots(n)
+  slotStyles.value = buildSlots(n, props.mode || 'stackCenter')
   imagelist.value = slotStyles.value.map((s, i) => ({
     ...s,
     isIndex: i,
@@ -183,23 +205,66 @@ function RightSliding() {
   })
 }
 
+function getItemStyle(item: any) {
+  let transform: string
+  const baseScale = `scale(${item.scale})`
+
+  if (props.mode === 'stackLeft') {
+    // 左排列：从左边开始，不居中
+    transform = `translate3d(0, -50%, 0) ${baseScale}`
+  } else if (props.mode === 'stackRight') {
+    // 右排列：从右边开始，向左对齐
+    transform = `translate3d(-100%, -50%, 0) ${baseScale}`
+  } else {
+    // 居中：保持居中
+    transform = `translate3d(-50%, -50%, 0) ${baseScale}`
+  }
+
+  return {
+    left: item.left,
+    top: item.top,
+    zIndex: item.zIndex,
+    width: props.itemWidth + 'rpx',
+    height: props.itemHeight + 'rpx',
+    transition: item.transition + 's all',
+    transform,
+    opacity: item.opacity,
+  }
+}
+
 function changeBlock(item: ImageItem) {
   const n = imagelist.value.length
-  const center = Math.floor(n / 2)
   const toor = item.slotIndex
-  if (toor < center) {
-    RightSliding()
-    if (toor < center - 1) {
-      setTimeout(() => RightSliding(), 100)
-    }
-  } else if (toor > center) {
-    LeftSliding()
-    if (toor > center + 1) {
-      setTimeout(() => LeftSliding(), 100)
+
+  if (props.mode === 'stackLeft' || props.mode === 'stackRight') {
+    // stackLeft/Right 模式：点击的卡片移动到第一个位置（slotIndex = 0）
+    if (toor === 0) {
+      // 已经是第一张，触发选中事件
+      const selected = datalist.value[item.isIndex]
+      if (selected) emit('selection', selected)
+    } else {
+      // 需要移动到第一个位置，执行 toor 次 LeftSliding
+      for (let i = 0; i < toor; i++) {
+        setTimeout(() => LeftSliding(), i * 100)
+      }
     }
   } else {
-    const selected = datalist.value[item.isIndex]
-    if (selected) emit('selection', selected)
+    // stackCenter 模式：保持原有逻辑，移动到中心
+    const center = Math.floor(n / 2)
+    if (toor < center) {
+      RightSliding()
+      if (toor < center - 1) {
+        setTimeout(() => RightSliding(), 100)
+      }
+    } else if (toor > center) {
+      LeftSliding()
+      if (toor > center + 1) {
+        setTimeout(() => LeftSliding(), 100)
+      }
+    } else {
+      const selected = datalist.value[item.isIndex]
+      if (selected) emit('selection', selected)
+    }
   }
 }
 
@@ -226,7 +291,7 @@ onMounted(() => {
 
 // Re-init when count-related inputs change or array length changes
 watch(
-  () => [props.visibleCount, props.mode, props.items?.length],
+  () => [props.visibleCount, props.mode, props.scaleStep, props.items?.length],
   () => initData(),
 )
 

package/components/lcb-swiper/types.ts

@@ -9,8 +9,10 @@ export interface LcbSwiperProps extends LcbBlockProps {
   >[]
   itemWidth?: number
   itemHeight?: number
-  mode?: string
+  mode?: 'stackLeft' | 'stackRight' | 'stackCenter' | 'tinder'
   visibleCount?: number
   imageRadius?: number
   enableOpacity?: boolean
+  /** 缩放步长：仅针对 stackLeft/stackRight 模式，每张卡片缩小的比例，默认 0.1 (10%) */
+  scaleStep?: number
 }

package/package.json

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

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

@@ -1,4 +1,3 @@
-import { StyleValue } from 'vue'
 export interface LcbBlockProps {
   /** 左右外距 */
   marginHorizontal?: number
@@ -39,7 +38,7 @@ export interface LcbBlockProps {
   borderColor?: string
   borderWidth?: number
   textAlign?: 'left' | 'center' | 'right'
-  customStyle?: StyleValue
+  customStyle?: Record<string, any>
   align?:
     | 'top-left'
     | 'top-center'

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

@@ -22,7 +22,7 @@ declare const __VLS_component: import('vue').DefineComponent<
     mode: 'map' | 'list'
     backgroundColor: string
     color: string
-    customStyle: string | false | import('vue').CSSProperties | import('vue').StyleValue[] | null
+    customStyle: Record<string, any>
     customClass: string
     zIndex: number
     radius: number

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

@@ -4,10 +4,11 @@ declare const _default: import('vue').DefineComponent<
   __VLS_WithDefaults<
     __VLS_TypePropsToOption<LcbSwiperProps>,
     {
-      mode: string
       itemWidth: number
       itemHeight: number
       enableOpacity: boolean
+      mode: string
+      scaleStep: number
     }
   >,
   {},
@@ -26,10 +27,11 @@ declare const _default: import('vue').DefineComponent<
       __VLS_WithDefaults<
         __VLS_TypePropsToOption<LcbSwiperProps>,
         {
-          mode: string
           itemWidth: number
           itemHeight: number
           enableOpacity: boolean
+          mode: string
+          scaleStep: number
         }
       >
     >
@@ -37,10 +39,11 @@ declare const _default: import('vue').DefineComponent<
     onSelection?: ((item: DataRecord) => any) | undefined
   },
   {
-    mode: string
+    mode: 'stackLeft' | 'stackRight' | 'stackCenter' | 'tinder'
     itemWidth: number
     itemHeight: number
     enableOpacity: boolean
+    scaleStep: number
   },
   {}
 >

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

@@ -8,8 +8,10 @@ export interface LcbSwiperProps extends LcbBlockProps {
   >[]
   itemWidth?: number
   itemHeight?: number
-  mode?: string
+  mode?: 'stackLeft' | 'stackRight' | 'stackCenter' | 'tinder'
   visibleCount?: number
   imageRadius?: number
   enableOpacity?: boolean
+  /** 缩放步长：仅针对 stackLeft/stackRight 模式，每张卡片缩小的比例，默认 0.1 (10%) */
+  scaleStep?: number
 }