@easy-editor/materials-dashboard-audio 0.0.3 → 0.0.5

package/CHANGELOG.md

@@ -1,13 +1,27 @@
-# @easy-editor/materials-dashboard-audio
-
-## 0.0.3
-
-### Patch Changes
-
-- fix: build error
-
-## 0.0.2
-
-### Patch Changes
-
-- feat: new setters
+# @easy-editor/materials-dashboard-audio
+
+## 0.0.5
+
+### Patch Changes
+
+- fix: component export error
+
+## 0.0.4
+
+### Patch Changes
+
+- perf: configure & datasource
+- Updated dependencies
+  - @easy-editor/materials-shared@0.0.1
+
+## 0.0.3
+
+### Patch Changes
+
+- fix: build error
+
+## 0.0.2
+
+### Patch Changes
+
+- feat: new setters

package/easypack.config.ts

@@ -0,0 +1,10 @@
+/**
+ * @easy-editor/easypack configuration
+ * @type {import('@easy-editor/easypack').EasypackConfig}
+ */
+export default {
+  preset: 'material',
+  dev: {
+    port: 5001,
+  },
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@easy-editor/materials-dashboard-audio",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "description": "Audio component for EasyEditor dashboard",
   "type": "module",
   "main": "dist/index.js",
@@ -46,22 +46,15 @@
     "react-dom": "^18 || ^19"
   },
   "dependencies": {
-    "@easy-editor/materials-shared": "0.0.0"
-  },
-  "devDependencies": {
-    "@originjs/vite-plugin-federation": "^1.4.1"
+    "@easy-editor/materials-shared": "0.0.1"
   },
   "scripts": {
-    "dev": "vite",
+    "dev": "easypack dev",
     "format": "biome format --write .",
     "lint": "biome check .",
     "build": "npm-run-all -nl build:*",
     "build:clean": "rimraf dist/",
-    "build:js": "rollup -c",
-    "build:types": "pnpm types",
-    "types": "npm-run-all -nl types:*",
-    "types:src": "tsc --project tsconfig.build.json",
-    "test-types": "tsc --project tsconfig.test.json"
+    "build:js": "easypack build"
   },
   "module": "dist/index.esm.js",
   "unpkg": "dist/index.min.js"

package/src/component.tsx

@@ -1,16 +1,16 @@
 /**
  * Audio Component
- * 音频播放组件
+ * 音频播放组件 - 支持数据源绑定和事件交互
  */
 
-import { useState, useRef, useEffect, type CSSProperties, type Ref } from 'react'
+import { useState, useRef, useEffect, useMemo, type CSSProperties } from 'react'
+import { useDataSource, type MaterialComponet } from '@easy-editor/materials-shared'
 import styles from './component.module.css'
 
 export type AudioStyle = 'custom' | 'native'
 
