hy-app 0.2.0 → 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 {
@@ -60,7 +64,7 @@
     height: 24px;
     border-radius: 50%;
     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
-    background-color: #fff;
+    background-color: $hy-background--3;
     transform: scale(0.9);
     /* #ifdef H5 */
     cursor: pointer;

package/components/hy-slider/props.ts

@@ -8,8 +8,8 @@ const defaultProps: IProps = {
   max: 100,
   step: 1,
   activeColor: "",
-  inactiveColor: "#c0c4cc",
-  blockColor: "#ffffff",
+  inactiveColor: "",
+  blockColor: "",
   showValue: false,
   disabled: false,
   useNative: false,

package/components/hy-steps/hy-steps.vue

@@ -8,7 +8,11 @@
         <!--	线条	-->
         <view
           v-if="i > 0"
-          :class="[`hy-steps-item__line--${direction}`, 'hy-steps-item__line', statusClass(i, item.error)]"
+          :class="[
+            `hy-steps-item__line--${direction}`,
+            'hy-steps-item__line',
+            statusClass(i, item.error),
+          ]"
           :style="lineStyle(item, i)"
         ></view>
         <!--	线条	-->
@@ -18,13 +22,16 @@
           :class="[
             `hy-steps-item__wrapper--${direction}`,
             dot ? `hy-steps-item__wrapper--dot` : statusClass(i, item.error),
-            'hy-steps-item__wrapper'
+            'hy-steps-item__wrapper',
           ]"
           :style="itemStyleInner"
         >
           <slot name="icon" :error="item?.error" :index="i">
             <view
-              :class="['hy-steps-item__wrapper--dot__item', `hy-steps-item__wrapper--dot__${statusClass(i, item.error)}`]"
+              :class="[
+                'hy-steps-item__wrapper--dot__item',
+                `hy-steps-item__wrapper--dot__${statusClass(i, item.error)}`,
+              ]"
               v-if="dot"
               :style="{
                 backgroundColor: statusColor(i, item?.error),
@@ -90,10 +97,12 @@
           <slot name="content" :record="item" :index="i">
             <slot name="title" :title="item.title" :index="i">
               <text
+                :class="[
+                  current == i && 'hy-steps-item__content__title--active',
+                ]"
                 :style="{
                   lineHeight: '20px',
                   fontSize: current == i ? '14px' : '13px',
-                  color: i == current ? '#2c405a' : '#555555',
                 }"
                 >{{ item.title }}</text
               >
@@ -113,28 +122,37 @@
 
 <script lang="ts">
 export default {
-  name: 'hy-steps',
+  name: "hy-steps",
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: 'shared'
-  }
-}
+    styleIsolation: "shared",
+  },
+};
 </script>
 
 <script setup lang="ts">
-import {computed, type CSSProperties, toRefs, ref, onMounted, getCurrentInstance, watch} from "vue";
+import {
+  computed,
+  type CSSProperties,
+  toRefs,
+  ref,
+  onMounted,
+  getCurrentInstance,
+  watch,
+} from "vue";
 import defaultProps from "./props";
 import type IProps from "./typing";
 import type { StepListVo } from "./typing";
-import {addUnit, getRect} from "../../utils";
+import { addUnit, getRect } from "../../utils";
 import { ColorConfig, IconConfig } from "../../config";
 
 // 组件
 import HyIcon from "../hy-icon/hy-icon.vue";
 
 const props = withDefaults(defineProps<IProps>(), defaultProps);
