hy-app 0.2.2 → 0.2.4

package/components/hy-signature/hy-signature.vue

@@ -1,6 +1,9 @@
 <template>
   <view class="hy-signature" :style="customStyle">
-    <view class="hy-signature__content">
+    <view
+      class="hy-signature__content"
+      :style="{ borderRadius: addUnit(round) }"
+    >
       <!-- #ifdef MP-WEIXIN -->
       <canvas
         class="hy-signature__content-canvas"
@@ -113,7 +116,7 @@ import HyButton from "@/package/components/hy-button/hy-button.vue";
 
 const props = withDefaults(defineProps<IProps>(), defaultProps);
 const emit = defineEmits(["start", "end", "signing", "confirm", "clear"]);
-const { proxy } = getCurrentInstance() as any;
+const instance = getCurrentInstance() as any;
 const canvasId = ref<string>(`signature${guid()}`); // canvas 组件的唯一标识符
 let canvas: null = null; //canvas对象 微信小程序生成图片必须传入
 const drawing = ref<boolean>(false); // 是否正在绘制
@@ -160,7 +163,9 @@ const redoLines = ref<Line[]>([]); // 保存撤销的线条
 const currentLine = ref<Line>(); // 当前正在绘制的线
 const currentStep = ref(0); // 当前步骤
 
