@easy-editor/materials-dashboard-text 0.0.15 → 0.0.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @easy-editor/materials-dashboard-text
2
2
 
3
+ ## 0.0.16
4
+
5
+ ### Patch Changes
6
+
7
+ - feat: text add datasource
8
+
3
9
  ## 0.0.15
4
10
 
5
11
  ### Patch Changes
@@ -1,2 +1 @@
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).EasyEditorMaterialsTextComponent={},e.jsxRuntime)}(this,function(e,t){"use strict";function n(e){var t,o,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]&&(o=n(e[t]))&&(i&&(i+=" "),i+=o)}else for(o in e)e[o]&&(i&&(i+=" "),i+=o);return i}function o(...e){return function(){for(var e,t,o=0,i="",l=arguments.length;o<l;o++)(e=arguments[o])&&(t=n(e))&&(i&&(i+=" "),i+=t);return i}(e)}var i="component-module__container___VbZSk",l="component-module__text___nFUOn",r="component-module__link___20asF",_="component-module__underline___0oAJz",a="component-module__alignLeft___IOvpO",c="component-module__alignCenter___EIwIC",d="component-module__alignRight___p3ReL",s="component-module__valignTop___-5DmK",m="component-module__valignMiddle___i0are",f="component-module__valignBottom___97zzw";!function(e,t){void 0===t&&(t={});var n=t.insertAt;if("undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===n&&o.firstChild?o.insertBefore(i,o.firstChild):o.appendChild(i),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(document.createTextNode(e))}}(".component-module__container___VbZSk{display:flex;height:100%;width:100%}.component-module__text___nFUOn{display:inline-block;word-break:break-word}.component-module__link___20asF{cursor:pointer;text-decoration:none;transition:opacity .2s ease}.component-module__link___20asF:hover{opacity:.8}.component-module__underline___0oAJz{text-decoration:underline}.component-module__alignLeft___IOvpO{justify-content:flex-start;text-align:left}.component-module__alignCenter___EIwIC{justify-content:center;text-align:center}.component-module__alignRight___p3ReL{justify-content:flex-end;text-align:right}.component-module__valignTop___-5DmK{align-items:flex-start}.component-module__valignMiddle___i0are{align-items:center}.component-module__valignBottom___97zzw{align-items:flex-end}");const u=({ref:e,content:n="文本内容",fontSize:u=16,fontWeight:p="normal",fontFamily:g="inherit",color:h="#ffffff",textAlign:x="left",verticalAlign:y="middle",lineHeight:v=1.5,letterSpacing:b=0,isLink:j=!1,href:w="",target:k="_blank",underline:C=!1,glowEnable:S=!1,glowColor:T="#00d4ff",glowIntensity:z=1,style:A})=>{const E={fontSize:u,fontWeight:p,fontFamily:g,color:h,lineHeight:v,letterSpacing:b,textShadow:S?`0 0 ${10*z}px ${T}, 0 0 ${20*z}px ${T}, 0 0 ${30*z}px ${T}`:void 0},F=o(i,(e=>{switch(e){case"left":default:return a;case"center":return c;case"right":return d}})(x),(e=>{switch(e){case"top":return s;case"middle":default:return m;case"bottom":return f}})(y)),I=o(l,j&&r,C&&_);if(j&&w){const o="_blank"===k?"noopener noreferrer":"";return t.jsx("div",{className:F,ref:e,style:A,children:t.jsx("a",{className:I,href:w,rel:o,style:E,target:k,children:n})})}return t.jsx("div",{className:F,ref:e,style:A,children:t.jsxs("span",{className:I,style:E,children:[n," 新版本!"]})})};e.Text=u,e.default=u,Object.defineProperty(e,"__esModule",{value:!0})});
2
- //# sourceMappingURL=component.min.js.map
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).EasyEditorMaterialsTextComponent={},e.React,e.jsxRuntime)}(this,function(e,t,n){"use strict";function o(e){var t,n,r="";if("string"==typeof e||"number"==typeof e)r+=e;else if("object"==typeof e)if(Array.isArray(e)){var i=e.length;for(t=0;t<i;t++)e[t]&&(n=o(e[t]))&&(r&&(r+=" "),r+=n)}else for(n in e)e[n]&&(r&&(r+=" "),r+=n);return r}function r(...e){return function(){for(var e,t,n=0,r="",i=arguments.length;n<i;n++)(e=arguments[n])&&(t=o(e))&&(r&&(r+=" "),r+=t);return r}(e)}var i="component-module__container___VbZSk",l="component-module__text___nFUOn",a="component-module__link___20asF",c="component-module__underline___0oAJz",_="component-module__alignLeft___IOvpO",s="component-module__alignCenter___EIwIC",d="component-module__alignRight___p3ReL",u="component-module__valignTop___-5DmK",f="component-module__valignMiddle___i0are",m="component-module__valignBottom___97zzw";function p(e,t){if(!t)return e;const n=t.split(".");let o=e;for(const e of n){if(null==o)return;if("object"!=typeof o)return;o=o[e]}return o}function g(e){return void 0===e?[]:Array.isArray(e)?e:e&&"object"==typeof e?[e]:[]}!function(e,t){void 0===t&&(t={});var n=t.insertAt;if("undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===n&&o.firstChild?o.insertBefore(r,o.firstChild):o.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}(".component-module__container___VbZSk{display:flex;height:100%;width:100%}.component-module__text___nFUOn{display:inline-block;word-break:break-word}.component-module__link___20asF{cursor:pointer;text-decoration:none;transition:opacity .2s ease}.component-module__link___20asF:hover{opacity:.8}.component-module__underline___0oAJz{text-decoration:underline}.component-module__alignLeft___IOvpO{justify-content:flex-start;text-align:left}.component-module__alignCenter___EIwIC{justify-content:center;text-align:center}.component-module__alignRight___p3ReL{justify-content:flex-end;text-align:right}.component-module__valignTop___-5DmK{align-items:flex-start}.component-module__valignMiddle___i0are{align-items:center}.component-module__valignBottom___97zzw{align-items:flex-end}");const y=({ref:e,$data:o,__dataSource:y,fontSize:h=16,fontWeight:x="normal",fontFamily:v="inherit",color:b="#ffffff",textAlign:j="left",verticalAlign:k="middle",lineHeight:w=1.5,letterSpacing:T=0,isLink:A=!1,href:C="",target:I="_blank",underline:S=!1,glowEnable:F=!1,glowColor:z="#00d4ff",glowIntensity:$=1,rotation:E=0,opacity:O=100,background:M="transparent",style:N})=>{const R=t.useMemo(()=>{if(!o)return"";let e=[];if("static"===o.sourceType)e=Array.isArray(o.staticData)?o.staticData:[];else if("global"===o.sourceType&&o.datasourceId){const t=y?.page?.[o.datasourceId];e=g(t)}else if("datasource"===o.sourceType&&o.datasourceId){const t=y?.component?.[o.datasourceId];e=g(t)}const t=function(e,t){return t&&0!==t.length?e.map(e=>{const n={};for(const{componentField:o,sourceField:r}of t)o&&r&&(n[o]=p(e,r));return n}):e}(e,o.fieldMappings);return t.length>0&&void 0!==t[0].text?String(t[0].text):""},[o,y]),L={fontSize:h,fontWeight:x,fontFamily:v,color:b,lineHeight:w,letterSpacing:T,textShadow:F?`0 0 ${10*$}px ${z}, 0 0 ${20*$}px ${z}, 0 0 ${30*$}px ${z}`:void 0},B={...N,transform:0!==E?`rotate(${E}deg)`:void 0,opacity:O/100,backgroundColor:M},D=r(i,(e=>{switch(e){case"left":default:return _;case"center":return s;case"right":return d}})(j),(e=>{switch(e){case"top":return u;case"middle":default:return f;case"bottom":return m}})(k)),q=r(l,A&&a,S&&c);if(A&&C){const t="_blank"===I?"noopener noreferrer":"";return n.jsx("div",{className:D,ref:e,style:B,children:n.jsx("a",{className:q,href:C,rel:t,style:L,target:I,children:R})})}return n.jsx("div",{className:D,ref:e,style:B,children:n.jsx("span",{className:q,style:L,children:R})})};e.Text=y,e.default=y,Object.defineProperty(e,"__esModule",{value:!0})});
package/dist/index.min.js CHANGED
@@ -1,2 +1 @@
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).EasyEditorMaterialsText={},e.jsxRuntime)}(this,function(e,t){"use strict";function o(e){var t,n,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]&&(n=o(e[t]))&&(r&&(r+=" "),r+=n)}else for(n in e)e[n]&&(r&&(r+=" "),r+=n);return r}function n(...e){return function(){for(var e,t,n=0,r="",l=arguments.length;n<l;n++)(e=arguments[n])&&(t=o(e))&&(r&&(r+=" "),r+=t);return r}(e)}var r="component-module__container___VbZSk",l="component-module__text___nFUOn",a="component-module__link___20asF",i="component-module__underline___0oAJz",s="component-module__alignLeft___IOvpO",p="component-module__alignCenter___EIwIC",c="component-module__alignRight___p3ReL",m="component-module__valignTop___-5DmK",d="component-module__valignMiddle___i0are",f="component-module__valignBottom___97zzw";!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{display:flex;height:100%;width:100%}.component-module__text___nFUOn{display:inline-block;word-break:break-word}.component-module__link___20asF{cursor:pointer;text-decoration:none;transition:opacity .2s ease}.component-module__link___20asF:hover{opacity:.8}.component-module__underline___0oAJz{text-decoration:underline}.component-module__alignLeft___IOvpO{justify-content:flex-start;text-align:left}.component-module__alignCenter___EIwIC{justify-content:center;text-align:center}.component-module__alignRight___p3ReL{justify-content:flex-end;text-align:right}.component-module__valignTop___-5DmK{align-items:flex-start}.component-module__valignMiddle___i0are{align-items:center}.component-module__valignBottom___97zzw{align-items:flex-end}");const u="EasyEditorMaterialsText";const _={componentName:u,title:"文本",group:"basic",devMode:"proCode",npm:{package:"@easy-editor/materials-dashboard-text",version:"0.0.15",globalName:u,componentName:u},configure:{props:[{type:"group",title:"属性",setter:"TabSetter",items:[{type:"group",key:"config",title:"配置",items:[{name:"nodeInfo",title:"节点信息",setter:"NodeInfoSetter",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:"content",title:"文本内容",setter:"TextAreaSetter",extraProps:{defaultValue:"文本内容"}},{name:"isLink",title:"作为链接",setter:"SwitchSetter",extraProps:{defaultValue:!1}},{name:"href",title:"链接地址",setter:"StringSetter"},{name:"target",title:"打开方式",setter:{componentName:"SelectSetter",props:{options:[{label:"新窗口",value:"_blank"},{label:"当前窗口",value:"_self"}]}},extraProps:{defaultValue:"_blank"}}]},{type:"group",title:"字体",setter:{componentName:"CollapseSetter",props:{icon:!1}},items:[{name:"fontSize",title:"字体大小",setter:"NumberSetter",extraProps:{defaultValue:16}},{name:"fontWeight",title:"字体粗细",setter:{componentName:"SelectSetter",props:{options:[{label:"正常",value:"normal"},{label:"粗体",value:"bold"}]}},extraProps:{defaultValue:"normal"}},{name:"color",title:"颜色",setter:"ColorSetter",extraProps:{defaultValue:"#ffffff"}},{name:"lineHeight",title:"行高",setter:"NumberSetter",extraProps:{defaultValue:1.5}}]},{type:"group",title:"对齐",setter:{componentName:"CollapseSetter",props:{icon:!1}},items:[{name:"textAlign",title:"水平对齐",setter:{componentName:"SegmentedSetter",props:{options:[{label:"左",value:"left"},{label:"中",value:"center"},{label:"右",value:"right"}]}},extraProps:{defaultValue:"left"}},{name:"verticalAlign",title:"垂直对齐",setter:{componentName:"SegmentedSetter",props:{options:[{label:"上",value:"top"},{label:"中",value:"middle"},{label:"下",value:"bottom"}]}},extraProps:{defaultValue:"middle"}}]},{type:"group",title:"效果",setter:{componentName:"CollapseSetter",props:{icon:!1}},items:[{name:"underline",title:"下划线",setter:"SwitchSetter",extraProps:{defaultValue:!1}},{name:"glowEnable",title:"发光效果",setter:"SwitchSetter",extraProps:{defaultValue:!1}},{name:"glowColor",title:"发光颜色",setter:"ColorSetter",extraProps:{defaultValue:"#00d4ff"}}]}]},{type:"group",key:"data",title:"数据",items:[{name:"dataBinding",title:"数据绑定",setter:"DataBindingSetter"}]},{type:"group",key:"advanced",title:"高级",items:[{name:"nodeInfo",title:"节点信息",setter:"NodeInfoSetter",extraProps:{label:!1}},{name:"condition",title:"显隐控制",setter:"SwitchSetter",extraProps:{defaultValue:!0,supportVariable:!0}}]}]}],component:{},supports:{},advanced:{}},snippets:[{title:"普通文本",screenshot:"",schema:{componentName:u,title:"普通文本",props:{content:"这是一段普通文本",fontSize:16,color:"#ffffff"},$dashboard:{rect:{width:120,height:40}}}},{title:"标题文本",screenshot:"",schema:{componentName:u,title:"标题文本",props:{content:"标题文本",fontSize:32,fontWeight:"bold",color:"#ffffff",textAlign:"center"},$dashboard:{rect:{width:200,height:60}}}},{title:"发光标题",screenshot:"",schema:{componentName:u,title:"发光标题",props:{content:"发光标题",fontSize:36,fontWeight:"bold",color:"#00d4ff",textAlign:"center",glowEnable:!0,glowColor:"#00d4ff",glowIntensity:1.5},$dashboard:{rect:{width:240,height:80}}}},{title:"链接文本",screenshot:"",schema:{componentName:u,title:"链接文本",props:{content:"点击跳转",fontSize:16,color:"#00d4ff",isLink:!0,href:"https://easy-editor-docs.vercel.app/",target:"_blank",underline:!0},$dashboard:{rect:{width:120,height:40}}}}]};e.component=({ref:e,content:o="文本内容",fontSize:u=16,fontWeight:_="normal",fontFamily:g="inherit",color:h="#ffffff",textAlign:x="left",verticalAlign:S="middle",lineHeight:b=1.5,letterSpacing:y=0,isLink:v=!1,href:w="",target:N="_blank",underline:V=!1,glowEnable:P=!1,glowColor:k="#00d4ff",glowIntensity:C=1,style:E})=>{const z={fontSize:u,fontWeight:_,fontFamily:g,color:h,lineHeight:b,letterSpacing:y,textShadow:P?`0 0 ${10*C}px ${k}, 0 0 ${20*C}px ${k}, 0 0 ${30*C}px ${k}`:void 0},j=n(r,(e=>{switch(e){case"left":default:return s;case"center":return p;case"right":return c}})(x),(e=>{switch(e){case"top":return m;case"middle":default:return d;case"bottom":return f}})(S)),A=n(l,v&&a,V&&i);if(v&&w){const n="_blank"===N?"noopener noreferrer":"";return t.jsx("div",{className:j,ref:e,style:E,children:t.jsx("a",{className:A,href:w,rel:n,style:z,target:N,children:o})})}return t.jsx("div",{className:j,ref:e,style:E,children:t.jsxs("span",{className:A,style:z,children:[o," 新版本!"]})})},e.meta=_});
2
- //# sourceMappingURL=index.min.js.map
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).EasyEditorMaterialsText={},e.React,e.jsxRuntime)}(this,function(e,t,o){"use strict";function n(e){var t,o,r="";if("string"==typeof e||"number"==typeof e)r+=e;else if("object"==typeof e)if(Array.isArray(e)){var a=e.length;for(t=0;t<a;t++)e[t]&&(o=n(e[t]))&&(r&&(r+=" "),r+=o)}else for(o in e)e[o]&&(r&&(r+=" "),r+=o);return r}function r(...e){return function(){for(var e,t,o=0,r="",a=arguments.length;o<a;o++)(e=arguments[o])&&(t=n(e))&&(r&&(r+=" "),r+=t);return r}(e)}var a="component-module__container___VbZSk",i="component-module__text___nFUOn",l="component-module__link___20asF",s="component-module__underline___0oAJz",c="component-module__alignLeft___IOvpO",p="component-module__alignCenter___EIwIC",d="component-module__alignRight___p3ReL",u="component-module__valignTop___-5DmK",m="component-module__valignMiddle___i0are",f="component-module__valignBottom___97zzw";function g(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}function _(e){return void 0===e?[]:Array.isArray(e)?e:e&&"object"==typeof e?[e]:[]}!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{display:flex;height:100%;width:100%}.component-module__text___nFUOn{display:inline-block;word-break:break-word}.component-module__link___20asF{cursor:pointer;text-decoration:none;transition:opacity .2s ease}.component-module__link___20asF:hover{opacity:.8}.component-module__underline___0oAJz{text-decoration:underline}.component-module__alignLeft___IOvpO{justify-content:flex-start;text-align:left}.component-module__alignCenter___EIwIC{justify-content:center;text-align:center}.component-module__alignRight___p3ReL{justify-content:flex-end;text-align:right}.component-module__valignTop___-5DmK{align-items:flex-start}.component-module__valignMiddle___i0are{align-items:center}.component-module__valignBottom___97zzw{align-items:flex-end}");const x=(e,t,o)=>({type:"group",title:e,setter:{componentName:"CollapseSetter",props:{icon:!1,...o}},items:t}),h={name:"nodeInfo",title:"节点信息",setter:"NodeInfoSetter",extraProps:{label:!1}},y="EasyEditorMaterialsText";const b={componentName:y,title:"文本",group:"basic",devMode:"proCode",npm:{package:"@easy-editor/materials-dashboard-text",version:"0.0.16",globalName:y,componentName:y},configure:{props:[{type:"group",title:"属性",setter:"TabSetter",items:[{type:"group",key:"config",title:"配置",items:[h,x("基础配置",[{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"}}]),x("组件配置",[{type:"group",title:"组件配置",setter:"SubTabSetter",items:[{type:"group",key:"content",title:"内容",items:[{name:"isLink",title:"作为链接",setter:"SwitchSetter",extraProps:{defaultValue:!1}},{name:"href",title:"链接地址",setter:"StringSetter"},{name:"target",title:"打开方式",setter:{componentName:"SelectSetter",props:{options:[{label:"新窗口",value:"_blank"},{label:"当前窗口",value:"_self"}]}},extraProps:{defaultValue:"_blank"}}]},{type:"group",key:"font",title:"字体",items:[{name:"fontSize",title:"字体大小",setter:"NumberSetter",extraProps:{defaultValue:16}},{name:"fontWeight",title:"字体粗细",setter:{componentName:"SelectSetter",props:{options:[{label:"正常",value:"normal"},{label:"粗体",value:"bold"}]}},extraProps:{defaultValue:"normal"}},{name:"color",title:"颜色",setter:"ColorSetter",extraProps:{defaultValue:"#ffffff"}},{name:"lineHeight",title:"行高",setter:"NumberSetter",extraProps:{defaultValue:1.5}}]},{type:"group",key:"align",title:"对齐",items:[{name:"textAlign",title:"水平对齐",setter:{componentName:"SegmentedSetter",props:{options:[{label:"左",value:"left"},{label:"中",value:"center"},{label:"右",value:"right"}]}},extraProps:{defaultValue:"left"}},{name:"verticalAlign",title:"垂直对齐",setter:{componentName:"SegmentedSetter",props:{options:[{label:"上",value:"top"},{label:"中",value:"middle"},{label:"下",value:"bottom"}]}},extraProps:{defaultValue:"middle"}}]},{type:"group",key:"effect",title:"效果",items:[{name:"underline",title:"下划线",setter:"SwitchSetter",extraProps:{defaultValue:!1}},{name:"glowEnable",title:"发光效果",setter:"SwitchSetter",extraProps:{defaultValue:!1}},{name:"glowColor",title:"发光颜色",setter:"ColorSetter",extraProps:{defaultValue:"#00d4ff"}}]}]}],{padding:"6px 16px 12px"})]},{type:"group",key:"data",title:"数据",items:[h,{name:"$data",title:"数据配置",setter:{componentName:"DataSetter",props:{expectedFields:[{name:"text",label:"text",type:"string",required:!0,description:"文本内容"}],showPreview:!0,previewLimit:10}},extraProps:{label:!1}}]},{type:"group",key:"advanced",title:"高级",items:[h,x("事件绑定",[{name:"events",title:"事件",setter:{componentName:"EventSetter",props:{events:[{title:"点击事件",children:[{label:"点击",value:"onClick",description:"鼠标点击时触发"},{label:"双击",value:"onDoubleClick",description:"鼠标双击时触发"}]},{title:"鼠标事件",children:[{label:"鼠标进入",value:"onMouseEnter",description:"鼠标进入时触发"},{label:"鼠标离开",value:"onMouseLeave",description:"鼠标离开时触发"}]}]}}}]),x("高级配置",[{title:"条件渲染",setter:"SwitchSetter",extraProps:{supportVariable:!0,getValue:e=>e.getNode().getExtraPropValue("condition"),setValue(e,t){e.getNode().setExtraProp("condition",t)}}}])]}]}],component:{},supports:{},advanced:{}},snippets:[{title:"普通文本",screenshot:"",schema:{componentName:y,title:"普通文本",props:{fontSize:16,color:"#ffffff",rotation:0,opacity:100,background:"transparent",$data:{sourceType:"static",staticData:[{text:"发光标题"}],fieldMappings:[{componentField:"text",sourceField:"text"}]}},$dashboard:{rect:{width:120,height:40}}}},{title:"标题文本",screenshot:"",schema:{componentName:y,title:"标题文本",props:{fontSize:32,fontWeight:"bold",color:"#ffffff",textAlign:"center",rotation:0,opacity:100,background:"transparent",$data:{sourceType:"static",staticData:[{text:"发光标题"}],fieldMappings:[{componentField:"text",sourceField:"text"}]}},$dashboard:{rect:{width:200,height:60}}}},{title:"发光标题",screenshot:"",schema:{componentName:y,title:"发光标题",props:{fontSize:36,fontWeight:"bold",color:"#00d4ff",textAlign:"center",glowEnable:!0,glowColor:"#00d4ff",glowIntensity:1.5,rotation:0,opacity:100,background:"transparent",$data:{sourceType:"static",staticData:[{text:"发光标题"}],fieldMappings:[{componentField:"text",sourceField:"text"}]}},$dashboard:{rect:{width:240,height:80}}}},{title:"链接文本",screenshot:"",schema:{componentName:y,title:"链接文本",props:{fontSize:16,color:"#00d4ff",isLink:!0,href:"https://easy-editor-docs.vercel.app/",target:"_blank",underline:!0,rotation:0,opacity:100,background:"transparent",$data:{sourceType:"static",staticData:[{text:"发光标题"}],fieldMappings:[{componentField:"text",sourceField:"text"}]}},$dashboard:{rect:{width:120,height:40}}}},{title:"标签文本",screenshot:"",schema:{componentName:y,title:"标签文本",props:{content:"标签",fontSize:14,color:"#ffffff",textAlign:"center",verticalAlign:"middle",rotation:0,opacity:100,background:"rgba(0, 212, 255, 0.2)"},$dashboard:{rect:{width:80,height:32}}}}]};e.component=({ref:e,$data:n,__dataSource:x,fontSize:h=16,fontWeight:y="normal",fontFamily:b="inherit",color:S="#ffffff",textAlign:v="left",verticalAlign:k="middle",lineHeight:w=1.5,letterSpacing:N=0,isLink:V=!1,href:P="",target:$="_blank",underline:C=!1,glowEnable:E=!1,glowColor:F="#00d4ff",glowIntensity:T=1,rotation:A=0,opacity:j=100,background:z="transparent",style:I})=>{const M=t.useMemo(()=>{if(!n)return"";let e=[];if("static"===n.sourceType)e=Array.isArray(n.staticData)?n.staticData:[];else if("global"===n.sourceType&&n.datasourceId){const t=x?.page?.[n.datasourceId];e=_(t)}else if("datasource"===n.sourceType&&n.datasourceId){const t=x?.component?.[n.datasourceId];e=_(t)}const t=function(e,t){return t&&0!==t.length?e.map(e=>{const o={};for(const{componentField:n,sourceField:r}of t)n&&r&&(o[n]=g(e,r));return o}):e}(e,n.fieldMappings);return t.length>0&&void 0!==t[0].text?String(t[0].text):""},[n,x]),D={fontSize:h,fontWeight:y,fontFamily:b,color:S,lineHeight:w,letterSpacing:N,textShadow:E?`0 0 ${10*T}px ${F}, 0 0 ${20*T}px ${F}, 0 0 ${30*T}px ${F}`:void 0},L={...I,transform:0!==A?`rotate(${A}deg)`:void 0,opacity:j/100,backgroundColor:z},R=r(a,(e=>{switch(e){case"left":default:return c;case"center":return p;case"right":return d}})(v),(e=>{switch(e){case"top":return u;case"middle":default:return m;case"bottom":return f}})(k)),O=r(i,V&&l,C&&s);if(V&&P){const t="_blank"===$?"noopener noreferrer":"";return o.jsx("div",{className:R,ref:e,style:L,children:o.jsx("a",{className:O,href:P,rel:t,style:D,target:$,children:M})})}return o.jsx("div",{className:R,ref:e,style:L,children:o.jsx("span",{className:O,style:D,children:M})})},e.meta=b});
package/dist/meta.min.js CHANGED
@@ -1,2 +1 @@
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).EasyEditorMaterialsTextMeta={})}(this,function(e){"use strict";const t="EasyEditorMaterialsText";const o={componentName:t,title:"文本",group:"basic",devMode:"proCode",npm:{package:"@easy-editor/materials-dashboard-text",version:"0.0.15",globalName:t,componentName:t},configure:{props:[{type:"group",title:"属性",setter:"TabSetter",items:[{type:"group",key:"config",title:"配置",items:[{name:"nodeInfo",title:"节点信息",setter:"NodeInfoSetter",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:"content",title:"文本内容",setter:"TextAreaSetter",extraProps:{defaultValue:"文本内容"}},{name:"isLink",title:"作为链接",setter:"SwitchSetter",extraProps:{defaultValue:!1}},{name:"href",title:"链接地址",setter:"StringSetter"},{name:"target",title:"打开方式",setter:{componentName:"SelectSetter",props:{options:[{label:"新窗口",value:"_blank"},{label:"当前窗口",value:"_self"}]}},extraProps:{defaultValue:"_blank"}}]},{type:"group",title:"字体",setter:{componentName:"CollapseSetter",props:{icon:!1}},items:[{name:"fontSize",title:"字体大小",setter:"NumberSetter",extraProps:{defaultValue:16}},{name:"fontWeight",title:"字体粗细",setter:{componentName:"SelectSetter",props:{options:[{label:"正常",value:"normal"},{label:"粗体",value:"bold"}]}},extraProps:{defaultValue:"normal"}},{name:"color",title:"颜色",setter:"ColorSetter",extraProps:{defaultValue:"#ffffff"}},{name:"lineHeight",title:"行高",setter:"NumberSetter",extraProps:{defaultValue:1.5}}]},{type:"group",title:"对齐",setter:{componentName:"CollapseSetter",props:{icon:!1}},items:[{name:"textAlign",title:"水平对齐",setter:{componentName:"SegmentedSetter",props:{options:[{label:"左",value:"left"},{label:"中",value:"center"},{label:"右",value:"right"}]}},extraProps:{defaultValue:"left"}},{name:"verticalAlign",title:"垂直对齐",setter:{componentName:"SegmentedSetter",props:{options:[{label:"上",value:"top"},{label:"中",value:"middle"},{label:"下",value:"bottom"}]}},extraProps:{defaultValue:"middle"}}]},{type:"group",title:"效果",setter:{componentName:"CollapseSetter",props:{icon:!1}},items:[{name:"underline",title:"下划线",setter:"SwitchSetter",extraProps:{defaultValue:!1}},{name:"glowEnable",title:"发光效果",setter:"SwitchSetter",extraProps:{defaultValue:!1}},{name:"glowColor",title:"发光颜色",setter:"ColorSetter",extraProps:{defaultValue:"#00d4ff"}}]}]},{type:"group",key:"data",title:"数据",items:[{name:"dataBinding",title:"数据绑定",setter:"DataBindingSetter"}]},{type:"group",key:"advanced",title:"高级",items:[{name:"nodeInfo",title:"节点信息",setter:"NodeInfoSetter",extraProps:{label:!1}},{name:"condition",title:"显隐控制",setter:"SwitchSetter",extraProps:{defaultValue:!0,supportVariable:!0}}]}]}],component:{},supports:{},advanced:{}},snippets:[{title:"普通文本",screenshot:"",schema:{componentName:t,title:"普通文本",props:{content:"这是一段普通文本",fontSize:16,color:"#ffffff"},$dashboard:{rect:{width:120,height:40}}}},{title:"标题文本",screenshot:"",schema:{componentName:t,title:"标题文本",props:{content:"标题文本",fontSize:32,fontWeight:"bold",color:"#ffffff",textAlign:"center"},$dashboard:{rect:{width:200,height:60}}}},{title:"发光标题",screenshot:"",schema:{componentName:t,title:"发光标题",props:{content:"发光标题",fontSize:36,fontWeight:"bold",color:"#00d4ff",textAlign:"center",glowEnable:!0,glowColor:"#00d4ff",glowIntensity:1.5},$dashboard:{rect:{width:240,height:80}}}},{title:"链接文本",screenshot:"",schema:{componentName:t,title:"链接文本",props:{content:"点击跳转",fontSize:16,color:"#00d4ff",isLink:!0,href:"https://easy-editor-docs.vercel.app/",target:"_blank",underline:!0},$dashboard:{rect:{width:120,height:40}}}}]};e.meta=o});
2
- //# sourceMappingURL=meta.min.js.map
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).EasyEditorMaterialsTextMeta={})}(this,function(e){"use strict";const t=(e,t,a)=>({type:"group",title:e,setter:{componentName:"CollapseSetter",props:{icon:!1,...a}},items:t}),a={name:"nodeInfo",title:"节点信息",setter:"NodeInfoSetter",extraProps:{label:!1}},o="EasyEditorMaterialsText";const r={componentName:o,title:"文本",group:"basic",devMode:"proCode",npm:{package:"@easy-editor/materials-dashboard-text",version:"0.0.16",globalName:o,componentName:o},configure:{props:[{type:"group",title:"属性",setter:"TabSetter",items:[{type:"group",key:"config",title:"配置",items:[a,t("基础配置",[{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"}}]),t("组件配置",[{type:"group",title:"组件配置",setter:"SubTabSetter",items:[{type:"group",key:"content",title:"内容",items:[{name:"isLink",title:"作为链接",setter:"SwitchSetter",extraProps:{defaultValue:!1}},{name:"href",title:"链接地址",setter:"StringSetter"},{name:"target",title:"打开方式",setter:{componentName:"SelectSetter",props:{options:[{label:"新窗口",value:"_blank"},{label:"当前窗口",value:"_self"}]}},extraProps:{defaultValue:"_blank"}}]},{type:"group",key:"font",title:"字体",items:[{name:"fontSize",title:"字体大小",setter:"NumberSetter",extraProps:{defaultValue:16}},{name:"fontWeight",title:"字体粗细",setter:{componentName:"SelectSetter",props:{options:[{label:"正常",value:"normal"},{label:"粗体",value:"bold"}]}},extraProps:{defaultValue:"normal"}},{name:"color",title:"颜色",setter:"ColorSetter",extraProps:{defaultValue:"#ffffff"}},{name:"lineHeight",title:"行高",setter:"NumberSetter",extraProps:{defaultValue:1.5}}]},{type:"group",key:"align",title:"对齐",items:[{name:"textAlign",title:"水平对齐",setter:{componentName:"SegmentedSetter",props:{options:[{label:"左",value:"left"},{label:"中",value:"center"},{label:"右",value:"right"}]}},extraProps:{defaultValue:"left"}},{name:"verticalAlign",title:"垂直对齐",setter:{componentName:"SegmentedSetter",props:{options:[{label:"上",value:"top"},{label:"中",value:"middle"},{label:"下",value:"bottom"}]}},extraProps:{defaultValue:"middle"}}]},{type:"group",key:"effect",title:"效果",items:[{name:"underline",title:"下划线",setter:"SwitchSetter",extraProps:{defaultValue:!1}},{name:"glowEnable",title:"发光效果",setter:"SwitchSetter",extraProps:{defaultValue:!1}},{name:"glowColor",title:"发光颜色",setter:"ColorSetter",extraProps:{defaultValue:"#00d4ff"}}]}]}],{padding:"6px 16px 12px"})]},{type:"group",key:"data",title:"数据",items:[a,{name:"$data",title:"数据配置",setter:{componentName:"DataSetter",props:{expectedFields:[{name:"text",label:"text",type:"string",required:!0,description:"文本内容"}],showPreview:!0,previewLimit:10}},extraProps:{label:!1}}]},{type:"group",key:"advanced",title:"高级",items:[a,t("事件绑定",[{name:"events",title:"事件",setter:{componentName:"EventSetter",props:{events:[{title:"点击事件",children:[{label:"点击",value:"onClick",description:"鼠标点击时触发"},{label:"双击",value:"onDoubleClick",description:"鼠标双击时触发"}]},{title:"鼠标事件",children:[{label:"鼠标进入",value:"onMouseEnter",description:"鼠标进入时触发"},{label:"鼠标离开",value:"onMouseLeave",description:"鼠标离开时触发"}]}]}}}]),t("高级配置",[{title:"条件渲染",setter:"SwitchSetter",extraProps:{supportVariable:!0,getValue:e=>e.getNode().getExtraPropValue("condition"),setValue(e,t){e.getNode().setExtraProp("condition",t)}}}])]}]}],component:{},supports:{},advanced:{}},snippets:[{title:"普通文本",screenshot:"",schema:{componentName:o,title:"普通文本",props:{fontSize:16,color:"#ffffff",rotation:0,opacity:100,background:"transparent",$data:{sourceType:"static",staticData:[{text:"发光标题"}],fieldMappings:[{componentField:"text",sourceField:"text"}]}},$dashboard:{rect:{width:120,height:40}}}},{title:"标题文本",screenshot:"",schema:{componentName:o,title:"标题文本",props:{fontSize:32,fontWeight:"bold",color:"#ffffff",textAlign:"center",rotation:0,opacity:100,background:"transparent",$data:{sourceType:"static",staticData:[{text:"发光标题"}],fieldMappings:[{componentField:"text",sourceField:"text"}]}},$dashboard:{rect:{width:200,height:60}}}},{title:"发光标题",screenshot:"",schema:{componentName:o,title:"发光标题",props:{fontSize:36,fontWeight:"bold",color:"#00d4ff",textAlign:"center",glowEnable:!0,glowColor:"#00d4ff",glowIntensity:1.5,rotation:0,opacity:100,background:"transparent",$data:{sourceType:"static",staticData:[{text:"发光标题"}],fieldMappings:[{componentField:"text",sourceField:"text"}]}},$dashboard:{rect:{width:240,height:80}}}},{title:"链接文本",screenshot:"",schema:{componentName:o,title:"链接文本",props:{fontSize:16,color:"#00d4ff",isLink:!0,href:"https://easy-editor-docs.vercel.app/",target:"_blank",underline:!0,rotation:0,opacity:100,background:"transparent",$data:{sourceType:"static",staticData:[{text:"发光标题"}],fieldMappings:[{componentField:"text",sourceField:"text"}]}},$dashboard:{rect:{width:120,height:40}}}},{title:"标签文本",screenshot:"",schema:{componentName:o,title:"标签文本",props:{content:"标签",fontSize:14,color:"#ffffff",textAlign:"center",verticalAlign:"middle",rotation:0,opacity:100,background:"rgba(0, 212, 255, 0.2)"},$dashboard:{rect:{width:80,height:32}}}}]};e.meta=r});
@@ -0,0 +1,10 @@
1
+ /**
2
+ * @easy-editor/easypack configuration
3
+ * @type {import('@easy-editor/easypack').EasypackConfig}
4
+ */
5
+ export default {
6
+ preset: 'material',
7
+ dev: {
8
+ port: 5001,
9
+ },
10
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@easy-editor/materials-dashboard-text",
3
- "version": "0.0.15",
3
+ "version": "0.0.16",
4
4
  "description": "Text component for EasyEditor dashboard",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",
@@ -39,25 +39,21 @@
39
39
  },
40
40
  "peerDependencies": {
41
41
  "@easy-editor/core": "*",
42
- "react": "^18 || ^19",
43
- "react-dom": "^18 || ^19",
44
42
  "@types/react": "^18 || ^19",
45
- "@types/react-dom": "^18 || ^19"
43
+ "@types/react-dom": "^18 || ^19",
44
+ "react": "^18 || ^19",
45
+ "react-dom": "^18 || ^19"
46
46
  },
47
47
  "dependencies": {
48
48
  "@easy-editor/materials-shared": "0.0.0"
49
49
  },
50
50
  "scripts": {
51
- "dev": "vite",
51
+ "dev": "easypack dev",
52
52
  "format": "biome format --write .",
53
53
  "lint": "biome check .",
54
54
  "build": "npm-run-all -nl build:*",
55
55
  "build:clean": "rimraf dist/",
56
- "build:js": "rollup -c",
57
- "build:types": "pnpm types",
58
- "types": "npm-run-all -nl types:*",
59
- "types:src": "tsc --project tsconfig.build.json",
60
- "test-types": "tsc --project tsconfig.test.json"
56
+ "build:js": "easypack build"
61
57
  },
62
58
  "module": "dist/index.esm.js",
63
59
  "unpkg": "dist/index.min.js"
Binary file
@@ -0,0 +1,58 @@
1
+ /**
2
+ * Text Component Styles
3
+ * 文本组件样式
4
+ */
5
+
6
+ .container {
7
+ display: flex;
8
+ width: 100%;
9
+ height: 100%;
10
+ }
11
+
12
+ .text {
13
+ display: inline-block;
14
+ word-break: break-word;
15
+ }
16
+
17
+ .link {
18
+ text-decoration: none;
19
+ cursor: pointer;
20
+ transition: opacity 0.2s ease;
21
+ }
22
+
23
+ .link:hover {
24
+ opacity: 0.8;
25
+ }
26
+
27
+ .underline {
28
+ text-decoration: underline;
29
+ }
30
+
31
+ /* 对齐方式 */
32
+ .alignLeft {
33
+ text-align: left;
34
+ justify-content: flex-start;
35
+ }
36
+
37
+ .alignCenter {
38
+ text-align: center;
39
+ justify-content: center;
40
+ }
41
+
42
+ .alignRight {
43
+ text-align: right;
44
+ justify-content: flex-end;
45
+ }
46
+
47
+ /* 垂直对齐 */
48
+ .valignTop {
49
+ align-items: flex-start;
50
+ }
51
+
52
+ .valignMiddle {
53
+ align-items: center;
54
+ }
55
+
56
+ .valignBottom {
57
+ align-items: flex-end;
58
+ }
@@ -0,0 +1,261 @@
1
+ /**
2
+ * Text Component
3
+ * 文本组件 - 支持普通文本、链接、标题、发光效果
4
+ */
5
+
6
+ import type { CSSProperties, Ref } from 'react'
7
+ import { useMemo } from 'react'
8
+ import { cn } from '@easy-editor/materials-shared'
9
+ import styles from './component.module.css'
10
+
11
+ export type TextAlign = 'left' | 'center' | 'right'
12
+ export type VerticalAlign = 'top' | 'middle' | 'bottom'
13
+
14
+ /** 数据配置类型(来自 DataSetter) */
15
+ interface DataConfig {
16
+ /** 数据源类型:具体数据 | 数据源 | 全局数据源 */
17
+ sourceType: 'static' | 'datasource' | 'global'
18
+ /** 静态数据(sourceType === 'static') */
19
+ staticData?: unknown[]
20
+ /** 数据源 ID(sourceType === 'datasource' | 'global') */
21
+ datasourceId?: string
22
+ /** 字段映射配置 */
23
+ fieldMappings?: Array<{
24
+ componentField: string
25
+ sourceField: string
26
+ }>
27
+ }
28
+
29
+ /** 根据路径从对象中获取值 */
30
+ function getValueByPath(obj: unknown, path: string): unknown {
31
+ if (!path) return obj
32
+ const keys = path.split('.')
33
+ let current: unknown = obj
34
+ for (const key of keys) {
35
+ if (current === null || current === undefined) return undefined
36
+ if (typeof current !== 'object') return undefined
37
+ current = (current as Record<string, unknown>)[key]
38
+ }
39
+ return current
40
+ }
41
+
42
+ /** 从数据源数据中提取数组 */
43
+ function extractDataFromSource(dsData: unknown): unknown[] {
44
+ if (dsData === undefined) return []
45
+
46
+ if (Array.isArray(dsData)) {
47
+ return dsData
48
+ }
49
+
50
+ if (dsData && typeof dsData === 'object') {
51
+ return [dsData]
52
+ }
53
+
54
+ return []
55
+ }
56
+
57
+ /** 应用字段映射 */
58
+ function applyFieldMappings(
59
+ rawData: unknown[],
60
+ mappings?: Array<{ componentField: string; sourceField: string }>,
61
+ ): Record<string, unknown>[] {
62
+ if (!mappings || mappings.length === 0) {
63
+ return rawData as Record<string, unknown>[]
64
+ }
65
+
66
+ return rawData.map(item => {
67
+ const result: Record<string, unknown> = {}
68
+ for (const { componentField, sourceField } of mappings) {
69
+ if (componentField && sourceField) {
70
+ result[componentField] = getValueByPath(item, sourceField)
71
+ }
72
+ }
73
+ return result
74
+ })
75
+ }
76
+
77
+ export interface TextProps {
78
+ ref?: Ref<HTMLDivElement>
79
+ /** 数据配置(来自 $data extraProp) */
80
+ $data?: DataConfig
81
+ /** 数据源数据(由渲染器 HOC 传递) */
82
+ __dataSource?: {
83
+ component: Record<string, unknown>
84
+ page: Record<string, unknown>
85
+ }
86
+ /** 字体大小 */
87
+ fontSize?: number
88
+ /** 字体粗细 */
89
+ fontWeight?: number | 'normal' | 'bold'
90
+ /** 字体家族 */
91
+ fontFamily?: string
92
+ /** 颜色 */
93
+ color?: string
94
+ /** 水平对齐 */
95
+ textAlign?: TextAlign
96
+ /** 垂直对齐 */
97
+ verticalAlign?: VerticalAlign
98
+ /** 行高 */
99
+ lineHeight?: number
100
+ /** 字间距 */
101
+ letterSpacing?: number
102
+ /** 是否为链接 */
103
+ isLink?: boolean
104
+ /** 链接地址 */
105
+ href?: string
106
+ /** 链接打开方式 */
107
+ target?: '_self' | '_blank'
108
+ /** 下划线 */
109
+ underline?: boolean
110
+ /** 发光效果 */
111
+ glowEnable?: boolean
112
+ /** 发光颜色 */
113
+ glowColor?: string
114
+ /** 发光强度 */
115
+ glowIntensity?: number
116
+ /** 旋转角度 */
117
+ rotation?: number
118
+ /** 不透明度 (0-100) */
119
+ opacity?: number
120
+ /** 背景颜色 */
121
+ background?: string
122
+ /** 显隐控制 */
123
+ condition?: boolean
124
+ /** 外部样式 */
125
+ style?: CSSProperties
126
+ }
127
+
128
+ const getAlignClass = (align: TextAlign): string => {
129
+ switch (align) {
130
+ case 'left':
131
+ return styles.alignLeft
132
+ case 'center':
133
+ return styles.alignCenter
134
+ case 'right':
135
+ return styles.alignRight
136
+ default:
137
+ return styles.alignLeft
138
+ }
139
+ }
140
+
141
+ const getValignClass = (align: VerticalAlign): string => {
142
+ switch (align) {
143
+ case 'top':
144
+ return styles.valignTop
145
+ case 'middle':
146
+ return styles.valignMiddle
147
+ case 'bottom':
148
+ return styles.valignBottom
149
+ default:
150
+ return styles.valignMiddle
151
+ }
152
+ }
153
+
154
+ export const Text: React.FC<TextProps> = ({
155
+ ref,
156
+ $data,
157
+ __dataSource,
158
+ fontSize = 16,
159
+ fontWeight = 'normal',
160
+ fontFamily = 'inherit',
161
+ color = '#ffffff',
162
+ textAlign = 'left',
163
+ verticalAlign = 'middle',
164
+ lineHeight = 1.5,
165
+ letterSpacing = 0,
166
+ isLink = false,
167
+ href = '',
168
+ target = '_blank',
169
+ underline = false,
170
+ glowEnable = false,
171
+ glowColor = '#00d4ff',
172
+ glowIntensity = 1,
173
+ rotation = 0,
174
+ opacity = 100,
175
+ background = 'transparent',
176
+ style: externalStyle,
177
+ }) => {
178
+ // 解析数据配置,获取实际显示内容
179
+ const resolvedContent = useMemo(() => {
180
+ if (!$data) return ''
181
+
182
+ let rawData: unknown[] = []
183
+
184
+ if ($data.sourceType === 'static') {
185
+ // 静态数据:直接使用
186
+ rawData = Array.isArray($data.staticData) ? $data.staticData : []
187
+ } else if ($data.sourceType === 'global' && $data.datasourceId) {
188
+ // 全局数据源:从页面数据源获取
189
+ const dsData = __dataSource?.page?.[$data.datasourceId]
190
+ rawData = extractDataFromSource(dsData)
191
+ } else if ($data.sourceType === 'datasource' && $data.datasourceId) {
192
+ // 组件数据源:从组件数据源获取
193
+ const dsData = __dataSource?.component?.[$data.datasourceId]
194
+ rawData = extractDataFromSource(dsData)
195
+ }
196
+
197
+ // 应用字段映射
198
+ const mappedData = applyFieldMappings(rawData, $data.fieldMappings)
199
+
200
+ // 取第一条数据的 text 字段作为显示内容
201
+ if (mappedData.length > 0 && mappedData[0].text !== undefined) {
202
+ return String(mappedData[0].text)
203
+ }
204
+
205
+ return ''
206
+ }, [$data, __dataSource])
207
+
208
+ // 计算发光效果
209
+ const textShadow = glowEnable
210
+ ? `0 0 ${10 * glowIntensity}px ${glowColor}, 0 0 ${20 * glowIntensity}px ${glowColor}, 0 0 ${30 * glowIntensity}px ${glowColor}`
211
+ : undefined
212
+
213
+ const textStyle: CSSProperties = {
214
+ fontSize,
215
+ fontWeight,
216
+ fontFamily,
217
+ color,
218
+ lineHeight,
219
+ letterSpacing,
220
+ textShadow,
221
+ }
222
+
223
+ // 容器样式:旋转、透明度、背景
224
+ const containerStyle: CSSProperties = {
225
+ ...externalStyle,
226
+ transform: rotation !== 0 ? `rotate(${rotation}deg)` : undefined,
227
+ opacity: opacity / 100,
228
+ backgroundColor: background,
229
+ }
230
+
231
+ const containerClass = cn(
232
+ styles.container,
233
+ getAlignClass(textAlign),
234
+ getValignClass(verticalAlign),
235
+ )
236
+
237
+ const textClass = cn(styles.text, isLink && styles.link, underline && styles.underline)
238
+
239
+ // 链接模式
240
+ if (isLink && href) {
241
+ const relValue = target === '_blank' ? 'noopener noreferrer' : ''
242
+ return (
243
+ <div className={containerClass} ref={ref} style={containerStyle}>
244
+ <a className={textClass} href={href} rel={relValue} style={textStyle} target={target}>
245
+ {resolvedContent}
246
+ </a>
247
+ </div>
248
+ )
249
+ }
250
+
251
+ // 普通文本
252
+ return (
253
+ <div className={containerClass} ref={ref} style={containerStyle}>
254
+ <span className={textClass} style={textStyle}>
255
+ {resolvedContent}
256
+ </span>
257
+ </div>
258
+ )
259
+ }
260
+
261
+ export default Text