-const { current, list, direction, dot, inactiveColor, activeColor } = toRefs(props);
+const { current, list, direction, dot, inactiveColor, activeColor } =
+  toRefs(props);
 const emit = defineEmits(["click", "update:current"]);
 
 const size = ref<UniApp.NodeInfo>({
@@ -144,14 +162,14 @@ const size = ref<UniApp.NodeInfo>({
 const instance = getCurrentInstance();
 
 watch(
-    () => current.value,
-    (newVal: number) => {
-      if(list.value[newVal - 1]?.error) {
-        const index = list.value.findIndex(item => item.error);
-        emit("update:current", index);
-      }
+  () => current.value,
+  (newVal: number) => {
+    if (list.value[newVal - 1]?.error) {
+      const index = list.value.findIndex((item) => item.error);
+      emit("update:current", index);
     }
-)
+  },
+);
 
 /**
  * @description 线条样式
@@ -164,10 +182,10 @@ const lineStyle = computed(() => {
       style.left = addUnit(-size.value.width! / 2 + 12);
     } else {
       style.height = addUnit(size.value.height! - 30);
-      style.top = addUnit(25)
+      style.top = addUnit(25);
     }
     style.backgroundColor = temp.error
-      ? ''
+      ? ""
       : index < current.value
         ? activeColor.value
         : inactiveColor.value;

package/components/hy-steps/index.scss

@@ -1,20 +1,6 @@
 @use "../../theme.scss" as *;
 @use "../../libs/css/mixin.scss" as *;
 
-/* 暗色主题 */
-@include b(theme){
-  @include m(dark) {
-    @include b(steps) {
-      //color: $hy-dark-color;
-      &__wrapper__nav__item--active {
-        .hy-tabs__wrapper__nav__item--text {
-          color: $hy-dark-color;
-        }
-      }
-    }
-  }
-}
-
 @include b(steps) {
   @include flex;
 
@@ -104,14 +90,14 @@
         flex-shrink: 0;
         /* #endif */
         border-radius: $hy-border-radius-semicircle;
-        border: 1px solid $hy-tips-color;
+        border: $hy-border-line;
         @include flex(row);
         align-items: center;
         justify-content: center;
         transition: background-color 0.3s;
 
         &__text {
-          color: $hy-tips-color;
+          color: $hy-text-color--grey;
           font-size: 11px;
           @include flex(row);
           align-items: center;
@@ -125,6 +111,9 @@
     &__content {
       @include flex;
       flex: 1;
+      &__title--active {
+        color: $hy-primary;
+      }
 
       &--row {
         flex-direction: column;
@@ -142,7 +131,7 @@
     /* 线条样式 */
     &__line {
       position: absolute;
-      background: $hy-tips-color;
+      background: $hy-border-color;
 
       &.finish {
         background-color: $hy-primary;

package/components/hy-submit-bar/index.scss

@@ -1,18 +1,10 @@
 @use "../../theme.scss" as *;
 @use "../../libs/css/mixin.scss" as *;
 
-/* 暗色主题 */
-@include b(theme){
-  @include m(dark) {
-    @include b(submit-bar) {
-      background-color: $hy-dark-background;
-    }
-  }
-}
 
 @include b(submit-bar) {
   display: flex;
-  background-color: $hy-light-background-color;
+  background-color: $hy-background--container;
   padding: $hy-border-margin-padding-base;
   width: 100%;
   box-sizing: border-box;

package/components/hy-subsection/index.scss

@@ -1,20 +1,6 @@
 @use "../../theme.scss" as *;
 @use "../../libs/css/mixin.scss" as *;
 
-/* 暗色主题 */
-@include b(theme){
-  @include m(dark) {
-    @include b(subsection) {
-      color: $hy-dark-color;
-      @include m(button) {
-        background-color: $hy-dark-background--track;
-        &__bar {
-          background-color: $hy-dark-background--container;
-        }
-      }
-    }
-  }
-}
 
 @include b(subsection) {
   @include flex;
@@ -27,13 +13,13 @@
 
   @include m(button) {
     height: 35px;
-    background-color: rgb(238, 238, 239);
+    background-color: $hy-background--3;
     padding: 3px;
     border-radius: $hy-border-radius-sm;
     align-items: stretch;
 
     &__bar {
-      background-color: #ffffff;
+      background-color: $hy-background--container !important;
       border-radius: $hy-border-radius-sm;
     }
   }