hy-app 0.2.5 → 0.2.7

package/common/index.ts

@@ -1 +1,2 @@
-export * from "./versionControl";
+export * from './versionControl'
+export * from './shakeService'

package/common/shakeService.ts

@@ -0,0 +1,60 @@
+// src/composables/useShakeService.ts
+import { ref, Ref } from 'vue'
+import { debounce } from '../utils'
+
+interface Acceleration {
+  x: number
+  y: number
+  z: number
+}
+
+export function useShakeService(shakeThreshold: number = 30) {
+  const lastAcceleration: Ref<Acceleration> = ref({ x: 0, y: 0, z: 0 })
+  const lastTime: Ref<number> = ref(Date.now())
+  const shakeCallback: Ref<null | (() => void)> = ref(null)
+
+  const startShakeListener = (callback: () => void): void => {
+    shakeCallback.value = callback
+    uni.startAccelerometer({
+      success: () => {
+        uni.onAccelerometerChange(handleShake)
+      },
+      fail: (err: any) => {
+        console.error('加速度传感器启动失败', err.errMsg)
+      },
+    })
+  }
+
+  const stopShakeListener = (): void => {
+    uni.stopAccelerometer().then(
+      (res) => {
+        uni.offAccelerometerChange(handleShake)
+      },
+      (err) => console.error('加速度传感器关闭失败', err.errMsg),
+    )
+  }
+
+  const handleShake = (res: Acceleration): void => {
+    const acceleration = res
+    const currentTime = Date.now()
+    const timeDiff = (currentTime - lastTime.value) / 1000 // 转换为秒
+
+    // 计算加速度的欧几里得距离
+    const deltaX = acceleration.x - lastAcceleration.value.x
+    const deltaY = acceleration.y - lastAcceleration.value.y
+    const deltaZ = acceleration.z - lastAcceleration.value.z
+    const speed = Math.sqrt(deltaX * deltaX + deltaY * deltaY + deltaZ * deltaZ) / timeDiff
+
+    if (speed > shakeThreshold && shakeCallback.value) {
+      debounce(shakeCallback.value, 500)
+    }
+
+    lastAcceleration.value = acceleration
+    lastTime.value = currentTime
+  }
+
+  return {
+    startShakeListener,
+    stopShakeListener,
+  }
+}

package/components/hy-action-sheet/hy-action-sheet.vue

