hy-app 0.4.5 → 0.4.7

package/components/hy-calendar/month.vue

@@ -384,7 +384,7 @@ export default {
     // 获取月份数据区域的宽度，因为nvue不支持百分比，所以无法通过css设置每个日期item的宽度
     getWrapperWidth() {
       // #ifndef APP-NVUE
-      getRect(".hy-calendar--month__wrapper").then((size) => {
+      getRect(".hy-calendar--month__wrapper", false, this).then((size) => {
         this.width = size.width;
       });
       // #endif
@@ -413,7 +413,7 @@ export default {
       // $uGetRect为uView自带的节点查询简化方法，详见文档介绍：https://ijry.github.io/uview-plus/js/getRect.html
       // 组件内部一般用this.$uGetRect，对外的为uni.$u.getRect，二者功能一致，名称不同
       return new Promise((resolve) => {
-        getRect(`.${el}`).then((size) => {
+        getRect(`.${el}`, false, this).then((size) => {
           resolve(size);
         });
       });

package/components/hy-list/hy-list.vue

@@ -3,7 +3,7 @@
     ref="hyVirtualContainer"
     @scroll="onScroll"
     @scrolltolower="scrollToLower"
-    :lower-threshold="showDivider ? 40 : 10"
+    :lower-threshold="showDivider ? 100 : 50"
     :scroll-y="true"
     scroll-with-animation
     class="hy-virtual-container"
@@ -60,7 +60,8 @@
       </template>
       <!--加载更多样式-->
     </view>
-    <!--    <HyDivider :text="load" v-if="showDivider"></HyDivider>-->
+    <slot v-if="$slots.footer" name="footer"></slot>
+    <hy-divider :text="load" v-else-if="showDivider"></hy-divider>
   </scroll-view>
 </template>
 
@@ -81,15 +82,16 @@ import {
   getCurrentInstance,
   nextTick,
   onMounted,
-  type PropType,
   reactive,
   ref,
   useSlots,
   watch,
 } from "vue";
-import type { CSSProperties } from "vue";
+import type { CSSProperties, PropType } from "vue";
 import { addUnit, getPx, getRect } from "../../libs";
 import type { IListEmits } from "./typing";
+// 组件
+import HyDivider from "@/package/components/hy-divider/hy-divider.vue";
 
 /**
  * 实现只展示可视内容的dom，减少dom创建，优化滚动性能

package/components/hy-loading/hy-loading.vue

@@ -1,9 +1,8 @@
 <template>
   <view
-    class="hy-loading-icon"
-    :style="customStyle"
-    :class="[vertical && 'hy-loading-icon__vertical']"
     v-if="show"
+    :style="customStyle"
+    :class="['hy-loading-icon', `hy-loading-icon__${direction}`]"
   >
     <view
       v-if="!webviewHide"
@@ -34,7 +33,7 @@
     </view>
     <text
       v-if="text"
-      class="hy-loading-icon__text"
+      :class="['hy-loading-icon__text', `hy-loading-icon__${direction}--text`]"
       :style="{
         fontSize: addUnit(textSize),
         color: textColor,
@@ -84,10 +83,13 @@ const props = defineProps({
     type: String,
     default: "#909399",
   },
-  /** 文字和图标是否垂直排列 */
-  vertical: {
-    type: Boolean,
-    default: false,
+  /**
+   * 文字和图标是否垂直排列
+   * @values row,column
+   * */
+  direction: {
+    type: String as PropType<HyApp.DirectionType>,
+    default: "row",
   },
   /** 模式选择，见官网说明 */
   mode: {

package/components/hy-loading/index.scss

@@ -3,13 +3,11 @@
 
 
 @include b(loading-icon) {
-  @include flex(row);
   align-items: center;
   justify-content: center;
   color: #c8c9cc;
 
   @include e(text) {
-    margin-left: 4px;
     color: $hy-text-color--grey;
     font-size: 14px;
     line-height: 20px;
@@ -37,8 +35,20 @@
     }
   }
 
-  @include m(vertical) {
-    flex-direction: column;
+  @include e(row) {
+    @include flex(row);
+
+    @include m(text) {
+      margin-left: $hy-border-margin-padding-base;
+    }
+  }
+
+  @include e(column) {
+    @include flex(column);
+
+    @include m(text) {
+      margin-top: $hy-border-margin-padding-base;
+    }
   }
 }
 
@@ -60,7 +70,6 @@
   }
 
   @include e(vertical, text) {
-    margin: 6px 0 0;
     color: $hy-text-color--grey;
   }
 

package/components/hy-navbar/hy-navbar.vue

@@ -7,79 +7,83 @@
         height: addUnit(getPx(height) + statusBarHeight),
       }"
     ></view>
-    <view :class="[fixed && 'hy-navbar__fixed']">
+    <view
+      :class="[fixed && 'hy-navbar__fixed']"
+      :style="{ backgroundColor: bgColor }"
+    >
       <HyStatusBar v-if="safeAreaInsetTop" :bgColor="bgColor"></HyStatusBar>
       <view
         :class="[border && 'hy-border__bottom', 'hy-navbar__content']"
         :style="{
           height: addUnit(height),
-          backgroundColor: bgColor,
         }"
       >
+        <!-- 左边 -->
+        <slot v-if="$slots.left" name="left"></slot>
         <view
+          v-else
           class="hy-navbar__content__left"
           hover-class="hy-navbar__content__left--hover"
           hover-start-time="150"
           @tap="leftClick"
         >
-          <slot name="left">
-            <HyIcon
-              v-if="leftIcon"
-              :name="leftIcon"
-              :size="leftIconSize"
-              :color="leftIconColor"
-            ></HyIcon>
-            <text
-              v-if="leftText"
-              :style="{
-                color: leftIconColor,
-              }"
-              class="hy-navbar__content__left--text"
-            >
-              {{ leftText }}
-            </text>
-          </slot>
+          <HyIcon
+            v-if="leftIcon"
+            :name="leftIcon"
+            :size="leftIconSize"
+            :color="leftIconColor"
+          ></HyIcon>
+          <text
+            v-if="leftText"
+            :style="{
+              color: leftIconColor,
+            }"
+            class="hy-navbar__content__left--text"
+          >
+            {{ leftText }}
+          </text>
         </view>
-        <slot name="center">
-          <view class="hy-navbar__content__center">
-            <text
-              class="hy-navbar__content__center--title"
-              :style="[
-                {
-                  width: addUnit(titleWidth),
-                  color: titleColor,
-                },
-                titleStyle,
-              ]"
-            >
-              {{ title }}
-            </text>
-            <text
-              class="hy-navbar__content__center--sub"
-              :style="[
-                {
-                  width: addUnit(titleWidth),
-                  color: titleColor,
-                },
-                titleStyle,
-              ]"
-            >
-              {{ sub }}
-            </text>
-          </view>
-        </slot>
-        <view
-          class="hy-navbar__content__right"
-          v-if="$slots.right || rightIcon || rightText"
-          @tap="rightClick"
-        >
-          <slot name="right">
-            <HyIcon v-if="rightIcon" :name="rightIcon" size="20"></HyIcon>
-            <text v-if="rightText" class="hy-navbar__content__right--text">{{
-              rightText
-            }}</text>
-          </slot>
+        <!-- 左边 -->
+
+        <!-- 中间 -->
+        <slot v-if="$slots.center" name="center"></slot>
+        <view v-else class="hy-navbar__content__center">
+          <text
+            class="hy-navbar__content__center--title"
+            :style="[
+              {
+                width: addUnit(titleWidth),
+                color: titleColor,
+              },
+              titleStyle,
+            ]"
+          >
+            {{ title }}
+          </text>
+          <text
+            class="hy-navbar__content__center--sub"
+            :style="[
+              {
+                width: addUnit(titleWidth),
+                color: titleColor,
+              },
+              titleStyle,
+            ]"
+          >
+            {{ sub }}
+          </text>
+        </view>
+        <!-- 中间 -->
+
+        <!-- 右边 -->
+        <slot v-if="$slots.right" name="right"></slot>
+        <view class="hy-navbar__content__right" v-else @tap="rightClick">
+          <HyIcon v-if="rightIcon" :name="rightIcon" size="20"></HyIcon>
+          <text v-if="rightText" class="hy-navbar__content__right--text">{{
+            rightText
+          }}</text>
         </view>
