@maketribe/ms-app 3.2.26 → 3.2.28

package/dist/esm/components/basic/dynamic-form-panel/DynamicFormPanel.js

@@ -1,5 +1,6 @@
 import { defineComponent, ref, resolveComponent, h } from "vue";
 import { ElFormItem, ElForm } from "element-plus";
+import { ImageUploadContext } from "../../../modules/ms/image-upload-context/index.js";
 const DynamicFormPanel = /* @__PURE__ */ defineComponent({
   name: "DynamicFormPanel",
   props: {
@@ -13,33 +14,54 @@ const DynamicFormPanel = /* @__PURE__ */ defineComponent({
   setup: (props, {
     emit
   }) => {
-    var _a;
     const dataRef = ref(props.data);
-    const formItems = (_a = props.options) == null ? void 0 : _a.map((item) => {
-      const component = typeof item.component == "string" ? resolveComponent(item.component) : item.component;
-      return h(ElFormItem, {
-        label: item.title,
-        prop: item.name
-      }, {
-        default: () => {
-          return [h(component, {
-            ...item.props,
-            "modelValue": dataRef.value[item.name],
-            "onUpdate:modelValue": (v) => {
-              dataRef.value[item.name] = v;
-            }
-          })];
+    return () => {
+      var _a;
+      const formItems = (_a = props.options) == null ? void 0 : _a.filter((item) => {
+        if (item.condition) {
+          return item.condition(dataRef.value);
         }
+        return true;
+      }).map((item) => {
+        const resloveComponent = typeof item.component == "string" ? resolveComponent(item.component) : item.component;
+        let defaultSlot = () => [];
+        if (item.component == "el-radio-group") {
+          defaultSlot = () => item.props.data.map((dt) => {
+            return h(resolveComponent("el-radio-button"), {
+              label: dt.label,
+              value: dt.value
+            });
+          });
+        } else if (item.component == "MKUploadImage") {
+          if (item.props.cutSize) {
+            item.props.uploadContext = new ImageUploadContext(item.props.cutSize);
+          }
+        }
+        return h(ElFormItem, {
+          label: item.title,
+          prop: item.name
+        }, {
+          default: () => {
+            return [h(resloveComponent, {
+              ...item.props,
+              "modelValue": dataRef.value[item.name],
+              "onUpdate:modelValue": (v) => {
+                dataRef.value[item.name] = v;
+              }
+            }, {
+              default: defaultSlot
+            })];
+          }
+        });
       });
-    });
-    return () => {
       return h(ElForm, {
         labelPosition: "top",
         model: props.data,
         labelWidth: "auto",
         style: {
           height: "600px",
-          overflow: "auto"
+          overflow: "auto",
+          padding: "10px"
         }
       }, {
         default: () => {

package/dist/esm/components/basic/dynamic-form-panel/DynamicFormPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"DynamicFormPanel.js","sources":["../../../../../src/components/basic/dynamic-form-panel/DynamicFormPanel.tsx"],"sourcesContent":["import { defineComponent,resolveComponent,h,ref } from \"vue\"\r\nimport {  ElButton,ElForm,ElFormItem,ElCollapse,ElCollapseItem,ElInput } from \"element-plus\";\r\nimport { type DynamicFormItemType } from \"./type\"\r\n\r\nexport default defineComponent({\r\n  name:\"DynamicFormPanel\",\r\n  props:{\r\n    data:{ type:Object },\r\n    options:{ type:Array<DynamicFormItemType> }\r\n  },\r\n  setup:(props,{ emit })=>{\r\n\r\n    // 编辑\r\n    const dataRef = ref<any>(props.data);\r\n\r\n    // 生成的表单项\r\n    const formItems = props.options?.map(item=>{\r\n\r\n      const component = typeof item.component == \"string\" ? resolveComponent(item.component) : item.component;\r\n\r\n      return h(ElFormItem,{ \r\n        label:item.title,prop:item.name,\r\n      },{\r\n        default:()=>{\r\n          return [\r\n            h(component,{ \r\n              ...item.props,\r\n              \"modelValue\" : dataRef.value[item.name],\r\n              \"onUpdate:modelValue\" : (v:any) => {\r\n                dataRef.value[item.name] = v;\r\n              }\r\n            })\r\n          ]\r\n        }\r\n      })\r\n    });\r\n\r\n    return ()=>{\r\n      return h(ElForm,{ \r\n        labelPosition:\"top\",model:props.data,labelWidth:\"auto\",\r\n        style:{ height:\"600px\",overflow:\"auto\" }\r\n      },{\r\n        default:()=>{\r\n          return formItems\r\n        }\r\n      })\r\n    }\r\n  }\r\n});\r\n"],"names":["defineComponent","name","props","data","type","Object","options","Array","setup","emit","dataRef","ref","formItems","map","item","component","resolveComponent","h","ElFormItem","label","title","prop","default","value","v","ElForm","labelPosition","model","labelWidth","style","height","overflow"],"mappings":";;AAIA,MAAeA,mDAAgB;AAAA,EAC7BC,MAAK;AAAA,EACLC,OAAM;AAAA,IACJC,MAAK;AAAA,MAAEC,MAAKC;AAAAA,IAAQ;AAAA,IACpBC,SAAQ;AAAA,MAAEF,MAAKG;AAAAA,IAA2B;AAAA,EAC3C;AAAA,EACDC,OAAMA,CAACN,OAAM;AAAA,IAAEO;AAAAA,EAAK,MAAI;;AAGtB,UAAMC,UAAUC,IAAST,MAAMC,IAAI;AAGnC,UAAMS,aAAYV,WAAMI,YAANJ,mBAAeW,IAAIC,UAAM;AAEzC,YAAMC,YAAY,OAAOD,KAAKC,aAAa,WAAWC,iBAAiBF,KAAKC,SAAS,IAAID,KAAKC;AAE9F,aAAOE,EAAEC,YAAW;AAAA,QAClBC,OAAML,KAAKM;AAAAA,QAAMC,MAAKP,KAAKb;AAAAA,MAC7B,GAAE;AAAA,QACAqB,SAAQA,MAAI;AACV,iBAAO,CACLL,EAAEF,WAAU;AAAA,YACV,GAAGD,KAAKZ;AAAAA,YACR,cAAeQ,QAAQa,MAAMT,KAAKb,IAAI;AAAA,YACtC,uBAAyBuB,OAAU;AACjCd,sBAAQa,MAAMT,KAAKb,IAAI,IAAIuB;AAAAA,YAC7B;AAAA,UACD,CAAA,CAAC;AAAA,QAEN;AAAA,MACF,CAAC;AAAA,IACH;AAEA,WAAO,MAAI;AACT,aAAOP,EAAEQ,QAAO;AAAA,QACdC,eAAc;AAAA,QAAMC,OAAMzB,MAAMC;AAAAA,QAAKyB,YAAW;AAAA,QAChDC,OAAM;AAAA,UAAEC,QAAO;AAAA,UAAQC,UAAS;AAAA,QAAO;AAAA,MACzC,GAAE;AAAA,QACAT,SAAQA,MAAI;AACV,iBAAOV;AAAAA,QACT;AAAA,MACF,CAAC;AAAA;EAEL;AACF,CAAC;"}
+{"version":3,"file":"DynamicFormPanel.js","sources":["../../../../../src/components/basic/dynamic-form-panel/DynamicFormPanel.tsx"],"sourcesContent":["import { defineComponent,resolveComponent,h,ref } from \"vue\"\r\nimport {  ElButton,ElForm,ElFormItem,ElCollapse,ElCollapseItem,ElInput } from \"element-plus\";\r\nimport { type DynamicFormItemType } from \"./type\"\r\nimport { ImageUploadContext } from \"../../../modules/ms/image-upload-context\";\r\n\r\nexport default defineComponent({\r\n  name:\"DynamicFormPanel\",\r\n  props:{\r\n    data:{ type:Object },\r\n    options:{ type:Array<DynamicFormItemType> }\r\n  },\r\n  setup:(props,{ emit })=>{\r\n\r\n    // 编辑\r\n    const dataRef = ref<any>(props.data);\r\n\r\n\r\n    return ()=>{\r\n\r\n      // 生成的表单项\r\n      const formItems = props.options?.filter(item=>{\r\n        if(item.condition){\r\n            return item.condition(dataRef.value);\r\n        }\r\n        return true;\r\n      }).map(item=>{\r\n\r\n        const resloveComponent = typeof item.component == \"string\" ? resolveComponent(item.component) : item.component;\r\n        let defaultSlot:any = ()=>[];\r\n\r\n        // 特殊处理的组件\r\n        if(item.component == \"el-radio-group\"){\r\n          defaultSlot = ()=>item.props.data.map((dt:any)=>{\r\n            return h(resolveComponent(\"el-radio-button\"),{ label:dt.label, value:dt.value })\r\n          })\r\n        }\r\n        else if(item.component == \"MKUploadImage\"){\r\n          if(item.props.cutSize){\r\n            item.props.uploadContext = new ImageUploadContext(item.props.cutSize)\r\n          }\r\n        }\r\n\r\n        return h(ElFormItem,{ \r\n          label:item.title,prop:item.name,\r\n        },{\r\n          default:()=>{\r\n            return [\r\n              h(resloveComponent,{ \r\n                ...item.props,\r\n                \"modelValue\" : dataRef.value[item.name],\r\n                \"onUpdate:modelValue\" : (v:any) => {\r\n                  dataRef.value[item.name] = v;\r\n                }\r\n              },{  default:defaultSlot })\r\n            ]\r\n          }\r\n        })\r\n      });\r\n\r\n      return h(ElForm,{ \r\n        labelPosition:\"top\",model:props.data,labelWidth:\"auto\",\r\n        style:{ height:\"600px\",overflow:\"auto\",padding:\"10px\" }\r\n      },{\r\n        default:()=>{\r\n          return formItems\r\n        }\r\n      })\r\n    }\r\n  }\r\n});\r\n"],"names":["defineComponent","name","props","data","type","Object","options","Array","setup","emit","dataRef","ref","formItems","filter","item","condition","value","map","resloveComponent","component","resolveComponent","defaultSlot","dt","h","label","cutSize","uploadContext","ImageUploadContext","ElFormItem","title","prop","default","v","ElForm","labelPosition","model","labelWidth","style","height","overflow","padding"],"mappings":";;;AAKA,MAAeA,mDAAgB;AAAA,EAC7BC,MAAK;AAAA,EACLC,OAAM;AAAA,IACJC,MAAK;AAAA,MAAEC,MAAKC;AAAAA,IAAQ;AAAA,IACpBC,SAAQ;AAAA,MAAEF,MAAKG;AAAAA,IAA2B;AAAA,EAC3C;AAAA,EACDC,OAAMA,CAACN,OAAM;AAAA,IAAEO;AAAAA,EAAK,MAAI;AAGtB,UAAMC,UAAUC,IAAST,MAAMC,IAAI;AAGnC,WAAO,MAAI;;AAGT,YAAMS,aAAYV,WAAMI,YAANJ,mBAAeW,OAAOC,UAAM;AAC5C,YAAGA,KAAKC,WAAU;AACd,iBAAOD,KAAKC,UAAUL,QAAQM,KAAK;AAAA,QACvC;AACA,eAAO;AAAA,MACT,GAAGC,IAAIH,UAAM;AAEX,cAAMI,mBAAmB,OAAOJ,KAAKK,aAAa,WAAWC,iBAAiBN,KAAKK,SAAS,IAAIL,KAAKK;AACrG,YAAIE,cAAkBA,MAAI;AAG1B,YAAGP,KAAKK,aAAa,kBAAiB;AACpCE,wBAAcA,MAAIP,KAAKZ,MAAMC,KAAKc,IAAKK,QAAS;AAC9C,mBAAOC,EAAEH,iBAAiB,iBAAiB,GAAE;AAAA,cAAEI,OAAMF,GAAGE;AAAAA,cAAOR,OAAMM,GAAGN;AAAAA,YAAM,CAAC;AAAA,UACjF,CAAC;AAAA,QACH,WACQF,KAAKK,aAAa,iBAAgB;AACxC,cAAGL,KAAKZ,MAAMuB,SAAQ;AACpBX,iBAAKZ,MAAMwB,gBAAgB,IAAIC,mBAAmBb,KAAKZ,MAAMuB,OAAO;AAAA,UACtE;AAAA,QACF;AAEA,eAAOF,EAAEK,YAAW;AAAA,UAClBJ,OAAMV,KAAKe;AAAAA,UAAMC,MAAKhB,KAAKb;AAAAA,QAC7B,GAAE;AAAA,UACA8B,SAAQA,MAAI;AACV,mBAAO,CACLR,EAAEL,kBAAiB;AAAA,cACjB,GAAGJ,KAAKZ;AAAAA,cACR,cAAeQ,QAAQM,MAAMF,KAAKb,IAAI;AAAA,cACtC,uBAAyB+B,OAAU;AACjCtB,wBAAQM,MAAMF,KAAKb,IAAI,IAAI+B;AAAAA,cAC7B;AAAA,YACF,GAAE;AAAA,cAAGD,SAAQV;AAAAA,YAAa,CAAA,CAAC;AAAA,UAE/B;AAAA,QACF,CAAC;AAAA,MACH;AAEA,aAAOE,EAAEU,QAAO;AAAA,QACdC,eAAc;AAAA,QAAMC,OAAMjC,MAAMC;AAAAA,QAAKiC,YAAW;AAAA,QAChDC,OAAM;AAAA,UAAEC,QAAO;AAAA,UAAQC,UAAS;AAAA,UAAOC,SAAQ;AAAA,QAAO;AAAA,MACxD,GAAE;AAAA,QACAT,SAAQA,MAAI;AACV,iBAAOnB;AAAAA,QACT;AAAA,MACF,CAAC;AAAA;EAEL;AACF,CAAC;"}

package/dist/esm/components/basic/dynamic-form-panel/dialog.js

@@ -19,8 +19,8 @@ const showDynamicFormDialoger = async (title, options, data) => {
     };
     const dialogInstance = Dialoger.customRender({
       title: isAdd ? `添加${title}` : `编辑${title}`,
-      class: "mk-html-editor-dialog",
-      width: "500px",
+      class: "mk-dynamic-form-editor-dialog",
+      width: "700px",
       onClose: () => {
         dialogInstance.destroy();
       },

package/dist/esm/components/basic/dynamic-form-panel/dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.js","sources":["../../../../../src/components/basic/dynamic-form-panel/dialog.ts"],"sourcesContent":["\r\nimport { h ,type Component,Fragment,reactive } from 'vue'\r\nimport { Dialoger } from '@maketribe/dm'\r\nimport {  ElButton,ElForm,ElFormItem,ElCollapse,ElCollapseItem,ElInput } from \"element-plus\";\r\nimport DynamicFormPanel from \"./DynamicFormPanel\"\r\nimport { type DynamicFormItemType } from \"./type\"\r\nimport { createDefaultFormData } from \"./utils\"\r\n\r\n/**\r\n * 显示动态表单弹窗\r\n * @param title 标题\r\n * @param options 表单配置\r\n * @param data 表单数据\r\n * @returns \r\n */\r\nexport const showDynamicFormDialoger = async  (title:string,options:DynamicFormItemType[],data:any) => {\r\n  return new Promise(resolve => {\r\n\r\n    // 是否是新增\r\n    const isAdd = data == null;\r\n\r\n    // 新增的话\r\n    if(isAdd){ \r\n      data = createDefaultFormData(options);  \r\n    }\r\n\r\n    // 响应数据\r\n    const reactiveData = reactive(data)\r\n\r\n    // 取消编辑\r\n    const handleCancelClick = () => {\r\n      dialogInstance.destroy();\r\n    };\r\n\r\n    // 确认编辑\r\n    const handleConfirmClick = () => {\r\n      dialogInstance.destroy();\r\n      resolve(data);\r\n    };\r\n\r\n    const dialogInstance = Dialoger.customRender({\r\n      title: isAdd ? `添加${title}` : `编辑${title}`,\r\n      class: \"mk-html-editor-dialog\",\r\n      width: \"500px\",\r\n      onClose: () => {\r\n        dialogInstance.destroy();\r\n      },\r\n      body: () => {\r\n        return h(DynamicFormPanel,{ data,options })\r\n      },\r\n      footer: () => {\r\n        return h(Fragment,{},[\r\n          h(ElButton,{ onClick:()=>handleCancelClick() },{ default:()=>\"取消\" }),\r\n          h(ElButton,{ type:\"primary\" , onClick:()=>handleConfirmClick() },{ default:()=>\"确定\" })\r\n        ]) \r\n      },\r\n    });\r\n  });\r\n}\r\n\r\n\r\n\r\n"],"names":[],"mappings":";;;;;AAeO,MAAM,0BAA0B,OAAQ,OAAa,SAA8B,SAAa;AAC9F,SAAA,IAAI,QAAQ,CAAW,YAAA;AAG5B,UAAM,QAAQ,QAAQ;AAGtB,QAAG,OAAM;AACP,aAAO,sBAAsB,OAAO;AAAA,IACtC;AAGqB,aAAS,IAAI;AAGlC,UAAM,oBAAoB,MAAM;AAC9B,qBAAe,QAAQ;AAAA,IAAA;AAIzB,UAAM,qBAAqB,MAAM;AAC/B,qBAAe,QAAQ;AACvB,cAAQ,IAAI;AAAA,IAAA;AAGR,UAAA,iBAAiB,SAAS,aAAa;AAAA,MAC3C,OAAO,QAAQ,KAAK,KAAK,KAAK,KAAK,KAAK;AAAA,MACxC,OAAO;AAAA,MACP,OAAO;AAAA,MACP,SAAS,MAAM;AACb,uBAAe,QAAQ;AAAA,MACzB;AAAA,MACA,MAAM,MAAM;AACV,eAAO,EAAE,kBAAiB,EAAE,MAAK,QAAS,CAAA;AAAA,MAC5C;AAAA,MACA,QAAQ,MAAM;AACL,eAAA,EAAE,UAAS,IAAG;AAAA,UACnB,EAAE,UAAS,EAAE,SAAQ,MAAI,kBAAoB,EAAA,GAAE,EAAE,SAAQ,MAAI,MAAM;AAAA,UACnE,EAAE,UAAS,EAAE,MAAK,WAAY,SAAQ,MAAI,mBAAmB,KAAI,EAAE,SAAQ,MAAI,MAAM;AAAA,QAAA,CACtF;AAAA,MACH;AAAA,IAAA,CACD;AAAA,EAAA,CACF;AACH;"}
+{"version":3,"file":"dialog.js","sources":["../../../../../src/components/basic/dynamic-form-panel/dialog.ts"],"sourcesContent":["\r\nimport { h ,type Component,Fragment,reactive } from 'vue'\r\nimport { Dialoger } from '@maketribe/dm'\r\nimport {  ElButton,ElForm,ElFormItem,ElCollapse,ElCollapseItem,ElInput } from \"element-plus\";\r\nimport DynamicFormPanel from \"./DynamicFormPanel\"\r\nimport { type DynamicFormItemType } from \"./type\"\r\nimport { createDefaultFormData } from \"./utils\"\r\n\r\n/**\r\n * 显示动态表单弹窗\r\n * @param title 标题\r\n * @param options 表单配置\r\n * @param data 表单数据\r\n * @returns \r\n */\r\nexport const showDynamicFormDialoger = async  (title:string,options:DynamicFormItemType[],data:any) => {\r\n  return new Promise(resolve => {\r\n\r\n    // 是否是新增\r\n    const isAdd = data == null;\r\n\r\n    // 新增的话\r\n    if(isAdd){ \r\n      data = createDefaultFormData(options);  \r\n    }\r\n\r\n    // 响应数据\r\n    const reactiveData = reactive(data)\r\n\r\n    // 取消编辑\r\n    const handleCancelClick = () => {\r\n      dialogInstance.destroy();\r\n    };\r\n\r\n    // 确认编辑\r\n    const handleConfirmClick = () => {\r\n      dialogInstance.destroy();\r\n      resolve(data);\r\n    };\r\n\r\n    const dialogInstance = Dialoger.customRender({\r\n      title: isAdd ? `添加${title}` : `编辑${title}`,\r\n      class: \"mk-dynamic-form-editor-dialog\",\r\n      width: \"700px\",\r\n      onClose: () => {\r\n        dialogInstance.destroy();\r\n      },\r\n      body: () => {\r\n        return h(DynamicFormPanel,{ data,options })\r\n      },\r\n      footer: () => {\r\n        return h(Fragment,{},[\r\n          h(ElButton,{ onClick:()=>handleCancelClick() },{ default:()=>\"取消\" }),\r\n          h(ElButton,{ type:\"primary\" , onClick:()=>handleConfirmClick() },{ default:()=>\"确定\" })\r\n        ]) \r\n      },\r\n    });\r\n  });\r\n}\r\n\r\n\r\n\r\n"],"names":[],"mappings":";;;;;AAeO,MAAM,0BAA0B,OAAQ,OAAa,SAA8B,SAAa;AAC9F,SAAA,IAAI,QAAQ,CAAW,YAAA;AAG5B,UAAM,QAAQ,QAAQ;AAGtB,QAAG,OAAM;AACP,aAAO,sBAAsB,OAAO;AAAA,IACtC;AAGqB,aAAS,IAAI;AAGlC,UAAM,oBAAoB,MAAM;AAC9B,qBAAe,QAAQ;AAAA,IAAA;AAIzB,UAAM,qBAAqB,MAAM;AAC/B,qBAAe,QAAQ;AACvB,cAAQ,IAAI;AAAA,IAAA;AAGR,UAAA,iBAAiB,SAAS,aAAa;AAAA,MAC3C,OAAO,QAAQ,KAAK,KAAK,KAAK,KAAK,KAAK;AAAA,MACxC,OAAO;AAAA,MACP,OAAO;AAAA,MACP,SAAS,MAAM;AACb,uBAAe,QAAQ;AAAA,MACzB;AAAA,MACA,MAAM,MAAM;AACV,eAAO,EAAE,kBAAiB,EAAE,MAAK,QAAS,CAAA;AAAA,MAC5C;AAAA,MACA,QAAQ,MAAM;AACL,eAAA,EAAE,UAAS,IAAG;AAAA,UACnB,EAAE,UAAS,EAAE,SAAQ,MAAI,kBAAoB,EAAA,GAAE,EAAE,SAAQ,MAAI,MAAM;AAAA,UACnE,EAAE,UAAS,EAAE,MAAK,WAAY,SAAQ,MAAI,mBAAmB,KAAI,EAAE,SAAQ,MAAI,MAAM;AAAA,QAAA,CACtF;AAAA,MACH;AAAA,IAAA,CACD;AAAA,EAAA,CACF;AACH;"}

package/dist/esm/components/basic/image-cropper/image-cropper-api.js.map

@@ -1 +1 @@
-{"version":3,"file":"image-cropper-api.js","sources":["../../../../../src/components/basic/image-cropper/image-cropper-api.tsx"],"sourcesContent":["import { Dialoger } from \"@maketribe/dm\";\r\nimport ImageCropperContent, {\r\n  ImageCropperRatioOption,\r\n} from \"./image-cropper-content\";\r\nimport { Fragment } from \"vue/jsx-runtime\";\r\nimport { ElButton } from \"element-plus\";\r\nimport { ref, Ref, unref } from \"vue\";\r\n\r\nexport type MKImageCropperOptions = {\r\n  src: string;\r\n  ratioOptions?: Array<ImageCropperRatioOption>;\r\n  fixedBox?: boolean;\r\n  maxWidth?:number;\r\n  maxHeight?:number;\r\n};\r\nexport type MKImageCropperResult = {\r\n  isConfirm: boolean;\r\n  data: string;\r\n  size: { width: number; height: number };\r\n};\r\n\r\nexport async function ImageCropper(\r\n  options: MKImageCropperOptions\r\n): Promise<MKImageCropperResult> {\r\n  const ratioOptions = options.ratioOptions ?? [];\r\n  const fixedBox = options.fixedBox ?? false;\r\n\r\n  return new Promise((resolve) => {\r\n    const imageCropperContentEl: Ref<typeof ImageCropperContent | null> =\r\n      ref(null);\r\n\r\n    const handleCancelClick = () => {\r\n      dialogInstance.destroy();\r\n\r\n      resolve({\r\n        isConfirm: false,\r\n        data: \"\",\r\n        size: { width: 0, height: 0 },\r\n      });\r\n    };\r\n\r\n    const handleConfirmClick = async () => {\r\n      dialogInstance.destroy();\r\n\r\n      const cropperRef = unref(imageCropperContentEl)!.cropperRef;\r\n\r\n      resolve({\r\n        isConfirm: true,\r\n        data: await new Promise(cropperRef.getCropData.bind(cropperRef)),\r\n        size: { width: cropperRef.cropW, height: cropperRef.cropH },\r\n      });\r\n    };\r\n\r\n    const dialogInstance = Dialoger.customRender({\r\n      title: \"图片裁切\",\r\n      onClose: handleCancelClick,\r\n      body: () => {\r\n        return (\r\n          <ImageCropperContent\r\n            ref={((el: any) => (imageCropperContentEl.value = el)) as any}\r\n            src={options.src}\r\n            fixedBox={fixedBox}\r\n            ratioOptions={ratioOptions}\r\n            maxHeight={options.maxHeight}\r\n            maxWidth={options.maxWidth}\r\n          />\r\n        );\r\n      },\r\n      footer: () => {\r\n        return (\r\n          <Fragment>\r\n            <ElButton onClick={handleCancelClick}>取消</ElButton>\r\n            <ElButton type=\"primary\" onClick={handleConfirmClick}>\r\n              确认\r\n            </ElButton>\r\n          </Fragment>\r\n        );\r\n      },\r\n    });\r\n  });\r\n}\r\n"],"names":["ImageCropper","options","ratioOptions","fixedBox","Promise","resolve","imageCropperContentEl","ref","handleCancelClick","dialogInstance","destroy","isConfirm","data","size","width","height","handleConfirmClick","cropperRef","unref","getCropData","bind","cropW","cropH","Dialoger","customRender","title","onClose","body","_createVNode","ImageCropperContent","el","value","src","maxHeight","maxWidth","footer","_Fragment","ElButton","default","_createTextVNode"],"mappings":";;;;;AAqBO,eAAeA,aACpBC,SAC+B;AAC/B,QAAMC,eAAeD,QAAQC,gBAAgB;AAC7C,QAAMC,WAAWF,QAAQE,YAAY;AAErC,SAAO,IAAIC,QAASC,aAAY;AAC9B,UAAMC,wBACJC,IAAI,IAAI;AAEV,UAAMC,oBAAoBA,MAAM;AAC9BC,qBAAeC,QAAO;AAEtBL,cAAQ;AAAA,QACNM,WAAW;AAAA,QACXC,MAAM;AAAA,QACNC,MAAM;AAAA,UAAEC,OAAO;AAAA,UAAGC,QAAQ;AAAA,QAAE;AAAA,MAC9B,CAAC;AAAA;AAGH,UAAMC,qBAAqB,YAAY;AACrCP,qBAAeC,QAAO;AAEtB,YAAMO,aAAaC,MAAMZ,qBAAqB,EAAGW;AAEjDZ,cAAQ;AAAA,QACNM,WAAW;AAAA,QACXC,MAAM,MAAM,IAAIR,QAAQa,WAAWE,YAAYC,KAAKH,UAAU,CAAC;AAAA,QAC/DJ,MAAM;AAAA,UAAEC,OAAOG,WAAWI;AAAAA,UAAON,QAAQE,WAAWK;AAAAA,QAAM;AAAA,MAC5D,CAAC;AAAA;AAGH,UAAMb,iBAAiBc,SAASC,aAAa;AAAA,MAC3CC,OAAO;AAAA,MACPC,SAASlB;AAAAA,MACTmB,MAAMA,MAAM;AACV,eAAAC,YAAAC,qBAAA;AAAA,UAAA,OAEWC,QAAaxB,sBAAsByB,QAAQD;AAAAA,UAAG,OAChD7B,QAAQ+B;AAAAA,UAAG,YACN7B;AAAAA,UAAQ,gBACJD;AAAAA,UAAY,aACfD,QAAQgC;AAAAA,UAAS,YAClBhC,QAAQiC;AAAAA,QAAQ,GAAA,IAAA;AAAA,MAG/B;AAAA,MACDC,QAAQA,MAAM;AACZ,eAAAP,YAAAQ,UAAAR,MAAAA,CAAAA,YAAAS,UAAA;AAAA,UAAA,WAEuB7B;AAAAA,QAAiB,GAAA;AAAA,UAAA8B,SAAAA,MAAA,CAAAC,gBAAA,IAAA,CAAA;AAAA,SAAAX,GAAAA,YAAAS,UAAA;AAAA,UAAA,QAAA;AAAA,UAAA,WACFrB;AAAAA,QAAkB,GAAA;AAAA,UAAAsB,SAAAA,MAAA,CAAAC,gBAAA,IAAA,CAAA;AAAA,QAAA,CAAA,CAAA,CAAA;AAAA,MAK1D;AAAA,IACF,CAAC;AAAA,EACH,CAAC;AACH;"}
+{"version":3,"file":"image-cropper-api.js","sources":["../../../../../src/components/basic/image-cropper/image-cropper-api.tsx"],"sourcesContent":["import { Dialoger } from \"@maketribe/dm\";\r\nimport ImageCropperContent, {\r\n  ImageCropperRatioOption,\r\n} from \"./image-cropper-content\";\r\nimport { Fragment } from \"vue/jsx-runtime\";\r\nimport { ElButton } from \"element-plus\";\r\nimport { ref, Ref, unref } from \"vue\";\r\n\r\nexport type MKImageCropperOptions = {\r\n  src: string;\r\n  ratioOptions?: Array<ImageCropperRatioOption>;\r\n  fixedBox?: boolean;\r\n  maxWidth?:number;\r\n  maxHeight?:number;\r\n};\r\nexport type MKImageCropperResult = {\r\n  isConfirm: boolean;\r\n  data: string;\r\n  size: { width: number; height: number };\r\n};\r\n\r\nexport async function ImageCropper(\r\n  options: MKImageCropperOptions\r\n): Promise<MKImageCropperResult> {\r\n  const ratioOptions = options.ratioOptions ?? [];\r\n  const fixedBox = options.fixedBox ?? false;\r\n\r\n  return new Promise((resolve) => {\r\n    const imageCropperContentEl: Ref<typeof ImageCropperContent | null> =\r\n      ref(null);\r\n\r\n    const handleCancelClick = () => {\r\n      dialogInstance.destroy();\r\n\r\n      resolve({\r\n        isConfirm: false,\r\n        data: \"\",\r\n        size: { width: 0, height: 0 },\r\n      });\r\n    };\r\n\r\n    const handleConfirmClick = async () => {\r\n      dialogInstance.destroy();\r\n\r\n      const cropperRef = unref(imageCropperContentEl)!.cropperRef;\r\n      \r\n      resolve({\r\n        isConfirm: true,\r\n        data: await new Promise(cropperRef.getCropData.bind(cropperRef)),\r\n        size: { width: cropperRef.cropW, height: cropperRef.cropH },\r\n      });\r\n    };\r\n\r\n    const dialogInstance = Dialoger.customRender({\r\n      title: \"图片裁切\",\r\n      onClose: handleCancelClick,\r\n      body: () => {\r\n        return (\r\n          <ImageCropperContent\r\n            ref={((el: any) => (imageCropperContentEl.value = el)) as any}\r\n            src={options.src}\r\n            fixedBox={fixedBox}\r\n            ratioOptions={ratioOptions}\r\n            maxHeight={options.maxHeight}\r\n            maxWidth={options.maxWidth}\r\n          />\r\n        );\r\n      },\r\n      footer: () => {\r\n        return (\r\n          <Fragment>\r\n            <ElButton onClick={handleCancelClick}>取消</ElButton>\r\n            <ElButton type=\"primary\" onClick={handleConfirmClick}>\r\n              确认\r\n            </ElButton>\r\n          </Fragment>\r\n        );\r\n      },\r\n    });\r\n  });\r\n}\r\n"],"names":["ImageCropper","options","ratioOptions","fixedBox","Promise","resolve","imageCropperContentEl","ref","handleCancelClick","dialogInstance","destroy","isConfirm","data","size","width","height","handleConfirmClick","cropperRef","unref","getCropData","bind","cropW","cropH","Dialoger","customRender","title","onClose","body","_createVNode","ImageCropperContent","el","value","src","maxHeight","maxWidth","footer","_Fragment","ElButton","default","_createTextVNode"],"mappings":";;;;;AAqBO,eAAeA,aACpBC,SAC+B;AAC/B,QAAMC,eAAeD,QAAQC,gBAAgB;AAC7C,QAAMC,WAAWF,QAAQE,YAAY;AAErC,SAAO,IAAIC,QAASC,aAAY;AAC9B,UAAMC,wBACJC,IAAI,IAAI;AAEV,UAAMC,oBAAoBA,MAAM;AAC9BC,qBAAeC,QAAO;AAEtBL,cAAQ;AAAA,QACNM,WAAW;AAAA,QACXC,MAAM;AAAA,QACNC,MAAM;AAAA,UAAEC,OAAO;AAAA,UAAGC,QAAQ;AAAA,QAAE;AAAA,MAC9B,CAAC;AAAA;AAGH,UAAMC,qBAAqB,YAAY;AACrCP,qBAAeC,QAAO;AAEtB,YAAMO,aAAaC,MAAMZ,qBAAqB,EAAGW;AAEjDZ,cAAQ;AAAA,QACNM,WAAW;AAAA,QACXC,MAAM,MAAM,IAAIR,QAAQa,WAAWE,YAAYC,KAAKH,UAAU,CAAC;AAAA,QAC/DJ,MAAM;AAAA,UAAEC,OAAOG,WAAWI;AAAAA,UAAON,QAAQE,WAAWK;AAAAA,QAAM;AAAA,MAC5D,CAAC;AAAA;AAGH,UAAMb,iBAAiBc,SAASC,aAAa;AAAA,MAC3CC,OAAO;AAAA,MACPC,SAASlB;AAAAA,MACTmB,MAAMA,MAAM;AACV,eAAAC,YAAAC,qBAAA;AAAA,UAAA,OAEWC,QAAaxB,sBAAsByB,QAAQD;AAAAA,UAAG,OAChD7B,QAAQ+B;AAAAA,UAAG,YACN7B;AAAAA,UAAQ,gBACJD;AAAAA,UAAY,aACfD,QAAQgC;AAAAA,UAAS,YAClBhC,QAAQiC;AAAAA,QAAQ,GAAA,IAAA;AAAA,MAG/B;AAAA,MACDC,QAAQA,MAAM;AACZ,eAAAP,YAAAQ,UAAAR,MAAAA,CAAAA,YAAAS,UAAA;AAAA,UAAA,WAEuB7B;AAAAA,QAAiB,GAAA;AAAA,UAAA8B,SAAAA,MAAA,CAAAC,gBAAA,IAAA,CAAA;AAAA,SAAAX,GAAAA,YAAAS,UAAA;AAAA,UAAA,QAAA;AAAA,UAAA,WACFrB;AAAAA,QAAkB,GAAA;AAAA,UAAAsB,SAAAA,MAAA,CAAAC,gBAAA,IAAA,CAAA;AAAA,QAAA,CAAA,CAAA,CAAA;AAAA,MAK1D;AAAA,IACF,CAAC;AAAA,EACH,CAAC;AACH;"}

package/dist/esm/components/basic/visual-page-editor/content-editable.vue.js

@@ -1,12 +1,12 @@
 import { defineComponent, ref, reactive, onMounted, onBeforeUnmount, resolveComponent, openBlock, createElementBlock, createElementVNode, normalizeStyle, unref, Fragment, renderList, createBlock, createVNode, withCtx, createTextVNode, withModifiers, createCommentVNode } from "vue";
-import { usePageEditor } from "./core/index.js";
-import BlockRender from "./components/BlockRender.js";
-import { ShowComponentSelectPanel, ShowEditPanel } from "./utils/Dialog.js";
+import { useVisualPageEditor } from "./core/index.js";
+import BlockRender from "./core/BlockRender.js";
+import { showModuleSelectPanel, showEditPanel } from "./core/Dialog.js";
 const _hoisted_1 = { class: "mk-visual-page-editor__stage_editable_addblock" };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "content-editable",
   setup(__props) {
-    const { PageEditor, ViewDevice } = usePageEditor();
+    const { PageEditor, ViewDevice } = useVisualPageEditor();
     const editableRef = ref(null);
     const selectIndex = ref(null);
     const clickHandle = (data) => {
@@ -24,11 +24,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
     };
     const addHandle = async (pos, index) => {
-      await ShowComponentSelectPanel();
+      await showModuleSelectPanel();
     };
     const editHandle = async (index) => {
       const item = PageEditor.get(index);
-      await ShowEditPanel(item, {});
+      const module = PageEditor.findModule(item.componentInfo);
+      const result = await showEditPanel(module, { ...item.componentProps });
+      PageEditor.edit(index, result);
     };
     onMounted(() => {
       var _a;
@@ -40,8 +42,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       PageEditor.setContent({
         version: "1.0.0",
         contents: [
-          { componentInfo: "vp-image", componentProps: { src: "https://vgcnminisite.oss-cn-shanghai.aliyuncs.com/uploads/2024/07/03/ffd6b7c7f24f42dab3ae1220e18c3723.jpg", id: 1 } },
-          { componentInfo: "vp-image", componentProps: { src: "https://vgcnminisite.oss-cn-shanghai.aliyuncs.com/uploads/2024/07/03/b9e0baefbd784d70a83e04bea7cd6113.jpg", id: 2 } }
+          { componentInfo: "base-image", componentProps: { src: "https://vgcnminisite.oss-cn-shanghai.aliyuncs.com/uploads/2024/07/03/ffd6b7c7f24f42dab3ae1220e18c3723.jpg", id: 1 } },
+          { componentInfo: "base-image", componentProps: { src: "https://vgcnminisite.oss-cn-shanghai.aliyuncs.com/uploads/2024/07/03/b9e0baefbd784d70a83e04bea7cd6113.jpg", id: 2 } }
         ]
       });
     });
@@ -154,11 +156,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   ]),
                   _: 1
                 }),
-                createVNode(_component_el_button, { text: "" }, {
+                createVNode(_component_el_button, {
+                  text: "",
+                  onClick: _cache[5] || (_cache[5] = ($event) => editHandle(selectIndex.value))
+                }, {
                   default: withCtx(() => [
                     createVNode(_component_MKSvgIcon, {
                       iconClass: "Edit",
-                      onClick: _cache[5] || (_cache[5] = ($event) => editHandle(selectIndex.value)),
                       style: { "margin-right": "10px" }
                     }),
                     createTextVNode(" 编辑 ")

package/dist/esm/components/basic/visual-page-editor/content-editable.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"content-editable.vue.js","sources":["../../../../../src/components/basic/visual-page-editor/content-editable.vue"],"sourcesContent":["<template>\r\n  <div class=\"mk-visual-page-editor__stage_body\" @click=\"clickStageHandle\">\r\n    <div class=\"mk-visual-page-editor__stage_editable\" :style=\"{width:(ViewDevice=='pc'?'900px':'640px')}\" ref=\"editableRef\">\r\n      <BlockRender v-for=\"(item,index) in PageEditor.getContent().contents\" :key=\"index\" :index=\"index\" :node=\"item\" :active=\"selectIndex==index\" @click=\"clickHandle\"></BlockRender>\r\n      <div  class=\"mk-visual-page-editor__stage_editable_addblock\">\r\n        <el-button text type=\"primary\" size=\"large\" @click=\"addHandle()\">\r\n          <MKSvgIcon iconClass=\"Plus\" style=\"margin-right:10px\" /> \r\n          添加\r\n        </el-button>\r\n      </div>\r\n      <div class=\"mk-visual-page-editor-inline-toolbar\" @click..stop :style=\"toolsPos\"  v-if=\"selectIndex!=null\">\r\n        <el-button-group>\r\n          <el-button text v-if=\"selectIndex > 0\" @click=\"PageEditor.exchange(selectIndex,selectIndex-1);selectIndex--\" >\r\n            <MKSvgIcon iconClass=\"CaretTop\"  style=\"margin-right:10px\"/> \r\n            上移\r\n          </el-button>\r\n          <el-button text @click=\"PageEditor.exchange(selectIndex,selectIndex+1);selectIndex++\" v-if=\"selectIndex < PageEditor.size() - 1\">\r\n            <MKSvgIcon iconClass=\"CaretBottom\"  style=\"margin-right:10px\"/> \r\n            下移\r\n          </el-button>\r\n          <el-button text @click=\"addHandle(selectIndex,selectIndex-1)\">\r\n            <MKSvgIcon iconClass=\"Fold\"  style=\"margin-right:10px\" /> \r\n            插入\r\n          </el-button>\r\n          <el-button text @click=\"addHandle(selectIndex,selectIndex+1)\">\r\n            <MKSvgIcon iconClass=\"Plus\"  style=\"margin-right:10px\"/> \r\n            添加\r\n          </el-button>\r\n          <el-button text>\r\n            <MKSvgIcon iconClass=\"Edit\" @click=\"editHandle(selectIndex)\" style=\"margin-right:10px\"/> \r\n            编辑\r\n          </el-button>\r\n          <el-button text type=\"danger\" @click=\"PageEditor.remove(selectIndex);selectIndex=null\">\r\n            <MKSvgIcon iconClass=\"Delete\"  style=\"margin-right:10px\"/> \r\n            删除\r\n          </el-button>\r\n        </el-button-group>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { nextTick,defineProps,defineEmits,computed,ref,onMounted,onBeforeUnmount,reactive,watch } from \"vue\"\r\nimport { usePageEditor,useRenderComponent } from \"./core\"\r\nimport BlockRender from \"./components/BlockRender\"\r\nimport { RenderComponentType } from \"./core/RenderComponent\"\r\nimport { ShowEditPanel,ShowComponentSelectPanel } from \"./utils/Dialog\"\r\n\r\nconst { PageEditor,ViewDevice } = usePageEditor();\r\nconst editableRef = ref<HTMLDivElement|null>(null);\r\nconst selectIndex = ref(null);\r\n\r\n// 点击块\r\nconst clickHandle = (data:any)=>{\r\n  data.event.stopPropagation();\r\n  updateToolsPos();\r\n  selectIndex.value = data.index;\r\n}\r\nconst clickStageHandle = ()=>{\r\n  selectIndex.value = null;\r\n}\r\n// 工具条位置\r\nconst toolsPos = reactive({ top:\"0px\" });\r\n// 更新工具条位置\r\nconst updateToolsPos = ()=>{\r\n  if(editableRef.value != null){\r\n    toolsPos.top = Math.max(editableRef.value.parentElement!.scrollTop + editableRef.value.parentElement!.offsetHeight / 2 - 100,5) + \"px\"\r\n  }\r\n}\r\n\r\n// 编辑\r\nconst addHandle =  async (pos?:any,index?:any) => {\r\n  const result = await ShowComponentSelectPanel();\r\n}\r\n\r\n// 编辑\r\nconst editHandle =  async (index:any) => {\r\n\r\n  const item = PageEditor.get(index)\r\n  \r\n  const result = await ShowEditPanel(item as any,{});\r\n}\r\n\r\nonMounted(()=>{\r\n  editableRef.value?.parentElement!.addEventListener(\"scroll\",updateToolsPos,false);\r\n  onBeforeUnmount(()=>{\r\n    editableRef.value?.parentElement!.removeEventListener(\"scroll\",updateToolsPos);\r\n  });\r\n\r\n  PageEditor.setContent({\r\n    version:\"1.0.0\",\r\n    contents:[\r\n      {componentInfo:\"vp-image\",componentProps:{src:\"https://vgcnminisite.oss-cn-shanghai.aliyuncs.com/uploads/2024/07/03/ffd6b7c7f24f42dab3ae1220e18c3723.jpg\",id:1}},\r\n      {componentInfo:\"vp-image\",componentProps:{src:\"https://vgcnminisite.oss-cn-shanghai.aliyuncs.com/uploads/2024/07/03/b9e0baefbd784d70a83e04bea7cd6113.jpg\",id:2}}\r\n    ]\r\n  })\r\n\r\n});\r\n</script>\r\n"],"names":["_a"],"mappings":";;;;;;;;AAiDA,UAAM,EAAE,YAAW,WAAW,IAAI,cAAc;AAC1C,UAAA,cAAc,IAAyB,IAAI;AAC3C,UAAA,cAAc,IAAI,IAAI;AAGtB,UAAA,cAAc,CAAC,SAAW;AAC9B,WAAK,MAAM;AACI;AACf,kBAAY,QAAQ,KAAK;AAAA,IAAA;AAE3B,UAAM,mBAAmB,MAAI;AAC3B,kBAAY,QAAQ;AAAA,IAAA;AAGtB,UAAM,WAAW,SAAS,EAAE,KAAI,MAAO,CAAA;AAEvC,UAAM,iBAAiB,MAAI;AACtB,UAAA,YAAY,SAAS,MAAK;AAC3B,iBAAS,MAAM,KAAK,IAAI,YAAY,MAAM,cAAe,YAAY,YAAY,MAAM,cAAe,eAAe,IAAI,KAAI,CAAC,IAAI;AAAA,MACpI;AAAA,IAAA;AAII,UAAA,YAAa,OAAO,KAAS,UAAe;AACjC,YAAM,yBAAyB;AAAA,IAAA;AAI1C,UAAA,aAAc,OAAO,UAAc;AAEjC,YAAA,OAAO,WAAW,IAAI,KAAK;AAElB,YAAM,cAAc,MAAY,EAAE;AAAA,IAAA;AAGnD,cAAU,MAAI;;AACZ,wBAAY,UAAZ,mBAAmB,cAAe,iBAAiB,UAAS,gBAAe;AAC3E,sBAAgB,MAAI;;AAClB,SAAAA,MAAA,YAAY,UAAZ,gBAAAA,IAAmB,cAAe,oBAAoB,UAAS;AAAA,MAAc,CAC9E;AAED,iBAAW,WAAW;AAAA,QACpB,SAAQ;AAAA,QACR,UAAS;AAAA,UACP,EAAC,eAAc,YAAW,gBAAe,EAAC,KAAI,6GAA4G,IAAG,IAAE;AAAA,UAC/J,EAAC,eAAc,YAAW,gBAAe,EAAC,KAAI,6GAA4G,IAAG,IAAE;AAAA,QACjK;AAAA,MAAA,CACD;AAAA,IAAA,CAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"content-editable.vue.js","sources":["../../../../../src/components/basic/visual-page-editor/content-editable.vue"],"sourcesContent":["<template>\r\n  <div class=\"mk-visual-page-editor__stage_body\" @click=\"clickStageHandle\">\r\n    <div class=\"mk-visual-page-editor__stage_editable\" :style=\"{ width: (ViewDevice == 'pc' ? '900px' : '640px') }\"\r\n      ref=\"editableRef\">\r\n      <BlockRender v-for=\"(item, index) in PageEditor.getContent().contents\" :key=\"index\" :index=\"index\" :node=\"item\"\r\n        :active=\"selectIndex == index\" @click=\"clickHandle\"></BlockRender>\r\n      <div class=\"mk-visual-page-editor__stage_editable_addblock\">\r\n        <el-button text type=\"primary\" size=\"large\" @click=\"addHandle()\">\r\n          <MKSvgIcon iconClass=\"Plus\" style=\"margin-right:10px\" />\r\n          添加\r\n        </el-button>\r\n      </div>\r\n      <div class=\"mk-visual-page-editor-inline-toolbar\" @click..stop :style=\"toolsPos\" v-if=\"selectIndex != null\">\r\n        <el-button-group>\r\n          <el-button text v-if=\"selectIndex > 0\" @click=\"PageEditor.exchange(selectIndex, selectIndex - 1); selectIndex--\">\r\n            <MKSvgIcon iconClass=\"CaretTop\" style=\"margin-right:10px\" />\r\n            上移\r\n          </el-button>\r\n          <el-button text @click=\"PageEditor.exchange(selectIndex, selectIndex + 1); selectIndex++\"\r\n            v-if=\"selectIndex < PageEditor.size() - 1\">\r\n            <MKSvgIcon iconClass=\"CaretBottom\" style=\"margin-right:10px\" />\r\n            下移\r\n          </el-button>\r\n          <el-button text @click=\"addHandle(selectIndex, selectIndex - 1)\">\r\n            <MKSvgIcon iconClass=\"Fold\" style=\"margin-right:10px\" />\r\n            插入\r\n          </el-button>\r\n          <el-button text @click=\"addHandle(selectIndex, selectIndex + 1)\">\r\n            <MKSvgIcon iconClass=\"Plus\" style=\"margin-right:10px\" />\r\n            添加\r\n          </el-button>\r\n          <el-button text @click=\"editHandle(selectIndex)\">\r\n            <MKSvgIcon iconClass=\"Edit\" style=\"margin-right:10px\" />\r\n            编辑\r\n          </el-button>\r\n          <el-button text type=\"danger\" @click=\"PageEditor.remove(selectIndex); selectIndex = null\">\r\n            <MKSvgIcon iconClass=\"Delete\" style=\"margin-right:10px\" />\r\n            删除\r\n          </el-button>\r\n        </el-button-group>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { nextTick, defineProps, defineEmits, computed, ref, onMounted, onBeforeUnmount, reactive, watch } from \"vue\"\r\nimport { useVisualPageEditor, showEditPanel, showModuleSelectPanel } from \"./core\"\r\nimport BlockRender from \"./core/BlockRender\"\r\nimport { ModuleType } from \"./core/ModuleDefine\";\r\n\r\nconst { PageEditor, ViewDevice } = useVisualPageEditor();\r\nconst editableRef = ref<HTMLDivElement | null>(null);\r\nconst selectIndex = ref(null);\r\n\r\n// 点击块\r\nconst clickHandle = (data: any) => {\r\n  data.event.stopPropagation();\r\n  updateToolsPos();\r\n  selectIndex.value = data.index;\r\n}\r\nconst clickStageHandle = () => {\r\n  selectIndex.value = null;\r\n}\r\n// 工具条位置\r\nconst toolsPos = reactive({ top: \"0px\" });\r\n// 更新工具条位置\r\nconst updateToolsPos = () => {\r\n  if (editableRef.value != null) {\r\n    toolsPos.top = Math.max(editableRef.value.parentElement!.scrollTop + editableRef.value.parentElement!.offsetHeight / 2 - 100, 5) + \"px\"\r\n  }\r\n}\r\n\r\n// 编辑\r\nconst addHandle = async (pos?: any, index?: any) => {\r\n\r\n  const result = await showModuleSelectPanel();\r\n\r\n}\r\n\r\n// 编辑\r\nconst editHandle = async (index: any) => {\r\n\r\n  const item = PageEditor.get(index)\r\n  const module = PageEditor.findModule(item.componentInfo)\r\n  const result = await showEditPanel(module as ModuleType, { ...item.componentProps });\r\n  PageEditor.edit(index, result as any);\r\n}\r\n\r\nonMounted(() => {\r\n  editableRef.value?.parentElement!.addEventListener(\"scroll\", updateToolsPos, false);\r\n  onBeforeUnmount(() => {\r\n    editableRef.value?.parentElement!.removeEventListener(\"scroll\", updateToolsPos);\r\n  });\r\n\r\n  PageEditor.setContent({\r\n    version: \"1.0.0\",\r\n    contents: [\r\n      { componentInfo: \"base-image\", componentProps: { src: \"https://vgcnminisite.oss-cn-shanghai.aliyuncs.com/uploads/2024/07/03/ffd6b7c7f24f42dab3ae1220e18c3723.jpg\", id: 1 } },\r\n      { componentInfo: \"base-image\", componentProps: { src: \"https://vgcnminisite.oss-cn-shanghai.aliyuncs.com/uploads/2024/07/03/b9e0baefbd784d70a83e04bea7cd6113.jpg\", id: 2 } }\r\n    ]\r\n  })\r\n\r\n});\r\n</script>\r\n./core/ModuleDefine./core/BlockRender\r\n./core/Dialog\r\n"],"names":["_a"],"mappings":";;;;;;;;AAmDA,UAAM,EAAE,YAAY,WAAW,IAAI,oBAAoB;AACjD,UAAA,cAAc,IAA2B,IAAI;AAC7C,UAAA,cAAc,IAAI,IAAI;AAGtB,UAAA,cAAc,CAAC,SAAc;AACjC,WAAK,MAAM;AACI;AACf,kBAAY,QAAQ,KAAK;AAAA,IAAA;AAE3B,UAAM,mBAAmB,MAAM;AAC7B,kBAAY,QAAQ;AAAA,IAAA;AAGtB,UAAM,WAAW,SAAS,EAAE,KAAK,MAAO,CAAA;AAExC,UAAM,iBAAiB,MAAM;AACvB,UAAA,YAAY,SAAS,MAAM;AAC7B,iBAAS,MAAM,KAAK,IAAI,YAAY,MAAM,cAAe,YAAY,YAAY,MAAM,cAAe,eAAe,IAAI,KAAK,CAAC,IAAI;AAAA,MACrI;AAAA,IAAA;AAII,UAAA,YAAY,OAAO,KAAW,UAAgB;AAEnC,YAAM,sBAAsB;AAAA,IAAA;AAKvC,UAAA,aAAa,OAAO,UAAe;AAEjC,YAAA,OAAO,WAAW,IAAI,KAAK;AACjC,YAAM,SAAS,WAAW,WAAW,KAAK,aAAa;AACjD,YAAA,SAAS,MAAM,cAAc,QAAsB,EAAE,GAAG,KAAK,gBAAgB;AACxE,iBAAA,KAAK,OAAO,MAAa;AAAA,IAAA;AAGtC,cAAU,MAAM;;AACd,wBAAY,UAAZ,mBAAmB,cAAe,iBAAiB,UAAU,gBAAgB;AAC7E,sBAAgB,MAAM;;AACpB,SAAAA,MAAA,YAAY,UAAZ,gBAAAA,IAAmB,cAAe,oBAAoB,UAAU;AAAA,MAAc,CAC/E;AAED,iBAAW,WAAW;AAAA,QACpB,SAAS;AAAA,QACT,UAAU;AAAA,UACR,EAAE,eAAe,cAAc,gBAAgB,EAAE,KAAK,6GAA6G,IAAI,IAAI;AAAA,UAC3K,EAAE,eAAe,cAAc,gBAAgB,EAAE,KAAK,6GAA6G,IAAI,IAAI;AAAA,QAC7K;AAAA,MAAA,CACD;AAAA,IAAA,CAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/esm/components/basic/visual-page-editor/core/BlockRender.js

@@ -0,0 +1,39 @@
+import { defineComponent, h } from "vue";
+import { useVisualPageEditor } from "./index.js";
+const BlockRender = defineComponent({
+  name: "BlockRender",
+  emits: ["click"],
+  props: {
+    node: { type: Object },
+    parent: { type: Object },
+    index: { type: Number },
+    active: { type: Boolean }
+  },
+  setup: (props, { emit }) => {
+    const { PageEditor } = useVisualPageEditor();
+    return () => {
+      const content = props.node;
+      const module = PageEditor.findModule(content.componentInfo);
+      if (module != null) {
+        const vnode = typeof module.component === "function" ? module.component(content.componentProps) : h(module.component, content.componentProps);
+        return h("div", { class: "mk-visual-page-editor__stage_block" }, [
+          vnode,
+          h("div", {
+            class: { "mk-visual-page-editor__stage_block_mask": true, active: props.active },
+            onClick: (ev) => {
+              emit("click", { node: content, options: module, index: props.index, parent: props.parent, event: ev });
+            }
+          })
+        ]);
+      } else {
+        return h("div", { class: "mk-visual-page-editor__stage_block" }, [
+          `未知的模块【${content.componentInfo}】!请注册！`
+        ]);
+      }
+    };
+  }
+});
+export {
+  BlockRender as default
+};
+//# sourceMappingURL=BlockRender.js.map

package/dist/esm/components/basic/visual-page-editor/core/BlockRender.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockRender.js","sources":["../../../../../../src/components/basic/visual-page-editor/core/BlockRender.ts"],"sourcesContent":["import { defineComponent,defineProps,defineEmits,computed,ref,onMounted,watch,h,type Component } from \"vue\"\r\nimport { ContentBlockType } from \"./ContentConfig\"\r\nimport { useVisualPageEditor } from \".\"\r\n\r\nexport default defineComponent({\r\n  name:\"BlockRender\",\r\n  emits:[\"click\"],\r\n  props:{\r\n    node:{type:Object},\r\n    parent:{type:Object},\r\n    index:{type:Number},\r\n    active:{type:Boolean}\r\n  },\r\n  setup:(props,{ emit })=>{\r\n\r\n    const { PageEditor } = useVisualPageEditor();\r\n\r\n    return ()=>{\r\n\r\n      const content = props.node as ContentBlockType;\r\n      const module = PageEditor.findModule(content.componentInfo);\r\n\r\n      if(module != null){\r\n\r\n        const vnode = typeof module.component === \"function\" ? (module.component as any)(content.componentProps) : h(module.component,content.componentProps);\r\n\r\n        return h(\"div\",{class:\"mk-visual-page-editor__stage_block\"},[\r\n          vnode,\r\n          h(\"div\",{ \r\n            class:{\"mk-visual-page-editor__stage_block_mask\":true,active:props.active},\r\n            onClick:ev=>{\r\n              emit(\"click\",{ node:content,options:module,index:props.index,parent:props.parent,event:ev })\r\n            }\r\n          })\r\n        ])\r\n      }\r\n      else{\r\n        return h(\"div\",{class:\"mk-visual-page-editor__stage_block\"},[\r\n         `未知的模块【${content.componentInfo}】!请注册！`\r\n        ])\r\n      }\r\n\r\n      \r\n    }\r\n  }\r\n});\r\n"],"names":[],"mappings":";;AAIA,MAAA,cAAe,gBAAgB;AAAA,EAC7B,MAAK;AAAA,EACL,OAAM,CAAC,OAAO;AAAA,EACd,OAAM;AAAA,IACJ,MAAK,EAAC,MAAK,OAAM;AAAA,IACjB,QAAO,EAAC,MAAK,OAAM;AAAA,IACnB,OAAM,EAAC,MAAK,OAAM;AAAA,IAClB,QAAO,EAAC,MAAK,QAAO;AAAA,EACtB;AAAA,EACA,OAAM,CAAC,OAAM,EAAE,WAAS;AAEhB,UAAA,EAAE,eAAe;AAEvB,WAAO,MAAI;AAET,YAAM,UAAU,MAAM;AACtB,YAAM,SAAS,WAAW,WAAW,QAAQ,aAAa;AAE1D,UAAG,UAAU,MAAK;AAEhB,cAAM,QAAQ,OAAO,OAAO,cAAc,aAAc,OAAO,UAAkB,QAAQ,cAAc,IAAI,EAAE,OAAO,WAAU,QAAQ,cAAc;AAEpJ,eAAO,EAAE,OAAM,EAAC,OAAM,wCAAsC;AAAA,UAC1D;AAAA,UACA,EAAE,OAAM;AAAA,YACN,OAAM,EAAC,2CAA0C,MAAK,QAAO,MAAM,OAAM;AAAA,YACzE,SAAQ,CAAI,OAAA;AACV,mBAAK,SAAQ,EAAE,MAAK,SAAQ,SAAQ,QAAO,OAAM,MAAM,OAAM,QAAO,MAAM,QAAO,OAAM,IAAI;AAAA,YAC7F;AAAA,UAAA,CACD;AAAA,QAAA,CACF;AAAA,MAAA,OAEC;AACF,eAAO,EAAE,OAAM,EAAC,OAAM,wCAAsC;AAAA,UAC3D,SAAS,QAAQ,aAAa;AAAA,QAAA,CAC9B;AAAA,MACH;AAAA,IAAA;AAAA,EAIJ;AACF,CAAC;"}

package/dist/esm/components/basic/visual-page-editor/core/Dialog.js

@@ -0,0 +1,76 @@
+import { ref, createVNode, Fragment, createTextVNode } from "vue";
+import { Dialoger } from "@maketribe/dm";
+import { ElInput, ElCollapse, ElCollapseItem, ElButton } from "element-plus";
+import { showDynamicFormDialoger } from "../../dynamic-form-panel/dialog.js";
+import "@element-plus/icons-vue";
+import "@maketribe/utils";
+import "../../../../core/DataModelDefines.js";
+import "vue-router";
+import "@maketribe/request";
+import "@maketribe/locale";
+import "../../../../modules/ms/dataviews/ms-config/MsConfigTable.js";
+import "lodash-es";
+import "../../../../modules/ms/components/material-list/index.js";
+import "../../image-cropper/index.js";
+import "../../upload-file/upload-file.js";
+import "../../upload-file/context/web-file-upload-context.js";
+import "../../upload-file/context/web-file-upload-context-options.js";
+import "../../upload-file/ui/upload-image/index.js";
+import "../../upload-file/ui/upload-file/index.js";
+import "../../upload-file/ui/upload-video/index.js";
+import "../../upload-file/upload-file-options.js";
+import "./index.js";
+const showEditPanel = async (moduleOptons, props) => {
+  return await showDynamicFormDialoger(moduleOptons.title, moduleOptons.options, props);
+};
+const showModuleSelectPanel = async () => {
+  return new Promise((resolve) => {
+    const selectComponentOption = ref(null);
+    const handleCancelClick = () => {
+      dialogInstance.destroy();
+    };
+    const handleConfirmClick = () => {
+      dialogInstance.destroy();
+      resolve(selectComponentOption.value);
+    };
+    const dialogInstance = Dialoger.customRender({
+      title: "模块库",
+      class: "mk-html-editor-dialog",
+      width: "70%",
+      onClose: () => {
+        dialogInstance.destroy();
+      },
+      body: () => {
+        return createVNode("div", null, [createVNode(ElInput, null, null), createVNode(ElCollapse, null, {
+          default: () => [createVNode(ElCollapseItem, {
+            "title": "基础模块",
+            "name": "base"
+          }, null), createVNode(ElCollapseItem, {
+            "title": "业务模块",
+            "name": "business"
+          }, null), createVNode(ElCollapseItem, {
+            "title": "自定义模块",
+            "name": "custom"
+          }, null)]
+        })]);
+      },
+      footer: () => {
+        return createVNode(Fragment, null, [createVNode(ElButton, {
+          "onClick": handleCancelClick
+        }, {
+          default: () => [createTextVNode("取消")]
+        }), createVNode(ElButton, {
+          "type": "primary",
+          "onClick": handleConfirmClick
+        }, {
+          default: () => [createTextVNode("确定")]
+        })]);
+      }
+    });
+  });
+};
+export {
+  showEditPanel,
+  showModuleSelectPanel
+};
+//# sourceMappingURL=Dialog.js.map

package/dist/esm/components/basic/visual-page-editor/core/Dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.js","sources":["../../../../../../src/components/basic/visual-page-editor/core/Dialog.tsx"],"sourcesContent":["\r\nimport { Fragment, ref, unref, resolveComponent, h, reactive } from 'vue'\r\nimport { Dialoger } from '@maketribe/dm'\r\nimport { ElButton, ElForm, ElFormItem, ElCollapse, ElCollapseItem, ElInput } from \"element-plus\";\r\nimport { ModuleType } from \"./ModuleDefine\"\r\nimport { showDynamicFormDialoger } from \"../../dynamic-form-panel\"\r\nimport { useVisualPageEditor } from \".\"\r\n\r\n/**\r\n * \r\n * @param data \r\n * @param props \r\n * @returns \r\n */\r\nexport const showEditPanel = async (moduleOptons: ModuleType, props: any) => {\r\n\r\n  return await showDynamicFormDialoger(moduleOptons.title,moduleOptons.options,props)\r\n}\r\n\r\n/**\r\n * \r\n * @param data \r\n * @param props \r\n * @returns \r\n */\r\nexport const showModuleSelectPanel = async () => {\r\n  return new Promise(resolve => {\r\n\r\n    const { PageEditor } = useVisualPageEditor();\r\n\r\n    const selectComponentOption = ref(null);\r\n\r\n    // 取消编辑\r\n    const handleCancelClick = () => {\r\n      dialogInstance.destroy();\r\n    };\r\n\r\n    // 确认编辑\r\n    const handleConfirmClick = () => {\r\n      dialogInstance.destroy();\r\n      resolve(selectComponentOption.value);\r\n    };\r\n\r\n    const dialogInstance = Dialoger.customRender({\r\n      title: \"模块库\",\r\n      class: \"mk-html-editor-dialog\",\r\n      width: \"70%\",\r\n      onClose: () => {\r\n        dialogInstance.destroy();\r\n      },\r\n      body: () => {\r\n        return <div>\r\n          <ElInput />\r\n          <ElCollapse>\r\n            <ElCollapseItem title=\"基础模块\" name=\"base\">\r\n\r\n            </ElCollapseItem>\r\n            <ElCollapseItem title=\"业务模块\" name=\"business\">\r\n\r\n            </ElCollapseItem>\r\n            <ElCollapseItem title=\"自定义模块\" name=\"custom\">\r\n\r\n            </ElCollapseItem>\r\n          </ElCollapse>\r\n        </div>\r\n      },\r\n      footer: () => {\r\n        return <Fragment>\r\n          <ElButton onClick={handleCancelClick}>取消</ElButton>\r\n          <ElButton type=\"primary\" onClick={handleConfirmClick}>\r\n            确定\r\n          </ElButton>\r\n        </Fragment>\r\n      },\r\n    });\r\n  });\r\n}\r\n"],"names":["showEditPanel","moduleOptons","props","showDynamicFormDialoger","title","options","showModuleSelectPanel","Promise","resolve","selectComponentOption","ref","handleCancelClick","dialogInstance","destroy","handleConfirmClick","value","Dialoger","customRender","class","width","onClose","body","_createVNode","ElInput","ElCollapse","default","ElCollapseItem","footer","_Fragment","ElButton","_createTextVNode"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAcO,MAAMA,gBAAgB,OAAOC,cAA0BC,UAAe;AAE3E,SAAO,MAAMC,wBAAwBF,aAAaG,OAAMH,aAAaI,SAAQH,KAAK;AACpF;AAQaI,MAAAA,wBAAwB,YAAY;AAC/C,SAAO,IAAIC,QAAQC,aAAW;AAI5B,UAAMC,wBAAwBC,IAAI,IAAI;AAGtC,UAAMC,oBAAoBA,MAAM;AAC9BC,qBAAeC,QAAO;AAAA;AAIxB,UAAMC,qBAAqBA,MAAM;AAC/BF,qBAAeC,QAAO;AACtBL,cAAQC,sBAAsBM,KAAK;AAAA;AAGrC,UAAMH,iBAAiBI,SAASC,aAAa;AAAA,MAC3Cb,OAAO;AAAA,MACPc,OAAO;AAAA,MACPC,OAAO;AAAA,MACPC,SAASA,MAAM;AACbR,uBAAeC,QAAO;AAAA,MACvB;AAAA,MACDQ,MAAMA,MAAM;AACV,eAAAC,0BAAAA,YAAAC,SAAAD,MAAAA,IAAAA,GAAAA,YAAAE,YAAA,MAAA;AAAA,UAAAC,SAAAA,MAAAH,CAAAA,YAAAI,gBAAA;AAAA,YAAA,SAAA;AAAA,YAAA,QAAA;AAAA,aAAAJ,IAAAA,GAAAA,YAAAI,gBAAA;AAAA,YAAA,SAAA;AAAA,YAAA,QAAA;AAAA,aAAAJ,IAAAA,GAAAA,YAAAI,gBAAA;AAAA,YAAA,SAAA;AAAA,YAAA,QAAA;AAAA,UAAA,GAAA,IAAA,CAAA;AAAA,QAAA,CAAA,CAAA,CAAA;AAAA,MAcD;AAAA,MACDC,QAAQA,MAAM;AACZ,eAAAL,YAAAM,UAAAN,MAAAA,CAAAA,YAAAO,UAAA;AAAA,UAAA,WACqBlB;AAAAA,QAAiB,GAAA;AAAA,UAAAc,SAAAA,MAAA,CAAAK,gBAAA,IAAA,CAAA;AAAA,SAAAR,GAAAA,YAAAO,UAAA;AAAA,UAAA,QAAA;AAAA,UAAA,WACFf;AAAAA,QAAkB,GAAA;AAAA,UAAAW,SAAAA,MAAA,CAAAK,gBAAA,IAAA,CAAA;AAAA,QAAA,CAAA,CAAA,CAAA;AAAA,MAIxD;AAAA,IACF,CAAC;AAAA,EACH,CAAC;AACH;"}

package/dist/esm/components/basic/visual-page-editor/core/VisvalPageEditor.js

@@ -1,13 +1,73 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-import { shallowReactive } from "vue";
+import { reactive } from "vue";
 class VisualPageEditor {
   constructor() {
     __publicField(this, "_version");
     __publicField(this, "_content");
+    __publicField(this, "_modules");
     this._version = "1.0.0";
     this._content = null;
+    this._modules = [];
+  }
+  /**
+   * 模块列表
+   */
+  get baseModuleList() {
+    return this._modules.filter((itme) => itme.group == "base");
+  }
+  get businessModuleList() {
+    return this._modules.filter((itme) => itme.group == "business");
+  }
+  get customModuleList() {
+    return this._modules.filter((itme) => itme.group == "custom");
+  }
+  /**
+   * 注册基础模块
+   * @param name 
+   * @param title 
+   * @param component 
+   * @param options 
+   */
+  registerBaseModule(name, title, component, options) {
+    if (this._modules.find((m) => m.name == name)) {
+      throw new Error(`重复的模块【${title}】`);
+    }
+    this._modules.push({ name, title, group: "base", component, options });
+  }
+  /**
+   * 注册业务模块
+   * @param name 
+   * @param title 
+   * @param component 
+   * @param options 
+   */
+  registerBusinessModule(name, title, component, options) {
+    if (this._modules.find((m) => m.name == name)) {
+      throw new Error(`重复的模块【${title}】`);
+    }
+    this._modules.push({ name, title, group: "business", component, options });
+  }
+  /**
+   * 注册自定义模块
+   * @param name 
+   * @param title 
+   * @param component 
+   * @param options 
+   */
+  registerCustomModule(name, title, component, options) {
+    if (this._modules.find((m) => m.name == name)) {
+      throw new Error(`重复的模块【${title}】`);
+    }
+    this._modules.push({ name, title, group: "custom", component, options });
+  }
+  /**
+   * 查找
+   * @param name 
+   */
+  findModule(name) {
+    return this._modules.find((m) => m.name == name);
   }
   /**
    * 内容大小
@@ -40,7 +100,7 @@ class VisualPageEditor {
    * @param content 
    */
   setContent(content) {
-    this._content = shallowReactive(content);
+    this._content = reactive(content);
   }
   /**
    * 获取内容
@@ -50,6 +110,17 @@ class VisualPageEditor {
     var _a;
     return (_a = this._content) == null ? void 0 : _a.contents[index];
   }
+  /**
+   * 获取内容
+   * @returns 
+   */
+  edit(index, data) {
+    var _a;
+    if ((_a = this._content) == null ? void 0 : _a.contents[index]) {
+      this._content.contents[index].componentProps = data;
+      console.log(this._content);
+    }
+  }
   /**
    * 获取内容
    * @returns 

package/dist/esm/components/basic/visual-page-editor/core/VisvalPageEditor.js.map

@@ -1 +1 @@
-{"version":3,"file":"VisvalPageEditor.js","sources":["../../../../../../src/components/basic/visual-page-editor/core/VisvalPageEditor.ts"],"sourcesContent":["import { type ContentConfigType,type ContentBlockType } from \"./ContentConfig\"\r\n\r\nimport { shallowReactive } from \"vue\"\r\n\r\n\r\n/**\r\n * 页面编辑器\r\n */\r\nexport default class VisualPageEditor{\r\n\r\n  _version:string\r\n  _content:ContentConfigType|null\r\n\r\n  constructor(){\r\n    this._version = \"1.0.0\"\r\n    this._content = null;\r\n  }\r\n\r\n  /**\r\n   * 内容大小\r\n   * @returns \r\n   */\r\n  size(){\r\n    return this._content?.contents.length as number;\r\n  }\r\n\r\n  /**\r\n   * 删除\r\n   * @param index \r\n   */\r\n  remove(index:number){\r\n    this._content?.contents.splice(index,1)\r\n  }\r\n\r\n  /**\r\n   * 交换\r\n   * @param index \r\n   * @param exchangeIndex \r\n   */\r\n  exchange(index:number,exchangeIndex:number){\r\n    const item = this._content?.contents.splice(index,1)\r\n    this._content?.contents.splice(exchangeIndex,0,item![0])\r\n  }\r\n\r\n  /**\r\n   * 设置内容\r\n   * @param content \r\n   */\r\n  setContent(content:ContentConfigType){\r\n    this._content = shallowReactive(content);\r\n  }\r\n\r\n  /**\r\n   * 获取内容\r\n   * @returns \r\n   */\r\n  get(index:any):ContentBlockType {\r\n    return this._content?.contents[index] as ContentBlockType;\r\n  }\r\n\r\n  /**\r\n   * 获取内容\r\n   * @returns \r\n   */\r\n  getContent():ContentConfigType {\r\n    return this._content || {version:this._version ,contents:[]}\r\n  }\r\n\r\n}\r\n"],"names":[],"mappings":";;;;AAQA,MAAqB,iBAAgB;AAAA,EAKnC,cAAa;AAHb;AACA;AAGE,SAAK,WAAW;AAChB,SAAK,WAAW;AAAA,EAClB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,OAAM;;AACG,YAAA,UAAK,aAAL,mBAAe,SAAS;AAAA,EACjC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,OAAO,OAAa;;AAClB,eAAK,aAAL,mBAAe,SAAS,OAAO,OAAM;AAAA,EACvC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,SAAS,OAAa,eAAqB;;AACzC,UAAM,QAAO,UAAK,aAAL,mBAAe,SAAS,OAAO,OAAM;AAClD,eAAK,aAAL,mBAAe,SAAS,OAAO,eAAc,GAAE,KAAM,CAAC;AAAA,EACxD;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,WAAW,SAA0B;AAC9B,SAAA,WAAW,gBAAgB,OAAO;AAAA,EACzC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,OAA4B;;AACvB,YAAA,UAAK,aAAL,mBAAe,SAAS;AAAA,EACjC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,aAA+B;AACtB,WAAA,KAAK,YAAY,EAAC,SAAQ,KAAK,UAAU,UAAS,CAAA;EAC3D;AAEF;"}
+{"version":3,"file":"VisvalPageEditor.js","sources":["../../../../../../src/components/basic/visual-page-editor/core/VisvalPageEditor.ts"],"sourcesContent":["import { DynamicFormItemType } from \"../../dynamic-form-panel\"\r\nimport { type ContentConfigType,type ContentBlockType } from \"./ContentConfig\"\r\nimport { ModuleType } from \"./ModuleDefine\"\r\nimport { Component,  VNode,reactive } from \"vue\"\r\n\r\n\r\n/**\r\n * 页面编辑器\r\n */\r\nexport default class VisualPageEditor{\r\n\r\n  _version:string\r\n  _content: ContentConfigType|null\r\n  _modules:ModuleType[];\r\n\r\n  constructor(){\r\n    this._version = \"1.0.0\"\r\n    this._content = null;\r\n    this._modules = [];\r\n  }\r\n\r\n  /**\r\n   * 模块列表\r\n   */\r\n  get baseModuleList(){\r\n    return this._modules.filter(itme=>itme.group == \"base\");\r\n  }\r\n  get businessModuleList(){\r\n    return this._modules.filter(itme=>itme.group == \"business\");\r\n  }\r\n  get customModuleList(){\r\n    return this._modules.filter(itme=>itme.group == \"custom\");\r\n  }\r\n  /**\r\n   * 注册基础模块\r\n   * @param name \r\n   * @param title \r\n   * @param component \r\n   * @param options \r\n   */\r\n  registerBaseModule(name : string, title : string, component: Component|((props:unknown)=>VNode), options:DynamicFormItemType[]){\r\n    if(this._modules.find(m=>m.name == name)){\r\n      throw new Error(`重复的模块【${title}】`);\r\n    }\r\n    this._modules.push({ name,title,group:\"base\",component,options });\r\n  }\r\n\r\n  /**\r\n   * 注册业务模块\r\n   * @param name \r\n   * @param title \r\n   * @param component \r\n   * @param options \r\n   */\r\n  registerBusinessModule(name : string, title : string, component: Component|((props:unknown)=>VNode), options:DynamicFormItemType[]){\r\n    if(this._modules.find(m=>m.name == name)){\r\n      throw new Error(`重复的模块【${title}】`);\r\n    }\r\n    this._modules.push({ name,title,group:\"business\",component,options });\r\n  }\r\n\r\n  /**\r\n   * 注册自定义模块\r\n   * @param name \r\n   * @param title \r\n   * @param component \r\n   * @param options \r\n   */\r\n  registerCustomModule(name : string, title : string, component: Component|((props:unknown)=>VNode), options:DynamicFormItemType[]){\r\n    if(this._modules.find(m=>m.name == name)){\r\n      throw new Error(`重复的模块【${title}】`);\r\n    }\r\n    this._modules.push({ name,title,group:\"custom\",component,options });\r\n  }\r\n  /**\r\n   * 查找\r\n   * @param name \r\n   */\r\n  findModule(name:string):ModuleType|null|undefined{\r\n    return this._modules.find(m=>m.name == name)\r\n  }\r\n\r\n  /**\r\n   * 内容大小\r\n   * @returns \r\n   */\r\n  size(){\r\n    return this._content?.contents.length as number;\r\n  }\r\n\r\n  /**\r\n   * 删除\r\n   * @param index \r\n   */\r\n  remove(index:number){\r\n    this._content?.contents.splice(index,1)\r\n  }\r\n\r\n  /**\r\n   * 交换\r\n   * @param index \r\n   * @param exchangeIndex \r\n   */\r\n  exchange(index:number,exchangeIndex:number){\r\n    const item = this._content?.contents.splice(index,1)\r\n    this._content?.contents.splice(exchangeIndex,0,item![0])\r\n  }\r\n\r\n  /**\r\n   * 设置内容\r\n   * @param content \r\n   */\r\n  setContent(content:ContentConfigType){\r\n    this._content = reactive(content);\r\n  }\r\n\r\n  /**\r\n   * 获取内容\r\n   * @returns \r\n   */\r\n  get(index:number):ContentBlockType {\r\n    return this._content?.contents[index] as ContentBlockType;\r\n  }\r\n  /**\r\n   * 获取内容\r\n   * @returns \r\n   */\r\n  edit(index:number,data:object) {\r\n    if(this._content?.contents[index]){\r\n      this._content.contents[index].componentProps = data;\r\n      console.log(this._content);\r\n    }\r\n  }\r\n  /**\r\n   * 获取内容\r\n   * @returns \r\n   */\r\n  getContent():ContentConfigType {\r\n    return this._content || {version:this._version ,contents:[]}\r\n  }\r\n\r\n}\r\n"],"names":[],"mappings":";;;;AASA,MAAqB,iBAAgB;AAAA,EAMnC,cAAa;AAJb;AACA;AACA;AAGE,SAAK,WAAW;AAChB,SAAK,WAAW;AAChB,SAAK,WAAW;EAClB;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,iBAAgB;AAClB,WAAO,KAAK,SAAS,OAAO,CAAM,SAAA,KAAK,SAAS,MAAM;AAAA,EACxD;AAAA,EACA,IAAI,qBAAoB;AACtB,WAAO,KAAK,SAAS,OAAO,CAAM,SAAA,KAAK,SAAS,UAAU;AAAA,EAC5D;AAAA,EACA,IAAI,mBAAkB;AACpB,WAAO,KAAK,SAAS,OAAO,CAAM,SAAA,KAAK,SAAS,QAAQ;AAAA,EAC1D;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQA,mBAAmB,MAAe,OAAgB,WAA+C,SAA8B;AAC7H,QAAG,KAAK,SAAS,KAAK,OAAG,EAAE,QAAQ,IAAI,GAAE;AACvC,YAAM,IAAI,MAAM,SAAS,KAAK,GAAG;AAAA,IACnC;AACK,SAAA,SAAS,KAAK,EAAE,MAAK,OAAM,OAAM,QAAO,WAAU,QAAA,CAAS;AAAA,EAClE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASA,uBAAuB,MAAe,OAAgB,WAA+C,SAA8B;AACjI,QAAG,KAAK,SAAS,KAAK,OAAG,EAAE,QAAQ,IAAI,GAAE;AACvC,YAAM,IAAI,MAAM,SAAS,KAAK,GAAG;AAAA,IACnC;AACK,SAAA,SAAS,KAAK,EAAE,MAAK,OAAM,OAAM,YAAW,WAAU,QAAA,CAAS;AAAA,EACtE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASA,qBAAqB,MAAe,OAAgB,WAA+C,SAA8B;AAC/H,QAAG,KAAK,SAAS,KAAK,OAAG,EAAE,QAAQ,IAAI,GAAE;AACvC,YAAM,IAAI,MAAM,SAAS,KAAK,GAAG;AAAA,IACnC;AACK,SAAA,SAAS,KAAK,EAAE,MAAK,OAAM,OAAM,UAAS,WAAU,QAAA,CAAS;AAAA,EACpE;AAAA;AAAA;AAAA;AAAA;AAAA,EAKA,WAAW,MAAsC;AAC/C,WAAO,KAAK,SAAS,KAAK,CAAG,MAAA,EAAE,QAAQ,IAAI;AAAA,EAC7C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,OAAM;;AACG,YAAA,UAAK,aAAL,mBAAe,SAAS;AAAA,EACjC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,OAAO,OAAa;;AAClB,eAAK,aAAL,mBAAe,SAAS,OAAO,OAAM;AAAA,EACvC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,SAAS,OAAa,eAAqB;;AACzC,UAAM,QAAO,UAAK,aAAL,mBAAe,SAAS,OAAO,OAAM;AAClD,eAAK,aAAL,mBAAe,SAAS,OAAO,eAAc,GAAE,KAAM,CAAC;AAAA,EACxD;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,WAAW,SAA0B;AAC9B,SAAA,WAAW,SAAS,OAAO;AAAA,EAClC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,OAA+B;;AAC1B,YAAA,UAAK,aAAL,mBAAe,SAAS;AAAA,EACjC;AAAA;AAAA;AAAA;AAAA;AAAA,EAKA,KAAK,OAAa,MAAa;;AAC7B,SAAG,UAAK,aAAL,mBAAe,SAAS,QAAO;AAChC,WAAK,SAAS,SAAS,KAAK,EAAE,iBAAiB;AACvC,cAAA,IAAI,KAAK,QAAQ;AAAA,IAC3B;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA,EAKA,aAA+B;AACtB,WAAA,KAAK,YAAY,EAAC,SAAQ,KAAK,UAAU,UAAS,CAAA;EAC3D;AAEF;"}

package/dist/esm/components/basic/visual-page-editor/core/index.js

@@ -1,22 +1,30 @@
 import { shallowReactive, ref } from "vue";
 import VisualPageEditor from "./VisvalPageEditor.js";
-const RenderComponents = shallowReactive([]);
+import "@maketribe/dm";
+import "element-plus";
+import "@element-plus/icons-vue";
+import "@maketribe/utils";
+import "../../../../core/DataModelDefines.js";
+import "vue-router";
+import "@maketribe/request";
+import "@maketribe/locale";
+import "../../../../modules/ms/dataviews/ms-config/MsConfigTable.js";
+import "lodash-es";
+import "../../../../modules/ms/components/material-list/index.js";
+import "../../image-cropper/index.js";
+import "../../upload-file/upload-file.js";
+import "../../upload-file/context/web-file-upload-context.js";
+import "../../upload-file/context/web-file-upload-context-options.js";
+import "../../upload-file/ui/upload-image/index.js";
+import "../../upload-file/ui/upload-file/index.js";
+import "../../upload-file/ui/upload-video/index.js";
+import "../../upload-file/upload-file-options.js";
 const PageEditor = shallowReactive(new VisualPageEditor());
 const ViewDevice = ref("pc");
-const RegisterRenderComponent = (options) => {
-  RenderComponents.push(options);
-};
-const useRenderComponent = () => {
-  return {
-    RenderComponents,
-    RegisterRenderComponent
-  };
-};
-const usePageEditor = () => {
+const useVisualPageEditor = () => {
   return { PageEditor, ViewDevice };
 };
 export {
-  usePageEditor,
-  useRenderComponent
+  useVisualPageEditor
 };
 //# sourceMappingURL=index.js.map

package/dist/esm/components/basic/visual-page-editor/core/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../../src/components/basic/visual-page-editor/core/index.ts"],"sourcesContent":["\r\nimport { shallowReactive,ref } from \"vue\"\r\n\r\nimport { RenderComponentType } from \"./RenderComponent\"\r\n\r\nimport VisualPageEditor from \"./VisvalPageEditor\"\r\n\r\n\r\nconst RenderComponents = shallowReactive<RenderComponentType[]>([]);\r\n\r\n// 页面编辑器\r\nconst PageEditor = shallowReactive<VisualPageEditor>(new VisualPageEditor())\r\n// pc | mobile\r\nconst ViewDevice = ref('pc')\r\n/**\r\n * 注册渲染组件\r\n * @param options \r\n */\r\nconst RegisterRenderComponent = (options:RenderComponentType)=>{\r\n  RenderComponents.push(options);\r\n}\r\n\r\n/**\r\n * \r\n * @returns \r\n */\r\nexport const useRenderComponent = ()=>{\r\n\r\n  return {\r\n    RenderComponents,\r\n    RegisterRenderComponent\r\n  }\r\n}\r\n\r\n\r\n/**\r\n * \r\n * @returns \r\n */\r\nexport const usePageEditor = ()=>{\r\n  return { PageEditor, ViewDevice }\r\n}\r\n\r\n"],"names":[],"mappings":";;AAQA,MAAM,mBAAmB,gBAAuC,CAAA,CAAE;AAGlE,MAAM,aAAa,gBAAkC,IAAI,iBAAA,CAAkB;AAE3E,MAAM,aAAa,IAAI,IAAI;AAK3B,MAAM,0BAA0B,CAAC,YAA8B;AAC7D,mBAAiB,KAAK,OAAO;AAC/B;AAMO,MAAM,qBAAqB,MAAI;AAE7B,SAAA;AAAA,IACL;AAAA,IACA;AAAA,EAAA;AAEJ;AAOO,MAAM,gBAAgB,MAAI;AACxB,SAAA,EAAE,YAAY;AACvB;"}
+{"version":3,"file":"index.js","sources":["../../../../../../src/components/basic/visual-page-editor/core/index.ts"],"sourcesContent":["\r\nimport { shallowReactive,ref } from \"vue\"\r\n\r\nimport VisualPageEditor from \"./VisvalPageEditor\"\r\n\r\n// 页面编辑器\r\nconst PageEditor = shallowReactive<VisualPageEditor>(new VisualPageEditor())\r\n\r\n// pc | mobile\r\nconst ViewDevice = ref('pc')\r\n\r\n\r\nexport * from \"./Dialog\"\r\n\r\n/**\r\n * \r\n * @returns \r\n */\r\nexport const useVisualPageEditor = ()=>{\r\n  return { PageEditor, ViewDevice }\r\n}\r\n\r\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AAMA,MAAM,aAAa,gBAAkC,IAAI,iBAAA,CAAkB;AAG3E,MAAM,aAAa,IAAI,IAAI;AASpB,MAAM,sBAAsB,MAAI;AAC9B,SAAA,EAAE,YAAY;AACvB;"}