epic-designer-gold 0.0.49 → 1.0.1

package/docs/guide/components/EBuilder.md

@@ -0,0 +1,546 @@
+# EBuilder 生成器
+
+:::tip 生成器
+`EBuilder` 是一个页面构建组件，它可以将设计器生成的 JSON 配置构建成页面，功能包括组件渲染、事件绑定和数据回显等。
+:::
+
+## 基础用法
+
+> 通过 JSON 渲染组件
+
+<div>
+	<EBuilder :pageSchema="pageSchema" />
+</div>
+
+```vue
+<template>
+  <div>
+    <EBuilder :pageSchema="pageSchema" />
+  </div>
+</template>
+<script lang="ts" setup>
+import { EBuilder } from "epic-designer";
+
+const pageSchema = {
+  schemas: [
+    {
+      type: "page",
+      id: "root",
+      children: [
+        {
+          label: "输入框",
+          type: "input",
+          field: "input",
+          icon: "epic-icon-write",
+          input: true,
+          componentProps: {
+            defaultValue: "",
+            placeholder: "请输入",
+            size: "default",
+            type: "text",
+          },
+          id: "gbm1xhrrj5s00",
+        },
+      ],
+      componentProps: {
+        style: {
+          padding: "16px",
+        },
+      },
+    },
+  ],
+};
+</script>
+```
+
+## 校验表单并获取数据
+<div>
+	<EBuilder ref="ebForm" :pageSchema="pageSchemaForm" />
+  <button @click="handleValidate">获取数据</button>
+  <div>
+  {{formData}}
+  </div>
+</div>
+
+```vue
+<template>
+	<div>
+		<EBuilder ref="ebForm" :pageSchema="pageSchema" />
+  		<button @click="handleValidate">获取数据</button>
+  	<div>
+  {{formData}}
+  </div>
+</div>
+</template>
+<script lang="ts" setup>
+import { ref } from "vue";
+import { EBuilder } from "epic-designer";
+
+const pageSchema = {
+  schemas: [
+    {
+      type: "page",
+      id: "root",
+      children: [
+        {
+          label: "表单",
+          type: "form",
+          icon: "epic-icon-qiapian",
+          name: "default",
+          componentProps: {
+            labelWidth: 100,
+            labelCol: {
+              span: 5,
+            },
+            wrapperCol: {
+              span: 19,
+            },
+            hideRequiredMark: false,
+            labelPosition: "right",
+            size: "default",
+            requireAsteriskPosition: "left",
+          },
+          children: [
+            {
+              label: "输入框",
+              type: "input",
+              field: "input",
+              icon: "epic-icon-write",
+              input: true,
+              componentProps: {
+                defaultValue: "",
+                placeholder: "请输入",
+                size: "default",
+                type: "text",
+              },
+              id: "7k6ajqpxhl000",
+            },
+            {
+              label: "数字输入框",
+              type: "number",
+              icon: "epic-icon-number",
+              field: "number",
+              input: true,
+              componentProps: {
+                placeholder: "请输入",
+                size: "default",
+                controlsPosition: "default",
+              },
+              id: "i6x0mqlm6js00",
+            },
+            {
+              label: "选择框",
+              type: "select",
+              icon: "epic-icon-xiala",
+              field: "select",
+              input: true,
+              componentProps: {
+                options: [
+                  {
+                    label: "选项1",
+                    value: "选项1",
+                  },
+                  {
+                    label: "选项2",
+                    value: "选项2",
+                  },
+                ],
+                placeholder: "请选择",
+                size: "default",
+                effect: "light",
+                placement: "bottom-start",
+              },
+              id: "80gl3fnca3g00",
+            },
+            {
+              label: "单选框",
+              type: "radio",
+              icon: "epic-icon-danxuan-cuxiantiao",
+              field: "radio",
+              input: true,
+              componentProps: {
+                options: [
+                  {
+                    label: "选项1",
+                    value: "选项1",
+                  },
+                  {
+                    label: "选项2",
+                    value: "选项2",
+                  },
+                ],
+                size: "default",
+              },
+              id: "2ggd4l3i109w0",
+            },
+          ],
+          id: "eqf5rtg2ohc00",
+        },
+      ],
+      componentProps: {
+        style: {
+          padding: "16px",
+        },
+      },
+    },
+  ],
+};
+    
+const ebForm = ref(null)
+const formData = ref(null)
+
+async function handleValidate(){
+  formData.value = {...(await ebForm.value.validate())}
+}
+</script>
+```
+
+
+
+## 重置表单
+  <div>
+    <EBuilder ref="ebRef2" :pageSchema="pageSchema2">
+    </EBuilder>
+    <button @click="handleReset">
+      重置表单
+    </button>
+  </div>
+
+```vue
+<template>
+  <div>
+    <EBuilder ref="ebRef" :pageSchema="pageSchema"> </EBuilder>
+    <button @click="handleReset">重置数据</button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted } from "vue";
+import { EBuilder, PageSchema } from "epic-designer";
+
+const ebRef = ref<any>(null);
+
+async function handleReset() {
+  // 获取表单实例
+  const form = await ebRef.value?.getFormInstance();
+  // 调用组件实例方法，参考ui from 提供的重置方法，本案例以Ant Design Vue为基础UI
+  form?.resetFields();
+}
+const pageSchema = ref<PageSchema>({
+  schemas: [
+    {
+      type: "page",
+      id: "root",
+      label: "页面",
+      children: [
+        {
+          label: "表单",
+          type: "form",
+          icon: "epic-icon-daibanshixiang",
+          componentProps: {
+            name: "default",
+            labelWidth: 100,
+            labelCol: {
+              span: 5,
+            },
+            wrapperCol: {
+              span: 19,
+            },
+            hideRequiredMark: false,
+            labelPlacement: "left",
+            labelAlign: "right",
+            requireMarkPlacement: "right",
+            size: "medium",
+          },
+          children: [
+            {
+              label: "姓名",
+              type: "input",
+              field: "input_sb6jhfb8",
+              icon: "epic-icon-write",
+              input: true,
+              componentProps: {
+                defaultValue: "",
+                placeholder: "请输入",
+                type: "text",
+                size: "medium",
+                disabled: false,
+              },
+              id: "input_sb6jhfb8",
+            },
+          ],
+          id: "form_18vemlk8",
+        },
+      ],
+      componentProps: {
+        style: {
+          padding: "16px",
+        },
+      },
+    },
+  ],
+});
+
+// 表单赋值
+onMounted(async () => {
+  setTimeout(() => {
+    ebRef.value?.setData({
+      input_sb6jhfb8: "自动填写的内容",
+    });
+  },200);
+});
+</script>
+```
+
+<script setup>
+import { EBuilder } from "epic-designer";
+import { ref,onMounted } from 'vue'
+import "epic-designer/dist/style.css";
+import { EDesigner, pluginManager } from "epic-designer";
+import { setupElementPlus } from "epic-designer/dist/ui/elementPlus";
+import 'element-plus/dist/index.css'
+setupElementPlus(pluginManager);
+const ebForm = ref(null)
+const formData = ref(null)
+const ebRef2 = ref(null)
+const pageSchema = {
+  schemas: [
+    {
+      type: "page",
+      id: "root",
+      children: [
+        {
+          label: "输入框",
+          type: "input",
+          field: "input",
+          icon: "epic-icon-write",
+          input: true,
+          componentProps: {
+            defaultValue: "",
+            placeholder: "请输入",
+            size: "default",
+            type: "text",
+          },
+          id: "gbm1xhrrj5s00",
+        },
+      ],
+      componentProps: {
+        style: {
+          padding: "16px",
+        },
+      },
+    },
+  ],
+};
+
+const pageSchemaForm = {
+  schemas: [
+    {
+      type: "page",
+      id: "root",
+      children: [
+        {
+          label: "表单",
+          type: "form",
+          icon: "epic-icon-qiapian",
+          name: "default",
+          componentProps: {
+            labelWidth: 100,
+            labelCol: {
+              span: 5,
+            },
+            wrapperCol: {
+              span: 19,
+            },
+            hideRequiredMark: false,
+            labelPosition: "right",
+            size: "default",
+            requireAsteriskPosition: "left",
+          },
+          children: [
+            {
+              label: "输入框",
+              type: "input",
+              field: "input",
+              icon: "epic-icon-write",
+              input: true,
+              componentProps: {
+                defaultValue: "",
+                placeholder: "请输入",
+                size: "default",
+                type: "text",
+              },
+              id: "7k6ajqpxhl000",
+            },
+            {
+              label: "数字输入框",
+              type: "number",
+              icon: "epic-icon-number",
+              field: "number",
+              input: true,
+              componentProps: {
+                placeholder: "请输入",
+                size: "default",
+                controlsPosition: "default",
+              },
+              id: "i6x0mqlm6js00",
+            },
+            {
+              label: "选择框",
+              type: "select",
+              icon: "epic-icon-xiala",
+              field: "select",
+              input: true,
+              componentProps: {
+                options: [
+                  {
+                    label: "选项1",
+                    value: "选项1",
+                  },
+                  {
+                    label: "选项2",
+                    value: "选项2",
+                  },
+                ],
+                placeholder: "请选择",
+                size: "default",
+                effect: "light",
+                placement: "bottom-start",
+              },
+              id: "80gl3fnca3g00",
+            },
+            {
+              label: "单选框",
+              type: "radio",
+              icon: "epic-icon-danxuan-cuxiantiao",
+              field: "radio",
+              input: true,
+              componentProps: {
+                options: [
+                  {
+                    label: "选项1",
+                    value: "选项1",
+                  },
+                  {
+                    label: "选项2",
+                    value: "选项2",
+                  },
+                ],
+                size: "default",
+              },
+              id: "2ggd4l3i109w0",
+            },
+          ],
+          id: "eqf5rtg2ohc00",
+        },
+      ],
+      componentProps: {
+        style: {
+          padding: "16px",
+        },
+      },
+    },
+  ]
+};
+
+async function handleValidate(){
+  formData.value = {...(await ebForm.value.validate())}
+  // alert('您可以在控制台查看数据')
+}
+
+async function handleReset() {
+console.log(ebRef2.value)
+  // 获取表单实例
+  const form = await ebRef2.value?.getFormInstance()
+  // 调用组件实例方法，参考ui from 提供的方法
+  form?.resetFields()
+}
+const pageSchema2 = {
+    "schemas": [
+    {
+      "type": "page",
+      "id": "root",
+      "label": "页面",
+      "children": [
+        {
+          "label": "表单",
+          "type": "form",
+          "icon": "epic-icon-daibanshixiang",
+          "componentProps": {
+            "name": "default",
+            "labelWidth": 100,
+            "labelCol": {
+              "span": 5
+            },
+            "wrapperCol": {
+              "span": 19
+            },
+            "hideRequiredMark": false,
+            "labelPlacement": "left",
+            "labelAlign": "right",
+            "requireMarkPlacement": "right",
+            "size": "medium"
+          },
+          "children": [
+            {
+              "label": "姓名",
+              "type": "input",
+              "field": "input_sb6jhfb8",
+              "icon": "epic-icon-write",
+              "input": true,
+              "componentProps": {
+                "defaultValue": "",
+                "placeholder": "请输入",
+                "type": "text",
+                "size": "medium",
+                "disabled": false
+              },
+              "id": "input_sb6jhfb8"
+            }
+          ],
+          "id": "form_18vemlk8"
+        }
+      ],
+      "componentProps": {
+        "style": {
+          "padding": "16px"
+        }
+      }
+    }
+  ]
+}
+
+onMounted(async () => {
+  setTimeout(() => {
+    ebRef2.value?.setData({
+      input_sb6jhfb8: "自动填写的内容",
+    });
+  },200);
+})
+
+
+</script>
+
+
+## API
+
+| 参数       | 说明                             | 类型    | 默认值 | 版本  |
+| ---------- | -------------------------------- | ------- | ------ | ----- |
+| pageSchema | EDesigner 设计器生成的 json 数据 | json    | -      | -     |
+| formData   | 表单数据，用于数据回显(仅用于name为default的表单)           | FormDataModel | -  | 0.9.15 |
+| disabled   | 禁用EBuilder所有输入项           | boolean | false  | 0.9.4 |
+
+## 函数
+
+| 函数名称        | 说明                       | 参数          | 回调参数                   | 版本   |
+| --------------- | -------------------------- | ------------- | -------------------------- | ------ |
+| setData         | 设置表单数据，用于数据回显 | FormDataModel |                            | 0.0.36 |
+| getData         | 跳过验证直接获取表单数据   | -             | Promise<br /><Object \| false>   | 0.0.36 |
+| validate        | 验证表单并获取表单数据     | -             | Promise<br /><Object \| false>   | 0.0.36 |
+| getFormInstance | 获取表单实例               |               | Promise<br /><Form \| false> | 0.9.4 |
+
+## 事件
+
+| 事件名称 | 说明             | 参数            | 版本 |
+| -------- | ---------------- | --------------- | ---- |
+| ready    | 页面渲染完时触发 | { pageManager } |      |

