hy-app 0.6.8 → 0.7.0

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

@@ -1,9 +1,52 @@
-import type { ExtractPropTypes } from 'vue'
-import iconProps from './props'
-
-export interface HyIconProps extends ExtractPropTypes<typeof iconProps> {}
-
-export interface IIconEmits {
-    /** 点击图标触发 */
-    (e: 'click', index: string, e: Event): void
-}
+import type { CSSProperties } from 'vue'
+
+export interface HyIconProps {
+    /** 图标名称 */
+    name?: string
+    /** 图标颜色 */
+    color?: string
+    /** 图标字体大小，单位px */
+    size?: number | string
+    /** 是否显示粗体 */
+    bold?: boolean
+    /** 点击图标的时候传递事件出去的index（用于区分点击了哪一个） */
+    index?: string
+    /** 自定义扩展前缀，方便用户扩展自己的图标库 */
+    customPrefix?: string
+    /** 图标右侧的label文字 */
+    label?: string
+    /**
+     * label相对于图标的位置，只能right或bottom
+     * @values right,bottom
+     * */
+    labelPos?: string
+    /** label字体大小，单位px */
+    labelSize?: string
+    /** 图标右侧的label文字颜色 */
+    labelColor?: string
+    /** label与图标的距离，单位px */
+    space?: number | string
+    /** 图片的mode */
+    imgMode?: string
+    /** 显示图片小图标时的宽度 */
+    width?: string | number
+    /** 显示图片小图标时的高度 */
+    height?: string | number
+    /** 图标在垂直方向上的定位 用于解决某些情况下，让图标垂直居中的用途 */
+    top?: string | number
+    /** 是否阻止事件传播 */
+    stop?: boolean
+    /** 是否旋转 */
+    isRotate?: boolean
+    /** 图标圆角 */
+    round?: string | number
+    /** 定义需要用到的外部样式 */
+    customStyle?: CSSProperties
+    /** 自定义外部类名 */
+    customClass?: string
+}
+
+export interface IIconEmits {
+    /** 点击图标触发 */
+    (e: 'click', index: string, e: Event): void
+}

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

@@ -34,7 +34,7 @@
         justify-content: center;
         color: $hy-text-color--3;
         margin: 2rpx 0;
