@tplc/wot 1.0.6 → 1.0.8

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

@@ -1,31 +1,20 @@
 <template>
   <!-- 绘制的图片canvas -->
-  <view
-    v-if="modelValue"
-    :class="`wd-img-cropper ${customClass}`"
-    :style="customStyle"
-    @touchmove="preventTouchMove"
-  >
+  <view v-if="modelValue" :class="`wd-img-cropper ${customClass}`" :style="customStyle" @touchmove="preventTouchMove">
     <!-- 展示在用户面前的裁剪框 -->
     <view class="wd-img-cropper__wrapper">
       <!-- 画出裁剪框 -->
       <view class="wd-img-cropper__cut">
         <!-- 上方阴影块 -->
-        <view
-          :class="`wd-img-cropper__cut--top ${IS_TOUCH_END ? '' : 'is-hightlight'}`"
-          :style="`height: ${cutTop}px;`"
-        ></view>
-        <view class="wd-img-cropper__cut--middle">
+        <view :class="`wd-img-cropper__cut--top ${IS_TOUCH_END ? '' : 'is-hightlight'}`" :style="`height: ${cutTop}px;`"></view>
+        <view class="wd-img-cropper__cut--middle" :style="`height: ${cutHeight}px;`">
           <!-- 左侧阴影块 -->
           <view
             :class="`wd-img-cropper__cut--left ${IS_TOUCH_END ? '' : 'is-hightlight'}`"
-            :style="`width: ${cutLeft}px; height: ${cutWidth}px;`"
+            :style="`width: ${cutLeft}px; height: ${cutHeight}px;`"
           ></view>
           <!-- 裁剪框 -->
-          <view
-            class="wd-img-cropper__cut--body"
-            :style="`width: ${cutWidth}px; height: ${cutHeight}px;`"
-          >
+          <view class="wd-img-cropper__cut--body" :style="`width: ${cutWidth}px; height: ${cutHeight}px;`">
             <!-- 内部网格线 -->
             <view class="is-gridlines-x"></view>
             <view class="is-gridlines-y"></view>
@@ -59,27 +48,18 @@
     </view>
     <!-- 绘制的图片canvas -->
     <canvas
-      canvas-id="wd-img-cropper-canvas"
-      id="wd-img-cropper-canvas"
+      :canvas-id="canvasId"
+      :id="canvasId"
       class="wd-img-cropper__canvas"
       :disable-scroll="true"
       :style="`width: ${Number(canvasWidth) * canvasScale}px; height: ${Number(canvasHeight) * canvasScale}px;`"
     />
     <!-- 下方按钮 -->
     <view class="wd-img-cropper__footer">
-      <wd-icon
-        custom-class="wd-img-cropper__rotate"
-        v-if="!disabledRotate"
-        name="rotate"
-        @click="handleRotate"
-      ></wd-icon>
+      <wd-icon custom-class="wd-img-cropper__rotate" v-if="!disabledRotate" name="rotate" @click="handleRotate"></wd-icon>
       <view class="wd-img-cropper__footer--button">
-        <view class="is-cancel" @click="handleCancel">
-          {{ cancelButtonText || translate('cancel') }}
-        </view>
-        <wd-button size="small" :custom-style="buttonStyle" @click="handleConfirm">
-          {{ confirmButtonText || translate('confirm') }}
-        </wd-button>
+        <view class="is-cancel" @click="handleCancel">{{ cancelButtonText || translate('cancel') }}</view>
+        <wd-button size="small" :custom-style="buttonStyle" @click="handleConfirm">{{ confirmButtonText || translate('confirm') }}</wd-button>
       </view>
     </view>
   </view>
@@ -91,17 +71,21 @@ export default {
   options: {
     virtualHost: true,
     addGlobalClass: true,
-    styleIsolation: 'shared',
-  },
+    styleIsolation: 'shared'
+  }
 }
 </script>
 
 <script lang="ts" setup>
