hy-app 0.2.5 → 0.2.6

package/common/index.ts

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

package/common/shakeService.ts

@@ -0,0 +1,62 @@
+// 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: () => {
+        console.log('加速度传感器启动成功')
+        uni.onAccelerometerChange(handleShake)
+      },
+      fail: (err: any) => {
+        console.error('加速度传感器启动失败', err.errMsg)
+      },
+    })
+  }
+
+  const stopShakeListener = (): void => {
+    uni.stopAccelerometer().then(
+      (res) => {
+        console.log('加速度传感器关闭成功', 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
+}

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

@@ -23,7 +23,7 @@
     :hover-class="!disabled && !loading ? 'hy-button--active' : ''"
     :style="[baseColor, customStyle]"
     @tap="clickHandler"
-    :class="['hy-button', 'hy-reset-button', bemClass]"
+    :class="['hy-button', 'hy-reset-button', bemClass, customClass]"
   >
     <template v-if="loading">
       <HyLoading :mode="loadingMode" :size="loadingSize" :color="loadingColor"></HyLoading>

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

@@ -1,122 +1,126 @@
-import type { CSSProperties } from "vue";
-import type HyIconProps from "../hy-icon/typing";
+import type { CSSProperties } from 'vue'
+import type HyIconProps from '../hy-icon/typing'
 
 export default interface HyButtonProps {
   /**
    * @description 是否显示按钮的细边框 (默认 true )
    * */
-  hairline?: boolean;
+  hairline?: boolean
   /**
    * @description 按钮的预置样式，info，primary，error，warning，success (默认 'primary' )
    * */
-  type?: HyApp.ThemeType;
+  type?: HyApp.ThemeType
   /**
    * @description 按钮尺寸，large，medium，mini （默认 medium）
    * */
-  size?: HyApp.SizeType | "mini";
+  size?: HyApp.SizeType | 'mini'
   /**
    * @description 按钮形状，circle（两边为半圆），square（带圆角） （默认 'square' ）
    * */
-  shape?: HyApp.ShapeType;
+  shape?: HyApp.ShapeType
   /**
    * @description 按钮是否镂空，背景色透明 （默认 false）
    * */
-  plain?: boolean;
+  plain?: boolean
   /**
    * @description 是否禁用 （默认 false）
    * */
-  disabled?: boolean;
+  disabled?: boolean
   /**
    * @description 按钮名称前是否带 loading 图标(App-nvue 平台，在 ios 上为雪花，Android上为圆圈) （默认 false）
    * */
-  loading?: boolean;
+  loading?: boolean
   /**
    * @description 加载中提示文字
    * */
-  loadingText?: string;
+  loadingText?: string
   /**
    * @description 加载状态图标类型 （默认 'spinner' ）
    * */
-  loadingMode?: HyApp.LoadingMode;
+  loadingMode?: HyApp.LoadingMode
   /**
    * @description 加载图标大小 （默认 13 ）
    * */
-  loadingSize?: number;
+  loadingSize?: number
   /**
    * @description 开放能力，具体请看uniapp稳定关于button组件部分说明
    * */
-  openType?: string;
+  openType?: string
   /**
    * @description 用于 <form> 组件，点击分别会触发 <form> 组件的 submit/reset 事件
    * */
-  formType?: string;
+  formType?: string
   /**
    * @description 打开 APP 时，向 APP 传递的参数，open-type=launchApp时有效 （注：只微信小程序、QQ小程序有效）
    * */
-  appParameter?: string;
+  appParameter?: string
   /**
    * @description 指定是否阻止本节点的祖先节点出现点击态，微信小程序有效（默认 true ）
    * */
-  hoverStopPropagation?: boolean;
+  hoverStopPropagation?: boolean
   /**
    * @description 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文（默认 en ）
    * */
-  lang?: string;
+  lang?: string
   /**
    * @description 会话来源，openType="contact"时有效
    * */
-  sessionFrom?: string;
+  sessionFrom?: string
   /**
    * @description 会话内消息卡片标题，openType="contact"时有效
    * */
-  sendMessageTitle?: string;
+  sendMessageTitle?: string
   /**
    * @description 会话内消息卡片点击跳转小程序路径，openType="contact"时有效
    * */
-  sendMessagePath?: string;
+  sendMessagePath?: string
   /**
    * @description 会话内消息卡片图片，openType="contact"时有效
    * */
-  sendMessageImg?: string;
+  sendMessageImg?: string
   /**
    * @description 是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，用户点击后可以快速发送小程序消息，openType="contact"时有效（默认false）
    * */
-  showMessageCard?: boolean;
+  showMessageCard?: boolean
   /**
    * @description 额外传参参数，用于小程序的data-xxx属性，通过target.dataset.name获取
    * */
-  dataName?: string;
+  dataName?: string
   /**
    * @description 节流时间，一定时间内只能触发一次 （默认 0 )
    * */
-  throttleTime?: number;
+  throttleTime?: number
   /**
    * @description 按住后多久出现点击态，单位毫秒 （默认 0 )
    * */
-  hoverStartTime?: number;
+  hoverStartTime?: number
   /**
    * @description 手指松开后点击态保留时间，单位毫秒 （默认 200 )
    * */
-  hoverStayTime?: number;
+  hoverStayTime?: number
   /**
    * @description 按钮文字，之所以通过props传入，是因为slot传入的话（注：nvue中无法控制文字的样式）
    * */
-  text?: string;
+  text?: string
   /**
    * @description 按钮图标api集合
    * */
-  icon?: Partial<HyIconProps>;
+  icon?: Partial<HyIconProps>
   /**
    * @description 按钮颜色，支持传入linear-gradient渐变色
    * */
-  color?: string;
+  color?: string
   /**
    * @description 阻止事件冒泡
    * */
-  stop?: boolean;
+  stop?: boolean
   /**
    * @description 定义需要用到的外部样式
    * @note 类型问题
    * */
-  customStyle?: CSSProperties;
+  customStyle?: CSSProperties
+  /**
+   * @description 自定义外部类名
+   * */
+  customClass?: string
 }