epic-designer-gold 0.0.4 → 0.0.5

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

@@ -1,194 +0,0 @@
-# 快速上手
-
-## 安装 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

@@ -1,125 +0,0 @@
-# 自定义主题<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

@@ -1,97 +0,0 @@
-# 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

@@ -1,227 +0,0 @@
-# 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

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

@@ -1,15 +0,0 @@
-{
-  "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"
-  }
-}