@@ -0,0 +1,184 @@
+<template>
+  <view>
+    <HyPopup
+      :show="showPopup"
+      :duration="duration"
+      mode="bottom"
+      :close-on-click-overlay="closeOnClickOverlay"
+      :safe-area-inset-bottom="safeAreaInsetBottom"
+      @open="onOpen"
+      @close="onClose"
+      :z-index="zIndex"
+      :round="round"
+    >
+      <view
+        :class="`hy-action-sheet ${customClass}`"
+        :style="`${
+          (actions && actions.length) || (panels && panels.length)
+            ? 'margin: 0 10px calc(var(--window-bottom) + 10px) 10px; border-radius: 16px;'
+            : 'margin-bottom: var(--window-bottom);'
+        } ${customStyle}`"
+      >
+        <!-- 标题 -->
+        <view v-if="title" :class="`hy-action-sheet__header ${customHeaderClass}`">
+          {{ title }}
+          <HyIcon
+            customClass="hy-action-sheet__close"
+            class="hy-action-sheet__close"
+            name="close"
+            @click="onClose"
+          />
+        </view>
+        <!-- 标题 -->
+
+        <!-- 选项卡 -->
+        <view class="hy-action-sheet__actions" v-if="actions && actions.length">
+          <button
+            v-for="(action, rowIndex) in actions"
+            :key="rowIndex"
+            :class="`hy-action-sheet__action ${action?.disabled ? 'hy-action-sheet__action--disabled' : ''}  ${
+              action?.loading ? 'hy-action-sheet__action--loading' : ''
+            }`"
+            :style="`color: ${action?.color}`"
+            @click="onSelect(rowIndex, 'action')"
+          >
+            <HyLoading :show="!!action?.loading" mode="circle" />
+            <view v-if="!action?.loading" class="hy-action-sheet__name">{{ action?.name }}</view>
+            <view v-if="!action?.loading && action?.sub" class="hy-action-sheet__subname">
+              {{ action?.sub }}
+            </view>
+          </button>
+        </view>
+        <!-- 选项卡 -->
+
+        <!-- 自定义面板 -->
+        <view v-if="formatPanels && formatPanels.length">
+          <view
+            v-for="(panel, rowIndex) in formatPanels"
+            :key="rowIndex"
+            class="hy-action-sheet__panels"
+          >
+            <view class="hy-action-sheet__panels-content">
+              <view
+                v-for="(col, colIndex) in panel"
+                :key="colIndex"
+                class="hy-action-sheet__panel"
+                @click="onSelect(rowIndex, 'panels', colIndex)"
+              >
+                <image class="hy-action-sheet__panel-img" :src="(col as any).iconUrl" />
+                <view class="hy-action-sheet__panel-title">{{ (col as any).name }}</view>
+              </view>
+            </view>
+          </view>
+        </view>
+        <!-- 自定义面板 -->
+
+        <!-- 面板插槽 -->
+        <slot />
+        <!-- 自定义面板 -->
+
+        <!-- 取消按钮 -->
+        <HyButton
+          v-if="cancelText"
+          :text="cancelText"
+          shape="circle"
+          custom-class="hy-action-sheet__cancel"
+          @click="handleCancel"
+        ></HyButton>
+        <!-- 取消按钮 -->
+      </view>
+    </HyPopup>
+  </view>
+</template>
+<script lang="ts">
+export default {
+  name: 'hy-action-sheet',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared',
+  },
+}
+</script>
+
+<script lang="ts" setup>
+import { watch, ref } from 'vue'
+import { isArray } from '../../utils'
+import defaultProps from './props'
+import IProps, { IActionSheetPanel } from './typing'
+
+// 组件
+import HyIcon from '../hy-icon/hy-icon.vue'
+import HyPopup from '../hy-popup/hy-popup.vue'
+import HyLoading from '../hy-loading/hy-loading.vue'
+import HyButton from '../hy-button/hy-button.vue'
+
+const props = withDefaults(defineProps<IProps>(), defaultProps)
+const emit = defineEmits(['select', 'cancel', 'close', 'open', 'update:modelValue'])
+
+const formatPanels = ref<Array<IActionSheetPanel> | Array<IActionSheetPanel[]>>([])
+const showPopup = ref<boolean>(false)
+
+watch(() => props.panels, computedValue, { deep: true, immediate: true })
+
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    showPopup.value = newValue
+  },
+  { deep: true, immediate: true },
+)
+
+function isPanelArray() {
+  return props.panels.length && !isArray(props.panels[0])
+}
+function computedValue() {
+  formatPanels.value = isPanelArray()
+    ? [props.panels as IActionSheetPanel[]]
+    : (props.panels as IActionSheetPanel[][])
+}
+
+function onSelect(rowIndex: number, type: 'action' | 'panels', colIndex?: number) {
+  if (type === 'action') {
+    if (props.actions[rowIndex].disabled || props.actions[rowIndex].loading) {
+      return
+    }
+    emit('select', {
+      item: props.actions[rowIndex],
+      index: rowIndex,
+    })
+  } else if (isPanelArray()) {
+    emit('select', {
+      item: props.panels[Number(colIndex)],
+      index: colIndex,
+    })
+  } else {
+    emit('select', {
+      item: (props.panels as IActionSheetPanel[][])[rowIndex][Number(colIndex)],
+      rowIndex,
+      colIndex,
+    })
+  }
+  if (props.closeOnClickAction) {
+    onClose()
+  }
+}
+function handleCancel() {
+  emit('cancel')
+  onClose()
+}
+function onClose() {
+  emit('update:modelValue', false)
+  emit('close')
+}
+function onOpen() {
+  emit('open')
+}
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+.hy-action-sheet__header {
+  text-align: v-bind(titleAlign);
+}
+</style>

package/components/hy-action-sheet/index.scss

@@ -0,0 +1,123 @@
+@use "../../libs/css/mixin.scss" as *;
+@use "../../theme.scss" as *;
+
+
+@include b(action-sheet) {
+  padding-bottom: 1px;
+  font-size: $hy-font-size-base;
+  width: calc(100vw - 20px);
+
+
+  @include e(actions) {
+    padding: $hy-border-margin-padding-base 0;
+    max-height: 50vh;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  @include e(action) {
+    position: relative;
+    display: block;
+    width: 100%;
+    height: 48px;
+    line-height: 48px;
+    color: $hy-text-color;
+    font-size: $hy-font-size-base;
+    text-align: center;
+    border: none;
+    background: transparent;
+    outline: none;
+    padding: 0;
+
+    @include m(disabled) {
+      color: $hy-text-color--disabled;
+      cursor: not-allowed;
+    }
+
+    @include m(loading) {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      line-height: initial;
+    }
+  }
+
+  @include e(name) {
+    display: inline-block;
+  }
+
+  @include e(subname) {
+    display: inline-block;
+    margin-left: 4px;
+    font-size: $hy-font-size-sm;
+    color: $hy-text-color--grey;
+  }
+
+  /* 取消按钮 */
+  @include edeep(cancel) {
+    color: $hy-text-color;
+    width: calc(100% - 48px);
+    background: $hy-background--track;
+    margin: 0 auto 24px;
+    border: none;
+  }
+
+  /* 头部 */
+  @include e(header) {
+    position: relative;
+    line-height: 44px;
+    font-weight: 700;
+    padding: $hy-border-margin-padding-base $hy-border-margin-padding-base 0;
+  }
+
+  @include edeep(close) {
+    position: absolute;
+    top: 20px;
+    right: 15px;
+    background-color: rgba(128, 128, 128, 0.25);
+    border-radius: $hy-border-radius-circle;
+    padding: $hy-border-margin-padding-sm;
+  }
+
+  /* 面板样式 */
+  @include e(panels) {
+    height: 160rpx;
+    width: 100%;
+    overflow-y: hidden;
+
+    &:first-of-type {
+      margin-top: 10px;
+    }
+
+    &:last-of-type {
+      margin-bottom: 12px;
+    }
+  }
+
+  @include e(panels-content) {
+    display: flex;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  @include e(panel) {
+    width: 140rpx;
+    flex: 0 0 auto;
+    display: inline-block;
+    padding: $hy-border-margin-padding-sm $hy-border-margin-padding-base;
+  }
+
+  @include e(panel-img) {
+    display: block;
+    width: $hy-img-size-base;
+    height: $hy-img-size-base;
+    margin: 0 auto 7px;
+    border-radius: $hy-border-radius-base;
+  }
+
+  @include e(panel-title) {
+    font-size: $hy-font-size-sm;
+    text-align: center;
+    @include lineEllipsis;
+  }
+}

package/components/hy-action-sheet/props.ts

@@ -0,0 +1,18 @@
+import type IProps from './typing'
+
+const defaultProps: IProps = {
+  modelValue: false,
+  actions: [],
+  panels: [],
+  round: '20px',
+  title: '',
+  titleAlign: 'center',
+  cancelText: '',
+  closeOnClickAction: true,
+  closeOnClickOverlay: true,
+  duration: 200,
+  zIndex: 100,
+  safeAreaInsetBottom: true,
+}
+
+export default defaultProps

package/components/hy-action-sheet/typing.d.ts

@@ -0,0 +1,96 @@
+import type { CSSProperties } from 'vue'
+import { HyApp } from 'hy-app/typing/modules/common'
+export interface IActionSheetAction {
+  /**
+   * 选项名称
+   */
+  name: string
+  /**
+   * 描述信息
+   */
+  sub?: string
+  /**
+   * 颜色
+   */
+  color?: string
+  /**
+   * 禁用
+   */
+  disabled?: boolean
+  /**
+   * 加载中状态
+   */
+  loading?: boolean
+}
+export interface IActionSheetPanel {
+  /**
+   * 图片地址
+   */
+  iconUrl: string
+  /**
+   * 标题内容
+   */
+  name: string
+}
+export default interface HyActionSheetProps {
+  /**
+   * @description 操作菜单是否展示 ( 默认 false )
+   * */
+  modelValue?: boolean
+  /**
+   * @description 菜单选项
+   * */
+  actions?: IActionSheetAction[]
+  /**
+   * @description 自定义面板项,可以为字符串数组，也可以为对象数组，如果为二维数组，则为多行展示
+   * */
+  panels?: Array<IActionSheetPanel | IActionSheetPanel[]>
+  /**
+   * @description 圆角值 (默认 20 )
+   * */
+  round?: string | number
+  /**
+   * @description 标题
+   * */
+  title?: string
+  /**
+   * @description 标题文字位置
+   * */
+  titleAlign?: HyApp.RowCenterType
+  /**
+   * @description 取消按钮的提示文字,不为空时显示按钮
+   * */
+  cancelText?: string
+  /**
+   * @description 点击某个菜单项时是否关闭弹窗 （默认 true ）
+   * */
+  closeOnClickAction?: boolean
+  /**
+   * @description 点击遮罩是否允许关闭  (默认 true )
+   * */
+  closeOnClickOverlay?: boolean
+  /**
+   * @description 弹框动画持续时间 ( 默认 200 )
+   * */
+  duration?: number
+  /**
+   * @description 菜单层级 ( 默认 100 )
+   * */
+  zIndex?: number
+  /**
+   * @description 处理底部安全区 （默认 true ）
+   * */
+  safeAreaInsetBottom?: boolean
+  /**
+   * @description 自定义外部样式
+   * */
+  customStyle?: CSSProperties
+  /**
+   * @description 自定义外部类名
+   * */
+  customClass?: string
+  /**
+   * @description 自定义标题类名
+   * */
+  customHeaderClass?: string
+}