epic-designer-gold 0.0.3 → 0.0.4

package/examples/uno.config.ts

@@ -0,0 +1,2 @@
+// uno.config.ts
+export * from "epic-designer-gold/uno.config";

package/examples/vite.config.ts

@@ -0,0 +1,35 @@
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
+import UnoCSS from "unocss/vite";
+import VueDevTools from "vite-plugin-vue-devtools";
+import monacoEditorPlugin from "vite-plugin-monaco-editor";
+import { resolve } from "path";
+export default defineConfig({
+  base: "/",
+  plugins: [
+    VueDevTools(),
+    vue(),
+    UnoCSS(),
+    (monacoEditorPlugin as any).default({
+      languageWorkers: ["editorWorkerService", "json", "typescript"],
+    }),
+  ],
+  resolve: {
+    alias: {
+      "@": resolve(__dirname, "src"),
+    },
+  },
+  server: {
+    host: true,
+    open: true,
+    proxy: {
+      "/process": {
+        // target: 'http://localhost:8089',
+        target: "http://192.168.28.112:8180",
+        changeOrigin: true,
+      },
+    },
+  },
+});
+
+import { defineConfig } from "vitest/config";

package/package.json

@@ -1,75 +1,49 @@
-{
-  "name": "epic-designer-gold",
-  "private": false,
-  "version": "0.0.3",
-  "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"
-  }
-}
+{
+  "name": "epic-designer-gold",
+  "private": false,
+  "version": "0.0.4",
+  "scripts": {
+    "build": "turbo run build",
+    "dev": "pnpm run checkCompiled && turbo run dev",
+    "lib": "vitest run && pnpm run build --filter epic-designer-gold",
+    "lint": "turbo run lint",
+    "test": "vitest",
+    "docs:dev": "vitepress dev docs",
+    "docs:build": "vitepress build docs",
+    "docs:serve": "vitepress serve docs",
+    "examples:build": "pnpm run build --filter @epic-designer/examples",
+    "format": "prettier --write \"**/*.{ts,tsx,md}\"",
+    "checkCompiled": "turbo run checkCompiled --filter @epic-designer/script"
+  },
+  "dependencies": {
+    "@vueuse/core": "^11.1.0",
+    "mitt": "^3.0.1"
+  },
+  "devDependencies": {
+    "@epic-designer/core": "workspace:*",
+    "@epic-designer/hooks": "workspace:*",
+    "@epic-designer/script": "workspace:*",
+    "@epic-designer/ui": "workspace:*",
+    "@epic-designer/utils": "workspace:*",
+    "@turbo/gen": "^2.1.2",
+    "@vitejs/plugin-vue": "^5.1.4",
+    "@vue/test-utils": "2.4.6",
+    "axios": "^1.7.7",
+    "element-plus": "^2.8.3",
+    "epic-designer-gold": "workspace:*",
+    "eslint": "^9.11.0",
+    "less": "^4.2.0",
+    "naive-ui": "^2.39.0",
+    "prettier": "^3.3.3",
+    "turbo": "^2.1.2",
+    "typescript": "^5.6.2",
+    "unocss": "^0.62.4",
+    "vite": "^5.4.7",
+    "vite-plugin-dts": "^4.2.1",
+    "vitepress": "1.3.4",
+    "vitest": "^2.1.1",
+    "vue": "^3.5.8",
+    "vue-tsc": "^2.1.6"
+  },
+  "packageManager": "pnpm@7.15.0"
+}

package/packages/core/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/core/components/asyncLoader/index.less

@@ -0,0 +1,92 @@
+.e-loading,
+.e-loading>div {
+    position: relative;
+    box-sizing: border-box;
+}
+
+.e-loading {
+    display: block;
+    font-size: 0;
+    color: var(--epic-primary-color);
+}
+
+.e-loading.la-dark {
+    color: #333;
+}
+
+.e-loading>div {
+    display: inline-block;
+    float: none;
+    background-color: currentColor;
+    border: 0 solid currentColor;
+}
+
+.e-loading {
+    width: 64px;
+    height: 64px;
+}
+
+.e-loading>div {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 64px;
+    height: 64px;
+    border-radius: 100%;
+    opacity: 0;
+    animation: ball-scale-multiple 1s 0s linear infinite;
+}
+
+.e-loading>div:nth-child(2) {
+    animation-delay: 0.2s;
+}
+
+.e-loading>div:nth-child(3) {
+    animation-delay: 0.4s;
+}
+
+.e-loading.la-sm {
+    width: 32px;
+    height: 32px;
+}
+
+.e-loading.la-sm>div {
+    width: 32px;
+    height: 32px;
+}
+
+.e-loading.la-2x {
+    width: 128px;
+    height: 128px;
+}
+
+.e-loading.la-2x>div {
+    width: 128px;
+    height: 128px;
+}
+
+.e-loading.la-3x {
+    width: 192px;
+    height: 192px;
+}
+
+.e-loading.la-3x>div {
+    width: 192px;
+    height: 192px;
+}
+
+@keyframes ball-scale-multiple {
+    0% {
+        opacity: 0;
+        transform: scale(0);
+    }
+
+    5% {
+        opacity: 0.75;
+    }
+
+    100% {
+        opacity: 0;
+        transform: scale(1);
+    }
+}

