@easy-editor/materials-dashboard-number-flip 0.0.2 → 0.0.4

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @easy-editor/materials-dashboard-number-flip
 
+## 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/jsx-runtime")):"function"==typeof define&&define.amd?define(["exports","react/jsx-runtime"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).EasyEditorMaterialsStatisticNumberComponent={},e.jsxRuntime)}(this,function(e,t){"use strict";function o(e){var t,n,i="";if("string"==typeof e||"number"==typeof e)i+=e;else if("object"==typeof e)if(Array.isArray(e)){var l=e.length;for(t=0;t<l;t++)e[t]&&(n=o(e[t]))&&(i&&(i+=" "),i+=n)}else for(n in e)e[n]&&(i&&(i+=" "),i+=n);return i}function n(...e){return function(){for(var e,t,n=0,i="",l=arguments.length;n<l;n++)(e=arguments[n])&&(t=o(e))&&(i&&(i+=" "),i+=t);return i}(e)}var i="component-module__container___VbZSk",l="component-module__content___344U8",r="component-module__prefix___RIPOo",s="component-module__prefixDigital___Q-IGu",a="component-module__value___Fg70k",d="component-module__valueDigital___saOYz",f="component-module__suffix___9U3yv",_="component-module__suffixDigital___WiYn4",c="component-module__trend___fgbi4";!function(e,t){void 0===t&&(t={});var o=t.insertAt;if("undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===o&&n.firstChild?n.insertBefore(i,n.firstChild):n.appendChild(i),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(document.createTextNode(e))}}(".component-module__container___VbZSk{align-items:center;box-sizing:border-box;display:flex;flex-direction:column;gap:8px;height:100%;justify-content:center;width:100%}.component-module__content___344U8{align-items:baseline;display:flex;gap:4px}.component-module__prefix___RIPOo{font-weight:600;opacity:.8}.component-module__prefixDigital___Q-IGu{font-family:Courier New,Courier,monospace}.component-module__value___Fg70k{font-weight:700}.component-module__valueDigital___saOYz{font-family:Courier New,Courier,monospace;letter-spacing:.05em}.component-module__suffix___9U3yv{font-weight:500;margin-left:4px;opacity:.7}.component-module__suffixDigital___WiYn4{font-family:Courier New,Courier,monospace}.component-module__trend___fgbi4{align-items:center;display:flex;font-weight:500;gap:4px}");const u=({type:e,value:o,suffix:n,upColor:i,downColor:l,size:r})=>{let s="#8899aa";return"up"===e?s=i:"down"===e&&(s=l),t.jsxs("div",{className:c,style:{fontSize:.35*r},children:["flat"!==e&&t.jsxs("svg",{"aria-label":`Trend ${e}`,fill:"none",height:.3*r,role:"img",style:{transform:"down"===e?"rotate(180deg)":void 0},viewBox:"0 0 24 24",width:.3*r,children:[t.jsxs("title",{children:["Trend arrow ",e]}),t.jsx("path",{d:"M12 4L20 14H4L12 4Z",fill:s})]}),"flat"===e&&t.jsx("span",{style:{color:s,marginRight:4},children:"—"}),t.jsxs("span",{style:{color:s},children:[o,n]})]})},p=({ref:e,value:o=0,decimals:c=0,separator:p=!0,prefix:m="",suffix:x="",fontSize:y=48,fontFamily:g="digital",color:h="#00d4ff",glowIntensity:v=.5,trendEnable:j=!1,trendValue:b=0,trendType:w="up",trendSuffix:C="%",trendUpColor:N="#52c41a",trendDownColor:S="#ff4d4f",style:z})=>{const $="digital"===g,T=((e,t,o)=>{const n=e.toFixed(t);if(!o)return n;const[i,l]=n.split("."),r=i.replace(/\B(?=(\d{3})+(?!\d))/g,",");return l?`${r}.${l}`:r})(o,c,p),D=v>0?`0 0 ${10*v}px ${h}, 0 0 ${20*v}px ${h}40, 0 0 ${30*v}px ${h}20`:"none";return t.jsxs("div",{className:i,ref:e,style:z,children:[t.jsxs("div",{className:l,children:[m?t.jsx("span",{className:n(r,$&&s),style:{fontSize:.5*y+"px",color:h},children:m}):null,t.jsx("span",{className:n(a,$&&d),style:{fontSize:`${y}px`,color:h,textShadow:D},children:T}),x?t.jsx("span",{className:n(f,$&&_),style:{fontSize:.4*y+"px",color:h},children:x}):null]}),j?t.jsx(u,{downColor:S,size:y,suffix:C,type:w,upColor:N,value:b}):null]})};e.NumberFlip=p,e.default=p,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).EasyEditorMaterialsNumberFlipComponent={},e.React,e.jsxRuntime)}(this,function(e,t,o){"use strict";function n(...e){const t=[];for(const o of e)if(o)if("string"==typeof o||"number"==typeof o)t.push(String(o));else if(Array.isArray(o)){const e=n(...o);e&&t.push(e)}else if("object"==typeof o)for(const[e,n]of Object.entries(o))n&&t.push(e);return t.join(" ")}const r=(e,t)=>{if(!t)return e;const o=t.split(".");let n=e;for(const e of o){if(null==n)return;if("object"!=typeof n)return;n=n[e]}return n},i=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 i(o)}if("datasource"===e.sourceType&&e.datasourceId){const o=t?.component?.[e.datasourceId];return i(o)}return[]})(e,t);return((e,t)=>t&&0!==t.length?e.map(e=>{const o={};for(const{componentField:n,sourceField:i}of t)n&&i&&(o[n]=r(e,i));return o}):e)(o,e?.fieldMappings)};const l=(e,t,o)=>({type:"group",title:e,setter:{componentName:"CollapseSetter",props:{icon:!1,...o}},items:t});l("基础配置",[{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 s=[{title:"点击事件",children:[{label:"点击",value:"onClick",description:"鼠标点击时触发"},{label:"双击",value:"onDoubleClick",description:"鼠标双击时触发"}]},{title:"鼠标事件",children:[{label:"鼠标进入",value:"onMouseEnter",description:"鼠标进入时触发"},{label:"鼠标离开",value:"onMouseLeave",description:"鼠标离开时触发"}]}];((e=s)=>{l("事件绑定",[{name:"events",title:"事件",setter:{componentName:"EventSetter",props:{events:e}},extraProps:{label:!1}}])})(),l("高级配置",[{title:"条件渲染",setter:"SwitchSetter",extraProps:{supportVariable:!0,getValue:e=>e.getNode().getExtraPropValue("condition"),setValue(e,t){e.getNode().setExtraProp("condition",t)}}}]);var c="component-module__container___VbZSk",u="component-module__content___344U8",p="component-module__prefix___RIPOo",d="component-module__prefixDigital___Q-IGu",f="component-module__value___Fg70k",m="component-module__valueDigital___saOYz",_="component-module__suffix___9U3yv",x="component-module__suffixDigital___WiYn4",g="component-module__trend___fgbi4";!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;box-sizing:border-box;display:flex;flex-direction:column;gap:8px;height:100%;justify-content:center;width:100%}.component-module__content___344U8{align-items:baseline;display:flex;gap:4px}.component-module__prefix___RIPOo{font-weight:600;opacity:.8}.component-module__prefixDigital___Q-IGu{font-family:Courier New,Courier,monospace}.component-module__value___Fg70k{font-weight:700}.component-module__valueDigital___saOYz{font-family:Courier New,Courier,monospace;letter-spacing:.05em}.component-module__suffix___9U3yv{font-weight:500;margin-left:4px;opacity:.7}.component-module__suffixDigital___WiYn4{font-family:Courier New,Courier,monospace}.component-module__trend___fgbi4{align-items:center;display:flex;font-weight:500;gap:4px}");const y=({type:e,value:t,suffix:n,upColor:r,downColor:i,size:a})=>{let l="#8899aa";return"up"===e?l=r:"down"===e&&(l=i),o.jsxs("div",{className:g,style:{fontSize:.35*a},children:["flat"!==e&&o.jsxs("svg",{"aria-label":`Trend ${e}`,fill:"none",height:.3*a,role:"img",style:{transform:"down"===e?"rotate(180deg)":void 0},viewBox:"0 0 24 24",width:.3*a,children:[o.jsxs("title",{children:["Trend arrow ",e]}),o.jsx("path",{d:"M12 4L20 14H4L12 4Z",fill:l})]}),"flat"===e&&o.jsx("span",{style:{color:l,marginRight:4},children:"—"}),o.jsxs("span",{style:{color:l},children:[t,n]})]})};e.NumberFlip=({ref:e,$data:r,__dataSource:i,decimals:l=0,separator:s=!0,prefix:g="",suffix:h="",fontSize:b=48,fontFamily:v="digital",color:C="#00d4ff",glowIntensity:S=.5,trendEnable:j=!1,trendValue:w=0,trendType:N="up",trendSuffix:V="%",trendUpColor:E="#52c41a",trendDownColor:P="#ff4d4f",rotation:$=0,opacity:k=100,background:D="transparent",style:M,onClick:T,onDoubleClick:z,onMouseEnter:I,onMouseLeave:F})=>{const A=function(e,o){return t.useMemo(()=>a(e,o),[e,o])}(r,i),R="digital"===v,L=((e,t,o)=>{const n=e.toFixed(t);if(!o)return n;const[r,i]=n.split("."),a=r.replace(/\B(?=(\d{3})+(?!\d))/g,",");return i?`${a}.${i}`:a})(t.useMemo(()=>A.length>0&&"number"==typeof A[0]?.value?A[0].value:0,[A]),l,s),O=S>0?`0 0 ${10*S}px ${C}, 0 0 ${20*S}px ${C}40, 0 0 ${30*S}px ${C}20`:"none",U={transform:0!==$?`rotate(${$}deg)`:void 0,opacity:k/100,backgroundColor:D,...M};return o.jsxs("div",{className:c,onClick:T,onDoubleClick:z,onMouseEnter:I,onMouseLeave:F,ref:e,style:U,children:[o.jsxs("div",{className:u,children:[g?o.jsx("span",{className:n(p,R&&d),style:{fontSize:.5*b+"px",color:C},children:g}):null,o.jsx("span",{className:n(f,R&&m),style:{fontSize:`${b}px`,color:C,textShadow:O},children:L}),h?o.jsx("span",{className:n(_,R&&x),style:{fontSize:.4*b+"px",color:C},children:h}):null]}),j?o.jsx(y,{downColor:P,size:b,suffix:V,type:N,upColor:E,value:w}):null]})}});