-export interface AudioProps {
-  ref?: Ref<HTMLDivElement>
-  /** 音频地址 */
+export interface AudioProps extends MaterialComponet {
+  /** 音频地址（兼容旧版） */
   src?: string
   /** 标题 */
   title?: string
@@ -20,8 +20,24 @@ export interface AudioProps {
   loop?: boolean
   /** 样式类型 */
   audioStyle?: AudioStyle
-  /** 外部样式 */
-  style?: CSSProperties
+  /** 播放速度 */
+  playbackRate?: number
+  /** 音量 (0-100) */
+  volume?: number
+  /** 点击事件 */
+  onClick?: (e: React.MouseEvent) => void
+  /** 双击事件 */
+  onDoubleClick?: (e: React.MouseEvent) => void
+  /** 鼠标进入 */
+  onMouseEnter?: (e: React.MouseEvent) => void
+  /** 鼠标离开 */
+  onMouseLeave?: (e: React.MouseEvent) => void
+  /** 播放事件 */
+  onPlay?: () => void
+  /** 暂停事件 */
+  onPause?: () => void
+  /** 结束事件 */
+  onEnded?: () => void
 }
 
 const formatTime = (seconds: number): string => {
@@ -32,13 +48,36 @@ const formatTime = (seconds: number): string => {
 
 export const Audio: React.FC<AudioProps> = ({
   ref,
-  src = '',
+  $data,
+  __dataSource,
+  src: staticSrc = '',
   title = '音频文件',
   autoPlay = false,
   loop = false,
   audioStyle = 'custom',
+  playbackRate = 1,
+  volume = 100,
+  rotation = 0,
+  opacity = 100,
+  background = 'transparent',
   style: externalStyle,
+  onClick,
+  onDoubleClick,
+  onMouseEnter,
+  onMouseLeave,
+  onPlay,
+  onPause,
+  onEnded,
 }) => {
+  // 解析数据源
+  const dataSource = useDataSource($data, __dataSource)
+  const src = useMemo<string>(() => {
+    if (dataSource.length > 0 && typeof dataSource[0]?.src === 'string') {
+      return dataSource[0].src
+    }
+    return staticSrc
+  }, [dataSource, staticSrc])
+
   const audioRef = useRef<HTMLAudioElement>(null)
   const [isPlaying, setIsPlaying] = useState(false)
   const [currentTime, setCurrentTime] = useState(0)
@@ -52,18 +91,41 @@ export const Audio: React.FC<AudioProps> = ({
 
     const handleTimeUpdate = () => setCurrentTime(audio.currentTime)
     const handleLoadedMetadata = () => setDuration(audio.duration)
-    const handleEnded = () => setIsPlaying(false)
+    const handleEnded = () => {
+      setIsPlaying(false)
+      onEnded?.()
+    }
+    const handlePlay = () => {
+      setIsPlaying(true)
+      onPlay?.()
+    }
+    const handlePause = () => {
+      setIsPlaying(false)
+      onPause?.()
+    }
 
     audio.addEventListener('timeupdate', handleTimeUpdate)
     audio.addEventListener('loadedmetadata', handleLoadedMetadata)
     audio.addEventListener('ended', handleEnded)
+    audio.addEventListener('play', handlePlay)
+    audio.addEventListener('pause', handlePause)
 
     return () => {
       audio.removeEventListener('timeupdate', handleTimeUpdate)
       audio.removeEventListener('loadedmetadata', handleLoadedMetadata)
       audio.removeEventListener('ended', handleEnded)
+      audio.removeEventListener('play', handlePlay)
+      audio.removeEventListener('pause', handlePause)
+    }
+  }, [onEnded, onPlay, onPause])
+
+  // 更新播放速度和音量
+  useEffect(() => {
+    if (audioRef.current) {
+      audioRef.current.playbackRate = playbackRate
+      audioRef.current.volume = volume / 100
     }
-  }, [])
+  }, [playbackRate, volume])
 
   const togglePlay = () => {
     if (audioRef.current) {
@@ -72,7 +134,6 @@ export const Audio: React.FC<AudioProps> = ({
       } else {
         audioRef.current.play()
       }
-      setIsPlaying(!isPlaying)
     }
   }
 
@@ -86,10 +147,25 @@ export const Audio: React.FC<AudioProps> = ({
 
   const progress = duration ? (currentTime / duration) * 100 : 0
 
+  const containerStyle: CSSProperties = {
+    transform: rotation !== 0 ? `rotate(${rotation}deg)` : undefined,
+    opacity: opacity / 100,
+    backgroundColor: background,
+    ...externalStyle,
+  }
+
   // 原生样式
   if (audioStyle === 'native') {
     return (
-      <div className={styles.container} ref={ref} style={externalStyle}>
+      <div
+        className={styles.container}
+        onClick={onClick}
+        onDoubleClick={onDoubleClick}
+        onMouseEnter={onMouseEnter}
+        onMouseLeave={onMouseLeave}
+        ref={ref}
+        style={containerStyle}
+      >
         <audio autoPlay={autoPlay} className={styles.nativeAudio} controls loop={loop} ref={audioRef} src={src} />
       </div>
     )
@@ -97,7 +173,15 @@ export const Audio: React.FC<AudioProps> = ({
 
   // 自定义样式
   return (
-    <div className={styles.container} ref={ref} style={externalStyle}>
+    <div
+      className={styles.container}
+      onClick={onClick}
+      onDoubleClick={onDoubleClick}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+      ref={ref}
+      style={containerStyle}
+    >
       <audio autoPlay={autoPlay} loop={loop} ref={audioRef} src={src} />
 
       <button

package/src/configure.ts

@@ -1,247 +1,165 @@
-/**
- * Audio Configure
- * 音频组件配置
- */
-
-import type { Configure } from '@easy-editor/core'
-import type { UploadValue } from '@easy-editor/materials-shared'
-
-export const configure: Configure = {
-  props: [
-    {
-      type: 'group',
-      title: '属性',
-      setter: 'TabSetter',
-      items: [
-        {
-          type: 'group',
-          key: 'config',
-          title: '配置',
-          setter: {
-            componentName: 'CollapseSetter',
-            props: {
-              icon: false,
-            },
-          },
-          items: [
-            // 基础配置
-            {
-              name: 'id',
-              title: 'ID',
-              setter: 'NodeIdSetter',
-              extraProps: {
-                // @ts-expect-error label is not a valid extra prop
-                label: false,
-              },
-            },
-            {
-              name: 'title',
-              title: '标题',
-              setter: 'StringSetter',
-              extraProps: {
-                getValue(target) {
-                  return target.getExtraPropValue('title')
-                },
-                setValue(target, value) {
-                  target.setExtraPropValue('title', value)
-                },
-              },
-            },
-            {
-              type: 'group',
-              title: '基础属性',
-              setter: {
-                componentName: 'CollapseSetter',
-                props: {
-                  icon: false,
-                },
-              },
-              items: [
-                {
-                  name: 'rect',
-                  title: '位置尺寸',
-                  setter: 'RectSetter',
-                  extraProps: {
-                    getValue(target) {
-                      return target.getExtraPropValue('$dashboard.rect')
-                    },
-                    setValue(target, value) {
-                      target.setExtraPropValue('$dashboard.rect', value)
-                    },
-                  },
-                },
-              ],
-            },
-            // 组件配置
-            {
-              type: 'group',
-              title: '内容',
-              setter: {
-                componentName: 'CollapseSetter',
-                props: {
-                  icon: false,
-                },
-              },
-              items: [
-                {
-                  name: '__upload',
-                  title: '上传',
-                  setter: {
-                    componentName: 'UploadSetter',
-                    props: {
-                      accept: '.mp3,.wav,.ogg',
-                    },
-                  },
-                  extraProps: {
-                    setValue(target, value: UploadValue) {
-                      if (value) {
-                        const { base64, raw } = value
-                        if (base64) {
-                          target.parent.setPropValue('src', base64)
-                        }
-                        if (raw?.width) {
-                          target.parent.setExtraPropValue('$dashboard.rect.width', raw.width)
-                        }
-                        if (raw?.height) {
-                          target.parent.setExtraPropValue('$dashboard.rect.height', raw.height)
-                        }
-                      } else {
-                        target.parent.clearPropValue('src')
-                      }
-                    },
-                  },
-                },
-                {
-                  name: 'src',
-                  title: '音频地址',
-                  setter: 'StringSetter',
-                },
-                {
-                  name: 'title',
-                  title: '标题',
-                  setter: 'StringSetter',
-                  extraProps: {
-                    defaultValue: '音频文件',
-                  },
-                },
-              ],
-            },
-            {
-              type: 'group',
-              title: '播放',
-              setter: {
-                componentName: 'CollapseSetter',
-                props: {
-                  icon: false,
-                },
-              },
-              items: [
-                {
-                  name: 'autoPlay',
-                  title: '自动播放',
-                  setter: 'SwitchSetter',
-                  extraProps: {
-                    defaultValue: false,
-                  },
-                },
-                {
-                  name: 'loop',
-                  title: '循环播放',
-                  setter: 'SwitchSetter',
-                  extraProps: {
-                    defaultValue: false,
-                  },
-                },
-                {
-                  name: 'audioStyle',
-                  title: '样式类型',
-                  setter: {
-                    componentName: 'SelectSetter',
-                    props: {
-                      options: [
-                        { label: '自定义', value: 'custom' },
-                        { label: '原生', value: 'native' },
-                      ],
-                    },
-                  },
-                  extraProps: {
-                    defaultValue: 'custom',
-                  },
-                },
-                {
-                  name: 'playbackRate',
-                  title: '播放速度',
-                  setter: {
-                    componentName: 'SelectSetter',
-                    props: {
-                      options: [
-                        { label: '0.5x', value: 0.5 },
-                        { label: '0.75x', value: 0.75 },
-                        { label: '1x (正常)', value: 1 },
-                        { label: '1.25x', value: 1.25 },
-                        { label: '1.5x', value: 1.5 },
-                        { label: '2x', value: 2 },
-                      ],
-                    },
-                  },
-                  extraProps: {
-                    defaultValue: 1,
-                  },
-                },
-                {
-                  name: 'volume',
-                  title: '音量',
-                  setter: {
-                    componentName: 'SliderSetter',
-                    props: {
-                      min: 0,
-                      max: 100,
-                      step: 1,
-                      suffix: '%',
-                    },
-                  },
-                  extraProps: {
-                    defaultValue: 100,
-                  },
-                },
-              ],
-            },
-          ],
-        },
-        {
-          type: 'group',
-          key: 'data',
-          title: '数据',
-          items: [
-            {
-              name: 'dataBinding',
-              title: '数据绑定',
-              setter: 'DataBindingSetter',
-            },
-          ],
-        },
-        {
-          type: 'group',
-          key: 'advanced',
-          title: '高级',
-          items: [
-            {
-              name: 'condition',
-              title: '显隐控制',
-              setter: 'SwitchSetter',
-              extraProps: {
-                defaultValue: true,
-                supportVariable: true,
-              },
-            },
-          ],
-        },
-      ],
-    },
-  ],
-  component: {},
-  supports: {},
-  advanced: {},
-}
-
-export default configure
+/**
+ * Audio Configure
+ * 音频组件配置
+ */
+
+import type { FieldConfig } from '@easy-editor/core'
+import type { UploadValue } from '@easy-editor/materials-shared'
+import { createCollapseGroup, createDataConfigGroup, createStandardConfigure } from '@easy-editor/materials-shared'
+
+/** 组件配置 - 音频独有 */
+const componentConfigGroup: FieldConfig = createCollapseGroup(
+  '组件配置',
+  [
+    {
+      type: 'group',
+      title: '组件配置',
+      setter: 'SubTabSetter',
+      items: [
+        // 内容 Tab
+        {
+          type: 'group',
+          key: 'content',
+          title: '内容',
+          items: [
+            {
+              name: '__upload',
+              title: '上传',
+              setter: {
+                componentName: 'UploadSetter',
+                props: {
+                  accept: '.mp3,.wav,.ogg',
+                },
+              },
+              extraProps: {
+                setValue(target, value: UploadValue) {
+                  if (value) {
+                    const { base64, raw } = value
+                    if (base64) {
+                      target.parent.setPropValue('src', base64)
+                    }
+                    if (raw?.width) {
+                      target.parent.setExtraPropValue('$dashboard.rect.width', raw.width)
+                    }
+                    if (raw?.height) {
+                      target.parent.setExtraPropValue('$dashboard.rect.height', raw.height)
+                    }
+                  } else {
+                    target.parent.clearPropValue('src')
+                  }
+                },
+              },
+            },
+            {
+              name: 'src',
+              title: '音频地址',
+              setter: 'StringSetter',
+            },
+            {
+              name: 'title',
+              title: '标题',
+              setter: 'StringSetter',
+              extraProps: {
+                defaultValue: '音频文件',
+              },
+            },
+          ],
+        },
+        // 播放 Tab
+        {
+          type: 'group',
+          key: 'playback',
+          title: '播放',
+          items: [
+            {
+              name: 'autoPlay',
+              title: '自动播放',
+              setter: 'SwitchSetter',
+              extraProps: {
+                defaultValue: false,
+              },
+            },
+            {
+              name: 'loop',
+              title: '循环播放',
+              setter: 'SwitchSetter',
+              extraProps: {
+                defaultValue: false,
+              },
+            },
+            {
+              name: 'playbackRate',
+              title: '播放速度',
+              setter: {
+                componentName: 'SelectSetter',
+                props: {
+                  options: [
+                    { label: '0.5x', value: 0.5 },
+                    { label: '0.75x', value: 0.75 },
+                    { label: '1x (正常)', value: 1 },
+                    { label: '1.25x', value: 1.25 },
+                    { label: '1.5x', value: 1.5 },
+                    { label: '2x', value: 2 },
+                  ],
+                },
+              },
+              extraProps: {
+                defaultValue: 1,
+              },
+            },
+            {
+              name: 'volume',
+              title: '音量',
+              setter: {
+                componentName: 'SliderSetter',
+                props: {
+                  min: 0,
+                  max: 100,
+                  step: 1,
+                  suffix: '%',
+                },
+              },
+              extraProps: {
+                defaultValue: 100,
+              },
+            },
+          ],
+        },
+        // 样式 Tab
+        {
+          type: 'group',
+          key: 'style',
+          title: '样式',
+          items: [
+            {
+              name: 'audioStyle',
+              title: '样式类型',
+              setter: {
+                componentName: 'SegmentedSetter',
+                props: {
+                  options: [
+                    { label: '自定义', value: 'custom' },
+                    { label: '原生', value: 'native' },
+                  ],
+                },
+              },
+              extraProps: {
+                defaultValue: 'custom',
+              },
+            },
+          ],
+        },
+      ],
+    },
+  ],
+  {
+    padding: '6px 16px 12px',
+  },
+)
+
+/** 数据配置 */
+const dataConfigGroup: FieldConfig = createDataConfigGroup([
+  { name: 'src', label: 'src', type: 'string', required: true, description: '音频地址' },
+])
+
+export const configure = createStandardConfigure(componentConfigGroup, dataConfigGroup)