hy-app 0.5.6 → 0.5.8

package/components/hy-card/index.scss

@@ -0,0 +1,73 @@
+@use "../../libs/css/mixin.scss" as *;
+@use "../../libs/css/theme" as *;
+
+
+@include b(card) {
+  position: relative;
+  overflow: hidden;
+  font-size: 28rpx;
+  background-color: $hy-background--container;
+  box-sizing: border-box;
+
+  @include e(full) {
+    margin-left: $hy-border-margin-padding-base !important;
+    margin-right: $hy-border-margin-padding-base !important;
+  }
+
+  @include m(border) {
+    @include pseudo(after) {
+      border-radius: 16rpx;
+    }
+  }
+
+  /* 头部 */
+  @include e(head) {
+    padding: 20rpx 20rpx 10rpx;
+    @include m(flex) {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+
+    @include m(left) {
+      display: flex;
+      align-items: center;
+      flex: 1;
+
+      @include edeep(thumb) {
+        margin-right: $hy-border-margin-padding-base;
+        flex-shrink: 0
+      }
+
+      @include e(title) {
+        max-width: 400rpx;
+        font-size: $hy-font-size-base;
+        @include lineEllipsis;
+      }
+
+      @include e(sub) {
+        color: $hy-text-color--grey;
+        font-size: $hy-font-size-sm;
+      }
+    }
+
+    @include m(right) {
+      color: $hy-text-color--grey;
+      margin-left: $hy-border-margin-padding-sm;
+
+      @include e(text) {
+        white-space: nowrap;
+      }
+    }
+  }
+
+  /* 身体 */
+  @include e(body) {
+    padding: 10rpx 20rpx 10rpx;
+  }
+
+  /* 尾部 */
+  @include e(foot) {
+    padding: 10rpx 20rpx 20rpx;
+  }
+}

package/components/hy-float-button/hy-float-button.vue

@@ -79,7 +79,7 @@ import { computed, getCurrentInstance, onMounted, ref, reactive, watch } from 'v
 import type { CSSProperties } from 'vue'
 import type { IFloatButtonEmits } from './typing'
 import type { MenusType } from './typing'
-import { addUnit, getPx, getRect, guid, isH5 } from '../../libs'
+import { addUnit, debounce, getPx, getRect, guid, isH5, throttle } from '../../libs'
 import floatButtonProps from './props'
 // 组件
 import HyIcon from '../hy-icon/hy-icon.vue'
@@ -133,7 +133,7 @@ watch(
 )
 
 /**
- * @description 初始化距离
+ * 初始化距离
  * */
 const initPosition = () => {
     const { minLeft, minTop, maxLeft, maxTop } = bounding
@@ -193,7 +193,7 @@ const initPosition = () => {
 }
 
 /**
- * @description 获取组件大小
+ * 获取组件大小
  * */
 const getFloatBtnSize = computed(() => {
     if (typeof props.size === 'string' && Object.keys(btnSize).includes(props.size)) {
@@ -204,16 +204,15 @@ const getFloatBtnSize = computed(() => {
 })
 
 /**
- * @description 悬浮按钮样式
+ * 悬浮按钮样式
  * */
 const FloatButtonStyle = computed(() => {
     const style: CSSProperties = {
-        top: currentCoordinate.top + 'px',
-        left: currentCoordinate.left + 'px',
+        top: `${currentCoordinate.top}px`,
+        left: `${currentCoordinate.left}px`,
         backgroundColor: props.bgColor,
         zIndex: props.zIndex,
-        color: props.textColor,
-        transition: 'all ease 0.3s'
+        color: props.textColor
     }
     if (props.fixed) style.position = 'fixed'
 
@@ -267,7 +266,7 @@ const menusStyle = computed(() => {
 })
 
 /**
- * @description 获取悬浮按钮大小
+ * 获取悬浮按钮大小
  * */
 const getFatRect = () => {
     return new Promise((resolve, reject) => {
@@ -285,7 +284,7 @@ const getFatRect = () => {
 }
 
 /**
- * @description 点击悬浮按钮
+ * 点击悬浮按钮
  * */
 const handleClick = () => {
     emit('click')
@@ -295,7 +294,7 @@ const handleClick = () => {
 }
 
 /**
- * @description 点击单条菜单栏
+ * 点击单条菜单栏
  * */
 const handleMenuItemClick = (temp: MenusType, index: number) => {
     emit('clickItem', temp, index)

package/components/hy-float-button/index.scss

@@ -14,18 +14,18 @@
     box-shadow: $hy-box-shadow;
   }
 
-  @include e(animation) {
-    animation: floatAnimation 2s ease-in-out infinite;
-    @keyframes floatAnimation {
-      0%,
-      100% {
-        transform: translateY(0); /* 初始位置 */
-      }
-      50% {
-        transform: translateY(-20px); /* 上浮20像素 */
-      }
-    }
-  }
+  //@include e(animation) {
+  //  animation: floatAnimation 2s ease-in-out infinite;
+  //  @keyframes floatAnimation {
+  //    0%,
+  //    100% {
+  //      transform: translateY(0); /* 初始位置 */
+  //    }
+  //    50% {
+  //      transform: translateY(-20px); /* 上浮20像素 */
+  //    }
+  //  }
+  //}
 
   @include e(container) {
     border-radius: 50%;

package/components/hy-input/hy-input.vue

@@ -152,7 +152,6 @@ watch(
             changeFromInner.value = false
             return
         }
-        console.log(newVal, 'newVal')
         innerValue.value = newVal
         // 在H5中，外部value变化后，修改input中的值，不会触发@input事件，此时手动调用值变化方法
         if (!firstChange.value && !changeFromInner.value) {

package/components/hy-rolling-num/README.md

@@ -0,0 +1,137 @@
+# hy-rolling-num 滚动数字组件
+
+## 介绍
+
+滚动数字组件，用于实现数字从初始值（全0）平滑滚动到目标值的动画效果。当数字变化时，会先显示与目标值长度相同的全0字符串，然后通过平滑的滚动动画过渡到目标值。
+
+## 特性
+
+- 支持自定义数字大小、颜色、字体粗细
+- 支持设置滚动方向（向上、向下、交替）
+- 支持设置动画持续时间和延迟步进
+- 自动根据目标值长度生成对应长度的初始值（全0）
+- 支持特殊字符（非数字字符会直接显示，不会参与滚动）
+
+## 使用方法
+
+### 基本用法
+
+```vue
+<template>
+  <view class="demo">
+    <hy-rolling-num :value="num" :size="'48rpx'" :color="'#1989fa'" />
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import HyRollingNum from '@/package/components/hy-rolling-num/hy-rolling-num.vue';
+
+// 初始值为0，当更新为234564时，会先显示000000然后滚动到234564
+const num = ref(234564);
+</script>
+```
+
+### 自定义配置
+
+```vue
+<hy-rolling-num 
+  :value="num" 
+  :size="'36rpx'" 
+  :color="'#ff6b6b'"
+  :font-weight="'bold'"
+  :duration="2"
+  :scroll-direction="'down'"
+  :stop-order="'right-to-left'"
+  :delay-step="0.15"
+/>
+```
+
+## Props
+
+| 参数名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| value | number \| string | 0 | 要显示的数字或字符串值 |
+| size | string | '32rpx' | 数字字体大小 |
+| color | string | '#333' | 数字颜色 |
+| fontWeight | string \| number | 'normal' | 字体粗细 |
+| height | string | '40rpx' | 单个数字的高度 |
+| duration | number | 1.5 | 滚动动画持续时间（秒） |
+| letterSpacing | string | '0' | 数字间距 |
+| scrollDirection | 'up' \| 'down' \| 'alternate' | 'up' | 滚动方向：向上、向下或交替 |
+| stopOrder | 'left-to-right' \| 'right-to-left' | 'left-to-right' | 滚动停止顺序：从左到右或从右到左 |
+| delayStep | number | 0.1 | 每个数字滚动的延迟时间间隔（秒） |
+| customStyle | CSSProperties | {} | 自定义样式对象 |
+
+## 示例
+
+### 示例1：基本滚动效果
+
+```vue
+<template>
+  <view>
+    <text>滚动数字：</text>
+    <hy-rolling-num :value="234564" />
+    <!-- 会先显示 000000，然后滚动到 234564 -->
+  </view>
+</template>
+```
+
+### 示例2：改变数字长度
+
+```vue
+<template>
+  <view>
+    <button @click="changeValue(234)">显示 234</button>
+    <button @click="changeValue(987654321)">显示 987654321</button>
+    <hy-rolling-num :value="displayValue" />
+    <!-- 点击第一个按钮：显示 000 -> 234 -->
+    <!-- 点击第二个按钮：显示 000000000 -> 987654321 -->
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const displayValue = ref(0);
+
+const changeValue = (val: number) => {
+  displayValue.value = val;
+};
+</script>
+```
+
+### 示例3：自定义滚动方向和动画
+
+```vue
+<template>
+  <view>
+    <hy-rolling-num 
+      :value="num" 
+      :scroll-direction="'alternate'" 
+      :duration="1.2"
+      :delay-step="0.08"
+    />
+    <!-- 交替方向滚动，奇偶位滚动方向相反 -->
+  </view>
+</template>
+```
+
+## 注意事项
+
+1. 组件会自动根据传入的 `value` 长度生成对应长度的全0初始值
+2. 当 `value` 为字符串时，非数字字符会直接显示，不会参与滚动动画
+3. 滚动动画的实现依赖于CSS的transform属性，确保在支持该属性的环境中使用
+4. 动画延迟时间总和不宜过长，以免影响用户体验
+5. 当需要频繁更新数字时，建议控制更新频率，避免动画效果过于密集
+
+## 常见问题
+
+### Q: 为什么数字变化时会先显示全0？
+A: 这是组件的设计特性，用于实现从初始状态到目标状态的滚动动画效果，增强视觉体验。
+
+### Q: 如何调整滚动速度？
+A: 通过调整 `duration` 属性可以控制整个滚动动画的持续时间，数值越小，滚动越快。
+
+### Q: 特殊字符会如何显示？
+A: 非数字字符（如小数点、货币符号等）会直接显示，不会参与滚动动画。

package/components/hy-rolling-num/hy-rolling-num.vue

@@ -0,0 +1,198 @@
+<template>
+    <view :class="['hy-rolling-num', customClass]" :style="containerStyle">
+        <view
+            v-for="(item, index) in renderList"
+            :key="index"
+            class="hy-rolling-num__column"
+            :style="{ height: addUnit(height), marginRight: letterSpacing }"
+        >
+            <view
+                v-if="item.isDigit"
+                class="hy-rolling-num__column--wrapper"
+                :style="{
+                    transform: item.transformValue,
+                    transition: `transform ${duration}s cubic-bezier(0.25, 1, 0.5, 1)`,
+                    transitionDelay: item.delay,
+                    height: '1200%' /* 12个数字，总高度1200% */
+                }"
+            >
+                <text
+                    v-for="(num, idx) in item.strip"
+                    :key="idx"
+                    class="hy-rolling-num__column--wrapper__digit"
+                    :style="textStyle"
+                >
+                    {{ num }}
+                </text>
+            </view>
+
+            <view
+                v-else
+                class="hy-rolling-num__column--symbol"
+                :style="{ height: addUnit(height), ...textStyleObject }"
+            >
+                {{ item.val }}
+            </view>
+        </view>
+    </view>
+</template>
+
+<script lang="ts">
+export default {
+    name: 'hy-rolling-num',
+    options: {
+        addGlobalClass: true,
+        virtualHost: true,
+        styleIsolation: 'shared'
+    }
+}
+</script>
+
+<script setup lang="ts">
+import { computed, ref, watch, type CSSProperties } from 'vue'
+import { addUnit } from '../../libs'
+import rollingNumProps from './props'
+
+/**
+ * 滚动数字组件，用于实现数字从初始值（全0）平滑滚动到目标值的动画效果。
+ * @displayName hy-rolling-num
+ */
+defineOptions({})
+
+const props = defineProps(rollingNumProps)
+
+// --- 核心逻辑：计算每列的配置 ---
+
+// **【修改点 1】** 定义包含冗余数字的数字条
+// 现在数字条有 12 个元素，每个元素占据 1/12 ≈ 8.33% 的高度
+const BASE_STRIP = [9, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0]
+const ITEM_HEIGHT_PERCENT = 100 / BASE_STRIP.length // 8.333%
+
+// 添加内部状态管理，用于控制初始值和目标值的切换
+const displayValue = ref('')
+
+// 监听value变化，实现从初始值到目标值的滚动
+watch(
+    () => props.value,
+    (newValue) => {
+        const newValueStr = String(newValue)
+        const newValueLen = newValueStr.length
+
+        // 创建对应长度的全0初始值
+        const initialValue = '0'.repeat(newValueLen)
+
+        // 先显示初始值
+        displayValue.value = initialValue
+
+        // 延迟一段时间后再显示目标值，以触发滚动动画
+        // 100ms是一个比较合理的值，确保DOM有足够时间更新
+        setTimeout(() => {
+            displayValue.value = newValueStr
+        }, 100)
+    },
+    { immediate: true }
+)
+
+const renderList = computed(() => {
+    const str = displayValue.value
+    const len = str.length
+    const arr = []
+
+    // 正序 stripUp (用于 'up')：数字顺序为 9 0 1 ... 9 0
+    const stripUp = BASE_STRIP
+    // 倒序 stripDown (用于 'down' 或 'alternate')：数字顺序为 0 9 8 ... 1 0 9
+    const stripDown = [...BASE_STRIP].reverse()
+
+    for (let i = 0; i < len; i++) {
+        const char = str[i]
+        const isDigit = /^\d$/.test(char)
+        const digitVal = isDigit ? parseInt(char, 10) : 0
+
+        // 1. 确定当前列的滚动方向
+        let isReversed = props.scrollDirection === 'down'
+        if (props.scrollDirection === 'alternate') {
+            isReversed = i % 2 !== 0
+        }
+
+        // 2. 根据方向决定使用哪种数字条
+        const currentStrip = isReversed ? stripDown : stripUp
+
+        // 3. 计算 Transform 位移：找到目标数字在数字条中的索引位置
+        // **【修改点 2】**
+        // 目标数字总是存在两次 (0-9)
+        // - 向上滚动 ('up') 时，使用 **第二个** 匹配的索引，即 0~9 的正常排列部分。
+        // - 向下滚动 ('down') 时，使用 **第一个** 匹配的索引。
+        let targetIndex = -1
+
+        if (
+            props.scrollDirection === 'up' ||
+            (props.scrollDirection === 'alternate' && !isReversed)
+        ) {
+            // 向上滚：目标是中间的 0-9 部分 (索引 1 到 10)
+            // 查找 0 到 9 中间的那个索引
+            targetIndex = currentStrip.indexOf(digitVal, 1)
+        } else {
+            // 向下滚或交替的反向滚：目标是中间的 0-9 部分
+            // 查找 0 到 9 中间的那个索引
+            // 查找第一个数字，如果是 0，则目标是索引 10 (倒数第二个)
+            targetIndex = currentStrip.lastIndexOf(digitVal, currentStrip.length - 2)
+        }
+
+        // 确保找到了有效索引
+        if (targetIndex === -1) {
+            // 理论上不会发生，作为降级处理
+            targetIndex = currentStrip.indexOf(digitVal)
+        }
+
+        const transformValue = `translate3d(0, -${targetIndex * ITEM_HEIGHT_PERCENT}%, 0)`
+
+        // 4. 计算延迟 (Staggering)
+        let delaySec = 0
+        if (props.stopOrder === 'ltr') {
+            delaySec = i * props.delayStep
+        } else {
+            delaySec = (len - 1 - i) * props.delayStep
+        }
+
+        arr.push({
+            val: char,
+            isDigit,
+            strip: currentStrip,
+            transformValue,
+            delay: `${delaySec}s`
+        })
+    }
+    return arr
+})
+
+// --- 样式计算部分省略，但注意要用到 ITEM_HEIGHT_PERCENT ---
+
+const containerStyle = computed<CSSProperties>(() => ({
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    overflow: 'hidden'
+}))
+
+const textStyleObject = computed<CSSProperties>(() => ({
+    fontSize: addUnit(props.size),
+    color: props.color,
+    fontWeight: props.fontWeight,
+    lineHeight: addUnit(props.height),
+    ...props.customStyle
+}))
+
+const textStyle = computed(() => {
+    let s = ''
+    const obj = textStyleObject.value
+    for (const key in obj) {
+        // @ts-ignore
+        s += `${key}:${obj[key]};`
+    }
+    return s
+})
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

package/components/hy-rolling-num/index.scss

@@ -0,0 +1,34 @@
+@use "../../libs/css/mixin.scss" as *;
+
+@include b(rolling-num) {
+  white-space: nowrap;
+
+  @include e(column) {
+    position: relative;
+    overflow: hidden;
+    display: inline-block;
+
+
+    @include m(wrapper) {
+      display: flex;
+      flex-direction: column;
+      will-change: transform;
+
+      @include e(digit) {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        /* 100% / 12 个数字 = 8.3333% */
+        height: 8.3333%;
+        flex-shrink: 0;
+      }
+
+    }
+
+    @include m(symbol) {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+}

package/components/hy-rolling-num/props.ts

@@ -0,0 +1,68 @@
+import type { CSSProperties, PropType } from 'vue'
+
+const rollingNumProps = {
+    /** 要显示的数字或字符串值 */
+    value: {
+        type: [String, Number],
+        default: 0
+    },
+    /** 数字字体大小 */
+    size: {
+        type: [String, Number],
+        default: '32rpx'
+    },
+    /** 数字颜色 */
+    color: {
+        type: String,
+        default: '#333'
+    },
+    /** 字体粗细 */
+    fontWeight: {
+        type: [String, Number],
+        default: 'normal'
+    },
+    /** 单个数字的高度 */
+    height: {
+        type: [String, Number],
+        default: '40rpx'
+    },
+    /** 滚动动画持续时间（秒） */
+    duration: {
+        type: Number,
+        default: 1.5
+    },
+    /** 数字间距 */
+    letterSpacing: {
+        type: [String, Number],
+        default: 0
+    },
+    /**
+     * 滚动方向：向上、向下或交替
+     * @values up,down,alternate
+     * */
+    scrollDirection: {
+        type: String,
+        default: 'up'
+    },
+    /**
+     * 滚动停止顺序：从左到右或从右到左
+     * @values ltr,rtl
+     * */
+    stopOrder: {
+        type: String,
+        default: 'ltr'
+    },
+    /** 每个数字滚动的延迟时间间隔（秒） */
+    delayStep: {
+        type: Number,
+        default: 0.1
+    },
+    /** 定义需要用到的外部样式 */
+    customStyle: {
+        type: Object as PropType<CSSProperties>
+    },
+    /** 自定义外部类名 */
+    customClass: String
+}
+
+export default rollingNumProps

package/components/hy-status-bar/typing.d.ts

@@ -0,0 +1,12 @@
+import type { CSSProperties } from 'vue'
+
+export default interface HyStatusBarProps {
+    /**
+     * @description 背景色 (默认 'transparent' )
+     * */
+    bgColor?: string
+    /**
+     * @description 自定义样式
+     * */
+    customStyle?: CSSProperties
+}