ele-admin-plus 1.3.0 → 1.4.0-beta.1

package/lib/ele-pro-form-builder/index.cjs

@@ -1,6 +1,6 @@
 "use strict";
 const vue = require("vue");
-const core = require("../utils/core");
+const common = require("../utils/common");
 const hook = require("../utils/hook");
 const util = require("../ele-pro-form/util");
 const EleSplitPanel = require("../ele-split-panel/index");
@@ -14,6 +14,7 @@ const PropsForm = require("./components/props-form");
 const ConfigForm = require("./components/config-form");
 const TableToolMenu = require("./components/table-tool-menu");
 const ComponentPicker = require("./components/component-picker");
+const buildCore = require("./components/build-core");
 const props = require("./props");
 const _hoisted_1 = { class: "ele-pro-form-builder-tab-body" };
 const _hoisted_2 = { class: "ele-pro-form-builder-body-wrapper" };
@@ -24,48 +25,36 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   props: props.proFormBuilderProps,
   emits: props.proFormBuilderEmits,
   setup(__props, { emit: __emit }) {
-    const defaultHeaderRightTools = [
-      "import",
-      "export",
-      "clear",
-      "preview"
-    ];
     const props2 = __props;
     const emit = __emit;
-    const [mobile] = hook.useMobile((isMobile) => {
-      leftSideCollapse.value = isMobile;
-      rightSideCollapse.value = isMobile;
-    });
-    const [mobileDevice] = hook.useMobileDevice();
     const formProps = vue.useModel(props2, "modelValue");
-    const leftSideCollapse = vue.ref(mobile.value);
-    const rightSideCollapse = vue.ref(mobile.value);
-    const leftTabActive = vue.ref("components");
+    const leftSideCollapse = vue.ref(false);
+    const rightSideCollapse = vue.ref(false);
+    const [isMobile] = hook.useMobile((mobile) => {
+      leftSideCollapse.value = mobile;
+      rightSideCollapse.value = mobile;
+    });
+    const [isMobileDevice] = hook.useMobileDevice();
+    const leftTabActive = vue.ref(
+      "components"
+    );
     const rightTabActive = vue.ref("formProps");
     const currentFormItemId = vue.ref();
     const currentScreen = vue.ref("pc");
     const historyDataList = vue.ref([]);
     const redoDataList = vue.ref([]);
     const tableToolMenuRef = vue.ref(null);
-    const showAddChildPicker = vue.ref(false);
-    const addParentFormItemId = vue.ref();
-    const headerRightToolNames = vue.computed(() => {
-      if (typeof props2.headerTools === "undefined" || props2.headerTools === true) {
-        return defaultHeaderRightTools;
-      }
-      if (!props2.headerTools) {
-        return [];
-      }
-      return props2.headerTools;
+    const componentPickerOption = vue.reactive({
+      visible: false,
+      addParentFormItemId: void 0,
+      editFormItemId: void 0,
+      editFormItemType: void 0
     });
-    const setFormPropValue = (field, value) => {
-      if (!formProps.value) {
-        formProps.value = { items: [] };
-      }
-      if (!field) {
-        Object.assign(formProps.value, value);
-      } else {
-        util.setValue(formProps.value, field, value);
+    let storeHistoryTimer = null;
+    const stopStoreHistoryTimer = () => {
+      if (storeHistoryTimer != null) {
+        clearTimeout(storeHistoryTimer);
+        storeHistoryTimer = null;
       }
     };
     const getFormItems = () => {
@@ -84,59 +73,50 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         const keys = Object.keys(data).filter(
           (k) => typeof data[k] !== "undefined"
         );
-        Object.assign(formProps.value, core.omit(props2.proFormInitialProps, keys), {
+        Object.assign(formProps.value, common.omit(props2.proFormInitialProps, keys), {
           items: items || []
         });
         return;
       }
       formProps.value.items = items || [];
     };
-    const storeHistory = () => {
-      const undoData = JSON.parse(
-        JSON.stringify({
-          items: getFormItems()
-        })
-      );
-      historyDataList.value.push(undoData);
-      redoDataList.value = [];
-    };
-    const handleUndo = () => {
-      const data = historyDataList.value.pop();
-      if (!data) {
-        return;
+    const setFormPropValue = (field, value, store) => {
+      {
+        storeHistory(!!field);
       }
-      const redoData = JSON.parse(
-        JSON.stringify({
-          items: getFormItems()
-        })
-      );
-      redoDataList.value.unshift(redoData);
-      setFormItems(data.items);
-      currentFormItemId.value = void 0;
-    };
-    const handleRedo = () => {
-      const data = redoDataList.value.shift();
-      if (!data) {
-        return;
+      if (!formProps.value) {
+        formProps.value = { items: [] };
+      }
+      if (!field) {
+        const excludeFields = ["items"];
+        const temp = common.omit(value, excludeFields);
+        Object.assign(formProps.value, temp);
+        const valueKeys = Object.keys(temp);
+        Object.keys(formProps.value).forEach((key) => {
+          if (formProps.value && !excludeFields.includes(key) && !valueKeys.includes(key) && typeof formProps.value[key] !== "undefined") {
+            formProps.value[key] = void 0;
+          }
+        });
+      } else {
+        util.setValue(formProps.value, field, value);
       }
-      const undoData = JSON.parse(
-        JSON.stringify({
-          items: getFormItems()
-        })
-      );
-      historyDataList.value.push(undoData);
-      setFormItems(data.items);
-      currentFormItemId.value = void 0;
-    };
-    const handleUpdateFormProp = (field, value) => {
-      setFormPropValue(field, value);
     };
-    const updateFormItemProp = (formItemId, field, value) => {
-      const item = core.findTree(getFormItems(), (item2) => item2.key === formItemId);
+    const updateFormItemProp = (formItemId, field, value, store) => {
+      const item = common.findTree(getFormItems(), (item2) => item2.key === formItemId);
       if (item) {
+        if (store) {
+          storeHistory(!!field);
+        }
         if (!field) {
-          const temp = core.omit(value, ["key", "children"]);
+          const excludeFields = ["key", "children"];
+          const temp = common.omit(value, excludeFields);
           Object.assign(item, temp);
+          const valueKeys = Object.keys(temp);
+          Object.keys(item).forEach((key) => {
+            if (item && !excludeFields.includes(key) && !valueKeys.includes(key) && typeof item[key] !== "undefined") {
+              item[key] = void 0;
+            }
+          });
         } else {
           util.setValue(item, field, value);
         }
@@ -147,7 +127,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         currentFormItemId.value = void 0;
       }
       const formItemsData = getFormItems();
-      core.eachTree(formItemsData, (item, index, parent) => {
+      common.eachTree(formItemsData, (item, index, parent) => {
         if (item.key === formItemId) {
           if (parent) {
             if (parent.children) {
@@ -160,15 +140,23 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         }
       });
     };
+    const handleUpdateFormProp = (field, value) => {
+      setFormPropValue(field, value);
+    };
+    const handleUpdateFormItemProp = (formItemId, field, value) => {
+      updateFormItemProp(formItemId, field, value, true);
+    };
     const handleUpdateItems = ({
       addItems,
       updateItems,
       deleteItemIds
     }) => {
       hideTableTool();
-      showAddChildPicker.value = false;
-      addParentFormItemId.value = void 0;
-      if (addItems.length || deleteItemIds.length) {
+      componentPickerOption.visible = false;
+      componentPickerOption.addParentFormItemId = void 0;
+      componentPickerOption.editFormItemId = void 0;
+      componentPickerOption.editFormItemType = void 0;
+      if (addItems.length || deleteItemIds.length || updateItems.length) {
         storeHistory();
       }
       updateItems.forEach((effect) => {
@@ -187,7 +175,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
           }
           return;
         }
-        const parent = core.findTree(
+        const parent = common.findTree(
           getFormItems(),
           (item2) => item2.key === parentItemId
         );
@@ -206,12 +194,12 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       deleteItemIds.forEach((formItemId) => {
         deleteFormItem(formItemId);
       });
-      if (addItems.length && mobile.value) {
+      if (addItems.length && isMobile.value) {
         leftSideCollapse.value = true;
       }
     };
     const handleSortItemChildren = (childIds, formItemId) => {
-      const item = core.findTree(getFormItems(), (item2) => item2.key === formItemId);
+      const item = common.findTree(getFormItems(), (item2) => item2.key === formItemId);
       if (item && item.children) {
         storeHistory();
         item.children.sort((a, b) => {
@@ -221,16 +209,16 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         });
       }
     };
-    const handleUpdateItemChildren = (data, parent) => {
+    const handleUpdateItemChildren = (data, parentKey) => {
       hideTableTool();
-      storeHistory();
-      if (!parent) {
+      storeHistory(true);
+      if (parentKey == null) {
         setFormItems(data);
         return;
       }
-      core.eachTree(getFormItems(), (item) => {
-        if (item.key === parent.key) {
-          parent.children = data;
+      common.eachTree(getFormItems(), (item) => {
+        if (item.key === parentKey) {
+          item.children = data;
           return false;
         }
       });
@@ -238,6 +226,45 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     const handleUpdateFormItems = (items) => {
       handleUpdateItemChildren(items);
     };
+    const getStoreConfigData = () => {
+      return buildCore.deepCloneObject(formProps.value);
+    };
+    const setStoreConfigData = (data) => {
+      formProps.value = data;
+    };
+    const storeHistory = (delay) => {
+      stopStoreHistoryTimer();
+      const undoData = getStoreConfigData();
+      if (!delay) {
+        historyDataList.value.push(undoData);
+        redoDataList.value = [];
+        return;
+      }
+      storeHistoryTimer = setTimeout(() => {
+        historyDataList.value.push(undoData);
+        redoDataList.value = [];
+      }, 600);
+    };
+    const handleUndo = () => {
+      const data = historyDataList.value.pop();
+      if (!data) {
+        return;
+      }
+      const redoData = getStoreConfigData();
+      redoDataList.value.unshift(redoData);
+      setStoreConfigData(data);
+      currentFormItemId.value = void 0;
+    };
+    const handleRedo = () => {
+      const data = redoDataList.value.shift();
+      if (!data) {
+        return;
+      }
+      const undoData = getStoreConfigData();
+      historyDataList.value.push(undoData);
+      setStoreConfigData(data);
+      currentFormItemId.value = void 0;
+    };
     const handleClear = () => {
       if (getFormItems().length) {
         storeHistory();
@@ -249,7 +276,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       storeHistory();
       formProps.value = { ...data, items: data.items || [] };
       currentFormItemId.value = void 0;
-      if (mobile.value) {
+      if (isMobile.value) {
         leftSideCollapse.value = true;
         rightSideCollapse.value = true;
       }
@@ -260,9 +287,17 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     const hideTableTool = () => {
       tableToolMenuRef.value && tableToolMenuRef.value.hideMenu();
     };
-    const handleOpenComponentPicker = (formItemId) => {
-      showAddChildPicker.value = true;
-      addParentFormItemId.value = formItemId;
+    const handleOpenComponentPicker = (formItemId, formItemType) => {
+      if (formItemType != null) {
+        componentPickerOption.addParentFormItemId = void 0;
+        componentPickerOption.editFormItemId = formItemId;
+        componentPickerOption.editFormItemType = formItemType;
+      } else {
+        componentPickerOption.addParentFormItemId = formItemId;
+        componentPickerOption.editFormItemId = void 0;
+        componentPickerOption.editFormItemType = void 0;
+      }
+      componentPickerOption.visible = true;
     };
     const handlePreviewFormSubmit = (data) => {
       emit("previewFormSubmit", data);
@@ -276,25 +311,30 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         rightTabActive.value = "formProps";
       }
     });
+    vue.onBeforeUnmount(() => {
+      stopStoreHistoryTimer();
+    });
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createBlock(EleSplitPanel, {
+      return vue.openBlock(), vue.createBlock(EleSplitPanel, vue.mergeProps({
         space: "0px",
         size: "280px",
-        allowCollapse: true,
+        allowCollapse: true
+      }, _ctx.splitPanelProps || {}, {
         collapse: leftSideCollapse.value,
         "onUpdate:collapse": _cache[8] || (_cache[8] = ($event) => leftSideCollapse.value = $event),
         class: "ele-pro-form-builder-wrapper"
-      }, {
+      }), {
         body: vue.withCtx(() => [
-          vue.createVNode(EleSplitPanel, {
+          vue.createVNode(EleSplitPanel, vue.mergeProps({
             space: "0px",
             size: "220px",
             reverse: true,
-            allowCollapse: true,
+            allowCollapse: true
+          }, _ctx.rightSplitPanelProps || {}, {
             collapse: rightSideCollapse.value,
             "onUpdate:collapse": _cache[6] || (_cache[6] = ($event) => rightSideCollapse.value = $event),
             class: "ele-pro-form-builder-main-wrapper"
-          }, {
+          }), {
             body: vue.withCtx(() => [
               vue.createElementVNode("div", _hoisted_2, [
                 vue.createVNode(BodyHeader, {
@@ -303,10 +343,12 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                   undoDisabled: !historyDataList.value.length,
                   redoDisabled: !redoDataList.value.length,
                   formProps: vue.unref(formProps),
-                  headerTools: headerRightToolNames.value,
+                  headerTools: _ctx.headerTools,
                   proFormComponent: _ctx.proFormComponent,
                   jsonEditerComponent: _ctx.jsonEditerComponent,
+                  codeViewerComponent: _ctx.codeViewerComponent,
                   itemTypeData: _ctx.itemTypeData,
+                  componentData: _ctx.componentData,
                   httpRequest: _ctx.httpRequest,
                   onUndo: handleUndo,
                   onRedo: handleRedo,
@@ -322,7 +364,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                       ])
                     };
                   })
-                ]), 1032, ["currentScreen", "undoDisabled", "redoDisabled", "formProps", "headerTools", "proFormComponent", "jsonEditerComponent", "itemTypeData", "httpRequest"]),
+                ]), 1032, ["currentScreen", "undoDisabled", "redoDisabled", "formProps", "headerTools", "proFormComponent", "jsonEditerComponent", "codeViewerComponent", "itemTypeData", "componentData", "httpRequest"]),
                 vue.createVNode(BodyForm, {
                   formProps: vue.unref(formProps),
                   componentData: _ctx.componentData,
@@ -370,7 +412,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                   htmlEditerComponent: _ctx.htmlEditerComponent,
                   itemTypeData: _ctx.itemTypeData,
                   httpRequest: _ctx.httpRequest,
-                  onUpdateItem: updateFormItemProp,
+                  onUpdateItem: handleUpdateFormItemProp,
                   onUpdateItems: handleUpdateItems,
                   onSortItemChildren: handleSortItemChildren,
                   onOpenComponentPicker: handleOpenComponentPicker
@@ -406,7 +448,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
               ])
             ]),
             _: 3
-          }, 8, ["collapse"])
+          }, 16, ["collapse"])
         ]),
         default: vue.withCtx(() => {
           var _a, _b, _c, _d;
@@ -439,7 +481,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
               }, null, 8, ["templateData"])) : (vue.openBlock(), vue.createBlock(ComponentList, {
                 key: 2,
                 formItems: (_b = vue.unref(formProps)) == null ? void 0 : _b.items,
-                draggable: !vue.unref(mobileDevice) && !vue.unref(mobile),
+                draggable: !vue.unref(isMobileDevice) && !vue.unref(isMobile),
                 componentData: _ctx.componentData,
                 itemTypeData: _ctx.itemTypeData,
                 onUpdateItems: handleUpdateItems
@@ -453,18 +495,20 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
               onUpdateItems: handleUpdateItems
             }, null, 8, ["formItems", "componentData"]),
             vue.createVNode(ComponentPicker, {
-              modelValue: showAddChildPicker.value,
-              "onUpdate:modelValue": _cache[7] || (_cache[7] = ($event) => showAddChildPicker.value = $event),
-              addParentFormItemId: addParentFormItemId.value,
+              modelValue: componentPickerOption.visible,
+              "onUpdate:modelValue": _cache[7] || (_cache[7] = ($event) => componentPickerOption.visible = $event),
+              addParentFormItemId: componentPickerOption.addParentFormItemId,
+              editFormItemId: componentPickerOption.editFormItemId,
+              editFormItemType: componentPickerOption.editFormItemType,
               formItems: (_d = vue.unref(formProps)) == null ? void 0 : _d.items,
               componentData: _ctx.componentData,
               itemTypeData: _ctx.itemTypeData,
               onUpdateItems: handleUpdateItems
-            }, null, 8, ["modelValue", "addParentFormItemId", "formItems", "componentData", "itemTypeData"])
+            }, null, 8, ["modelValue", "addParentFormItemId", "editFormItemId", "editFormItemType", "formItems", "componentData", "itemTypeData"])
           ];
         }),
         _: 3
-      }, 8, ["collapse"]);
+      }, 16, ["collapse"]);
     };
   }
 });

package/lib/ele-pro-form-builder/index.d.ts

@@ -1,49 +1,55 @@
+import { EleProFormProps } from '../ele-app/plus';
 import { ProFormItemProps } from '../ele-pro-form/types';
-import { TemplateFormConfig, HeaderRightToolName } from './types';
 
 declare function __VLS_template(): Partial<Record<string, (_: any) => any>> & Partial<Record<string, (_: any) => any>> & Partial<Record<string, (_: any) => any>> & Partial<Record<string, (_: any) => any>>;
 declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
-    modelValue: import('vue').PropType<TemplateFormConfig>;
+    modelValue: import('vue').PropType<EleProFormProps>;
     headerTools: {
-        type: import('vue').PropType<boolean | HeaderRightToolName[]>;
-        default: () => boolean;
+        type: import('vue').PropType<boolean | import('./types').HeaderRightToolName[]>;
+        default: () => undefined;
     };
     componentData: import('vue').PropType<import('./types').ComponentGroup[]>;
     templateData: import('vue').PropType<import('./types').TemplateItem[]>;
     configFormItems: import('vue').PropType<ProFormItemProps[]>;
     configFormPresetProps: import('vue').PropType<import('./types').TemplateFormProps>;
     proFormInitialProps: import('vue').PropType<import('./types').TemplateFormProps>;
+    splitPanelProps: import('vue').PropType<import('../ele-app/plus').EleSplitPanelProps>;
+    rightSplitPanelProps: import('vue').PropType<import('../ele-app/plus').EleSplitPanelProps>;
     proFormComponent: import('vue').PropType<import('../ele-app/types').UserComponent>;
     codeEditerComponent: import('vue').PropType<import('../ele-app/types').UserComponent>;
     jsonEditerComponent: import('vue').PropType<import('../ele-app/types').UserComponent>;
     htmlEditerComponent: import('vue').PropType<import('../ele-app/types').UserComponent>;
+    codeViewerComponent: import('vue').PropType<import('../ele-app/types').UserComponent>;
     itemTypeData: import('vue').PropType<import('../ele-pro-form/types').ProFormItemTypeData[]>;
     httpRequest: (ObjectConstructor | FunctionConstructor)[];
 }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    "update:modelValue": (_config: TemplateFormConfig) => void;
+    "update:modelValue": (_config: EleProFormProps) => void;
     previewFormSubmit: (_data: Record<string, any>) => void;
 }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
-    modelValue: import('vue').PropType<TemplateFormConfig>;
+    modelValue: import('vue').PropType<EleProFormProps>;
     headerTools: {
-        type: import('vue').PropType<boolean | HeaderRightToolName[]>;
-        default: () => boolean;
+        type: import('vue').PropType<boolean | import('./types').HeaderRightToolName[]>;
+        default: () => undefined;
     };
     componentData: import('vue').PropType<import('./types').ComponentGroup[]>;
     templateData: import('vue').PropType<import('./types').TemplateItem[]>;
     configFormItems: import('vue').PropType<ProFormItemProps[]>;
     configFormPresetProps: import('vue').PropType<import('./types').TemplateFormProps>;
     proFormInitialProps: import('vue').PropType<import('./types').TemplateFormProps>;
+    splitPanelProps: import('vue').PropType<import('../ele-app/plus').EleSplitPanelProps>;
+    rightSplitPanelProps: import('vue').PropType<import('../ele-app/plus').EleSplitPanelProps>;
     proFormComponent: import('vue').PropType<import('../ele-app/types').UserComponent>;
     codeEditerComponent: import('vue').PropType<import('../ele-app/types').UserComponent>;
     jsonEditerComponent: import('vue').PropType<import('../ele-app/types').UserComponent>;
     htmlEditerComponent: import('vue').PropType<import('../ele-app/types').UserComponent>;
+    codeViewerComponent: import('vue').PropType<import('../ele-app/types').UserComponent>;
     itemTypeData: import('vue').PropType<import('../ele-pro-form/types').ProFormItemTypeData[]>;
     httpRequest: (ObjectConstructor | FunctionConstructor)[];
 }>> & Readonly<{
-    "onUpdate:modelValue"?: ((_config: TemplateFormConfig) => any) | undefined;
+    "onUpdate:modelValue"?: ((_config: EleProFormProps) => any) | undefined;
     onPreviewFormSubmit?: ((_data: Record<string, any>) => any) | undefined;
 }>, {
-    headerTools: boolean | HeaderRightToolName[];
+    headerTools: boolean | import('./types').HeaderRightToolName[];
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
 export default _default;

package/lib/ele-pro-form-builder/props.cjs

@@ -6,7 +6,7 @@ const proFormBuilderProps = {
   /** 顶栏右侧操作按钮顺序 */
   headerTools: {
     type: [Boolean, Array],
-    default: () => true
+    default: () => void 0
   },
   /** 组件库数据 */
   componentData: Array,
@@ -18,6 +18,10 @@ const proFormBuilderProps = {
   configFormPresetProps: Object,
   /** 初始添加时的表单属性 */
   proFormInitialProps: Object,
+  /** 自定义分割面板组件属性 */
+  splitPanelProps: Object,
+  /** 自定义右侧分割面板组件属性 */
+  rightSplitPanelProps: Object,
   /** 高级表单组件 */
   proFormComponent: [String, Object, Function],
   /** 代码编辑器组件 */
@@ -26,6 +30,8 @@ const proFormBuilderProps = {
   jsonEditerComponent: [String, Object, Function],
   /** 富文本编辑器组件 */
   htmlEditerComponent: [String, Object, Function],
+  /** 代码查看器组件 */
+  codeViewerComponent: [String, Object, Function],
   /** 高级表单组件类型数据 */
   itemTypeData: Array,
   /** 远程数据源请求工具 */

package/lib/ele-pro-form-builder/props.d.ts

@@ -1,18 +1,19 @@
 import { PropType, ExtractPropTypes } from 'vue';
 import { UserComponent } from '../ele-app/types';
+import { EleProFormProps, EleSplitPanelProps } from '../ele-app/plus';
 import { ProFormItemProps, ProFormItemTypeData } from '../ele-pro-form/types';
-import { TemplateFormConfig, TemplateFormProps, ComponentGroup, TemplateItem, HeaderRightToolName } from './types';
+import { TemplateFormProps, ComponentGroup, TemplateItem, HeaderRightToolName } from './types';
 
 /**
  * 属性
  */
 export declare const proFormBuilderProps: {
     /** 配置数据 */
-    modelValue: PropType<TemplateFormConfig>;
+    modelValue: PropType<EleProFormProps>;
     /** 顶栏右侧操作按钮顺序 */
     headerTools: {
         type: PropType<boolean | HeaderRightToolName[]>;
-        default: () => boolean;
+        default: () => undefined;
     };
     /** 组件库数据 */
     componentData: PropType<ComponentGroup[]>;
@@ -24,6 +25,10 @@ export declare const proFormBuilderProps: {
     configFormPresetProps: PropType<TemplateFormProps>;
     /** 初始添加时的表单属性 */
     proFormInitialProps: PropType<TemplateFormProps>;
+    /** 自定义分割面板组件属性 */
+    splitPanelProps: PropType<EleSplitPanelProps>;
+    /** 自定义右侧分割面板组件属性 */
+    rightSplitPanelProps: PropType<EleSplitPanelProps>;
     /** 高级表单组件 */
     proFormComponent: PropType<UserComponent>;
     /** 代码编辑器组件 */
@@ -32,6 +37,8 @@ export declare const proFormBuilderProps: {
     jsonEditerComponent: PropType<UserComponent>;
     /** 富文本编辑器组件 */
     htmlEditerComponent: PropType<UserComponent>;
+    /** 代码查看器组件 */
+    codeViewerComponent: PropType<UserComponent>;
     /** 高级表单组件类型数据 */
     itemTypeData: PropType<ProFormItemTypeData[]>;
     /** 远程数据源请求工具 */
@@ -42,6 +49,6 @@ export type ProFormBuilderProps = ExtractPropTypes<typeof proFormBuilderProps>;
  * 事件
  */
 export declare const proFormBuilderEmits: {
-    'update:modelValue': (_config: TemplateFormConfig) => boolean;
+    'update:modelValue': (_config: EleProFormProps) => boolean;
     previewFormSubmit: (_data: Record<string, any>) => boolean;
 };

package/lib/ele-pro-form-builder/style/css-var.scss

@@ -2,7 +2,8 @@
 
 /* 表单构建器主题变量 */
 @mixin set-pro-form-builder-var($var) {
-  .ele-pro-form-builder-wrapper {
+  .ele-pro-form-builder-wrapper,
+  .ele-pro-form-builder-component-picker {
     @include set-ele-var('pro-form-builder', $var);
   }
 }