epic-designer/dist/core/src/components/designer/hooks/useDesigner.cjs

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

"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("vue"),I=require("../../../../../hooks/src/common/clipboard.cjs");require("@vueuse/core");require("../../../../../hooks/src/store/index.cjs");;/* empty css                                             */;/* empty css                                                         */;/* empty css                                                              */const D=require("../../../../../manager/src/pageManager.cjs"),g=require("../../../../../manager/src/pluginManager.cjs"),C=require("../../../../../manager/src/revoke.cjs");;/* empty css                                                       */require("vue-draggable-plus");const a=require("../../../../../utils/src/common/data.cjs");require("../../../../../git/epic/epic-designer/node_modules/.pnpm/jsep@1.4.0/node_modules/jsep/dist/jsep.cjs");let d={schemas:[{id:"root",label:"页面",props:{style:{padding:"16px"}},type:"page",children:[]}],script:`const { defineExpose, find } = epic;

function test (){
    console.log('test')
}

// 通过defineExpose暴露的函数或者属性
defineExpose({
 test
})`};function B(s,h){const M=m.ref(!1),c=D.createPageManager(),t=c.pageSchema,i=m.reactive({disabledHover:!1,hoverNode:null,matched:[],selectedNode:null}),f=C.useRevoke(t,i,l),{duplicate:v}=I.useClipboard(t,l,e=>f.push(e)),b={desktop:{},mobile:{mode:"mobile",width:"390px"},tablet:{mode:"tablet",width:"780px"}};m.watchEffect(()=>{s.defaultSchema?d=s.defaultSchema:s.formMode&&(d.schemas=g.pluginManager.designer.formSchema,g.pluginManager.component.hide("form")),s.formMode||g.pluginManager.component.show("form");const e=s.canvasMode??"desktop";t.canvas={mode:e,...b[e],...d.canvas},q(),c.setDefaultComponentIds(d.schemas)}),c.setDesignMode();function q(){if(!s.formMode||!s.tableJson)return;const e=s.tableJson.find(o=>o.tableType==="parent");if(!e)return;const n=a.findSchemas(t.schemas,o=>o.type==="form");n.length===1&&(n[0].props.name=e.tableName)}function y(){var e;return v((e=i.selectedNode)==null?void 0:e.id)}function N(){var u;if(!((u=i.selectedNode)!=null&&u.id)||i.selectedNode.id===t.schemas[0].id)return;const e=a.findSchemaInfoById(t.schemas,i.selectedNode.id);if(!e)return!1;let{index:n,list:o}=e;o.splice(n,1),n===o.length&&n--,l(o[n]),f.push("删除组件")}function l(e){if(e||(e=t.schemas[0]),p(e)){const o=a.getMatchedById(c.pageSchema.schemas,(e==null?void 0:e.id)||""),u=o.length-2;for(let r=u;r>=0;r--)if(!p(o[r])){e=o[r];break}}const n=a.findSchemaById(t.schemas,(e==null?void 0:e.id)||"");i.matched=a.getMatchedById(t.schemas,(n==null?void 0:n.id)||""),i.selectedNode=n}function p(e){var n;return((n=e.status)==null?void 0:n.lock)||g.pluginManager.component.getLocked(e.type)}function S(e=null){var n;if(!e||i.disabledHover)return i.hoverNode=null,!1;if(p(e)){const o=a.getMatchedById(c.pageSchema.schemas,(e==null?void 0:e.id)||""),u=o.length-2;for(let r=u;r>=0;r--)if(!p(o[r])){e=o[r];break}}if((e==null?void 0:e.id)===((n=i.hoverNode)==null?void 0:n.id))return!1;i.hoverNode=e}function k(){a.deepEqual(t.schemas,d.schemas)&&t.script===d.script||(a.deepCompareAndModify(t.schemas,d.schemas),t.script=d.script,l(t.schemas[0]),f.push("重置操作"),h("reset",t))}function x(){t.schemas=a.deepClone(d.schemas),l(t.schemas[0]),f.push("初始化")}return x(),{handleDelete:N,handleDuplicate:y,pageManager:c,pageSchema:t,ready:M,reset:k,revoke:f,setHoverNode:S,setSelectedNode:l,state:i}}exports.useDesigner=B;