@tplc/business 0.5.46 → 0.5.49

package/CHANGELOG.md

@@ -2,6 +2,36 @@
 
 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.49](https://gitlab888.30jia.com.cn/tourism-front/zero-code-pro/compare/v0.5.48...v0.5.49) (2025-11-15)
+
+
+### ✨ Features | 新功能
+
+* 新增lcb-light-map ([b18d767](https://gitlab888.30jia.com.cn/tourism-front/zero-code-pro/commit/b18d767059fccadf5f55400d5fc34e352fa4c55d))
+
+### [0.5.48](https://gitlab888.30jia.com.cn/tourism-front/zero-code-pro/compare/v0.5.47...v0.5.48) (2025-11-14)
+
+### [0.5.47](https://gitlab888.30jia.com.cn/tourism-front/zero-code-pro/compare/v1.0.2...v0.5.47) (2025-11-14)
+
+
+### 🚀 Chore | 构建/工程依赖/工具
+
+* **release:** 0.5.46 ([41a92a1](https://gitlab888.30jia.com.cn/tourism-front/zero-code-pro/commit/41a92a19794b409587e3e349dabd87beab6376a3))
+* **release:** 1.0.3 ([e8e02e2](https://gitlab888.30jia.com.cn/tourism-front/zero-code-pro/commit/e8e02e28480097a9e2bc68e7017198382eb956e4))
+* **release:** 1.0.4 ([a45ebc8](https://gitlab888.30jia.com.cn/tourism-front/zero-code-pro/commit/a45ebc8d8b7de3c31b084e14022c4dda6707a761))
+* **release:** 1.0.5 ([bd6ed33](https://gitlab888.30jia.com.cn/tourism-front/zero-code-pro/commit/bd6ed332cb17cc13458d50ca86daa7b64996dc36))
+* **release:** 1.0.6 ([c75540a](https://gitlab888.30jia.com.cn/tourism-front/zero-code-pro/commit/c75540a368a11693f59ca4811274f35f7d301add))
+
+
+### ✨ Features | 新功能
+
+* home search tabs允许为空 ([9678a10](https://gitlab888.30jia.com.cn/tourism-front/zero-code-pro/commit/9678a10bb5f4a8b5c5948410d5db4482d8589bcc))
+* 优化动画 ([5f25096](https://gitlab888.30jia.com.cn/tourism-front/zero-code-pro/commit/5f25096abaea90f07141f7213fac04997686bd80))
+* 变更fit ([096456a](https://gitlab888.30jia.com.cn/tourism-front/zero-code-pro/commit/096456a09c6daa730e42c0733f476f8d3c6493fc))
+* 变更图片默认值 ([966bdcc](https://gitlab888.30jia.com.cn/tourism-front/zero-code-pro/commit/966bdcc897209edf09d2469ba151118f856c5f53))
+* 改回mfit ([901781e](https://gitlab888.30jia.com.cn/tourism-front/zero-code-pro/commit/901781ea64d44fcf23b6587a479f1321243ce3f4))
+* 调整预览 ([ed2baed](https://gitlab888.30jia.com.cn/tourism-front/zero-code-pro/commit/ed2baedafa3b05a54803aec024c190185c76902e))
+
 ### [0.5.46](https://gitlab888.30jia.com.cn/tourism-front/zero-code-pro/compare/v1.0.6...v0.5.46) (2025-11-12)
 
 ### [0.5.45](https://gitlab888.30jia.com.cn/tourism-front/zero-code-pro/compare/v0.5.44...v0.5.45) (2025-11-10)

package/components/lcb-block/lcb-block.vue

@@ -2,9 +2,6 @@
   <view
     :style="{
       width: position === 'absolute' ? '100%' : '',
-      marginTop: transformValueUnit(-(floatUp || 0)),
-      marginLeft: transformValueUnit(marginHorizontal || 0),
-      marginRight: transformValueUnit(marginHorizontal || 0),
       padding: `${transformValueUnit(paddingTop || paddingVertical || 0)} ${transformValueUnit(paddingRight || paddingHorizontal || 0)} ${transformValueUnit(paddingBottom || paddingVertical || 0)} ${transformValueUnit(paddingLeft || paddingHorizontal || 0)}`,
       borderRadius: `${transformValueUnit(topRadius || radius)} ${transformValueUnit(topRadius || radius)} ${transformValueUnit(bottomRadius || radius)} ${transformValueUnit(bottomRadius || radius)}`,
       color,
@@ -18,6 +15,7 @@
       boxShadow:
         shadowColor && shadowSize ? `0px 0px ${blurSize}px ${shadowSize}px ${shadowColor}` : '',
       textAlign,
+      margin: `${transformValueUnit(marginTop || -(floatUp || 0))} ${transformValueUnit(marginRight || marginHorizontal || 0)} ${transformValueUnit(marginBottom || 0)} ${transformValueUnit(marginLeft || marginHorizontal || 0)}`,
       ...customStyle,
       ...getFlexStyle(align),
     }"

package/components/lcb-block/types.ts

@@ -25,6 +25,10 @@ export interface LcbBlockProps {
   paddingBottom?: number
   paddingLeft?: number
   paddingRight?: number
+  marginTop?: number
+  marginBottom?: number
+  marginLeft?: number
+  marginRight?: number
   zIndex?: number
   position?: 'relative' | 'absolute'
   color?: string

package/components/lcb-light-map/api.ts

@@ -0,0 +1,35 @@
+import { IResData } from 'action'
+import type { LightMapConfig, MapDetail } from './types'
+
+/**
+ * 获取地图配置列表
+ */
+export const getMapConfigListApi = async () => {
+  const { data } = (await uni.$lcb.http.post('/clockLightConfig/list', {}, true)) as IResData<
+    LightMapConfig[]
+  >
+
+  const list = data.map(
+    (item) =>
+      ({
+        ...item,
+        mapConfig: JSON.parse(`${item.mapConfig}`),
+      }) as LightMapConfig,
+  )
+
+  return list
+}
+
+/**
+ * 获取地图详细信息
+ * @param clockLightConfigId 地图配置ID
+ */
+export const getMapDetailApi = async (clockLightConfigId: string) => {
+  const { data } = (await uni.$lcb.http.post(
+    '/clockLightUser/detail',
+    { clockLightConfigId },
+    true,
+  )) as IResData<MapDetail>
+
+  return data
+}

package/components/lcb-light-map/lcb-light-map.vue

@@ -0,0 +1,243 @@
+<template>
+  <lcb-block v-bind="$props">
+    <view class="light-map-container relative">
+      <!-- 地图标题 -->
+      <view v-if="currentMapConfig" class="map-header text-center mb-20rpx">
+        <view class="text-4 font-500" v-if="currentMapConfig.title">
+          {{ currentMapConfig.title }}
+        </view>
+        <view v-if="currentMapConfig.subTitle" class="text-3 text-hint mt-1">
+          {{ currentMapConfig.subTitle }}
+        </view>
+      </view>
+
+      <!-- 地图切换区域 -->
+      <view class="map-wrapper relative">
+        <!-- 单个地图容器 -->
+        <view
+          v-if="currentMapConfig"
+          class="light-map m-auto relative overflow-hidden"
+          :style="{
+            width: props.width + 'rpx',
+            height: props.height + 'rpx',
+            backgroundImage: `url(${getBackgroundImage(currentMapConfig)})`,
+            backgroundSize: 'cover',
+            backgroundPosition: 'center',
+          }"
+        >
+          <!-- 位置点 -->
+          <view
+            v-for="(item, idx) in currentDetailInfo?.clockLightUserRecordList"
+            :key="idx"
+            class="dot absolute rounded-full"
+            :style="getDotStyle(item, currentMapConfig)"
+          />
+        </view>
+
+        <!-- 左侧箭头按钮 -->
+        <view
+          v-if="currentIndex > 0"
+          class="arrow-btn arrow-btn-left absolute z-10"
+          @click="handlePrev"
+        >
+          <wd-icon name="arrow-left" size="40rpx" color="#ffffff" />
+        </view>
+
+        <!-- 右侧箭头按钮 -->
+        <view
+          v-if="currentIndex < mapConfigList.length - 1"
+          class="arrow-btn arrow-btn-right absolute z-10"
+          @click="handleNext"
+        >
+          <wd-icon name="arrow-right" size="40rpx" color="#ffffff" />
+        </view>
+      </view>
+
+      <!-- 加载状态 -->
+      <view v-if="loading" class="flex-center p-40rpx">
+        <wd-loading />
+      </view>
+
+      <!-- 空状态 -->
+      <view v-if="!loading && mapConfigList.length === 0" class="flex-center p-40rpx text-gray-400">
+        暂无地图数据
+      </view>
+    </view>
+  </lcb-block>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import type { LightMapConfig, MapDetail, LcbLightMapProps } from './types'
+import { getMapConfigListApi, getMapDetailApi } from './api'
+import { getDotStyle } from './util'
+defineOptions({
+  name: 'LcbLightMap',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared',
+  },
+})
+const props = withDefaults(defineProps<LcbLightMapProps>(), { width: 650, height: 848 })
+
+const currentDetailInfo = ref<MapDetail>()
+// 状态
+const mapConfigList = ref<LightMapConfig[]>([])
+const currentIndex = ref(0)
+const loading = ref(true)
+
+/**
+ * 当前地图配置
+ */
+const currentMapConfig = computed(() => {
+  return mapConfigList.value[currentIndex.value] || null
+})
+
+/**
+ * 根据点亮率获取对应的背景图
+ */
+const getBackgroundImage = (mapConfig: LightMapConfig) => {
+  const clockLightProductCountRate = currentDetailInfo.value?.clockLightProductCountRate || 0
+  const { backgroundImages } = mapConfig.mapConfig
+
+  if (clockLightProductCountRate < 31) {
+    return backgroundImages.default
+  } else if (clockLightProductCountRate < 61) {
+    return backgroundImages.p30
+  } else if (clockLightProductCountRate < 81) {
+    return backgroundImages.p60
+  } else if (clockLightProductCountRate < 100) {
+    return backgroundImages.p80
+  } else {
+    return backgroundImages.p100
+  }
+}
+
+/**
+ * 切换到上一个地图
+ */
+const handlePrev = async () => {
+  if (currentIndex.value > 0) {
+    currentIndex.value--
+    const targetConfig = mapConfigList.value[currentIndex.value]
+    if (targetConfig) {
+      await getMapInfo(targetConfig.clockLightConfigId)
+    }
+  }
+}
+
+/**
+ * 切换到下一个地图
+ */
+const handleNext = async () => {
+  if (currentIndex.value < mapConfigList.value.length - 1) {
+    currentIndex.value++
+    const targetConfig = mapConfigList.value[currentIndex.value]
+    if (targetConfig) {
+      await getMapInfo(targetConfig.clockLightConfigId)
+    }
+  }
+}
+
+/**
+ * 获取地图配置列表
+ */
+const getMapConfigList = async () => {
+  try {
+    const list = await getMapConfigListApi()
+    mapConfigList.value = list
+    return list
+  } catch (error) {
+    console.error('获取地图配置列表失败:', error)
+    return []
+  }
+}
+
+/**
+ * 获取地图详细信息
+ * @param clockLightConfigId 地图配置ID
+ */
+const getMapInfo = async (clockLightConfigId: string) => {
+  try {
+    loading.value = true
+    const data = await getMapDetailApi(clockLightConfigId)
+    currentDetailInfo.value = data
+  } finally {
+    loading.value = false
+  }
+}
+
+/**
+ * 初始化
+ */
+const init = async () => {
+  loading.value = true
+  try {
+    // 先获取地图配置列表
+    const list = await getMapConfigList()
+
+    // 如果有地图配置，加载第一个地图的详细信息
+    if (list.length > 0) {
+      await getMapInfo(list[0].clockLightConfigId)
+    }
+  } finally {
+    loading.value = false
+  }
+}
+
+// 初始化
+init()
+</script>
+
+<style lang="scss" scoped>
+.light-map-container {
+  width: 100%;
+
+  .map-header {
+    padding: 20rpx 0;
+  }
+
+  .map-wrapper {
+    width: 100%;
+    position: relative;
+
+    // 箭头按钮
+    .arrow-btn {
+      top: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 60rpx;
+      height: 60rpx;
+      cursor: pointer;
+      background: rgba(0, 0, 0, 0.4);
+      border-radius: 50%;
+      transition: all 0.3s;
+      transform: translateY(-50%);
+
+      &:active {
+        opacity: 0.8;
+        transform: translateY(-50%) scale(0.9);
+      }
+
+      &.arrow-btn-left {
+        left: 10rpx;
+      }
+
+      &.arrow-btn-right {
+        right: 10rpx;
+      }
+    }
+  }
+
+  .light-map {
+    background-repeat: no-repeat;
+
+    .dot {
+      box-shadow: 0 2rpx 4rpx rgba(231, 163, 83, 0.4);
+      transform-origin: center;
+    }
+  }
+}
+</style>

package/components/lcb-light-map/types.ts

@@ -0,0 +1,73 @@
+import { LcbBlockProps } from '../lcb-block/types'
+
+export interface LcbLightMapProps extends LcbBlockProps {
+  width: number
+  height: number
+}
+/**
+ * 位置记录接口
+ */
+export interface LocationRecord {
+  latitude: number
+  longitude: number
+  [key: string]: any
+}
+
+/**
+ * 地图详细配置接口
+ */
+export interface MapDetailConfig {
+  boundaries: {
+    southwest: {
+      latitude: number
+      longitude: number
+    }
+    northeast: {
+      latitude: number
+      longitude: number
+    }
+  }
+  physicalSize: {
+    xSize: number // X轴总距离（米）
+    ySize: number // Y轴总距离（米）
+  }
+  backgroundImages: {
+    default: string
+    p30: string
+    p60: string
+    p80: string
+    p100: string
+  }
+  displaySize?: {
+    normal?: {
+      width: number
+      height: number
+    }
+    index?: {
+      width: number
+      height: number
+    }
+  }
+  dotStyle: {
+    width: number
+    height: number
+    backgroundColor: string
+  }
+}
+
+/**
+ * 地图配置接口
+ */
+export interface LightMapConfig {
+  clockLightConfigId: string
+  subTitle: string
+  title: string
+  mapConfig: MapDetailConfig
+}
+
+export interface MapDetail {
+  clockLightConfigId: string
+  clockLightProductCountRate: number
+  clockLightUserRecordList: LocationRecord[]
+  clockLightConfigList: LightMapConfig[]
+}

package/components/lcb-light-map/util.ts

@@ -0,0 +1,79 @@
+import type { LightMapConfig, LocationRecord } from './types'
+
+/**
+ * 使用 Haversine 公式计算两个经纬度坐标之间的距离
+ * @param lat1 起点纬度
+ * @param lng1 起点经度
+ * @param lat2 终点纬度
+ * @param lng2 终点经度
+ * @returns 距离（单位：米）
+ */
+export const getDistanceByLoc = (
+  lat1: number = 0,
+  lng1: number = 0,
+  lat2: number = 0,
+  lng2: number = 0,
+): number => {
+  const rad1 = (lat1 * Math.PI) / 180.0
+  const rad2 = (lat2 * Math.PI) / 180.0
+  const a = rad1 - rad2
+  const b = (lng1 * Math.PI) / 180.0 - (lng2 * Math.PI) / 180.0
+  const r = 6378140 // 地球半径（米）
+
+  const distance =
+    r *
+    2 *
+    Math.asin(
+      Math.sqrt(
+        Math.pow(Math.sin(a / 2), 2) +
+          Math.cos(rad1) * Math.cos(rad2) * Math.pow(Math.sin(b / 2), 2),
+      ),
+    )
+
+  return distance
+}
+/**
+ * 获取指定地图配置的点样式
+ */
+const getDotStyleConfig = (mapConfig: LightMapConfig) => {
+  return mapConfig.mapConfig.dotStyle
+}
+
+/**
+ * 计算位置点相对于地图的百分比位置
+ */
+export const getPosition = (item: LocationRecord, mapConfig: LightMapConfig) => {
+  const { latitude, longitude } = item
+  const { boundaries, physicalSize } = mapConfig.mapConfig
+  const { southwest } = boundaries
+  const { xSize, ySize } = physicalSize
+
+  // 计算该点到西南角的X轴距离（保持纬度不变，只改变经度）
+  const x = getDistanceByLoc(southwest.latitude, southwest.longitude, southwest.latitude, longitude)
+
+  // 计算该点到西南角的Y轴距离（保持经度不变，只改变纬度）
+  const y = getDistanceByLoc(southwest.latitude, southwest.longitude, latitude, southwest.longitude)
+
+  return {
+    left: (x / xSize) * 100,
+    bottom: (y / ySize) * 100,
+  }
+}
+
+/**
+ * 获取点的完整样式
+ */
+export const getDotStyle = (item: LocationRecord, mapConfig: LightMapConfig) => {
+  const position = getPosition(item, mapConfig)
+  const style = getDotStyleConfig(mapConfig)
+
+  return {
+    left: `${position.left}%`,
+    bottom: `${position.bottom}%`,
+    width: `${style.width}rpx`,
+    height: `${style.height}rpx`,
+    backgroundColor: style.backgroundColor,
+    marginLeft: `-${style.width / 2}rpx`,
+    marginBottom: `-${style.height / 2}rpx`,
+  }
+}

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

@@ -58,6 +58,7 @@
     v-bind="element.props"
   />
   <lcb-swiper v-else-if="element.moduleName === 'lcb-swiper'" v-bind="element.props" />
+  <lcb-light-map v-else-if="element.moduleName === 'lcb-light-map'" v-bind="element.props" />
 </template>
 
 <script setup lang="ts">

package/global.d.ts

@@ -26,6 +26,7 @@ declare module 'vue' {
     'lcb-icon': (typeof import('@tplc/business/components/lcb-icon/lcb-icon.vue'))['default']
     'lcb-image': (typeof import('@tplc/business/components/lcb-image/lcb-image.vue'))['default']
     'lcb-img-nav': (typeof import('@tplc/business/components/lcb-img-nav/lcb-img-nav.vue'))['default']
+    'lcb-light-map': (typeof import('@tplc/business/components/lcb-light-map/lcb-light-map.vue'))['default']
     'lcb-list': (typeof import('@tplc/business/components/lcb-list/lcb-list.vue'))['default']
     'lcb-map': (typeof import('@tplc/business/components/lcb-map/lcb-map.vue'))['default']
     'lcb-nav': (typeof import('@tplc/business/components/lcb-nav/lcb-nav.vue'))['default']

package/package.json

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

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

@@ -23,6 +23,10 @@ export interface LcbBlockProps {
   paddingBottom?: number
   paddingLeft?: number
   paddingRight?: number
+  marginTop?: number
+  marginBottom?: number
+  marginLeft?: number
+  marginRight?: number
   zIndex?: number
   position?: 'relative' | 'absolute'
   color?: string

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

@@ -37,10 +37,10 @@ declare const _default: import('vue').DefineComponent<
   >,
   {
     marginHorizontal: number
+    marginBottom: number
     styleGroup: number
     imageSize: number
     imageMargin: number
-    marginBottom: number
   },
   {}
 >

package/types/components/lcb-light-map/api.d.ts

@@ -0,0 +1,10 @@
+import type { LightMapConfig, MapDetail } from './types'
+/**
+ * 获取地图配置列表
+ */
+export declare const getMapConfigListApi: () => Promise<LightMapConfig[]>
+/**
+ * 获取地图详细信息
+ * @param clockLightConfigId 地图配置ID
+ */
+export declare const getMapDetailApi: (clockLightConfigId: string) => Promise<MapDetail>

package/types/components/lcb-light-map/lcb-light-map.vue.d.ts

@@ -0,0 +1,59 @@
+import type { LcbLightMapProps } from './types'
+declare const _default: import('vue').DefineComponent<
+  __VLS_WithDefaults<
+    __VLS_TypePropsToOption<LcbLightMapProps>,
+    {
+      width: number
+      height: number
+    }
+  >,
+  {},
+  unknown,
+  {},
+  {},
+  import('vue').ComponentOptionsMixin,
+  import('vue').ComponentOptionsMixin,
+  {},
+  string,
+  import('vue').PublicProps,
+  Readonly<
+    import('vue').ExtractPropTypes<
+      __VLS_WithDefaults<
+        __VLS_TypePropsToOption<LcbLightMapProps>,
+        {
+          width: number
+          height: number
+        }
+      >
+    >
+  >,
+  {
+    width: number
+    height: number
+  },
+  {}
+>
+export default _default
+type __VLS_WithDefaults<P, D> = {
+  [K in keyof Pick<P, keyof P>]: K extends keyof D
+    ? __VLS_Prettify<
+        P[K] & {
+          default: D[K]
+        }
+      >
+    : P[K]
+}
+type __VLS_Prettify<T> = {
+  [K in keyof T]: T[K]
+} & {}
+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-light-map/types.d.ts

@@ -0,0 +1,69 @@
+import { LcbBlockProps } from '../lcb-block/types'
+export interface LcbLightMapProps extends LcbBlockProps {
+  width: number
+  height: number
+}
+/**
+ * 位置记录接口
+ */
+export interface LocationRecord {
+  latitude: number
+  longitude: number
+  [key: string]: any
+}
+/**
+ * 地图详细配置接口
+ */
+export interface MapDetailConfig {
+  boundaries: {
+    southwest: {
+      latitude: number
+      longitude: number
+    }
+    northeast: {
+      latitude: number
+      longitude: number
+    }
+  }
+  physicalSize: {
+    xSize: number
+    ySize: number
+  }
+  backgroundImages: {
+    default: string
+    p30: string
+    p60: string
+    p80: string
+    p100: string
+  }
+  displaySize?: {
+    normal?: {
+      width: number
+      height: number
+    }
+    index?: {
+      width: number
+      height: number
+    }
+  }
+  dotStyle: {
+    width: number
+    height: number
+    backgroundColor: string
+  }
+}
+/**
+ * 地图配置接口
+ */
+export interface LightMapConfig {
+  clockLightConfigId: string
+  subTitle: string
+  title: string
+  mapConfig: MapDetailConfig
+}
+export interface MapDetail {
+  clockLightConfigId: string
+  clockLightProductCountRate: number
+  clockLightUserRecordList: LocationRecord[]
+  clockLightConfigList: LightMapConfig[]
+}

package/types/components/lcb-light-map/util.d.ts

@@ -0,0 +1,40 @@
+import type { LightMapConfig, LocationRecord } from './types'
+/**
+ * 使用 Haversine 公式计算两个经纬度坐标之间的距离
+ * @param lat1 起点纬度
+ * @param lng1 起点经度
+ * @param lat2 终点纬度
+ * @param lng2 终点经度
+ * @returns 距离（单位：米）
+ */
+export declare const getDistanceByLoc: (
+  lat1?: number,
+  lng1?: number,
+  lat2?: number,
+  lng2?: number,
+) => number
+/**
+ * 计算位置点相对于地图的百分比位置
+ */
+export declare const getPosition: (
+  item: LocationRecord,
+  mapConfig: LightMapConfig,
+) => {
+  left: number
+  bottom: number
+}
+/**
+ * 获取点的完整样式
+ */
+export declare const getDotStyle: (
+  item: LocationRecord,
+  mapConfig: LightMapConfig,
+) => {
+  left: string
+  bottom: string
+  width: string
+  height: string
+  backgroundColor: string
+  marginLeft: string
+  marginBottom: string
+}

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

@@ -41,6 +41,10 @@ declare const __VLS_component: import('vue').DefineComponent<
     paddingBottom: number
     paddingLeft: number
     paddingRight: number
+    marginTop: number
+    marginBottom: number
+    marginLeft: number
+    marginRight: number
     fontSize: number
     fontWeight: number
     topRadius: number