@tplc/wot 0.1.62 → 0.1.63

package/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 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.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-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.63",
   "keywords": [
     "wot-design-uni",
     "国际化",

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
   },
   {}
 >