hy-app 0.2.2 → 0.2.5

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/common.scss

@@ -22,4 +22,12 @@
   height: 100vh;
   /* #endif */
   overflow: auto;
-}
+}
+
+/* 解决滚动时候出现滚动条 */
+::-webkit-scrollbar{
+  width: 0;
+  height: 0;
+  color: transparent;
+  display:none;
+}

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.5",
+  "description": "修复在微信小程序线上bug",
   "main": "./index.ts",
   "private": false,
   "scripts": {},

package/theme.scss

@@ -43,26 +43,16 @@ $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;
-$hy-font-size-base: 16px;
-$hy-font-size-lg: 20px;
-
-/* 文章场景相关 */
-$hy-color-title: #2c405a; // 文章标题颜色
-$hy-weight-title: 700;
-$hy-font-size-title: 44rpx;
-$hy-color-subtitle: #555555; // 二级标题颜色
-$hy-font-size-subtitle: 38rpx;
-$hy-color-paragraph: #3f536e; // 文章段落颜色
-$hy-font-size-paragraph: 32rpx;
-$hy-color-hint: #999; // 提示文字
-$hy-font-size-hint: 26rpx;
+$hy-font-size-sm: 24rpx; // 提示文字大小
+$hy-font-size-base: 32rpx; // 基本文字大小
+$hy-font-size-lg: 40rpx; // 标题文字大小
 
 
 /* 边框颜色 */
@@ -97,4 +87,4 @@ $hy-border-margin-padding-sm: var(--hy-border-margin-padding-sm, 10rpx) !default
 $hy-border-margin-padding-base: var(--hy-border-margin-padding-base, 20rpx) !default;
 $hy-border-margin-padding-lg: var(--hy-border-margin-padding-lg, 30rpx) !default;
 /* 底部线条 */
-$hy-border-line: var(--hy-border-line, 1rpx solid #c2c2c4) !default;
+$hy-border-line: var(--hy-border-line, 1px solid #c2c2c4) !default;

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>