epic-designer-gold 0.0.3 → 0.0.4

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

@@ -0,0 +1,194 @@
+# 快速上手
+
+## 安装 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 as any).default({
+      languageWorkers:['editorWorkerService', 'json']
+    })
+  ]
+});
+```
+
+> 如果因为插件依赖版本问题，上面写法不支持时可以改成下面这种方式
+
+```typescript
+import monacoEditorPlugin from 'vite-plugin-monaco-editor'
+ 
+export default defineConfig({
+plugins: [
+    vue(), 
+    monacoEditorPlugin({
+      languageWorkers:['editorWorkerService', 'json']
+    })
+  ]
+});
+```

package/docs/guide/start/theme.md

@@ -0,0 +1,125 @@
+# 自定义主题<span style="font-size:16px">v0.9.11</span>
+
+:::tip 国际化
+`EpicDesigner` 默认提供一套CSS 变量，方便使用者覆盖样式。
+
+注：本部分文档仅定制设计器主题，不包含UI，UI组件主题定制请自行参照UI文档
+
+:::
+
+## 通过 CSS 变量设置
+
+CSS 变量是一个非常有用的功能，几乎所有浏览器都支持。
+
+你可以直接在全局样式中直接覆盖默认变量名称，比如：
+
+像这样，新建一个 `styles/common-vars.css`文件:
+
+```css
+:root {
+  --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/common-vars.css'
+```
+
+ ![](https://examples.epicjs.cn/static/theme.jpg)
+
+## UI组件主题定制
+
+> 参照上面方案，仅完成EpicDesigner 设计器主题定制，UI组件主题还需要参照UI官方文档完成主题
+
+### Element Plus
+[主题 | Element Plus (element-plus.org)](https://element-plus.org/zh-CN/guide/theming.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/os-theme/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-medium: #000000ab;
+
+// 二级文本颜色
+--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/utils/pageManager.md

@@ -0,0 +1,97 @@
+# pageManager 页面管理器
+
+:::tip 插件管理器
+`pageManager ` 是用于查询当前页面组件实例，并且可以通过页面管理器，跟渲染的组件进行交互
+
+页面管理器是由builder组件创建，并在ready事件返回该对象
+
+:::
+
+## 通过builder组件 ready事件获取pageManager
+
+```vue
+<template>
+  <div>
+    <EBuilder ref="kfb" :pageSchema="pageSchema" @ready="handleReady">
+    </EBuilder>
+
+  </div>
+</template>
+<script lang="ts" setup>
+import { ref, onMounted } from 'vue'
+import { EBuilder, PageManager, PageSchema } from 'epic-designer'
+    
+const pageSchema = ref<PageSchema>({
+  "schemas": [
+    {
+      "type": "page",
+      "id": "root",
+      "label": "页面",
+      "children": [
+        {
+          "label": "表单",
+          "type": "form",
+          "icon": "epic-icon-daibanshixiang",
+          "name": "default",
+          "componentProps": {
+            "labelWidth": 100,
+            "labelCol": {
+              "span": 5
+            },
+            "wrapperCol": {
+              "span": 19
+            },
+            "hideRequiredMark": false,
+            "labelPosition": "right",
+            "size": "default",
+            "requireAsteriskPosition": "left"
+          },
+          "children": [
+            {
+              "label": "上传文件",
+              "type": "upload-file",
+              "icon": "epic-icon-upload",
+              "field": "upload",
+              "input": true,
+              "componentProps": {
+                "action": "https://examples.epicjs.cn/static/upload-img.json",
+                "name": "file",
+                "showFileList": true
+              },
+              "id": "upload-file_by35flst"
+            }
+          ],
+          "id": "form_uknia964"
+        }
+      ],
+      "componentProps": {
+        "style": {
+          "padding": "16px"
+        }
+      }
+    }
+  ],
+  "script": "const { defineExpose, getComponent } = this;\n\nfunction test (){\n    console.log('test')\n}\n\n// 通过defineExpose暴露的函数或者属性\ndefineExpose({\n test \n})"
+})
+
+function handleReady(pageManager: PageManager) {
+  console.log(pageManager)
+}
+
+</script>
+```
+
+## Methods
+
+#### find
+
+类型：`(id: string) => ComponentPublicInstance `
+
+说明：用于获取组件实例
+
+#### getComponentInstance
+
+类型：`(id: string) => ComponentPublicInstance `
+
+说明：通过id获取组件实例，跟find函数效果一致，find函数名称更简短
+

package/docs/guide/utils/pluginManager.md

@@ -0,0 +1,227 @@
+# pluginManager 插件管理器
+
+:::tip 插件管理器
+`pluginManager` 是用于管理扩展组件，模块功能的管理器对象
+
+:::
+
+## 注册组件
+
+```ts
+import { pluginManager,type ComponentConfigModel } from 'epic-designer'
+
+const Test = {
+  component: () => import('./cmp.vue'),
+  groupName:"自定义组件",
+  icon: "epic-icon-write",
+  defaultSchema: {
+    label: '测试扩展组件',
+    type: 'test',
+    componentProps: {
+    }
+  },
+  config: {
+    attribute: [
+      {
+        label: '属性1',
+        type: 'input',
+        field: 'name'
+      }
+    ]
+  }
+}
+
+// 注册组件
+pluginManager.registerComponent(Test);
+```
+
+在同级目录下创建cmp.vue 
+
+```vue
+<template>
+  <div>
+  	我是扩展的组件
+  </div>
+</template>
+```
+
+
+
+## Methods
+
+#### registerComponent
+
+类型：`(componentConfig: ComponentConfigModel) => void`
+
+说明：注册组件到插件管理器中
+
+
+
+#### getComponentConfings
+
+类型：`() => ComponentConfigModelRecords`
+
+说明：获取所有插件管理中的所有组件配置
+
+
+
+#### getComponentConfingByType
+
+类型：`(type: string) => ComponentConfigModel`
+
+说明：通过type获取组件配置
+
+
+
+#### getComponents
+
+类型：`() => Components`
+
+说明：获取已注册的组件
+
+
+
+#### getComponent
+
+类型：`(type: string) => any`
+
+说明：通过类型获取的组件
+
+
+
+#### registerActivitybar
+
+类型：`(activitybar: ActivitybarModel) => void`
+
+说明：注册活动栏
+
+
+
+#### getActivitybars
+
+类型：`() => ActivitybarModel[]`
+
+说明：获取所有已注册活动栏配置
+
+
+
+#### hideActivitybar
+
+类型：`(value: string, attr?: string)=> void`
+
+说明：隐藏活动栏
+
+
+
+#### showActivitybar
+
+类型：`(value: string, attr?: string)=> void`
+
+说明：显示活动栏
+
+
+
+#### registerRightSidebar
+
+类型：`(rightSidebar: RightSidebarModel) => void`
+
+说明：注册右侧栏
+
+
+
+#### getRightSidebars
+
+类型：`() => RightSidebarModel[]`
+
+说明：获取所有已注册右侧栏配置
+
+
+
+#### hideRightSidebar
+
+类型：`(value: string, attr?: string)=> void`
+
+说明：隐藏右侧栏
+
+
+
+#### showRightSidebar
+
+类型：`(value: string, attr?: string)=> void`
+
+说明：显示右侧栏
+
+
+
+#### ~~setComponentGroup~~(v0.9.1已删除)
+
+类型：`(componentGroup: ComponentGroupItem[]) => void`
+
+说明：设置分组,这个操作将会覆盖原来的数据
+
+
+
+#### ~~addComponentGroup~~(v0.9.1已删除)
+
+类型：`(componentGroupItem: ComponentGroupItem) => void`
+
+说明：添加分组
+
+#### setComponentGroupNameMap
+
+类型：`(groupName: string, mapName: string) => void`
+
+说明：设置组件分组名称到映射名称的关系
+
+#### clearComponentGroupNameMap
+
+类型：`() => void`
+
+说明：清空组件分组名称到映射名称的关系
+
+#### setSortedGroups
+
+类型：`(sortedGroups: string[]) => void`
+
+说明：设置组件分组的排序
+
+#### clearSortedGroups
+
+类型：`() => void`
+
+说明：清空组件分组的排序
+
+#### hideComponent
+
+类型：`(type: string) => void`
+
+说明：添加需要隐藏的组件类型
+
+#### showComponent
+
+类型：`(type: string) => void`
+
+说明：移除需要隐藏的组件类型
+
+#### setHideComponents
+
+类型：`(types: string[]) => void`
+
+说明：设置需要隐藏的组件类型数组
+
+#### addPublicMethod
+
+类型：`(method: MethodModel) => void`
+
+说明：添加公共方法
+
+#### removePublicMethod
+
+类型：`(methodName: string) => void`
+
+说明：移除公共方法
+
+
+
+
+

package/docs/index.md

@@ -0,0 +1,41 @@
+---
+layout: home
+
+title: EpicDesigner设计器
+titleTemplate: 低代码可视化设计器
+hero:
+  name: EpicDesigner
+  text: 低代码可视化设计器
+  tagline: '开源、规范、可视化、可扩展'
+  image:
+    src: /logo.png
+    alt: EpicDesigner
+    width: 140
+  actions:
+    - theme: brand
+      text: 开始 👆
+      link: /guide/start/index
+    - theme: alt
+      text: EpicDesigner 源码
+      link: https://gitee.com/kcz66
+
+features:
+  - icon: 💡
+    title: 最新技术
+    details: 基于 Vue3 & TypeScript框架编写，使用 hooks 写法抽离部分逻辑，代码结构更加清晰。
+  - icon: ⚡️
+    title: 优异性能
+    details: 多处性能优化，使用页面懒加载、组件动态注册、数据滚动加载等方式，提升页面渲染速度。
+  - icon: 🛠️
+    title: 高效代码封装
+    details: 详细的工具类封装如：插件管理器、事件管理器、组件管理器、组件等。
+  - icon: 🌈 
+    title: 完备的功能
+    details: 提供设计器、生成器、插件扩展、组件扩展、事件配置等。
+  - icon: 🚀
+    title: 丰富的组件
+    details: 拥有丰富的内容组件，插件式设计更好配置适合自己的功能模块。 
+  - icon: 📦
+    title: 开箱即用
+    details: 这是一款开箱即用的设计器，更可以通过插件扩展需要的功能。
+---

package/docs/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@epic-designer/docs",
+  "version": "0.9.25",
+  "type": "module",
+  "description": "epic-designer docs",
+  "author": "kchengz",
+  "dependencies": {
+    "ant-design-vue": "^4.2.5",
+    "dayjs": "^1.11.13",
+    "monaco-editor": "^0.52.0"
+  },
+  "devDependencies": {
+    "vite-plugin-monaco-editor": "^1.1.0"
+  }
+}