hy-app 0.2.1 → 0.2.4

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

@@ -0,0 +1,181 @@
+import type { CSSProperties } from "vue";
+
+export default interface HySignatureProps {
+  /**
+   * @description 签名笔颜色
+   * */
+  penColor?: string;
+  /**
+   * @description 签名笔宽度（默认 2 ）
+   * */
+  lineWidth?: number;
+  /**
+   * @description 清空按钮的文本
+   * */
+  clearText?: string;
+  /**
+   * @description 撤回按钮的文本
+   * */
+  revokeText?: string;
+  /**
+   * @description 恢复按钮的文本
+   * */
+  restoreText?: string;
+  /**
+   * @description 确认按钮的文本
+   * */
+  confirmText?: string;
+  /**
+   * @description 目标文件的类型（默认 png ）
+   * */
+  fileType?: string;
+  /**
+   * @description 签名笔颜色
+   * */
+  quality?: number;
+  /**
+   * @description 目标文件的质量（默认 1 ）
+   * */
+  exportScale?: number;
+  /**
+   * @description 是否禁用签名板（默认 false ）
+   * */
+  disabled?: boolean;
+  /**
+   * @description 画布的高度
+   * */
+  height?: number;
+  /**
+   * @description 画布的宽度
+   * */
+  width?: number;
+  /**
+   * @description 边框圆角
+   * */
+  round?: string | number;
+  /**
+   * @description 画板的背景色
+   * */
+  backgroundColor?: string;
+  /**
+   * @description 是否禁用画布滚动（默认 true ）
+   * */
+  disableScroll?: boolean;
+  /**
+   * @description 是否开启历史记录（默认 false ）
+   * */
+  enableHistory?: boolean;
+  /**
+   * @description 撤回和恢复的步长（默认 1 ）
+   * */
+  step?: number;
+  /**
+   * @description 撤回按钮的文本（默认 撤销 ）
+   * */
+  undoText?: string;
+  /**
+   * @description 恢复按钮的文本（默认 恢复 ）
+   * */
+  redoText?: string;
+  /**
+   * @description 是否启用压感模式（默认 false ）
+   * */
+  pressure?: boolean;
+  /**
+   * @description 压感模式下笔画最小宽度（默认 2 ）
+   * */
+  minWidth?: number;
+  /**
+   * @description 压感模式下笔画最大宽度（默认 6 ）
+   * */
+  maxWidth?: number;
+  /**
+   * @description 最小速度阈值，影响压感模式下的笔画宽度变化（默认 1.5 ）
+   * */
+  minSpeed?: number;
+  /**
+   * @description 定义需要用到的外部样式
+   * */
+  customStyle?: CSSProperties;
+}
+
+/**
+ * 签名结果类型
+ * @property tempFilePath - 生成图片的临时路径
+ * @property success - 是否成功生成图片
+ * @property width - 生成图片的宽度
+ * @property height - 生成图片的高度
+ */
+export type SignatureResult = {
+  tempFilePath: string;
+  success: boolean;
+  width: number;
+  height: number;
+};
+
+/**
+ * 签名线条类型
+ * @property points - 线条所包含的所有点的数组
+ * @property color - 线条颜色
+ * @property width - 线条宽度
+ * @property backgroundColor - 线条背景色 (可选)
+ * @property isPressure - 是否为笔锋模式的线条 (可选)
+ */
+export interface Line {
+  points: Point[];
+  color: string;
+  width: number;
+  backgroundColor?: string;
+  isPressure?: boolean;
+}
+
+/**
+ * 签名点位类型
+ * @property x - 点的横坐标
+ * @property y - 点的纵坐标
+ * @property t - 点的时间戳
+ * @property speed - 当前点的绘制速度 (可选)
+ * @property distance - 与上一个点的距离 (可选)
+ * @property lineWidth - 当前点的线宽 (可选，用于笔锋模式)
+ * @property lastX1 - 贝塞尔曲线第一个控制点的x坐标 (可选)
+ * @property lastY1 - 贝塞尔曲线第一个控制点的y坐标 (可选)
+ * @property lastX2 - 贝塞尔曲线第二个控制点的x坐标 (可选)
+ * @property lastY2 - 贝塞尔曲线第二个控制点的y坐标 (可选)
+ * @property isFirstPoint - 是否为线条的第一个点 (可选)
+ */
+export interface Point {
+  x: number;
+  y: number;
+  t: number;
+  speed?: number;
+  distance?: number;
+  lineWidth?: number;
+  lastX1?: number;
+  lastY1?: number;
+  lastX2?: number;
+  lastY2?: number;
+  isFirstPoint?: boolean;
+}
+
+/**
+ * 签名组件暴露的方法类型
+ * @property init - 初始化签名板
+ * @property clear - 清除签名
+ * @property confirm - 确认签名并生成图片
+ * @property restore - 恢复上一步操作
+ * @property revoke - 撤销上一步操作
+ */
+export type SignatureExpose = {
+  /** 初始化签名板
+   * @param forceUpdate - 是否强制更新
+   */
+  init: (forceUpdate?: boolean) => void;
+  /** 点击清除按钮清除签名 */
+  clear: () => void;
+  /** 点击确定按钮 */
+  confirm: () => void;
+  /* 点击恢复 */
+  restore: () => void;
+  /* 点击撤回 */
+  revoke: () => void;
+};

package/components/hy-slider/index.scss

@@ -33,7 +33,8 @@
   }
 
   &__base {
-    background-color: #ebedf0;
+    background-color: $hy-background--empty;
+    border-radius: $hy-border-radius-semicircle;
   }
 
   /* #ifndef APP-NVUE */
@@ -53,6 +54,9 @@
     border-radius: $hy-border-radius-semicircle;
     transition: width 0.2s;
     background-color: $hy-primary;
+    &-0 {
+      background-color: $hy-background--empty;
+    }
   }
 
   &__button {

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' ）
    * */