@tplc/wot 1.0.7 → 1.0.8

package/components/wd-icon/types.ts

@@ -1,4 +1,4 @@
-import { baseProps, makeRequiredProp, makeStringProp } from '../common/props'
+import { baseProps, makeRequiredProp, makeStringProp, numericProp } from '../common/props'
 
 export const iconProps = {
   ...baseProps,
@@ -13,9 +13,9 @@ export const iconProps = {
   /**
    * 图标的字体大小
    */
-  size: String,
+  size: numericProp,
   /**
    * 类名前缀，用于使用自定义图标
    */
-  classPrefix: makeStringProp('wd-icon'),
+  classPrefix: makeStringProp('wd-icon')
 }

package/components/wd-icon/wd-icon.vue

@@ -10,21 +10,21 @@ export default {
   options: {
     virtualHost: true,
     addGlobalClass: true,
-    styleIsolation: 'shared',
-  },
+    styleIsolation: 'shared'
+  }
 }
 </script>
 
 <script lang="ts" setup>
 import { computed, type CSSProperties } from 'vue'
-import { addUnit, isDef, objToStyle, isImageUrl } from '../common/util'
+import { addUnit, isDef, objToStyle } from '../common/util'
 import { iconProps } from './types'
 
 const props = defineProps(iconProps)
 const emit = defineEmits(['click', 'touch'])
 
 const isImage = computed(() => {
-  return isDef(props.name) && isImageUrl(props.name)
+  return isDef(props.name) && props.name.includes('/')
 })
 
 const rootClass = computed(() => {
@@ -35,12 +35,12 @@ const rootClass = computed(() => {
 const rootStyle = computed(() => {
   const style: CSSProperties = {}
   if (props.color) {
-    style.color = props.color
+    style['color'] = props.color
   }
   if (props.size) {
     style['font-size'] = addUnit(props.size)
   }
-  return `${objToStyle(style)}; ${props.customStyle}`
+  return `${objToStyle(style)} ${props.customStyle}`
 })
 
 function handleClick(event: any) {

package/components/wd-img/types.ts

@@ -21,7 +21,7 @@ export const imgProps = {
   /**
    * 图片链接
    */
-  src: String,
+  src: makeStringProp(''),
   /**
    * 是否显示为圆形
    */

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

@@ -1,7 +1,7 @@
 <template>
   <view :class="rootClass" @click="handleClick" :style="rootStyle" class="relative">
     <image
-      v-if="status !== 'success'"
+      v-if="status !== 'success' && !isGif && !isWebp"
       :class="`wd-img__image coverImg ${customImage}`"
       class="z-1 absolute"
       :src="wrapPhoto({ photo: src, width: lazyPlaceWidth, type: 2 })"
@@ -50,6 +50,12 @@ import { imgProps } from './types'
 
 const props = defineProps(imgProps)
 const emit = defineEmits(['error', 'click', 'load'])
+const isGif = computed(() => {
+  return props.src?.indexOf('.gif') >= 0 || false
+})
+const isWebp = computed(() => {
+  return props.src?.indexOf('.webp') >= 0 || false
+})
 
 const rootStyle = computed(() => {
   const style: Record<string, string | number> = {}
@@ -90,6 +96,9 @@ function handleLoad(event: Event) {
 }
 
 function wrapPhoto({ photo, width = 100, type = 1 }: any) {
+  if (isWebp.value) {
+    return photo
+  }
   let finalWidth = width
   if (type === 1) {
     if (typeof width === 'string') {
@@ -112,17 +121,16 @@ function wrapPhoto({ photo, width = 100, type = 1 }: any) {
   const isctyun = photo?.indexOf('.ctyun') >= 0
   const sym = photo?.indexOf('?') > 0 ? '&' : '?'
   // 是否是gif
-  const isGif = photo?.indexOf('.gif') >= 0
   if (isVideoUrl(photo)) {
     const suffix = isctyun
       ? `${sym}x-amz-process=video/snapshot,t_2000,w_${finalWidth},m_lfit`
-      : `${sym}x-oss-process=video/snapshot,t_2000,w_${finalWidth}${isGif ? '' : '/format,webp'}&imageView2/2/w/${finalWidth}`
+      : `${sym}x-oss-process=video/snapshot,t_2000,w_${finalWidth}${isGif.value ? '' : '/format,webp'}&imageView2/2/w/${finalWidth}`
     const url = `${photo}${suffix}`
     return url
   }
   const suffix = isctyun
     ? `${sym}x-amz-process=image/resize,w_${finalWidth},m_lfit`
-    : `${sym}x-oss-process=image/resize,m_mfit,w_${finalWidth}${isGif ? '' : '/format,webp'}&imageView2/2/w/${finalWidth}`
+    : `${sym}x-oss-process=image/resize,m_mfit,w_${finalWidth}${isGif.value ? '' : '/format,webp'}&imageView2/2/w/${finalWidth}`
   const url = `${photo}${suffix}`
   return url
 }

package/components/wd-img-cropper/index.scss

@@ -1,14 +1,14 @@
-@import './../common/abstracts/_mixin';
-@import './../common/abstracts/variable';
+@import "./../common/abstracts/_mixin.scss";
+@import "./../common/abstracts/variable.scss";
 
 @include b(img-cropper) {
+  background: rgba(0, 0, 0, 1);
   position: fixed;
   top: 0;
   left: 0;
-  z-index: 1;
   width: 100vw;
   height: 100vh;
-  background: rgba(0, 0, 0, 1);
+  z-index: 1;
 
   // 裁剪框包裹器
   @include e(wrapper) {
@@ -17,12 +17,12 @@
   }
 
   @include e(cut) {
-    position: absolute;
     z-index: 9;
-    display: flex;
-    flex-direction: column;
+    position: absolute;
     width: 100vw;
     height: 100vh;
+    display: flex;
+    flex-direction: column;
     pointer-events: none;
 
     .wd-img-cropper__cut--top,
@@ -48,20 +48,20 @@
     }
 
     @include m(body) {
-      position: relative;
       // 若需要变化窗体大小，支持控制窗体的大小来控制下方所有对应的展示
       background-color: transparent;
+      position: relative;
 
       // 节选框的窗体最外部边缘线
       &::before {
-        position: absolute;
-        top: -50%;
-        left: -50%;
+        content: "";
+        border: 1px solid #fff;
         width: calc(200% - 1px);
         height: calc(200% - 1px);
-        content: '';
-        border: 1px solid #fff;
+        position: absolute;
         transform: scale(0.5) translate(-1px, -1px);
+        top: -50%;
+        left: -50%;
       }
 
       // 结算框对角尺寸
@@ -73,47 +73,51 @@
       .is-right-top,
       .is-right-bottom {
         &::before {
+          content: "";
           position: absolute;
           width: $border-size;
           height: 20px;
-          content: '';
           background-color: #fff;
         }
 
         &::after {
+          content: "";
           position: absolute;
           width: 20px;
           height: $border-size;
-          content: '';
           background-color: #fff;
         }
       }
 
       .is-left-top {
+
         &::before,
         &::after {
-          top: -$border-size;
           left: -$border-size;
+          top: -$border-size;
         }
       }
 
       .is-left-bottom {
+
         &::before,
         &::after {
-          bottom: -$border-size;
           left: -$border-size;
+          bottom: -$border-size;
         }
       }
 
       .is-right-top {
+
         &::before,
         &::after {
-          top: -$border-size;
           right: -$border-size;
+          top: -$border-size;
         }
       }
 
       .is-right-bottom {
+
         &::before,
         &::after {
           right: -$border-size;
@@ -124,22 +128,22 @@
       // 内部网格线
       .is-gridlines-x,
       .is-gridlines-y {
+        width: 100%;
+        height: 100%;
         position: absolute;
-        top: 0;
         left: 0;
+        top: 0;
         display: flex;
-        width: 100%;
-        height: 100%;
       }
 
       .is-gridlines-x {
         justify-content: center;
 
         &::before {
+          content: "";
           display: inline-block;
           width: 66.66%;
           height: 200%;
-          content: '';
           border: 1px solid #fff;
           border-top: none;
           border-bottom: none;
@@ -152,14 +156,14 @@
         align-items: center;
 
         &::after {
-          display: inline-block;
+          content: "";
           flex-shrink: 0;
+          display: inline-block;
           width: 200%;
           height: 66.66%;
-          content: '';
           border: 1px solid #fff;
-          border-right: none;
           border-left: none;
+          border-right: none;
           transform: scale(0.5) translate(-50%, 0);
         }
       }
@@ -167,46 +171,46 @@
   }
 
   @include e(img) {
-    position: absolute;
+    z-index: 2;
     top: 0;
     left: 0;
-    z-index: 2;
-    width: 100%;
+    position: absolute;
     border: none;
-    transform-origin: center;
+    width: 100%;
     backface-visibility: hidden;
+    transform-origin: center;
   }
 
   @include e(canvas) {
     position: fixed;
-    top: -200%;
-    z-index: 10;
+    background: white;
     width: 150px;
     height: 150px;
+    z-index: 10;
+    top: -200%;
     pointer-events: none;
-    background: white;
   }
 
   @include e(footer) {
     position: fixed;
-    bottom: 10px;
     z-index: 10;
+    bottom: 10px;
     width: 100%;
     height: 15vh;
     text-align: center;
 
     @include m(button) {
       position: relative;
+      text-align: left;
+      margin: 0 20px;
+      padding-top: 4vh;
       // line-height: 32px;
       box-sizing: border-box;
-      padding-top: 4vh;
-      margin: 0 20px;
-      text-align: left;
 
       .is-cancel {
         display: inline-block;
-        font-size: 16px;
         color: #fff;
+        font-size: 16px;
       }
 
       .is-confirm {
@@ -214,8 +218,8 @@
         right: 0;
         // height: 32px;
         width: 56px;
-        font-size: 16px;
         border-radius: 16px;
+        font-size: 16px;
       }
     }
   }
@@ -224,4 +228,4 @@
     font-size: $-img-cropper-icon-size;
     color: $-img-cropper-icon-color;
   }
-}
+}

package/components/wd-img-cropper/types.ts

@@ -1,20 +1,14 @@
 /*
  * @Author: weisheng
  * @Date: 2024-06-03 23:43:43
- * @LastEditTime: 2024-06-06 21:40:53
+ * @LastEditTime: 2025-03-25 17:28:13
  * @LastEditors: weisheng
  * @Description:
  * @FilePath: /wot-design-uni/src/uni_modules/wot-design-uni/components/wd-img-cropper/types.ts
  * 记得注释
  */
 import type { ComponentPublicInstance, ExtractPropTypes } from 'vue'
-import {
-  baseProps,
-  makeBooleanProp,
-  makeNumberProp,
-  makeNumericProp,
-  makeStringProp,
-} from '../common/props'
+import { baseProps, makeBooleanProp, makeNumberProp, makeNumericProp, makeStringProp } from '../common/props'
 
 export const imgCropperProps = {
   ...baseProps,
@@ -64,6 +58,10 @@ export const imgCropperProps = {
    * 最大缩放
    */
   maxScale: makeNumberProp(3),
+  /**
+   * 裁剪框宽高比，格式为 width:height
+   */
+  aspectRatio: makeStringProp('1:1')
 }
 
 export type ImgCropperProps = ExtractPropTypes<typeof imgCropperProps>