hy-app 0.2.2 → 0.2.4

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

@@ -0,0 +1,76 @@
+import type { CSSProperties } from "vue";
+
+export default interface HyOverlayProps {
+  /**
+   * @description 显示内容
+   * */
+  content?: string;
+  /**
+   * @description 显示图片的地址，支持网络图片和base64（钉钉小程序仅支持网络图片）
+   * */
+  image?: string;
+  /**
+   * @description 图片高度
+   * */
+  imageHeight?: number;
+  /**
+   * @description 图片高度
+   * */
+  imageWidth?: number;
+  /**
+   * @description X轴间距，单位px
+   * */
+  gutterX?: number;
+  /**
+   * @description Y轴间距，单位px
+   * */
+  gutterY?: number;
+  /**
+   * @description canvas画布宽度，单位px
+   * */
+  width?: number;
+  /**
+   * @description canvas画布高度，单位px
+   * */
+  height?: number;
+  /**
+   * @description 是否为全屏水印
+   * */
+  fullScreen?: boolean;
+  /**
+   * @description 水印字体颜色
+   * */
+  color?: string;
+  /**
+   * @description 水印字体大小，单位px
+   * */
+  size?: number;
+  /**
+   * @description 水印字体样式（仅微信和h5支持），可能的值：normal、italic、oblique
+   * */
+  fontStyle?: string;
+  /**
+   * @description 水印字体的粗细（仅微信和h5支持）
+   * */
+  fontWeight?: string;
+  /**
+   * @description 水印字体系列（仅微信和h5支持）
+   * */
+  fontFamily?: string;
+  /**
+   * @description 水印旋转角度
+   * */
+  rotate?: number;
+  /**
+   * @description 自定义层级
+   * */
+  zIndex?: number;
+  /**
+   * @description 自定义透明度，取值 0~1
+   * */
+  opacity?: number;
+  /**
+   * @description 定义需要用到的外部样式
+   * */
+  customStyle?: CSSProperties;
+}

package/components/index.ts

@@ -1,4 +1,4 @@
-import YkTabbar from "./yk-tabbar/yk-tabbar.vue";
+import HyTabBr from "./hy-tabBar/hy-tabBar.vue";
 import Dialog from "./dialog";
 /* #ifdef H5 */
 import DialogService from "./message";
