hy-app 0.4.9 → 0.4.11

package/components/hy-empty/hy-empty.vue

@@ -65,7 +65,6 @@ const props = defineProps({
   show: {
     type: Boolean,
     default: true,
-    required: true,
   },
   /**
    * 缺省页内容

package/components/hy-empty/icon.ts

@@ -1,6 +1,6 @@
 import type { IEmptyIcon } from "./typing";
 
-const url = "https://registry.npmmirror.com/wot-design-uni-assets/1.0.4/files/";
+const url = "https://hy-design-uni.oss-cn-hangzhou.aliyuncs.com/image/";
 
 const emptyIcon: IEmptyIcon = {
   content: {
@@ -13,7 +13,7 @@ const emptyIcon: IEmptyIcon = {
   },
   address: {
     desc: "没有收货地址",
-    icon: url + "png",
+    icon: url + "address.png",
   },
   network: {
     desc: "没有网络",
@@ -21,19 +21,19 @@ const emptyIcon: IEmptyIcon = {
   },
   order: {
     desc: "订单为空",
-    icon: url + "png",
+    icon: url + "order.png",
   },
   coupon: {
     desc: "没有优惠券",
-    icon: url + "png",
+    icon: url + "coupon.png",
   },
-  favor: {
+  collect: {
     desc: "暂无收藏",
     icon: url + "collect.png",
   },
   history: {
     desc: "无历史记录",
-    icon: url + "png",
+    icon: url + "history.png",
   },
   message: {
     desc: "消息列表为空",
@@ -45,7 +45,27 @@ const emptyIcon: IEmptyIcon = {
   },
   integral: {
     desc: "暂无积分",
-    icon: url + "halo.png",
+    icon: url + "integral.png",
+  },
+  card: {
+    desc: "暂无银行卡",
+    icon: url + "card.png",
+  },
+  notification: {
+    desc: "暂无通知",
+    icon: url + "notification.png",
+  },
+  shop: {
+    desc: "暂无购物车",
+    icon: url + "shop.png",
+  },
+  activity: {
+    desc: "暂无活动",
+    icon: url + "activity.png",
+  },
+  loading: {
+    desc: "加载中",
+    icon: url + "loading.png",
   },
 };
 

package/components/hy-grid/hy-grid.vue

@@ -151,8 +151,8 @@ const itemStyle = computed<CSSProperties>(() => {
 /**
  * @description 点击事件
  * */
-const childClick = (name: string | Record<string, any>) => {
-  emit("click", name);
+const childClick = (temp: string | Record<string, any>) => {
+  emit("click", temp);
 };
 </script>
 

package/components/hy-image/hy-image.vue

@@ -1,5 +1,5 @@
 <template>
-  <HyTransition
+  <hy-transition
     mode="fade"
     :show="show"
     :style="transStyle"
@@ -24,6 +24,7 @@
           height: addUnit(height),
           borderRadius: shape == 'circle' ? '1000px' : addUnit(radius),
         }"
+        referrerpolicy="no-referrer"
       ></image>
       <view
         v-if="showLoading && loading"
@@ -35,9 +36,10 @@
           height: addUnit(height),
         }"
       >
-        <slot name="loading">
-          <HyLoading :name="loadingIcon"></HyLoading>
-        </slot>
+        <slot v-if="$slots.loading" name="loading"></slot>
+        <template v-else>
+          <hy-loading :name="loadingIcon"></hy-loading>
+        </template>
       </view>
       <view
         v-if="showError && isError && !loading"
@@ -47,11 +49,11 @@
         }"
       >
         <slot name="error">
-          <HyIcon :name="errorIcon" size="30"></HyIcon>
+          <hy-icon :name="errorIcon" size="30"></hy-icon>
         </slot>
       </view>
     </view>
-  </HyTransition>
+  </hy-transition>
 </template>
 
 <script lang="ts">

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

@@ -1,11 +1,17 @@
 <template>
   <view class="hy-qrcode" @longpress="onLongPress">
-    <view class="hy-qrcode__content" @click="preview">
+    <view class="hy-qrcode__content">
       <!-- #ifndef APP-NVUE -->
+      <hy-image
+        :src="result"
+        :width="size"
+        :height="size"
+        @click="preview"
+      ></hy-image>
       <canvas
         class="hy-qrcode__content--canvas"
         :id="cid"
-        :canvas-id="cid"
+        type="2d"
         :style="{ width: addUnit(size), height: addUnit(size) }"
       />
       <!-- #endif -->