-// 添加计算笔画宽度的方法
+/**
+ * @description 添加计算笔画宽度的方法
+ * */
 function calculateLineWidth(speed: number): number {
   if (!props.pressure) return props.lineWidth;
 
@@ -172,7 +177,9 @@ function calculateLineWidth(speed: number): number {
   return Math.min(lineWidth, props.maxWidth);
 }
 
-/* 获取默认笔画宽度 */
+/**
+ * @description 获取默认笔画宽度
+ * */
 const getDefaultLineWidth = () => {
   if (props.pressure) {
     // 在压感模式下，使用最大和最小宽度的平均值作为默认值
@@ -181,7 +188,9 @@ const getDefaultLineWidth = () => {
   return props.lineWidth;
 };
 
-/* 开始画线 */
+/**
+ * @description 开始画线
+ * */
 const startDrawing = (e: any) => {
   e.preventDefault();
   drawing.value = true;
@@ -209,7 +218,9 @@ const startDrawing = (e: any) => {
   draw(e);
 };
 
-/* 结束画线 */
+/**
+ * @description 结束画线
+ * */
 const stopDrawing = (e: TouchEvent) => {
   e.preventDefault();
   drawing.value = false;
@@ -239,7 +250,7 @@ const stopDrawing = (e: TouchEvent) => {
 };
 
 /**
- * 初始化 canvas
+ * @description 初始化 canvas
  * @param forceUpdate 是否强制更新
  */
 const initCanvas = (forceUpdate: boolean = false) => {
@@ -257,7 +268,9 @@ const initCanvas = (forceUpdate: boolean = false) => {
   });
 };
 
-// 清空 canvas
+/**
+ * @description 清空 canvas
+ * */
 const clear = () => {
   lines.value = [];
   redoLines.value = [];
@@ -271,7 +284,9 @@ const confirmSignature = () => {
   canvasToImage();
 };
 
-//canvas划线
+/**
+ * @description canvas划线
+ * */
 const draw = (e: any) => {
   e.preventDefault();
   const { ctx } = canvasState;
@@ -334,7 +349,9 @@ const draw = (e: any) => {
   emit("signing", e);
 };
 
-/* 重绘整个画布 */
+/**
+ * @description 重绘整个画布
+ * */
 const redrawCanvas = () => {
   const { ctx } = canvasState;
   if (!ctx) return;
@@ -388,32 +405,7 @@ const redrawCanvas = () => {
         }
 
         const lineWidth = point.lineWidth || line.width;
-        if (typeof prePoint.lastX1 === "number") {
-          ctx.setLineWidth(lineWidth);
-          ctx.beginPath();
-          ctx.moveTo(prePoint.lastX2!, prePoint.lastY2!);
-          ctx.quadraticCurveTo(
-            prePoint.x,
-            prePoint.y,
-            point.lastX1,
-            point.lastY1,
-          );
-          ctx.stroke();
-
-          if (!prePoint.isFirstPoint) {
-            ctx.beginPath();
-            ctx.moveTo(prePoint.lastX1!, prePoint.lastY1!);
-            ctx.quadraticCurveTo(
-              prePoint.x,
-              prePoint.y,
-              prePoint.lastX2!,
-              prePoint.lastY2!,
-            );
-            ctx.stroke();
-          }
-        } else {
-          point.isFirstPoint = true;
-        }
+        point.isFirstPoint = true;
       });
     } else {
       // 非笔锋模式的重绘
@@ -433,7 +425,9 @@ const redrawCanvas = () => {
   ctx.draw();
 };
 
-// 修改撤销功能
+/**
+ * @description 修改撤销功能
+ * */
 const revoke = () => {
   if (!lines.value.length) return;
   const step = Math.min(props.step, lines.value.length);
@@ -443,7 +437,9 @@ const revoke = () => {
   redrawCanvas();
 };
 
-// 修改恢复功能
+/**
+ * @description 修改恢复功能
+ * */
 const restore = () => {
   if (!redoLines.value.length) return;
   const step = Math.min(props.step, redoLines.value.length);
@@ -453,7 +449,9 @@ const restore = () => {
   redrawCanvas();
 };
 
-// 添加平滑线条绘制方法
+/**
+ * @description 添加平滑线条绘制方法
+ * */
 function drawSmoothLine(prePoint: Point, point: Point) {
   const { ctx } = canvasState;
   if (!ctx) return;
@@ -524,7 +522,7 @@ onBeforeMount(() => {
 });
 
 /**
- * 获取canvas上下文
+ * @description 获取canvas上下文
  */
 function getContext() {
   return new Promise<UniApp.CanvasContext>((resolve) => {
@@ -534,9 +532,9 @@ function getContext() {
       return resolve(ctx);
     }
     // #ifndef MP-WEIXIN
-    getRect(`#${canvasId.value}`, false, proxy).then((canvasRect) => {
-      setcanvasState(canvasRect.width!, canvasRect.height!);
-      canvasState.ctx = uni.createCanvasContext(canvasId.value, proxy);
+    getRect(`#${canvasId.value}`, false, instance).then((canvasRect) => {
+      setCanvasState(canvasRect.width!, canvasRect.height!);
+      canvasState.ctx = uni.createCanvasContext(canvasId.value, instance.proxy);
       if (canvasState.ctx) {
         canvasState.ctx.scale(pixelRatio.value, pixelRatio.value);
       }
@@ -545,7 +543,7 @@ function getContext() {
     // #endif
     // #ifdef MP-WEIXIN
 
-    getRect(`#${canvasId.value}`, false, proxy, true).then(
+    getRect(`#${canvasId.value}`, false, instance, true).then(
       (canvasRect: any) => {
         if (
           canvasRect &&
@@ -561,7 +559,7 @@ function getContext() {
           canvasInstance.height = canvasRect.height * pixelRatio.value;
           canvasState.ctx.scale(pixelRatio.value, pixelRatio.value);
           canvas = canvasInstance;
-          setcanvasState(canvasRect.width, canvasRect.height);
+          setCanvasState(canvasRect.width, canvasRect.height);
           resolve(canvasState.ctx);
         }
       },
@@ -571,14 +569,16 @@ function getContext() {
 }
 
 /**
- * 设置 canvasState
+ * @description 设置 canvasState
  */
-function setcanvasState(width: number, height: number) {
+function setCanvasState(width: number, height: number) {
   canvasState.canvasHeight = height * pixelRatio.value;
   canvasState.canvasWidth = width * pixelRatio.value;
 }
 
-/* 设置线段 */
+/**
+ * @description 设置线段
+ * */
 function setLine() {
   const { ctx } = canvasState;
   if (ctx) {
@@ -590,7 +590,7 @@ function setLine() {
 }
 
 /**
- *  canvas 绘制图片输出成文件类型
+ *  @description canvas 绘制图片输出成文件类型
  */
 function canvasToImage() {
   const { fileType, quality, exportScale } = props;
@@ -627,7 +627,7 @@ function canvasToImage() {
         emit("confirm", result);
       },
     },
-    proxy,
+    instance.proxy,
   );
 }
 

package/components/hy-signature/index.scss

@@ -22,10 +22,8 @@
     justify-content: flex-end;
     display: flex;
 
-    :deep(){
-      @include b(button) {
-        margin-left: $hy-border-margin-padding-base;
-      }
+    :deep(.hy-button) {
+      margin-left: $hy-border-margin-padding-base;
     }
   }
 }

package/components/hy-signature/props.ts

@@ -2,7 +2,7 @@ import type IProps from "./typing";
 
 const defaultProps: IProps = {
   penColor: "#000",
-  lineWidth: 1,
+  lineWidth: 2,
   clearText: "清空",
   revokeText: "撤销",
   restoreText: "恢复",
@@ -13,6 +13,7 @@ const defaultProps: IProps = {
   disabled: false,
   height: 1,
   width: 1,
+  round: "10rpx",
   backgroundColor: "",
   disableScroll: true,
   enableHistory: false,

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

@@ -6,7 +6,7 @@ export default interface HySignatureProps {
    * */
   penColor?: string;
   /**
-   * @description 签名笔宽度（默认 1 ）
+   * @description 签名笔宽度（默认 2 ）
    * */
   lineWidth?: number;
   /**
@@ -49,6 +49,10 @@ export default interface HySignatureProps {
    * @description 画布的宽度
    * */
   width?: number;
+  /**
+   * @description 边框圆角
+   * */
+  round?: string | number;
   /**
    * @description 画板的背景色
    * */

package/components/hy-subsection/hy-subsection.vue

@@ -22,17 +22,17 @@
 
 <script lang="ts">
 export default {
-  name: 'hy-subsection',
+  name: "hy-subsection",
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: 'shared'
-  }
-}
+    styleIsolation: "shared",
+  },
+};
 </script>
 
 <script setup lang="ts">
-import {computed, toRefs, ref, onMounted, watch, getCurrentInstance} from "vue";
+import { computed, toRefs, ref, onMounted, getCurrentInstance } from "vue";
 import type { CSSProperties } from "vue";
 import defaultProps from "./props";
 import type IProps from "./typing";
@@ -50,7 +50,7 @@ const {
   bold,
   bgColor,
   inactiveColor,
-  fieldNames,
+  customKeys,
 } = toRefs(props);
 const emit = defineEmits(["change", "update:modelValue"]);
 
@@ -83,7 +83,7 @@ const wrapperClass = computed(() => {
       "hy-subsection__item",
       "cursor-pointer",
       `hy-subsection__item--${innerCurrent.value}__${guidClass}`,
-        `hy-subsection__item--${mode.value}`,
+      `hy-subsection__item--${mode.value}`,
       index < list.value.length - 1 && "hy-subsection__item--no-border-right",
       index === 0 && "hy-subsection__item--first",
       index === list.value.length - 1 && "hy-subsection__item--last",
@@ -175,7 +175,7 @@ const init = () => {
     if (typeof item === "string" || typeof item === "number") {
       return item === modelValue.value;
     } else {
-      return item[fieldNames.value.value] === modelValue.value;
+      return item[customKeys.value.value] === modelValue.value;
     }
   });
 
@@ -184,23 +184,25 @@ const init = () => {
     innerCurrent.value === -1 ? current.value : innerCurrent.value;
 
   // TODO： 多个数组在一起计算宽度， 宽度不一样会有问题，所以必须加guidClass随机数
-  getRect(`.hy-subsection__item--0__${guidClass}`, false, instance).then((size) => {
-    itemRect.value = size as UniApp.NodeInfo;
-  });
+  getRect(`.hy-subsection__item--0__${guidClass}`, false, instance).then(
+    (size) => {
+      itemRect.value = size as UniApp.NodeInfo;
+    },
+  );
 };
 
 /**
  * @description 判断值
  * */
 const getValue = (item: SubSectionVo) => {
-  return typeof item === "object" ? item[fieldNames.value.value] : item;
+  return typeof item === "object" ? item[customKeys.value.value] : item;
 };
 
 /**
  * @description 判断展示文本
  * */
 const getName = (item: SubSectionVo) => {
-  return typeof item === "object" ? item[fieldNames.value.label] : item;
+  return typeof item === "object" ? item[customKeys.value.name] : item;
 };
 
 /**

package/components/hy-subsection/props.ts

@@ -5,8 +5,8 @@ const defaultProps: IProps = {
   modelValue: "",
   current: 0,
   list: [],
-  fieldNames: {
-    label: "name",
+  customKeys: {
+    name: "name",
     value: "value",
   },
   activeColor: "",

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

@@ -24,7 +24,7 @@ export default interface HySubsectionProps {
   /**
    * @description list的键值
    * */
-  fieldNames?: HyApp.IFieldNames;
+  customKeys?: HyApp.IFieldNames;
   /**
    * @description 激活时的颜色（默认 '#3c9cff' ）
    * */

package/components/hy-tabBar/hy-tabBar.vue

@@ -0,0 +1,96 @@
+<template>
+  <view class="hy-tabBar--placeholder"></view>
+  <view class="hy-tabBar">
+    <view class="hy-tabBar--box" :style="{ backgroundColor: barBgColor }">
+      <view class="hy-tabBar--container">
+        <view
+          :class="[
+            'hy-tabBar--container__item',
+            'list',
+            current === i ? 'is-active' : '',
+          ]"
+          v-for="(item, i) in list"
+          :key="i"
+          @click="checkItem(i)"
+        >
+          <view class="hy-tabBar--container__item--bar">
+            <view class="icon">
+              <HyBadge
+                :value="item?.badge"
+                absolute
+                :offset="[-13, 25]"
+                :max="badge?.max"
+                :is-dot="badge?.isDot"
+                :inverted="badge?.inverted"
+                :bg-color="badge?.bgColor"
+                :type="badge?.type"
+                :number-type="badge?.numberType"
+                :shape="badge?.shape"
+                :show-zero="badge?.showZero"
+                :show="!!item?.badge"
+              ></HyBadge>
+              <HyIcon :name="item.icon" :color="color" size="25"></HyIcon>
+            </view>
+            <text class="text" :style="[{ color: color }]">{{
+              item.name
+            }}</text>
+            <text class="circle"></text>
+          </view>
+        </view>
+        <view
+          class="hy-tabBar--indicator"
+          :style="{
+            '--num': `translateX(calc(((100vw - 110rpx - ${list.length} * 70rpx) / ${list.length - 1} + 70rpx) * ${current}))`,
+            background: activeColor,
+          }"
+        ></view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref, toRefs, watch } from "vue";
+import defaultProps from "./props";
+import type IProps from "./typing";
+
+// 组件
+import HyIcon from "../hy-icon/hy-icon.vue";
+import HyBadge from "../hy-badge/hy-badge.vue";
+
+const props = withDefaults(defineProps<IProps>(), defaultProps);
+const { modelValue, baseBgColor } = toRefs(props);
+const emit = defineEmits(["clickTab"]);
+
+const baseBackgroundColor = baseBgColor.value
+  ? baseBgColor.value
+  : "var(--hy-background)";
+const current = ref(0);
+watch(
+  () => modelValue.value,
+  (newVal) => {
+    current.value = newVal;
+  },
+);
+
+const checkItem = (index: number) => {
+  current.value = index;
+  emit("clickTab", index);
+};
+</script>
+
+<style lang="scss" scoped>
+@import "./index.scss";
+.hy-tabBar {
+  background: v-bind(baseBackgroundColor);
+  &--indicator {
+    border: 12rpx solid v-bind(baseBackgroundColor);
+    &::before {
+      box-shadow: 1px -15rpx 0 v-bind(baseBackgroundColor);
+    }
+    &::after {
+      box-shadow: -1px -15rpx 0 v-bind(baseBackgroundColor);
+    }
+  }
+}
+</style>

package/components/hy-tabBar/index.scss

@@ -0,0 +1,169 @@
+@use "../../theme.scss" as *;
+@use "../../libs/css/mixin.scss" as *;
+
+@include b(tabBar) {
+  height: 135rpx;
+  z-index: 999;
+  position: fixed;
+  bottom: 0;
+  @include m(placeholder) {
+    height: 135rpx;
+    position: relative;
+    bottom: 0;
+  }
+
+  @include m(box) {
+    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 */
+    background-color: $hy-background--container;
+  }
+  @include m(container) {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 20rpx;
+    &__item {
+      position: relative;
+      width: 100rpx;
+      height: 70rpx;
+      z-index: 1;
+
+      /* #ifndef APP-PLUS-NVUE */
+      &:nth-child(1).is-active ~ .hy-tabBar--indicator {
+        transform: var(--num);
+      }
+
+      &:nth-child(2).is-active ~ .hy-tabBar--indicator {
+        transform: var(--num);
+      }
+
+      &:nth-child(3).is-active ~ .hy-tabBar--indicator {
+        transform: var(--num);
+      }
+
+      &:nth-child(4).is-active ~ .hy-tabBar--indicator {
+        transform: var(--num);
+      }
+
+      &:nth-child(5).is-active ~ .hy-tabBar--indicator {
+        transform: var(--num);
+      }
+      /* #endif */
+
+      &--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: 0.5s;
+          /* #endif */
+          position: relative;
+        }
+        .text {
+          position: absolute;
+          font-weight: 400;
+          font-size: 0.75em;
+          /* #ifndef APP-PLUS-NVUE */
+          letter-spacing: 0.05em;
+          transition: 0.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);
+        }
+      }
+
+      @include is(active) {
+        @include b(tabBar--container__item--bar) {
+          .icon {
+            transform: translate(2rpx, -56rpx);
+            :deep(.hy-icon) {
+              color: #FFFFFF;
+            }
+          }
+          .text {
+            opacity: 1;
+            transform: translateY(20rpx);
+          }
+          .circle {
+            /* #ifndef APP-PLUS-NVUE */
+            margin: 0 auto;
+            transition: 0.5s;
+            /* #endif */
+            transition-delay: 0.5s;
+            transform: translate(2rpx, -56rpx) scale(1);
+          }
+        }
+      }
+    }
+  }
+
+  @include m(indicator) {
+    position: absolute;
+    top: -59%;
+    left: 30rpx;
+    width: 100rpx;
+    height: 100rpx;
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: $hy-primary;
+    /* #ifndef APP-PLUS-NVUE */
+    transition: 0.5s;
+    /* #endif */
+
+    @include pseudo(before) {
+      /* #ifndef APP-PLUS-NVUE */
+      content: "";
+      /* #endif */
+      position: absolute;
+      top: 59%;
+      left: -45rpx;
+      width: 50rpx;
+      height: 40rpx;
+      background: transparent;
+      border-top-right-radius: 20px;
+    }
+
+    @include pseudo(after) {
+      /* #ifndef APP-PLUS-NVUE */
+      content: "";
+      /* #endif */
+      position: absolute;
+      top: 58%;
+      right: -49rpx;
+      width: 50rpx;
+      height: 40rpx;
+      background: transparent;
+      border-top-left-radius: 40rpx;
+    }
+  }
+}

package/components/hy-tabBar/props.ts

@@ -0,0 +1,13 @@
+import type IProps from "./typing";
+
+const defaultProps: IProps = {
+  modelValue: 0,
+  list: [],
+  color: "",
+  baseBgColor: "",
+  barBgColor: "",
+  activeColor: "",
+  badge: {},
+};
+
+export default defaultProps;