form-designer-xinyi 1.0.0

package/docs/guide/extensions/component.md

@@ -0,0 +1,113 @@
+# 组件扩展
+
+:::tip 组件扩展
+`pluginManager` 提供了registerComponent方法添加组件
+:::
+
+参考demo仓库： [https://gitee.com/kcz66/k-designer-demo](https://gitee.com/kcz66/k-designer-demo)
+
+## 普通组件扩展
+
+在src目录下新建designer-extensions 文件目录，下面是一个简单扩展示例
+
+## 新建 designer-extensions/test/index.vue（组件）
+
+```vue
+<template>
+  <div>
+  	我是扩展的组件
+  </div>
+</template>
+```
+
+## 新建designer-extensions/test/index.ts(组件配置文件)
+
+[ComponentConfigModel 配置字段类型](#componentconfigmodel-类型及字段注释)
+
+```ts
+import { type ComponentConfigModel } from 'epic-designer'
+
+export default {
+  component: async () => await import('./cmp.vue'),
+  groupName:"自定义组件",
+  icon: "epic-icon-write",
+  defaultSchema: {
+    label: '测试扩展组件',
+    type: 'test',
+    componentProps: {
+    }
+  },
+  config: {
+    attribute: [
+      {
+        label: '属性1',
+        type: 'input',
+        field: 'name'
+      }
+    ]
+  }
+} as ComponentConfigModel
+```
+
+## 新建designer-extensions/index.ts(扩展函数)
+```ts
+import { pluginManager } from "epic-designer";
+import Test from "./Test";
+
+// 安装扩展
+export function setupDesignerExtensions(): void {
+
+     // 注册组件
+     pluginManager.registerComponent(Test);
+}
+```
+## main.ts 添加执行扩展函数
+
+```ts
+import { setupDesignerExtensions } from "./designer-extensions";
+
+// 执行扩展函数
+setupDesignerExtensions();
+```
+
+
+
+## ComponentConfigModel 类型及字段注释
+
+```
+export interface EditConstraintsModel {
+   // 当前组件是否固定不可拖动，可选
+   immovable?: boolean;
+   // 子节点是否固定不可拖动,只控制下一级，可选
+   childImmovable?: boolean;
+   // 表单字段是否固定 不添加随机UUID
+   fixedField?: boolean;
+}
+  
+export interface ComponentConfigModel {
+  // 组件
+  component: any;
+  // 分组名称（组件分组），不设置分组时仅注册，但不会显示在组件列表中，可选
+  groupName?: string;
+  // 组件图标
+  icon?: string;
+  // 默认组件结构数据
+  defaultSchema: ComponentSchema;
+  // 设计编辑约束
+  editConstraints?: EditConstraintsModel;
+  // 配置
+  config: {
+    // 属性编辑列表
+    attribute?: ComponentSchema[];
+    // 样式编辑组件列表
+    style?: ComponentSchema[];
+    // 可触发事件
+    event?: EventModel[];
+    // 可执行函数
+    action?: ActionModel[];
+  };
+  // 输入表单组件v-model绑定变量名称 默认 modelValue
+  bindModel?: string;
+}
+```
+

package/docs/guide/extensions/icon.md

@@ -0,0 +1,41 @@
+# Icon 图标
+
+:::tip Icon 图标
+`EpicDesigner` 使用Iconfont图标库，如果需要扩展图标只需参照Iconfont文档中font-class引用方式
+:::
+
+[查看Iconfont文档](https://www.iconfont.cn/help/detail?spm=a313x.help_detail.i3.28.550b3a817jMvMr&helptype=code)
+
+## font-class 引用
+
+font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。
+
+与unicode使用方式相比，具有如下特点：
+
+- 兼容性良好，支持ie8+，及所有现代浏览器。
+- 相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。
+- 因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。
+- 不过因为本质上还是使用的字体，所以多色图标还是不支持的。
+
+使用步骤如下：
+
+### 第一步：拷贝项目下面生成的fontclass代码：
+
+```js
+//at.alicdn.com/t/font_8d5l8fzk5b87iudi.css
+```
+
+### 第二步：挑选相应图标并获取类名，应用组件注册配置
+
+```css
+icon: 'icon-xxx'
+```
+
+
+## 内置Icon
+
+> 以下为`EpicDesigner`默认内置的Icon
+
+<iframe width="720px" height="2160px" frameborder="0" src="/icons/demo_index.html">
+
+</iframe>

package/docs/guide/extensions/rightSidebar.md

@@ -0,0 +1,57 @@
+# 右侧边栏扩展
+
+:::tip 右侧边栏扩展
+`pluginManager` 提供了registerRightSidebar方法扩展右侧边栏功能模块
+:::
+
+参考demo仓库： [https://gitee.com/kcz66/k-designer-demo](https://gitee.com/kcz66/k-designer-demo)
+
+## 右侧边栏扩展
+
+在src目录下新建designer-extensions 文件目录，下面是一个简单扩展示例
+
+### 新建 designer-extensions/sidebar/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_view",
+    title: "扩展",
+    component: async () => await import("./sidebar/index.vue"),
+  });
+}
+```
+### main.ts 添加执行扩展函数
+
+```ts
+import { setupDesignerExtensions } from "./designer-extensions";
+
+// 执行扩展函数
+setupDesignerExtensions();
+```
+
+
+
+## 如何修改覆盖原来的模块
+
+在扩展组件时，需要传入的配置id是唯一的，如果id一样则后注册组件会替换原来的组件，所以我们可以通过设置id来覆盖原来右侧边栏模块
+
+| 模块名 | id             |
+| ------ | -------------- |
+| 属性   | attribute_view |
+| 样式   | style_view     |
+| 事件   | event_view     |
+

package/docs/guide/start/dark-mode.md

@@ -0,0 +1,149 @@
+# 暗黑模式  <span style="font-size:16px">v0.9.11</span>
+
+:::tip 国际化
+`EpicDesigner`从v0.9.11开始支持了暗黑模式！
+
+注：本部分文档仅切换暗黑模式主题，UI组件暗黑模式请自行参照UI文档
+
+:::
+
+## 如何使用
+
+ 首先你可以创建一个开关来控制 `暗黑模式` 的 class 类名。
+
+
+
+> 如果您只需要暗色模式，只需在 html 上添加一个名为 `dark` 的类 。
+
+```html
+<html class="dark">
+  <head></head>
+  <body></body>
+</html>
+```
+
+## 动态切换模式
+
+```tsx
+import { useTheme } from 'epic-designer'
+const { toggleDark } = useTheme()
+
+// 切换主题模式
+toggleDark()
+```
+
+![](https://epic.kcz66.com/static/dark.png)
+
+## 修改暗黑主题
+
+同自定义主题一样，直接覆盖对应的 css 变量即可
+
+像这样，新建一个 `styles/dark-vars.css`文件:
+
+```css
+html.dark {
+  /* 自定义深色背景颜色 */
+  --epic-primary-color: #98f;
+  --epic-primary-hover-color: #9988ff26;
+  --epic-widget-shade-color: #9988ff18;
+}
+```
+
+在 Epic Designer 的样式之后导入它
+
+```tsx
+// main.ts
+import "epic-designer/dist/style.css";
+import './styles/dark-vars.css'
+```
+
+## UI组件暗黑模式
+
+> 参照上面方案，可完成EpicDesigner 设计器暗黑模式，UI组件还需要参照UI官方文档完成暗黑模式切换
+
+### Element Plus
+
+> EpicDesigner与Element Plus暗黑模式一致，只需在 html 上添加一个名为 `dark` 的类即可
+
+[暗黑模式 | Element Plus (element-plus.org)](https://element-plus.org/zh-CN/guide/dark-mode.html)
+
+### Ant Design Vue
+
+[定制主题 - Ant Design Vue (antdv.com)](https://www.antdv.com/docs/vue/customize-theme-cn#使用预设算法)
+
+### Naive UI
+
+[调整主题 - Naive UI](https://www.naiveui.com/zh-CN/light/docs/customize-theme#使用暗色主题)
+
+## css变量
+
+```
+// 主色
+--epic-primary-color: #3e8bf2;
+
+// hover颜色
+--epic-primary-hover-color: rgba(62, 139, 242, 0.08);
+
+// 设计器背景色
+--epic-designer-color: #fafafc;
+
+// 设计器点颜色
+--epic-designer-dot-color: #373739;
+
+// 画布背景
+--epic-edit-range-color: #fff;
+
+// 属性视图背景色
+--epic-view-color: #fff;
+
+// 拖拽区域背景色
+--epic-edit-color: #ccc;
+
+// 活动视图切换器背景色
+--epic-action-bar-color: #fff;
+
+// 顶部颜色
+--epic-header-color: white;
+
+// 动作栏 hover
+--epic-action-hover-color: #f8f8f8;
+
+// 窗口部件 hover
+--epic-widget-hover-color: #f8f8f8;
+
+// 窗口部件遮罩颜色
+--epic-widget-shade-color: rgba(62, 139, 242, 0.06);
+
+// 事件项背景色
+--epic-event-item-color: #f8f8f8;
+
+// 阴影颜色
+--epic-shadow-color: #0000003d;
+
+// 主要文本颜色
+--epic-text-main: #000000de;
+
+// 二级文本颜色（介于主要文本和辅助文本之间）
+--epic-text-secondary: #00000099;
+
+// 辅助文本颜色（更浅）
+--epic-text-helper: #00000066;
+
+// 禁用文本颜色
+--epic-text-disabled: #00000042;
+
+// 边框颜色
+--epic-border-color: #d9d9d9;
+
+// 组件tabs颜色
+--epic-compoent-tabs-color: #f8f8f8;
+
+// 组件hover颜色
+--epic-compoent-hover-color: rgba(62, 139, 242, 0.06);
+
+// 字体大小
+--epic-text-sm: 12px;
+--epic-text-md: 14px;
+--epic-text-lg: 16px;
+```
+

package/docs/guide/start/i18n-cn.md

@@ -0,0 +1,39 @@
+# 国际化
+
+:::tip 国际化
+`EpicDesigner` 目前的默认是ui的默认语言，如果需要调整ui使用其他语言，可以参考下面的方案。
+:::
+
+## Element Plus
+
+先参考官方文档的国际化
+
+[国际化 | Element Plus (element-plus.org)](https://element-plus.org/zh-CN/guide/i18n.html#国际化)
+
+完成UI文档国际化基础上，添加`provideGlobalConfig`函数，完成EpicDesigner内部国际化
+
+```tsx
+import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
+import { provideGlobalConfig } from "epic-designer/dist/ui/elementPlus";
+provideGlobalConfig({ locale: zhCn });
+```
+
+## Ant Design Vue
+
+先参考官方文档的国际化
+
+[国际化 - Ant Design Vue (antdv.com)](https://www.antdv.com/docs/vue/i18n-cn)
+
+完成UI文档国际化基础上，添加`setDateLocale`函数，完成EpicDesigner内部国际化
+
+```tsx
+import { setDateLocale } from "epic-designer/dist/ui/antd";
+setDateLocale('zh-cn')
+```
+
+## Naive UI
+
+直接参考官方文档的国际化
+
+[全局化配置 Config Provider - Naive UI](https://www.naiveui.com/zh-CN/os-theme/components/config-provider#language.vue)
+

package/docs/guide/start/index.md

@@ -0,0 +1,59 @@
+# 简介
+
+:::tip EpicDesigner 设计器
+`EpicDesigner`是一个功能强大、开箱即用的拖拽式低代码设计器。它基于 Vue3 开发，兼容多套 UI 组件库，除了基础的页面设计功能，EDesigner 还提供了强大的扩展功能，可以让开发者根据自己的需求自由扩展和定制组件。此外，EDesigner 使用 JSON 配置来生成页面，可帮助开发者快速生成页面，提高开发效率。它提供了两个重要组件：`EDesigner ` 设计器和 `EBuilder ` 生成器。
+:::
+
+#### EDesigner 设计器
+
+`EDesigner ` 是一个可视化设计器组件，用户可以通过拖拽组件的方式快速生成 JSON 配置。它提供了丰富的组件库和配置项，用户可以根据需要选择合适的组件并配置相应的属性、事件和动作。设计器还提供了实时预览功能，用户可以随时查看所设计页面的效果。最终，用户可以将 JSON 配置导出，用于页面的生成和修改。
+
+#### EBuilder 生成器
+
+`EBuilder ` 是一个页面构建组件，它可以将设计器生成的 JSON 配置构建成页面，完成组件的渲染、事件绑定和数据回显等操作。
+
+
+
+## 最新版本
+
+[![](https://img.shields.io/npm/v/epic-designer.svg?style=flat-square)](https://www.npmjs.com/package/epic-designer)
+
+
+
+📦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)
+
+💎项目预览地址：
+
+- 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)
+
+## 特性
+
+- 可视化配置页面
+- 提供预览、保存、生成 json、生成可执行代码等操作
+- 支持表单验证
+- 面板自定义
+- 自定义组件扩展
+- 组件属性自定义配置
+- 组件样式配置
+- 组件事件动作配置
+- 布局嵌套使用及布局组件扩展
+
+## 技术栈
+
+| 图标                                                                      | 名称       | 版本  |
+| ------------------------------------------------------------------------- | ---------- | ----- |
+| [![](https://skillicons.dev/icons?i=vue)](https://cn.vuejs.org/)          | Vue        | 3.2.x |
+| [![](https://skillicons.dev/icons?i=ts)](https://www.typescriptlang.org/) | Typescript | 5.0.x |
+| [![](https://skillicons.dev/icons?i=vite)](https://cn.vitejs.dev/)        | Vite       | 3.2.x |
+
+更多请查看 **package.json**
+
+## 浏览器支持
+
+开发和测试平台均在 Google 和最新版 EDGE 上完成，其它浏览器请自行测试。如果存在兼容问题可在 gitee 或 github 提交 Issue。

package/docs/guide/start/quick-start.md

@@ -0,0 +1,179 @@
+# 快速上手
+
+## 安装 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>
+```
+
+## monaco-editor资源加载问题
+
+vite项目安装使用vite-plugin-monaco-editor插件加载monaco-editor依赖资源
+
+```bash
+npm i -D vite-plugin-monaco-editor
+```
+
+在vite.config.ts中添加
+
+```typescript
+import monacoEditorPlugin from 'vite-plugin-monaco-editor'
+ 
+export default defineConfig({
+plugins: [
+    vue(), 
+    monacoEditorPlugin({
+      languageWorkers:['editorWorkerService', 'css', 'html', 'json', 'typescript']
+    })
+  ]
+});
+```