@easy-editor/materials-dashboard-audio 0.0.2 → 0.0.4

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @easy-editor/materials-dashboard-audio
 
+## 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

package/dist/component.min.js

@@ -1,2 +1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("react/jsx-runtime")):"function"==typeof define&&define.amd?define(["exports","react","react/jsx-runtime"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).EasyEditorMaterialsAudioComponent={},e.React,e.jsxRuntime)}(this,function(e,t,o){"use strict";var n="component-module__container___VbZSk",r="component-module__playButton___M6QVA",i="component-module__playIcon___t8-WV",a="component-module__pauseIcon___8XmSk",s="component-module__pauseBar___eM6DG",d="component-module__info___VyTlr",l="component-module__title___Hj54k",_="component-module__progressContainer___HvygE",c="component-module__progressBar___wROZC",u="component-module__progressFill___F8n5d",p="component-module__time___-5GMu",m="component-module__nativeAudio___vCo17";!function(e,t){void 0===t&&(t={});var o=t.insertAt;if("undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===o&&n.firstChild?n.insertBefore(r,n.firstChild):n.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}(".component-module__container___VbZSk{align-items:center;background:rgba(10,10,26,.95);border:1px solid rgba(26,26,62,.8);border-radius:8px;display:flex;gap:12px;height:100%;padding:12px 16px;width:100%}.component-module__playButton___M6QVA{align-items:center;background:linear-gradient(135deg,#00d4ff,#9b59b6);border:none;border-radius:50%;cursor:pointer;display:flex;flex-shrink:0;height:40px;justify-content:center;transition:transform .2s ease;width:40px}.component-module__playButton___M6QVA:hover{transform:scale(1.05)}.component-module__playIcon___t8-WV{border-bottom:8px solid transparent;border-left:12px solid #fff;border-top:8px solid transparent;height:0;margin-left:3px;width:0}.component-module__pauseIcon___8XmSk{display:flex;gap:3px}.component-module__pauseBar___eM6DG{background:#fff;border-radius:2px;height:14px;width:4px}.component-module__info___VyTlr{flex:1;min-width:0}.component-module__title___Hj54k{color:#e6e6e6;font-size:14px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.component-module__progressContainer___HvygE{align-items:center;display:flex;gap:8px;margin-top:4px}.component-module__progressBar___wROZC{background:rgba(26,26,62,.8);border-radius:2px;cursor:pointer;flex:1;height:4px;overflow:hidden}.component-module__progressFill___F8n5d{background:linear-gradient(90deg,#00d4ff,#9b59b6);border-radius:2px;height:100%;transition:width .1s linear}.component-module__time___-5GMu{color:hsla(0,0%,100%,.6);font-family:Courier New,Courier,monospace;font-size:12px;min-width:80px;text-align:right}.component-module__nativeAudio___vCo17{width:100%}");const f=e=>`${Math.floor(e/60)}:${Math.floor(e%60).toString().padStart(2,"0")}`,x=({ref:e,src:x="",title:h="音频文件",autoPlay:g=!1,loop:y=!1,audioStyle:b="custom",style:v})=>{const j=t.useRef(null),[w,N]=t.useState(!1),[C,k]=t.useState(0),[E,S]=t.useState(0);t.useEffect(()=>{const e=j.current;if(!e)return;const t=()=>k(e.currentTime),o=()=>S(e.duration),n=()=>N(!1);return e.addEventListener("timeupdate",t),e.addEventListener("loadedmetadata",o),e.addEventListener("ended",n),()=>{e.removeEventListener("timeupdate",t),e.removeEventListener("loadedmetadata",o),e.removeEventListener("ended",n)}},[]);const M=E?C/E*100:0;return"native"===b?o.jsx("div",{className:n,ref:e,style:v,children:o.jsx("audio",{autoPlay:g,className:m,controls:!0,loop:y,ref:j,src:x})}):o.jsxs("div",{className:n,ref:e,style:v,children:[o.jsx("audio",{autoPlay:g,loop:y,ref:j,src:x}),o.jsx("button",{"aria-label":w?"Pause":"Play",className:r,onClick:()=>{j.current&&(w?j.current.pause():j.current.play(),N(!w))},type:"button",children:w?o.jsxs("div",{className:a,children:[o.jsx("div",{className:s}),o.jsx("div",{className:s})]}):o.jsx("div",{className:i})}),o.jsxs("div",{className:d,children:[o.jsx("div",{className:l,children:h}),o.jsxs("div",{className:_,children:[o.jsx("button",{"aria-label":"Seek to position",className:c,onClick:e=>{if(j.current&&E){const t=e.currentTarget.getBoundingClientRect(),o=(e.clientX-t.left)/t.width;j.current.currentTime=o*E}},type:"button",children:o.jsx("div",{className:u,style:{width:`${M}%`}})}),o.jsxs("span",{className:p,children:[f(C)," / ",f(E||0)]})]})]})]})};e.Audio=x,e.default=x,Object.defineProperty(e,"__esModule",{value:!0})});
-//# sourceMappingURL=component.min.js.map
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("react/jsx-runtime")):"function"==typeof define&&define.amd?define(["exports","react","react/jsx-runtime"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).EasyEditorMaterialsAudioComponent={},e.React,e.jsxRuntime)}(this,function(e,t,o){"use strict";const r=(e,t)=>{if(!t)return e;const o=t.split(".");let r=e;for(const e of o){if(null==r)return;if("object"!=typeof r)return;r=r[e]}return r},n=e=>void 0===e?[]:Array.isArray(e)?e:e&&"object"==typeof e?[e]:[],a=(e,t)=>{const o=((e,t)=>{if(!e)return[];if("static"===e.sourceType)return Array.isArray(e.staticData)?e.staticData:[];if("global"===e.sourceType&&e.datasourceId){const o=t?.page?.[e.datasourceId];return n(o)}if("datasource"===e.sourceType&&e.datasourceId){const o=t?.component?.[e.datasourceId];return n(o)}return[]})(e,t);return((e,t)=>t&&0!==t.length?e.map(e=>{const o={};for(const{componentField:n,sourceField:a}of t)n&&a&&(o[n]=r(e,a));return o}):e)(o,e?.fieldMappings)};const s=(e,t,o)=>({type:"group",title:e,setter:{componentName:"CollapseSetter",props:{icon:!1,...o}},items:t});s("基础配置",[{name:"title",title:"标题",setter:"StringSetter",extraProps:{getValue:e=>e.getExtraPropValue("title"),setValue(e,t){e.setExtraPropValue("title",t)}}},{name:"rect",title:"位置尺寸",setter:"RectSetter",extraProps:{getValue:e=>e.getExtraPropValue("$dashboard.rect"),setValue(e,t){e.setExtraPropValue("$dashboard.rect",t)}}},{name:"rotation",title:"旋转角度",setter:{componentName:"SliderSetter",props:{min:0,max:360,suffix:"°"}},extraProps:{defaultValue:0}},{name:"opacity",title:"不透明度",setter:{componentName:"SliderSetter",props:{min:0,max:100,suffix:"%"}},extraProps:{defaultValue:100}},{name:"background",title:"背景颜色",setter:"ColorSetter",extraProps:{defaultValue:"transparent"}}]);const i=[{title:"点击事件",children:[{label:"点击",value:"onClick",description:"鼠标点击时触发"},{label:"双击",value:"onDoubleClick",description:"鼠标双击时触发"}]},{title:"鼠标事件",children:[{label:"鼠标进入",value:"onMouseEnter",description:"鼠标进入时触发"},{label:"鼠标离开",value:"onMouseLeave",description:"鼠标离开时触发"}]}];((e=i)=>{s("事件绑定",[{name:"events",title:"事件",setter:{componentName:"EventSetter",props:{events:e}},extraProps:{label:!1}}])})(),s("高级配置",[{title:"条件渲染",setter:"SwitchSetter",extraProps:{supportVariable:!0,getValue:e=>e.getNode().getExtraPropValue("condition"),setValue(e,t){e.getNode().setExtraProp("condition",t)}}}]);var l="component-module__container___VbZSk",d="component-module__playButton___M6QVA",c="component-module__playIcon___t8-WV",u="component-module__pauseIcon___8XmSk",p="component-module__pauseBar___eM6DG",m="component-module__info___VyTlr",_="component-module__title___Hj54k",f="component-module__progressContainer___HvygE",x="component-module__progressBar___wROZC",g="component-module__progressFill___F8n5d",h="component-module__time___-5GMu",y="component-module__nativeAudio___vCo17";!function(e,t){void 0===t&&(t={});var o=t.insertAt;if("undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===o&&r.firstChild?r.insertBefore(n,r.firstChild):r.appendChild(n),n.styleSheet?n.styleSheet.cssText=e:n.appendChild(document.createTextNode(e))}}(".component-module__container___VbZSk{align-items:center;background:rgba(10,10,26,.95);border:1px solid rgba(26,26,62,.8);border-radius:8px;display:flex;gap:12px;height:100%;padding:12px 16px;width:100%}.component-module__playButton___M6QVA{align-items:center;background:linear-gradient(135deg,#00d4ff,#9b59b6);border:none;border-radius:50%;cursor:pointer;display:flex;flex-shrink:0;height:40px;justify-content:center;transition:transform .2s ease;width:40px}.component-module__playButton___M6QVA:hover{transform:scale(1.05)}.component-module__playIcon___t8-WV{border-bottom:8px solid transparent;border-left:12px solid #fff;border-top:8px solid transparent;height:0;margin-left:3px;width:0}.component-module__pauseIcon___8XmSk{display:flex;gap:3px}.component-module__pauseBar___eM6DG{background:#fff;border-radius:2px;height:14px;width:4px}.component-module__info___VyTlr{flex:1;min-width:0}.component-module__title___Hj54k{color:#e6e6e6;font-size:14px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.component-module__progressContainer___HvygE{align-items:center;display:flex;gap:8px;margin-top:4px}.component-module__progressBar___wROZC{background:rgba(26,26,62,.8);border-radius:2px;cursor:pointer;flex:1;height:4px;overflow:hidden}.component-module__progressFill___F8n5d{background:linear-gradient(90deg,#00d4ff,#9b59b6);border-radius:2px;height:100%;transition:width .1s linear}.component-module__time___-5GMu{color:hsla(0,0%,100%,.6);font-family:Courier New,Courier,monospace;font-size:12px;min-width:80px;text-align:right}.component-module__nativeAudio___vCo17{width:100%}");const v=e=>`${Math.floor(e/60)}:${Math.floor(e%60).toString().padStart(2,"0")}`;e.Audio=({ref:e,$data:r,__dataSource:n,src:s="",title:i="音频文件",autoPlay:b=!1,loop:E=!1,audioStyle:k="custom",playbackRate:C=1,volume:S=100,rotation:j=0,opacity:V=100,background:N="transparent",style:M,onClick:w,onDoubleClick:P,onMouseEnter:L,onMouseLeave:T,onPlay:A,onPause:B,onEnded:R})=>{const D=function(e,o){return t.useMemo(()=>a(e,o),[e,o])}(r,n),I=t.useMemo(()=>D.length>0&&"string"==typeof D[0]?.src?D[0].src:s,[D,s]),$=t.useRef(null),[F,G]=t.useState(!1),[H,Z]=t.useState(0),[Q,X]=t.useState(0);t.useEffect(()=>{const e=$.current;if(!e)return;const t=()=>Z(e.currentTime),o=()=>X(e.duration),r=()=>{G(!1),R?.()},n=()=>{G(!0),A?.()},a=()=>{G(!1),B?.()};return e.addEventListener("timeupdate",t),e.addEventListener("loadedmetadata",o),e.addEventListener("ended",r),e.addEventListener("play",n),e.addEventListener("pause",a),()=>{e.removeEventListener("timeupdate",t),e.removeEventListener("loadedmetadata",o),e.removeEventListener("ended",r),e.removeEventListener("play",n),e.removeEventListener("pause",a)}},[R,A,B]),t.useEffect(()=>{$.current&&($.current.playbackRate=C,$.current.volume=S/100)},[C,S]);const q=Q?H/Q*100:0,z={transform:0!==j?`rotate(${j}deg)`:void 0,opacity:V/100,backgroundColor:N,...M};return"native"===k?o.jsx("div",{className:l,onClick:w,onDoubleClick:P,onMouseEnter:L,onMouseLeave:T,ref:e,style:z,children:o.jsx("audio",{autoPlay:b,className:y,controls:!0,loop:E,ref:$,src:I})}):o.jsxs("div",{className:l,onClick:w,onDoubleClick:P,onMouseEnter:L,onMouseLeave:T,ref:e,style:z,children:[o.jsx("audio",{autoPlay:b,loop:E,ref:$,src:I}),o.jsx("button",{"aria-label":F?"Pause":"Play",className:d,onClick:()=>{$.current&&(F?$.current.pause():$.current.play())},type:"button",children:F?o.jsxs("div",{className:u,children:[o.jsx("div",{className:p}),o.jsx("div",{className:p})]}):o.jsx("div",{className:c})}),o.jsxs("div",{className:m,children:[o.jsx("div",{className:_,children:i}),o.jsxs("div",{className:f,children:[o.jsx("button",{"aria-label":"Seek to position",className:x,onClick:e=>{if($.current&&Q){const t=e.currentTarget.getBoundingClientRect(),o=(e.clientX-t.left)/t.width;$.current.currentTime=o*Q}},type:"button",children:o.jsx("div",{className:g,style:{width:`${q}%`}})}),o.jsxs("span",{className:h,children:[v(H)," / ",v(Q||0)]})]})]})]})}});

package/dist/index.min.js

@@ -1,2 +1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("react/jsx-runtime")):"function"==typeof define&&define.amd?define(["exports","react","react/jsx-runtime"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).EasyEditorMaterialsAudio={},e.React,e.jsxRuntime)}(this,function(e,t,o){"use strict";var a="component-module__container___VbZSk",r="component-module__playButton___M6QVA",n="component-module__playIcon___t8-WV",s="component-module__pauseIcon___8XmSk",l="component-module__pauseBar___eM6DG",i="component-module__info___VyTlr",p="component-module__title___Hj54k",d="component-module__progressContainer___HvygE",c="component-module__progressBar___wROZC",u="component-module__progressFill___F8n5d",m="component-module__time___-5GMu",_="component-module__nativeAudio___vCo17";!function(e,t){void 0===t&&(t={});var o=t.insertAt;if("undefined"!=typeof document){var a=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===o&&a.firstChild?a.insertBefore(r,a.firstChild):a.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}(".component-module__container___VbZSk{align-items:center;background:rgba(10,10,26,.95);border:1px solid rgba(26,26,62,.8);border-radius:8px;display:flex;gap:12px;height:100%;padding:12px 16px;width:100%}.component-module__playButton___M6QVA{align-items:center;background:linear-gradient(135deg,#00d4ff,#9b59b6);border:none;border-radius:50%;cursor:pointer;display:flex;flex-shrink:0;height:40px;justify-content:center;transition:transform .2s ease;width:40px}.component-module__playButton___M6QVA:hover{transform:scale(1.05)}.component-module__playIcon___t8-WV{border-bottom:8px solid transparent;border-left:12px solid #fff;border-top:8px solid transparent;height:0;margin-left:3px;width:0}.component-module__pauseIcon___8XmSk{display:flex;gap:3px}.component-module__pauseBar___eM6DG{background:#fff;border-radius:2px;height:14px;width:4px}.component-module__info___VyTlr{flex:1;min-width:0}.component-module__title___Hj54k{color:#e6e6e6;font-size:14px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.component-module__progressContainer___HvygE{align-items:center;display:flex;gap:8px;margin-top:4px}.component-module__progressBar___wROZC{background:rgba(26,26,62,.8);border-radius:2px;cursor:pointer;flex:1;height:4px;overflow:hidden}.component-module__progressFill___F8n5d{background:linear-gradient(90deg,#00d4ff,#9b59b6);border-radius:2px;height:100%;transition:width .1s linear}.component-module__time___-5GMu{color:hsla(0,0%,100%,.6);font-family:Courier New,Courier,monospace;font-size:12px;min-width:80px;text-align:right}.component-module__nativeAudio___vCo17{width:100%}");const h=e=>`${Math.floor(e/60)}:${Math.floor(e%60).toString().padStart(2,"0")}`,x="EasyEditorMaterialsAudio";const f={componentName:x,title:"音频",group:"media",devMode:"proCode",npm:{package:"@easy-editor/materials-dashboard-audio",version:"0.0.1",globalName:x,componentName:x},snippets:[{title:"音频播放器",screenshot:"",schema:{componentName:x,props:{src:"",title:"音频文件",autoPlay:!1,loop:!1,audioStyle:"custom"},$dashboard:{rect:{width:300,height:60}}}},{title:"原生音频",screenshot:"",schema:{componentName:x,props:{src:"",title:"音频文件",audioStyle:"native"},$dashboard:{rect:{width:300,height:60}}}}],configure:{props:[{type:"group",title:"属性",setter:"TabSetter",items:[{type:"group",key:"config",title:"配置",setter:{componentName:"CollapseSetter",props:{icon:!1}},items:[{name:"id",title:"ID",setter:"NodeIdSetter",extraProps:{label:!1}},{name:"title",title:"标题",setter:"StringSetter",extraProps:{getValue:e=>e.getExtraPropValue("title"),setValue(e,t){e.setExtraPropValue("title",t)}}},{type:"group",title:"基础属性",setter:{componentName:"CollapseSetter",props:{icon:!1}},items:[{name:"rect",title:"位置尺寸",setter:"RectSetter",extraProps:{getValue:e=>e.getExtraPropValue("$dashboard.rect"),setValue(e,t){e.setExtraPropValue("$dashboard.rect",t)}}}]},{type:"group",title:"内容",setter:{componentName:"CollapseSetter",props:{icon:!1}},items:[{name:"__upload",title:"上传",setter:{componentName:"UploadSetter",props:{accept:".mp3,.wav,.ogg"}},extraProps:{setValue(e,t){if(t){const{base64:o,raw:a}=t;o&&e.parent.setPropValue("src",o),a?.width&&e.parent.setExtraPropValue("$dashboard.rect.width",a.width),a?.height&&e.parent.setExtraPropValue("$dashboard.rect.height",a.height)}else e.parent.clearPropValue("src")}}},{name:"src",title:"音频地址",setter:"StringSetter"},{name:"title",title:"标题",setter:"StringSetter",extraProps:{defaultValue:"音频文件"}}]},{type:"group",title:"播放",setter:{componentName:"CollapseSetter",props:{icon:!1}},items:[{name:"autoPlay",title:"自动播放",setter:"SwitchSetter",extraProps:{defaultValue:!1}},{name:"loop",title:"循环播放",setter:"SwitchSetter",extraProps:{defaultValue:!1}},{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:.5},{label:"0.75x",value:.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:!0,supportVariable:!0}}]}]}],component:{},supports:{},advanced:{}}};e.component=({ref:e,src:x="",title:f="音频文件",autoPlay:g=!1,loop:y=!1,audioStyle:b="custom",style:v})=>{const S=t.useRef(null),[N,V]=t.useState(!1),[w,P]=t.useState(0),[j,E]=t.useState(0);t.useEffect(()=>{const e=S.current;if(!e)return;const t=()=>P(e.currentTime),o=()=>E(e.duration),a=()=>V(!1);return e.addEventListener("timeupdate",t),e.addEventListener("loadedmetadata",o),e.addEventListener("ended",a),()=>{e.removeEventListener("timeupdate",t),e.removeEventListener("loadedmetadata",o),e.removeEventListener("ended",a)}},[]);const k=j?w/j*100:0;return"native"===b?o.jsx("div",{className:a,ref:e,style:v,children:o.jsx("audio",{autoPlay:g,className:_,controls:!0,loop:y,ref:S,src:x})}):o.jsxs("div",{className:a,ref:e,style:v,children:[o.jsx("audio",{autoPlay:g,loop:y,ref:S,src:x}),o.jsx("button",{"aria-label":N?"Pause":"Play",className:r,onClick:()=>{S.current&&(N?S.current.pause():S.current.play(),V(!N))},type:"button",children:N?o.jsxs("div",{className:s,children:[o.jsx("div",{className:l}),o.jsx("div",{className:l})]}):o.jsx("div",{className:n})}),o.jsxs("div",{className:i,children:[o.jsx("div",{className:p,children:f}),o.jsxs("div",{className:d,children:[o.jsx("button",{"aria-label":"Seek to position",className:c,onClick:e=>{if(S.current&&j){const t=e.currentTarget.getBoundingClientRect(),o=(e.clientX-t.left)/t.width;S.current.currentTime=o*j}},type:"button",children:o.jsx("div",{className:u,style:{width:`${k}%`}})}),o.jsxs("span",{className:m,children:[h(w)," / ",h(j||0)]})]})]})]})},e.meta=f});
-//# sourceMappingURL=index.min.js.map
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("react/jsx-runtime")):"function"==typeof define&&define.amd?define(["exports","react","react/jsx-runtime"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).EasyEditorMaterialsAudio={},e.React,e.jsxRuntime)}(this,function(e,t,o){"use strict";const r=(e,t)=>{if(!t)return e;const o=t.split(".");let r=e;for(const e of o){if(null==r)return;if("object"!=typeof r)return;r=r[e]}return r},a=e=>void 0===e?[]:Array.isArray(e)?e:e&&"object"==typeof e?[e]:[],n=(e,t)=>{const o=((e,t)=>{if(!e)return[];if("static"===e.sourceType)return Array.isArray(e.staticData)?e.staticData:[];if("global"===e.sourceType&&e.datasourceId){const o=t?.page?.[e.datasourceId];return a(o)}if("datasource"===e.sourceType&&e.datasourceId){const o=t?.component?.[e.datasourceId];return a(o)}return[]})(e,t);return((e,t)=>t&&0!==t.length?e.map(e=>{const o={};for(const{componentField:a,sourceField:n}of t)a&&n&&(o[a]=r(e,n));return o}):e)(o,e?.fieldMappings)};const s=(e,t)=>{const o=Array.isArray(e)?e:[e],r=o[0]||{};return{sourceType:"static",staticData:o,fieldMappings:Object.keys(r).map(e=>({componentField:e,sourceField:e}))}},i=(e,t,o)=>({type:"group",title:e,setter:{componentName:"CollapseSetter",props:{icon:!1,...o}},items:t}),l={name:"nodeInfo",title:"节点信息",setter:"NodeInfoSetter",extraProps:{label:!1}},p=i("基础配置",[{name:"title",title:"标题",setter:"StringSetter",extraProps:{getValue:e=>e.getExtraPropValue("title"),setValue(e,t){e.setExtraPropValue("title",t)}}},{name:"rect",title:"位置尺寸",setter:"RectSetter",extraProps:{getValue:e=>e.getExtraPropValue("$dashboard.rect"),setValue(e,t){e.setExtraPropValue("$dashboard.rect",t)}}},{name:"rotation",title:"旋转角度",setter:{componentName:"SliderSetter",props:{min:0,max:360,suffix:"°"}},extraProps:{defaultValue:0}},{name:"opacity",title:"不透明度",setter:{componentName:"SliderSetter",props:{min:0,max:100,suffix:"%"}},extraProps:{defaultValue:100}},{name:"background",title:"背景颜色",setter:"ColorSetter",extraProps:{defaultValue:"transparent"}}]),d=[{title:"点击事件",children:[{label:"点击",value:"onClick",description:"鼠标点击时触发"},{label:"双击",value:"onDoubleClick",description:"鼠标双击时触发"}]},{title:"鼠标事件",children:[{label:"鼠标进入",value:"onMouseEnter",description:"鼠标进入时触发"},{label:"鼠标离开",value:"onMouseLeave",description:"鼠标离开时触发"}]}],c=((e=d)=>i("事件绑定",[{name:"events",title:"事件",setter:{componentName:"EventSetter",props:{events:e}},extraProps:{label:!1}}]))(),u=i("高级配置",[{title:"条件渲染",setter:"SwitchSetter",extraProps:{supportVariable:!0,getValue:e=>e.getNode().getExtraPropValue("condition"),setValue(e,t){e.getNode().setExtraProp("condition",t)}}}]);var m="component-module__container___VbZSk",_="component-module__playButton___M6QVA",f="component-module__playIcon___t8-WV",x="component-module__pauseIcon___8XmSk",g="component-module__pauseBar___eM6DG",y="component-module__info___VyTlr",h="component-module__title___Hj54k",b="component-module__progressContainer___HvygE",v="component-module__progressBar___wROZC",S="component-module__progressFill___F8n5d",k="component-module__time___-5GMu",P="component-module__nativeAudio___vCo17";!function(e,t){void 0===t&&(t={});var o=t.insertAt;if("undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===o&&r.firstChild?r.insertBefore(a,r.firstChild):r.appendChild(a),a.styleSheet?a.styleSheet.cssText=e:a.appendChild(document.createTextNode(e))}}(".component-module__container___VbZSk{align-items:center;background:rgba(10,10,26,.95);border:1px solid rgba(26,26,62,.8);border-radius:8px;display:flex;gap:12px;height:100%;padding:12px 16px;width:100%}.component-module__playButton___M6QVA{align-items:center;background:linear-gradient(135deg,#00d4ff,#9b59b6);border:none;border-radius:50%;cursor:pointer;display:flex;flex-shrink:0;height:40px;justify-content:center;transition:transform .2s ease;width:40px}.component-module__playButton___M6QVA:hover{transform:scale(1.05)}.component-module__playIcon___t8-WV{border-bottom:8px solid transparent;border-left:12px solid #fff;border-top:8px solid transparent;height:0;margin-left:3px;width:0}.component-module__pauseIcon___8XmSk{display:flex;gap:3px}.component-module__pauseBar___eM6DG{background:#fff;border-radius:2px;height:14px;width:4px}.component-module__info___VyTlr{flex:1;min-width:0}.component-module__title___Hj54k{color:#e6e6e6;font-size:14px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.component-module__progressContainer___HvygE{align-items:center;display:flex;gap:8px;margin-top:4px}.component-module__progressBar___wROZC{background:rgba(26,26,62,.8);border-radius:2px;cursor:pointer;flex:1;height:4px;overflow:hidden}.component-module__progressFill___F8n5d{background:linear-gradient(90deg,#00d4ff,#9b59b6);border-radius:2px;height:100%;transition:width .1s linear}.component-module__time___-5GMu{color:hsla(0,0%,100%,.6);font-family:Courier New,Courier,monospace;font-size:12px;min-width:80px;text-align:right}.component-module__nativeAudio___vCo17{width:100%}");const V=e=>`${Math.floor(e/60)}:${Math.floor(e%60).toString().padStart(2,"0")}`,E="EasyEditorMaterialsAudio";const N=((e,t)=>({props:[{type:"group",title:"属性",setter:"TabSetter",items:[{type:"group",key:"config",title:"配置",items:[l,p,e]},{type:"group",key:"data",title:"数据",items:[l,t]},{type:"group",key:"advanced",title:"高级",items:[l,c,u]}]}],component:{},supports:{},advanced:{}}))(i("组件配置",[{type:"group",title:"组件配置",setter:"SubTabSetter",items:[{type:"group",key:"content",title:"内容",items:[{name:"__upload",title:"上传",setter:{componentName:"UploadSetter",props:{accept:".mp3,.wav,.ogg"}},extraProps:{setValue(e,t){if(t){const{base64:o,raw:r}=t;o&&e.parent.setPropValue("src",o),r?.width&&e.parent.setExtraPropValue("$dashboard.rect.width",r.width),r?.height&&e.parent.setExtraPropValue("$dashboard.rect.height",r.height)}else e.parent.clearPropValue("src")}}},{name:"src",title:"音频地址",setter:"StringSetter"},{name:"title",title:"标题",setter:"StringSetter",extraProps:{defaultValue:"音频文件"}}]},{type:"group",key:"playback",title:"播放",items:[{name:"autoPlay",title:"自动播放",setter:"SwitchSetter",extraProps:{defaultValue:!1}},{name:"loop",title:"循环播放",setter:"SwitchSetter",extraProps:{defaultValue:!1}},{name:"playbackRate",title:"播放速度",setter:{componentName:"SelectSetter",props:{options:[{label:"0.5x",value:.5},{label:"0.75x",value:.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:"style",title:"样式",items:[{name:"audioStyle",title:"样式类型",setter:{componentName:"SegmentedSetter",props:{options:[{label:"自定义",value:"custom"},{label:"原生",value:"native"}]}},extraProps:{defaultValue:"custom"}}]}]}],{padding:"6px 16px 12px"}),{name:"$data",title:"数据配置",setter:{componentName:"DataSetter",props:{expectedFields:[{name:"src",label:"src",type:"string",required:!0,description:"音频地址"}],showPreview:!0,previewLimit:10}},extraProps:{label:!1}});const w={componentName:E,title:"音频",group:"media",devMode:"proCode",npm:{package:"@easy-editor/materials-dashboard-audio",version:"0.0.4",globalName:E,componentName:E},snippets:[{title:"音频播放器",screenshot:"",schema:{componentName:E,title:"音频播放器",props:{$data:s({src:""}),title:"音频文件",autoPlay:!1,loop:!1,audioStyle:"custom",playbackRate:1,volume:100,rotation:0,opacity:100,background:"transparent"},$dashboard:{rect:{width:300,height:60}}}},{title:"原生音频",screenshot:"",schema:{componentName:E,title:"原生音频",props:{$data:s({src:""}),title:"音频文件",audioStyle:"native",rotation:0,opacity:100,background:"transparent"},$dashboard:{rect:{width:300,height:60}}}}],configure:N};e.component=({ref:e,$data:r,__dataSource:a,src:s="",title:i="音频文件",autoPlay:l=!1,loop:p=!1,audioStyle:d="custom",playbackRate:c=1,volume:u=100,rotation:E=0,opacity:N=100,background:w="transparent",style:C,onClick:j,onDoubleClick:M,onMouseEnter:T,onMouseLeave:L,onPlay:A,onPause:$,onEnded:R})=>{const B=function(e,o){return t.useMemo(()=>n(e,o),[e,o])}(r,a),D=t.useMemo(()=>B.length>0&&"string"==typeof B[0]?.src?B[0].src:s,[B,s]),I=t.useRef(null),[F,G]=t.useState(!1),[H,Z]=t.useState(0),[q,O]=t.useState(0);t.useEffect(()=>{const e=I.current;if(!e)return;const t=()=>Z(e.currentTime),o=()=>O(e.duration),r=()=>{G(!1),R?.()},a=()=>{G(!0),A?.()},n=()=>{G(!1),$?.()};return e.addEventListener("timeupdate",t),e.addEventListener("loadedmetadata",o),e.addEventListener("ended",r),e.addEventListener("play",a),e.addEventListener("pause",n),()=>{e.removeEventListener("timeupdate",t),e.removeEventListener("loadedmetadata",o),e.removeEventListener("ended",r),e.removeEventListener("play",a),e.removeEventListener("pause",n)}},[R,A,$]),t.useEffect(()=>{I.current&&(I.current.playbackRate=c,I.current.volume=u/100)},[c,u]);const Q=q?H/q*100:0,X={transform:0!==E?`rotate(${E}deg)`:void 0,opacity:N/100,backgroundColor:w,...C};return"native"===d?o.jsx("div",{className:m,onClick:j,onDoubleClick:M,onMouseEnter:T,onMouseLeave:L,ref:e,style:X,children:o.jsx("audio",{autoPlay:l,className:P,controls:!0,loop:p,ref:I,src:D})}):o.jsxs("div",{className:m,onClick:j,onDoubleClick:M,onMouseEnter:T,onMouseLeave:L,ref:e,style:X,children:[o.jsx("audio",{autoPlay:l,loop:p,ref:I,src:D}),o.jsx("button",{"aria-label":F?"Pause":"Play",className:_,onClick:()=>{I.current&&(F?I.current.pause():I.current.play())},type:"button",children:F?o.jsxs("div",{className:x,children:[o.jsx("div",{className:g}),o.jsx("div",{className:g})]}):o.jsx("div",{className:f})}),o.jsxs("div",{className:y,children:[o.jsx("div",{className:h,children:i}),o.jsxs("div",{className:b,children:[o.jsx("button",{"aria-label":"Seek to position",className:v,onClick:e=>{if(I.current&&q){const t=e.currentTarget.getBoundingClientRect(),o=(e.clientX-t.left)/t.width;I.current.currentTime=o*q}},type:"button",children:o.jsx("div",{className:S,style:{width:`${Q}%`}})}),o.jsxs("span",{className:k,children:[V(H)," / ",V(q||0)]})]})]})]})},e.meta=w});

package/dist/meta.min.js

@@ -1,2 +1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).EasyEditorMaterialsAudioMeta={})}(this,function(e){"use strict";const t="EasyEditorMaterialsAudio";const a={componentName:t,title:"音频",group:"media",devMode:"proCode",npm:{package:"@easy-editor/materials-dashboard-audio",version:"0.0.1",globalName:t,componentName:t},snippets:[{title:"音频播放器",screenshot:"",schema:{componentName:t,props:{src:"",title:"音频文件",autoPlay:!1,loop:!1,audioStyle:"custom"},$dashboard:{rect:{width:300,height:60}}}},{title:"原生音频",screenshot:"",schema:{componentName:t,props:{src:"",title:"音频文件",audioStyle:"native"},$dashboard:{rect:{width:300,height:60}}}}],configure:{props:[{type:"group",title:"属性",setter:"TabSetter",items:[{type:"group",key:"config",title:"配置",setter:{componentName:"CollapseSetter",props:{icon:!1}},items:[{name:"id",title:"ID",setter:"NodeIdSetter",extraProps:{label:!1}},{name:"title",title:"标题",setter:"StringSetter",extraProps:{getValue:e=>e.getExtraPropValue("title"),setValue(e,t){e.setExtraPropValue("title",t)}}},{type:"group",title:"基础属性",setter:{componentName:"CollapseSetter",props:{icon:!1}},items:[{name:"rect",title:"位置尺寸",setter:"RectSetter",extraProps:{getValue:e=>e.getExtraPropValue("$dashboard.rect"),setValue(e,t){e.setExtraPropValue("$dashboard.rect",t)}}}]},{type:"group",title:"内容",setter:{componentName:"CollapseSetter",props:{icon:!1}},items:[{name:"__upload",title:"上传",setter:{componentName:"UploadSetter",props:{accept:".mp3,.wav,.ogg"}},extraProps:{setValue(e,t){if(t){const{base64:a,raw:r}=t;a&&e.parent.setPropValue("src",a),r?.width&&e.parent.setExtraPropValue("$dashboard.rect.width",r.width),r?.height&&e.parent.setExtraPropValue("$dashboard.rect.height",r.height)}else e.parent.clearPropValue("src")}}},{name:"src",title:"音频地址",setter:"StringSetter"},{name:"title",title:"标题",setter:"StringSetter",extraProps:{defaultValue:"音频文件"}}]},{type:"group",title:"播放",setter:{componentName:"CollapseSetter",props:{icon:!1}},items:[{name:"autoPlay",title:"自动播放",setter:"SwitchSetter",extraProps:{defaultValue:!1}},{name:"loop",title:"循环播放",setter:"SwitchSetter",extraProps:{defaultValue:!1}},{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:.5},{label:"0.75x",value:.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:!0,supportVariable:!0}}]}]}],component:{},supports:{},advanced:{}}};e.default=a,e.meta=a,Object.defineProperty(e,"__esModule",{value:!0})});
-//# sourceMappingURL=meta.min.js.map
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).EasyEditorMaterialsAudioMeta={})}(this,function(e){"use strict";const t=(e,t)=>{const a=Array.isArray(e)?e:[e],r=a[0]||{};return{sourceType:"static",staticData:a,fieldMappings:Object.keys(r).map(e=>({componentField:e,sourceField:e}))}},a=(e,t,a)=>({type:"group",title:e,setter:{componentName:"CollapseSetter",props:{icon:!1,...a}},items:t}),r={name:"nodeInfo",title:"节点信息",setter:"NodeInfoSetter",extraProps:{label:!1}},o=a("基础配置",[{name:"title",title:"标题",setter:"StringSetter",extraProps:{getValue:e=>e.getExtraPropValue("title"),setValue(e,t){e.setExtraPropValue("title",t)}}},{name:"rect",title:"位置尺寸",setter:"RectSetter",extraProps:{getValue:e=>e.getExtraPropValue("$dashboard.rect"),setValue(e,t){e.setExtraPropValue("$dashboard.rect",t)}}},{name:"rotation",title:"旋转角度",setter:{componentName:"SliderSetter",props:{min:0,max:360,suffix:"°"}},extraProps:{defaultValue:0}},{name:"opacity",title:"不透明度",setter:{componentName:"SliderSetter",props:{min:0,max:100,suffix:"%"}},extraProps:{defaultValue:100}},{name:"background",title:"背景颜色",setter:"ColorSetter",extraProps:{defaultValue:"transparent"}}]),l=[{title:"点击事件",children:[{label:"点击",value:"onClick",description:"鼠标点击时触发"},{label:"双击",value:"onDoubleClick",description:"鼠标双击时触发"}]},{title:"鼠标事件",children:[{label:"鼠标进入",value:"onMouseEnter",description:"鼠标进入时触发"},{label:"鼠标离开",value:"onMouseLeave",description:"鼠标离开时触发"}]}],i=((e=l)=>a("事件绑定",[{name:"events",title:"事件",setter:{componentName:"EventSetter",props:{events:e}},extraProps:{label:!1}}]))(),s=a("高级配置",[{title:"条件渲染",setter:"SwitchSetter",extraProps:{supportVariable:!0,getValue:e=>e.getNode().getExtraPropValue("condition"),setValue(e,t){e.getNode().setExtraProp("condition",t)}}}]),p="EasyEditorMaterialsAudio";const n=((e,t)=>({props:[{type:"group",title:"属性",setter:"TabSetter",items:[{type:"group",key:"config",title:"配置",items:[r,o,e]},{type:"group",key:"data",title:"数据",items:[r,t]},{type:"group",key:"advanced",title:"高级",items:[r,i,s]}]}],component:{},supports:{},advanced:{}}))(a("组件配置",[{type:"group",title:"组件配置",setter:"SubTabSetter",items:[{type:"group",key:"content",title:"内容",items:[{name:"__upload",title:"上传",setter:{componentName:"UploadSetter",props:{accept:".mp3,.wav,.ogg"}},extraProps:{setValue(e,t){if(t){const{base64:a,raw:r}=t;a&&e.parent.setPropValue("src",a),r?.width&&e.parent.setExtraPropValue("$dashboard.rect.width",r.width),r?.height&&e.parent.setExtraPropValue("$dashboard.rect.height",r.height)}else e.parent.clearPropValue("src")}}},{name:"src",title:"音频地址",setter:"StringSetter"},{name:"title",title:"标题",setter:"StringSetter",extraProps:{defaultValue:"音频文件"}}]},{type:"group",key:"playback",title:"播放",items:[{name:"autoPlay",title:"自动播放",setter:"SwitchSetter",extraProps:{defaultValue:!1}},{name:"loop",title:"循环播放",setter:"SwitchSetter",extraProps:{defaultValue:!1}},{name:"playbackRate",title:"播放速度",setter:{componentName:"SelectSetter",props:{options:[{label:"0.5x",value:.5},{label:"0.75x",value:.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:"style",title:"样式",items:[{name:"audioStyle",title:"样式类型",setter:{componentName:"SegmentedSetter",props:{options:[{label:"自定义",value:"custom"},{label:"原生",value:"native"}]}},extraProps:{defaultValue:"custom"}}]}]}],{padding:"6px 16px 12px"}),{name:"$data",title:"数据配置",setter:{componentName:"DataSetter",props:{expectedFields:[{name:"src",label:"src",type:"string",required:!0,description:"音频地址"}],showPreview:!0,previewLimit:10}},extraProps:{label:!1}});const u={componentName:p,title:"音频",group:"media",devMode:"proCode",npm:{package:"@easy-editor/materials-dashboard-audio",version:"0.0.4",globalName:p,componentName:p},snippets:[{title:"音频播放器",screenshot:"",schema:{componentName:p,title:"音频播放器",props:{$data:t({src:""}),title:"音频文件",autoPlay:!1,loop:!1,audioStyle:"custom",playbackRate:1,volume:100,rotation:0,opacity:100,background:"transparent"},$dashboard:{rect:{width:300,height:60}}}},{title:"原生音频",screenshot:"",schema:{componentName:p,title:"原生音频",props:{$data:t({src:""}),title:"音频文件",audioStyle:"native",rotation:0,opacity:100,background:"transparent"},$dashboard:{rect:{width:300,height:60}}}}],configure:n};e.meta=u});

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.2",
+  "version": "0.0.4",
   "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,140 +1,222 @@
-/**
- * Audio Component
- * 音频播放组件
- */
-
-import { useState, useRef, useEffect, type CSSProperties, type Ref } from 'react'
-import styles from './component.module.css'
-
-export type AudioStyle = 'custom' | 'native'
-
-export interface AudioProps {
-  ref?: Ref<HTMLDivElement>
-  /** 音频地址 */
-  src?: string
-  /** 标题 */
-  title?: string
-  /** 自动播放 */
-  autoPlay?: boolean
-  /** 循环播放 */
-  loop?: boolean
-  /** 样式类型 */
-  audioStyle?: AudioStyle
-  /** 外部样式 */
-  style?: CSSProperties
-}
-
-const formatTime = (seconds: number): string => {
-  const mins = Math.floor(seconds / 60)
-  const secs = Math.floor(seconds % 60)
-  return `${mins}:${secs.toString().padStart(2, '0')}`
-}
-
-export const Audio: React.FC<AudioProps> = ({
-  ref,
-  src = '',
-  title = '音频文件',
-  autoPlay = false,
-  loop = false,
-  audioStyle = 'custom',
-  style: externalStyle,
-}) => {
-  const audioRef = useRef<HTMLAudioElement>(null)
-  const [isPlaying, setIsPlaying] = useState(false)
-  const [currentTime, setCurrentTime] = useState(0)
-  const [duration, setDuration] = useState(0)
-
-  useEffect(() => {
-    const audio = audioRef.current
-    if (!audio) {
-      return
-    }
-
-    const handleTimeUpdate = () => setCurrentTime(audio.currentTime)
-    const handleLoadedMetadata = () => setDuration(audio.duration)
-    const handleEnded = () => setIsPlaying(false)
-
-    audio.addEventListener('timeupdate', handleTimeUpdate)
-    audio.addEventListener('loadedmetadata', handleLoadedMetadata)
-    audio.addEventListener('ended', handleEnded)
-
-    return () => {
-      audio.removeEventListener('timeupdate', handleTimeUpdate)
-      audio.removeEventListener('loadedmetadata', handleLoadedMetadata)
-      audio.removeEventListener('ended', handleEnded)
-    }
-  }, [])
-
-  const togglePlay = () => {
-    if (audioRef.current) {
-      if (isPlaying) {
-        audioRef.current.pause()
-      } else {
-        audioRef.current.play()
-      }
-      setIsPlaying(!isPlaying)
-    }
-  }
-
-  const handleProgressClick = (e: React.MouseEvent<HTMLDivElement>) => {
-    if (audioRef.current && duration) {
-      const rect = e.currentTarget.getBoundingClientRect()
-      const percent = (e.clientX - rect.left) / rect.width
-      audioRef.current.currentTime = percent * duration
-    }
-  }
-
-  const progress = duration ? (currentTime / duration) * 100 : 0
-
-  // 原生样式
-  if (audioStyle === 'native') {
-    return (
-      <div className={styles.container} ref={ref} style={externalStyle}>
-        <audio autoPlay={autoPlay} className={styles.nativeAudio} controls loop={loop} ref={audioRef} src={src} />
-      </div>
-    )
-  }
-
-  // 自定义样式
-  return (
-    <div className={styles.container} ref={ref} style={externalStyle}>
-      <audio autoPlay={autoPlay} loop={loop} ref={audioRef} src={src} />
-
-      <button
-        aria-label={isPlaying ? 'Pause' : 'Play'}
-        className={styles.playButton}
-        onClick={togglePlay}
-        type='button'
-      >
-        {isPlaying ? (
-          <div className={styles.pauseIcon}>
-            <div className={styles.pauseBar} />
-            <div className={styles.pauseBar} />
-          </div>
-        ) : (
-          <div className={styles.playIcon} />
-        )}
-      </button>
-
-      <div className={styles.info}>
-        <div className={styles.title}>{title}</div>
-        <div className={styles.progressContainer}>
-          <button
-            aria-label='Seek to position'
-            className={styles.progressBar}
-            // @ts-expect-error
-            onClick={handleProgressClick}
-            type='button'
-          >
-            <div className={styles.progressFill} style={{ width: `${progress}%` }} />
-          </button>
-          <span className={styles.time}>
-            {formatTime(currentTime)} / {formatTime(duration || 0)}
-          </span>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export default Audio
+/**
+ * Audio Component
+ * 音频播放组件 - 支持数据源绑定和事件交互
+ */
+
+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 extends MaterialComponet {
+  /** 音频地址（兼容旧版） */
+  src?: string
+  /** 标题 */
+  title?: string
+  /** 自动播放 */
+  autoPlay?: boolean
+  /** 循环播放 */
+  loop?: boolean
+  /** 样式类型 */
+  audioStyle?: AudioStyle
+  /** 播放速度 */
+  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 => {
+  const mins = Math.floor(seconds / 60)
+  const secs = Math.floor(seconds % 60)
+  return `${mins}:${secs.toString().padStart(2, '0')}`
+}
+
+export const Audio: React.FC<AudioProps> = ({
+  ref,
+  $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)
+  const [duration, setDuration] = useState(0)
+
+  useEffect(() => {
+    const audio = audioRef.current
+    if (!audio) {
+      return
+    }
+
+    const handleTimeUpdate = () => setCurrentTime(audio.currentTime)
+    const handleLoadedMetadata = () => setDuration(audio.duration)
+    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) {
+      if (isPlaying) {
+        audioRef.current.pause()
+      } else {
+        audioRef.current.play()
+      }
+    }
+  }
+
+  const handleProgressClick = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (audioRef.current && duration) {
+      const rect = e.currentTarget.getBoundingClientRect()
+      const percent = (e.clientX - rect.left) / rect.width
+      audioRef.current.currentTime = percent * duration
+    }
+  }
+
+  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}
+        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>
+    )
+  }
+
+  // 自定义样式
+  return (
+    <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
+        aria-label={isPlaying ? 'Pause' : 'Play'}
+        className={styles.playButton}
+        onClick={togglePlay}
+        type='button'
+      >
+        {isPlaying ? (
+          <div className={styles.pauseIcon}>
+            <div className={styles.pauseBar} />
+            <div className={styles.pauseBar} />
+          </div>
+        ) : (
+          <div className={styles.playIcon} />
+        )}
+      </button>
+
+      <div className={styles.info}>
+        <div className={styles.title}>{title}</div>
+        <div className={styles.progressContainer}>
+          <button
+            aria-label='Seek to position'
+            className={styles.progressBar}
+            // @ts-expect-error
+            onClick={handleProgressClick}
+            type='button'
+          >
+            <div className={styles.progressFill} style={{ width: `${progress}%` }} />
+          </button>
+          <span className={styles.time}>
+            {formatTime(currentTime)} / {formatTime(duration || 0)}
+          </span>
+        </div>
+      </div>
+    </div>
+  )
+}