epic-designer-gold 0.0.3 → 0.0.4

package/docs/guide/extensions/actionBar.md

@@ -0,0 +1,55 @@
+# 活动栏扩展
+
+:::tip 活动栏扩展
+`pluginManager` 提供了registerRightSidebar方法扩展活动栏功能模块
+:::
+
+参考demo仓库： [https://gitee.com/kcz66/epic-designer-demo](https://gitee.com/kcz66/epic-designer-demo)
+
+## 活动扩展
+
+在src目录下新建designer-extensions 文件目录，下面是一个简单扩展示例
+
+### 新建 designer-extensions/activityBar/index.vue
+
+```vue
+<template>
+    <div>
+        我是一个扩展模块
+    </div>
+</template>
+```
+
+### 新建designer-extensions/index.ts(扩展函数)
+```ts
+import { pluginManager } from "epic-designer";
+
+// 安装扩展
+export function setupDesignerExtensions(): void {
+  // 添加活动栏
+  pluginManager.registerActivitybar({
+    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    |
+

package/docs/guide/extensions/component.md

@@ -0,0 +1,115 @@
+# 组件扩展
+
+:::tip 组件扩展
+`pluginManager` 提供了registerComponent方法添加组件
+:::
+
+参考demo仓库： [https://gitee.com/kcz66/epic-designer-demo](https://gitee.com/kcz66/epic-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;
+  // 用于组件排序，可选 默认值1000, 值越小，组件越靠前
+  sort?: number;
+}
+```
+

package/docs/guide/extensions/icon.md

@@ -0,0 +1,111 @@
+# Icon 图标
+
+:::tip Icon 图标
+`EpicDesigner` 同时支持使用Iconify或者Iconfont图标库
+:::
+
+## Iconify
+
+使用Iconify扩展图标只需参照Iconify文档中SVG in CSS -> NoCode方式添加
+[查看Iconify文档](https://iconify.design/docs/usage/css/no-code/)
+
+### 应用程序接口
+
+Iconify API 是面向开发人员的开源托管（或自托管）服务。Public Iconify API 服务器托管来自 150 多个开源图标集的 200,000 多个图标。
+
+公共 API 可在 https://api.iconify.design 上获得。
+
+除其他功能外，它可以为图标生成 CSS。CSS 的查询为`/{prefix}.css?icons={icons}`，其中：
+
+- "{prefix}“是图标集前缀。若要为多个图标集中的图标生成 CSS，请为每个图标集发送单独的查询。
+- "{icons}“是图标名称列表，用逗号分隔。
+
+### 用法
+
+- 通过链接直接引入Iconify图标URL，如上所述（请参阅以下示例）。
+
+  ```<link rel="stylesheet" href="https://api.iconify.design/mdi.css?icons=ab-testing">```
+
+- 或者拷贝所有生成的CSS，将其复制到剪贴板，粘贴到项目的.css文件中。
+
+### 示例
+
+#### 第一步：选择加载相应图标
+
+[/mdi.css?icons=ab-testing](https://api.iconify.design/mdi.css?icons=ab-testing)
+
+```css
+.icon--mdi {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  background-color: currentColor;
+  -webkit-mask-image: var(--svg);
+  mask-image: var(--svg);
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-size: 100% 100%;
+  mask-size: 100% 100%;
+}
+
+.icon--mdi--ab-testing {
+  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M4 2a2 2 0 0 0-2 2v8h2V8h2v4h2V4a2 2 0 0 0-2-2zm0 2h2v2H4m18 9.5V14a2 2 0 0 0-2-2h-4v10h4a2 2 0 0 0 2-2v-1.5a1.54 1.54 0 0 0-1.5-1.5a1.54 1.54 0 0 0 1.5-1.5M20 20h-2v-2h2zm0-4h-2v-2h2M5.79 21.61l-1.58-1.22l14-18l1.58 1.22Z'/%3E%3C/svg%3E");
+}
+```
+
+#### 第二步：获取类名，应用组件注册配置
+
+使用时填写图标类名
+类名规则`icon--{prefix}--{iconName}`
+
+```css
+icon: 'icon--mdi--ab-testing'
+```
+
+## Iconfont
+
+使用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<span style="font-size:12px">v0.9.18</span>
+
+> 以下为`EpicDesigner`默认内置的Icon
+
+<iframe width="730px" height="1650px" frameborder="0" src="/icons/iconify.html">
+
+</iframe>
+
+## ~~旧版本Icon~~
+
+> 该Icon库已在`v0.9.18`版本移除，如果需要继续使用该icon库，可以从[点击这里下载](https://gitee.com/kcz66/epic-designer/tree/develop/docs/public/icons)
+
+<iframe width="730px" height="2160px" frameborder="0" src="/icons/demo_index.html">
+
+</iframe>

package/docs/guide/extensions/publicMethods.md

@@ -0,0 +1,52 @@
+# 公共函数
+
+:::tip 公共函数说明
+`公共函数` 是设计器中的一项关键功能，它能让开发者提供一些预设方法函数给设计器使用。用户可以通过公共函数在给设计器预设方法函数，在设计器中可以通过动作配置选择使用预设的方法函数，或者在自定义函数中进行编码使用，比如预设获取路由实例或者用户状态之类hooks函数。
+:::
+
+参考demo仓库： [https://gitee.com/kcz66/epic-designer-demo](https://gitee.com/kcz66/epic-designer-demo)
+
+## 右侧边栏扩展
+
+在src目录下新建designer-extensions 文件目录，下面是一个简单扩展示例
+
+### 新建 designer-extensions/script/index.ts
+
+> 通过`pluginManager`对象的`addPublicMethod`方法添加公共函数
+
+```ts
+import { pluginManager, type PublicMethodModel } from 'epic-designer'
+
+const methodItem: PublicMethodModel = {
+    name: "myFun",
+    handler: ()=>{
+        alert('myFun 被调用了')
+    },
+    describe: "这是一个测试函数描述"
+}
+
+
+export function setupPublicMethod(): void {
+  pluginManager.addPublicMethod(methodItem)  
+}
+```
+
+### 新建designer-extensions/index.ts(扩展函数)
+
+```ts
+import { setupPublicMethod } from './script/index'
+
+// 安装扩展
+export function setupDesignerExtensions(): void {
+	setupPublicMethod()
+}
+```
+
+### main.ts 添加执行扩展函数
+
+```ts
+import { setupDesignerExtensions } from "./designer-extensions";
+
+// 执行扩展函数
+setupDesignerExtensions();
+```

package/docs/guide/extensions/rightSidebar.md

@@ -0,0 +1,57 @@
+# 右侧边栏扩展
+
+:::tip 右侧边栏扩展
+`pluginManager` 提供了registerRightSidebar方法扩展右侧边栏功能模块
+:::
+
+参考demo仓库： [https://gitee.com/kcz66/epic-designer-demo](https://gitee.com/kcz66/epic-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://examples.epicjs.cn/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://examples.epicjs.cn/element-plus/basic](https://examples.epicjs.cn/element-plus/basic?maximize=1)
+- AntDesignVue：[https://examples.epicjs.cn/ant-designe-vue/basic](https://examples.epicjs.cn/ant-designe-vue/basic?maximize=1)
+- NaiveUi：[https://examples.epicjs.cn/naive-ui/basic](https://examples.epicjs.cn/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。