+import wdIcon from '../wd-icon/wd-icon.vue'
+import wdButton from '../wd-button/wd-button.vue'
 import { computed, getCurrentInstance, ref, watch } from 'vue'
-import { addUnit, objToStyle } from '../common/util'
+import { addUnit, getSystemInfo, objToStyle, uuid } from '../common/util'
 import { useTranslate } from '../composables/useTranslate'
 import { imgCropperProps, type ImgCropperExpose } from './types'
 
+const canvasId = ref<string>(`cropper${uuid()}`) // canvas 组件的唯一标识符
+
 // 延时动画设置
 let CHANGE_TIME: any | null = null
 // 移动节流
@@ -124,7 +108,7 @@ const { translate } = useTranslate('img-cropper')
 const imgAngle = ref<number>(0)
 // 是否开启动画
 const isAnimation = ref<boolean>(false)
-// #ifdef MP-ALIPAY || APP-PLUS
+// #ifdef MP-ALIPAY || APP-PLUS || H5
 // hack 避免钉钉小程序、支付宝小程序、app抛出相关异常
 const animation: any = null
 // #endif
@@ -148,11 +132,11 @@ const imgScale = ref<number>(1)
 // imgWidth: null,
 // imgHeight: null,
 // 图片中心轴点距左的距离
-const imgLeft = ref<number>(uni.getWindowInfo().windowWidth / 2)
-const imgTop = ref<number>((uni.getWindowInfo().windowHeight / 2) * TOP_PERCENT)
+const imgLeft = ref<number>(getSystemInfo().windowWidth / 2)
+const imgTop = ref<number>((getSystemInfo().windowHeight / 2) * TOP_PERCENT)
 
 const imgInfo = ref<UniApp.GetImageInfoSuccessData | null>(null)
-const info = ref<UniApp.GetSystemInfoResult>(uni.getSystemInfoSync())
+const info = ref(getSystemInfo())
 
 // 是否移动中设置 同时控制背景颜色是否高亮
 const IS_TOUCH_END = ref<boolean>(true)
@@ -160,12 +144,12 @@ const IS_TOUCH_END = ref<boolean>(true)
 const movingPosRecord = ref<Record<string, string | number>[]>([
   {
     x: '',
-    y: '',
+    y: ''
   },
   {
     x: '',
-    y: '',
-  },
+    y: ''
+  }
 ])
 // 双指缩放时 两个坐标点斜边长度
 const fingerDistance = ref<string | number>('')
