@tplc/business 0.5.11 → 0.5.12

package/CHANGELOG.md

@@ -2,6 +2,15 @@
 
 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.12](https://gitlab888.30jia.com.cn/tourism-front/zero-code-pro/compare/v0.5.11...v0.5.12) (2025-10-11)
+
+
+### ✨ Features | 新功能
+
+* t同步constant ([9f4c637](https://gitlab888.30jia.com.cn/tourism-front/zero-code-pro/commit/9f4c6374935e04bc6de4c3f26c149b42c98237eb))
+* 删除多余依赖 ([84abd86](https://gitlab888.30jia.com.cn/tourism-front/zero-code-pro/commit/84abd860f693cbacb74c6bc0ef27fe552784df1d))
+* 图片圆角 ([a68898e](https://gitlab888.30jia.com.cn/tourism-front/zero-code-pro/commit/a68898ec76b518fa16e4038936c0bea4a815ae7a))
+
 ### [0.5.11](https://gitlab888.30jia.com.cn/tourism-front/zero-code-pro/compare/v0.5.7...v0.5.11) (2025-10-11)
 
 

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

@@ -1,23 +1,41 @@
 <template>
-  <lcb-block v-bind="$props" custom-class="overflow-visible lcb-banner-block flex flex-col">
-    <!-- <z-swiper v-bind="$props">
-      <z-swiper-item v-for="item in items" :key="item.link">
-        <lcb-action-view v-bind="item.link">
-          <view
-            class="absolute top-0 left-0 w-full h-full z-1 pointer-events-none"
-            :style="{
-              background: item.maskBgColor,
-            }"
-          />
-          <wd-img :src="item.url" height="100%" width="100%" />
-        </lcb-action-view>
-      </z-swiper-item>
-    </z-swiper> -->
+  <lcb-block v-bind="$props">
+    <view class="lcb-carousel" @touchstart="starts" @touchend="ends">
+      <view
+        v-for="(item, i) in imagelist"
+        :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 + ')',
+        }"
+      >
+        <view class="image-block">
+          <lcb-action-view v-bind="item.item.link" customClass="w-full h-full">
+            <wd-img
+              :src="item.item.url"
+              mode="aspectFill"
+              width="100%"
+              height="100%"
+              :radius="imageRadius"
+            />
+          </lcb-action-view>
+        </view>
+      </view>
+    </view>
   </lcb-block>
 </template>
 
 <script setup lang="ts">
+import { computed, onMounted, reactive, ref, watch } from 'vue'
 import { LcbSwiperProps } from './types'
+import { ActionView } from 'action'
 defineOptions({
   name: 'LcbSwiper',
   options: {
@@ -27,6 +45,211 @@ defineOptions({
   },
 })
 
-withDefaults(defineProps<LcbSwiperProps>(), {})
+const props = withDefaults(defineProps<LcbSwiperProps>(), {
+  mode: 'multiple',
+  itemWidth: 450,
+  itemHeight: 300,
+})
+type DataRecord = Record<string, any>
+
+interface SlotStyle {
+  left: string
+  top: string
+  zIndex: number
+  scale: number
+  transition: number
+}
+
+interface ImageItem extends SlotStyle {
+  isIndex: number
+  slotIndex: number
+  item: Partial<
+    ActionView & {
+      maskBgColor?: string
+    }
+  >
+}
+
+const emit = defineEmits<{
+  (e: 'selection', item: DataRecord): void
+}>()
+
+const datalist = ref<DataRecord[]>([])
+const imagelist = ref<ImageItem[]>([])
+const ismove = ref(0)
+const count = reactive({ sta: 0, end: 0 })
+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[] {
+  const center = Math.floor(n / 2)
+  const spacing = 14 // percent per slot
+  const scaleStep = 0.15
+  return Array.from({ length: n }, (_, i) => {
+    const d = Math.abs(i - center)
+    return {
+      left: `calc(50% + ${(i - center) * spacing}% )`,
+      top: '50%',
+      zIndex: 100 - d,
+      scale: Math.max(1 - d * scaleStep, 0.6),
+      transition: 0.3,
+    }
+  })
+}
+
+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)
+  imagelist.value = slotStyles.value.map((s, i) => ({
+    ...s,
+    isIndex: i,
+    slotIndex: i,
+    item: datalist.value[i],
+  }))
+  count.sta = 0
+  count.end = Math.max(0, n - 1)
+}
+
+function refreshVisibleFields() {
+  imagelist.value.forEach((item) => {
+    item.item = datalist.value[item.isIndex]
+  })
+}
+
+function applySlotStyle(item: ImageItem, slot: SlotStyle) {
+  item.left = slot.left
+  item.top = slot.top
+  item.zIndex = slot.zIndex
+  item.scale = slot.scale
+  item.transition = slot.transition
+}
+
+function LeftSliding() {
+  const n = imagelist.value.length
+  if (n === 0) return
+  const slots = slotStyles.value
+  imagelist.value.forEach((item) => {
+    const to = item.slotIndex - 1 < 0 ? n - 1 : item.slotIndex - 1
+    item.slotIndex = to
+    // @ts-ignore
+    applySlotStyle(item, slots[to])
+    if (to === n - 1) {
+      count.end = count.end + 1 > datalist.value.length - 1 ? 0 : count.end + 1
+      item.isIndex = count.end
+      item.item = datalist.value[count.end]
+    }
+    if (to === 0) {
+      count.sta = item.isIndex
+    }
+  })
+}
+
+function RightSliding() {
+  const n = imagelist.value.length
+  if (n === 0) return
+  const slots = slotStyles.value
+  imagelist.value.forEach((item) => {
+    const to = item.slotIndex + 1 > n - 1 ? 0 : item.slotIndex + 1
+    item.slotIndex = to
+    applySlotStyle(item, slots[to])
+    if (to === 0) {
+      count.sta = count.sta - 1 < 0 ? datalist.value.length - 1 : count.sta - 1
+      item.isIndex = count.sta
+      item.item = datalist.value[count.sta]
+    }
+    if (to === n - 1) {
+      count.end = item.isIndex
+    }
+  })
+}
+
+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)
+    }
+  } else {
+    const selected = datalist.value[item.isIndex]
+    if (selected) emit('selection', selected)
+  }
+}
+
+function starts(e: any) {
+  if (e && e.touches && e.touches[0]) {
+    ismove.value = e.touches[0].pageX
+  }
+}
+
+function ends(e: any) {
+  if (!e || !e.changedTouches || !e.changedTouches[0]) return
+  const pageX = e.changedTouches[0].pageX
+  const nums = ismove.value - pageX
+  if (nums > 50) {
+    LeftSliding()
+  } else if (nums < -50) {
+    RightSliding()
+  }
+}
+
+onMounted(() => {
+  initData()
+})
+
+// Re-init when count-related inputs change or array length changes
+watch(
+  () => [props.visibleCount, props.mode, props.items?.length],
+  () => initData(),
+)
+
+// Update only fields when array identity changes without length change
+watch(
+  () => props.items,
+  () => {
+    datalist.value = Array.isArray(props.items) ? props.items.slice() : []
+    refreshVisibleFields()
+  },
+)
 </script>
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.lcb-carousel {
+  width: 100%;
+  height: 100%;
+  min-height: 200px;
+  position: relative;
+  overflow: hidden;
+  .carousel-block {
+    position: absolute;
+    overflow: hidden;
+    border-radius: 10upx;
+    overflow: hidden;
+    box-shadow: 0 0 5px #0000001a;
+    will-change: transform;
+    .image-block {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      background-size: 100% 100%;
+      z-index: 5;
+    }
+  }
+}
+</style>

package/components/lcb-swiper/types.ts

@@ -7,4 +7,9 @@ export interface LcbSwiperProps extends LcbBlockProps {
       maskBgColor?: string
     }
   >[]
+  itemWidth?: number
+  itemHeight?: number
+  mode?: string
+  visibleCount?: number
+  imageRadius?: number
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tplc/business",
-  "version": "0.5.11",
+  "version": "0.5.12",
   "keywords": [
     "业务组件"
   ],
@@ -20,8 +20,7 @@
   "dependencies": {
     "mp-html": "^2.5.0",
     "qs": "6.5.3",
-    "uview-plus": "^3.3.9",
-    "@zebra-ui/swiper": "^3.0.2"
+    "uview-plus": "^3.3.9"
   },
   "devDependencies": {
     "standard-version": "^9.5.0"

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

@@ -1,19 +1,44 @@
 import { LcbSwiperProps } from './types'
+type DataRecord = Record<string, any>
 declare const _default: import('vue').DefineComponent<
-  __VLS_WithDefaults<__VLS_TypePropsToOption<LcbSwiperProps>, {}>,
+  __VLS_WithDefaults<
+    __VLS_TypePropsToOption<LcbSwiperProps>,
+    {
+      mode: string
+      itemWidth: number
+      itemHeight: number
+    }
+  >,
   {},
   unknown,
   {},
   {},
   import('vue').ComponentOptionsMixin,
   import('vue').ComponentOptionsMixin,
-  {},
+  {
+    selection: (item: DataRecord) => void
+  },
   string,
   import('vue').PublicProps,
   Readonly<
-    import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<LcbSwiperProps>, {}>>
-  >,
-  {},
+    import('vue').ExtractPropTypes<
+      __VLS_WithDefaults<
+        __VLS_TypePropsToOption<LcbSwiperProps>,
+        {
+          mode: string
+          itemWidth: number
+          itemHeight: number
+        }
+      >
+    >
+  > & {
+    onSelection?: ((item: DataRecord) => any) | undefined
+  },
+  {
+    mode: string
+    itemWidth: number
+    itemHeight: number
+  },
   {}
 >
 export default _default

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

@@ -6,4 +6,9 @@ export interface LcbSwiperProps extends LcbBlockProps {
       maskBgColor?: string
     }
   >[]
+  itemWidth?: number
+  itemHeight?: number
+  mode?: string
+  visibleCount?: number
+  imageRadius?: number
 }

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

@@ -180,10 +180,10 @@ declare const _default: import('vue').DefineComponent<
     width: string | number
     height: string | number
     showScrollbar: boolean
-    idKey: string
-    addTime: number
     columnCount: string | number
     columnGap: string | number
+    idKey: string
+    addTime: number
     leftGap: string | number
     rightGap: string | number
   },