package/packages/core/components/asyncLoader/index.vue

@@ -0,0 +1,7 @@
+<template>
+    <div class="e-loading">
+        <div></div>
+        <div></div>
+        <div></div>
+    </div>
+</template>

package/packages/core/components/builder/hooks/useBuilder.ts

@@ -0,0 +1,132 @@
+import { ref, watch } from "vue";
+import { deepClone, usePageManager } from "@epic-designer/utils";
+import { FormDataModel } from "../../../types/epic-designer";
+
+export function useBuilder() {
+  const ready = ref<boolean>(false);
+  const pageManager = usePageManager();
+  const forms = ref<any>({});
+
+  /**
+   * 等待组件初始化
+   */
+  function waitReady(): Promise<void> {
+    return new Promise((resolve) => {
+      if (ready.value) {
+        resolve();
+      } else {
+        const unwatch = watch(ready, () => {
+          unwatch();
+          resolve();
+        });
+      }
+    });
+  }
+
+  /**
+   * 获取表单实例
+   * @param {string} formName 表单名称
+   */
+  async function getFormInstance(formName = "default"): Promise<any> {
+    await waitReady();
+    const form = forms.value?.[formName];
+    if (!form) throw new Error(`表单 [name=${formName}] 不存在`);
+    return form;
+  }
+
+  /**
+   * 处理表单数据
+   * @param {string} formName 表单名称
+   * @param {Function} action 处理函数
+   */
+  async function handleFormData(formName: string, action: (form: any) => Promise<FormDataModel>) {
+    const form = await getFormInstance(formName);
+    return deepClone(await action(form));
+  }
+
+  /**
+   * 获取单个表单数据
+   * @param {string} formName 表单名称
+   */
+  async function getData(formName = "default"): Promise<FormDataModel> {
+    return await handleFormData(formName, (form) => form.getData());
+  }
+
+  /**
+   * 设置单个表单数据
+   * @param {FormDataModel} data 表单数据
+   * @param {string} formName 表单名称
+   */
+  function setData(data: FormDataModel, formName = "default") {
+    pageManager.setFormData(data, formName);
+    const form = forms.value?.[formName];
+    form?.clearValidate();
+  }
+
+  /**
+   * 验证单个表单并获取数据
+   * @param {string} formName 表单名称
+   */
+  async function validate(formName = "default"): Promise<FormDataModel> {
+    return await handleFormData(formName, async (form) => {
+      await form.validate();
+      return await form.getData();
+    });
+  }
+
+  /**
+   * 处理所有表单数据
+   * @param {Function} action 处理函数
+   */
+  async function handleAllFormsData(action: (form: any) => Promise<FormDataModel>) {
+    await waitReady();
+    const data: Record<string, FormDataModel> = {};
+    for (const formName in forms.value) {
+      const form = forms.value[formName];
+      if (form) {
+        data[formName] = deepClone(await action(form));
+      }
+    }
+    return data;
+  }
+
+  /**
+   * 获取所有表单数据
+   */
+  async function getForms(): Promise<Record<string, FormDataModel>> {
+    return await handleAllFormsData((form) => form.getData());
+  }
+
+  /**
+   * 设置所有表单数据
+   * @param {Record<string, FormDataModel>} data 表单数据
+   */
+  function setForms(data: Record<string, FormDataModel>) {
+    for (const formName in data) {
+      setData(data[formName], formName);
+    }
+  }
+
+  /**
+   * 验证所有表单并获取数据
+   */
+  async function validateAll(): Promise<Record<string, FormDataModel>> {
+    return await handleAllFormsData(async (form) => {
+      await form.validate();
+      return await form.getData();
+    });
+  }
+
+  return {
+    ready,
+    pageManager,
+    forms,
+    getData,
+    setData,
+    validate,
+    getForms,
+    setForms,
+    validateAll,
+    getFormInstance,
+  };
+}