+        <!-- 右边 -->
       </view>
     </view>
   </view>

package/components/hy-rate/hy-rate.vue

@@ -252,6 +252,7 @@ const clickHandler = (e: TouchEvent) => {
   //   return;
   // }
   e.stopPropagation();
+  console.log(e, "微信");
   let x = 0;
   // #ifndef APP-NVUE || MP-ALIPAY
   x = e.detail.x;

package/components/hy-search/hy-search.vue

@@ -210,7 +210,7 @@ const props = defineProps({
   /** placeholder的颜色 */
   placeholderColor: {
     type: String,
-    default: "#909399",
+    default: "",
   },
   /** 输入框左边的图标属性集合，可以为图标名称或图片路径 */
   searchIcon: [Boolean, Object] as PropType<HyIconProps | boolean>,

package/components/hy-search/index.scss

@@ -62,6 +62,7 @@ $hy-search-close-size: 20px !default;
       @include m(placeholder) {
         font-size: 25rpx;
         color: $hy-text-color--placeholder;
+        line-height: 30rpx;
       }
     }
   }

package/components/hy-submit-bar/hy-submit-bar.vue

@@ -4,38 +4,39 @@
     :style="submitBarStyle"
   >
     <view class="hy-submit-bar__left">
-      <slot name="left">
-        <view
-          class="hy-submit-bar__left--item"
-          v-for="(item, i) in menus"
-          :key="i"
-          @tap="clickMenuFn(i)"
-        >
-          <HyIcon
-            :name="item.icon"
-            :label="item.text"
-            :color="iconColor"
-            :label-color="iconLabelColor"
-            labelPos="bottom"
-            space="7"
-            :size="20"
-          ></HyIcon>
-          <HyBadge
-            :value="item?.badge?.value"
-            :absolute="true"
-            :offset="item?.badge?.offset || [-5, 20]"
-            :isDot="item?.badge?.isDot"
-            :type="item?.badge?.type"
-            :color="item?.badge?.color"
-            :shape="item?.badge?.shape"
-            :numberType="item?.badge?.numberType"
-            :inverted="item?.badge?.inverted"
-          ></HyBadge>
-        </view>
-      </slot>
+      <slot v-if="$slots.left" name="left"></slot>
+      <view
+        v-else-if="menus.length"
+        class="hy-submit-bar__left--item"
+        v-for="(item, i) in menus"
+        :key="i"
+        @tap="clickMenuFn(i)"
+      >
+        <HyIcon
+          :name="item.icon"
+          :label="item.text"
+          :color="iconColor"
+          :label-color="iconLabelColor"
+          labelPos="bottom"
+          space="7"
+          :size="20"
+        ></HyIcon>
+        <HyBadge
+          :value="item?.badge?.value"
+          :absolute="true"
+          :offset="item?.badge?.offset || [-5, 20]"
+          :isDot="item?.badge?.isDot"
+          :type="item?.badge?.type"
+          :color="item?.badge?.color"
+          :shape="item?.badge?.shape"
+          :numberType="item?.badge?.numberType"
+          :inverted="item?.badge?.inverted"
+        ></HyBadge>
+      </view>
     </view>
     <view class="hy-submit-bar__right">
-      <slot name="right">
+      <slot v-if="$slots.right" name="right"></slot>
+      <template v-else>
         <view
           class="hy-submit-bar__right--button"
           v-if="showLeftBtn"
@@ -64,7 +65,7 @@
           ></HyLoading>
           {{ rightBtnText }}
         </view>
-      </slot>
+      </template>
     </view>
   </view>
 </template>
@@ -169,6 +170,11 @@ const props = defineProps({
     type: String,
     default: "circle",
   },
+  /** 层级 */
+  zIndex: {
+    type: [Number, String],
+    default: 999,
+  },
   /** 定义需要用到的外部样式 */
   customStyle: {
     type: Object as PropType<CSSProperties>,
@@ -186,6 +192,7 @@ const submitBarStyle = computed(() => {
   const style: CSSProperties = {
     bottom: 0,
     left: 0,
+    zIndex: props.zIndex,
   };
   if (props.fixed) style.position = "fixed";
   return Object.assign(style, props.customStyle);

package/components/hy-toast/hy-toast.vue

@@ -174,6 +174,7 @@ const show = (options: ToastOptions) => {
 
 // 隐藏toast组件，由父组件通过this.$refs.xxx.hide()形式调用
 const hide = () => {
+  config.loading = false;
   clearTimer();
 };
 /**

package/components/hy-tooltip/hy-tooltip.vue

@@ -1,9 +1,5 @@
 <template>
-  <view
-    :class="['hy-tooltip', customClass]"
-    :style="customStyle"
-    @click.stop="closeHandler"
-  >
+  <view :class="['hy-tooltip', customClass]" :style="customStyle">
     <HyOverlay
       :show="showTooltip && tooltipTop !== -10000 && overlay"
       :customStyle="{ backgroundColor: 'rgba(0, 0, 0, 0)' }"
@@ -35,7 +31,7 @@
             v-if="showCopy"
             class="hy-tooltip__container--list__btn"
             hover-class="hy-tooltip__container--list__btn--hover"
-            @tap="setClipboardData"
+            @tap.stop="setClipboardData"
           >
             <text class="hy-tooltip__container--list__btn--text">复制</text>
           </view>

package/components/hy-tooltip/index.scss

@@ -16,7 +16,7 @@ $hy-tooltip--background-color: rgb(50, 50, 51);
     background-clip: padding-box;
     text-align: center;
     min-height: 36px;
-    z-index: $hy-tooltip--z-index;
+    z-index: 99999;
     transition: opacity 0.2s;
     box-shadow: $hy-box-shadow;
     border-radius: $hy-border-radius-sm;
@@ -67,7 +67,6 @@ $hy-tooltip--background-color: rgb(50, 50, 51);
       padding: 0;
       @include flex(row);
       align-items: center;
-      z-index: 999;
 
       @include e(btn) {
         padding: $hy-border-margin-padding-base;

package/components/hy-watermark/hy-watermark.vue

@@ -532,11 +532,12 @@ function drawTextOffScreen(
   color: string,
   canvas: HTMLCanvasElement,
 ) {
+  console.log(fontSize, "离屏");
   ctx.textBaseline = "middle";
   ctx.textAlign = "center";
   ctx.translate(contentWidth / 2, contentWidth / 2);
   ctx.rotate((Math.PI / 180) * rotate);
-  ctx.font = `${fontStyle} normal ${fontWeight} ${fontSize}px ${fontFamily}`;
+  ctx.font = `${fontStyle} normal ${fontWeight} ${fontSize}px/${contentHeight}px ${fontFamily}`;
   ctx.fillStyle = color;
   ctx.fillText(content, 0, 0);
   ctx.restore();

package/libs/api/http.ts

@@ -1,7 +1,7 @@
 import type { HttpRequestConfig } from "../../libs/typing";
 import { objectToUrlParams } from "../../libs";
 
-export default class Http {
+export class Http {
   /**
    * 默认请求配置
    */

package/libs/composables/useToast.ts

@@ -14,17 +14,17 @@ let toastInstance: any = null;
  */
 export const useToast = () => {
   const show = (msg: string, opt?: ToastOptions) =>
-    openToast({ message: msg, icon: false, ...opt });
+    openToast({ message: msg, icon: false, type: "", ...opt });
   const info = (msg: string, opt?: ToastOptions) =>
-    openToast({ message: msg, type: "info", ...opt });
+    openToast({ message: msg, type: "info", icon: true, ...opt });
   const success = (msg: string, opt?: ToastOptions) =>
-    openToast({ message: msg, type: "success", ...opt });
+    openToast({ message: msg, type: "success", icon: true, ...opt });
   const error = (msg: string, opt?: ToastOptions) =>
-    openToast({ message: msg, type: "error", ...opt });
+    openToast({ message: msg, type: "error", icon: true, ...opt });
   const warning = (msg: string, opt?: ToastOptions) =>
-    openToast({ message: msg, type: "warning", ...opt });
+    openToast({ message: msg, type: "warning", icon: true, ...opt });
   const primary = (msg: string, opt?: ToastOptions) =>
-    openToast({ message: msg, type: "primary", ...opt });
+    openToast({ message: msg, type: "primary", icon: true, ...opt });
   const loading = (msg: string = "加载中...", opt?: ToastOptions) =>
     openToast({ message: msg, loading: true, ...opt });
   const close = (all?: boolean) => closeToast();

package/libs/css/theme.scss

@@ -32,7 +32,7 @@ $hy-text-color--3: var(--hy-text-color--3, #929295) !default; // 一般用于浅
 $hy-text-color--4: var(--hy-text-color--4, rgba(0, 0, 0, 0.1)) !default; // 一般用于浅色
 $hy-icon-color: var(--hy-icon-color, #606266) !default; // 一般用于icon
 $hy-text-color--grey: var(--hy-text-color--grey, #999) !default; // 辅助灰色，如加载更多的提示信息
-$hy-text-color--placeholder: var(--hy-text-color--placeholder, #808080) !default; // 输入框提示颜色
+$hy-text-color--placeholder: var(--hy-text-color--placeholder, #909399) !default; // 输入框提示颜色
 $hy-text-color--disabled: var(--hy-text-color--disabled, #c0c0c0) !default; // 禁用文字颜色
 $hy-border-color: var(--hy-border-color, #c0c0c0) !default; // 边框颜色
 $hy-text-color--hover: var(--hy-text-color--hover, #58595b)!default; // 点击状态文字颜色

package/libs/css/vars.scss

@@ -7,7 +7,7 @@
   --hy-text-color--4: rgba(0, 0, 0, 0.1);
   --hy-icon-color: #999;
   --hy-text-color--grey: #67676c;
-  --hy-text-color--placeholder: rgba(0, 0, 0, 0.25);
+  --hy-text-color--placeholder: #909399;
   --hy-text-color--disabled: rgba(0, 0, 0, 0.25);
 
   --hy-background: #f8f8f8;
@@ -40,7 +40,7 @@
   --hy-text-color--4: rgba(255, 255, 255, 0.1);
   --hy-icon-color: #FFFFFF;
   --hy-text-color--grey: #98989f;
-  --hy-text-color--placeholder: rgba(255, 255, 255, 0.25);
+  --hy-text-color--placeholder: #909399;
   --hy-text-color--disabled: rgba(255, 255, 255, 0.25);
 
   --hy-background: #1b1b1f;

package/libs/utils/utils.ts

@@ -372,6 +372,32 @@ const objectToUrlParams = (params: Record<string, any>): string => {
     .join("&"); // 使用 & 拼接所有参数
 };
 
+/**
+ * @description  地址栏参数转换对象
+ * @param paramStr - 字符串参数
+ * @returns 返回转换对象
+ */
+const urlParamsToObject = (paramStr: string): AnyObject => {
+  const params: AnyObject = {};
+  // 去掉字符串两端的可能的空格
+  paramStr = paramStr.trim();
+  // 如果字符串以?开头，去掉它
+  if (paramStr.startsWith("?")) {
+    paramStr = paramStr.substring(1);
+  }
+  // 按&分割字符串，得到键值对数组
+  const pairs = paramStr.split("&");
+  for (let i = 0; i < pairs.length; i++) {
+    const pair = pairs[i];
+    // 按=分割键值对
+    const [key, ...valueParts] = pair.split("=");
+    const value = valueParts.join("=");
+    // 将键值对存入对象
+    params[decodeURIComponent(key)] = decodeURIComponent(value);
+  }
+  return params;
+};
+
 /**
  * 获取 [min,max]的随机数
  * Math.floor(Math.random()*10) 可均衡获取 0 到 9 的随机整数
@@ -486,6 +512,7 @@ export {
   deepClone,
   bytesToSize,
   objectToUrlParams,
+  urlParamsToObject,
   random,
   range,
   getRect,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "hy-app",
-  "version": "0.4.5",
-  "description": "fix: 修复toast在支付小程序获取不到ref问题",
+  "version": "0.4.7",
+  "description": "fix: 修复tooltip点击无法复制问题",
   "main": "./index.ts",
   "private": false,
   "scripts": {},