@tplc/wot 0.1.62 → 0.1.64

package/CHANGELOG.md

@@ -2,6 +2,21 @@
 
 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.1.64](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/compare/v0.3.75...v0.1.64) (2025-03-10)
+
+
+### 🚀 Chore | 构建/工程依赖/工具
+
+* **release:** 0.1.63 ([6286500](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/6286500e9cf7b2096ea980ecc69949324cf12859))
+* **release:** 0.3.76 ([74cab95](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/74cab959ceab17fcc46662bd9bdc9e219e551547))
+
+
+### ✨ Features | 新功能
+
+* 支持banner 底部 ([1e0b38c](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/1e0b38ccba18240f4b18f78a84e0810ae8b67460))
+
+### [0.1.63](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/compare/v0.3.76...v0.1.63) (2025-03-10)
+
 ### [0.1.62](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/compare/v0.3.57...v0.1.62) (2025-02-24)
 
 

package/components/wd-img/wd-img.vue

@@ -3,13 +3,13 @@
     <image
       v-if="status !== 'success'"
       :class="`wd-img__image coverImg ${customImage}`"
-      :src="wrapPhoto({ photo: src, width: lazyPlaceWidth })"
+      :src="wrapPhoto({ photo: src, width: lazyPlaceWidth, type: 2 })"
       :mode="mode"
       :lazy-load="lazyLoad"
     />
     <image
       :class="`wd-img__image coverImg ${customImage}`"
-      :src="wrapPhoto({ photo: src, width, type: 2 })"
+      :src="wrapPhoto({ photo: src, width, type: 1 })"
       :mode="mode"
       :lazy-load="lazyLoad"
       @load="handleLoad"
