hy-app 0.7.2 → 0.7.3

package/README.md

@@ -1,6 +1,5 @@
 ## 在线使用文档地址
 - [华玥组件库文档(需要翻墙)](https://hy-component-docs.vercel.app/)
-- [华玥组件库文档(国内旧地址，2025-11-12之后域名过期)](https://www.gxh151.top)
 - [华玥组件库文档(国内新地址)](https://www.hy-design-uni.top)
 
 ## 📱 移动端预览
@@ -43,8 +42,19 @@ export function createApp () {
 </template>
 ```
 
+## 让 Volar/VS Code 识别组件
+```json
+// tsconfig.json
+{
+  "compilerOptions": {
+    "types": ["hy-app/global"]
+  }
+}
+```
+
 ## 在page.json文件里面配置按需引入组件
 ```json
+// page.json文件
 {
   "easycom": {
     "custom": {
@@ -53,3 +63,9 @@ export function createApp () {
   }
 }
 ```
+
+## 全局导入组件库样式（修改 uni.scss）
+```scss ./uni.scss
+// uni.scss文件
+@use "hy-app/index.scss" as *;
+```

package/components/hy-list/hy-list.vue

@@ -125,6 +125,20 @@ const heightCache = reactive<Record<number, number>>({})
 // 预估高度（用于首屏渲染）
 const estimatedHeight = computed(() => getPx(props.itemHeight) + getPx(props.marginBottom))
 
+/**
+ * 节流函数（返回新函数版本）
+ */
+const throttleFn = <T extends (...args: any[]) => void>(fn: T, wait: number = 16): T => {
+    let lastTime = 0
+    return ((...args: any[]) => {
+        const now = Date.now()
+        if (now - lastTime >= wait) {
+            lastTime = now
+            fn(...args)
+        }
+    }) as T
+}
+
 onMounted(() => {
     nextTick(async () => {
         const res = await getRect('.hy-virtual-container', false, instance)
@@ -264,9 +278,9 @@ watch(
 /**
  * 监听滚动条距离顶部距离，实时更新（带节流）
  */
-const onScroll = throttle((e: any) => {
+const onScroll = throttleFn((e: any) => {
     scrollTop.value = e.detail.scrollTop || 0
-}, 50)
+}, 16)
 
 /**
  * 滚动底部函数

package/components/hy-modal/props.ts

@@ -89,6 +89,6 @@ const modalProps = {
         type: String,
         default: 'left'
     }
-} as const
+}
 
 export default modalProps

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

@@ -1,16 +1,52 @@
-import type { ExtractPropTypes } from 'vue'
-// import modalProps from './props'
-
-// export interface HyModalProps extends ExtractPropTypes<typeof modalProps> {}
-
-export interface IModalEmits {
-    /** 点击确认按钮时触发 */
-    (e: 'confirm'): void
-    /** 点击取消按钮时触发 */
-    (e: 'cancel'): void
-    /** 点击遮罩关闭时触发 */
-    (e: 'close'): void
-    /** 更新值触发 */
-    (e: 'update:modelValue', show: boolean): void
-    (e: 'update:loading', show: boolean): void
-}
+export interface HyModalProps {
+    /** 是否显示模态框 */
+    modelValue: boolean
+    /** 标题内容 */
+    title?: string
+    /** 模态框内容 */
+    content?: string
+    /** 确认按钮的文字 */
+    confirmText?: string
+    /** 取消按钮的文字 */
+    cancelText?: string
+    /** 是否显示确认按钮 */
+    showConfirmButton?: boolean
+    /** 是否显示取消按钮 */
+    showCancelButton?: boolean
+    /** 确认按钮的颜色 */
+    confirmColor?: string
+    /** 取消按钮的颜色 */
+    cancelColor?: string
+    /** 对调确认和取消的位置 */
+    buttonReverse?: boolean
+    /** 是否开启缩放模式 */
+    zoom?: boolean
+    /** 弹窗的圆角 */
+    round?: string | number
+    /** 点击确认按钮自动关闭 */
+    autoClose?: boolean
+    /** 加载按钮 */
+    loading?: boolean
+    /** 是否允许点击遮罩关闭Modal */
+    closeOnClickOverlay?: boolean
+    /** 往上偏移的值 */
+    negativeTop?: number
+    /** modal宽度 */
+    width?: string | number
+    /** 确认按钮的样式 */
+    confirmButtonShape?: 'circle' | 'square'
+    /** 文案对齐方式 */
+    contentTextAlign?: 'left' | 'center' | 'right'
+}
+
+export interface IModalEmits {
+    /** 点击确认按钮时触发 */
+    (e: 'confirm'): void
+    /** 点击取消按钮时触发 */
+    (e: 'cancel'): void
+    /** 点击遮罩关闭时触发 */
+    (e: 'close'): void
+    /** 更新值触发 */
+    (e: 'update:modelValue', show: boolean): void
+    (e: 'update:loading', show: boolean): void
+}

package/components/hy-number-step/hy-number-step.vue

@@ -175,7 +175,6 @@ const format = (value: number | string): number => {
     // 对比最大最小值，取在min和max之间的值
     value = Math.max(Math.min(props.max, value), props.min)
     // 如果设定了最大的小数位数，使用toFixed去进行格式化
-    console.log(value, 111)
     if (props.decimalLength !== null) {
         value = parseFloat(value.toFixed(props.decimalLength))
     }
@@ -197,7 +196,6 @@ watch(
         if (newValue !== currentValue.value) {
             currentValue.value = format(props.modelValue)
         }
-        console.log(currentValue.value)
     },
     { immediate: true }
 )

package/libs/common/versionControl.ts

@@ -107,11 +107,12 @@ export const appInit = {
 
     /**
      * 比较版本号
-     * 1:服务器版本大
-     * 0:相等
-     * -1:本地版本大
-     * @param serverVersion 最新版本
+     * @param serverVersion 服务端版本
      * @param localVersion 本地版本
+     * @returns
+     *  1: 服务端版本更高
+     *  0: 版本相同
+     * -1: 本地版本更高
      */
     compareVersion(serverVersion: string, localVersion: string) {
         if (!serverVersion || !localVersion) return 0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "hy-app",
-    "version": "0.7.2",
+    "version": "0.7.3",
     "description": "📱一个基于vue3+ts构建的uni-app组件库,拥有八十多个精美组件，适配多端，支持自定义主题",
     "main": "./index.ts",
     "private": false,

package/libs/composables/useTouch.md

@@ -1,237 +0,0 @@
-# useTouch 触摸事件组合式 API
-
-## 功能介绍
-
-`useTouch` 是一个基于 Vue 3 Composition API 的触摸事件处理钩子，用于跟踪和分析用户的触摸操作，包括触摸方向、位移距离等信息。
-
-- 支持跟踪触摸的水平和垂直方向
-- 提供实时的位移数据
-- 支持响应式状态管理
-- 轻量简洁，易于集成
-
-## 引入方式
-
-```typescript
-import { useTouch } from '@/package/libs/composables/useTouch'
-```
-
-## API 文档
-
-### useTouch()
-
-创建并返回触摸事件处理实例，包含触摸事件处理函数和触摸状态。
-
-**返回值**：包含以下属性的对象：
-
-| 返回值 | 类型 | 说明 |
-|--------|------|------|
-| touchStart | (event: any) => void | 触摸开始事件处理函数 |
-| touchMove | (event: any) => void | 触摸移动事件处理函数 |
-| direction | Ref<string> | 触摸方向，值为 "horizontal"（水平）、"vertical"（垂直）或 ""（未确定） |
-| deltaX | Ref<number> | 水平方向位移，正数表示向右，负数表示向左 |
-| deltaY | Ref<number> | 垂直方向位移，正数表示向下，负数表示向上 |
-| offsetX | Ref<number> | 水平方向位移的绝对值 |
-| offsetY | Ref<number> | 垂直方向位移的绝对值 |
-| startX | Ref<number> | 触摸开始时的 X 坐标 |
-| startY | Ref<number> | 触摸开始时的 Y 坐标 |
-
-## 使用示例
-
-### 基础用法
-
-```vue
-<template>
-  <div 
-    class="touch-area"
-    @touchstart="touchStart"
-    @touchmove="touchMove"
-  >
-    <div class="info">
-      <p>触摸方向: {{ direction }}</p>
-      <p>水平位移: {{ deltaX }}px</p>
-      <p>垂直位移: {{ deltaY }}px</p>
-      <p>水平偏移: {{ offsetX }}px</p>
-      <p>垂直偏移: {{ offsetY }}px</p>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useTouch } from '@/package/libs/composables/useTouch'
-
-const {
-  touchStart,
-  touchMove,
-  direction,
-  deltaX,
-  deltaY,
-  offsetX,
-  offsetY
-} = useTouch()
-</script>
-
-<style scoped>
-.touch-area {
-  width: 100%;
-  height: 300px;
-  background-color: #f5f5f5;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 8px;
-  touch-action: none;
-}
-
-.info {
-  text-align: center;
-  font-size: 14px;
-  color: #333;
-}
-
-.info p {
-  margin: 8px 0;
-}
-</style>
-```
-
-### 高级用法 - 实现滑动手势
-
-```vue
-<template>
-  <div 
-    class="swipe-container"
-    @touchstart="touchStart"
-    @touchmove="touchMove"
-    @touchend="touchEnd"
-  >
-    <div 
-      class="swipe-content"
-      :style="{
-        transform: `translateX(${swipeOffset}px)`
-      }"
-    >
-      滑动内容区域
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, computed } from 'vue'
-import { useTouch } from '@/package/libs/composables/useTouch'
-
-const {
-  touchStart,
-  touchMove,
-  direction,
-  deltaX
-} = useTouch()
-
-const swipeOffset = ref(0)
-const maxSwipeOffset = 100
-
-const touchEnd = () => {
-  if (direction.value === 'horizontal') {
-    if (deltaX.value > 50) {
-      // 向右滑动超过阈值
-      swipeOffset.value = maxSwipeOffset
-    } else if (deltaX.value < -50) {
-      // 向左滑动超过阈值
-      swipeOffset.value = -maxSwipeOffset
-    } else {
-      // 复位
-      swipeOffset.value = 0
-    }
-  }
-}
-</script>
-
-<style scoped>
-.swipe-container {
-  width: 100%;
-  height: 100px;
-  overflow: hidden;
-  position: relative;
-  background-color: #f5f5f5;
-  border-radius: 8px;
-}
-
-.swipe-content {
-  width: 100%;
-  height: 100%;
-  background-color: #409eff;
-  color: white;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: transform 0.3s ease;
-}
-</style>
-```
-
-## 技术实现
-
-### 核心原理
-
-1. **响应式状态管理**：使用 Vue 3 的 `ref` 创建响应式变量，跟踪触摸状态
-2. **触摸事件处理**：通过 `touchStart` 和 `touchMove` 函数处理触摸事件
-3. **方向判断**：根据水平和垂直位移的绝对值大小判断触摸方向
-4. **位移计算**：实时计算触摸点的位移距离和偏移量
-
-### 关键函数
-
-#### touchStart(event: any)
-
-触摸开始时的事件处理函数，初始化所有状态变量。
-
-- **参数**：`event` - 触摸事件对象
-- **功能**：
-  - 获取第一个触摸点
-  - 重置方向和位移状态
-  - 记录触摸开始的坐标位置
-
-#### touchMove(event: any)
-
-触摸移动时的事件处理函数，计算位移和方向。
-
-- **参数**：`event` - 触摸事件对象
-- **功能**：
-  - 获取当前触摸点
-  - 计算水平和垂直方向的位移
-  - 计算位移的绝对值
-  - 根据位移绝对值判断触摸方向
-
-## 返回值详解
-
-| 返回值 | 类型 | 说明 |
-|--------|------|------|
-| touchStart | Function | 触摸开始事件处理函数，需绑定到元素的 @touchstart 事件 |
-| touchMove | Function | 触摸移动事件处理函数，需绑定到元素的 @touchmove 事件 |
-| direction | Ref<string> | 触摸方向，值为 "horizontal"（水平）、"vertical"（垂直）或 ""（未确定） |
-| deltaX | Ref<number> | 水平方向位移，正数表示向右，负数表示向左 |
-| deltaY | Ref<number> | 垂直方向位移，正数表示向下，负数表示向上 |
-| offsetX | Ref<number> | 水平方向位移的绝对值 |
-| offsetY | Ref<number> | 垂直方向位移的绝对值 |
-| startX | Ref<number> | 触摸开始时的 X 坐标 |
-| startY | Ref<number> | 触摸开始时的 Y 坐标 |
-
-## 注意事项
-
-1. **事件绑定**：需要在目标元素上同时绑定 `@touchstart` 和 `@touchmove` 事件
-2. **触摸设备**：此钩子仅在支持触摸事件的设备上有效
-3. **性能优化**：对于频繁的触摸移动事件，可以考虑使用 `passive` 事件监听器或节流处理
-4. **浏览器兼容性**：不同浏览器对触摸事件的实现可能存在差异，建议在主要目标设备上进行测试
-5. **事件对象类型**：当前实现中 `event` 参数类型为 `any`，在 TypeScript 项目中可以根据需要定义更具体的类型
-
-## 应用场景
-
-1. **滑动手势识别**：如左右滑动切换内容、上下滑动刷新等
-2. **拖拽功能**：实现元素的拖拽移动
-3. **手势密码**：辅助实现手势密码功能
-4. **游戏控制**：用于游戏中的触摸控制
-5. **交互式组件**：如滑块、滑动菜单等组件的实现
-
-## 总结
-
-`useTouch` 是一个轻量级的触摸事件处理钩子，提供了简单而强大的触摸状态跟踪功能。通过使用它，开发者可以轻松实现各种基于触摸的交互效果，提升应用的用户体验。
-
-该钩子返回的响应式状态和事件处理函数可以与 Vue 3 的组合式 API 无缝集成，适用于各种需要触摸交互的场景。