@tplc/business 0.2.21 → 0.2.22

package/CHANGELOG.md

@@ -2,6 +2,19 @@
 
 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.2.22](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/compare/v0.2.21...v0.2.22) (2024-12-14)
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* banner-block 兼容小程序 ([aa79283](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/aa79283f24e97ca68d8ad7fd18863b05dc5c9e26))
+
+
+### ✨ Features | 新功能
+
+* 引擎支持list ([012e9cb](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/012e9cbf03cff9a434fd6f9adbb4aa6b7f88d8f4))
+* 自定义组件支持变量 ([237bc85](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/237bc85163905f4a9d776e14027c53392cb0b3df))
+
 ### [0.2.21](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/compare/v0.2.20...v0.2.21) (2024-12-06)
 
 ### [0.2.20](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/compare/v0.2.19...v0.2.20) (2024-12-06)

package/components/lcb-absolute-config-layout/lcb-absolute-config-layout.vue

@@ -0,0 +1,206 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import { LcbAbsoluteConfigLayoutProps, LcbAbsoluteConfigLayoutBlock } from './types'
+defineOptions({
+  name: 'LcbAbsoluteConfigLayout',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared',
+  },
+})
+const props = withDefaults(defineProps<LcbAbsoluteConfigLayoutProps>(), {
+  mode: 'view',
+  dataset: {},
+  blocks: [],
+  canvas: {
+    width: 0,
+    height: 0,
+  },
+} as any)
+const highlightId = defineModel<number>()
+const emit = defineEmits(['startCanvasResize', 'startDragBlock', 'removeBlock', 'startResizeBlock'])
+
+function startCanvasResize(...args: any[]) {
+  if (props.mode !== 'edit') return
+  emit('startCanvasResize', ...args)
+}
+function startDragBlock(...args: any[]) {
+  highlightId.value = args[1].id
+  if (props.mode !== 'edit') return
+  emit('startDragBlock', ...args)
+}
+function removeBlock(...args: any[]) {
+  if (props.mode !== 'edit') return
+  emit('removeBlock', ...args)
+}
+function startResizeBlock(...args: any[]) {
+  if (props.mode !== 'edit') return
+  emit('startResizeBlock', ...args)
+}
+
+function resolvePlaceholders(template, values) {
+  // 递归处理模板
+  const resolveValue = (value) => {
+    if (typeof value === 'string' && value.startsWith('$')) {
+      const resolvedKey = value.slice(1) // 去掉占位符前的 '$'
+      return values.hasOwnProperty(resolvedKey) ? values[resolvedKey] : '' // 替换或置空
+    }
+    if (Array.isArray(value)) {
+      return value.map(resolveValue) // 递归处理数组
+    }
+    if (value && typeof value === 'object') {
+      return resolvePlaceholders(value, values) // 递归处理对象
+    }
+    return value // 非占位符值直接返回
+  }
+
+  // 遍历模板对象的键值对
+  return Object.fromEntries(
+    Object.entries(template).map(([key, value]) => [key, resolveValue(value)]),
+  )
+}
+
+const calcBlocks = computed<LcbAbsoluteConfigLayoutBlock[]>(() => {
+  if (!props?.dataset) {
+    return props.blocks
+  }
+  // const currentBlockString = JSON.stringify(props.blocks)
+  // const mapBlockString = Object.entries(props?.dataset ?? {}).reduce((string, [key, value]) => {
+  //   const reg = new RegExp(`\\$${key}`, 'g')
+  //   // @ts-ignore
+  //   const nextString = string.replace(reg, Array.isArray(value) ? JSON.stringify(value) : value)
+
+  //   return nextString
+  // }, currentBlockString)
+
+  // console.log('mapBlockString', currentBlockString, props?.dataset, mapBlockString)
+
+  // return JSON.parse(mapBlockString) as LcbAbsoluteConfigLayoutBlock[]
+
+  return ((props.blocks as any) ?? [])?.map?.((block) => {
+    return {
+      ...block,
+      props: resolvePlaceholders(block.props, props?.dataset ?? {}),
+    }
+  })
+})
+</script>
+<template>
+  <view
+    :class="[
+      'relative',
+      {
+        'border border-gray-100 border-solid': mode === 'edit',
+      },
+    ]"
+    :style="{
+      width: `${canvas?.width}px`,
+      height: `${canvas?.height}px`,
+      backgroundColor: canvas?.backgroundColor,
+    }"
+  >
+    <view
+      v-if="mode === 'edit'"
+      class="absolute text-white bottom-0 -right-[2px] translate-y-[100%] bg-gray-500/50 flex gap-2 p-1"
+    >
+      <!-- 画布调整大小 -->
+      <view
+        class="cursor-se-resize flex items-center justify-center"
+        @mousedown="startCanvasResize($event)"
+      >
+        <wd-icon name="fullsreen" size="14px" custom-class="!block"></wd-icon>
+      </view>
+    </view>
+
+    <!-- 渲染块 -->
+    <view
+      v-for="block in mode === 'edit' ? blocks : calcBlocks"
+      :key="block.id"
+      :class="[
+        'absolute',
+        {
+          'cursor-move group hover:outline hover:outline-blue hover:bg-gray-100/20':
+            mode === 'edit',
+          'outline outline-blue/30 ': mode === 'edit' && highlightId === block.id,
+        },
+      ]"
+      :style="{
+        // background: block.color,
+        zIndex: block.zIndex,
+        left: block.x + 'px',
+        top: block.y + 'px',
+        width: block.width + 'px',
+        height: block.height + 'px',
+      }"
+      @mousedown="startDragBlock($event, block)"
+    >
+      <wd-text
+        v-if="block.type === 'text'"
+        custom-class="!break-all"
+        :lines="99"
+        v-bind="block.props"
+        :size="`${block?.props?.size ?? 12}px`"
+      />
+      <wd-button
+        v-else-if="block.type === 'button'"
+        custom-class="!min-w-full !min-h-full !w-full !h-full"
+        :style="{
+          backgroundColor: block.props?.backgroundColor,
+          ...(block.props?.style ?? {}),
+        }"
+        v-bind="block.props"
+      >
+        {{ block.props?.content }}
+      </wd-button>
+      <wd-img
+        v-else-if="block.type === 'image'"
+        :custom-class="`!w-full !h-full ${!block?.props?.src ? '!bg-coolGray' : ''}`"
+        v-bind="block.props"
+        :src="block?.props?.src"
+      />
+
+      <view
+        v-else-if="block.type === 'tags'"
+        :class="[
+          'flex gap-1',
+          {
+            'whitespace-nowrap overflow-auto': !block.props?.overflowWrap,
+            'flex-wrap': block.props?.overflowWrap,
+          },
+        ]"
+      >
+        <wd-tag v-for="tag in block?.props?.tags ?? []" :key="tag" v-bind="block.props">
+          {{ tag }}
+        </wd-tag>
+      </view>
+
+      <view class="bg-gray-500/30 group-hover:bg-gray-500/70" v-else>
+        {{ block.type ?? 'unknow type' }}
+      </view>
+
+      <view
+        v-if="mode === 'edit'"
+        class="absolute text-white bottom-0 -right-[2px] translate-y-[100%] bg-gray-500/50 flex gap-2 p-1 group-hover:visible invisible"
+      >
+        <wd-icon
+          name="delete"
+          size="14px"
+          color="red"
+          custom-class="!cursor-pointer"
+          @click="removeBlock(block)"
+        ></wd-icon>
+        <!-- 调整块大小 -->
+        <view
+          class="cursor-se-resize flex items-center justify-center group-hover:visible invisible"
+          @mousedown="startResizeBlock($event, block)"
+        >
+          <wd-icon name="fullsreen" size="14px" custom-class="!block"></wd-icon>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<style lang="scss" scoped></style>