@@ -35,7 +35,7 @@ export default {
 </script>
 
 <script lang="ts" setup>
-import { computed, ref } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { addUnit, isDef, objToStyle } from '../common/util'
 import { imgProps } from './types'
 
@@ -80,15 +80,41 @@ function handleLoad(event: Event) {
   emit('load', event)
 }
 
-function wrapPhoto({ photo, width = 200, type = 1 }: any) {
+function wrapPhoto({ photo, width = 100, type = 1 }: any) {
+  let finalWidth = width
+  if (type === 1) {
+    if (typeof width === 'string') {
+      const imgWidth = parseInt(width.replace('rpx', ''))
+      if (width.includes('rpx')) {
+        finalWidth = imgWidth * 6
+      } else if (width.includes('px')) {
+        finalWidth = imgWidth * 3
+      } else if (width.includes('%')) {
+        finalWidth = 1500
+      }
+    } else {
+      finalWidth = width * 3
+    }
+    if (finalWidth > 1500) {
+      finalWidth = 1500
+    }
+  }
+
   const isctyun = photo?.indexOf('.ctyun') >= 0
   const sym = photo?.indexOf('?') > 0 ? '&' : '?'
   const suffix = isctyun
-    ? `${sym}x-amz-process=image/resize,w_${width},m_lfit`
-    : `${sym}x-oss-process=image/resize,m_mfit,w_${width}&imageView2/2/w/${width}`
-  const url = `${photo}${width > 0 ? suffix : ''}`
+    ? `${sym}x-amz-process=image/resize,w_${finalWidth},m_lfit`
+    : `${sym}x-oss-process=image/resize,m_mfit,w_${finalWidth}&imageView2/2/w/${finalWidth}`
+  const url = `${photo}${suffix}`
   return url
 }
+
+watch(
+  () => props.src,
+  () => {
+    status.value = 'loading'
+  },
+)
 </script>
 
 <style lang="scss" scoped>

package/components/wd-select-picker/index.scss

@@ -146,6 +146,19 @@
     justify-content: center;
     background: $-picker-loading-bg;
   }
+  @include e(no-more) {
+    text-align: center;
+    color: $-cell-arrow-color;
+    padding: 24rpx 0;
+    font-size: 28rpx;
+  }
+  @include e(innerLoading) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: $-picker-loading-bg;
+    padding: 24rpx 0;
+  }
   // selectPiceker多出的样式
   @include edeep(header) {
     height: 72px;

package/components/wd-select-picker/types.ts

@@ -10,6 +10,16 @@ import {
 import type { FormItemRule } from '../wd-form/types'
 
 export type SelectPickerType = 'checkbox' | 'radio' | 'button'
+export type SelectPickerRemote = {
+  action: (
+    search: string,
+    params: { pageNum: number; pageSize: number },
+  ) => Promise<Record<string, any>[]>
+  valueKey?: string
+  labelKey?: string
+  pageSize?: number
+  isPage?: boolean
+}
 
 export const selectPickerProps = {
   ...baseProps,
@@ -75,6 +85,10 @@ export const selectPickerProps = {
   safeAreaInsetBottom: makeBooleanProp(true),
   /** 可搜索（目前只支持本地搜索） */
   filterable: makeBooleanProp(false),
+  /** 远程搜索配置 */
+  remoteConfig: {
+    type: Object as PropType<SelectPickerRemote>,
+  },
   /** 搜索框占位符 */
   filterPlaceholder: String,
   /** 是否超出隐藏 */

package/components/wd-select-picker/wd-select-picker.vue

@@ -60,11 +60,13 @@
         placeholder-left
         @change="handleFilterChange"
       />
+
       <scroll-view
         :class="`wd-select-picker__wrapper ${filterable ? 'is-filterable' : ''} ${loading ? 'is-loading' : ''} ${customContentClass}`"
         :scroll-y="!loading"
         :scroll-top="scrollTop"
         :scroll-with-animation="true"
+        @scrolltolower="handleScrollToLower"
       >
         <!-- 多选 -->
         <view v-if="type === 'checkbox' && isArray(selectList)" id="wd-checkbox-group">
@@ -163,6 +165,10 @@
         <view v-if="loading" class="wd-select-picker__loading" @touchmove="noop">
           <wd-loading :color="loadingColor" />
         </view>
+        <view v-if="innerLoading" class="wd-select-picker__innerLoading">
+          <wd-loading :color="loadingColor" />
+        </view>
+        <view v-if="noMore" class="wd-select-picker__no-more">没有更多数据了</view>
       </scroll-view>
       <!-- 确认按钮 -->
       <view v-if="showConfirm" class="wd-select-picker__footer">
@@ -206,7 +212,10 @@ const filterVal = ref<string>('')
 const filterColumns = ref<Array<Record<string, any>>>([])
 const scrollTop = ref<number | null>(0) // 滚动位置
 const cell = useCell()
-
+const pageNum = ref<number>(1)
+const noMore = ref<boolean>(false)
+const innerLoading = ref<boolean>(false)
+const innerColumns = ref<Array<Record<string, any>>>([])
 const showValue = computed(() => {
   const value = valueFormat(props.modelValue)
   let showValueTemp: string = ''
@@ -316,10 +325,34 @@ const isRequired = computed(() => {
   }
   return props.required || props.rules.some((rule) => rule.required) || formRequired
 })
+/** 获取远程数据 */
+const getRemoteData = async () => {
+  innerLoading.value = true
+  const res = await props.remoteConfig?.action(filterVal.value, {
+    pageNum: pageNum.value,
+    pageSize: props.remoteConfig?.pageSize || 10,
+  })
 
+  if (res) {
+    if (res.length) {
+      pageNum.value++
+      innerColumns.value = [...innerColumns.value, ...res]
+    } else {
+      noMore.value = true
+    }
+  }
+  innerLoading.value = false
+}
+const handleScrollToLower = () => {
+  if (noMore.value || innerLoading.value || !props.remoteConfig?.isPage) return
+  getRemoteData()
+}
 onBeforeMount(() => {
   selectList.value = valueFormat(props.modelValue)
   filterColumns.value = props.columns
+  if (props.remoteConfig) {
+    getRemoteData()
+  }
 })
 
 const { proxy } = getCurrentInstance() as any

package/components/wd-swiper/types.ts

@@ -215,6 +215,8 @@ export const swiperProps = {
   radius: makeStringProp(''),
 
   action: makeBooleanProp(false),
+
+  indicatorCustomStyle: makeStringProp(''),
 }
 
 export type SwiperProps = ExtractPropTypes<typeof swiperProps>

package/components/wd-swiper/wd-swiper.vue

@@ -67,6 +67,7 @@
         :min-show-num="swiperIndicator.minShowNum"
         :show-controls="swiperIndicator.showControls"
         @change="handleIndicatorChange"
+        :customStyle="indicatorCustomStyle"
       />
     </template>
   </view>

package/components/wd-swiper-nav/types.ts

@@ -37,6 +37,14 @@ export const swiperNavprops = {
    * 指示器类型，点状(dots)、点条状(dots-bar)、分式(fraction)等
    */
   type: makeStringProp<SwiperIndicatorType>('dots'),
+  /**
+   * 指示器活动颜色
+   */
+  activityColor: makeStringProp('var(--wot-color-theme)'),
+  /**
+   * 指示器非活动颜色
+   */
+  inactiveColor: makeStringProp('#e7e7e7'),
 }
 
 export type SwiperNavProps = ExtractPropTypes<typeof swiperNavprops>

package/components/wd-swiper-nav/wd-swiper-nav.vue

@@ -13,6 +13,9 @@
         v-for="(item, index) in total"
         :key="index"
         :class="`wd-swiper-nav__item--${type} ${current === index ? 'is-active' : ''} is-${direction}`"
+        :style="{
+          backgroundColor: current === index ? activityColor : inactiveColor,
+        }"
       ></view>
     </block>
     <block v-if="type === 'fraction'">{{ current + 1 }}/{{ total }}</block>

package/package.json

@@ -1,7 +1,7 @@
 {
   "id": "@tplc/wot",
   "name": "@tplc/wot",
-  "version": "0.1.62",
+  "version": "0.1.64",
   "keywords": [
     "wot-design-uni",
     "国际化",

package/types/components/wd-select-picker/types.d.ts

@@ -1,6 +1,19 @@
 import type { ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue'
 import type { FormItemRule } from '../wd-form/types'
 export type SelectPickerType = 'checkbox' | 'radio' | 'button'
+export type SelectPickerRemote = {
+  action: (
+    search: string,
+    params: {
+      pageNum: number
+      pageSize: number
+    },
+  ) => Promise<Record<string, any>[]>
+  valueKey?: string
+  labelKey?: string
+  pageSize?: number
+  isPage?: boolean
+}
 export declare const selectPickerProps: {
   /** 选择器左侧文案 */
   label: StringConstructor
@@ -122,6 +135,10 @@ export declare const selectPickerProps: {
     type: BooleanConstructor
     default: boolean
   }
+  /** 远程搜索配置 */
+  remoteConfig: {
+    type: PropType<SelectPickerRemote>
+  }
   /** 搜索框占位符 */
   filterPlaceholder: StringConstructor
   /** 是否超出隐藏 */

package/types/components/wd-select-picker/wd-select-picker.vue.d.ts

@@ -92,6 +92,9 @@ declare const _default: __VLS_WithTemplateSlots<
         type: BooleanConstructor
         default: boolean
       }
+      remoteConfig: {
+        type: import('vue').PropType<import('./types').SelectPickerRemote>
+      }
       filterPlaceholder: StringConstructor
       ellipsis: {
         type: BooleanConstructor
@@ -242,6 +245,9 @@ declare const _default: __VLS_WithTemplateSlots<
           type: BooleanConstructor
           default: boolean
         }
+        remoteConfig: {
+          type: import('vue').PropType<import('./types').SelectPickerRemote>
+        }
         filterPlaceholder: StringConstructor
         ellipsis: {
           type: BooleanConstructor

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

@@ -250,6 +250,10 @@ export declare const swiperProps: {
     type: BooleanConstructor
     default: boolean
   }
+  indicatorCustomStyle: {
+    type: PropType<string>
+    default: string
+  }
   customStyle: {
     type: PropType<string>
     default: string

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

@@ -127,6 +127,10 @@ declare const __VLS_component: import('vue').DefineComponent<
       type: BooleanConstructor
       default: boolean
     }
+    indicatorCustomStyle: {
+      type: import('vue').PropType<string>
+      default: string
+    }
     customStyle: {
       type: import('vue').PropType<string>
       default: string
@@ -274,6 +278,10 @@ declare const __VLS_component: import('vue').DefineComponent<
         type: BooleanConstructor
         default: boolean
       }
+      indicatorCustomStyle: {
+        type: import('vue').PropType<string>
+        default: string
+      }
       customStyle: {
         type: import('vue').PropType<string>
         default: string
@@ -321,6 +329,7 @@ declare const __VLS_component: import('vue').DefineComponent<
     customNextImageClass: string
     itemPadding: string
     imageRadius: string
+    indicatorCustomStyle: string
   },
   {}
 >

package/types/components/wd-swiper-nav/types.d.ts

@@ -54,6 +54,20 @@ export declare const swiperNavprops: {
     type: import('vue').PropType<SwiperIndicatorType>
     default: SwiperIndicatorType
   }
+  /**
+   * 指示器活动颜色
+   */
+  activityColor: {
+    type: import('vue').PropType<string>
+    default: string
+  }
+  /**
+   * 指示器非活动颜色
+   */
+  inactiveColor: {
+    type: import('vue').PropType<string>
+    default: string
+  }
   customStyle: {
     type: import('vue').PropType<string>
     default: string

package/types/components/wd-swiper-nav/wd-swiper-nav.vue.d.ts

@@ -28,6 +28,14 @@ declare const _default: import('vue').DefineComponent<
       type: import('vue').PropType<import('./types').SwiperIndicatorType>
       default: import('./types').SwiperIndicatorType
     }
+    activityColor: {
+      type: import('vue').PropType<string>
+      default: string
+    }
+    inactiveColor: {
+      type: import('vue').PropType<string>
+      default: string
+    }
     customStyle: {
       type: import('vue').PropType<string>
       default: string
@@ -78,6 +86,14 @@ declare const _default: import('vue').DefineComponent<
         type: import('vue').PropType<import('./types').SwiperIndicatorType>
         default: import('./types').SwiperIndicatorType
       }
+      activityColor: {
+        type: import('vue').PropType<string>
+        default: string
+      }
+      inactiveColor: {
+        type: import('vue').PropType<string>
+        default: string
+      }
       customStyle: {
         type: import('vue').PropType<string>
         default: string
@@ -97,9 +113,11 @@ declare const _default: import('vue').DefineComponent<
     current: number
     direction: import('../wd-swiper/types').DirectionType
     total: number
+    inactiveColor: string
     minShowNum: number
     indicatorPosition: import('../wd-swiper/types').IndicatorPositionType
     showControls: boolean
+    activityColor: string
   },
   {}
 >