package/docs/guide/components/EDesigner.md

@@ -0,0 +1,120 @@
+# EDesigner 设计器
+
+:::tip 设计器
+`EDesigner` 是一个可视化设计器组件，用户可以通过拖拽组件的方式快速生成 JSON 配置。它提供了丰富的组件库和配置项，用户可以根据需要选择合适的组件并配置相应的属性、事件和动作。设计器还提供了实时预览功能，用户可以随时查看所设计页面的效果。最终，用户可以将 JSON 配置导出，用于页面的生成和修改。
+:::
+
+## 设计器布局说明
+
+![](/layout.jpg)
+
+**界面主要分为 6 个区域**
+
+1. 顶部 操作按钮
+2. 活动栏 可以切换侧边栏面板
+3. 侧边栏 组件选择或信息展示
+4. 编辑区域 拖拽组件布局设计
+5. 右侧边栏 属性编辑相关
+6. 底部 状态展示
+
+其中 活动栏，侧边栏及右侧边栏可以自定义配置修改
+
+## 基础用法
+
+<ConfigProvider :theme="{ algorithm: isDark ? theme.darkAlgorithm : theme.defaultAlgorithm }">
+  <div class="epic-designer-container">
+    <EDesigner  @save="handleSubmit"  />
+  </div>
+</ConfigProvider>
+
+```vue
+<template>
+  <div class="epic-designer-container">
+    <EDesigner @save="handleSubmit" />
+  </div>
+</template>
+<script lang="ts" setup>
+import { EDesigner, type PageSchema } from "epic-designer";
+
+/**
+ * 点击保存按钮操作
+ * @param e
+ */
+function handleSubmit(e:PageSchema) {
+  console.log(e);
+}
+</script>
+<style>
+.epic-designer-container {
+  width: 100%;
+  height: 800px;
+  border: 1px solid var(--epic-border-color);
+}
+</style>
+```
+
+<script setup>
+import "epic-designer/dist/style.css";
+import { EDesigner, pluginManager } from "epic-designer";
+import { setupAntd } from "epic-designer/dist/ui/antd";
+import { ConfigProvider, theme } from 'ant-design-vue'
+import { useTheme } from '@epic-designer/hooks'
+const { isDark } = useTheme()
+
+setupAntd(pluginManager);
+
+
+
+function handleSubmit (e) {
+  console.log(e)
+}
+</script>
+
+<style>
+.epic-designer-container{
+width:1200px;
+height:800px;
+border: 1px solid var(--epic-border-color);
+position: relative;
+z-index: 20;
+background: white;
+}
+</style>
+
+## API
+
+| 参数                  | 说明                                                       | 类型       | 默认值 | 版本   |
+| --------------------- | ---------------------------------------------------------- | ---------- | ------ | ------ |
+| title                 | 设计器头部标题                                             | string     | -      | 0.9.7  |
+| defaultSchema         | 默认pageSchema，初始化和重置设计器将以该数据为基础模板     | PageSchema | -      | 0.9.6  |
+| lockDefaultSchemaEdit | 锁定defaultSchema中组件不可以复制或移除                    | boolean    | false  | 0.9.7  |
+| disabledZoom          | 禁止缩放功能                                               | boolean    | false  | -      |
+| hiddenHeader          | 隐藏头部                                                   | boolean    | false  | -      |
+| formMode              | 单表单模式，开启后不可再拖入表单，根节点默认切换为表单组件 | boolean    | false  | 0.9.19 |
+| sourceCodeReadOnly    | 设置源码面板为只读状态                                     | boolean    | false  | 0.9.20 |
+
+## 函数
+
+| 函数名称 | 说明                                       | 参数 | 回调参数 | 版本   |
+| -------- | ------------------------------------------ | ---- | -------- | ------ |
+| setData  | 导入 json 数据，继续编辑                   | json | Boolean  | 0.0.36 |
+| getData  | 获取 json 数据                             | -    | Object   | 0.0.36 |
+| reset    | 清除表单                                   | -    | Boolean  | 0.0.36 |
+| preview  | 预览组件，与点击设计器头部预览按钮效果一致 | -    | -        | 0.9.15 |
+
+## 事件
+
+| 事件名称         | 说明                   | 参数       | 版本   |
+| ---------------- | ---------------------- | ---------- | ------ |
+| save             | 点击保存按钮时回调     | json       | 0.0.35 |
+| reset            | 点击清空重置按钮时触发 | PageSchema | 0.9.6  |
+| toggleDeviceMode | 点击切换设备模式时触发 | string     | 0.9.7  |
+
+## 插槽
+
+| 插槽名称            | 说明                       | 参数 | 版本   |
+| ------------------- | -------------------------- | ---- | ------ |
+| header-prefix       | 顶部左侧插槽（logo，标题） |      | 0.8.1  |
+| header-title        | 顶部标题                   |      |        |
+| header-right-prefix | 顶部右侧区域前置插槽       |      | 0.8.10 |
+| header-right-suffix | 顶部右侧区域后置插槽       |      | 0.8.10 |

package/docs/guide/copyright/copyright.md

@@ -0,0 +1,38 @@
+## 声明
+
+本项目采用 `MIT` 开源许可证，允许免费用于商业用途。任何使用者都必须遵守 `MIT` 许可证的相关条款。
+
+ `MIT` 协议内容如下：
+
+```typescript
+MIT License
+
+Copyright (c) 2022 kchengz
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+```
+
+使用必须遵守国家法律法规，⛔不允许非法项目使用，后果自负❗
+
+## 软件著作权证书
+
+<img src="https://examples.epicjs.cn/static/certificate.jpg" width="320px">
+
+
+