oxy-uni-ui 1.2.3 → 2.1.0

package/components/oxy-voice-player/types.ts

@@ -0,0 +1,567 @@
+import type { ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue'
+import { baseProps, makeBooleanProp, makeNumberProp, makeStringProp, makeNumericProp } from '../common/props'
+
+/**
+ * 内部音频上下文接口
+ */
+export interface InnerAudioContext {
+  /**
+   * 音频地址
+   */
+  src: string
+  /**
+   * 是否循环播放
+   */
+  loop: boolean
+  /**
+   * 音量
+   */
+  volume: number
+  /**
+   * 总时长
+   */
+  duration: number
+  /**
+   * 自动
+   */
+  autoPlay: boolean
+  /**
+   * 当前播放时间
+   */
+  currentTime: number
+  /**
+   * 缓冲时间
+   */
+  buffered: number
+  /**
+   * 开始播放时间
+   */
+  startTime: number
+  /**
+   * 播放
+   */
+  play: () => void
+  /**
+   * 暂停
+   */
+  pause: () => void
+  /**
+   * 停止
+   */
+  stop: () => void
+  /**
+   * 跳转
+   */
+  seek: (position: number) => void
+  /**
+   * 销毁
+   */
+  destroy: () => void
+  /**
+   * 监听可以播放事件
+   */
+  onCanplay: (callback: () => void) => void
+  /**
+   * 监听播放事件
+   */
+  onPlay: (callback: () => void) => void
+  /**
+   * 监听暂停事件
+   */
+  onPause: (callback: () => void) => void
+  /**
+   * 监听停止事件
+   */
+  onStop: (callback: () => void) => void
+  /**
+   * 监听播放结束事件
+   */
+  onEnded: (callback: () => void) => void
+  /**
+   * 监听错误事件
+   */
+  onError: (callback: (error: { errMsg: string; errCode: number }) => void) => void
+  /**
+   * 监听时间更新事件
+   */
+  onTimeUpdate: (callback: () => void) => void
+  /**
+   * 取消监听可以播放事件
+   */
+  offCanplay: (callback?: () => void) => void
+  /**
+   * 取消监听播放事件
+   */
+  offPlay: (callback?: () => void) => void
+  /**
+   * 取消监听暂停事件
+   */
+  offPause: (callback?: () => void) => void
+  /**
+   * 取消监听停止事件
+   */
+  offStop: (callback?: () => void) => void
+  /**
+   * 取消监听播放结束事件
+   */
+  offEnded: (callback?: () => void) => void
+  /**
+   * 取消监听错误事件
+   */
+  offError: (callback?: (error: { errMsg: string; errCode: number }) => void) => void
+  /**
+   * 取消监听时间更新事件
+   */
+  offTimeUpdate: (callback?: () => void) => void
+}
+
+/**
+ * 播放器模式
+ */
+export type VoicePlayerMode = 'list' | 'single' | 'random'
+
+/**
+ * 播放器主题
+ */
+export type VoicePlayerTheme = 'light' | 'dark'
+
+/**
+ * 播放器视图模式
+ */
+export type VoicePlayerViewMode = 'normal' | 'mini' | 'simple' | 'hideView'
+
+/**
+ * 播放器额外控制按钮
+ */
+export type VoicePlayerExtraControl = 'playMode' | 'favorite' | 'mini' | 'volume'
+
+/**
+ * 歌曲信息
+ */
+export interface VoicePlayerSongInfo {
+  /**
+   * 音频地址
+   */
+  src: string
+  /**
+   * 标题
+   */
+  title?: string
+  /**
+   * 歌手
+   */
+  artist?: string
+  /**
+   * 专辑
+   */
+  album?: string
+  /**
+   * 封面
+   */
+  cover?: string
+  /**
+   * 歌词
+   */
+  lyrics?: VoicePlayerLyricLine[]
+  /**
+   * 总时长
+   */
+  duration?: number
+  [key: string]: any
+}
+
+/**
+ * 歌词行
+ */
+export interface VoicePlayerLyricLine {
+  /**
+   * 时间
+   */
+  time: number
+  /**
+   * 文本
+   */
+  text: string
+  /**
+   * 翻译
+   */
+  translation?: string
+}
+
+/**
+ * 时间更新事件
+ */
+export interface VoicePlayerTimeUpdateEvent {
+  /**
+   * 当前播放时间
+   */
+  currentTime: number
+  /**
+   * 总时长
+   */
+  duration: number
+  /**
+   * 缓冲时间
+   */
+  buffered?: number
+}
+
+/**
+ * 歌曲切换事件
+ */
+export interface VoicePlayerSongChangeEvent {
+  /**
+   * 索引
+   */
+  index: number
+  /**
+   * 歌曲信息
+   */
+  song: VoicePlayerSongInfo
+}
+
+/**
+ * 音量变化事件
+ */
+export interface VoicePlayerVolumeChangeEvent {
+  /**
+   * 音量
+   */
+  volume: number
+}
+
+/**
+ * 跳转事件
+ */
+export interface VoicePlayerSeekEvent {
+  /**
+   * 时间
+   */
+  time: number
+}
+
+/**
+ * 错误事件
+ */
+export interface VoicePlayerErrorEvent {
+  /**
+   * 错误信息
+   */
+  message: string
+  /**
+   * 错误对象
+   */
+  error: any
+}
+
+/**
+ * 滑块变化事件
+ */
+export interface SliderChangeEvent {
+  detail: {
+    /**
+     * 值
+     */
+    value: number
+  }
+}
+
+/**
+ * 触摸点
+ */
+export interface TouchPoint {
+  /**
+   * 触点相对于视口的 X 坐标
+   */
+  clientX?: number
+  /**
+   * 触点相对于视口的 Y 坐标
+   */
+  clientY?: number
+  /**
+   * 触点相对于文档的 X 坐标
+   */
+  pageX?: number
+  /**
+   * 触点相对于文档的 Y 坐标
+   */
+  pageY?: number
+  /**
+   * 触点相对于屏幕的 X 坐标
+   */
+  x?: number
+  /**
+   * 触点相对于屏幕的 Y 坐标
+   */
+  y?: number
+}
+
+/**
+ * 触摸事件
+ */
+export interface TouchEvent {
+  /**
+   * 当前触点列表
+   */
+  touches?: TouchPoint[]
+  /**
+   * 变化后的触点列表
+   */
+  changedTouches?: TouchPoint[]
+}
+
+export const voicePlayerProps = {
+  ...baseProps,
+
+  /**
+   * 音频地址
+   */
+  src: makeStringProp(''),
+
+  /**
+   * 标题
+   */
+  title: makeStringProp(''),
+
+  /**
+   * 歌手
+   */
+  artist: makeStringProp(''),
+
+  /**
+   * 专辑
+   */
+  album: makeStringProp(''),
+
+  /**
+   * 封面
+   */
+  cover: makeStringProp(''),
+
+  /**
+   * 是否循环播放
+   */
+  loop: makeBooleanProp(false),
+
+  /**
+   * 音量
+   */
+  volume: makeNumericProp(1),
+
+  /**
+   * 播放列表
+   */
+  playlist: {
+    type: Array as PropType<VoicePlayerSongInfo[]>,
+    default: () => []
+  },
+
+  /**
+   * 播放模式
+   */
+  playMode: makeStringProp<VoicePlayerMode>('list'),
+
+  /**
+   * 主题
+   */
+  theme: makeStringProp<VoicePlayerTheme>('light'),
+
+  /**
+   * 是否显示封面
+   */
+  showCover: makeBooleanProp(true),
+
+  /**
+   * 是否显示信息
+   */
+  showInfo: makeBooleanProp(true),
+
+  /**
+   * 是否显示进度条
+   */
+  showProgress: makeBooleanProp(true),
+
+  /**
+   * 是否显示上一首/下一首按钮
+   */
+  showPrevNext: makeBooleanProp(true),
+
+  /**
+   * 额外控制按钮
+   */
+  extraControls: {
+    type: Array as PropType<VoicePlayerExtraControl[]>,
+    default: () => []
+  },
+
+  /**
+   * 是否显示歌词
+   */
+  showLyrics: makeBooleanProp(false),
+
+  /**
+   * 歌词
+   */
+  lyrics: {
+    type: Array as PropType<VoicePlayerLyricLine[]>,
+    default: () => []
+  },
+
+  /**
+   * 是否显示翻译
+   */
+  showTranslation: makeBooleanProp(false),
+
+  /**
+   * 视图模式
+   */
+  viewMode: makeStringProp<VoicePlayerViewMode>('normal'),
+
+  /**
+   * 是否启用旋转
+   */
+  enableRotation: makeBooleanProp(true),
+
+  /**
+   * 是否可以跳转
+   */
+  canSeek: makeBooleanProp(true),
+
+  /**
+   * 默认封面
+   */
+  defaultCover: makeStringProp('')
+}
+
+/**
+ * 语音播放器事件
+ */
+export type VoicePlayerEmits = {
+  /**
+   * 播放事件
+   */
+  play: []
+  /**
+   * 暂停事件
+   */
+  pause: []
+  /**
+   * 停止事件
+   */
+  stop: []
+  /**
+   * 播放结束事件
+   */
+  ended: []
+  /**
+   * 可以播放事件
+   */
+  canplay: [event: { duration: number }]
+  /**
+   * 时间更新事件
+   */
+  timeupdate: [event: VoicePlayerTimeUpdateEvent]
+  /**
+   * 上一首事件
+   */
+  prev: [event: VoicePlayerSongChangeEvent | null]
+  /**
+   * 下一首事件
+   */
+  next: [event: VoicePlayerSongChangeEvent | null]
+  /**
+   * 歌曲切换事件
+   */
+  'song-change': [event: VoicePlayerSongChangeEvent | null]
+  /**
+   * 播放模式变化事件
+   */
+  'play-mode-change': [mode: VoicePlayerMode]
+  /**
+   * 视图模式变化事件
+   */
+  'mode-change': [mode: VoicePlayerViewMode]
+  /**
+   * 音量变化事件
+   */
+  'volume-change': [vol: number]
+  /**
+   * 收藏变化事件
+   */
+  'favorite-change': [isFavorited: boolean, song?: VoicePlayerSongInfo]
+  /**
+   * 跳转事件
+   */
+  seek: [event: VoicePlayerSeekEvent]
+  /**
+   * 封面错误事件
+   */
+  'cover-error': []
+  /**
+   * 错误事件
+   */
+  error: [event: VoicePlayerErrorEvent]
+}
+
+/**
+ * 语音播放器暴露方法
+ */
+export type VoicePlayerExpose = {
+  /**
+   * 播放
+   */
+  play: () => void
+  /**
+   * 暂停
+   */
+  pause: () => void
+  /**
+   * 停止
+   */
+  stop: () => void
+  /**
+   * 跳转到指定时间
+   */
+  seek: (time: number) => void
+  /**
+   * 设置音量
+   */
+  setVolume: (volume: number) => void
+  /**
+   * 上一首
+   */
+  prev: () => void
+  /**
+   * 下一首
+   */
+  next: () => void
+  /**
+   * 切换到指定歌曲
+   */
+  switchToSong: (index: number) => void
+  /**
+   * 获取播放状态
+   */
+  getPlayState: () => {
+    /**
+     * 是否正在播放
+     */
+    isPlaying: boolean
+    /**
+     * 当前播放时间
+     */
+    currentTime: number
+    /**
+     * 总时长
+     */
+    duration: number
+    /**
+     * 当前歌曲
+     */
+    currentSong: VoicePlayerSongInfo | null
+  }
+}
+
+export type VoicePlayerProps = ExtractPropTypes<typeof voicePlayerProps>
+
+export type VoicePlayerInstance = ComponentPublicInstance<VoicePlayerProps, VoicePlayerExpose>

package/components/oxy-waterfall/oxy-waterfall.vue

@@ -50,7 +50,7 @@ export default {
 </script>
 <script lang="ts" setup>
 import type { ScrollViewOnRefresherrefreshEvent, ScrollViewOnScrollEvent } from '@uni-helper/uni-app-types/index'
-import { objToStyle, isDef, addUnit } from '../common/util'
+import { objToStyle, isDef, withDefaultUnit } from '../common/util'
 import { computed, ref, watch, nextTick } from 'vue'
 import { waterfallProps } from './types'
 
@@ -161,7 +161,7 @@ function clearColumn() {
 const waterfallStyle = computed(() => {
   const style: Record<string, any> = {}
   if (isDef(props.height)) {
-    style['height'] = addUnit(props.height)
+    style['height'] = withDefaultUnit(props.height)
   }
   return `${objToStyle(style)}${props.customStyle}`
 })
@@ -169,10 +169,10 @@ const waterfallStyle = computed(() => {
 const containerStyle = computed(() => {
   const style: Record<string, any> = {}
   if (props.leftGap) {
-    style['padding-left'] = addUnit(props.leftGap)
+    style['padding-left'] = withDefaultUnit(props.leftGap)
   }
   if (props.rightGap) {
-    style['padding-right'] = addUnit(props.rightGap)
+    style['padding-right'] = withDefaultUnit(props.rightGap)
   }
   return objToStyle(style)
 })
@@ -180,7 +180,7 @@ const containerStyle = computed(() => {
 const columnStyle = computed(() => {
   const style: Record<string, any> = {}
   if (props.columnGap) {
-    style['margin-left'] = addUnit(props.columnGap)
+    style['margin-left'] = withDefaultUnit(props.columnGap)
   }
   return objToStyle(style)
 })
@@ -188,7 +188,7 @@ const columnStyle = computed(() => {
 const itemStyle = computed(() => {
   const style: Record<string, any> = {}
   if (props.columnGap) {
-    style['margin-top'] = addUnit(props.columnGap)
+    style['margin-top'] = withDefaultUnit(props.columnGap)
   }
   return objToStyle(style)
 })

package/components/oxy-waterfall/types.ts

@@ -20,7 +20,7 @@ export const waterfallProps = {
   idKey: makeStringProp('id'),
 
   /**
-   * 容器的高度
+   * 容器的高度，number 类型按 `rpx` 语义处理
    */
   height: numericProp,
 
@@ -33,21 +33,21 @@ export const waterfallProps = {
 
   /**
    * 列与列的间隙
-   * 类型：number
-   * 默认值：20
+   * 类型：number（number 类型按 `rpx` 语义处理）
+   * 默认值：40
    */
-  columnGap: makeNumberProp(20),
+  columnGap: makeNumberProp(40),
 
   /**
    * 左边和列表的间隙
-   * 类型：number
+   * 类型：number（number 类型按 `rpx` 语义处理）
    * 默认值：0
    */
   leftGap: makeNumberProp(0),
 
   /**
    * 右边和列表的间隙
-   * 类型：number
+   * 类型：number（number 类型按 `rpx` 语义处理）
    * 默认值：0
    */
   rightGap: makeNumberProp(0),