-        border-radius: $hy-border-radius-sm;
+        border-radius: $hy-radius-sm;
 
         @include is(active) {
           position: relative;

package/components/hy-keyboard/constants.ts

@@ -0,0 +1,83 @@
+/**
+ * 车牌号键盘-省份简称
+ */
+export const CAR_KEYBOARD_AREAS = [
+  '京',
+  '沪',
+  '粤',
+  '津',
+  '冀',
+  '豫',
+  '云',
+  '辽',
+  '黑',
+  '湘',
+  '皖',
+  '鲁',
+  '苏',
+  '浙',
+  '赣',
+  '鄂',
+  '桂',
+  '甘',
+  '晋',
+  '陕',
+  '蒙',
+  '吉',
+  '闽',
+  '贵',
+  '渝',
+  '川',
+  '青',
+  '琼',
+  '宁',
+  '挂',
+  '藏',
+  '港',
+  '澳',
+  '新',
+  '使',
+  '学'
+]
+
+/**
+ * 车牌号键盘-数字和字母（不包含I和O，因为车牌号规则中不使用这两个字母）
+ */
+export const CAR_KEYBOARD_KEYS = [
+    1,
+    2,
+    3,
+    4,
+    5,
+    6,
+    7,
+    8,
+    9,
+    0,
+    'Q',
+    'W',
+    'E',
+    'R',
+    'T',
+    'Y',
+    'U',
+    'I',
+    'O',
+    'P',
+    'A',
+    'S',
+    'D',
+    'F',
+    'G',
+    'H',
+    'J',
+    'K',
+    'L',
+    'Z',
+    'X',
+    'C',
+    'V',
+    'B',
+    'N',
+    'M'
+]

package/components/hy-keyboard/hy-keyboard.vue

@@ -0,0 +1,375 @@
+<template>
+    <!-- 虚拟键盘主组件 -->
+    <hy-popup
+        v-model:show="show"
+        position="bottom"
+        :z-index="zIndex"
+        :safe-area-inset-bottom="safeAreaInsetBottom"
+        :overlay="overlay"
+        :overlayOpacity="overlayOpacity"
+        :close-on-click-modal="hideOnClickOutside"
+        :lock-scroll="lockScroll"
+        @close="handleClose"
+    >
+        <view :class="`hy-keyboard ${customClass}`" :style="customStyle">
+            <!-- 头部区域（标题 + 关闭按钮） -->
+            <view class="hy-keyboard__header" v-if="showHeader">
+                <!-- 标题插槽 -->
+                <slot name="title" v-if="showTitle">
+                    <text class="hy-keyboard__title">{{ title }}</text>
+                </slot>
+                <!-- 关闭按钮 -->
+                <view
+                    class="hy-keyboard__close"
+                    hover-class="hy-keyboard__close--hover"
+                    v-if="showClose"
+                    @click="handleClose"
+                >
+                    <text>{{ closeText }}</text>
+                </view>
+            </view>
+
+            <!-- 非车牌号键盘布局 -->
+            <template v-if="mode !== 'car'">
+                <view class="hy-keyboard__body">
+                    <!-- 主按键区域 -->
+                    <view class="hy-keyboard__keys">
+                        <hy-keyboard-key
+                            v-for="(key, index) in keys"
+                            :key="index"
+                            :text="key.text"
+                            :type="key.type"
+                            :wider="key.wider"
+                            @press="handlePress"
+                        ></hy-keyboard-key>
+                    </view>
+                    <!-- 侧边栏（仅custom模式显示） -->
+                    <view class="hy-keyboard__sidebar" v-if="mode === 'custom'">
+                        <hy-keyboard-key
+                            v-if="showDeleteKey"
+                            large
+                            :text="deleteText"
+                            type="delete"
+                            @press="handlePress"
+                        ></hy-keyboard-key>
+                        <hy-keyboard-key
+                            large
+                            :text="closeText"
+                            type="close"
+                            :loading="closeButtonLoading"
+                            @press="handlePress"
+                        ></hy-keyboard-key>
+                    </view>
+                </view>
+            </template>
+
+            <!-- 车牌号键盘布局 -->
+            <template v-if="mode === 'car'">
+                <view class="hy-keyboard__body">
+                    <view class="hy-keyboard__car-keys">
+                        <hy-keyboard-key
+                            v-for="(key, index) in keys"
+                            :key="index"
+                            :text="key.text"
+                            :type="key.type"
+                            :wider="key.wider"
+                            is-car
+                            @press="handlePress"
+                        ></hy-keyboard-key>
+                    </view>
+                </view>
+            </template>
+        </view>
+    </hy-popup>
+</template>
+
+<script lang="ts">
+/**
+ * 虚拟键盘组件
+ * 支持多种键盘模式：数字键盘、自定义键盘、车牌号键盘、身份证键盘
+ */
+export default {
+    name: 'hy-keyboard',
+    options: {
+        virtualHost: true,
+        addGlobalClass: true,
+        styleIsolation: 'shared'
+    }
+}
+</script>
+
+<script lang="ts" setup>
+import { computed, ref, watch, useSlots } from 'vue'
+import type { KeyboardMode, CarKeyboardLang, Key, IKeyboardEmits } from './typing'
+import type { NumberKeyType } from './key/types'
+import { CAR_KEYBOARD_AREAS, CAR_KEYBOARD_KEYS } from './constants'
+import { keyboardProps } from './props'
+import HyKeyboardKey from './key/index.vue'
+
+const props = defineProps(keyboardProps)
+const emit = defineEmits<IKeyboardEmits>()
+const slots = useSlots()
+
+const show = ref(props.show)
+
+watch(
+    () => props.show,
+    (newValue) => {
+        show.value = newValue
+    }
+)
+
+const carLang = ref<CarKeyboardLang>('zh')
+
+/**
+ * 车牌号键盘语言（支持受控/非受控两种模式）
+ */
+const carKeyboardLang = computed({
+    get: () => (props.carLang ? props.carLang : carLang.value),
+    set: (value: CarKeyboardLang) => {
+        carLang.value = value
+    }
+})
+
+/**
+ * 当前键盘按键列表（根据模式动态生成）
+ */
+const keys = computed(() => {
+    switch (props.mode) {
+        case 'car':
+            return genCarKeys()
+        case 'idcard':
+            return genIdCardKeys()
+        case 'custom':
+            return genCustomKeys()
+        default:
+            return genDefaultKeys()
+    }
+})
+
+/**
+ * 是否显示关闭按钮
+ */
+const showClose = computed(() => {
+    return props.closeText && (props.mode === 'default' || props.mode === 'car')
+})
+
+/**
+ * 是否显示标题
+ */
+const showTitle = computed(() => {
+    return !!props.title || !!slots.title
+})
+
+/**
+ * 是否显示头部区域
+ */
+const showHeader = computed(() => {
+    return showTitle.value || showClose.value
+})
+
+/**
+ * 数组随机排序（Fisher-Yates 算法）
+ * @param arr 待排序数组
+ * @returns 排序后的新数组
+ */
+function shuffleArray<T>(arr: T[]): T[] {
+    const newArr = [...arr]
+    for (let i = newArr.length - 1; i > 0; i--) {
+        const j = Math.floor(Math.random() * (i + 1))
+        ;[newArr[i], newArr[j]] = [newArr[j], newArr[i]]
+    }
+    return newArr
+}
+
+/**
+ * 生成基础数字按键（0-9）
+ * @returns 数字按键数组
+ */
+function genBasicKeys(): Key[] {
+    const keys = Array.from({ length: 10 }, (_, i) => ({ text: i }))
+    return props.randomKeyOrder ? shuffleArray(keys) : keys
+}
+
+/**
+ * 生成默认数字键盘按键
+ * 布局：1 2 3 / 4 5 6 / 7 8 9 / . 0 删除
+ * @returns 默认键盘按键数组
+ */
+function genDefaultKeys(): Key[] {
+    const result: Key[] = []
+    const basicKeys = genBasicKeys()
+
+    // 第一行: 1, 2, 3
+    result.push(basicKeys[1], basicKeys[2], basicKeys[3])
+    // 第二行: 4, 5, 6
+    result.push(basicKeys[4], basicKeys[5], basicKeys[6])
+    // 第三行: 7, 8, 9
+    result.push(basicKeys[7], basicKeys[8], basicKeys[9])
+    // 第四行: 小数点, 0, 删除
+    const dotKey = props.showDotKey
+        ? [{ text: (props.extraKey as string) || '.', type: 'extra' as NumberKeyType }]
+        : []
+
+    result.push(
+        ...dotKey,
+        { ...basicKeys[0], wider: true },
+        {
+            text: props.showDeleteKey ? props.deleteText : '',
+            type: props.showDeleteKey ? 'delete' : ''
+        }
+    )
+
+    return result
+}
+
+/**
+ * 生成自定义模式键盘按键（带侧边栏）
+ * @returns 自定义键盘按键数组
+ */
+function genCustomKeys(): Key[] {
+    const result: Key[] = []
+    const basicKeys = genBasicKeys()
+    const extraKeys = Array.isArray(props.extraKey) ? props.extraKey : [props.extraKey]
+
+    // 第一行: 1, 2, 3
+    result.push(basicKeys[1], basicKeys[2], basicKeys[3])
+    // 第二行: 4, 5, 6
+    result.push(basicKeys[4], basicKeys[5], basicKeys[6])
+    // 第三行: 7, 8, 9
+    result.push(basicKeys[7], basicKeys[8], basicKeys[9])
+
+    // 第四行根据extraKey数量调整
+    if (extraKeys.length === 1) {
+        console.log(extraKeys)
+
+        result.push({ ...basicKeys[0], wider: true }, { text: extraKeys[0] || '.', type: 'extra' })
+    } else if (extraKeys.length >= 2) {
+        result.push({ text: extraKeys[0], type: 'extra' }, basicKeys[0], {
+            text: extraKeys[1],
+            type: 'extra'
+        })
+    }
+
+    return result
+}
+
+/**
+ * 生成车牌号键盘按键
+ * 支持省份简称和字母数字切换
+ * @returns 车牌号键盘按键数组
+ */
+function genCarKeys(): Key[] {
+    const [keys, remainKeys] = splitCarKeys()
+    return [
+        ...keys,
+        { text: carKeyboardLang.value === 'zh' ? 'ABC' : '省份', type: 'extra', wider: true },
+        ...remainKeys,
+        { text: props.deleteText, type: 'delete', wider: true }
+    ]
+}
+
+/**
+ * 分割车牌号按键数组
+ * 用于在第30个按键后插入切换语言的按钮
+ * @returns 分割后的按键数组
+ */
+function splitCarKeys(): Key[][] {
+    const keys =
+        carKeyboardLang.value === 'zh'
+            ? CAR_KEYBOARD_AREAS.map((key) => ({ text: key }))
+            : CAR_KEYBOARD_KEYS.map((key) => ({ text: key }))
+    return [keys.slice(0, 30), keys.slice(30)]
+}
+
+/**
+ * 生成身份证键盘按键
+ * 布局：1 2 3 / 4 5 6 / 7 8 9 / X 0 删除
+ * @returns 身份证键盘按键数组
+ */
+function genIdCardKeys(): Key[] {
+    const result: Key[] = []
+    const basicKeys = genBasicKeys()
+
+    // 第一行: 1, 2, 3
+    result.push(basicKeys[0], basicKeys[1], basicKeys[2])
+    // 第二行: 4, 5, 6
+    result.push(basicKeys[3], basicKeys[4], basicKeys[5])
+    // 第三行: 7, 8, 9
+    result.push(basicKeys[6], basicKeys[7], basicKeys[8])
+    // 第四行: X, 0, 删除
+    result.push(
+        { text: 'X', type: 'extra' },
+        { text: 0 },
+        {
+            text: props.showDeleteKey ? props.deleteText : '',
+            type: props.showDeleteKey ? 'delete' : ''
+        }
+    )
+
+    return result
+}
+
+/**
+ * 处理关闭事件
+ */
+const handleClose = () => {
+    emit('close')
+    emit('update:show', false)
+}
+
+/**
+ * 处理按键点击
+ * @param text 按键文本
+ * @param type 按键类型
+ */
+const handlePress = (text: string, type: NumberKeyType) => {
+    // 额外按键处理
+    if (type === 'extra') {
+        // 空文本不处理
+        if (text === '') {
+            return handleClose()
+        }
+        // 车牌号键盘语言切换
+        else if (text === 'ABC' || text === '省份') {
+            const newLang = carKeyboardLang.value === 'zh' ? 'en' : 'zh'
+            if (props.carLang) {
+                emit('update:carLang', newLang)
+            } else {
+                carKeyboardLang.value = newLang
+            }
+            return
+        }
+    }
+
+    const value = props.modelValue
+    // 删除键处理
+    if (type === 'delete') {
+        emit('delete')
+        const newValue = value.slice(0, value.length - 1)
+        emit('update:modelValue', newValue)
+        // 车牌号键盘自动切换回省份模式
+        if (props.mode === 'car' && newValue.length === 0 && props.autoSwitchLang) {
+            carLang.value = 'zh'
+        }
+    }
+    // 关闭键处理
+    else if (type === 'close') {
+        handleClose()
+    }
+    // 普通按键输入处理
+    else if (value.length < +props.maxlength) {
+        emit('input', text)
+        const newValue = value + text
+        emit('update:modelValue', newValue)
+        // 车牌号键盘自动切换到字母模式
+        if (props.mode === 'car' && newValue.length === 1 && props.autoSwitchLang) {
+            carLang.value = 'en'
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+@import './index.scss';
+</style>

package/components/hy-keyboard/index.scss

@@ -0,0 +1,73 @@
+@use "../../libs/css/theme" as *;
+@use "../../libs/css/mixin" as *;
+
+$keyboard-header-height: 80rpx;
+$keyboard-title-font-size: 32rpx;
+$keyboard-close-font-size: 28rpx;
+$keyboard-key-gap: $hy-border-margin-padding-sm;
+
+@include b(keyboard) {
+  background: $hy-background--track;
+  overflow: hidden;
+  box-sizing: border-box;
+
+  @include e(header) {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: $keyboard-header-height;
+    padding: 0 32rpx;
+    background: $hy-background--track;
+    border-bottom: $hy-border-line;
+    width: 100%;
+    box-sizing: border-box;
+  }
+
+  @include e(title) {
+    font-size: $keyboard-title-font-size;
+    font-weight: 500;
+    color: $hy-primary;
+  }
+
+  @include e(close) {
+    font-size: $keyboard-close-font-size;
+    padding: 10rpx 20rpx;
+
+    &--hover:active {
+      opacity: 0.7;
+    }
+  }
+
+  @include e(body) {
+    display: flex;
+    gap: $keyboard-key-gap;
+    width: 100%;
+    padding: $hy-border-margin-padding-sm;
+    box-sizing: border-box;
+  }
+
+  @include e(keys) {
+    display: flex;
+    flex-wrap: wrap;
+    flex: 3;
+    gap: $keyboard-key-gap;
+    width: 100%;
+    box-sizing: border-box;
+    justify-content: space-between;
+  }
+
+  @include e(sidebar) {
+    width: 160rpx;
+    display: flex;
+    flex-direction: column;
+    gap: $keyboard-key-gap;
+  }
+
+  @include e(car-keys) {
+    display: flex;
+    flex-wrap: wrap;
+    gap: $keyboard-key-gap;
+    width: 100%;
+    box-sizing: border-box;
+  }
+}

package/components/hy-keyboard/key/index.scss

@@ -0,0 +1,79 @@
+@use "../../../libs/css/theme" as *;
+@use "../../../libs/css/mixin" as *;
+
+$keyboard-key-height: 100rpx;
+$keyboard-key-border-radius: 12rpx;
+$keyboard-key-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
+
+@include b(keyboard) {
+  @include e(key) {
+    flex-basis: 32%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: $keyboard-key-height;
+    background: $hy-background--container;
+    border-radius: $keyboard-key-border-radius;
+    box-shadow: $keyboard-key-shadow;
+    box-sizing: border-box;
+    transition: all 0.15s;
+
+    @include m(large) {
+      flex: 1;
+      align-self: stretch;
+    }
+
+    @include m(car) {
+      flex-basis: 8.7%;
+      height: 88rpx;
+      font-size: 28rpx;
+    }
+
+    @include m(wider) {
+      flex: 1;
+    }
+
+    @include m(delete) {
+      color: #FFFFFF;
+      background: $hy-error;
+      display: flex;
+      flex-direction: column-reverse;
+      align-items: center;
+      justify-content: center;
+    }
+
+    @include m(extra) {
+      background: $hy-background--3;
+    }
+
+    @include m(close) {
+      color: #ffffff;
+      background: $hy-primary;
+    }
+
+    &:active {
+      background: $hy-background--hover;
+    }
+
+    &-text {
+      font-size: $hy-font-size-lg;
+    }
+
+    @include e(delete-line) {
+      position: absolute;
+      width: 18rpx;
+      height: 2rpx;
+      background: #999999;
+      top: 50%;
+      left: 50%;
+
+      @include m(left) {
+        transform: translate(-50%, -50%) rotate(45deg);
+      }
+
+      @include m(right) {
+        transform: translate(-50%, -50%) rotate(-45deg);
+      }
+    }
+  }
+}