gepic/dist/core/components/designer/src/modules/editContainer/toolbar.vue.cjs

基于vue3的设计器,可视化开发页面表单

"use strict";const e=require("vue"),q=require("../../../../../../utils/manager/pluginManager.cjs");require("@vueuse/core");const M=require("../../../../../../hooks/store/index.cjs"),s=require("../../../../../../utils/common/data.cjs"),k=require("../../../../icon/src/icon.vue.cjs"),O=require("./previewJson.vue.cjs"),D={class:"epic-edit-toolbar flex items-center justify-between px-2"},J={class:"flex-1 h-full flex items-center"},A={key:0,class:"epic-divider"},L=["title","onClick"],R={class:"flex-1 h-full flex items-center justify-end"},z={key:0,class:"flex items-center ml-12px"},P={class:"pr-8px w-82px cursor-pointer"},T={class:"epic-device h-28px items-center gap-1 rounded-md border p-2px flex"},U=["title","onClick"],H=e.defineComponent({__name:"toolbar",setup(I){const _=q.pluginManager.getComponent("select"),{canvasScale:d,disabledZoom:g}=M.useStore(),c=e.inject("pageSchema"),l=e.inject("designer"),r=e.inject("revoke"),u=e.inject("designerProps"),p=e.ref(null),x=[{icon:"icon--epic--computer-outline-rounded",title:"pc",key:"pc"},{icon:"icon--epic--tablet-android-outline-rounded",title:"平板",key:"pad"},{icon:"icon--epic--phone-iphone-outline-sharp",title:"手机",key:"mobile"}],y=e.computed(()=>[{icon:"icon--epic--code",title:"查看数据",on:w},{icon:"icon--epic--exit-to-app-rounded",title:"导入数据",on:S},{icon:"icon--epic--trash",title:"清空",on:l.reset},{icon:"icon--epic--undo",title:"撤销",on:N,disabled:!r.recordList.value.length,divider:!0},{icon:"icon--epic--redo",title:"重做",on:V,disabled:!r.undoList.value.length},{icon:"icon--epic--eye",title:"预览",show:()=>u.value.hiddenHeader,on:l.preview,divider:!0},{icon:"icon--epic--save-outline-rounded",title:"保存",show:()=>u.value.hiddenHeader,on:l.save}]),C={pc:{},pad:{width:"780px",mode:"pad"},mobile:{width:"390px",mode:"mobile"}},m=e.computed({get(){var t;return((t=c.canvas)==null?void 0:t.mode)??"pc"},set(t){l.handleToggleDeviceMode(t),c.canvas=C[t]}}),v=e.ref(null),a=e.computed({get(){return`${(d.value*100).toFixed(0)}%`},set(t){const o=parseFloat(t);d.value=o/100}}),b=[{label:"60%",value:"60%"},{label:"80%",value:"80%"},{label:"100%",value:"100%"},{label:"120%",value:"120%"},{label:"140%",value:"140%"}];function h(t){return typeof t=="function"?t():!0}function N(){const t=r.undo();t&&(s.deepCompareAndModify(c.schemas,t),l.setCheckedNode(c.schemas[0]))}function V(){const t=r.redo();t&&(s.deepCompareAndModify(c.schemas,t),l.setCheckedNode(c.schemas[0]))}function w(){p.value.handleOpen()}function S(){var t;(t=v.value)==null||t.click()}function B(t){var i;const o=(i=t.target.files)==null?void 0:i[0];if(!o)return;t.target.value=null;const n=new FileReader;n.readAsText(o),n.onload=j=>{var f;E((f=j.target)==null?void 0:f.result)}}function E(t){try{let o=JSON.parse(t??"");o.schemas||(o=s.convertKFormData(o)),s.deepCompareAndModify(c,o),l.handleImported(o),l.setCheckedNode(c.schemas[0])}catch(o){console.error(o)}}function F(t){l.handleToggleDeviceMode(t),m.value=t}return(t,o)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createElementVNode("div",D,[e.createElementVNode("div",J,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(y.value,(n,i)=>(e.openBlock(),e.createElementBlock(e.Fragment,{key:i},[n.divider&&h(n.show)?(e.openBlock(),e.createElementBlock("div",A)):e.createCommentVNode("",!0),h(n.show)?(e.openBlock(),e.createElementBlock("div",{key:1,title:n.title,class:e.normalizeClass(["epic-action-item text-base h-90% px-10px flex items-center cursor-pointer",{disabled:n.disabled}]),onClick:n.on},[e.createVNode(e.unref(k),{name:n.icon},null,8,["name"])],10,L)):e.createCommentVNode("",!0)],64))),128))]),e.withDirectives(e.createElementVNode("input",{ref_key:"fileRef",ref:v,type:"file",accept:".json,.txt",onChange:B},null,544),[[e.vShow,!1]]),e.createElementVNode("div",R,[e.unref(g)?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",z,[e.createElementVNode("div",P,[e.createVNode(e.unref(_),{value:a.value,"onUpdate:value":o[0]||(o[0]=n=>a.value=n),modelValue:a.value,"onUpdate:modelValue":o[1]||(o[1]=n=>a.value=n),options:b,size:"small"},null,8,["value","modelValue"])])])),e.createElementVNode("div",T,[(e.openBlock(),e.createElementBlock(e.Fragment,null,e.renderList(x,n=>e.createElementVNode("div",{key:n.key,title:n.title,class:e.normalizeClass(["epic-device-item h-full px-1 flex items-center cursor-pointer text-base transition-colors rounded-sm",{checked:n.key===m.value}]),onClick:i=>F(n.key)},[e.createVNode(e.unref(k),{name:n.icon},null,8,["name"])],10,U)),64))])])]),e.createVNode(O,{ref_key:"previewJson",ref:p},null,512)],64))}});module.exports=H;