package/dist/index.min.js

@@ -1,2 +1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react/jsx-runtime")):"function"==typeof define&&define.amd?define(["exports","react/jsx-runtime"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).EasyEditorMaterialsStatisticNumber={},e.jsxRuntime)}(this,function(e,t){"use strict";function o(e){var t,a,r="";if("string"==typeof e||"number"==typeof e)r+=e;else if("object"==typeof e)if(Array.isArray(e)){var l=e.length;for(t=0;t<l;t++)e[t]&&(a=o(e[t]))&&(r&&(r+=" "),r+=a)}else for(a in e)e[a]&&(r&&(r+=" "),r+=a);return r}function a(...e){return function(){for(var e,t,a=0,r="",l=arguments.length;a<l;a++)(e=arguments[a])&&(t=o(e))&&(r&&(r+=" "),r+=t);return r}(e)}var r="component-module__container___VbZSk",l="component-module__content___344U8",n="component-module__prefix___RIPOo",i="component-module__prefixDigital___Q-IGu",s="component-module__value___Fg70k",p="component-module__valueDigital___saOYz",m="component-module__suffix___9U3yv",u="component-module__suffixDigital___WiYn4",d="component-module__trend___fgbi4";!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;box-sizing:border-box;display:flex;flex-direction:column;gap:8px;height:100%;justify-content:center;width:100%}.component-module__content___344U8{align-items:baseline;display:flex;gap:4px}.component-module__prefix___RIPOo{font-weight:600;opacity:.8}.component-module__prefixDigital___Q-IGu{font-family:Courier New,Courier,monospace}.component-module__value___Fg70k{font-weight:700}.component-module__valueDigital___saOYz{font-family:Courier New,Courier,monospace;letter-spacing:.05em}.component-module__suffix___9U3yv{font-weight:500;margin-left:4px;opacity:.7}.component-module__suffixDigital___WiYn4{font-family:Courier New,Courier,monospace}.component-module__trend___fgbi4{align-items:center;display:flex;font-weight:500;gap:4px}");const c=({type:e,value:o,suffix:a,upColor:r,downColor:l,size:n})=>{let i="#8899aa";return"up"===e?i=r:"down"===e&&(i=l),t.jsxs("div",{className:d,style:{fontSize:.35*n},children:["flat"!==e&&t.jsxs("svg",{"aria-label":`Trend ${e}`,fill:"none",height:.3*n,role:"img",style:{transform:"down"===e?"rotate(180deg)":void 0},viewBox:"0 0 24 24",width:.3*n,children:[t.jsxs("title",{children:["Trend arrow ",e]}),t.jsx("path",{d:"M12 4L20 14H4L12 4Z",fill:i})]}),"flat"===e&&t.jsx("span",{style:{color:i,marginRight:4},children:"—"}),t.jsxs("span",{style:{color:i},children:[o,a]})]})},f="EasyEditorMaterialsNumberFlip";const _={componentName:f,title:"数字翻牌",group:"display",devMode:"proCode",npm:{package:"@easy-editor/materials-dashboard-number-flip",version:"0.0.1",globalName:f,componentName:f},snippets:[{title:"数字翻牌",screenshot:"",schema:{componentName:f,props:{value:1234567,decimals:0,separator:!0,fontSize:48,fontFamily:"digital",color:"#00d4ff",glowIntensity:.5},$dashboard:{rect:{width:280,height:80}}}},{title:"货币数字",screenshot:"",schema:{componentName:f,props:{value:99999.99,decimals:2,separator:!0,prefix:"$",fontSize:42,fontFamily:"digital",color:"#00ff88",glowIntensity:.6},$dashboard:{rect:{width:260,height:70}}}},{title:"百分比",screenshot:"",schema:{componentName:f,props:{value:87.5,decimals:1,separator:!1,suffix:"%",fontSize:56,fontFamily:"digital",color:"#ff6b6b",glowIntensity:.8},$dashboard:{rect:{width:200,height:90}}}}],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:"value",title:"数值",setter:"NumberSetter",extraProps:{defaultValue:0}},{name:"decimals",title:"小数位数",setter:"NumberSetter",extraProps:{defaultValue:0}},{name:"separator",title:"千分位分隔",setter:"SwitchSetter",extraProps:{defaultValue:!0}},{name:"prefix",title:"前缀",setter:"StringSetter"},{name:"suffix",title:"后缀",setter:"StringSetter"}]},{type:"group",title:"趋势",setter:{componentName:"CollapseSetter",props:{icon:!1}},items:[{name:"trendEnable",title:"显示趋势",setter:"SwitchSetter",extraProps:{defaultValue:!1}},{name:"trendValue",title:"趋势值",setter:"NumberSetter",extraProps:{defaultValue:0}},{name:"trendType",title:"趋势类型",setter:{componentName:"SegmentedSetter",props:{options:[{label:"上升",value:"up"},{label:"下降",value:"down"},{label:"持平",value:"flat"}]}},extraProps:{defaultValue:"up"}},{name:"trendSuffix",title:"趋势后缀",setter:"StringSetter",extraProps:{defaultValue:"%"}}]},{type:"group",title:"样式",setter:{componentName:"CollapseSetter",props:{icon:!1}},items:[{name:"fontSize",title:"字体大小",setter:"NumberSetter",extraProps:{defaultValue:48}},{name:"fontFamily",title:"字体类型",setter:{componentName:"SelectSetter",props:{options:[{label:"数码字体",value:"digital"},{label:"默认字体",value:"default"}]}},extraProps:{defaultValue:"digital"}},{name:"color",title:"颜色",setter:"ColorSetter",extraProps:{defaultValue:"#00d4ff"}},{name:"glowIntensity",title:"发光强度",setter:{componentName:"NumberSetter",props:{min:0,max:2,step:.1}},extraProps:{defaultValue:.5}}]}]},{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}},{type:"group",title:"动画",setter:{componentName:"CollapseSetter",props:{icon:!1}},items:[{name:"animationEnable",title:"启用动画",setter:"SwitchSetter",extraProps:{defaultValue:!0}},{name:"animationType",title:"动画类型",setter:{componentName:"SegmentedSetter",props:{options:[{label:"滚动",value:"scroll"},{label:"翻转",value:"flip"},{label:"渐变",value:"fade"}]}},extraProps:{defaultValue:"scroll"}},{name:"animationDuration",title:"动画时长",setter:{componentName:"SliderSetter",props:{min:0,max:3e3,step:100,suffix:"ms"}},extraProps:{defaultValue:1e3}},{name:"animationEasing",title:"缓动函数",setter:{componentName:"SelectSetter",props:{options:[{label:"线性",value:"linear"},{label:"缓入",value:"ease-in"},{label:"缓出",value:"ease-out"},{label:"缓入缓出",value:"ease-in-out"}]}},extraProps:{defaultValue:"ease-out"}}]}]}]}],component:{},supports:{},advanced:{}}};e.component=({ref:e,value:o=0,decimals:d=0,separator:f=!0,prefix:_="",suffix:x="",fontSize:g=48,fontFamily:y="digital",color:h="#00d4ff",glowIntensity:S=.5,trendEnable:b=!1,trendValue:v=0,trendType:N="up",trendSuffix:w="%",trendUpColor:V="#52c41a",trendDownColor:P="#ff4d4f",style:C})=>{const j="digital"===y,$=((e,t,o)=>{const a=e.toFixed(t);if(!o)return a;const[r,l]=a.split("."),n=r.replace(/\B(?=(\d{3})+(?!\d))/g,",");return l?`${n}.${l}`:n})(o,d,f),z=S>0?`0 0 ${10*S}px ${h}, 0 0 ${20*S}px ${h}40, 0 0 ${30*S}px ${h}20`:"none";return t.jsxs("div",{className:r,ref:e,style:C,children:[t.jsxs("div",{className:l,children:[_?t.jsx("span",{className:a(n,j&&i),style:{fontSize:.5*g+"px",color:h},children:_}):null,t.jsx("span",{className:a(s,j&&p),style:{fontSize:`${g}px`,color:h,textShadow:z},children:$}),x?t.jsx("span",{className:a(m,j&&u),style:{fontSize:.4*g+"px",color:h},children:x}):null]}),b?t.jsx(c,{downColor:P,size:g,suffix:w,type:N,upColor:V,value:v}):null]})},e.meta=_});
-//# 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).EasyEditorMaterialsNumberFlip={},e.React,e.jsxRuntime)}(this,function(e,t,o){"use strict";function r(...e){const t=[];for(const o of e)if(o)if("string"==typeof o||"number"==typeof o)t.push(String(o));else if(Array.isArray(o)){const e=r(...o);e&&t.push(e)}else if("object"==typeof o)for(const[e,r]of Object.entries(o))r&&t.push(e);return t.join(" ")}const a=(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]:[],i=(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:r,sourceField:n}of t)r&&n&&(o[r]=a(e,n));return o}):e)(o,e?.fieldMappings)};const l=(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}))}},s=(e,t,o)=>({type:"group",title:e,setter:{componentName:"CollapseSetter",props:{icon:!1,...o}},items:t}),p={name:"nodeInfo",title:"节点信息",setter:"NodeInfoSetter",extraProps:{label:!1}},u=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"}}]),c=[{title:"点击事件",children:[{label:"点击",value:"onClick",description:"鼠标点击时触发"},{label:"双击",value:"onDoubleClick",description:"鼠标双击时触发"}]},{title:"鼠标事件",children:[{label:"鼠标进入",value:"onMouseEnter",description:"鼠标进入时触发"},{label:"鼠标离开",value:"onMouseLeave",description:"鼠标离开时触发"}]}],d=((e=c)=>s("事件绑定",[{name:"events",title:"事件",setter:{componentName:"EventSetter",props:{events:e}},extraProps:{label:!1}}]))(),m=s("高级配置",[{title:"条件渲染",setter:"SwitchSetter",extraProps:{supportVariable:!0,getValue:e=>e.getNode().getExtraPropValue("condition"),setValue(e,t){e.getNode().setExtraProp("condition",t)}}}]);var f="component-module__container___VbZSk",x="component-module__content___344U8",g="component-module__prefix___RIPOo",_="component-module__prefixDigital___Q-IGu",y="component-module__value___Fg70k",h="component-module__valueDigital___saOYz",b="component-module__suffix___9U3yv",S="component-module__suffixDigital___WiYn4",v="component-module__trend___fgbi4";!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;box-sizing:border-box;display:flex;flex-direction:column;gap:8px;height:100%;justify-content:center;width:100%}.component-module__content___344U8{align-items:baseline;display:flex;gap:4px}.component-module__prefix___RIPOo{font-weight:600;opacity:.8}.component-module__prefixDigital___Q-IGu{font-family:Courier New,Courier,monospace}.component-module__value___Fg70k{font-weight:700}.component-module__valueDigital___saOYz{font-family:Courier New,Courier,monospace;letter-spacing:.05em}.component-module__suffix___9U3yv{font-weight:500;margin-left:4px;opacity:.7}.component-module__suffixDigital___WiYn4{font-family:Courier New,Courier,monospace}.component-module__trend___fgbi4{align-items:center;display:flex;font-weight:500;gap:4px}");const N=({type:e,value:t,suffix:r,upColor:a,downColor:n,size:i})=>{let l="#8899aa";return"up"===e?l=a:"down"===e&&(l=n),o.jsxs("div",{className:v,style:{fontSize:.35*i},children:["flat"!==e&&o.jsxs("svg",{"aria-label":`Trend ${e}`,fill:"none",height:.3*i,role:"img",style:{transform:"down"===e?"rotate(180deg)":void 0},viewBox:"0 0 24 24",width:.3*i,children:[o.jsxs("title",{children:["Trend arrow ",e]}),o.jsx("path",{d:"M12 4L20 14H4L12 4Z",fill:l})]}),"flat"===e&&o.jsx("span",{style:{color:l,marginRight:4},children:"—"}),o.jsxs("span",{style:{color:l},children:[t,r]})]})},w="EasyEditorMaterialsNumberFlip";const V=((e,t)=>({props:[{type:"group",title:"属性",setter:"TabSetter",items:[{type:"group",key:"config",title:"配置",items:[p,u,e]},{type:"group",key:"data",title:"数据",items:[p,t]},{type:"group",key:"advanced",title:"高级",items:[p,d,m]}]}],component:{},supports:{},advanced:{}}))(s("组件配置",[{type:"group",title:"组件配置",setter:"SubTabSetter",items:[{type:"group",key:"value",title:"数值",items:[{name:"decimals",title:"小数位数",setter:{componentName:"NumberSetter",props:{min:0,max:10}},extraProps:{defaultValue:0}},{name:"separator",title:"千分位分隔",setter:"SwitchSetter",extraProps:{defaultValue:!0}},{name:"prefix",title:"前缀",setter:"StringSetter"},{name:"suffix",title:"后缀",setter:"StringSetter"}]},{type:"group",key:"trend",title:"趋势",items:[{name:"trendEnable",title:"显示趋势",setter:"SwitchSetter",extraProps:{defaultValue:!1}},{name:"trendValue",title:"趋势值",setter:"NumberSetter",extraProps:{defaultValue:0}},{name:"trendType",title:"趋势类型",setter:{componentName:"SegmentedSetter",props:{options:[{label:"上升",value:"up"},{label:"下降",value:"down"},{label:"持平",value:"flat"}]}},extraProps:{defaultValue:"up"}},{name:"trendSuffix",title:"趋势后缀",setter:"StringSetter",extraProps:{defaultValue:"%"}}]},{type:"group",key:"style",title:"样式",items:[{name:"fontSize",title:"字体大小",setter:{componentName:"SliderSetter",props:{min:12,max:120,step:2,suffix:"px"}},extraProps:{defaultValue:48}},{name:"fontFamily",title:"字体类型",setter:{componentName:"SelectSetter",props:{options:[{label:"数码字体",value:"digital"},{label:"默认字体",value:"default"}]}},extraProps:{defaultValue:"digital"}},{name:"color",title:"颜色",setter:"ColorSetter",extraProps:{defaultValue:"#00d4ff"}},{name:"glowIntensity",title:"发光强度",setter:{componentName:"SliderSetter",props:{min:0,max:2,step:.1}},extraProps:{defaultValue:.5}}]}]}],{padding:"6px 16px 12px"}),{name:"$data",title:"数据配置",setter:{componentName:"DataSetter",props:{expectedFields:[{name:"value",label:"value",type:"number",required:!0,description:"数值"}],showPreview:!0,previewLimit:10}},extraProps:{label:!1}});const P={componentName:w,title:"数字翻牌",group:"display",devMode:"proCode",npm:{package:"@easy-editor/materials-dashboard-number-flip",version:"0.0.4",globalName:w,componentName:w},snippets:[{title:"数字翻牌",screenshot:"",schema:{componentName:w,title:"数字翻牌",props:{$data:l({value:1234567}),decimals:0,separator:!0,fontSize:48,fontFamily:"digital",color:"#00d4ff",glowIntensity:.5,rotation:0,opacity:100,background:"transparent"},$dashboard:{rect:{width:280,height:80}}}},{title:"货币数字",screenshot:"",schema:{componentName:w,title:"货币数字",props:{$data:l({value:99999.99}),decimals:2,separator:!0,prefix:"$",fontSize:42,fontFamily:"digital",color:"#00ff88",glowIntensity:.6,rotation:0,opacity:100,background:"transparent"},$dashboard:{rect:{width:260,height:70}}}},{title:"百分比",screenshot:"",schema:{componentName:w,title:"百分比",props:{$data:l({value:87.5}),decimals:1,separator:!1,suffix:"%",fontSize:56,fontFamily:"digital",color:"#ff6b6b",glowIntensity:.8,rotation:0,opacity:100,background:"transparent"},$dashboard:{rect:{width:200,height:90}}}}],configure:V};e.component=({ref:e,$data:a,__dataSource:n,decimals:l=0,separator:s=!0,prefix:p="",suffix:u="",fontSize:c=48,fontFamily:d="digital",color:m="#00d4ff",glowIntensity:v=.5,trendEnable:w=!1,trendValue:V=0,trendType:P="up",trendSuffix:C="%",trendUpColor:k="#52c41a",trendDownColor:j="#ff4d4f",rotation:$=0,opacity:E=100,background:F="transparent",style:I,onClick:T,onDoubleClick:z,onMouseEnter:D,onMouseLeave:M})=>{const A=function(e,o){return t.useMemo(()=>i(e,o),[e,o])}(a,n),L="digital"===d,O=((e,t,o)=>{const r=e.toFixed(t);if(!o)return r;const[a,n]=r.split("."),i=a.replace(/\B(?=(\d{3})+(?!\d))/g,",");return n?`${i}.${n}`:i})(t.useMemo(()=>A.length>0&&"number"==typeof A[0]?.value?A[0].value:0,[A]),l,s),R=v>0?`0 0 ${10*v}px ${m}, 0 0 ${20*v}px ${m}40, 0 0 ${30*v}px ${m}20`:"none",U={transform:0!==$?`rotate(${$}deg)`:void 0,opacity:E/100,backgroundColor:F,...I};return o.jsxs("div",{className:f,onClick:T,onDoubleClick:z,onMouseEnter:D,onMouseLeave:M,ref:e,style:U,children:[o.jsxs("div",{className:x,children:[p?o.jsx("span",{className:r(g,L&&_),style:{fontSize:.5*c+"px",color:m},children:p}):null,o.jsx("span",{className:r(y,L&&h),style:{fontSize:`${c}px`,color:m,textShadow:R},children:O}),u?o.jsx("span",{className:r(b,L&&S),style:{fontSize:.4*c+"px",color:m},children:u}):null]}),w?o.jsx(N,{downColor:j,size:c,suffix:C,type:P,upColor:k,value:V}):null]})},e.meta=P});

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).EasyEditorMaterialsStatisticNumberMeta={})}(this,function(e){"use strict";const t="EasyEditorMaterialsNumberFlip";const a={componentName:t,title:"数字翻牌",group:"display",devMode:"proCode",npm:{package:"@easy-editor/materials-dashboard-number-flip",version:"0.0.1",globalName:t,componentName:t},snippets:[{title:"数字翻牌",screenshot:"",schema:{componentName:t,props:{value:1234567,decimals:0,separator:!0,fontSize:48,fontFamily:"digital",color:"#00d4ff",glowIntensity:.5},$dashboard:{rect:{width:280,height:80}}}},{title:"货币数字",screenshot:"",schema:{componentName:t,props:{value:99999.99,decimals:2,separator:!0,prefix:"$",fontSize:42,fontFamily:"digital",color:"#00ff88",glowIntensity:.6},$dashboard:{rect:{width:260,height:70}}}},{title:"百分比",screenshot:"",schema:{componentName:t,props:{value:87.5,decimals:1,separator:!1,suffix:"%",fontSize:56,fontFamily:"digital",color:"#ff6b6b",glowIntensity:.8},$dashboard:{rect:{width:200,height:90}}}}],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:"value",title:"数值",setter:"NumberSetter",extraProps:{defaultValue:0}},{name:"decimals",title:"小数位数",setter:"NumberSetter",extraProps:{defaultValue:0}},{name:"separator",title:"千分位分隔",setter:"SwitchSetter",extraProps:{defaultValue:!0}},{name:"prefix",title:"前缀",setter:"StringSetter"},{name:"suffix",title:"后缀",setter:"StringSetter"}]},{type:"group",title:"趋势",setter:{componentName:"CollapseSetter",props:{icon:!1}},items:[{name:"trendEnable",title:"显示趋势",setter:"SwitchSetter",extraProps:{defaultValue:!1}},{name:"trendValue",title:"趋势值",setter:"NumberSetter",extraProps:{defaultValue:0}},{name:"trendType",title:"趋势类型",setter:{componentName:"SegmentedSetter",props:{options:[{label:"上升",value:"up"},{label:"下降",value:"down"},{label:"持平",value:"flat"}]}},extraProps:{defaultValue:"up"}},{name:"trendSuffix",title:"趋势后缀",setter:"StringSetter",extraProps:{defaultValue:"%"}}]},{type:"group",title:"样式",setter:{componentName:"CollapseSetter",props:{icon:!1}},items:[{name:"fontSize",title:"字体大小",setter:"NumberSetter",extraProps:{defaultValue:48}},{name:"fontFamily",title:"字体类型",setter:{componentName:"SelectSetter",props:{options:[{label:"数码字体",value:"digital"},{label:"默认字体",value:"default"}]}},extraProps:{defaultValue:"digital"}},{name:"color",title:"颜色",setter:"ColorSetter",extraProps:{defaultValue:"#00d4ff"}},{name:"glowIntensity",title:"发光强度",setter:{componentName:"NumberSetter",props:{min:0,max:2,step:.1}},extraProps:{defaultValue:.5}}]}]},{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}},{type:"group",title:"动画",setter:{componentName:"CollapseSetter",props:{icon:!1}},items:[{name:"animationEnable",title:"启用动画",setter:"SwitchSetter",extraProps:{defaultValue:!0}},{name:"animationType",title:"动画类型",setter:{componentName:"SegmentedSetter",props:{options:[{label:"滚动",value:"scroll"},{label:"翻转",value:"flip"},{label:"渐变",value:"fade"}]}},extraProps:{defaultValue:"scroll"}},{name:"animationDuration",title:"动画时长",setter:{componentName:"SliderSetter",props:{min:0,max:3e3,step:100,suffix:"ms"}},extraProps:{defaultValue:1e3}},{name:"animationEasing",title:"缓动函数",setter:{componentName:"SelectSetter",props:{options:[{label:"线性",value:"linear"},{label:"缓入",value:"ease-in"},{label:"缓出",value:"ease-out"},{label:"缓入缓出",value:"ease-in-out"}]}},extraProps:{defaultValue:"ease-out"}}]}]}]}],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).EasyEditorMaterialsNumberFlipMeta={})}(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}}]))(),n=a("高级配置",[{title:"条件渲染",setter:"SwitchSetter",extraProps:{supportVariable:!0,getValue:e=>e.getNode().getExtraPropValue("condition"),setValue(e,t){e.getNode().setExtraProp("condition",t)}}}]),s="EasyEditorMaterialsNumberFlip";const p=((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,n]}]}],component:{},supports:{},advanced:{}}))(a("组件配置",[{type:"group",title:"组件配置",setter:"SubTabSetter",items:[{type:"group",key:"value",title:"数值",items:[{name:"decimals",title:"小数位数",setter:{componentName:"NumberSetter",props:{min:0,max:10}},extraProps:{defaultValue:0}},{name:"separator",title:"千分位分隔",setter:"SwitchSetter",extraProps:{defaultValue:!0}},{name:"prefix",title:"前缀",setter:"StringSetter"},{name:"suffix",title:"后缀",setter:"StringSetter"}]},{type:"group",key:"trend",title:"趋势",items:[{name:"trendEnable",title:"显示趋势",setter:"SwitchSetter",extraProps:{defaultValue:!1}},{name:"trendValue",title:"趋势值",setter:"NumberSetter",extraProps:{defaultValue:0}},{name:"trendType",title:"趋势类型",setter:{componentName:"SegmentedSetter",props:{options:[{label:"上升",value:"up"},{label:"下降",value:"down"},{label:"持平",value:"flat"}]}},extraProps:{defaultValue:"up"}},{name:"trendSuffix",title:"趋势后缀",setter:"StringSetter",extraProps:{defaultValue:"%"}}]},{type:"group",key:"style",title:"样式",items:[{name:"fontSize",title:"字体大小",setter:{componentName:"SliderSetter",props:{min:12,max:120,step:2,suffix:"px"}},extraProps:{defaultValue:48}},{name:"fontFamily",title:"字体类型",setter:{componentName:"SelectSetter",props:{options:[{label:"数码字体",value:"digital"},{label:"默认字体",value:"default"}]}},extraProps:{defaultValue:"digital"}},{name:"color",title:"颜色",setter:"ColorSetter",extraProps:{defaultValue:"#00d4ff"}},{name:"glowIntensity",title:"发光强度",setter:{componentName:"SliderSetter",props:{min:0,max:2,step:.1}},extraProps:{defaultValue:.5}}]}]}],{padding:"6px 16px 12px"}),{name:"$data",title:"数据配置",setter:{componentName:"DataSetter",props:{expectedFields:[{name:"value",label:"value",type:"number",required:!0,description:"数值"}],showPreview:!0,previewLimit:10}},extraProps:{label:!1}});const d={componentName:s,title:"数字翻牌",group:"display",devMode:"proCode",npm:{package:"@easy-editor/materials-dashboard-number-flip",version:"0.0.4",globalName:s,componentName:s},snippets:[{title:"数字翻牌",screenshot:"",schema:{componentName:s,title:"数字翻牌",props:{$data:t({value:1234567}),decimals:0,separator:!0,fontSize:48,fontFamily:"digital",color:"#00d4ff",glowIntensity:.5,rotation:0,opacity:100,background:"transparent"},$dashboard:{rect:{width:280,height:80}}}},{title:"货币数字",screenshot:"",schema:{componentName:s,title:"货币数字",props:{$data:t({value:99999.99}),decimals:2,separator:!0,prefix:"$",fontSize:42,fontFamily:"digital",color:"#00ff88",glowIntensity:.6,rotation:0,opacity:100,background:"transparent"},$dashboard:{rect:{width:260,height:70}}}},{title:"百分比",screenshot:"",schema:{componentName:s,title:"百分比",props:{$data:t({value:87.5}),decimals:1,separator:!1,suffix:"%",fontSize:56,fontFamily:"digital",color:"#ff6b6b",glowIntensity:.8,rotation:0,opacity:100,background:"transparent"},$dashboard:{rect:{width:200,height:90}}}}],configure:p};e.meta=d});

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-number-flip",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "description": "Number Flip component for EasyEditor dashboard",
   "type": "module",
   "main": "dist/index.js",