package/components/lcb-absolute-config-layout/types.ts

@@ -0,0 +1,29 @@
+export interface LcbAbsoluteConfigLayoutBlock {
+  id: number
+  x: number
+  y: number
+  offsetX: number
+  offsetY: number
+  zIndex: number
+  width: number
+  height: number
+  minWidth: number
+  minHeight: number
+  maxWidth: number
+  maxHeight: number
+  type: string
+  props: Record<string, any>
+  // color: string
+}
+
+export interface LcbAbsoluteConfigLayoutProps {
+  // Define the component's prop types here
+  mode: 'edit' | 'view'
+  dataset?: Record<string, any>
+  blocks: LcbAbsoluteConfigLayoutBlock[]
+  canvas: {
+    width: number
+    height: number
+    backgroundColor?: string
+  }
+}

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

@@ -66,7 +66,7 @@ const openType = computed(() => {
   }[props.jumpType || '']
 })
 const onActionClick = () => {
-  const { jumpAppid, jumpUrl: url, jumpType, phoneNumber } = props
+  const { jumpAppid, jumpUrl: url, jumpType, phoneNumber, addressInfo } = props
   /**
    * 跳转类型 1: 网页 2: 小程序内页 10: 跳转小程序 11: 跳转半屏小程序 12: 小程序客服
    * 13: 退出登录 14: 小程序弹框 21: 新窗口跳到页面 22: 切换TAB页 23: 重启进入某页面
@@ -160,6 +160,11 @@ const onActionClick = () => {
           phoneNumber,
         })
       break
+    case 105:
+      if (addressInfo) {
+        uni.openLocation(addressInfo)
+      }
+      break
     default:
       emits('click')
       break

package/components/lcb-action-view/types.ts

@@ -2,7 +2,7 @@ export interface LcbActionViewProps {
   /**
    * 跳转类型 1: 网页 2: 小程序内页 10: 跳转小程序 11: 跳转半屏小程序 12: 小程序客服
    * 13: 退出登录 14: 小程序弹框 21: 新窗口跳到页面 22: 切换TAB页 23: 重启进入某页面
-   * 24: 回到上一层 25: 关闭当前页面 26: 关闭当前窗口 30: 拨打电话 88: 授权手机号 101 用户头像 102 分享 103 意见反馈  104 	打开授权设置页
+   * 24: 回到上一层 25: 关闭当前页面 26: 关闭当前窗口 30: 拨打电话 88: 授权手机号 101 用户头像 102 分享 103 意见反馈  104 	打开授权设置页 105 查看地图
    */
   jumpType?:
     | 1
@@ -24,6 +24,7 @@ export interface LcbActionViewProps {
     | 102
     | 103
     | 104
+    | 105
   /** 跳转路径 */
   jumpUrl?: string
   /** 小程序appid */
@@ -33,4 +34,10 @@ export interface LcbActionViewProps {
   content?: string
   title?: string
   position?: string
+  addressInfo?: {
+    address: string
+    latitude: number
+    longitude: number
+    name: string
+  }
 }

package/components/lcb-product/lcb-product.vue

@@ -33,7 +33,17 @@ defineSlots<{
         v-bind="item.link"
       >
         <slot name="item" :item="item">
+          <lcb-absolute-config-layout
+            v-if="renderItemAbsoluteConfigLayout"
+            :blocks="renderItemAbsoluteConfigLayout?.blocks"
+            :canvas="renderItemAbsoluteConfigLayout?.canvas"
+            :dataset="{
+              ...(renderItemAbsoluteConfigLayout?.dataset ?? {}),
+              ...item,
+            }"
+          />
           <lcb-product-item
+            v-else
             v-bind="{ ...item, ...attrs }"
             :imageStyle="{
               width: imageWidth ?? `${imageWidthPercent}%`,
@@ -77,7 +87,17 @@ defineSlots<{
         <view class="p-1 overflow-hidden">
           <view class="rounded overflow-hidden" :style="{ height: `${itemHeight}rpx` }">
             <slot name="item" :item="item">
+              <lcb-absolute-config-layout
+                v-if="renderItemAbsoluteConfigLayout"
+                :blocks="renderItemAbsoluteConfigLayout?.blocks"
+                :canvas="renderItemAbsoluteConfigLayout?.canvas"
+                :dataset="{
+                  ...(renderItemAbsoluteConfigLayout?.dataset ?? {}),
+                  ...item,
+                }"
+              />
               <lcb-product-item
+                v-else
                 v-bind="{ ...item, ...attrs }"
                 layoutType="vertical"
                 className="!h-full"
@@ -114,7 +134,17 @@ defineSlots<{
             class="rounded overflow-hidden"
           >
             <slot name="item" :item="item">
+              <lcb-absolute-config-layout
+                v-if="renderItemAbsoluteConfigLayout"
+                :blocks="renderItemAbsoluteConfigLayout?.blocks"
+                :canvas="renderItemAbsoluteConfigLayout?.canvas"
+                :dataset="{
+                  ...(renderItemAbsoluteConfigLayout?.dataset ?? {}),
+                  ...item,
+                }"
+              />
               <lcb-product-item
+                v-else
                 v-bind="{ ...item, ...attrs }"
                 layoutType="vertical"
                 tag-overflow-wrap
@@ -161,7 +191,17 @@ defineSlots<{
             class="rounded overflow-hidden"
           >
             <slot name="item" :item="item">
+              <lcb-absolute-config-layout
+                v-if="renderItemAbsoluteConfigLayout"
+                :blocks="renderItemAbsoluteConfigLayout?.blocks"
+                :canvas="renderItemAbsoluteConfigLayout?.canvas"
+                :dataset="{
+                  ...(renderItemAbsoluteConfigLayout?.dataset ?? {}),
+                  ...item,
+                }"
+              />
               <lcb-product-item
+                v-else
                 v-bind="{ ...item, ...attrs }"
                 layoutType="vertical"
                 tag-overflow-wrap
@@ -210,7 +250,16 @@ defineSlots<{
           class="!w-66vw flex-shrink-0"
         >
           <slot name="item" :item="item">
-            <lcb-product-item v-bind="item" imageClass="!w-1/2"></lcb-product-item>
+            <lcb-absolute-config-layout
+              v-if="renderItemAbsoluteConfigLayout"
+              :blocks="renderItemAbsoluteConfigLayout?.blocks"
+              :canvas="renderItemAbsoluteConfigLayout?.canvas"
+              :dataset="{
+                ...(renderItemAbsoluteConfigLayout?.dataset ?? {}),
+                ...item,
+              }"
+            />
+            <lcb-product-item v-else v-bind="item" imageClass="!w-1/2"></lcb-product-item>
           </slot>
         </view>
       </view>

package/components/lcb-product/types.ts

@@ -8,4 +8,13 @@ export interface LcbProductProps {
   imageRadius?: number
   itemHeight?: number // 列表项高度
   items?: Record<string, any>[]
+  renderItemAbsoluteConfigLayout?: {
+    dataset?: Record<string, any>
+    blocks: any[]
+    canvas: {
+      width: number
+      height: number
+      backgroundColor?: string
+    }
+  }
 }

package/global.d.ts

@@ -1,6 +1,7 @@
 declare module 'vue' {
   // Helper for Volar
   export interface GlobalComponents {
+    'lcb-absolute-config-layout': (typeof import('./types/components/lcb-absolute-config-layout/lcb-absolute-config-layout.vue'))['default']
     'lcb-action-view': (typeof import('./types/components/lcb-action-view/lcb-action-view.vue'))['default']
     'lcb-advert': (typeof import('./types/components/lcb-advert/lcb-advert.vue'))['default']
     'lcb-area-picker': (typeof import('./types/components/lcb-area-picker/lcb-area-picker.vue'))['default']

package/package.json

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

package/types/components/lcb-absolute-config-layout/lcb-absolute-config-layout.vue.d.ts

@@ -0,0 +1,71 @@
+import { LcbAbsoluteConfigLayoutProps, LcbAbsoluteConfigLayoutBlock } from './types'
+declare let __VLS_typeProps: LcbAbsoluteConfigLayoutProps
+type __VLS_PublicProps = {
+  modelValue?: number
+} & typeof __VLS_typeProps
+declare const _default: import('vue').DefineComponent<
+  __VLS_WithDefaults<__VLS_TypePropsToOption<__VLS_PublicProps>, any>,
+  {},
+  unknown,
+  {},
+  {},
+  import('vue').ComponentOptionsMixin,
+  import('vue').ComponentOptionsMixin,
+  {
+    'update:modelValue': (modelValue: number) => void
+    startCanvasResize: (...args: any[]) => void
+    startDragBlock: (...args: any[]) => void
+    removeBlock: (...args: any[]) => void
+    startResizeBlock: (...args: any[]) => void
+  },
+  string,
+  import('vue').PublicProps,
+  Readonly<
+    import('vue').ExtractPropTypes<
+      __VLS_WithDefaults<__VLS_TypePropsToOption<__VLS_PublicProps>, any>
+    >
+  > & {
+    onStartCanvasResize?: ((...args: any[]) => any) | undefined
+    onStartDragBlock?: ((...args: any[]) => any) | undefined
+    onRemoveBlock?: ((...args: any[]) => any) | undefined
+    onStartResizeBlock?: ((...args: any[]) => any) | undefined
+    'onUpdate:modelValue'?: ((modelValue: number) => any) | undefined
+  },
+  {
+    mode: 'edit' | 'view'
+    dataset: Record<string, any>
+    blocks: LcbAbsoluteConfigLayoutBlock[]
+    canvas: {
+      width: number
+      height: number
+      backgroundColor?: string
+    }
+    modelValue: 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-absolute-config-layout/types.d.ts

@@ -0,0 +1,26 @@
+export interface LcbAbsoluteConfigLayoutBlock {
+  id: number
+  x: number
+  y: number
+  offsetX: number
+  offsetY: number
+  zIndex: number
+  width: number
+  height: number
+  minWidth: number
+  minHeight: number
+  maxWidth: number
+  maxHeight: number
+  type: string
+  props: Record<string, any>
+}
+export interface LcbAbsoluteConfigLayoutProps {
+  mode: 'edit' | 'view'
+  dataset?: Record<string, any>
+  blocks: LcbAbsoluteConfigLayoutBlock[]
+  canvas: {
+    width: number
+    height: number
+    backgroundColor?: string
+  }
+}

package/types/components/lcb-action-view/lcb-action-view.vue.d.ts

@@ -22,7 +22,6 @@ declare const _default: __VLS_WithTemplateSlots<
   ReturnType<typeof __VLS_template>
 >
 export default _default
-
 type __VLS_WithTemplateSlots<T, S> = T & {
   new (): {
     $slots: S

package/types/components/lcb-action-view/types.d.ts

@@ -2,7 +2,7 @@ export interface LcbActionViewProps {
   /**
    * 跳转类型 1: 网页 2: 小程序内页 10: 跳转小程序 11: 跳转半屏小程序 12: 小程序客服
    * 13: 退出登录 14: 小程序弹框 21: 新窗口跳到页面 22: 切换TAB页 23: 重启进入某页面
-   * 24: 回到上一层 25: 关闭当前页面 26: 关闭当前窗口 30: 拨打电话 88: 授权手机号 101 用户头像 102 分享 103 意见反馈  104 	打开授权设置页
+   * 24: 回到上一层 25: 关闭当前页面 26: 关闭当前窗口 30: 拨打电话 88: 授权手机号 101 用户头像 102 分享 103 意见反馈  104 	打开授权设置页 105 查看地图
    */
   jumpType?:
     | 1
@@ -24,6 +24,7 @@ export interface LcbActionViewProps {
     | 102
     | 103
     | 104
+    | 105
   /** 跳转路径 */
   jumpUrl?: string
   /** 小程序appid */
@@ -33,4 +34,10 @@ export interface LcbActionViewProps {
   content?: string
   title?: string
   position?: string
+  addressInfo?: {
+    address: string
+    latitude: number
+    longitude: number
+    name: string
+  }
 }

package/types/components/lcb-home-search/lcb-home-search.vue.d.ts

@@ -36,10 +36,10 @@ declare const _default: import('vue').DefineComponent<
     >
   >,
   {
+    backgroundColor: string
     radius: number
     placeholder: string
     marginHorizontal: number
-    backgroundColor: string
     opacity: number
     btnText: string
   },

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

@@ -20,8 +20,8 @@ declare const _default: import('vue').DefineComponent<
   string,
   import('vue').PublicProps,
   Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToOption<__VLS_PublicProps>>> & {
-    onSubmit?: ((...args: any[]) => any) | undefined
     'onUpdate:modelValue'?: ((modelValue: string | string[]) => any) | undefined
+    onSubmit?: ((...args: any[]) => any) | undefined
     'onUpdate:title'?: ((title: string) => any) | undefined
   },
   {},

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

@@ -20,8 +20,8 @@ declare const _default: import('vue').DefineComponent<
   string,
   import('vue').PublicProps,
   Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToOption<__VLS_PublicProps>>> & {
-    onSubmit?: ((...args: any[]) => any) | undefined
     'onUpdate:modelValue'?: ((modelValue: string | string[]) => any) | undefined
+    onSubmit?: ((...args: any[]) => any) | undefined
     'onUpdate:title'?: ((title: string) => any) | undefined
   },
   {},

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

@@ -40,10 +40,10 @@ declare const _default: import('vue').DefineComponent<
     >
   >,
   {
-    direction: import('@tplc/wot/types/components/wd-notice-bar/types').NoticeBarScrollDirection
+    backgroundColor: string
     color: string
+    direction: import('@tplc/wot/types/components/wd-notice-bar/types').NoticeBarScrollDirection
     paddingVertical: number
-    backgroundColor: string
     borderColor: string
     iconSize: number
     speed: number

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

@@ -29,6 +29,15 @@ declare const __VLS_component: import('vue').DefineComponent<
     imageWidthPercent: number
     imageHeightPercent: number
     itemHeight: number
+    renderItemAbsoluteConfigLayout: {
+      dataset?: Record<string, any>
+      blocks: any[]
+      canvas: {
+        width: number
+        height: number
+        backgroundColor?: string
+      }
+    }
   },
   {}
 >

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

@@ -7,4 +7,13 @@ export interface LcbProductProps {
   imageRadius?: number
   itemHeight?: number
   items?: Record<string, any>[]
+  renderItemAbsoluteConfigLayout?: {
+    dataset?: Record<string, any>
+    blocks: any[]
+    canvas: {
+      width: number
+      height: number
+      backgroundColor?: string
+    }
+  }
 }

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

@@ -70,11 +70,11 @@ declare const _default: import('vue').DefineComponent<
     >
   >,
   {
+    height: number
     duration: number
     autoplay: boolean
     direction: 'horizontal' | 'vertical'
     displayMultipleItems: number
-    height: number
     loop: boolean
     indicatorPosition:
       | 'left'