@vipl520/dk-ui 1.0.1

package/es/packages/dk-ui/src/page-diy/src/page-diy.vue.mjs

@@ -0,0 +1,1506 @@
+import { deepCopy } from '@form-create/utils/lib/deepextend';
+import is, { hasProperty } from '@form-create/utils/lib/type';
+import { lower } from '@form-create/utils/lib/tocase';
+import draggable from 'vuedraggable/src/vuedraggable';
+import PreviewPhone from './components/PreviewPhone.vue.mjs';
+import { createMenu, ruleList } from './config/rule/index.mjs';
+import './utils/index.mjs';
+import { defineComponent, toRefs, getCurrentInstance, ref, provide, toRef, computed, reactive, watch, nextTick, markRaw, createElementVNode, resolveComponent, resolveDirective, openBlock, createBlock, withCtx, createCommentVNode, createVNode, normalizeStyle, createElementBlock, Fragment, renderList, toDisplayString, normalizeClass, createTextVNode, withModifiers, renderSlot, withDirectives, vShow } from 'vue';
+import './config/base/index.mjs';
+import { isArray } from '@vipl520/utils';
+import '../../../../../node_modules/.pnpm/element-plus@2.3.14_vue@3.3.4/node_modules/element-plus/es/index.mjs';
+import _export_sfc from '../../../../../_virtual/_plugin-vue_export-helper.mjs';
+import { designerForm } from './utils/form.mjs';
+import dkSetting from './config/base/dkSetting.mjs';
+import dkPage from './config/base/dkPage.mjs';
+import { upper } from './utils/help.mjs';
+import { ElNotification } from '../../../../../node_modules/.pnpm/element-plus@2.3.14_vue@3.3.4/node_modules/element-plus/es/components/notification/index.mjs';
+
+designerForm.register({
+  name: 'help',
+  init({ value }, rule) {
+    // 判断value是字符串还是数组,如果是字符串则转换为数组，如果是数组则不变
+    if (!isArray(value)) {
+      value = [value];
+    }
+    rule.suffix = {
+      type: 'p',
+      children: value,
+      class: 'form-help',
+    };
+  },
+});
+
+const _sfc_main = defineComponent({
+  name: 'DkPageDiy',
+  components: {
+    draggable,
+    PreviewPhone,
+    DragForm: designerForm.$form(),
+  },
+  props: ['menu', 'height', 'config', 'mask', 'locale', 'loading'],
+  setup(props) {
+    const { menu, height, mask, locale } = toRefs(props);
+    const vm = getCurrentInstance();
+    const fcx = ref({ active: null });
+    provide('fcx', fcx);
+    provide('diy', vm);
+    const config = toRef(props, 'config', {});
+    const getRuleItems = (item) => {
+      const gl = ['DragTool', 'DragBox'];
+      const items = [];
+      if (gl.indexOf(item.type) > -1) {
+        if (item.children.length > 0) {
+          item.children.forEach((v) => {
+            items.push(...getRuleItems(v));
+          });
+          return items
+        } else {
+          return []
+        }
+      }
+      return [item]
+    };
+
+    const transformData = (originalData) => {
+      const transformedData = [];
+      originalData.forEach((Data) => {
+        const items = getRuleItems(Data);
+        items.forEach((item) => {
+          if (item._id) {
+            const newItem = {
+              id: item._id, // 使用原始数据的 _id 属性作为 id
+              type: item.type,
+              name: item.config?.config?.label || '', // 从 config 属性中获取 label 作为 name
+              children: [],
+            };
+            if (item.children && item.children.length > 0) {
+              newItem.children = transformData(item.children);
+            }
+            transformedData.push(newItem);
+          }
+        });
+      });
+      return transformedData
+    };
+
+    const diyTree = computed(() => {
+      return transformData(data.children)
+    });
+    const countObj = computed(() => {
+      const obj = {};
+      let name;
+      for (let i = 0; i < data.children.length; i++) {
+        if (data.children[i].children.length > 0) {
+          name = data.children[i].children[0].type;
+          if (!obj[name]) {
+            obj[name] = 1;
+          } else {
+            obj[name] = obj[name] + 1;
+          }
+        }
+      }
+      return obj
+    });
+    // let _t = globalT
+    // if (locale.value) {
+    //   _t = useLocale(locale).t
+    // }
+    // const t = (...args) => _t(...args)
+    // const tidyRuleConfig = (orgRule, configRule, ...args) => {
+    //   console.log('tidyRuleConfig', orgRule, configRule, ...args)
+    //   if (configRule) {
+    //     if (is.Function(configRule)) {
+    //       console.log('isfun')
+    //       return configRule(...args)
+    //     }
+    //     if (configRule.rule) {
+    //       console.log('isrule')
+    //       let rule = configRule.rule(...args)
+    //       if (configRule.append) {
+    //         console.log('isappend')
+    //         rule = [...rule, ...orgRule(...args)]
+    //       }
+    //       return rule
+    //     }
+    //   }
+    //   console.log('isorg')
+    //   return orgRule(...args)
+    // }
+
+    const data = reactive({
+      cacheProps: {},
+      moveRule: null,
+      addRule: null,
+      added: null,
+      activeTab: 'page',
+      activeRule: null,
+      children: ref([]),
+      menuList: menu.value || createMenu(),
+      showBaseRule: false,
+      showDkSettingRule: false,
+      visible: {
+        preview: false,
+      },
+      preview: {
+        state: false,
+        rule: [],
+        option: {},
+      },
+      diyCloud: {
+        pageName: '',
+        show: false,
+      },
+      dragForm: ref({
+        rule: [],
+        api: {},
+        option: {
+          form: {},
+          submitBtn: false,
+        },
+      }),
+      dkSettingForm: {
+        // 设置表单
+        rule: dkSetting(),
+        api: {},
+        options: {
+          form: {
+            labelPosition: 'left',
+            size: 'small',
+            labelWidth: '82px',
+          },
+          submitBtn: false,
+          mounted: (fapi) => {
+            fapi.activeRule = data.activeRule;
+            fapi.setValue(fapi.options.formData || {});
+          },
+        },
+      },
+      dkPageForm: {
+        // 页面表单
+        rule: dkPage(),
+        api: {},
+        options: {
+          formData: {},
+          form: {
+            labelPosition: 'left',
+            size: 'small',
+            labelWidth: '82px',
+          },
+          submitBtn: false,
+          mounted: (fapi) => {
+            fapi.setValue(fapi.options.formData || {});
+          },
+        },
+      },
+      propsForm: {
+        rule: [],
+        api: {},
+        value: {},
+        options: {
+          form: {
+            labelPosition: 'left',
+            size: 'small',
+            labelWidth: '70px',
+          },
+          submitBtn: false,
+          mounted: (fapi) => {
+            fapi.activeRule = data.activeRule;
+            fapi.setValue(fapi.options.formData || {});
+          },
+        },
+      },
+      // 拖拽的data
+      isDragging: false,
+      startValue: 0,
+      dragName: '',
+      asideValue: 0,
+      trackMouseBound: null,
+      stopChangeBound: null,
+      rightAside: {
+        style: {
+          width: '300px',
+        },
+        hide: false,
+      },
+      leftAside: {
+        style: { width: '285px' },
+        hide: false,
+      },
+      treeAside: {
+        style: {
+          height: '500px',
+          minHeight: '30px',
+          maxHeight: '30px',
+        },
+        hide: true,
+        treeData: [],
+      },
+    });
+    function cleanTreeData(node) {
+      if (Array.isArray(node)) {
+        // 遍历数组中的每个元素
+        return node.map((childNode) => cleanTreeData(childNode))
+      } else if (typeof node === 'object' && node !== null) {
+        // 处理对象节点
+        if (Array.isArray(node.children)) {
+          // 只保留 children 数组中的对象类型元素
+          node.children = node.children.filter(
+            (child) => typeof child === 'object' && child !== null
+          );
+          // 递归处理每个子节点
+          node.children = cleanTreeData(node.children);
+        }
+        return node
+      }
+      // 对于非对象和非数组类型，直接返回
+      return node
+    }
+
+    watch(
+      () => data.dragForm,
+      () => {
+        data.treeAside.treeData = methods.parseRule(
+          deepCopy(data.dragForm.api.rule[0].children),
+          true
+        );
+        data.treeAside.treeData = cleanTreeData(data.treeAside.treeData);
+      },
+      {
+        deep: true,
+      }
+    );
+    watch(
+      () => data.preview.state,
+      function (n) {
+        if (!n) {
+          nextTick(() => {
+            data.preview.rule = data.preview.option = null;
+          });
+        }
+      }
+    );
+
+    let unWatchActiveRule = null;
+
+    // watch(
+    //   () => locale.value,
+    //   (n) => {
+    //     _t = n ? useLocale(locale).t : globalT
+    //     const baseFormVal =
+    //       data.baseForm.api.formData && data.baseForm.api.formData()
+    //     data.baseForm.rule = tidyRuleConfig(field, baseRule.value, { t })
+    //     data.cacheProps = {}
+    //     const rule = data.activeRule
+    //     let propsVal = null
+    //     if (rule) {
+    //       propsVal =
+    //         data.propsForm.api.formData && data.propsForm.api.formData()
+    //       data.propsForm.rule = data.cacheProps[rule._id] = tidyRuleConfig(
+    //         rule.config.config.props,
+    //         componentRule.value && componentRule.value[rule.config.config.name],
+    //         rule,
+    //         { t, api: data.dragForm.api }
+    //       )
+    //     }
+    //     nextTick(() => {
+    //       baseFormVal && data.baseForm.api.setValue(baseFormVal)
+    //       propsVal && data.propsForm.api.setValue(propsVal)
+    //     })
+    //   }
+    // )
+    const methods = {
+      // 清除所有配置项
+      clear(type = 'all') {
+        if (type === 'all' || type === 'rule') {
+          methods.setRule([]);
+        }
+        if (type === 'all' || type === 'page') {
+          methods.setPageConfig({});
+        }
+      },
+      // 获取所有配置项
+      get() {
+        return {
+          rule: methods.getRule(),
+          config: methods.getPageConfig(),
+        }
+      },
+      // 设置配置项
+      set(value) {
+        if (!value) return
+        const pageConfig = value.config ? value.config : {};
+        methods.setPageConfig(pageConfig);
+        methods.setRule(value.rule);
+      },
+      unWatchActiveRule() {
+        unWatchActiveRule && unWatchActiveRule();
+        unWatchActiveRule = null;
+      },
+      watchActiveRule() {
+        methods.unWatchActiveRule();
+        unWatchActiveRule = watch(
+          () => data.activeRule,
+          function (n) {
+            n && methods.updateRuleFormData();
+          },
+          { deep: true, flush: 'post' }
+        );
+      },
+      makeChildren(children) {
+        return reactive({ children }).children
+      },
+      addMenu(config) {
+        if (!config.name || !config.list) return
+        let flag = true;
+        data.menuList.forEach((v, i) => {
+          if (v.name === config.name) {
+            data.menuList[i] = config;
+            flag = false;
+          }
+        });
+        if (flag) {
+          data.menuList.push(config);
+        }
+      },
+      removeMenu(name) {
+        ;[...data.menuList].forEach((v, i) => {
+          if (v.name === name) {
+            data.menuList.splice(i, 1);
+          }
+        });
+      },
+      setMenuItem(name, list) {
+        data.menuList.forEach((v) => {
+          if (v.name === name) {
+            v.list = list;
+          }
+        });
+      },
+      appendMenuItem(name, item) {
+        data.menuList.forEach((v) => {
+          if (v.name === name) {
+            v.list.push(...(Array.isArray(item) ? item : [item]));
+          }
+        });
+      },
+      removeMenuItem(item) {
+        data.menuList.forEach((v) => {
+          let idx;
+          if (is.String(item)) {
+            ;[...v.list].forEach((menu, idx) => {
+              if (menu.name === item) {
+                v.list.splice(idx, 1);
+              }
+            });
+          } else {
+            if ((idx = v.list.indexOf(item)) > -1) {
+              v.list.splice(idx, 1);
+            }
+          }
+        });
+      },
+      addComponent(component) {
+        if (Array.isArray(component)) {
+          component.forEach((v) => {
+            ruleList[v.name] = v;
+          });
+        } else {
+          ruleList[component.name] = component;
+        }
+      },
+      getParent(rule) {
+        let parent = rule.__fc__.parent.rule;
+        const config = parent.config;
+        if (config && config.config.inside) {
+          rule = parent;
+          parent = parent.__fc__.parent.rule;
+        }
+        return { root: parent, parent: rule }
+      },
+      makeDrag(group, tag, children, on) {
+        return {
+          type: 'DragBox',
+          wrap: {
+            show: false,
+          },
+          col: {
+            show: false,
+          },
+          inject: true,
+          props: {
+            rule: {
+              props: {
+                tag: 'el-col',
+                group: group === true ? 'default' : group,
+                ghostClass: 'ghost',
+                animation: 150,
+                // 拖拽class
+                // handle: '._fc-drag-btn',
+                emptyInsertThreshold: 0,
+                direction: 'vertical',
+                itemKey: 'type',
+              },
+            },
+            tag,
+          },
+          children,
+          on,
+        }
+      },
+
+      makeDragRule(children) {
+        return methods.makeChildren([
+          methods.makeDrag(true, 'draggable', children, {
+            add: (inject, evt) => methods.dragAdd(children, evt),
+            end: (inject, evt) => methods.dragEnd(children, evt),
+            start: (inject, evt) => methods.dragStart(children, evt),
+            unchoose: (inject, evt) => methods.dragUnchoose(children, evt),
+          }),
+        ])
+      },
+      previewFc() {
+        data.preview.state = true;
+        data.preview.rule = methods.getRule();
+        data.preview.option = methods.getOption();
+      },
+
+      getPageConfig() {
+        return data.dkPageForm.options.formData
+      },
+      setPageConfig(pageConfig) {
+        if (!pageConfig || isArray(pageConfig)) {
+          pageConfig = {};
+        }
+        data.dkPageForm.api.coverValue(pageConfig);
+      },
+      getRule() {
+        return methods.parseRule(deepCopy(data.dragForm.api.rule[0].children))
+      },
+      getJson() {
+        return designerForm.toJson(methods.getRule())
+      },
+      setRule(rules) {
+        if (!rules) {
+          rules = [];
+        }
+        data.children = methods.makeChildren(
+          methods.loadRule(
+            is.String(rules) ? designerForm.parseJson(rules) : deepCopy(rules)
+          )
+        );
+        methods.clearActiveRule();
+        data.dragForm.rule = methods.makeDragRule(data.children);
+      },
+      // setBaseRuleConfig(rule, append) {
+      // baseRule.value = { rule, append }
+      // data.baseForm.rule = field()
+      // },
+      // setComponentRuleConfig(name, rule, append) {
+      //   // TODO未使用，不知道干啥的
+      //   componentRule.value[name] = { rule, append }
+      //   data.cacheProps = {}
+      //   const activeRule = data.activeRule
+      //   if (activeRule) {
+      //     const propsVal =
+      //       data.propsForm.api.formData && data.propsForm.api.formData()
+      //     data.propsForm.rule = data.cacheProps[activeRule._id] =
+      //       tidyRuleConfig(
+      //         activeRule.config.config.props,
+      //         componentRule.value &&
+      //           componentRule.value[activeRule.config.config.name],
+      //         activeRule,
+      //         { t, api: data.dragForm.api }
+      //       )
+      //     nextTick(() => {
+      //       propsVal && data.propsForm.api.setValue(propsVal)
+      //     })
+      //   }
+      // },
+      clearActiveRule() {
+        data.activeRule = null;
+        data.activeTab = 'page';
+      },
+      loadRule(rules) {
+        const loadRule = [];
+        rules.forEach((rule) => {
+          if (is.String(rule)) {
+            return loadRule.push(rule)
+          }
+          const config = ruleList[rule._fc_drag_tag] || ruleList[rule.type];
+          const _children = rule.children;
+          rule.children = [];
+          if (rule.control) {
+            rule._control = rule.control;
+            delete rule.control;
+          }
+          if (config) {
+            rule = methods.makeRule(config, rule);
+            if (_children) {
+              let children = rule.children[0].children;
+
+              if (config.drag) {
+                children = children[0].children;
+              }
+              children.push(...methods.loadRule(_children));
+            }
+          } else if (_children) {
+            rule.children = methods.loadRule(_children);
+          }
+          loadRule.push(rule);
+        });
+        return loadRule
+      },
+      parseRule(children, isTree = false) {
+        return [...children].reduce((initial, rule) => {
+          if (is.String(rule)) {
+            initial.push(rule);
+            return initial
+          } else if (rule.type === 'DragBox') {
+            initial.push(...methods.parseRule(rule.children, isTree));
+            return initial
+          } else if (rule.type === 'DragTool') {
+            rule = rule.children[0];
+            if (rule.type === 'DragBox') {
+              initial.push(...methods.parseRule(rule.children, isTree));
+              return initial
+            }
+          }
+          if (!rule) return initial
+          rule = { ...rule };
+          if (rule.children && rule.children.length) {
+            rule.children = methods.parseRule(rule.children, isTree);
+          }
+
+          delete rule.key;
+          delete rule.component;
+
+          if (!isTree) {
+            delete rule._id;
+            if (rule.config) {
+              delete rule.config.config;
+            }
+          }
+          if (rule.effect) {
+            delete rule.effect._fc;
+            delete rule.effect._fc_tool;
+          }
+          if (rule._control) {
+            rule.control = rule._control;
+            delete rule._control;
+          }
+          Object.keys(rule)
+            .filter(
+              (k) =>
+                (Array.isArray(rule[k]) && rule[k].length === 0) ||
+                (is.Object(rule[k]) && Object.keys(rule[k]).length === 0)
+            )
+            .forEach((k) => {
+              delete rule[k];
+            });
+          initial.push(rule);
+          return initial
+        }, [])
+      },
+      baseChange(field, value, _, fapi) {
+        if (data.activeRule && fapi[data.activeRule._id] === data.activeRule) {
+          methods.unWatchActiveRule();
+          data.activeRule[field] = value;
+          methods.watchActiveRule();
+          data.activeRule.config.config?.watch?.['$' + field]?.({
+            field,
+            value,
+            api: fapi,
+            rule: data.activeRule,
+          });
+        }
+      },
+      dkSettingChange(field, value, _, fapi, flag) {
+        if (data.activeRule && fapi[data.activeRule._id] === data.activeRule) {
+          data.activeRule.setting[field] = value;
+        }
+      },
+      propRemoveField(field, _, fapi) {
+        if (data.activeRule && fapi[data.activeRule._id] === data.activeRule) {
+          methods.unWatchActiveRule();
+          const org = field;
+          data.dragForm.api.sync(data.activeRule);
+          if (field.indexOf('formCreate') === 0) {
+            field = field.replace('formCreate', '');
+            if (!field) return
+            field = lower(field);
+            if (field.indexOf('effect') === 0 && field.indexOf('>') > -1) {
+              delete data.activeRule.effect[field.split('>')[1]];
+            } else if (
+              field.indexOf('props') === 0 &&
+              field.indexOf('>') > -1
+            ) {
+              delete data.activeRule.props[field.split('>')[1]];
+            } else if (
+              field.indexOf('attrs') === 0 &&
+              field.indexOf('>') > -1
+            ) {
+              data.activeRule.attrs[field.split('>')[1]] = value;
+            } else if (field === 'child') {
+              delete data.activeRule.children[0];
+            } else if (field) {
+              data.activeRule[field] = undefined;
+            }
+          } else {
+            delete data.activeRule.props[field];
+          }
+          methods.watchActiveRule();
+          data.activeRule.config.config?.watch?.[org]?.({
+            field: org,
+            value: undefined,
+            api: fapi,
+            rule: data.activeRule,
+          });
+        }
+      },
+      propChange(field, value, _, fapi) {
+        if (data.activeRule && fapi[data.activeRule._id] === data.activeRule) {
+          methods.unWatchActiveRule();
+          const org = field;
+          if (field.indexOf('formCreate') === 0) {
+            field = field.replace('formCreate', '');
+            if (!field) return
+            field = lower(field);
+            if (field.indexOf('effect') === 0 && field.indexOf('>') > -1) {
+              data.activeRule.effect[field.split('>')[1]] = value;
+            } else if (
+              field.indexOf('props') === 0 &&
+              field.indexOf('>') > -1
+            ) {
+              data.activeRule.props[field.split('>')[1]] = value;
+            } else if (
+              field.indexOf('attrs') === 0 &&
+              field.indexOf('>') > -1
+            ) {
+              data.activeRule.attrs[field.split('>')[1]] = value;
+            } else if (field === 'child') {
+              data.activeRule.children[0] = value;
+            } else {
+              data.activeRule[field] = value;
+            }
+          } else {
+            data.activeRule.props[field] = value;
+          }
+          methods.watchActiveRule();
+          data.activeRule.config.config?.watch?.[org]?.({
+            field: org,
+            value,
+            api: fapi,
+            rule: data.activeRule,
+          });
+        }
+      },
+      dkPageChange(field, value, _, fapi, flag) {
+        data.dkPageForm.options.formData[field] = value;
+      },
+      nodeClick(row) {
+        methods.chooseRule(row._id);
+      },
+      delRule(id, children = null) {
+        children = children || data.children;
+        children.forEach((item) => {
+          if (item._id === id) {
+            if (item.config.config.inside) {
+              item.__fc__.rm();
+              vm.emit('delete', item);
+            } else {
+              const parent = methods.getParent(item);
+              vm.emit('delete', parent.root.children[0]);
+              parent.root.__fc__.rm();
+            }
+            methods.clearActiveRule();
+          } else if (item.children && item.children.length > 0) {
+            methods.delRule(id, item.children);
+          }
+        });
+      },
+      chooseRule(id, children = null) {
+        children = children || data.children;
+        children.forEach((item) => {
+          if (item._id === id) {
+            vm.emit('active', item);
+            methods.toolActive(item);
+            if (item.config.config.inside) {
+              fcx.value.active = item.children[0]?.props.unique || null;
+            } else {
+              const p = methods.getParent(item);
+              fcx.value.active = p.root?.props?.unique || null;
+            }
+          } else if (item.children && item.children.length > 0) {
+            methods.chooseRule(id, item.children);
+          }
+        });
+      },
+      toolActive(rule) {
+        methods.unWatchActiveRule();
+        if (data.activeRule) {
+          delete data.propsForm.api[data.activeRule._id];
+          delete data.dragForm.api.activeRule;
+        }
+        data.activeRule = rule;
+        data.dragForm.api.activeRule = rule;
+
+        nextTick(() => {
+          data.activeTab = 'props';
+          nextTick(() => {
+            data.propsForm.api[data.activeRule._id] = data.activeRule;
+            data.dkSettingForm.api[data.activeRule._id] = data.activeRule;
+          });
+        });
+        if (!data.cacheProps[rule._id]) {
+          data.cacheProps[rule._id] = rule.config.config.props(rule);
+        }
+        data.propsForm.rule = data.cacheProps[rule._id];
+        methods.updateRuleFormData();
+        methods.watchActiveRule();
+        methods.updateShowStyle(rule);
+      },
+      updateShowStyle(rule) {
+        data.showDkSettingRule = rule.showStyle;
+        if (data.showDkSettingRule) {
+          data.dkSettingForm.rule = dkSetting(rule);
+          if (Object.values(rule.setting).length > 0) {
+            data.dkSettingForm.options.formData = rule.setting;
+          } else {
+            const settingFormData = {};
+            dkSetting(rule).forEach((k) => {
+              settingFormData[k.field] = k.value;
+            });
+            data.dkSettingForm.options.formData = settingFormData;
+          }
+        }
+      },
+      updateRuleFormData() {
+        const rule = data.activeRule;
+        const formData = {
+          ...rule.props,
+          formCreateChild: deepCopy(rule.children[0]),
+        };
+        Object.keys(rule).forEach((k) => {
+          if (['effect', 'config', 'payload', 'id', 'type'].indexOf(k) < 0)
+            formData['formCreate' + upper(k)] = deepCopy(rule[k]);
+        })
+        ;['props', 'effect', 'attrs'].forEach((name) => {
+          rule[name] &&
+            Object.keys(rule[name]).forEach((k) => {
+              formData['formCreate' + upper(name) + '>' + k] = deepCopy(
+                rule[name][k]
+              );
+            });
+        });
+        // console.log('formData', formData)
+        data.propsForm.value = formData;
+
+        data.showBaseRule =
+          hasProperty(rule, 'field') &&
+          rule.input !== false &&
+          (!config.value || config.value.showBaseForm !== false);
+        if (data.showBaseRule) {
+          // data.baseForm.value = {
+          //   field: rule.field,
+          //   title: rule.title || '',
+          //   info: rule.info,
+          //   _control: rule._control,
+          // }
+          data.dragForm.api.refreshValidate();
+        }
+      },
+      dragStart(children) {
+        data.moveRule = children;
+        data.added = false;
+      },
+      dragUnchoose(children, evt) {
+        data.addRule = {
+          children,
+          oldIndex: evt.oldIndex,
+        };
+      },
+      dragAdd(children, evt) {
+        const newIndex = evt.newIndex;
+        const menu = evt.item._underlying_vm_;
+        if (!menu || menu.__fc__) {
+          if (data.addRule) {
+            const rule = data.addRule.children.splice(data.addRule.oldIndex, 1);
+            children.splice(newIndex, 0, rule[0]);
+          }
+        } else {
+          const rule = methods.makeRule(ruleList[menu.name]);
+          const config = rule.children[0].config.config;
+          const count = config.count ? config.count : 99;
+          const _count = countObj.value[config.name]
+            ? countObj.value[config.name]
+            : 0;
+          if (_count >= count) {
+            ElNotification({
+              title: '警告',
+              message: '当前模块只能添加' + config.count + '个',
+              type: 'warning',
+            });
+            return false
+          }
+          children.splice(newIndex, 0, rule);
+        }
+        data.added = true;
+      },
+      dragEnd(children, { newIndex, oldIndex }) {
+        if (
+          !data.added &&
+          !(data.moveRule === children && newIndex === oldIndex)
+        ) {
+          const rule = data.moveRule.splice(oldIndex, 1);
+          children.splice(newIndex, 0, rule[0]);
+        }
+        data.moveRule = null;
+        data.addRule = null;
+        data.added = false;
+        // data.dragForm.api.refresh();
+      },
+      makeRule(config, _rule) {
+        const rule = _rule || config.rule();
+        rule.config = { config };
+        if (config.component) {
+          rule.component = markRaw(config.component);
+        }
+        if (!rule.effect) rule.effect = {};
+        rule.effect._fc = true;
+        rule._fc_drag_tag = config.name;
+        rule.setting = rule.setting || {};
+        let drag;
+        if (config.drag) {
+          rule.children.push(
+            (drag = methods.makeDrag(
+              config.drag,
+              rule.type,
+              methods.makeChildren([]),
+              {
+                end: (inject, evt) =>
+                  methods.dragEnd(inject.self.children, evt),
+                add: (inject, evt) =>
+                  methods.dragAdd(inject.self.children, evt),
+                start: (inject, evt) =>
+                  methods.dragStart(inject.self.children, evt),
+                unchoose: (inject, evt) =>
+                  methods.dragUnchoose(inject.self.children, evt),
+              }
+            ))
+          );
+        }
+
+        if (config.children && !_rule) {
+          for (let i = 0; i < (config.childrenLen || 1); i++) {
+            const child = methods.makeRule(ruleList[config.children])
+            ;(drag || rule).children.push(child);
+          }
+        }
+
+        const dragMask =
+          mask.value !== undefined
+            ? mask.value !== false
+            : config.mask !== false;
+        if (config.inside) {
+          rule.children = methods.makeChildren([
+            {
+              type: 'DragTool',
+              props: {
+                dragBtn: config.dragBtn !== false,
+                children: config.children,
+                mask: dragMask,
+                setting: rule.setting,
+              },
+              effect: {
+                _fc_tool: true,
+              },
+              inject: true,
+              on: {
+                delete: ({ self }) => {
+                  const parent = methods.getParent(self).parent;
+                  parent.__fc__.rm();
+                  vm.emit('delete', parent);
+                  methods.clearActiveRule();
+                },
+                create: ({ self }) => {
+                  const top = methods.getParent(self);
+                  vm.emit('create', top.parent);
+                  top.root.children.splice(
+                    top.root.children.indexOf(top.parent) + 1,
+                    0,
+                    methods.makeRule(top.parent.config.config)
+                  );
+                },
+                addChild: ({ self }) => {
+                  const top = methods.getParent(self);
+                  const config = top.parent.config.config;
+                  const item = ruleList[config.children];
+                  if (!item) return
+                  ;(!config.drag
+                    ? top.parent
+                    : top.parent.children[0]
+                  ).children[0].children.push(methods.makeRule(item));
+                },
+                copy: ({ self }) => {
+                  const top = methods.getParent(self);
+                  vm.emit('copy', top.parent);
+                  top.root.children.splice(
+                    top.root.children.indexOf(top.parent) + 1,
+                    0,
+                    designerForm.copyRule(top.parent)
+                  );
+                },
+                active: ({ self }) => {
+                  const top = methods.getParent(self);
+                  vm.emit('active', top.parent);
+                  methods.toolActive(top.parent);
+                },
+              },
+              children: rule.children,
+            },
+          ]);
+          return rule
+        } else {
+          return {
+            type: 'DragTool',
+            props: {
+              dragBtn: config.dragBtn !== false,
+              children: config.children,
+              mask: dragMask,
+              setting: rule.setting,
+            },
+            effect: {
+              _fc_tool: true,
+            },
+            inject: true,
+            on: {
+              delete: ({ self }) => {
+                vm.emit('delete', self.children[0]);
+                self.__fc__.rm();
+                methods.clearActiveRule();
+              },
+              create: ({ self }) => {
+                vm.emit('create', self.children[0]);
+                const top = methods.getParent(self);
+                top.root.children.splice(
+                  top.root.children.indexOf(top.parent) + 1,
+                  0,
+                  methods.makeRule(self.children[0].config.config)
+                );
+              },
+              addChild: ({ self }) => {
+                const config = self.children[0].config.config;
+                const item = ruleList[config.children];
+                if (!item) return
+                ;(!config.drag
+                  ? self
+                  : self.children[0]
+                ).children[0].children.push(methods.makeRule(item));
+              },
+              copy: ({ self }) => {
+                vm.emit('copy', self.children[0]);
+                const top = methods.getParent(self);
+                const copyRule = designerForm.copyRule(top.parent);
+                // 解决复制后，组件的setting配置失效
+                copyRule.props.setting = copyRule.children[0].setting;
+                top.root.children.splice(
+                  top.root.children.indexOf(top.parent) + 1,
+                  0,
+                  copyRule
+                );
+              },
+              active: ({ self }) => {
+                vm.emit('active', self.children[0]);
+                methods.toolActive(self.children[0]);
+              },
+            },
+            children: methods.makeChildren([rule]),
+          }
+        }
+      },
+      // 滑动改变尺寸
+      onResizerMouseDown(name, e) {
+        data.isDragging = true;
+        data.startValue = e.clientX;
+        data.dragName = name;
+        if (name === 'left') {
+          // 获取._fc-l的宽度
+          data.asideValue =
+            document.getElementsByClassName('_fc-l')[0].offsetWidth;
+        }
+        if (name === 'right') {
+          data.asideValue =
+            document.getElementsByClassName('_fc-r')[0].offsetWidth;
+        }
+        document.body.style.cursor = 'ew-resize';
+        if (name === 'tree') {
+          data.startValue = e.clientY;
+          data.asideValue =
+            document.getElementsByClassName('children-list')[0].offsetHeight;
+          console.log('data.startValue', data.startValue);
+          console.log('data.asideValue', data.asideValue);
+          document.body.style.cursor = 'n-resize';
+        }
+        data.trackMouseBound = methods.onResizerMouseMove.bind(e);
+        data.stopChangeBound = methods.onResizerMouseUp.bind(e);
+        document.addEventListener('mousemove', data.trackMouseBound);
+        document.addEventListener('mouseup', data.stopChangeBound);
+      },
+      onResizerMouseUp() {
+        document.removeEventListener('mousemove', data.trackMouseBound);
+        document.removeEventListener('mouseup', data.stopChangeBound);
+        document.body.style.cursor = 'default';
+        data.isDragging = false;
+        data.dragName = '';
+      },
+      onResizerMouseMove(e) {
+        if (data.isDragging) {
+          // 获取鼠标位置
+          if (data.dragName === 'left') {
+            let width = e.clientX - data.startValue + data.asideValue;
+            if (width > 455) {
+              width = 455;
+            }
+            if (width < 200) {
+              width = 200;
+            }
+            data.leftAside.style.width = width + 'px';
+          }
+          if (data.dragName === 'right') {
+            let width = data.startValue - e.clientX + data.asideValue;
+            if (width > 800) {
+              width = 800;
+            }
+            if (width < 300) {
+              width = 300;
+            }
+            data.rightAside.style.width = width + 'px';
+          }
+
+          if (data.dragName === 'tree') {
+            let height = data.startValue - e.clientY + data.asideValue;
+            if (height > 800) {
+              height = 800;
+            }
+            if (height < 30) {
+              height = 30;
+            }
+            data.treeAside.style.height = height + 'px';
+          }
+        }
+      },
+      hideAside(name) {
+        if (name === 'left') {
+          if (data.leftAside.hide) {
+            data.leftAside.hide = false;
+            delete data.leftAside.style.minWidth;
+            delete data.leftAside.style.maxWidth;
+          } else {
+            data.leftAside.hide = true;
+            data.leftAside.style.minWidth = '0px';
+            data.leftAside.style.maxWidth = '0px';
+          }
+        } else if (name === 'right') {
+          if (data.rightAside.hide) {
+            data.rightAside.hide = false;
+            delete data.rightAside.style.minWidth;
+            delete data.rightAside.style.maxWidth;
+          } else {
+            data.rightAside.hide = true;
+            data.rightAside.style.minWidth = '0px';
+            data.rightAside.style.maxWidth = '0px';
+          }
+        } else if (name === 'tree') {
+          if (data.treeAside.hide) {
+            data.treeAside.hide = false;
+            const height = data.treeAside.style.height;
+            data.treeAside.style = { height };
+          } else {
+            data.treeAside.hide = true;
+            data.treeAside.style.minHeight = '30px';
+            data.treeAside.style.maxHeight = '30px';
+          }
+        }
+      },
+      allowDrop(draggingNode, dropNode, type) {
+        // console.log('draggingNode', draggingNode.data.config.config.inside)
+
+        const draggingRule = draggingNode.data.config.config;
+        const dropRule = dropNode.data.config.config;
+        //  内部元素放到指定的外部才可以放置
+        if (
+          type === 'inner' &&
+          draggingRule.inside &&
+          draggingRule.name === dropRule.children
+        ) {
+          return true
+        }
+        // 同样父级
+        if (
+          type !== 'inner' &&
+          draggingRule.name === dropRule.name &&
+          draggingRule.inside &&
+          dropRule.inside
+        ) {
+          return true
+        }
+
+        if (type !== 'inner' && !draggingRule.inside && !dropRule.inside) {
+          return true
+        }
+
+        if (type === 'inner' && !draggingRule.inside && dropRule.inside) {
+          // console.log(draggingRule, dropRule)
+          return true
+        }
+
+        return false
+      },
+      allowDrag(draggingNode) {
+        console.log('allowDrag', draggingNode);
+        if (draggingNode.data.type === 'DragTool') {
+          return true
+        }
+      },
+      nodeDrop(node, dropNode, type, event) {
+        // 拖拽成功完成时触发的事件
+        // console.log('nodeDrop', node, dropNode, type, event)
+        methods.setRule(data.treeAside.treeData);
+      },
+    };
+    data.dragForm.rule = methods.makeDragRule(
+      methods.makeChildren(data.children)
+    );
+    return {
+      ...toRefs(data),
+      ...methods,
+      countObj,
+      diyTree,
+    }
+  },
+  created() {
+    document.body.ondrop = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+    };
+  },
+});
+
+const _hoisted_1 = { class: "_fc-l-groups" };
+const _hoisted_2 = { class: "_fc-l-title" };
+const _hoisted_3 = { class: "_fc-l-icon" };
+const _hoisted_4 = { class: "_fc-l-name" };
+const _hoisted_5 = {
+  key: 0,
+  class: "_fc-l-count",
+  style: {}
+};
+const _hoisted_6 = /*#__PURE__*/createElementVNode("span", null, "结构", -1 /* HOISTED */);
+const _hoisted_7 = { key: 0 };
+
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_dk_icon = resolveComponent("dk-icon");
+  const _component_draggable = resolveComponent("draggable");
+  const _component_el_tree = resolveComponent("el-tree");
+  const _component_el_aside = resolveComponent("el-aside");
+  const _component_el_header = resolveComponent("el-header");
+  const _component_DragForm = resolveComponent("DragForm");
+  const _component_preview_phone = resolveComponent("preview-phone");
+  const _component_el_container = resolveComponent("el-container");
+  const _component_el_tab_pane = resolveComponent("el-tab-pane");
+  const _component_el_tabs = resolveComponent("el-tabs");
+  const _component_el_dialog = resolveComponent("el-dialog");
+  const _directive_loading = resolveDirective("loading");
+
+  return (openBlock(), createBlock(_component_el_container, { class: "_fc-designer dk-page-diy" }, {
+    default: withCtx(() => [
+      createCommentVNode("        左边"),
+      createVNode(_component_el_aside, {
+        class: "_fc-l item-box",
+        style: normalizeStyle(_ctx.leftAside.style)
+      }, {
+        default: withCtx(() => [
+          createElementVNode("div", _hoisted_1, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.menuList, (item, index) => {
+              return (openBlock(), createElementBlock("div", {
+                key: index,
+                class: "_fc-l-group"
+              }, [
+                createElementVNode("h4", _hoisted_2, toDisplayString(item.title), 1 /* TEXT */),
+                createVNode(_component_draggable, {
+                  group: { name: 'default', pull: 'clone', put: false },
+                  sort: false,
+                  list: item.list,
+                  "item-key": "icon",
+                  filter: ".not-drag",
+                  class: "_fc-l-items"
+                }, {
+                  item: withCtx(({ element }) => [
+                    (openBlock(), createElementBlock("div", {
+                      key: element.id,
+                      class: normalizeClass(["_fc-l-item", 
+                    element.count - (_ctx.countObj[element.name] || 0) <= 0
+                      ? 'not-drag'
+                      : ''
+                  ])
+                    }, [
+                      createElementVNode("div", _hoisted_3, [
+                        createVNode(_component_dk_icon, {
+                          icon: element.icon,
+                          size: 24
+                        }, null, 8 /* PROPS */, ["icon"])
+                      ]),
+                      createElementVNode("span", _hoisted_4, toDisplayString(element.label), 1 /* TEXT */),
+                      (element.count)
+                        ? (openBlock(), createElementBlock("span", _hoisted_5, toDisplayString(element.count - (_ctx.countObj[element.name] || 0)), 1 /* TEXT */))
+                        : createCommentVNode("v-if", true)
+                    ], 2 /* CLASS */))
+                  ]),
+                  _: 2 /* DYNAMIC */
+                }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["list"])
+              ]))
+            }), 128 /* KEYED_FRAGMENT */))
+          ]),
+          createElementVNode("div", {
+            class: "children-list",
+            style: normalizeStyle(_ctx.treeAside.style)
+          }, [
+            createElementVNode("div", {
+              class: "child-title",
+              onClick: _cache[0] || (_cache[0] = $event => (_ctx.hideAside('tree')))
+            }, [
+              _hoisted_6,
+              createVNode(_component_dk_icon, {
+                icon: _ctx.treeAside.hide ? 'ArrowUp' : 'ArrowDown'
+              }, null, 8 /* PROPS */, ["icon"])
+            ]),
+            createCommentVNode("        <textarea style=\"width: 100%\">{{ treeAside.treeData }}</textarea>"),
+            createVNode(_component_el_tree, {
+              draggable: "",
+              "highlight-current": "",
+              data: _ctx.treeAside.treeData,
+              props: { value: 'type', label: 'type' },
+              "allow-drop": _ctx.allowDrop,
+              "default-expand-all": true,
+              onNodeDrop: _ctx.nodeDrop,
+              onNodeClick: _ctx.nodeClick
+            }, {
+              default: withCtx(({ data }) => [
+                createElementVNode("div", {
+                  style: normalizeStyle(
+                _ctx.activeRule && _ctx.activeRule._id === data._id ? 'color:red' : ''
+              )
+                }, [
+                  createTextVNode(toDisplayString(data.type) + " ", 1 /* TEXT */),
+                  (data.config?.config.label)
+                    ? (openBlock(), createElementBlock("span", _hoisted_7, toDisplayString(data.config?.config.label), 1 /* TEXT */))
+                    : createCommentVNode("v-if", true),
+                  createVNode(_component_dk_icon, {
+                    icon: "Close",
+                    class: "close-rule",
+                    onClick: withModifiers($event => (_ctx.delRule(data._id)), ["stop"])
+                  }, null, 8 /* PROPS */, ["onClick"])
+                ], 4 /* STYLE */)
+              ]),
+              _: 1 /* STABLE */
+            }, 8 /* PROPS */, ["data", "allow-drop", "onNodeDrop", "onNodeClick"]),
+            (!_ctx.treeAside.hide)
+              ? (openBlock(), createElementBlock("div", {
+                  key: 0,
+                  class: "aside-resizer",
+                  onMousedown: _cache[1] || (_cache[1] = $event => (_ctx.onResizerMouseDown('tree', $event))),
+                  onMouseup: _cache[2] || (_cache[2] = $event => (_ctx.onResizerMouseUp('tree'))),
+                  onMousemove: _cache[3] || (_cache[3] = $event => (_ctx.onResizerMouseMove('tree')))
+                }, null, 32 /* HYDRATE_EVENTS */))
+              : createCommentVNode("v-if", true)
+          ], 4 /* STYLE */),
+          (!_ctx.leftAside.hide)
+            ? (openBlock(), createElementBlock("div", {
+                key: 0,
+                class: "aside-resizer",
+                onMousedown: _cache[4] || (_cache[4] = $event => (_ctx.onResizerMouseDown('left', $event))),
+                onMouseup: _cache[5] || (_cache[5] = $event => (_ctx.onResizerMouseUp('left'))),
+                onMousemove: _cache[6] || (_cache[6] = $event => (_ctx.onResizerMouseMove('left')))
+              }, null, 32 /* HYDRATE_EVENTS */))
+            : createCommentVNode("v-if", true),
+          createElementVNode("div", {
+            class: "aside-toggle left-99%",
+            style: normalizeStyle(_ctx.leftAside.hide ? 'display:block' : ''),
+            onClick: _cache[7] || (_cache[7] = $event => (_ctx.hideAside('left')))
+          }, [
+            createVNode(_component_dk_icon, {
+              icon: _ctx.leftAside.hide ? 'ArrowRight' : 'ArrowLeft'
+            }, null, 8 /* PROPS */, ["icon"])
+          ], 4 /* STYLE */)
+        ]),
+        _: 1 /* STABLE */
+      }, 8 /* PROPS */, ["style"]),
+      createCommentVNode("        左边结束"),
+      createCommentVNode("        预览区"),
+      createVNode(_component_el_container, { class: "_fc-m" }, {
+        default: withCtx(() => [
+          createVNode(_component_el_header, {
+            class: "_fc-m-tools",
+            height: "45"
+          }, {
+            default: withCtx(() => [
+              renderSlot(_ctx.$slots, "default")
+            ]),
+            _: 3 /* FORWARDED */
+          }),
+          createVNode(_component_preview_phone, {
+            "page-config": _ctx.dkPageForm.options.formData
+          }, {
+            default: withCtx(() => [
+              withDirectives(createVNode(_component_DragForm, {
+                api: _ctx.dragForm.api,
+                "onUpdate:api": _cache[8] || (_cache[8] = $event => ((_ctx.dragForm.api) = $event)),
+                rule: _ctx.dragForm.rule,
+                option: _ctx.dragForm.option
+              }, null, 8 /* PROPS */, ["api", "rule", "option"]), [
+                [_directive_loading, _ctx.loading]
+              ])
+            ]),
+            _: 1 /* STABLE */
+          }, 8 /* PROPS */, ["page-config"])
+        ]),
+        _: 3 /* FORWARDED */
+      }),
+      createCommentVNode("        预览区结束"),
+      createCommentVNode("        右边操作区"),
+      createVNode(_component_el_aside, {
+        class: "_fc-r",
+        style: normalizeStyle(_ctx.rightAside.style)
+      }, {
+        default: withCtx(() => [
+          withDirectives(createVNode(_component_el_tabs, {
+            modelValue: _ctx.activeTab,
+            "onUpdate:modelValue": _cache[12] || (_cache[12] = $event => ((_ctx.activeTab) = $event))
+          }, {
+            default: withCtx(() => [
+              (!!_ctx.activeRule)
+                ? (openBlock(), createBlock(_component_el_tab_pane, {
+                    key: _ctx.activeRule ? 'props_' + _ctx.activeRule._id6 : '',
+                    label: "组件设置",
+                    name: "props"
+                  }, {
+                    default: withCtx(() => [
+                      createVNode(_component_DragForm, {
+                        api: _ctx.propsForm.api,
+                        "onUpdate:api": _cache[9] || (_cache[9] = $event => ((_ctx.propsForm.api) = $event)),
+                        rule: _ctx.propsForm.rule,
+                        option: _ctx.propsForm.options,
+                        "model-value": _ctx.propsForm.value,
+                        onChange: _ctx.propChange,
+                        onRemoveField: _ctx.propRemoveField
+                      }, null, 8 /* PROPS */, ["api", "rule", "option", "model-value", "onChange", "onRemoveField"])
+                    ]),
+                    _: 1 /* STABLE */
+                  }))
+                : createCommentVNode("v-if", true),
+              (!!_ctx.activeRule)
+                ? (openBlock(), createBlock(_component_el_tab_pane, {
+                    key: _ctx.activeRule ? 'style_' + _ctx.activeRule._id : '',
+                    label: "样式设置",
+                    name: "style"
+                  }, {
+                    default: withCtx(() => [
+                      withDirectives(createVNode(_component_DragForm, {
+                        api: _ctx.dkSettingForm.api,
+                        "onUpdate:api": _cache[10] || (_cache[10] = $event => ((_ctx.dkSettingForm.api) = $event)),
+                        rule: _ctx.dkSettingForm.rule,
+                        option: _ctx.dkSettingForm.options,
+                        "model-value": _ctx.dkSettingForm.value,
+                        onChange: _ctx.dkSettingChange
+                      }, null, 8 /* PROPS */, ["api", "rule", "option", "model-value", "onChange"]), [
+                        [vShow, _ctx.showDkSettingRule]
+                      ])
+                    ]),
+                    _: 1 /* STABLE */
+                  }))
+                : createCommentVNode("v-if", true),
+              createVNode(_component_el_tab_pane, {
+                label: "页面配置",
+                name: "page"
+              }, {
+                default: withCtx(() => [
+                  createVNode(_component_DragForm, {
+                    api: _ctx.dkPageForm.api,
+                    "onUpdate:api": _cache[11] || (_cache[11] = $event => ((_ctx.dkPageForm.api) = $event)),
+                    rule: _ctx.dkPageForm.rule,
+                    option: _ctx.dkPageForm.options,
+                    onChange: _ctx.dkPageChange
+                  }, null, 8 /* PROPS */, ["api", "rule", "option", "onChange"])
+                ]),
+                _: 1 /* STABLE */
+              })
+            ]),
+            _: 1 /* STABLE */
+          }, 8 /* PROPS */, ["modelValue"]), [
+            [vShow, !_ctx.rightAside.hide]
+          ]),
+          (!_ctx.rightAside.hide)
+            ? (openBlock(), createElementBlock("div", {
+                key: 0,
+                class: "aside-resizer left-0",
+                onMousedown: _cache[13] || (_cache[13] = $event => (_ctx.onResizerMouseDown('right', $event))),
+                onMouseup: _cache[14] || (_cache[14] = $event => (_ctx.onResizerMouseUp('right'))),
+                onMousemove: _cache[15] || (_cache[15] = $event => (_ctx.onResizerMouseMove('right')))
+              }, null, 32 /* HYDRATE_EVENTS */))
+            : createCommentVNode("v-if", true),
+          createElementVNode("div", {
+            class: "aside-toggle right-99%",
+            style: normalizeStyle(_ctx.rightAside.hide ? 'display:block' : ''),
+            onClick: _cache[16] || (_cache[16] = $event => (_ctx.hideAside('right')))
+          }, [
+            createVNode(_component_dk_icon, {
+              icon: _ctx.rightAside.hide ? 'ArrowLeft' : 'ArrowRight'
+            }, null, 8 /* PROPS */, ["icon"])
+          ], 4 /* STYLE */)
+        ]),
+        _: 1 /* STABLE */
+      }, 8 /* PROPS */, ["style"]),
+      createCommentVNode("        右边操作区结束"),
+      createVNode(_component_el_dialog, {
+        visible: _ctx.preview.state,
+        "onUpdate:visible": _cache[17] || (_cache[17] = $event => ((_ctx.preview.state) = $event)),
+        width: "375px",
+        "append-to-body": "",
+        style: {"min-height":"700px"}
+      }, {
+        default: withCtx(() => [
+          createCommentVNode("      <form-create"),
+          createCommentVNode("        v-if=\"preview.state\""),
+          createCommentVNode("        :rule=\"preview.rule\""),
+          createCommentVNode("        :option=\"preview.option\""),
+          createCommentVNode("      />")
+        ]),
+        _: 1 /* STABLE */
+      }, 8 /* PROPS */, ["visible"]),
+      createVNode(_component_el_dialog, {
+        visible: _ctx.diyCloud.show,
+        "onUpdate:visible": _cache[18] || (_cache[18] = $event => ((_ctx.diyCloud.show) = $event)),
+        width: "1200px",
+        "append-to-body": "",
+        title: "DIY模板市场",
+        top: "10vh"
+      }, {
+        default: withCtx(() => [
+          createCommentVNode("      <diy-cloud"),
+          createCommentVNode("        v-if=\"diyCloud.show\""),
+          createCommentVNode("        :page-name=\"diyCloud.pageName\""),
+          createCommentVNode("        :diy-data=\"diyCloud.diy_data\""),
+          createCommentVNode("        @submit=\"downCloudConfig\""),
+          createCommentVNode("      />")
+        ]),
+        _: 1 /* STABLE */
+      }, 8 /* PROPS */, ["visible"])
+    ]),
+    _: 3 /* FORWARDED */
+  }))
+}
+var _PageDiy = /*#__PURE__*/_export_sfc(_sfc_main, [['render',_sfc_render],['__file',"E:\\project\\monster-admin\\system\\dkgs-ui_test\\dk-ui-all\\packages\\dk-ui\\src\\page-diy\\src\\page-diy.vue"]]);
+
+export { _PageDiy as default };
+//# sourceMappingURL=page-diy.vue.mjs.map