epic-designer-gold 0.0.1 → 0.0.2

package/docs/guide/extensions/actionBar.md

@@ -1,55 +0,0 @@
-# 活动栏扩展
-
-:::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

@@ -1,115 +0,0 @@
-# 组件扩展
-
-:::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

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

@@ -1,52 +0,0 @@
-# 公共函数
-
-:::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

@@ -1,57 +0,0 @@
-# 右侧边栏扩展
-
-:::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

@@ -1,149 +0,0 @@
-# 暗黑模式  <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

@@ -1,39 +0,0 @@
-# 国际化
-
-:::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

@@ -1,59 +0,0 @@
-# 简介
-
-:::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。