hy-app 0.2.1 → 0.2.2

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

@@ -0,0 +1,177 @@
+import type { CSSProperties } from "vue";
+
+export default interface HySignatureProps {
+  /**
+   * @description 签名笔颜色
+   * */
+  penColor?: string;
+  /**
+   * @description 签名笔宽度（默认 1 ）
+   * */
+  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 画板的背景色
+   * */
+  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 {