form-designer-xinyi 1.0.0

package/docs/guide/components/EBuilder.md

@@ -0,0 +1,544 @@
+# EBuilder 生成器
+
+:::tip 生成器
+`EBuilder` 是一个页面构建组件，它可以将设计器生成的 JSON 配置构建成页面，功能包括组件渲染、事件绑定和数据回显等。
+:::
+
+## 基础用法
+
+> 通过 JSON 渲染组件
+
+<div>
+	<EBuilder :pageSchema="pageSchema" />
+</div>
+
+```vue
+<template>
+  <div>
+    <EBuilder :pageSchema="pageSchema" />
+  </div>
+</template>
+<script 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="pageSchemaForm" />
+  		<button @click="handleValidate">获取数据</button>
+  	<div>
+  {{formData}}
+  </div>
+</div>
+</template>
+<script setup>
+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>
+    <div @click="handleReset">
+      清空数据
+    </div>
+  </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 提供的方法
+  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 () => {
+  ebRef.value?.setData({
+    'input_sb6jhfb8': "自动填写的内容"
+  })
+})
+</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 () => {
+  ebRef2.value?.setData({
+    'input_sb6jhfb8': "自动填写的内容"
+  })
+})
+
+
+</script>
+
+
+## API
+
+| 参数       | 说明                             | 类型    | 默认值 | 版本  |
+| ---------- | -------------------------------- | ------- | ------ | ----- |
+| pageSchema | EDesigner 设计器生成的 json 数据 | json    | -      | -     |
+| 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,117 @@
+# 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 setup>
+import { EDesigner } from "epic-designer";
+
+/**
+ * 点击保存按钮操作
+ * @param e
+ */
+function handleSubmit(e) {
+  console.log(e);
+}
+</script>
+<style>
+.epic-designer-container {
+  width: 1100px;
+  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/utils'
+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  | -     |
+
+## 函数
+
+| 函数名称 | 说明                     | 参数 | 回调参数 | 版本   |
+| -------- | ------------------------ | ---- | -------- | ------ |
+| setData  | 导入 json 数据，继续编辑 | json | Boolean  | 0.0.36 |
+| getData  | 获取 json 数据           | -    | Object   | 0.0.36 |
+| reset    | 清除表单                 | -    | Boolean  | 0.0.36 |
+
+## 事件
+
+| 事件名称         | 说明                   | 参数       | 版本   |
+| ---------------- | ---------------------- | ---------- | ------ |
+| 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/extensions/actionBar.md

@@ -0,0 +1,55 @@
+# 活动栏扩展
+
+:::tip 活动栏扩展
+`pluginManager` 提供了registerRightSidebar方法扩展活动栏功能模块
+:::
+
+参考demo仓库： [https://gitee.com/kcz66/k-designer-demo](https://gitee.com/kcz66/k-designer-demo)
+
+## 活动扩展
+
+在src目录下新建designer-extensions 文件目录，下面是一个简单扩展示例
+
+### 新建 designer-extensions/actionBar/index.vue
+
+```vue
+<template>
+    <div>
+        我是一个扩展模块
+    </div>
+</template>
+```
+
+### 新建designer-extensions/index.ts(扩展函数)
+```ts
+import { pluginManager } from "epic-designer";
+
+// 安装扩展
+export function setupDesignerExtensions(): void {
+  // 添加右侧模块
+  pluginManager.registerRightSidebar({
+    id: "test",
+    title: "扩展活动栏",
+    component: async () => await import("./actionBar/index.vue"),
+  });
+}
+```
+### main.ts 添加执行扩展函数
+
+```ts
+import { setupDesignerExtensions } from "./designer-extensions";
+
+// 执行扩展函数
+setupDesignerExtensions();
+```
+
+## 如何修改覆盖原来的模块
+
+在扩展活动栏时，需要传入的配置id是唯一的，如果id一样则后注册组件会替换原来的组件，所以我们可以通过设置id来覆盖原来右侧边栏模块
+
+| 模块名 | id              |
+| ------ | --------------- |
+| 组件   | component_view  |
+| 源码   | sound_code_view |
+| 大纲   | outline_view    |
+