hy-app 0.5.3 → 0.5.4

package/components/hy-avatar/hy-avatar.vue

@@ -1,6 +1,7 @@
 <template>
     <view class="hy-avatar" :class="avatarClass" :style="avatarStyle" @tap="clickHandler">
-        <slot>
+        <slot v-if="$slots.default"></slot>
+        <template v-else>
             <!-- #ifdef MP-WEIXIN || MP-QQ || MP-BAIDU  -->
             <open-data
                 v-if="mpAvatar && allowMp"
@@ -16,7 +17,7 @@
             <!-- #ifndef MP-WEIXIN && MP-QQ && MP-BAIDU  -->
             <template v-if="mpAvatar && allowMp"></template>
             <!-- #endif -->
-            <HyIcon v-else-if="icon" :name="icon" :size="fontSize" :color="color"></HyIcon>
+            <hy-icon v-else-if="icon" :name="icon" :size="fontSize" :color="color"></hy-icon>
             <text
                 v-else-if="text"
                 :style="{
@@ -36,7 +37,7 @@
                 :mode="mode"
                 @error="errorHandler"
             ></image>
-        </slot>
+        </template>
     </view>
 </template>
 

package/components/hy-badge/hy-badge.vue

@@ -47,9 +47,9 @@ const emit = defineEmits<IBadgeEmit>()
  * @description 整个组件的样式
  * */
 const badgeStyle = computed<CSSProperties>(() => {
-    const style: CSSProperties = {}
-    if (props.color) {
-        style.color = props.color
+    const style: CSSProperties = {
+        zIndex: props.zIndex,
+        color: props.color
     }
     if (props.bgColor && !props.inverted) {
         style.backgroundColor = props.bgColor

package/components/hy-badge/index.scss

@@ -12,7 +12,6 @@ $hy-badge-text-font-size: 11px !default;
   line-height: $hy-badge-text-font-size;
   text-align: center;
   font-size: $hy-badge-text-font-size;
-  z-index: 999;
 
   @include m(dot) {
     height: $hy-badge-dot-size;

package/components/hy-badge/props.ts

@@ -8,7 +8,7 @@ const badgeProps = {
     },
     /** 显示的内容 */
     value: {
-        type: Number,
+        type: [String, Number],
         default: 0
     },
     /** 是否显示 */
@@ -21,6 +21,11 @@ const badgeProps = {
         type: Number,
         default: 999
     },
+    /** 层级 */
+    zIndex: {
+        type: Number,
+        default: 999
+    },
     /**
      * 主题类型
      * @values error,warning,success,primary,info

package/components/hy-coupon/index.scss

@@ -9,8 +9,8 @@ $hy-box-width: 180rpx;
 
   /* 已使用/过期状态的置灰效果 */
   @include m(disabled) {
-    filter: grayscale(1);
-    opacity: 0.7;
+    filter: grayscale(0.4) !important;
+    opacity: 0.6;
   }
 
   /* 优惠券卡片主体 */
@@ -34,6 +34,11 @@ $hy-box-width: 180rpx;
             no-repeat,
             radial-gradient(circle at $hy-box-width bottom, transparent 15rpx, #ff7d00 0) bottom / 100%
             51px no-repeat;
+    //background:
+    //        radial-gradient(circle at left center, transparent 15rpx, #ff7d00 0) left center / 30rpx 100% no-repeat,
+    //        radial-gradient(circle at right center, transparent 15rpx, #ff7d00 0) right center / 30rpx 100% no-repeat;
+
+
   }
   @include m(discount) {
     background:

package/components/hy-coupon/props.ts

@@ -7,12 +7,15 @@ const couponProps = {
         type: String,
         default: ''
     },
-    /** 优惠券开始时间 */
+    /**
+     * 优惠券类型：moneyOff：满减券，discount：折扣券，fixedAmount：无门槛券
+     * @values moneyOff,discount,fixedAmount
+     * */
     type: {
         type: String,
         default: ''
     },
-    /** 优惠券开始时间 */
+    /** 金额底部优惠券类型文字描述 */
     typeText: {
         type: String,
         default: ''
@@ -27,7 +30,7 @@ const couponProps = {
         type: Array,
         default: () => ['']
     },
-    /** 优惠券描述 */
+    /** 优惠券描述备注 */
     description: {
         type: String,
         default: ''
@@ -74,7 +77,7 @@ const couponProps = {
     },
     /**
      * 按钮类型
-     * @values text,button
+     * @values text,button,none
      * */
     btnMode: {
         type: String,

package/components/hy-coupon/typing.d.ts

@@ -2,7 +2,7 @@ import type { CSSProperties } from 'vue'
 
 export type CouponStatus = 'unused' | 'used' | 'expired' | 'redeemed'
 /**
- * moneyOff，discount：折扣券，fixedAmount，
+ * moneyOff：满减券，discount：折扣券，fixedAmount：无门槛券
  * */
 export type CouponType = 'moneyOff' | 'discount' | 'fixedAmount'
 

package/components/hy-datetime-picker/props.ts

@@ -113,9 +113,7 @@ const datetimePickerProps = {
     /** 各列的默认索引 */
     defaultIndex: {
         type: Array,
-        default() {
-            return []
-        }
+        default: () => []
     },
     /** 输入框是否显示边框 */
     hasInput: {

package/components/hy-folding-panel/props.ts

@@ -37,6 +37,6 @@ const foldingPanelProps = {
         type: String as PropType<HyApp.SizeType>,
         default: 'medium'
     }
-}
+} as const
 
 export default foldingPanelProps

package/components/hy-folding-panel/typing.d.ts

@@ -1,41 +1,3 @@
-import type { Ref, ToRefs } from 'vue'
-
-// 折叠面板组组件的Props接口
-export interface HyFoldingPanelGroupProps {
-    /**
-     * 当前激活的面板索引，支持v-model
-     */
-    modelValue?: number
-    /**
-     * 是否手风琴模式，默认false
-     */
-    accordion?: boolean
-    /**
-     * 是否禁用整个折叠面板组
-     */
-    disabled?: boolean
-    /**
-     * 是否显示边框，默认true
-     */
-    border?: boolean
-    /**
-     * 面板大小 large, medium, small
-     */
-    size?: HyApp.SizeType
-}
-
-// 父组件提供给子组件的配置接口
-export interface HyFoldingPanelGroupConfig extends ToRefs<HyFoldingPanelGroupProps> {
-    /**
-     * 当前激活的索引
-     */
-    activeIndex: Ref<number | string>
-    /**
-     * 更新激活索引的方法
-     */
-    updateActiveIndex: (index: number | string) => void
-}
-
 // 折叠面板组组件的事件接口
 export interface IFoldingPanelGroupEmits {
     /**

package/components/hy-folding-panel-item/hy-folding-panel-item.vue

@@ -67,8 +67,7 @@ export default {
 
 <script setup lang="ts">
 import { ref, computed, inject, onMounted } from 'vue'
-import type { IFoldingPanelItemEmits } from './typing'
-import type { HyFoldingPanelGroupConfig } from '../hy-folding-panel/typing'
+import type { IFoldingPanelConfig, IFoldingPanelItemEmits } from './typing'
 import { addUnit, IconConfig } from '../../libs'
 import foldingPanelItemProps from './props'
 // 组件
@@ -86,7 +85,7 @@ const props = defineProps(foldingPanelItemProps)
 const emit = defineEmits<IFoldingPanelItemEmits>()
 
 // 尝试从父组件注入配置
-const groupConfig = inject<HyFoldingPanelGroupConfig>('hy-folding-panel')
+const groupConfig = inject<IFoldingPanelConfig>('hy-folding-panel')
 
 // 内部展开状态
 const expanded = ref(props.defaultOpen)

package/components/hy-folding-panel-item/typing.d.ts

@@ -1,3 +1,17 @@
+import foldingPanelProps from '../hy-folding-panel/props'
+import type { ExtractPropTypes, ToRefs } from 'vue'
+
+export interface IFoldingPanelConfig extends ToRefs<ExtractPropTypes<typeof foldingPanelProps>> {
+    /**
+     * 当前激活的索引
+     */
+    activeIndex: Ref<number | string>
+    /**
+     * 更新激活索引的方法
+     */
+    updateActiveIndex: (index: number | string) => void
+}
+
 // 折叠面板项组件的事件接口
 export interface IFoldingPanelItemEmits {
     /**

package/components/hy-icon/hy-icon.vue

@@ -7,12 +7,7 @@
             :mode="imgMode"
             :style="[imgStyle, customStyle]"
         ></image>
-        <text
-            v-else
-            class="hy-icon__icon"
-            :class="uClasses"
-            :style="[iconStyle, customStyle]"
-        ></text>
+        <text v-else :class="uClasses" :style="[iconStyle, customStyle]"></text>
         <!-- 这里进行空字符串判断，如果仅仅是v-if="label"，可能会出现传递0的时候，结果也无法显示 -->
         <text
             v-if="label"
@@ -58,9 +53,9 @@ const emit = defineEmits<IIconEmits>()
 
 const uClasses = computed(() => {
     let classes: string | string[] = [
+        'hy-icon__icon',
         'iconfont',
-        `${props.customPrefix}-${props.name}`,
-        props.customPrefix
+        `${props.customPrefix}-${props.name}`
     ]
     if (props.isRotate) classes.push('hy-rotate')
     if (props.color)

package/components/hy-list/props.ts

@@ -3,7 +3,7 @@ import type { PropType } from 'vue'
 const listProps = {
     /** 数据列表 */
     list: {
-        type: Array as PropType<(string | Record<string, any>)[]>,
+        type: Array,
         default: () => []
     },
     /** 容器高度，必须给个高度，否则加载全部数据 */

package/components/hy-notice-bar/typing.d.ts

@@ -66,6 +66,8 @@ export default interface HyNoticeBarProps {
 }
 
 export interface INoticeBarEmits {
+    /** 点击执行函数 */
     (e: 'click', index: number): void
+    /** 关闭组件执行函数 */
     (e: 'close'): void
 }

package/components/hy-popup/hy-popup.vue

@@ -19,7 +19,6 @@
         >
             <!-- @click.stop不能去除，去除会导致居中模式下点击内容区域触发关闭弹窗 -->
             <view class="hy-popup__content" :style="[contentStyle]">
-                <!--        <u-status-bar v-if="safeAreaInsetTop"></u-status-bar>-->
                 <slot></slot>
                 <view
                     v-if="closeable"

package/components/hy-qrcode/hy-qrcode.vue

@@ -6,7 +6,7 @@
             <canvas
                 class="hy-qrcode__content--canvas"
                 :id="cid"
-                :canvas-id="cid"
+                type="2d"
                 :style="{ width: addUnit(size), height: addUnit(size) }"
             />
             <!-- #endif -->
@@ -36,8 +36,7 @@ export default {
 import { getCurrentInstance, ref, watch, nextTick } from 'vue'
 import type { IQrcodeEmits } from './typing'
 import QRCode from './qrcode.js'
-import { addUnit, error } from '../../libs'
-import qrCodeProps from './props'
+import { addUnit, error, random } from '../../libs'
 // 组件
 import HyLoading from '../hy-loading/hy-loading.vue'
 import HyImage from '../hy-image/hy-image.vue'
@@ -48,7 +47,73 @@ import HyImage from '../hy-image/hy-image.vue'
  */
 defineOptions({})
 
-const props = defineProps(qrCodeProps)
+// const props = withDefaults(defineProps<IProps>(), defaultProps)
+const props = defineProps({
+    /** 实例ID字符串(如果有多个二维码组件必须设置不一样的cid) */
+    cid: {
+        type: String,
+        default: 'hy-qrcode-canvas_' + random(1, 1000)
+    },
+    /** 二维码大小 */
+    size: {
+        type: Number,
+        default: 200
+    },
+    /** 二维码内容 */
+    text: String,
+    /** 是否显示二维码 */
+    show: {
+        type: Boolean,
+        default: true
+    },
+    /** 二维码背景色 */
+    background: {
+        type: String,
+        default: '#ffffff'
+    },
+    /** 二维码颜色 */
+    foreground: {
+        type: String,
+        default: '#000000'
+    },
+    /** 定位角点颜色 */
+    pdGround: {
+        type: String,
+        default: '#000000'
+    },
+    /** 是否是自定义组件 */
+    usingComponents: {
+        type: Boolean,
+        default: true
+    },
+    /** 容错级别 */
+    lv: {
+        type: Number,
+        default: 3
+    },
+    /** 二维码中间图标 */
+    icon: String,
+    /** 二维码中间图标大小 */
+    iconSize: {
+        type: Number,
+        default: 40
+    },
+    /** 显示加载状态 */
+    showLoading: {
+        type: Boolean,
+        default: true
+    },
+    /** 加载中提示语 */
+    loadingText: {
+        type: String,
+        default: '二维码生成中...'
+    },
+    /** 是否预览 */
+    allowPreview: {
+        type: Boolean,
+        default: false
+    }
+})
 const emit = defineEmits<IQrcodeEmits>()
 
 const instance = getCurrentInstance()
@@ -73,6 +138,7 @@ const initQrCode = () => {
             image: props.icon, // 二维码图标
             imageSize: props.iconSize, // 二维码图标大小
             cbResult: function (res: any) {
+                console.log(res)
                 // 生成二维码的回调
                 _result(res)
             }

package/components/hy-qrcode/index.scss

@@ -6,11 +6,10 @@
     position: relative;
 
     @include m(canvas) {
-      // 移除fixed定位，确保canvas在H5端能正确绘制
       position: fixed;
-      top: -99999rpx;
-      left: -99999rpx;
-      z-index: -99999;
+      // top: -99999rpx;
+      // left: -99999rpx;
+      // z-index: -99999;
       overflow: hidden;
     }
 

package/components/hy-qrcode/qrcode.js

@@ -1146,6 +1146,111 @@ let QRCode = {}
             }
             return options.foreground
         }
+        // 为2D Canvas添加辅助函数
+        function drawIconWithBackground(canvas, ctx, options, qrCodeAlg) {
+            // 在小程序中使用canvas.createImage()而不是wx.createImage()
+            const img = canvas.createImage()
+            img.src = options.image
+            img.onload = function () {
+                var ratioImgSize = options.imageSize || 40
+                var x = Number(((options.size - ratioImgSize) / 2).toFixed(2))
+                var y = Number(((options.size - ratioImgSize) / 2).toFixed(2))
+
+                // 绘制圆角矩形背景
+                drawRoundedRect2D(ctx, x, y, ratioImgSize, ratioImgSize, 2, options.background)
+
+                // 绘制图标
+                ctx.drawImage(img, x, y, ratioImgSize, ratioImgSize)
+
+                // 导出图片
+                exportCanvasImage(canvas, options)
+            }
+
+            // 添加错误处理
+            img.onerror = function (e) {
+                console.error('Failed to load QR code icon:', e)
+                // 即使图标加载失败也要导出二维码
+                exportCanvasImage(canvas, options)
+            }
+        }
+
+        function drawRoundedRect2D(ctx, x, y, width, height, r, fillColor) {
+            ctx.beginPath()
+            ctx.moveTo(x + r, y)
+            ctx.arcTo(x + width, y, x + width, y + r, r)
+            ctx.arcTo(x + width, y + height, x + width - r, y + height, r)
+            ctx.arcTo(x, y + height, x, y + height - r, r)
+            ctx.arcTo(x, y, x + r, y, r)
+            ctx.closePath()
+            ctx.fillStyle = fillColor
+            ctx.fill()
+        }
+
+        function exportCanvasImage(canvas, options) {
+            setTimeout(() => {
+                wx.canvasToTempFilePath(
+                    {
+                        canvas: canvas,
+                        quality: 1,
+                        success: function (res) {
+                            if (options.cbResult) {
+                                options.cbResult(res.tempFilePath)
+                            }
+                        },
+                        fail: function (res) {
+                            if (options.cbResult) {
+                                options.cbResult(res)
+                            }
+                        },
+                        complete: function () {
+                            uni.hideLoading()
+                        }
+                    },
+                    options.context
+                )
+            }, options.text.length + 100)
+        }
+
+        // 2D Canvas二维码绘制函数
+        function drawQRCode2D(canvas, ctx, options, qrCodeAlg) {
+            var count = qrCodeAlg.getModuleCount()
+            var ratioSize = options.size
+
+            // 清除画布
+            ctx.clearRect(0, 0, ratioSize, ratioSize)
+            // 设置背景色
+            ctx.fillStyle = options.background
+            ctx.fillRect(0, 0, ratioSize, ratioSize)
+
+            //计算每个点的长宽
+            var tileW = (ratioSize / count).toPrecision(4)
+            var tileH = (ratioSize / count).toPrecision(4)
+
+            //绘制二维码
+            for (var row = 0; row < count; row++) {
+                for (var col = 0; col < count; col++) {
+                    var w = Math.ceil((col + 1) * tileW) - Math.floor(col * tileW)
+                    var h = Math.ceil((row + 1) * tileW) - Math.floor(row * tileW)
+                    var foreground = getForeGround({
+                        row: row,
+                        col: col,
+                        count: count,
+                        options: options
+                    })
+                    ctx.fillStyle = qrCodeAlg.modules[row][col] ? foreground : options.background
+                    ctx.fillRect(Math.round(col * tileW), Math.round(row * tileH), w, h)
+                }
+            }
+
+            if (options.image) {
+                // 绘制中间图标
+                drawIconWithBackground(canvas, ctx, options, qrCodeAlg)
+            } else {
+                // 导出图片
+                exportCanvasImage(canvas, options)
+            }
+        }
+
         // 创建canvas
         let createCanvas = function (options) {
             if (options.showLoading) {
@@ -1154,6 +1259,39 @@ let QRCode = {}
                     mask: true
                 })
             }
+
+            // 尝试使用2D Canvas (小程序端)
+            try {
+                if (!options.nvueContext && typeof wx !== 'undefined' && wx.createSelectorQuery) {
+                    const query = wx.createSelectorQuery().in(options.context)
+                    query
+                        .select('#' + options.canvasId)
+                        .fields({ node: true, size: true })
+                        .exec((res) => {
+                            if (res[0] && res[0].node) {
+                                const canvas = res[0].node
+                                const ctx = canvas.getContext('2d')
+
+                                // 设置canvas尺寸
+                                const dpr = wx.getSystemInfoSync().pixelRatio
+                                canvas.width = options.size * dpr
+                                canvas.height = options.size * dpr
+                                ctx.scale(dpr, dpr)
+
+                                // 创建二维码算法实例
+                                var qrCodeAlg = new QRCodeAlg(options.text, options.correctLevel)
+
+                                // 使用2D Canvas绘制
+                                drawQRCode2D(canvas, ctx, options, qrCodeAlg)
+                                return
+                            }
+                        })
+                }
+            } catch (e) {
+                console.warn('2D Canvas initialization failed, falling back to legacy mode:', e)
+            }
+
+            // 回退到传统Canvas方式
             var ctx = ''
             if (options.nvueContext) {
                 ctx = options.nvueContext

package/components/hy-signature/hy-signature.vue

@@ -46,37 +46,39 @@
             >
             </slot>
             <template v-else>
-                <block v-if="enableHistory">
+                <hy-flex gap="12">
+                    <block v-if="enableHistory">
+                        <hy-button
+                            size="small"
+                            plain
+                            shape="circle"
+                            @click="revoke"
+                            :disabled="lines.length <= 0"
+                            :text="revokeText"
+                        ></hy-button>
+                        <hy-button
+                            size="small"
+                            plain
+                            shape="circle"
+                            @click="restore"
+                            :disabled="redoLines.length <= 0"
+                            :text="restoreText"
+                        ></hy-button>
+                    </block>
                     <hy-button
                         size="small"
                         plain
                         shape="circle"
-                        @click="revoke"
-                        :disabled="lines.length <= 0"
-                        :text="revokeText"
+                        @click="clear"
+                        :text="clearText"
                     ></hy-button>
                     <hy-button
                         size="small"
-                        plain
                         shape="circle"
-                        @click="restore"
-                        :disabled="redoLines.length <= 0"
-                        :text="restoreText"
+                        @click="confirmSignature"
+                        :text="confirmText"
                     ></hy-button>
-                </block>
-                <hy-button
-                    size="small"
-                    plain
-                    shape="circle"
-                    @click="clear"
-                    :text="clearText"
-                ></hy-button>
-                <hy-button
-                    size="small"
-                    shape="circle"
-                    @click="confirmSignature"
-                    :text="confirmText"
-                ></hy-button>
+                </hy-flex>
             </template>
         </view>
     </view>
@@ -105,6 +107,7 @@ import signatureProps from './props'
 
 // 组件
 import HyButton from '../hy-button/hy-button.vue'
+import HyFlex from '../hy-flex/hy-flex.vue'
 
 /**
  * 用于签名场景，基于 Canvas 实现的签名组件。提供了基础签名、历史记录、笔锋效果等功能。

package/components/hy-signature/index.scss

@@ -21,9 +21,5 @@
     margin-top: $hy-border-margin-padding-base;
     justify-content: flex-end;
     display: flex;
-
-    :deep(.hy-button) {
-      margin-left: $hy-border-margin-padding-base;
-    }
   }
 }