@@ -14,7 +20,7 @@
         class="hy-qrcode__content--loading"
         :style="{ width: addUnit(size), height: addUnit(size) }"
       >
-        <HyLoading></HyLoading>
+        <hy-loading :text="loadingText" direction="column" />
       </view>
     </view>
   </view>
@@ -32,12 +38,13 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { getCurrentInstance, ref, onMounted } from "vue";
+import { getCurrentInstance, ref, watch, nextTick } from "vue";
 import type { IQrcodeEmits } from "./typing";
 import QRCode from "./qrcode.js";
 import { addUnit, error } from "../../libs";
 // 组件
 import HyLoading from "../hy-loading/hy-loading.vue";
+import HyImage from "../hy-image/hy-image.vue";
 
 /**
  * 根据提供的字符串前端JS生成二维码展示
@@ -104,7 +111,7 @@ const props = defineProps({
   /** 加载中提示语 */
   loadingText: {
     type: String,
-    default: "二维码生成中",
+    default: "二维码生成中...",
   },
   /** 是否预览 */
   allowPreview: {
@@ -115,17 +122,12 @@ const props = defineProps({
 const emit = defineEmits<IQrcodeEmits>();
 
 const instance = getCurrentInstance();
-const loading = ref(false);
+const loading = ref(true);
 const qrcode = ref("");
 const result = ref("");
 
-onMounted(() => {
-  initQrCode();
-});
-
 const initQrCode = () => {
   if (props.text) {
-    loading.value = true;
     qrcode.value = new QRCode({
       context: instance, // 上下文环境
       canvasId: props.cid, // canvas-id
@@ -150,6 +152,17 @@ const initQrCode = () => {
   }
 };
 
+// 判断是否显示二维码
+watch(
+  () => props.show,
+  (newValue) => {
+    if (newValue) {
+      nextTick(() => initQrCode());
+    }
+  },
+  { immediate: true },
+);
+
 const _result = (res: any) => {
   loading.value = false;
   result.value = res;

package/components/hy-qrcode/index.scss

@@ -5,12 +5,13 @@
   @include e(content) {
     position: relative;
 
-    //@include m(canvas) {
-    //  position: fixed;
-    //  top: -99999rpx;
-    //  left: -99999rpx;
-    //  z-index: -99999;
-    //}
+    @include m(canvas) {
+      position: fixed;
+      top: -99999rpx;
+      left: -99999rpx;
+      z-index: -99999;
+      overflow: hidden;
+    }
 
     @include m(loading) {
       display: flex;

package/components/hy-qrcode/qrcode.js

@@ -1176,6 +1176,108 @@ 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) {
@@ -1184,6 +1286,38 @@ 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-search/hy-search.vue

@@ -17,10 +17,11 @@
         borderColor: borderColor,
       }"
     >
-      <template v-if="$slots.label || label">
-        <slot name="label">
-          <text class="hy-search__content__label">{{ label }}</text>
-        </slot>
+      <template>
+        <slot v-if="$slots.label" name="label"></slot>
+        <text v-else-if="label" class="hy-search__content__label">{{
+          label
+        }}</text>
       </template>
       <view class="hy-search__content__icon" v-if="searchIcon">
         <HyIcon
@@ -50,7 +51,10 @@
         placeholder-class="hy-search__content__input--placeholder"
         :placeholder="placeholder"
         :placeholder-style="`color: ${placeholderColor}`"
-        class="hy-search__content__input"
+        :class="[
+          'hy-search__content__input',
+          disabled && 'hy-search__content__input--disabled',
+        ]"
         type="text"
         :always-embed="true"
         :style="[
@@ -213,7 +217,10 @@ const props = defineProps({
     default: "",
   },
   /** 输入框左边的图标属性集合，可以为图标名称或图片路径 */
-  searchIcon: [Boolean, Object] as PropType<HyIconProps | boolean>,
+  searchIcon: {
+    type: [Boolean, Object] as PropType<HyIconProps | boolean>,
+    default: { name: IconConfig.SEARCH },
+  },
   /** 组件与其他上下左右之间的距离，带单位的字符串形式，如"30px" */
   margin: {
     type: [String, Number],

package/components/hy-search/index.scss

@@ -59,6 +59,10 @@ $hy-search-close-size: 20px !default;
       color: $hy-text-color;
       background-color: $hy-background--empty;
 
+      @include m(disabled) {
+        color: $hy-text-color--disabled;
+      }
+
       @include m(placeholder) {
         font-size: 25rpx;
         color: $hy-text-color--placeholder;