@@ -63,7 +63,7 @@ import HyUpload from "./hy-upload/hy-upload.vue";
 import HyWarn from "./hy-warn/hy-warn.vue";
 
 const install = (Vue: any) => {
-  Vue.component("yk-tabbar", YkTabbar);
+  Vue.component("hy-tabBar", HyTabBr);
 
   Vue.component("HyAddressPicker", HyAddressPicker);
   Vue.component("HyAvatar", HyAvatar);

package/index.ts

@@ -1,7 +1,7 @@
 export * from "./common";
 export * from "./utils";
 export * from "./store";
-export * from "./components";
+// export * from "./components";
 export * from "./global";
 export * from "./typing";
 export * from "./api";

package/libs/css/vars.css

@@ -13,10 +13,12 @@
   --hy-background: #f8f8f8;
   --hy-background--2: #FFFFFF;
   --hy-background--3: rgb(238, 238, 239);
+  --hy-background--track: #F6F6F6;
   --hy-background--container: #FFFFFF;
   --hy-background--disabled: rgba(0, 0, 0, 0.04);
   --hy-background--empty: #F3F3F3;
-  --hy-background--hover: rgba(0,0,0,0.2);
+  --hy-background--hover: rgba(0,0,0,0.05);
+  --hy-background--active: #FFFFFF;
 
   --hy-border-line: 1rpx solid #c2c2c4;
   --hy-border-color: #c2c2c4;
@@ -42,10 +44,12 @@
   --hy-background: #1b1b1f;
   --hy-background--2: #161616;
   --hy-background--3: #646566;
+  --hy-background--track: #3A3A44;
   --hy-background--container: #242424;
   --hy-background--disabled: rgba(255, 255, 255, 0.08);
   --hy-background--empty: #3A3A44;
   --hy-background--hover: rgba(255,255,255,0.2);
+  --hy-background--active: #000000;
 
   --hy-border-line: 1rpx solid #3c3f44;
   --hy-border-color: #3c3f44;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "hy-app",
-  "version": "0.2.2",
-  "description": "添加签名、分页组件",
+  "version": "0.2.4",
+  "description": "新增组件：分页、签名面板、水印、验证码输入、侧边菜单栏",
   "main": "./index.ts",
   "private": false,
   "scripts": {},

package/theme.scss

@@ -43,10 +43,11 @@ $hy-background--2: var(--hy-background--2, #ffffff) !default; // 弹窗背景色
 $hy-background--3: var(--hy-background--3, #646566) !default; // 弹窗背景色
 $hy-background--container: var(--hy-background--container, #ffffff) !default; // 容器背景色
 $hy-background--disabled: var(--hy-background--disabled, #F5F5F5); // 禁用背景色
-$hy-background--track: var(--hy-background--track, #c6c7cb) !default;
-$hy-background--empty: var(--hy-background--empty, #f6f6f7) !default; // 搜索背景色
-$hy-background--hover: var(--hy-background--hover, #707070) !default; // 点击状态
+$hy-background--track: var(--hy-background--track, #F6F6F6) !default;
+$hy-background--empty: var(--hy-background--empty, #F3F3F3) !default; // 搜索背景色
+$hy-background--hover: var(--hy-background--hover, rgba(0,0,0,0.1)) !default; // 点击状态
 $hy-light-background-mask: var(--hy-light-background-mask, rgba(0, 0, 0, 0.5)); //遮罩颜色
+$hy-background--active: var(--hy-background--active, #131313); // 选中状态值
 
 /* 文字尺寸 */
 $hy-font-size-sm: 12px;

package/typing/modules/common.d.ts

@@ -127,7 +127,7 @@ declare namespace HyApp {
     /**
      * @description 自定义columns的文本键
      * */
-    label: string;
+    name: string;
     /**
      * @description 自定义columns的值键
      * */

package/utils/inspect.ts

@@ -113,3 +113,23 @@ export const isChinese = (zh: string): boolean => {
   const reg = /^[\u4e00-\u9fa5]+$/gi;
   return reg.test(zh);
 };
+
+/**
+ * 是否为base64图片
+ * @param {string} url
+ * @return
+ */
+export function isBase64Image(url: string) {
+  // 使用正则表达式检查URL是否以"data:image"开头，这是Base64图片的常见前缀
+  return /^data:image\/(png|jpg|jpeg|gif|bmp);base64,/.test(url);
+}
+
+/**
+ * 是否图片
+ * @param {string} url
+ * @return
+ */
+export function isImage(url: string) {
+  // 使用正则表达式检查URL是否以"data:image"开头，这是Base64图片的常见前缀
+  return /(\.jpg|\.jpeg|\.png|\.gif|\.bmp|\.webp)$/i.test(url);
+}

package/utils/utils.ts

@@ -364,7 +364,10 @@ const random = (min: number | string, max: number | string): number => {
 const range = (min = 0, max = 0, value = 0) => {
   return Math.max(min, Math.min(max, Number(value)));
 };
-let instance: any;
+
+export type RectResultType<T extends boolean> = T extends true
+  ? UniApp.NodeInfo[]
+  : UniApp.NodeInfo;
 /**
  * 查询节点信息
  * 目前此方法在支付宝小程序中无法获取组件跟接点的尺寸，为支付宝的bug(2020-07-21)
@@ -372,32 +375,59 @@ let instance: any;
  * @param selector 元素类名或id
  * @param all 是否获取多个相同元素数值
  * @param ins 在微信小程序里，因为utils文件里面获取不到instance值所以必须通过ins这个传过来
+ * @param useFields 是否使用 fields 方法获取节点信息
  */
 const getRect = (
   selector: string,
-  all?: boolean,
+  all?: T,
   ins?: any,
-): Promise<UniApp.NodeInfo | UniApp.NodeInfo[]> => {
-  return new Promise((resolve) => {
+  useFields?: boolean,
+): Promise<RectResultType<T>> => {
+  return new Promise<RectResultType<T>>((resolve, reject) => {
+    let query: UniNamespace.SelectorQuery | null = null;
     // TODO: 在微信小程序里，因为utils文件里面获取不到instance值所以必须通过ins这个传过来
-    // #ifdef MP-WEIXIN
-    instance = ins;
-    // #endif
-    // #ifndef APP-NVUE
-    uni
-      .createSelectorQuery()
-      .in(instance)
-      [all ? "selectAll" : "select"](selector)
-      .boundingClientRect((rect) => {
-        if (all && Array.isArray(rect) && rect.length) {
-          resolve(rect as UniApp.NodeInfo[]);
-        }
-        if (!all && rect) {
-          resolve(rect as UniApp.NodeInfo);
-        }
-      })
-      .exec();
-    // #endif
+    if (ins) {
+      query = uni.createSelectorQuery().in(ins);
+    } else {
+      query = uni.createSelectorQuery();
+    }
+    const method = all ? "selectAll" : "select";
+
+    const callback = (rect: UniApp.NodeInfo | UniApp.NodeInfo[]) => {
+      if (all && Array.isArray(rect) && rect.length > 0) {
+        resolve(rect as RectResultType<T>);
+      } else if (!all && rect) {
+        resolve(rect as RectResultType<T>);
+      } else {
+        reject(new Error("No nodes found"));
+      }
+    };
+
+    if (useFields) {
+      query[method](selector)
+        .fields({ size: true, node: true }, callback)
+        .exec();
+    } else {
+      query[method](selector).boundingClientRect(callback).exec();
+    }
+    // // #ifdef MP-WEIXIN
+    // instance = ins;
+    // // #endif
+    // // #ifndef APP-NVUE
+    // uni
+    //   .createSelectorQuery()
+    //   .in(instance)
+    //   [all ? "selectAll" : "select"](selector)
+    //   .boundingClientRect((rect) => {
+    //     if (all && Array.isArray(rect) && rect.length) {
+    //       resolve(rect as UniApp.NodeInfo[]);
+    //     }
+    //     if (!all && rect) {
+    //       resolve(rect as UniApp.NodeInfo);
+    //     }
+    //   })
+    //   .exec();
+    // // #endif
   });
 };
 

package/components/yk-tabbar/props.ts

@@ -1,49 +0,0 @@
-export default {
-    /**
-     * tab当前值
-     * */
-    current: 0,
-    /**
-     * 文字颜色
-     * */
-    textColor: "#FFFFFF",
-    /**
-     * 底部导航栏背景颜色
-     * 支持渐变色--linear-gradient(155deg, #192b6e, #a6307c)
-     * */
-    bgColor: "linear-gradient(155deg, #192b6e, #a6307c)",
-    /**
-     * 点击突出按钮的背景颜色
-     * 支持渐变色--linear-gradient(0deg, #ffa576,#0951eb)
-     * */
-    activeColor: "linear-gradient(0deg, #ffa576,#0951eb)",
-    /**
-     * 导航栏值
-     * {
-     *     key: 唯一建值,
-     *     label: 中文名,
-     *     icon: uview-plus里面的矢量图标库
-     *     iconUrl: 图片地址
-     * }
-     * */
-    list: [
-        {
-            key: 0,
-            label: "首页",
-            icon: "home",
-            iconUrl: ""
-        },
-        {
-            key: 1,
-            label: "工具栏",
-            icon: "grid",
-            iconUrl: ""
-        },
-        {
-            key: 2,
-            label: "我的",
-            icon: "account",
-            iconUrl: ""
-        }
-    ]
-}

package/components/yk-tabbar/yk-tabbar.vue

@@ -1,224 +0,0 @@
-<template>
-  <view class="placeholder-view"></view>
-  <view class="bg">
-    <view class="custom-tabbar" :style="{'background': props.bgColor}">
-      <view class="ul">
-        <view :class="['li', 'list', current === item.key ? 'active' : '']" v-for="item in props.list" :key="item.key" @click="checkItem(item.key)">
-          <view class="bar">
-            <view class="icon">
-<!--              <text-->
-<!--                  :class="['t-icon', `custom-t-icon-${item.icon}`]"-->
-<!--              ></text>-->
-              <image
-                v-if="item.iconUrl"
-                :src="item.iconUrl"
-                style="height: 25px; width: 25px"
-              ></image>
-              <u-icon v-else :name="item.icon" :color="props.textColor" size="25"></u-icon>
-            </view>
-            <text class="text" :style="['color:' + props.textColor]">{{ item.label }}</text>
-            <text class="circle"></text>
-          </view>
-        </view>
-        <view
-            class="indicator"
-            :style="{
-              '--num': `translateX(calc(((100vw - 110rpx - ${props.list.length} * 70rpx) / ${props.list.length - 1} + 70rpx) * ${current}))`,
-              'background': activeColor
-            }"
-        ></view>
-      </view>
-    </view>
-  </view>
-</template>
-
-<script setup lang="ts">
-import { ref, reactive, watch } from "vue";
-import prop from "./props";
-
-interface IProps {
-  current: number;
-  textColor?: string;
-  bgColor?: string;
-  activeColor?: string;
-  list: () => ([]);
-}
-const props = withDefaults(defineProps<IProps>(),{...prop})
-const emit = defineEmits(['clickTab'])
-
-const current = ref(0);
-watch(
-    () => props.current,
-    (newVal) => {
-      current.value = newVal
-    }
-)
-
-const checkItem = (index: number) => {
-  current.value = index;
-  emit("clickTab", index)
-}
-</script>
-
-<style lang="scss" scoped>
-.placeholder-view {
-  height: 135rpx;
-}
-.bg {
-  background: #F8F8F8;
-  height: 135rpx;
-  z-index: 999;
-  position: fixed;
-  bottom: 0;
-}
-.custom-tabbar {
-  margin-top: 15rpx;
-  position: relative;
-  width: 100vw;
-  height: 120rpx;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: 15rpx 15rpx 0 0;
-  padding: 0 20rpx;
-	/* #ifndef APP-PLUS-NVUE */
-  box-sizing: border-box;
-	/* #endif */
-  .ul {
-    width: 100%;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 0 20rpx;
-    .li {
-      position: relative;
-      width: 100rpx;
-      height: 70rpx;
-      z-index: 1;
-      .bar {
-        position: relative;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        flex-direction: column;
-        width: 100%;
-        text-align: center;
-        font-weight: 500;
-        .icon {
-					/* #ifndef APP-PLUS-NVUE */
-					transition: .5s;
-					/* #endif */
-        }
-        .text {
-          position: absolute;
-          font-weight: 400;
-          font-size: .75em;
-					/* #ifndef APP-PLUS-NVUE */
-					letter-spacing: .05em;
-					transition: .5s;
-					/* #endif */
-          transform: translateY(20px) scale(0);
-        }
-        .circle {
-          position: absolute;
-					/* #ifndef APP-PLUS-NVUE */
-					display: block;
-					/* #endif */
-          width: 75rpx;
-          height: 75rpx;
-          background: transparent;
-          border-radius: 50%;
-          border: 3rpx solid #fff;
-          transform: translateY(-70rpx) scale(0);
-        }
-      }
-
-      &.active {
-        .bar {
-          .icon {
-            transform: translate(2rpx, -56rpx);
-          }
-          .text {
-            opacity: 1;
-            transform: translateY(20rpx);
-          }
-          .circle {
-						/* #ifndef APP-PLUS-NVUE */
-						margin: 0 auto;
-						transition: .5s;
-						/* #endif */
-            transition-delay: .5s;
-            transform: translate(2rpx, -56rpx) scale(1);
-          }
-        }
-      }
-    }
-  }
-}
-
-.indicator {
-  position: absolute;
-  top: -59%;
-  left: 30rpx;
-  width: 100rpx;
-  height: 100rpx;
-  border: 12rpx solid #F8F8F8;
-  border-radius: 50%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-	/* #ifndef APP-PLUS-NVUE */
-	transition: .5s;
-	/* #endif */
-}
-
-.indicator::before {
-	/* #ifndef APP-PLUS-NVUE */
-	content: '';
-	/* #endif */
-  position: absolute;
-  top: 59%;
-  left: -45rpx;
-  width: 50rpx;
-  height: 40rpx;
-  background: transparent;
-  border-top-right-radius: 20px;
-  box-shadow: 1px -15rpx 0 #F8F8F8;
-}
-
-.indicator::after {
-	/* #ifndef APP-PLUS-NVUE */
-	content: '';
-	/* #endif */
-  position: absolute;
-  top: 58%;
-  right: -49rpx;
-  width: 50rpx;
-  height: 40rpx;
-  background: transparent;
-  border-top-left-radius: 40rpx;
-  box-shadow: -1px -15rpx 0 #F8F8F8;
-}
-
-/* #ifndef APP-PLUS-NVUE */
-.custom-tabbar .ul .li:nth-child(1).active~.indicator {
-	transform: var(--num);
-}
-
-.custom-tabbar .ul .li:nth-child(2).active~.indicator {
-	transform: var(--num);
-}
-
-.custom-tabbar .ul .li:nth-child(3).active~.indicator {
-	transform: var(--num);
-}
-
-.custom-tabbar .ul .li:nth-child(4).active~.indicator {
-	transform: var(--num);
-}
-
-.custom-tabbar .ul .li:nth-child(5).active~.indicator {
-	transform: var(--num);
-}
-/* #endif */
-</style>