epic-designer-gold 0.0.1 → 0.0.2

package/packages/epic-designer/README.md

@@ -1,239 +0,0 @@
-![](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

@@ -1,74 +0,0 @@
-{
-  "name": "epic-designer-gold",
-  "private": false,
-  "version": "0.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",
-    "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

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

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

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

package/packages/hooks/common/theme.ts

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

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

package/packages/hooks/package.json

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

package/packages/hooks/store/index.ts

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

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

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

@@ -1,22 +0,0 @@
-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(`编译完成`);
-    }
-  );
-}