2 lines
9.8 KiB
JavaScript
2 lines
9.8 KiB
JavaScript
import{d as F,N as g,r as S,q as B,h,c as u,y as w,z as v,u as a,a as m,t as x,e as c,w as r,F as W,G as H,A as C,x as j,R as k,b as D,X as G,Y as I,cD as $,_ as q}from"./index-4dcc0234.js";/* empty css *//* empty css *//* empty css */import"./el-tooltip-4ed993c7.js";/* empty css */import{_ as J}from"./index.vue_vue_type_script_setup_true_lang-a631d3b2.js";import{_ as M}from"./index-742b412a.js";/* empty css */import{_ as P}from"./index.vue_vue_type_script_setup_true_lang-9285296e.js";import"./el-form-item-4ed993c7.js";import{u as X}from"./diy-06b37a1b.js";const Y={class:"content-wrap rubik-cube"},K={class:"edit-attr-item-wrap"},Q={class:"mb-[10px]"},Z={class:"selected-template-list"},ee=["onClick"],ie={class:"edit-attr-item-wrap"},te={class:"mb-[10px]"},le={class:"layout"},ae={class:"have-preview-image"},se=["src"],oe={class:"style-wrap"},ne={class:"edit-attr-item-wrap"},de={class:"mb-[10px]"},me=F({__name:"edit-rubik-cube",setup(pe,{expose:N}){const s=X();s.editComponent.ignore=[],s.editComponent.verify=t=>{const e={code:!0,message:""};return s.value[t].list.forEach(i=>{if(i.imageUrl==="")return e.code=!1,e.message=g("imageUrlTip"),e}),e};const f=S([{name:"1行2个",src:"iconyihangliangge",className:"row1-of2",dimensionScale:[{desc:"宽度50%",size:"200px * 200px",name:"图一"},{desc:"宽度50%",size:"200px * 200px",name:"图二"}],descAux:"选定布局区域，在下方添加图片，建议添加尺寸一致的图片，宽度最小建议为：200px"},{name:"1行3个",src:"iconyihangsange",className:"row1-of3",dimensionScale:[{desc:"宽度33.33%",size:"200px * 200px",name:"图一"},{desc:"宽度33.33%",size:"200px * 200px",name:"图二"},{desc:"宽度33.33%",size:"200px * 200px",name:"图三"}],descAux:"选定布局区域，在下方添加图片，建议添加尺寸一致的图片，宽度最小建议为：130px"},{name:"1行4个",src:"iconyihangsige",className:"row1-of4",dimensionScale:[{desc:"宽度25%",size:"200px * 200px",name:"图一"},{desc:"宽度25%",size:"200px * 200px",name:"图二"},{desc:"宽度25%",size:"200px * 200px",name:"图三"},{desc:"宽度25%",size:"200px * 200px",name:"图四"}],descAux:"选定布局区域，在下方添加图片，建议添加尺寸一致的图片，宽度最小建议为：100px"},{name:"2左2右",src:"iconmofang-liangzuoliangyou",className:"row2-lt-of2-rt",dimensionScale:[{desc:"宽度50%",size:"200px * 200px",name:"图一"},{desc:"宽度50%",size:"200px * 200px",name:"图二"},{desc:"宽度50%",size:"200px * 200px",name:"图三"},{desc:"宽度50%",size:"200px * 200px",name:"图四"}],descAux:"选定布局区域，在下方添加图片，建议添加尺寸一致的图片，宽度最小建议为：200px"},{name:"1左2右",src:"iconmofang-yizuoliangyou",className:"row1-lt-of2-rt",dimensionScale:[{desc:"宽度50% * 高度100%",size:"200px * 400px",name:"图一"},{desc:"宽度50% * 高度50%",size:"200px * 200px",name:"图二"},{desc:"宽度50% * 高度50%",size:"200px * 200px",name:"图三"}],descAux:"选定布局区域，在下方添加图片，宽度最小建议为：200px，右侧两张图片高度一致，左侧图片高度为右侧两张图片高度之和（例：左侧图片尺寸：200px * 300px，右侧两张图片尺寸：200px * 150px）"},{name:"1上2下",src:"iconmofang-yishangliangxia",className:"row1-tp-of2-bm",dimensionScale:[{desc:"宽度100% * 高度50%",size:"400px * 200px",name:"图一"},{desc:"宽度50% * 高度50%",size:"200px * 200px",name:"图二"},{desc:"宽度50% * 高度50%",size:"200px * 200px",name:"图三"}],descAux:"选定布局区域，在下方添加图片，上方一张图片的宽度为下方两张图片宽度之和，下放两张图片尺寸一致，高度可根据实际需求自行确定（例：上方图片尺寸：400px * 150px，下方两张图片尺寸：200px * 150px）"},{name:"1左3右",src:"iconxuanzemoban-yizuosanyou",className:"row1-lt-of1-tp-of2-bm",dimensionScale:[{desc:"宽度50% * 高度100%",size:"200px * 400px",name:"图一"},{desc:"宽度50% * 高度50%",size:"200px * 200px",name:"图二"},{desc:"宽度25% * 高度50%",size:"100px * 200px",name:"图三"},{desc:"宽度25% * 高度50%",size:"100px * 200px",name:"图四"}],descAux:"选定布局区域，在下方添加图片，左右两侧内容宽高相同，右侧上下区域高度各占50%，右侧内容下半部分两张图片的宽度相同，各占右侧内容宽度的50%（例：左侧图片尺寸：200px * 400px，右侧上半部分图片尺寸：200px * 200px，右侧下半部分两张图片尺寸：100px * 200px）"}]),o=S([]),b=B(()=>{let t;return f.value.forEach(e=>{e.className==s.editComponent.mode&&(t=e,o.value=JSON.parse(JSON.stringify(s.editComponent.list)),e.className=="row2-lt-of2-rt"?O():e.className=="row1-lt-of2-rt"?T():e.className=="row1-tp-of2-bm"?A():e.className=="row1-lt-of1-tp-of2-bm"?L():R(e.className))}),t}),E=t=>{for(let e=0;e<f.value.length;e++)if(e==t){s.editComponent.mode=f.value[e].className;const i=f.value[e].dimensionScale.length;if(i>s.editComponent.list.length)for(let l=0;l<i;l++)l+1>s.editComponent.list.length&&s.editComponent.list.push({imageUrl:"",imgWidth:0,imgHeight:0,link:{name:""}});else if(i!=s.editComponent.list.length)for(let l=0;l<s.editComponent.list.length;l++)l+1>i&&(s.editComponent.list.splice(l,1),l=0)}},V=t=>{U(!0)},U=(t=!1)=>{s.editComponent.list.forEach((e,i)=>{const l=new Image;l.src=k(e.imageUrl),l.onload=async()=>{e.imgWidth=l.width,e.imgHeight=l.height}})};N({});const R=t=>{let e=0,i=2,l="calc(100% / 2)";t=="row1-of3"&&(i=3,l="calc(100% / 3)"),t=="row1-of4"&&(i=4,l="calc(100% / 4)"),o.value.forEach((d,y)=>{const z=d.imgHeight/d.imgWidth,_=330;d.imgWidth=_/i,d.imgHeight=d.imgWidth*z,(e==0||e<d.imgHeight)&&(e=d.imgHeight)}),o.value.forEach((d,y)=>{d.widthStyle=l,d.imgHeight=e})},O=()=>{let t=0,e=0;o.value.forEach((i,l)=>{const d=i.imgHeight/i.imgWidth;i.imgWidth=330,i.imgWidth=i.imgWidth/2,i.imgHeight=i.imgWidth*d,l<=1?(t==0||t<i.imgHeight)&&(t=i.imgHeight):l>1&&(e==0||e<i.imgHeight)&&(e=i.imgHeight)}),o.value.forEach((i,l)=>{i.imgWidth="calc(100% / 2)",i.widthStyle=i.imgWidth,l<=1?i.imgHeight=t:l>1&&(i.imgHeight=e)})},T=()=>{let t=0;o.value[1].imgWidth,o.value[2].imgWidth,o.value.forEach((e,i)=>{if(i==0){const l=e.imgHeight/e.imgWidth;e.imgWidth=330,e.imgWidth=e.imgWidth/2,e.imgHeight=e.imgWidth*l,t=e.imgHeight/2,e.imgWidth+="px"}else e.imgWidth=o.value[0].imgWidth,e.imgHeight=t})},A=()=>{let t=0;o.value.forEach((e,i)=>{const l=e.imgHeight/e.imgWidth;i==0?e.imgWidth=330:i>0&&(e.imgWidth=330,e.imgWidth=e.imgWidth/2),e.imgHeight=e.imgWidth*l,i>0&&(t==0||t<e.imgHeight)&&(t=e.imgHeight)}),o.value.forEach((e,i)=>{e.imgWidth+="px",e.widthStyle=e.imgWidth,i>0&&(e.imgHeight=t)})},L=()=>{o.value.forEach((t,e)=>{if(e==0){const i=t.imgHeight/t.imgWidth;t.imgWidth=330,t.imgWidth=t.imgWidth/2,t.imgHeight=t.imgWidth*i}else e==1?(t.imgWidth=o.value[0].imgWidth,t.imgHeight=o.value[0].imgHeight/2):e>1&&(t.imgWidth=o.value[0].imgWidth/2,t.imgHeight=o.value[1].imgHeight)}),o.value.forEach((t,e)=>{t.imgWidth+="px"})};return(t,e)=>{const i=G,l=P,d=I,y=M,z=J,_=$;return h(),u(W,null,[w(m("div",Y,[m("div",K,[m("h3",Q,x(a(g)("selectStyle")),1),c(d,{"label-width":"80px",class:"px-[10px]"},{default:r(()=>[c(i,{label:a(g)("template")},{default:r(()=>[m("span",null,x(a(b).name),1)]),_:1},8,["label"]),m("ul",Z,[(h(!0),u(W,null,H(f.value,(n,p)=>(h(),u("li",{key:p,class:C([n.className==a(s).editComponent.mode?"selected":""]),onClick:ge=>E(p)},[c(l,{name:"iconfont-"+n.src,size:"16px"},null,8,["name"])],10,ee))),128))])]),_:1})]),m("div",ie,[m("h3",te,x(a(g)("rubikCubeLayout")),1),c(d,{"label-width":"80px",class:"px-[10px]"},{default:r(()=>[m("ul",le,[(h(!0),u(W,null,H(a(b).dimensionScale,(n,p)=>(h(),u("li",{key:p,class:C([a(b).className]),style:j({width:o.value[p].widthStyle,height:o.value[p].imgHeight+"px"})},[w(m("div",ae,[m("img",{class:"!w-full !h-full",src:a(k)(a(s).editComponent.list[p].imageUrl)},null,8,se)],512),[[v,a(s).editComponent.list[p].imageUrl]]),w(m("div",{class:C(["empty",[a(b).className]])},[m("p",null,x(n.name),1),m("p",null,x(n.desc),1)],2),[[v,!a(s).editComponent.list[p].imageUrl]])],6))),128))]),(h(!0),u(W,null,H(a(s).editComponent.list,n=>(h(),u("div",{key:n.id,class:"item-wrap p-[10px] pb-0 relative border border-dashed border-gray-300 mb-[16px]"},[c(i,{label:a(g)("image")},{default:r(()=>[c(y,{modelValue:n.imageUrl,"onUpdate:modelValue":p=>n.imageUrl=p,limit:1,onChange:V},null,8,["modelValue","onUpdate:modelValue"])]),_:2},1032,["label"]),c(i,{label:a(g)("link")},{default:r(()=>[c(z,{modelValue:n.link,"onUpdate:modelValue":p=>n.link=p},null,8,["modelValue","onUpdate:modelValue"])]),_:2},1032,["label"])]))),128))]),_:1})])],512),[[v,a(s).editTab=="content"]]),w(m("div",oe,[m("div",ne,[m("h3",de,x(a(g)("rubikCubeStyle")),1),c(d,{"label-width":"80px",class:"px-[10px]"},{default:r(()=>[c(i,{label:a(g)("imageGap")},{default:r(()=>[c(_,{modelValue:a(s).editComponent.imageGap,"onUpdate:modelValue":e[0]||(e[0]=n=>a(s).editComponent.imageGap=n),"show-input":"",size:"small",class:"ml-[10px] horz-blank-slider",max:30},null,8,["modelValue"])]),_:1},8,["label"]),c(i,{label:a(g)("topRounded")},{default:r(()=>[c(_,{modelValue:a(s).editComponent.topElementRounded,"onUpdate:modelValue":e[1]||(e[1]=n=>a(s).editComponent.topElementRounded=n),"show-input":"",size:"small",class:"ml-[10px] horz-blank-slider",max:50},null,8,["modelValue"])]),_:1},8,["label"]),c(i,{label:a(g)("bottomRounded")},{default:r(()=>[c(_,{modelValue:a(s).editComponent.bottomElementRounded,"onUpdate:modelValue":e[2]||(e[2]=n=>a(s).editComponent.bottomElementRounded=n),"show-input":"",size:"small",class:"ml-[10px] horz-blank-slider",max:50},null,8,["modelValue"])]),_:1},8,["label"])]),_:1})]),D(t.$slots,"style",{},void 0,!0)],512),[[v,a(s).editTab=="style"]])],64)}}});const ce=q(me,[["__scopeId","data-v-c697a2f6"]]),He=Object.freeze(Object.defineProperty({__proto__:null,default:ce},Symbol.toStringTag,{value:"Module"}));export{He as _};
|