form-designer-xinyi 1.0.0

package/.eslintrc.js

@@ -0,0 +1,10 @@
+module.exports = {
+  root: true,
+  // This tells ESLint to load the config from the package `eslint-config-custom`
+  extends: ["custom"],
+  settings: {
+    next: {
+      rootDir: ["apps/*/"],
+    },
+  },
+};

package/.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar","MisterJ.vue-volar-extention-pack","dbaeumer.vscode-eslint","antfu.unocss"]
+}

package/.vscode/settings.json

@@ -0,0 +1,6 @@
+{
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit",
+    "eslint.autoFixOnSave": "explicit"
+  }
+}

package/LICENSE

@@ -0,0 +1,21 @@
+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.

package/README.md

@@ -0,0 +1,236 @@
+![](https://epic.kcz66.com/static/logo.png#pic_center)
+
+<h3 align="center" style="background-image:-webkit-linear-gradient(left,#44c0fa,#c26cf6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;">EpicDesigner</h3>
+
+
+<h4 align="center">一个开箱即用的拖拽式的可视化低代码设计器</h4>
+
+<p align="center">
+  <a href="https://github.com/vuejs/core">
+    <img src="https://img.shields.io/badge/vue-3.3.4-brightgreen.svg" alt="vue">
+  </a>
+  <a href="https://github.com/microsoft/TypeScript">
+    <img src="https://img.shields.io/badge/typescript-5.1.6-blue" alt="ant-design-vue">
+  </a>
+  <a href="#">
+    <img src="https://img.shields.io/github/license/mashape/apistatus.svg" alt="license">
+  </a>
+</p>
+
+
+📦github仓库：[https://github.com/Kchengz/epic-designer](https://github.com/Kchengz/epic-designer)
+
+📦gitee仓库：[https://gitee.com/kcz66/epic-designer](https://gitee.com/kcz66/epic-designer)
+
+📖文档地址：[https://docs.epicjs.cn](https://docs.epicjs.cn)
+
+📖文档备用地址：[https://www.kcz66.com/epic-designer/](https://www.kcz66.com/epic-designer/)
+
+💎项目预览地址：
+
+- ElementPlus：[https://epic.kcz66.com/element-plus/basic](https://epic.kcz66.com/element-plus/basic?maximize=1)
+- AntDesignVue：[https://epic.kcz66.com/ant-designe-vue/basic](https://epic.kcz66.com/ant-designe-vue/basic?maximize=1)
+- NaiveUi：[https://epic.kcz66.com/naive-ui/basic](https://epic.kcz66.com/naive-ui/basic?maximize=1)
+
+> 使用必须遵守国家法律法规，⛔不允许非法项目使用，后果自负❗
+
+## 简介
+
+可以简称`epic设计器`，是一个功能强大、开箱即用的拖拽式低代码设计器。它基于 Vue3 开发，兼容多套 UI 组件库，除了基础的页面设计功能，EpicDesigner 还提供了强大的扩展功能，可以让开发者根据自己的需求自由扩展和定制组件。此外，EpicDesigner使用 JSON 配置来生成页面，可帮助开发者快速生成页面，提高开发效率。它提供了两个重要组件：`e-designer` 设计器和 `e-builder` 生成器。
+
+
+## 最新版本
+
+[![](https://img.shields.io/npm/v/epic-designer.svg?style=flat-square)](https://www.npmjs.com/package/epic-designer)
+
+[查看更新日志](./docs/updateLog.md)
+
+#### 功能
+
+- [x] 拖拽设计
+- [x] 自定义 actionBar
+- [x] 布局组件扩展
+- [x] 自定义组件扩展
+- [x] 事件扩展
+- [x] 组件懒加载
+- [x] 完善布局
+- [x] 组件属性自定义
+- [x] 支持不同 UI
+- [x] 插件扩展
+
+
+
+## 核心组件介绍
+
+#### EDesigner 设计器
+
+`EDesigner ` 是一个可视化设计器组件，用户可以通过拖拽组件的方式快速生成 JSON 配置。它提供了丰富的组件库和配置项，用户可以根据需要选择合适的组件并配置相应的属性、事件和动作。设计器还提供了实时预览功能，用户可以随时查看所设计页面的效果。最终，用户可以将 JSON 配置导出，用于页面的生成和修改。
+
+#### EBuilder 生成器
+
+`EBuilder` 是一个页面构建组件，它可以将设计器生成的 JSON 配置构建成页面，完成组件的渲染、事件绑定和数据回显等操作。
+
+## 安装 epic-designer
+
+```bash
+npm i epic-designer
+```
+
+epic-designer 目标是支持多 UI 兼容,目前支持以下 UI
+
+- element-plus
+- ant-design-vue
+- naive-ui
+
+## 选择 UI 组件库
+
+### 选择 element-plus
+
+安装ui框架依赖
+
+```bash
+npm i element-plus
+```
+
+main.ts 或者 main.js 引入注册组件
+
+```javascript
+// 引入epic-designer样式
+import "epic-designer/dist/style.css";
+
+// 引入Element plus样式
+import "element-plus/dist/index.css";
+
+import { setupElementPlus } from "epic-designer/dist/ui/elementPlus";
+// 注册Element UI
+setupElementPlus();
+```
+
+### 选择 ant-design-vue v4.x版本（antd推荐使用v4.x版本）
+
+安装ui框架依赖
+
+```bash
+npm i ant-design-vue
+```
+
+main.ts 或者 main.js 引入注册组件
+
+```javascript
+// 引入epic-designer样式
+import "epic-designer/dist/style.css";
+
+// 引入antd UI 重置样式
+import "ant-design-vue/dist/reset.css";
+
+import { setupAntd } from "epic-designer/dist/ui/antd";
+// 使用Antd UI
+setupAntd();
+```
+
+### ant-design-vue v3.x版本需要改成下面方式
+
+  为了减少维护精力，后续开发测试主要以 v4.x版本，不再对v3.x版本进行测试，建议升级ant-design-vue到v4.x最新版本
+
+```javascript
+// 引入epic-designer样式
+import "epic-designer/dist/style.css";
+
+// 引入antd UI样式
+import "ant-design-vue/dist/antd.css";
+
+import { setupAntd } from "epic-designer/dist/ui/antd";
+// 使用Antd UI
+setupAntd();
+```
+
+### 选择 naive-ui
+
+安装ui框架依赖
+
+```bash
+npm i -D naive-ui
+```
+
+main.ts 或者 main.js 引入注册组件
+
+```javascript
+// 引入epic-designer样式
+import "epic-designer/dist/style.css";
+
+import { setupNaiveUi } from "epic-designer/dist/ui/naiveUi";
+// 注册Naive Ui
+setupNaiveUi();
+```
+
+## EDesigner(设计器) 基础用法
+
+```vue
+<template>
+  <div class="h-full">
+    <EDesigner />
+  </div>
+</template>
+<script setup lang="ts">
+import { EDesigner } from "epic-designer";
+</script>
+<style>
+.h-full {
+  height: 100vh;
+}
+</style>
+```
+## EBuilder(生成器) 基础用法
+
+```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>
+```
+
+## 交流
+
+点击链接加入 qq 群聊
+
+- [【epic-designer 交流群：747609683】](https://jq.qq.com/?_wv=1027&k=CtrM9ce2)
+
+## 捐赠
+如果你觉得epic-designer对你有帮助，欢迎给我捐赠
+
+![](https://epic.kcz66.com/static/donation.png)
+

package/docs/.vitepress/config.ts

@@ -0,0 +1,158 @@
+import { defineConfig } from "vitepress";
+export default defineConfig({
+  // 网站标题
+  title: "EpicDesigner文档",
+  // 网站描述
+  description: "低代码可视化设计器及生成器",
+  lang: "zh-CN",
+  base: "/",
+  sitemap: {
+    hostname: "https://docs.epicjs.cn",
+  },
+  // 打包目录
+  head: [
+    // 添加图标
+    ["link", { rel: "epic-icon", type: "image/x-icon", href: "/favicon.ico" }],
+  ],
+  // 主题配置
+  themeConfig: {
+    logo: "https://epic.kcz66.com/static/logo.png",
+    algolia: {
+      appId: "PUN9QM5E0U",
+      apiKey: "29a246325412eeb2df1f9108a3a11885",
+      indexName: "kcz66-gitee",
+    },
+    editLink: {
+      text: "为此页提供修改建议",
+      pattern: "https://github.com/Kchengz/epic-designer/issues",
+    },
+
+    socialLinks: [
+      { icon: "github", link: "https://github.com/Kchengz/epic-designer" },
+    ],
+    footer: {
+      copyright:
+        "本文档内容版权为 EpicDesigner 作者kchengz所有，保留所有权利。",
+    },
+    nav: [
+      {
+        text: "文档",
+        link: "/guide/start/index",
+        activeMatch: "/guide/start/index",
+      },
+      { text: "更新日志", link: "/updateLog", activeMatch: "/updateLog" },
+      {
+        text: "关于作者 | 赞助",
+        link: "/guide/about/about",
+        activeMatch: "/about",
+      },
+      // { text: "个人博客", link: "https://www.kcz66.com" },
+      {
+        text: "相关链接",
+        items: [
+          {
+            text: "Vue3",
+            link: "https://cn.vuejs.org/",
+          },
+          {
+            text: "Vite",
+            link: "https://cn.vitejs.dev/",
+          },
+          {
+            text: "TypeScript",
+            link: "https://www.typescriptlang.org/",
+          },
+        ],
+      },
+    ],
+    sidebar: {
+      "/guide/": [
+        {
+          text: "介绍",
+          items: [
+            {
+              text: "简介",
+              link: "/guide/start/index",
+            },
+            {
+              text: "快速上手",
+              link: "/guide/start/quick-start",
+            },
+            {
+              text: "国际化",
+              link: "/guide/start/i18n-cn",
+            },
+            {
+              text: "定制主题",
+              link: "/guide/start/theme",
+            },
+            {
+              text: "暗黑模式",
+              link: "/guide/start/dark-mode",
+            },
+          ],
+        },
+        {
+          text: "组件",
+          items: [
+            {
+              text: "Designer 设计器",
+              link: "/guide/components/EDesigner",
+            },
+            {
+              text: "Builder 生成器",
+              link: "/guide/components/EBuilder",
+            },
+          ],
+        },
+        {
+          text: "事件动作",
+          items: [
+            {
+              text: "自定义函数",
+              link: "/guide/action/customFunctions",
+            },
+            {
+              text: "公共函数",
+              link: "/guide/action/publicMethods",
+            },
+          ],
+        },
+        {
+          text: "扩展",
+          items: [
+            {
+              text: "Icon 图标",
+              link: "/guide/extensions/icon",
+            },
+            {
+              text: "组件扩展",
+              link: "/guide/extensions/component",
+            },
+            {
+              text: "活动栏扩展",
+              link: "/guide/extensions/actionBar",
+            },
+            {
+              text: "右侧边栏扩展",
+              link: "/guide/extensions/rightSidebar",
+            },
+          ],
+        },
+        {
+          text: "更多",
+          items: [
+            {
+              text: "pluginManager 插件管理器",
+              link: "/guide/utils/pluginManager",
+            },
+            {
+              text: "pageManager 页面管理器",
+              link: "/guide/utils/pageManager",
+            },
+          ],
+        },
+      ],
+    },
+  },
+});

package/docs/.vitepress/theme/custom.css

@@ -0,0 +1,38 @@
+/* .vitepress/theme/custom.css */
+:root {
+  --vp-home-hero-name-color: #3e8bf2;
+
+  --vp-button-brand-bg: #3e8bf2;
+  --vp-button-brand-border: #63a1f3;
+
+  --vp-button-brand-hover-bg: #3e8bf2dd;
+  --vp-button-brand-hover-border: #63a1f3dd;
+
+  --vp-c-brand-dark: var(--vp-button-brand-bg);
+
+  --vp-home-hero-image-background-image: #007cf5;
+  --vp-home-hero-image-filter: #00bffd;
+  --vp-c-brand: #3e8bf2;
+
+  --vp-custom-block-tip-border: #3e8bf280;
+  --vp-custom-block-tip-text: #15335f;
+  --vp-custom-block-tip-bg: #3e8bf20d;
+}
+
+/* 首页样式 start */
+.VPHome .clip {
+  background-image: -webkit-linear-gradient(left, #007cf5, #00bffd);
+  -webkit-text-fill-color: transparent;
+}
+
+.image-container > .image-bg {
+}
+
+/* .has-sidebar .content {
+  position: relative;
+  z-index: 88;
+} */
+
+.epic-designer-main a {
+  text-decoration: none;
+}

package/docs/.vitepress/theme/index.ts

@@ -0,0 +1,7 @@
+// .vitepress/theme/index.js
+import DefaultTheme from 'vitepress/theme'
+import 'element-plus/theme-chalk/dark/css-vars.css'
+import './custom.css'
+import './style.css'
+
+export default DefaultTheme

package/docs/.vitepress/theme/style.css

@@ -0,0 +1,36 @@
+.DocSearch-Button {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 0;
+    padding: 0;
+    width: 32px;
+    height: 32px;
+    border-radius: 4px;
+    background: transparent;
+    transition: border-color 0.25s;
+  }
+  @media (min-width: 768px) {
+    .DocSearch-Button {
+      justify-content: flex-start;
+      border: 1px solid transparent;
+      border-radius: 8px;
+      padding: 0 10px 0 12px;
+      width: 100%;
+      height: 40px;
+      background-color: var(--vp-c-bg-alt);
+    }
+  }
+  @media (max-width: 768px) {
+    .DocSearch-Button-Keys {
+      display: none;
+    }
+    .VPNavBarHamburger {
+      height: 32px !important;
+      width: 32px !important;
+      border-radius: 4px;
+    }
+  }
+  .DocSearch-Button:hover {
+    background-color: #f5f5f6;
+  }

package/docs/guide/about/about.md

@@ -0,0 +1,25 @@
+## 作者信息
+
+橙子/男
+
+对于编程和开发世界的热爱驱使着我不断探索，希望用有趣的代码创造出有趣的事物。
+
+Github主页：https://github.com/Kchengz
+
+Gitee主页：[https://gitee.com/kcz66](https://gitee.com/kcz66)
+
+
+
+个人博客：http://www.kcz66.com（更新少，没啥内容）
+
+开源项目：
+
+- EpicDesigner低代码设计器：[epic-designer](https://gitee.com/kcz66/epic-designer) <img src="https://gitee.com/kcz66/epic-designer/badge/star.svg" style="display: inline; top: 6px; border-radius: 0px;transform: translateY(5px);" />
+
+- KFormDesign表单设计器：[k-form-design](https://gitee.com/kcz66/k-form-design) <img src="https://gitee.com/kcz66/k-form-design/badge/star.svg" style="display: inline; top: 6px; border-radius: 0px;transform: translateY(5px);" />
+
+
+## 赞助
+如果你觉得EpicDesigner对你有帮助，欢迎给我捐赠
+
+![](https://epic.kcz66.com/static/donation.png)