@@ -180,15 +164,22 @@ watch(
     if (newValue) {
       INIT_IMGWIDTH = props.imgWidth
       INIT_IMGHEIGHT = props.imgHeight
-      info.value = uni.getSystemInfoSync()
-      const tempCutSize = info.value.windowWidth - offset.value * 2
-      cutWidth.value = tempCutSize
-      cutHeight.value = tempCutSize
-      cutTop.value = (info.value.windowHeight * TOP_PERCENT - tempCutSize) / 2
+      info.value = getSystemInfo()
+
+      // 根据aspectRatio计算裁剪框尺寸
+      const [widthRatio, heightRatio] = props.aspectRatio.split(':').map(Number)
+      const tempCutWidth = info.value.windowWidth - offset.value * 2
+      const tempCutHeight = (tempCutWidth * heightRatio) / widthRatio
+
+      cutWidth.value = tempCutWidth
+      cutHeight.value = tempCutHeight
+      cutTop.value = (info.value.windowHeight * TOP_PERCENT - tempCutHeight) / 2
       cutLeft.value = offset.value
+
       canvasScale.value = props.exportScale
-      canvasHeight.value = tempCutSize
-      canvasWidth.value = tempCutSize
+      canvasHeight.value = tempCutHeight
+      canvasWidth.value = tempCutWidth
+
       // 根据开发者设置的图片目标尺寸计算实际尺寸
       initImageSize()
       // 初始化canvas
@@ -201,8 +192,8 @@ watch(
   },
   {
     deep: true,
-    immediate: true,
-  },
+    immediate: true
+  }
 )
 
 watch(
@@ -212,8 +203,8 @@ watch(
   },
   {
     deep: true,
-    immediate: true,
-  },
+    immediate: true
+  }
 )
 
 watch(
@@ -225,8 +216,8 @@ watch(
   },
   {
     deep: true,
-    immediate: true,
-  },
+    immediate: true
+  }
 )
 watch(
   () => isAnimation.value,
@@ -242,8 +233,8 @@ watch(
   },
   {
     deep: true,
-    immediate: true,
-  },
+    immediate: true
+  }
 )
 
 const buttonStyle = computed(() => {
@@ -253,7 +244,7 @@ const buttonStyle = computed(() => {
     // height: 32px;
     width: '56px',
     'border-radius': '16px',
-    'font-size': '16px',
+    'font-size': '16px'
   }
 
   return objToStyle(style)
@@ -266,7 +257,7 @@ const imageStyle = computed(() => {
     transform: `translate(${addUnit(imgLeft.value - picWidth.value / 2)}, ${addUnit(imgTop.value - picHeight.value / 2)}) scale(${
       imgScale.value
     }) rotate(${imgAngle.value}deg)`,
-    'transition-duration': (isAnimation.value ? 0.4 : 0) + 's',
+    'transition-duration': (isAnimation.value ? 0.4 : 0) + 's'
   }
   return objToStyle(style)
 })
@@ -274,8 +265,12 @@ const imageStyle = computed(() => {
 /**
  * 逆转是否使用动画
  */
-function revertIsAnimation(animation: boolean) {
-  isAnimation.value = animation
+function revertIsAnimation(animation: boolean | { value: boolean }) {
+  if (typeof animation === 'boolean') {
+    isAnimation.value = animation
+  } else {
+    isAnimation.value = animation.value
+  }
 }
 
 /**
@@ -286,7 +281,23 @@ function setRoate(angle: number) {
   if (!angle || props.disabledRotate) return
   revertIsAnimation(true)
   imgAngle.value = angle
-  // 设置旋转后需要判定旋转后宽高是否不符合贴边的标准
+
+  // 重新计算缩放比例
+  let tempPicWidth = picWidth.value
+  let tempPicHeight = picHeight.value
+
+  // 旋转后宽高互换
+  if ((angle / 90) % 2) {
+    tempPicWidth = picHeight.value
+    tempPicHeight = picWidth.value
+  }
+
+  // 计算新的缩放比例
+  const widthRatio = cutWidth.value / tempPicWidth
+  const heightRatio = cutHeight.value / tempPicHeight
+  imgScale.value = Math.max(widthRatio, heightRatio)
+
+  // 检测边缘位置
   detectImgPosIsEdge()
 }
 
@@ -294,7 +305,7 @@ function setRoate(angle: number) {
  * 初始化图片的大小和角度以及距离
  */
 function resetImg() {
-  const { windowHeight, windowWidth } = uni.getWindowInfo()
+  const { windowHeight, windowWidth } = getSystemInfo()
   imgScale.value = 1
   imgAngle.value = 0
   imgLeft.value = windowWidth / 2
@@ -319,44 +330,48 @@ function loadImg() {
     },
     fail: () => {
       // this.setData({ imgSrc: '' })
-    },
+    }
   })
 }
 
 /**
- *  设置图片尺寸，使其有一边小于裁剪框尺寸
- * 1、图片宽或高 小于裁剪框，自动放大至一边与高平齐
- * 2、图片宽或高 大于裁剪框，自动缩小至一边与高平齐
+ *  设置图片尺寸，使其短边完全显示并填满裁剪框
  */
 function computeImgSize() {
   let tempPicWidth: number = picWidth.value
   let tempPicHeight: number = picHeight.value
 
   if (!INIT_IMGHEIGHT && !INIT_IMGWIDTH) {
-    // 没有设置宽高，写入图片的真实宽高
-    tempPicWidth = imgInfo.value!.width
-    tempPicHeight = imgInfo.value!.height
-    /**
-     * 设 a = imgWidth; b = imgHeight; x = cutWidth; y = cutHeight
-     * 共有三种宽高比：1、a/b > x/y 2、a/b < x/y 3、a/b = x/y
-     * 1、已知 b = y => a = a/b*y
-     * 2、已知 a = x => b = b/a*x
-     * 3、可用上方任意公式
-     */
-    if (picWidth.value / picHeight.value > cutWidth.value / cutHeight.value) {
+    // 计算图片与裁剪框的宽高比
+    const imgRatio = imgInfo.value!.width / imgInfo.value!.height
+    const cropRatio = cutWidth.value / cutHeight.value
+
+    if (imgRatio > cropRatio) {
+      // 图片更宽，以高度为准
       tempPicHeight = cutHeight.value
-      tempPicWidth = (imgInfo.value!.width / imgInfo.value!.height) * cutHeight.value
+      tempPicWidth = tempPicHeight * imgRatio
     } else {
+      // 图片更高，以宽度为准
       tempPicWidth = cutWidth.value
-      tempPicHeight = (imgInfo.value!.height / imgInfo.value!.width) * cutWidth.value
+      tempPicHeight = tempPicWidth / imgRatio
     }
   } else if (INIT_IMGHEIGHT && !INIT_IMGWIDTH) {
-    tempPicWidth = (imgInfo.value!.width / imgInfo.value!.height) * Number(INIT_IMGHEIGHT)
+    tempPicHeight = Number(INIT_IMGHEIGHT)
+    tempPicWidth = (imgInfo.value!.width / imgInfo.value!.height) * tempPicHeight
   } else if ((!INIT_IMGHEIGHT && INIT_IMGWIDTH) || (INIT_IMGHEIGHT && INIT_IMGWIDTH)) {
-    tempPicHeight = (imgInfo.value!.height / imgInfo.value!.width) * Number(INIT_IMGWIDTH)
+    tempPicWidth = Number(INIT_IMGWIDTH)
+    tempPicHeight = (imgInfo.value!.height / imgInfo.value!.width) * tempPicWidth
   }
+
+  // 确保计算后的尺寸至少有一边等于裁剪框尺寸
+  const widthRatio = cutWidth.value / tempPicWidth
+  const heightRatio = cutHeight.value / tempPicHeight
+  const scale = Math.max(widthRatio, heightRatio)
+
   picWidth.value = tempPicWidth
   picHeight.value = tempPicHeight
+  // 设置初始缩放以适应裁剪框
+  imgScale.value = scale
 }
 
 /**
@@ -364,7 +379,7 @@ function computeImgSize() {
  */
 function initCanvas() {
   if (!ctx.value) {
-    ctx.value = uni.createCanvasContext('wd-img-cropper-canvas', proxy)
+    ctx.value = uni.createCanvasContext(canvasId.value, proxy)
   }
 }
 
@@ -407,9 +422,7 @@ function detectImgPosIsEdge(scale?: number) {
   }
   // 左
   currentImgLeft =
-    (currentPicWidth * currentScale) / 2 + cutLeft.value >= currentImgLeft
-      ? currentImgLeft
-      : (currentPicWidth * imgScale.value) / 2 + cutLeft.value
+    (currentPicWidth * currentScale) / 2 + cutLeft.value >= currentImgLeft ? currentImgLeft : (currentPicWidth * imgScale.value) / 2 + cutLeft.value
   // 右
   currentImgLeft =
     cutLeft.value + cutWidth.value - (currentPicWidth * currentScale) / 2 <= currentImgLeft
@@ -417,9 +430,7 @@ function detectImgPosIsEdge(scale?: number) {
       : cutLeft.value + cutWidth.value - (currentPicWidth * currentScale) / 2
   // 上
   currentImgTop =
-    (currentPicHeight * currentScale) / 2 + cutTop.value >= currentImgTop
-      ? currentImgTop
-      : (currentPicHeight * currentScale) / 2 + cutTop.value
+    (currentPicHeight * currentScale) / 2 + cutTop.value >= currentImgTop ? currentImgTop : (currentPicHeight * currentScale) / 2 + cutTop.value
   // 下
   currentImgTop =
     cutTop.value + cutHeight.value - (currentPicHeight * currentScale) / 2 <= currentImgTop
@@ -477,7 +488,7 @@ function handleImgTouchStart(event: any) {
     // 单指拖动
     movingPosRecord.value[0] = {
       x: event.touches[0].clientX - imgLeft.value,
-      y: event.touches[0].clientY - imgTop.value,
+      y: event.touches[0].clientY - imgTop.value
     }
   } else {
     // 以两指为坐标点 做直角三角形 a2 + b2 = c2
@@ -562,36 +573,28 @@ function handleConfirm() {
  */
 function canvasToImage() {
   const { fileType, quality, exportScale } = props
-  try {
-    uni.canvasToTempFilePath(
-      {
-        width: cutWidth.value * exportScale,
-        height: Math.round(cutHeight.value * exportScale),
-        destWidth: cutWidth.value * exportScale,
-        destHeight: Math.round(cutHeight.value * exportScale),
-        fileType,
-        quality,
-        canvasId: 'wd-img-cropper-canvas',
-        success: (res: any) => {
-          const result = {
-            tempFilePath: res.tempFilePath,
-            width: cutWidth.value * exportScale,
-            height: cutHeight.value * exportScale,
-          }
-          // #ifdef MP-DINGTALK
-          result.tempFilePath = res.filePath
-          // #endif
-          emit('confirm', result)
-        },
-        complete: () => {
-          emit('update:modelValue', false)
-        },
+  uni.canvasToTempFilePath(
+    {
+      width: cutWidth.value * exportScale,
+      height: Math.round(cutHeight.value * exportScale),
+      destWidth: cutWidth.value * exportScale,
+      destHeight: Math.round(cutHeight.value * exportScale),
+      fileType,
+      quality,
+      canvasId: canvasId.value,
+      success: (res: any) => {
+        const result = { tempFilePath: res.tempFilePath, width: cutWidth.value * exportScale, height: cutHeight.value * exportScale }
+        // #ifdef MP-DINGTALK
+        result.tempFilePath = res.filePath
+        // #endif
+        emit('confirm', result)
       },
-      proxy,
-    )
-  } catch (error) {
-    console.log(error)
-  }
+      complete: () => {
+        emit('update:modelValue', false)
+      }
+    },
+    proxy
+  )
 }
 
 /**
@@ -633,27 +636,29 @@ function preventTouchMove() {}
 defineExpose<ImgCropperExpose>({
   revertIsAnimation,
   setRoate,
-  resetImg,
+  resetImg
 })
 </script>
 
-<!-- #ifdef MP-WEIXIN || MP-QQ || H5  -->
+<!-- #ifdef MP-WEIXIN || MP-QQ  -->
 <script module="animation" lang="wxs">
-function setAnimation(newValue, oldValue, ownerInstance) {
+
+function setAnimation(newValue, oldValue, ownerInstance){
   if (newValue) {
-    var id = ownerInstance.setTimeout(function () {
-      ownerInstance.callMethod('revertIsAnimation', false)
-      ownerInstance.clearTimeout(id)
-    }, 300)
+    var id = ownerInstance.setTimeout(function() {
+    ownerInstance.callMethod('revertIsAnimation',{value:false})
+    ownerInstance.clearTimeout(id)
+  },300)
   }
+
 }
 
-module.exports = {
-  setAnimation: setAnimation,
+module.exports= {
+  setAnimation:setAnimation,
 }
 </script>
 <!-- #endif -->
 
 <style lang="scss" scoped>
-@import './index';
+@import './index.scss';
 </style>

package/components/wd-index-anchor/index.scss

@@ -1,16 +1,17 @@
-@import './../common/abstracts/_mixin';
-@import './../common/abstracts/variable';
+@import "./../common/abstracts/_mixin.scss";
+@import "./../common/abstracts/variable.scss";
 
 .wot-theme-dark {
   @include b(index-anchor) {
-    color: $-color-white;
     background-color: $-color-gray-8;
+    color: $-color-white;
   }
 }
 
 // #ifdef MP-DINGTALK
 @include b(index-anchor-ding) {
-  @include when(sticky) {
+  
+  @include when(sticky){
     position: sticky;
     top: 0;
     left: 0;
@@ -20,12 +21,12 @@
 // #endif
 
 @include b(index-anchor) {
+  background-color: $-color-gray-2;
   padding: 10px;
   font-size: 14px;
   color: $-color-title;
-  background-color: $-color-gray-2;
 
-  @include when(sticky) {
+  @include when(sticky){
     position: sticky;
     top: 0;
     left: 0;

package/components/wd-index-anchor/type.ts

@@ -1,9 +1,9 @@
 import type { ExtractPropTypes } from 'vue'
-import { baseProps, makeRequiredProp, makeStringProp } from '../common/props'
+import { baseProps, makeRequiredProp } from '../common/props'
 
 export const indexAnchorProps = {
   ...baseProps,
-  index: makeRequiredProp([String, Number]),
+  index: makeRequiredProp([String, Number])
 }
 
 export type IndexAnchorProps = ExtractPropTypes<typeof indexAnchorProps>

package/components/wd-index-anchor/wd-index-anchor.vue

@@ -2,11 +2,7 @@
   <!-- #ifdef MP-DINGTALK -->
   <view :class="`wd-index-anchor-ding ${isSticky ? 'is-sticky' : ''}`">
     <!-- #endif -->
-    <view
-      :class="`wd-index-anchor ${isSticky ? 'is-sticky' : ''} ${customClass}`"
-      :style="customStyle"
-      :id="indexAnchorId"
-    >
+    <view :class="`wd-index-anchor ${isSticky ? 'is-sticky' : ''} ${customClass}`" :style="customStyle" :id="indexAnchorId">
       <slot>
         {{ index }}
       </slot>
@@ -46,13 +42,11 @@ function getInfo() {
 }
 
 onMounted(() => {
-  setTimeout(() => {
-    getInfo()
-  }, 200)
+  getInfo()
 })
 
 defineExpose({
-  top,
+  top
 })
 </script>
 

package/components/wd-index-bar/index.scss

@@ -1,5 +1,5 @@
-@import './../common/abstracts/_mixin';
-@import './../common/abstracts/variable';
+@import "./../common/abstracts/_mixin.scss";
+@import "./../common/abstracts/variable.scss";
 
 .wot-theme-dark {
   @include b(index-bar) {
@@ -27,10 +27,10 @@
   }
 
   @include e(index) {
-    padding: 4px 6px;
-    font-size: 20rpx;
+    font-size: 12px;
     font-weight: $-fw-medium;
-    color: $-color-theme;
+    color: $-color-title;
+    padding: 4px 6px;
 
     @include when(active) {
       color: $-color-theme;

package/components/wd-index-bar/type.ts

@@ -1,4 +1,5 @@
-import type { InjectionKey, ExtractPropTypes } from 'vue'
+import type { InjectionKey } from 'vue'
+import type { ExtractPropTypes } from 'vue'
 import { makeBooleanProp } from '../common/props'
 
 export type AnchorIndex = number | string
@@ -7,7 +8,7 @@ export const indexBarProps = {
   /**
    * @description 索引是否吸顶
    */
-  sticky: makeBooleanProp(false),
+  sticky: makeBooleanProp(false)
 }
 
 export type IndexBarProps = ExtractPropTypes<typeof indexBarProps>