package/packages/core/components/builder/index.ts

@@ -0,0 +1,3 @@
+import EBuilder from './src/builder.vue'
+
+export default EBuilder

package/packages/core/components/builder/src/builder.vue

@@ -0,0 +1,131 @@
+<template>
+  <div class="epic-loading-box" v-if="!pluginManager.initialized.value">
+    <!-- <EAsyncLoader /> -->
+  </div>
+  <Suspense v-else @resolve="handleReady">
+    <template #default>
+      <div class="epic-builder-main">
+        <ENode v-for="(item, index) in pageSchemaReactive.schemas" :key="index" :componentSchema="item" />
+      </div>
+    </template>
+    <template #fallback>
+      <div class="epic-loading-box">
+        <EAsyncLoader />
+      </div>
+    </template>
+  </Suspense>
+</template>
+
+<script lang="ts" setup>
+import ENode from "../../node";
+import { reactive, provide, useSlots, getCurrentInstance, watch, computed, nextTick } from "vue";
+import { PageSchema, FormDataModel } from "../../../types/epic-designer";
+import { loadAsyncComponent, deepCompareAndModify, pluginManager } from "@epic-designer/utils";
+import { useBuilder } from "../hooks/useBuilder";
+
+// 异步加载 EAsyncLoader 组件
+const EAsyncLoader = loadAsyncComponent(() => import("../../asyncLoader/index.vue"));
+
+// 定义事件
+const emit = defineEmits<{
+  ready: any;
+}>();
+
+// 使用 hooks 获取表单相关方法和状态
+const { ready, pageManager, forms, getData, setData, validate, getForms, setForms, validateAll, getFormInstance } =
+  useBuilder();
+
+// 定义组件的 props 类型
+const props = defineProps<{
+  pageSchema: PageSchema;
+  formData?: FormDataModel;
+  disabled?: boolean;
+}>();
+
+// 定义页面 schema
+const pageSchemaReactive = reactive<PageSchema>({
+  schemas: [],
+});
+
+// 监听 pageSchema 的变化，并更新 pageSchemaReactive
+watch(
+  () => props.pageSchema,
+  (newSchema) => {
+    deepCompareAndModify(pageSchemaReactive, newSchema);
+  },
+  {
+    immediate: true,
+    deep: true,
+  }
+);
+
+// 监听 formData 的变化，并设置表单数据
+watch(
+  () => props.formData,
+  (data) => {
+    if (data) {
+      setData(data);
+    }
+  },
+  {
+    immediate: true,
+    deep: true,
+  }
+);
+
+// 监听 pageSchemaReactive.script 的变化，并设置页面方法
+watch(
+  () => pageSchemaReactive.script,
+  (script) => {
+    if (script) {
+      pageManager.setMethods(script, true);
+    }
+  },
+  {
+    immediate: true,
+  }
+);
+
+// 提供依赖注入的上下文
+provide("slots", useSlots());
+provide("pageManager", pageManager);
+provide("forms", forms);
+provide("pageSchema", pageSchemaReactive);
+provide(
+  "disabled",
+  computed(() => props.disabled)
+);
+
+// 获取当前实例，并提取 proxy
+const instance = getCurrentInstance();
+const proxy = instance?.proxy;
+
+/**
+ * 组件加载完成后的处理函数
+ * @returns {void}
+ */
+function handleReady() {
+  nextTick(() => {
+    ready.value = true;
+    emit("ready", pageManager);
+
+    // 注入组件实例到 pageManager
+    if (proxy) {
+      pageManager.addComponentInstance("builder", proxy);
+    }
+  });
+}
+
+// 暴露组件的方法和状态
+defineExpose({
+  ready,
+  pageManager,
+  getData,
+  setData,
+  validate,
+  getForms,
+  setForms,
+  validateAll,
+  getFormInstance,
+});
+</script>

package/packages/core/components/builder/src/types.ts

@@ -0,0 +1,4 @@
+export interface DesignerProps {
+  disabledZoom?: boolean;
+  hiddenHeader?: boolean;
+}

package/packages/core/components/designer/index.ts

@@ -0,0 +1,3 @@
+import EDesigner from "./src/designer.vue";
+
+export default EDesigner;