hy-app 0.4.2 → 0.4.3

package/components/hy-modal/hy-modal.vue

@@ -219,7 +219,6 @@ watch(
 watch(
   () => props.modelValue,
   (newVal) => {
-    console.log(newVal, "newVal");
     if (!newVal) load.value = false;
   },
 );
@@ -228,7 +227,6 @@ watch(
  * @description 点击确定按钮
  * */
 const confirmHandler = async () => {
-  console.log(load.value, "props.loading");
   if (load.value) return;
   // 如果配置了异步关闭，将按钮值为loading状态
   emit("confirm");

package/components/hy-picker/index.scss

@@ -36,6 +36,7 @@
       @include flex;
       flex: 1;
       justify-content: center;
+      text-align: center;
 
       :deep(.uni-picker-view-indicator) {
         background: $hy-background--hover;

package/components/hy-popover/hy-popover.vue

@@ -216,6 +216,7 @@ watch(
   (newVal) => {
     popover.init(newVal, visibleArrow.value, selector);
   },
+  { immediate: true },
 );
 
 watch(

package/components/hy-price/hy-price.vue

@@ -12,7 +12,7 @@
       {{ priceOne?.[0] }}
     </text>
     <text class="hy-price__decimal">
-      {{ "." + priceOne?.[1].slice(0, num) }}
+      {{ "." + addZero(priceOne?.[1], num) }}
     </text>
   </text>
 </template>
@@ -29,9 +29,9 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { computed, toRefs } from "vue";
+import { computed } from "vue";
 import type { CSSProperties, PropType } from "vue";
-import { addUnit, getPx, error } from "../../utils";
+import { addUnit, getPx, error, addZero } from "../../utils";
 
 /**
  * 业务组件,突出金额小数点前大，小数点后小
@@ -86,7 +86,6 @@ const props = defineProps({
   /** 自定义外部类名 */
   customClass: String,
 });
-const { text, color, weight, size, slant, customStyle } = toRefs(props);
 const emit = defineEmits(["click"]);
 
 /**
@@ -94,34 +93,25 @@ const emit = defineEmits(["click"]);
  * */
 const priceStyle = computed<CSSProperties>(() => {
   const style: CSSProperties = {
-    color: color.value,
-    fontWeight: weight.value,
-    fontStyle: slant.value ? "oblique" : "",
-    fontSize: addUnit(size.value),
+    color: props.color,
+    fontWeight: props.weight,
+    fontStyle: props.slant ? "oblique" : "",
+    fontSize: addUnit(props.size),
   };
 
-  return Object.assign(style, customStyle.value);
+  return Object.assign(style, props.customStyle);
 });
 
 /**
  * @description 价格处理
  * */
 const priceOne = computed(() => {
-  if (props.text === undefined) return error("值为空");
+  if (props.text === undefined) return error("text值不能为空");
 
-  let value = "";
-  const price = props.text;
-  if (typeof price !== "string") {
-    value = price.toString();
-  } else {
-    value = price;
-  }
+  let value =
+    typeof props.text === "string" ? props.text : props.text.toString();
   if (/\./g.test(value)) {
-    if (Number(value)) {
-      return value.split(".");
-    } else {
-      return ["0", "00"];
-    }
+    return Number(value) ? value.split(".") : ["0", "000000"];
   } else {
     return [value, "000000"];
   }
@@ -131,7 +121,7 @@ const priceOne = computed(() => {
  * @description 点击事件
  * */
 const handleClick = () => {
-  emit("click", text.value);
+  emit("click", props.text);
 };
 </script>
 

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

@@ -22,20 +22,16 @@
         size="25"
         :customStyle="{ marginBottom: '20px' }"
       ></HyLoading>
-      <HyIcon
+      <view
         v-else-if="iconNameCom"
-        :name="iconNameCom"
-        size="17"
-        :color="tmpConfig.type"
-        :customStyle="iconStyle"
-      ></HyIcon>
-      <text
         :class="[
-          'hy-toast__content--text',
-          'hy-toast__content--text__' + tmpConfig.type,
+          'hy-toast__content--icon',
+          `hy-toast__content--icon__${tmpConfig.type}`,
         ]"
-        style="max-width: 400rpx"
       >
+        <HyIcon :name="iconNameCom" size="17" color="#FFFFFF"></HyIcon>
+      </view>
+      <text class="hy-toast__content--text" style="max-width: 400rpx">
         {{ tmpConfig.message }}
       </text>
     </view>
@@ -113,12 +109,6 @@ const iconNameCom = computed(() => {
     return tmpConfig.value.icon;
   }
 });
-const iconStyle = computed(() => {
-  const style: CSSProperties = {};
-  // 图标需要一个右边距，以跟右边的文字有隔开的距离
-  style.marginRight = "4px";
-  return style;
-});
 
 /**
  * @description 内容盒子的样式
@@ -157,7 +147,7 @@ const show = (options: ToastParamsVo) => {
   clearTimer();
   isShow.value = true;
   // -1时不自动关闭
-  if (tmpConfig.value.duration !== -1) {
+  if (tmpConfig.value.duration !== -1 && !tmpConfig.value.loading) {
     timer = setTimeout(() => {
       // 倒计时结束，清除定时器，隐藏toast组件
       clearTimer();

package/components/hy-toast/index.scss

@@ -19,6 +19,42 @@
       padding: 20px;
     }
 
+    @include m(icon) {
+      width: 32px;
+      height: 32px;
+      border-radius: $hy-border-radius-semicircle;
+      box-sizing: border-box;
+      margin-right: $hy-border-margin-padding-base;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      @include e(info) {
+        background: $hy-info;
+        border: 6rpx solid $hy-info-dark;
+      }
+
+      @include e(primary) {
+        background: $hy-primary;
+        border: 6rpx solid $hy-primary-dark;
+      }
+
+      @include e(success) {
+        background: $hy-success;
+        border: 6rpx solid $hy-success-dark;
+      }
+
+      @include e(error) {
+        background: $hy-error;
+        border: 6rpx solid $hy-error-dark;
+      }
+
+      @include e(warning) {
+        background: $hy-warning;
+        border: 6rpx solid $hy-warning-dark;
+      }
+    }
+
     @include m(text) {
       color: #ffffff;
       font-size: 15px;
@@ -46,12 +82,6 @@
     }
   }
 
-  @include themeColor(success, $hy-success-light, #bef5c8, $hy-success);
-  @include themeColor(primary, $hy-primary-light, rgb(215, 234, 254), $hy-primary);
-  @include themeColor(error, $hy-error-light, #fde2e2, $hy-error);
-  @include themeColor(warning, $hy-warning-light, #faecd8, $hy-warning);
-  @include themeColor(info, $hy-info-light, $hy-info, $hy-info);
-
 
   @include m(default)  {
     color: #ffffff;

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

@@ -1,4 +1,4 @@
-export default interface HyToastParamsVo {
+export default interface ToastOptions {
   /**
    * @description 显示文本
    * */

package/composables/index.ts

@@ -1,4 +1,5 @@
-export * from './useShare'
-export * from './useTouch'
-export * from './usePopover'
-export * from './useQueue'
+export * from "./useShare";
+export * from "./useTouch";
+export * from "./usePopover";
+export * from "./useQueue";
+export * from "./useToast";

package/composables/useToast.ts

@@ -0,0 +1,51 @@
+import type ToastOptions from "../components/hy-toast/typing";
+import { error } from "@/package";
+
+// 用于缓存全局唯一实例
+let toastInstance: any = null;
+
+/**
+ * useToast 适用于任意页面直接调用 toast
+ * 兼容 H5 + 微信小程序 + App
+ */
+export const useToast = () => {
+  // 如果已经有实例，直接复用
+  if (toastInstance) return toastInstance;
+
+  const info = (msg: string, opt?: ToastOptions) =>
+    createToast({ message: msg, type: "info", ...opt });
+  const success = (msg: string, opt?: ToastOptions) =>
+    createToast({ message: msg, type: "success", ...opt });
+  const error = (msg: string, opt?: ToastOptions) =>
+    createToast({ message: msg, type: "error", ...opt });
+  const warning = (msg: string, opt?: ToastOptions) =>
+    createToast({ message: msg, type: "warning", ...opt });
+  const primary = (msg: string, opt?: ToastOptions) =>
+    createToast({ message: msg, type: "primary", ...opt });
+  const loading = (msg: string, opt?: ToastOptions) =>
+    createToast({ message: msg, loading: true, ...opt });
+  const close = (all?: boolean) => {
+    if (toastInstance && toastInstance.hide) toastInstance.hide();
+  };
+
+  return { info, success, error, warning, primary, loading, close };
+};
+
+/**
+ * ✅ 实现
+ * 由于小程序不支持动态 mount vue 组件
+ * 所以需要依赖页面上放置 <HyToast ref="toastRef" /> 元素
+ */
+function createToast(options: ToastOptions) {
+  const pages = getCurrentPages();
+  const currentPage = pages[pages.length - 1];
+  const vm = currentPage.$vm || currentPage;
+
+  // 确保页面有 ref="toastRef" 的 hy-toast
+  if (vm?.$refs?.toastRef) {
+    vm.$refs.toastRef.show(options);
+    toastInstance = vm.$refs.toastRef;
+  } else {
+    error('[useToast] 请在页面 template 中添加 <HyToast ref="toastRef" />');
+  }
+}

package/config/icon.ts

@@ -236,9 +236,13 @@ export const IconConfig = {
    * */
   CLOSE_CIRCLE_FILL: "close-circle-fill",
   /**
-   * 注意
+   * 感叹号
    * */
   NOTICE: "notice",
+  /**
+   * 注意
+   * */
+  NOTICE_CIRCLE: "notice-circle",
   /**
    * 注意-实心
    * */
@@ -251,10 +255,14 @@ export const IconConfig = {
    * 成功-实心
    * */
   SUCCESS_FILL: "success-fill",
+  /**
+   * 疑问
+   * */
+  QUERY: "query",
   /**
    * 帮助
    * */
-  HELP: "help",
+  HELP_CIRCLE: "help-circle",
   /**
    * 帮助-实心
    * */
@@ -407,16 +415,16 @@ export const IconConfig = {
 export const iconName = (type: string) => {
   switch (type) {
     case "success":
-      return IconConfig.SUCCESS_FILL;
+      return IconConfig.CHECK_MASK;
     case "error":
-      return IconConfig.CLOSE_CIRCLE_FILL;
+      return IconConfig.CLOSE;
     case "warning":
-      return IconConfig.NOTICE_FILL;
+      return IconConfig.NOTICE;
     case "info":
-      return IconConfig.HELP_FILL;
+      return IconConfig.QUERY;
     case "primary":
       return IconConfig.MESSAGE_FILL;
     default:
-      return IconConfig.CLOSE_CIRCLE_FILL;
+      return IconConfig.CLOSE;
   }
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "hy-app",
-  "version": "0.4.2",
-  "description": "delete: 删除登录组件",
+  "version": "0.4.3",
+  "description": "fix: 使用hooks触发toast显示提示消息",
   "main": "./index.ts",
   "private": false,
   "scripts": {},

package/static/font/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
-  font-family: 'iconfont';  /* Project id 4305932 */
-  src: url('https://at.alicdn.com/t/c/font_4305932_vv9jfh6hbj.woff2?t=1757404491336') format('woff2'),
-  url('https://at.alicdn.com/t/c/font_4305932_vv9jfh6hbj.woff?t=1757404491336') format('woff'),
-  url('https://at.alicdn.com/t/c/font_4305932_vv9jfh6hbj.ttf?t=1757404491336') format('truetype');
+  font-family: "iconfont"; /* Project id 4305932 */
+  src: url('https://at.alicdn.com/t/c/font_4305932_qgtc1zvcqsm.woff2?t=1761211099193') format('woff2'),
+       url('https://at.alicdn.com/t/c/font_4305932_qgtc1zvcqsm.woff?t=1761211099193') format('woff'),
+       url('https://at.alicdn.com/t/c/font_4305932_qgtc1zvcqsm.ttficonfont.ttf?t=1761211099193') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,14 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.hy-icon-query:before {
+  content: "\e617";
+}
+
+.hy-icon-notice:before {
+  content: "\e61f";
+}
+
 .hy-icon-telephone-fill:before {
   content: "\e66d";
 }
@@ -333,7 +341,7 @@
   content: "\e621";
 }
 
-.hy-icon-help:before {
+.hy-icon-help-circle:before {
   content: "\e622";
 }
 
@@ -357,7 +365,7 @@
   content: "\e629";
 }
 
-.hy-icon-notice:before {
+.hy-icon-notice-circle:before {
   content: "\e62a";
 }
 

package/utils/utils.ts

@@ -67,6 +67,22 @@ const padZero = (value: string | number): string => {
   return `00${value}`.slice(-2);
 };
 
+/**
+ * @description 后面补零
+ * @param {String | Number} value 需要补零的值
+ * @param {Number} length 多少位
+ * @returns {String}
+ */
+const addZero = (value: string | number, length: number): string => {
+  let val = value.toString();
+  if (length > val.length) {
+    val += "0".repeat(length - val.length);
+  } else {
+    val = val.slice(0, length);
+  }
+  return val;
+};
+
 /**
  * @description 清空对象里面的值
  * @param val 任意类型的值
@@ -459,6 +475,7 @@ export {
   decryptData,
   addUnit,
   padZero,
+  addZero,
   clearVal,
   formatTime,
   formatTimeToString,