@@ -45,20 +45,16 @@
     "@types/react-dom": "^18 || ^19"
   },
   "dependencies": {
-    "@easy-editor/materials-shared": "0.0.0"
+    "@easy-editor/materials-shared": "0.0.1"
   },
   "scripts": {
-    "dev": "vite",
+    "dev": "easypack dev",
     "dev:debug": "vite --port 5024",
     "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,179 +1,212 @@
-/**
- * Number Flip Component
- * 数字翻牌组件 - 用于展示 KPI、统计数字等
- */
-
-import type { CSSProperties, Ref } from 'react'
-import { cn } from '@easy-editor/materials-shared'
-import styles from './component.module.css'
-
-export type TrendType = 'up' | 'down' | 'flat'
-
-export interface NumberFlipProps {
-  ref?: Ref<HTMLDivElement>
-  /** 数值 */
-  value?: number
-  /** 小数位数 */
-  decimals?: number
-  /** 是否显示千分位分隔符 */
-  separator?: boolean
-  /** 前缀 */
-  prefix?: string
-  /** 后缀 */
-  suffix?: string
-  /** 字体大小 */
-  fontSize?: number
-  /** 字体类型 */
-  fontFamily?: 'digital' | 'default'
-  /** 颜色 */
-  color?: string
-  /** 发光强度 (0-2) */
-  glowIntensity?: number
-  /** 是否显示趋势 */
-  trendEnable?: boolean
-  /** 趋势值 */
-  trendValue?: number
-  /** 趋势类型 */
-  trendType?: TrendType
-  /** 趋势后缀 */
-  trendSuffix?: string
-  /** 趋势上升颜色 */
-  trendUpColor?: string
-  /** 趋势下降颜色 */
-  trendDownColor?: string
-  /** 外部样式 */
-  style?: CSSProperties
-}
-
-const formatNumber = (value: number, decimals: number, separator: boolean): string => {
-  const fixed = value.toFixed(decimals)
-  if (!separator) {
-    return fixed
-  }
-
-  const [intPart, decPart] = fixed.split('.')
-  const formattedInt = intPart.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
-  return decPart ? `${formattedInt}.${decPart}` : formattedInt
-}
-
-const TrendIndicator: React.FC<{
-  type: TrendType
-  value: number
-  suffix: string
-  upColor: string
-  downColor: string
-  size: number
-}> = ({ type, value, suffix, upColor, downColor, size }) => {
-  let color = '#8899aa'
-  if (type === 'up') {
-    color = upColor
-  } else if (type === 'down') {
-    color = downColor
-  }
-
-  return (
-    <div className={styles.trend} style={{ fontSize: size * 0.35 }}>
-      {type !== 'flat' && (
-        <svg
-          aria-label={`Trend ${type}`}
-          fill='none'
-          height={size * 0.3}
-          role='img'
-          style={{
-            transform: type === 'down' ? 'rotate(180deg)' : undefined,
-          }}
-          viewBox='0 0 24 24'
-          width={size * 0.3}
-        >
-          <title>Trend arrow {type}</title>
-          <path d='M12 4L20 14H4L12 4Z' fill={color} />
-        </svg>
-      )}
-      {type === 'flat' && <span style={{ color, marginRight: 4 }}>—</span>}
-      <span style={{ color }}>
-        {value}
-        {suffix}
-      </span>
-    </div>
-  )
-}
-
-export const NumberFlip: React.FC<NumberFlipProps> = ({
-  ref,
-  value = 0,
-  decimals = 0,
-  separator = true,
-  prefix = '',
-  suffix = '',
-  fontSize = 48,
-  fontFamily = 'digital',
-  color = '#00d4ff',
-  glowIntensity = 0.5,
-  trendEnable = false,
-  trendValue = 0,
-  trendType = 'up',
-  trendSuffix = '%',
-  trendUpColor = '#52c41a',
-  trendDownColor = '#ff4d4f',
-  style: externalStyle,
-}) => {
-  const isDigital = fontFamily === 'digital'
-  const formattedValue = formatNumber(value, decimals, separator)
-
-  // 计算发光效果的 text-shadow
-  const glowShadow =
-    glowIntensity > 0
-      ? `0 0 ${10 * glowIntensity}px ${color}, 0 0 ${20 * glowIntensity}px ${color}40, 0 0 ${30 * glowIntensity}px ${color}20`
-      : 'none'
-
-  return (
-    <div className={styles.container} ref={ref} style={externalStyle}>
-      <div className={styles.content}>
-        {prefix ? (
-          <span
-            className={cn(styles.prefix, isDigital && styles.prefixDigital)}
-            style={{
-              fontSize: `${fontSize * 0.5}px`,
-              color,
-            }}
-          >
-            {prefix}
-          </span>
-        ) : null}
-        <span
-          className={cn(styles.value, isDigital && styles.valueDigital)}
-          style={{
-            fontSize: `${fontSize}px`,
-            color,
-            textShadow: glowShadow,
-          }}
-        >
-          {formattedValue}
-        </span>
-        {suffix ? (
-          <span
-            className={cn(styles.suffix, isDigital && styles.suffixDigital)}
-            style={{
-              fontSize: `${fontSize * 0.4}px`,
-              color,
-            }}
-          >
-            {suffix}
-          </span>
-        ) : null}
-      </div>
-      {trendEnable ? (
-        <TrendIndicator
-          downColor={trendDownColor}
-          size={fontSize}
-          suffix={trendSuffix}
-          type={trendType}
-          upColor={trendUpColor}
-          value={trendValue}
-        />
-      ) : null}
-    </div>
-  )
-}
-
-export default NumberFlip
+/**
+ * Number Flip Component
+ * 数字翻牌组件 - 支持数据源绑定和事件交互
+ */
+
+import { useMemo, type CSSProperties } from 'react'
+import { cn, type MaterialComponet, useDataSource } from '@easy-editor/materials-shared'
+import styles from './component.module.css'
+
+export type TrendType = 'up' | 'down' | 'flat'
+
+export interface NumberFlipProps extends MaterialComponet {
+  /** 小数位数 */
+  decimals?: number
+  /** 是否显示千分位分隔符 */
+  separator?: boolean
+  /** 前缀 */
+  prefix?: string
+  /** 后缀 */
+  suffix?: string
+  /** 字体大小 */
+  fontSize?: number
+  /** 字体类型 */
+  fontFamily?: 'digital' | 'default'
+  /** 颜色 */
+  color?: string
+  /** 发光强度 (0-2) */
+  glowIntensity?: number
+  /** 是否显示趋势 */
+  trendEnable?: boolean
+  /** 趋势值 */
+  trendValue?: number
+  /** 趋势类型 */
+  trendType?: TrendType
+  /** 趋势后缀 */
+  trendSuffix?: string
+  /** 趋势上升颜色 */
+  trendUpColor?: string
+  /** 趋势下降颜色 */
+  trendDownColor?: string
+  /** 点击事件 */
+  onClick?: (e: React.MouseEvent) => void
+  /** 双击事件 */
+  onDoubleClick?: (e: React.MouseEvent) => void
+  /** 鼠标进入 */
+  onMouseEnter?: (e: React.MouseEvent) => void
+  /** 鼠标离开 */
+  onMouseLeave?: (e: React.MouseEvent) => void
+}
+
+const formatNumber = (value: number, decimals: number, separator: boolean): string => {
+  const fixed = value.toFixed(decimals)
+  if (!separator) {
+    return fixed
+  }
+
+  const [intPart, decPart] = fixed.split('.')
+  const formattedInt = intPart.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+  return decPart ? `${formattedInt}.${decPart}` : formattedInt
+}
+
+const TrendIndicator: React.FC<{
+  type: TrendType
+  value: number
+  suffix: string
+  upColor: string
+  downColor: string
+  size: number
+}> = ({ type, value, suffix, upColor, downColor, size }) => {
+  let color = '#8899aa'
+  if (type === 'up') {
+    color = upColor
+  } else if (type === 'down') {
+    color = downColor
+  }
+
+  return (
+    <div className={styles.trend} style={{ fontSize: size * 0.35 }}>
+      {type !== 'flat' && (
+        <svg
+          aria-label={`Trend ${type}`}
+          fill='none'
+          height={size * 0.3}
+          role='img'
+          style={{
+            transform: type === 'down' ? 'rotate(180deg)' : undefined,
+          }}
+          viewBox='0 0 24 24'
+          width={size * 0.3}
+        >
+          <title>Trend arrow {type}</title>
+          <path d='M12 4L20 14H4L12 4Z' fill={color} />
+        </svg>
+      )}
+      {type === 'flat' && <span style={{ color, marginRight: 4 }}>—</span>}
+      <span style={{ color }}>
+        {value}
+        {suffix}
+      </span>
+    </div>
+  )
+}
+
+export const NumberFlip: React.FC<NumberFlipProps> = ({
+  ref,
+  $data,
+  __dataSource,
+  decimals = 0,
+  separator = true,
+  prefix = '',
+  suffix = '',
+  fontSize = 48,
+  fontFamily = 'digital',
+  color = '#00d4ff',
+  glowIntensity = 0.5,
+  trendEnable = false,
+  trendValue = 0,
+  trendType = 'up',
+  trendSuffix = '%',
+  trendUpColor = '#52c41a',
+  trendDownColor = '#ff4d4f',
+  rotation = 0,
+  opacity = 100,
+  background = 'transparent',
+  style: externalStyle,
+  onClick,
+  onDoubleClick,
+  onMouseEnter,
+  onMouseLeave,
+}) => {
+  // 解析数据源
+  const dataSource = useDataSource($data, __dataSource)
+  const value = useMemo<number>(() => {
+    if (dataSource.length > 0 && typeof dataSource[0]?.value === 'number') {
+      return dataSource[0].value
+    }
+    return 0
+  }, [dataSource])
+
+  const isDigital = fontFamily === 'digital'
+  const formattedValue = formatNumber(value, decimals, separator)
+
+  // 计算发光效果的 text-shadow
+  const glowShadow =
+    glowIntensity > 0
+      ? `0 0 ${10 * glowIntensity}px ${color}, 0 0 ${20 * glowIntensity}px ${color}40, 0 0 ${30 * glowIntensity}px ${color}20`
+      : 'none'
+
+  const containerStyle: CSSProperties = {
+    transform: rotation !== 0 ? `rotate(${rotation}deg)` : undefined,
+    opacity: opacity / 100,
+    backgroundColor: background,
+    ...externalStyle,
+  }
+
+  return (
+    <div
+      className={styles.container}
+      onClick={onClick}
+      onDoubleClick={onDoubleClick}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+      ref={ref}
+      style={containerStyle}
+    >
+      <div className={styles.content}>
+        {prefix ? (
+          <span
+            className={cn(styles.prefix, isDigital && styles.prefixDigital)}
+            style={{
+              fontSize: `${fontSize * 0.5}px`,
+              color,
+            }}
+          >
+            {prefix}
+          </span>
+        ) : null}
+        <span
+          className={cn(styles.value, isDigital && styles.valueDigital)}
+          style={{
+            fontSize: `${fontSize}px`,
+            color,
+            textShadow: glowShadow,
+          }}
+        >
+          {formattedValue}
+        </span>
+        {suffix ? (
+          <span
+            className={cn(styles.suffix, isDigital && styles.suffixDigital)}
+            style={{
+              fontSize: `${fontSize * 0.4}px`,
+              color,
+            }}
+          >
+            {suffix}
+          </span>
+        ) : null}
+      </div>
+      {trendEnable ? (
+        <TrendIndicator
+          downColor={trendDownColor}
+          size={fontSize}
+          suffix={trendSuffix}
+          type={trendType}
+          upColor={trendUpColor}
+          value={trendValue}
+        />
+      ) : null}
+    </div>
+  )
+}