epic-designer-gold 0.0.49 → 1.0.1

package/packages/epic-designer/README.md

@@ -0,0 +1,239 @@
+![](https://examples.epicjs.cn/static/logo.png#pic_center)
+
+<h3 align="center" style="background-image:-webkit-linear-gradient(left,#44c0fa,#c26cf6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;">EpicDesigner</h3>
+
+
+<h4 align="center">一个开箱即用的拖拽式的可视化低代码设计器</h4>
+
+<p align="center">
+  <a href="https://github.com/vuejs/core">
+    <img src="https://img.shields.io/badge/vue-3.3.4-brightgreen.svg" alt="vue">
+  </a>
+  <a href="https://github.com/microsoft/TypeScript">
+    <img src="https://img.shields.io/badge/typescript-5.1.6-blue" alt="ant-design-vue">
+  </a>
+  <a href="#">
+    <img src="https://img.shields.io/github/license/mashape/apistatus.svg" alt="license">
+  </a>
+</p>
+
+
+
+📦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)
+
+📖文档备用地址：[https://www.kcz66.com/epic-designer/](https://www.kcz66.com/epic-designer/)
+
+💎项目预览地址：
+
+- 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)
+
+> 使用必须遵守国家法律法规，⛔不允许非法项目使用，后果自负❗
+
+## 简介
+
+可以简称`epic设计器`，是一个功能强大、开箱即用的拖拽式低代码设计器。它基于 Vue3 开发，兼容多套 UI 组件库，除了基础的页面设计功能，EpicDesigner 还提供了强大的扩展功能，可以让开发者根据自己的需求自由扩展和定制组件。此外，EpicDesigner使用 JSON 配置来生成页面，可帮助开发者快速生成页面，提高开发效率。它提供了两个重要组件：`e-designer` 设计器和 `e-builder` 生成器。
+
+
+## 最新版本
+
+[![](https://img.shields.io/npm/v/epic-designer.svg?style=flat-square)](https://www.npmjs.com/package/epic-designer)
+
+[查看更新日志](./docs/updateLog.md)
+
+#### 功能
+
+- [x] 拖拽设计
+- [x] 自定义 actionBar
+- [x] 布局组件扩展
+- [x] 自定义组件扩展
+- [x] 事件扩展
+- [x] 组件懒加载
+- [x] 完善布局
+- [x] 组件属性自定义
+- [x] 支持不同 UI
+- [x] 插件扩展
+
+
+
+## 核心组件介绍
+
+#### EDesigner 设计器
+
+`EDesigner ` 是一个可视化设计器组件，用户可以通过拖拽组件的方式快速生成 JSON 配置。它提供了丰富的组件库和配置项，用户可以根据需要选择合适的组件并配置相应的属性、事件和动作。设计器还提供了实时预览功能，用户可以随时查看所设计页面的效果。最终，用户可以将 JSON 配置导出，用于页面的生成和修改。
+
+#### EBuilder 生成器
+
+`EBuilder` 是一个页面构建组件，它可以将设计器生成的 JSON 配置构建成页面，完成组件的渲染、事件绑定和数据回显等操作。
+
+## 安装 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>
+```
+
+## 交流
+
+点击链接加入 qq 群聊
+
+- [【epic-designer 交流群：747609683】](https://jq.qq.com/?_wv=1027&k=CtrM9ce2)
+
+## 捐赠
+
+如果你觉得epic-designer对你有帮助，欢迎给我捐赠
+
+![](https://examples.epicjs.cn/static/donation.png)
+

package/packages/epic-designer/package.json

@@ -0,0 +1,75 @@
+{
+  "name": "epic-designer-gold",
+  "private": false,
+  "version": "1.0.1",
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "typings": "dist/epic-designer/index.d.ts",
+  "description": "基于vue3的设计器,可视化开发页面表单",
+  "author": "",
+  "keywords": [
+    "form",
+    "designer",
+    "设计器",
+    "页面设计",
+    "designer",
+    "设计工具",
+    "低代码",
+    "可视化",
+    "工作流"
+  ],
+  "bugs": {
+    "url": ""
+  },
+  "repository": {
+    "type": "git",
+    "url": ""
+  },
+  "scripts": {
+    "build": "vite build",
+    "preview": "vite preview",
+    "test": "vitest",
+    "lint": "eslint . --fix --ext .js,.jsx,.json,.ts,.tsx,.vue"
+  },
+  "dependencies": {
+    "vuedraggable": "4.1.0"
+  },
+  "peerDependencies": {
+    "ant-design-vue": ">=3.2.20",
+    "dayjs": ">=1.0.0",
+    "element-plus": ">=2.1.4",
+    "epic-designer-gold": ">=0.0.0",
+    "monaco-editor": ">=0.48.0",
+    "naive-ui": ">=2.30.0",
+    "vue": ">=3.1.0"
+  },
+  "devDependencies": {
+    "@algolia/client-search": "^5.5.3",
+    "@babel/core": "^7.25.2",
+    "@babel/eslint-parser": "^7.25.1",
+    "@babel/plugin-transform-typescript": "^7.25.2",
+    "@babel/preset-env": "^7.25.4",
+    "@babel/preset-typescript": "^7.24.7",
+    "@types/node": "^22.5.5",
+    "@typescript-eslint/eslint-plugin": "^8.6.0",
+    "@typescript-eslint/parser": "^8.6.0",
+    "@unocss/preset-rem-to-px": "^0.62.4",
+    "@vue/test-utils": "2.4.6",
+    "eslint-config-standard-with-typescript": "^43.0.1",
+    "eslint-plugin-import": "^2.30.0",
+    "eslint-plugin-n": "^17.10.3",
+    "eslint-plugin-promise": "^7.1.0",
+    "eslint-plugin-vue": "^9.28.0",
+    "jsdom": "^25.0.1",
+    "rollup-plugin-copy": "^3.5.0",
+    "rollup-plugin-external-globals": "^0.12.0",
+    "unocss": "^0.62.4",
+    "vite-plugin-eslint": "^1.8.1",
+    "vite-plugin-svg-icons": "^2.0.1",
+    "vite-plugin-vue-setup-extend": "^0.4.0",
+    "vitest": "^2.1.1",
+    "vue-eslint-parser": "^9.4.3",
+    "vue-tsc": "^2.1.6"
+  }
+}

package/packages/hooks/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 kchengz
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/packages/hooks/common/element.ts

@@ -0,0 +1,170 @@
+import { onKeyUp, onKeyDown } from "@vueuse/core";
+import { useStore } from "../store";
+import { type Ref, watch, ref } from "vue";
+
+/**
+ * 是否按住键盘状态
+ * @returns
+ *  pressSpace: Ref<boolean>;
+ *  pressShift: Ref<boolean>;
+ *  pressCtrl: Ref<boolean>;
+ */
+export function useKeyPress() {
+  // 是否按住空格键
+  const pressSpace = ref(false);
+  // 是否按住shift键
+  const pressShift = ref(false);
+  // 是否按住ctrl键
+  const pressCtrl = ref(false);
+  onKeyDown(" ", () => {
+    pressSpace.value = true;
+  });
+  onKeyUp(" ", () => {
+    pressSpace.value = false;
+  });
+
+  onKeyDown("Shift", (e) => {
+    e.preventDefault();
+    pressShift.value = true;
+  });
+  onKeyUp("Shift", () => {
+    pressShift.value = false;
+  });
+
+  onKeyDown("Control", (e) => {
+    e.preventDefault();
+    pressCtrl.value = true;
+  });
+  onKeyUp("Control", () => {
+    pressCtrl.value = false;
+  });
+
+  return { pressSpace, pressShift, pressCtrl };
+}
+
+/**
+ * 拖拽元素
+ * @param editScreenContainer
+ * @returns
+ */
+export function useElementDrag(
+  editScreenContainer: Ref<HTMLDivElement | null>
+) {
+  const { pressSpace } = useStore();
+  // 预先创建一个1x1的透明图片，修正 Chrome 下鼠标出现地球的问题，Safari 下拖拽阴影问题
+  const img = new Image(1, 1);
+  img.src =
+    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==';
+
+  let startX = 0;
+  let startY = 0;
+  function handleElementDragStart(event: DragEvent) {
+    // 只有按空格的时候才启用画布拖拽
+    if (!pressSpace.value) {
+      return;
+    }
+    startX = event.x;
+    startY = event.y;
+    event.dataTransfer?.setDragImage(document.createElement("div"), 0, 0);
+  }
+
+  /**
+   * 拖拽设计区域
+   * @param event
+   */
+  function handleElementDrag(event: DragEvent) {
+    event.preventDefault();
+    // 计算新的光标位置：
+    if (!event.x || !event.y || !pressSpace.value) {
+      return;
+    }
+    const offsetX = event.x - startX;
+    const offsetY = event.y - startY;
+    startX = event.x;
+    startY = event.y;
+    if (editScreenContainer.value) {
+      editScreenContainer.value.scrollTop -= offsetY;
+      editScreenContainer.value.scrollLeft -= offsetX;
+    }
+  }
+
+  function handleElementDragEnd() {
+    pressSpace.value = false;
+  }
+
+  return { handleElementDragStart, handleElementDrag, handleElementDragEnd };
+}
+
+/**
+ * 缩放元素
+ * @param draggableElRef
+ * @returns
+ */
+export function useElementZoom(draggableElRef: Ref<HTMLDivElement | null>) {
+  const { pressCtrl, canvasScale, disabledZoom } = useStore();
+  /**
+   * 缩放操作
+   * @param e
+   * @returns
+   */
+  function handleZoom(event: WheelEvent) {
+    if (!pressCtrl.value || disabledZoom.value) {
+      return;
+    }
+    event.preventDefault();
+
+    let newScale = 0;
+    if (event.deltaY < 0) {
+      newScale = canvasScale.value + 0.05;
+    } else {
+      newScale = canvasScale.value - 0.05;
+    }
+    // 限制缩放范围
+    if (newScale > 150 || newScale < 0.5) {
+      return;
+    }
+
+    canvasScale.value = newScale;
+  }
+
+  // 启用监听缩放
+  watch(
+    () => canvasScale.value,
+    (e) => {
+      if (draggableElRef.value && !disabledZoom.value) {
+        draggableElRef.value.style.transform = `scale(${e})`;
+      }
+    }
+  );
+
+  return { handleZoom, canvasScale };
+}
+
+/**
+ * 创建定时任务hooks
+ * @param handler 任务函数
+ * @param timeout 任务间隔
+ * @returns 
+ */
+export function useTimedQuery(handler: () => void, timeout = 16.66) {
+  let timer: number;
+
+  /**
+   * 开始任务执行
+   */
+  function startTimedQuery() {
+    stopTimedQuery();
+    timer = window.setInterval(handler, timeout);
+  }
+
+  /**
+   * 结束任务执行
+   */
+  function stopTimedQuery() {
+    window.clearInterval(timer);
+  }
+  return {
+    startTimedQuery,
+    stopTimedQuery,
+  };
+}

package/packages/hooks/common/index.ts

@@ -0,0 +1,2 @@
+export * from "./element";
+export * from "./theme";

package/packages/hooks/common/theme.ts

@@ -0,0 +1,84 @@
+import { useToggle } from "@vueuse/core";
+import { useStore } from "../store";
+import { watch, ref, onMounted, onUnmounted } from "vue";
+export function useTheme() {
+  const { isDark } = useStore();
+  const toggleDark = useToggle(isDark);
+  return {
+    isDark,
+    toggleDark,
+  };
+}
+
+export function useDark() {
+  const isDark = ref(false);
+  onMounted(() => {
+    getDarkState(isDark);
+    monitorHtml(isDark);
+  });
+
+  watch(
+    () => isDark.value,
+    () => {
+      if (isDark.value) {
+        document.documentElement.classList.add("dark");
+      } else {
+        document.documentElement.classList.remove("dark");
+      }
+    }
+  );
+  return {
+    isDark,
+  };
+}
+
+/**
+ * 获取dark初始化状态
+ * @param isDark
+ */
+export function getDarkState(isDark) {
+  var targetNode = document.documentElement;
+  if (!targetNode) return;
+  if (targetNode.classList.contains("dark")) {
+    isDark.value = true;
+  } else {
+    isDark.value = false;
+  }
+}
+
+/**
+ * 监听html元素
+ * @param isDark
+ */
+function monitorHtml(isDark) {
+  // 选择需要监听的元素
+  var targetNode = document.querySelector("html");
+
+  // 创建MutationObserver对象
+  var observer = new MutationObserver(function (mutationsList) {
+    for (var mutation of mutationsList) {
+      if (
+        mutation.type === "attributes" &&
+        mutation.attributeName === "class"
+      ) {
+        const target = mutation.target as any;
+        if (new Array(...target.classList).includes("dark")) {
+          isDark.value = true;
+        } else {
+          isDark.value = false;
+        }
+      }
+    }
+  });
+
+  // 开始监听
+  observer.observe(targetNode!, {
+    attributes: true,
+    attributeFilter: ["class"],
+  });
+
+  // 销毁监听
+  onUnmounted(() => {
+    observer.disconnect();
+  });
+}

package/packages/hooks/index.ts

@@ -0,0 +1,2 @@
+export * from './common'
+export * from './store'

package/packages/hooks/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@epic-designer/hooks",
+  "version": "0.9.25",
+  "description": "epic-designer hooks",
+  "main": "index.ts",
+  "author": "kchengz"
+}

package/packages/hooks/store/index.ts

@@ -0,0 +1,30 @@
+import { createSharedComposable } from "@vueuse/core";
+import { ref } from "vue";
+import { useKeyPress } from "../common/element";
+import { useDark } from "../common/theme";
+
+/**
+ * 初始化共享存储
+ */
+export function initStore() {
+  // 设计区域画布缩放
+  const canvasScale = ref(1);
+  // 画布缩放启用状态
+  const disabledZoom = ref(false);
+
+  const { isDark } = useDark();
+
+  // 获取键盘状态
+  const { pressSpace, pressShift, pressCtrl } = useKeyPress();
+  return {
+    canvasScale,
+    pressSpace,
+    pressShift,
+    pressCtrl,
+    disabledZoom,
+    isDark,
+  };
+}
+
+// 使用共享状态
+export const useStore = createSharedComposable(initStore);

package/packages/hooks/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "jsx": "preserve",
+    "sourceMap": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "lib": ["ESNext", "DOM"],
+    "strictNullChecks": true,
+    "skipLibCheck": true
+  },
+  "include": ["./**/*", "*.ts", "*.json", "*.cjs"],
+  "exclude": ["node_modules", "dist", "vite.config.ts"]
+}

package/packages/script/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@epic-designer/script",
+  "version": "0.9.25",
+  "main": "index.ts",
+  "scripts": {
+    "checkCompiled": "ts-node ./src/check-compiled"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "description": "",
+  "devDependencies": {
+    "@types/node": "^22.5.5",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.6.2"
+  }
+}

package/packages/script/src/check-compiled.ts

@@ -0,0 +1,22 @@
+import fs from "fs";
+import { exec, ExecException } from "child_process";
+import path from "path";
+
+const filePath: string = path.join(__dirname, "../../epic-designer/dist/index.js");
+
+if (fs.existsSync(filePath)) {
+  console.log("已满足启动条件，正在启动...");
+} else {
+  console.log("引用文件未编译，正在编译请稍等...");
+  exec(
+    "cd ../../ && npm run lib",
+    { maxBuffer: 50 * 1024 * 1024 },
+    (error: ExecException | null) => {
+      if (error) {
+        console.error(`执行 npm lib 时出错: ${error}`);
+        return;
+      }
+      console.log(`编译完成`);
+    }
+  );
+}