form-designer-xinyi 1.0.0

package/examples/src/views/designer/loadData/index.vue

@@ -0,0 +1,186 @@
+<template>
+  <EDesigner ref="designerRef" @save="handleSubmit" title="EpicDesigner数据回显示例">
+    <template #header-prefix>
+      <div>
+        欢迎使用EpicDesigner设计器
+      </div>
+    </template>
+  </EDesigner>
+
+</template>
+<script lang="ts" setup>
+import { EDesigner, type PageSchema } from '@epic-designer/core'
+import { ref, onMounted } from 'vue'
+const designerRef = ref<InstanceType<typeof EDesigner>>()
+
+
+const pageSchema = {
+  "schemas": [
+    {
+      "type": "page",
+      "id": "root",
+      "label": "页面",
+      "children": [
+        {
+          "label": "表单",
+          "type": "form",
+          "icon": "epic-icon-daibanshixiang",
+          "componentProps": {
+            "layout": "horizontal",
+            "name": "default",
+            "labelWidth": 100,
+            "labelLayout": "fixed",
+            "labelCol": {
+              "span": 5
+            },
+            "wrapperCol": {
+              "span": 19
+            },
+            "hideRequiredMark": false,
+            "colon": true,
+            "labelAlign": "right",
+            "size": "middle"
+          },
+          "children": [
+            {
+              "label": "栅格布局",
+              "type": "row",
+              "icon": "epic-icon-zhage",
+              "children": [
+                {
+                  "type": "col",
+                  "children": [
+                    {
+                      "label": "姓名",
+                      "type": "input",
+                      "field": "input_2drzm924",
+                      "icon": "epic-icon-write",
+                      "input": true,
+                      "componentProps": {
+                        "bordered": true,
+                        "placeholder": "请输入"
+                      },
+                      "id": "input_2drzm924"
+                    }
+                  ],
+                  "componentProps": {
+                    "span": 12
+                  },
+                  "id": "col_m17ttkgz"
+                },
+                {
+                  "type": "col",
+                  "children": [
+                    {
+                      "label": "年龄",
+                      "type": "number",
+                      "icon": "epic-icon-number",
+                      "field": "number_x4t431jb",
+                      "input": true,
+                      "componentProps": {
+                        "style": {
+                          "width": "100%"
+                        },
+                        "placeholder": "请输入"
+                      },
+                      "id": "number_x4t431jb"
+                    }
+                  ],
+                  "componentProps": {
+                    "span": 12
+                  },
+                  "id": "col_6uvxdrme"
+                }
+              ],
+              "id": "row_fpuoo21a"
+            },
+            {
+              "label": "性别",
+              "type": "radio",
+              "icon": "epic-icon-danxuan-cuxiantiao",
+              "field": "radio_shndnr9b",
+              "input": true,
+              "componentProps": {
+                "options": [
+                  {
+                    "label": "男",
+                    "value": "男"
+                  },
+                  {
+                    "label": "女",
+                    "value": "女"
+                  }
+                ],
+                "optionType": "default",
+                "defaultValue": "男"
+              },
+              "id": "radio_shndnr9b"
+            },
+            {
+              "label": "兴趣",
+              "type": "checkbox",
+              "icon": "epic-icon-duoxuan1",
+              "field": "checkbox_1l91io8k",
+              "input": true,
+              "componentProps": {
+                "options": [
+                  {
+                    "label": "唱",
+                    "value": "唱"
+                  },
+                  {
+                    "label": "跳",
+                    "value": "跳"
+                  },
+                  {
+                    "label": "rap",
+                    "value": "rap"
+                  },
+                  {
+                    "label": "篮球",
+                    "value": "篮球"
+                  }
+                ]
+              },
+              "id": "checkbox_1l91io8k"
+            },
+            {
+              "label": "个人简介",
+              "type": "textarea",
+              "field": "textarea_1ihmowjl",
+              "icon": "epic-icon-edit",
+              "input": true,
+              "componentProps": {
+                "placeholder": "请输入",
+                "autoSize": {
+                  "minRows": 4
+                }
+              },
+              "id": "textarea_1ihmowjl"
+            }
+          ],
+          "id": "form_eifo73no"
+        }
+      ],
+      "componentProps": {
+        "style": {
+          "padding": "16px"
+        }
+      }
+    }
+  ],
+  "script": "const { defineExpose, find } = epic;\n\nfunction test (){\n    console.log('test')\n}\n\n// 通过defineExpose暴露的函数或者属性\ndefineExpose({\n test \n})"
+}
+
+onMounted(() => {
+  designerRef.value?.setData(pageSchema)
+})
+
+/**
+ * 点击保存按钮操作
+ * @param e
+ */
+function handleSubmit(e: PageSchema) {
+  console.log(e)
+}
+</script>

package/examples/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/examples/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "preserve",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

package/examples/tsconfig.node.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/examples/vite.config.ts

@@ -0,0 +1,28 @@
+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",
+        "css",
+        "html",
+        "json",
+        "typescript",
+      ],
+    }),
+  ],
+  resolve: {
+    alias: {
+      "@": resolve(__dirname, "src"),
+    },
+  },
+});

package/package.json

@@ -0,0 +1,44 @@
+{
+  "private": false,
+  "scripts": {
+    "build": "turbo run build",
+    "dev": "pnpm run checkCompiled && turbo run dev",
+    "lib": "pnpm run build --filter epic-designer",
+    "lint": "turbo run lint",
+    "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": "^10.9.0",
+    "less": "^4.2.0"
+  },
+  "devDependencies": {
+    "@epic-designer/core": "workspace:*",
+    "@epic-designer/script": "workspace:*",
+    "@epic-designer/ui": "workspace:*",
+    "@epic-designer/utils": "workspace:*",
+    "@turbo/gen": "^1.13.3",
+    "@vitejs/plugin-vue": "^5.0.4",
+    "element-plus": "^2.7.2",
+    "epic-designer": "workspace:*",
+    "eslint": "^9.1.1",
+    "naive-ui": "^2.38.1",
+    "prettier": "^3.2.5",
+    "turbo": "^1.13.3",
+    "typescript": "^5.4.5",
+    "unocss": "^0.59.4",
+    "vite": "^5.2.10",
+    "vite-plugin-dts": "^3.9.0",
+    "vitepress": "1.1.4",
+    "vue": "^3.4.26",
+    "vue-tsc": "^2.0.16"
+  },
+  "packageManager": "pnpm@9.1.1",
+  "name": "form-designer-xinyi",
+  "version":"1.0.0",
+  "description":"表单设计器"
+}

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/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,217 @@
+<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, computed, ref, watch, useSlots, nextTick, getCurrentInstance, type ComponentInternalInstance } from 'vue'
+import { PageSchema, FormDataModel } from '../../../types/epic-designer'
+import { loadAsyncComponent, pluginManager, deepCompareAndModify, deepClone, usePageManager } from '@epic-designer/utils'
+const EAsyncLoader = loadAsyncComponent(() => import('../../asyncLoader/index.vue'))
+
+const pageManager = usePageManager()
+const emit = defineEmits<{
+  ready: any
+}>()
+const slots = useSlots()
+const forms = ref<any>({})
+const ready = ref<boolean>(false)
+const props = defineProps<{
+  pageSchema: PageSchema;
+  disabled?: boolean
+}>()
+
+const pageSchemaReactive = reactive<PageSchema>({
+  schemas: []
+})
+
+watch(() => props.pageSchema, e => {
+  deepCompareAndModify(pageSchemaReactive, e)
+}, {
+  immediate: true,
+  deep: true
+})
+
+watch(() => pageSchemaReactive.script, e => {
+  if (e && e !== '') {
+    pageManager.setMethods(e, true)
+  }
+}, {
+  immediate: true
+})
+
+provide('slots', slots)
+provide('pageManager', pageManager)
+provide('forms', forms)
+provide('pageSchema', pageSchemaReactive)
+provide('disabled', computed(() => props.disabled))
+
+/**
+ * 跳过验证直接获取表单数据
+ * @param formName 表单name
+ */
+function getData(formName = 'default'): Promise<FormDataModel | boolean> {
+  return new Promise(async (resolve, reject) => {
+
+    // 判断表单是否已经初始化
+    if (!ready.value) {
+      // 监听表单初始化状态
+      const unwatch = watch(ready, async () => {
+        // 注销监听
+        unwatch()
+        resolve(await getData(formName))
+      })
+      return
+    }
+
+    const form = forms.value?.[formName]
+    // 通过表单查询不到表单实例
+    if (!form) {
+      // console.error(`表单 [name=${formName}] 不存在`)
+      reject(`表单 [name=${formName}] 不存在`)
+      return false
+    }
+
+    const formData = deepClone(await form.getData())
+    resolve(formData)
+  })
+
+}
+
+/**
+ * 验证并获取数据
+ * @param formName 表单name
+ */
+function validate(formName = 'default'): Promise<FormDataModel | boolean> {
+  return new Promise(async (resolve, reject) => {
+    // 判断表单是否已经初始化
+    if (!ready.value) {
+      // 监听表单初始化状态
+      const unwatch = watch(ready, async () => {
+        // 注销监听
+        unwatch()
+        resolve(await validate(formName))
+      })
+      return
+    }
+
+    const form = forms.value?.[formName]
+    // 通过表单查询不到表单实例
+    if (!form) {
+      // console.error(`表单 [name=${formName}] 不存在`)
+      reject(`表单 [name=${formName}] 不存在`)
+      return false
+    }
+    try {
+      await form.validate()
+      const formData = await form.getData()
+      resolve(formData)
+    } catch (error) {
+      reject(error)
+    }
+  })
+
+}
+
+/**
+ * 设置表单数据
+ * @param data
+ */
+function setData(data: FormDataModel, formName = 'default') {
+  // 判断表单是否已经初始化
+  if (!ready.value) {
+    // 监听表单初始化状态
+    const unwatch = watch(ready, () => {
+      // 注销监听
+      unwatch()
+      setData(data, formName)
+
+    })
+    return
+  }
+
+
+  const form = forms.value?.[formName]
+  // 通过表单查询不到表单实例
+  if (!form) {
+    console.error(`表单 [name=${formName}] 不存在`)
+    return false
+  }
+
+  form.setData(data)
+}
+
+/**
+ * 获取表单实例的异步函数
+ * @param {string} formName - 表单名称，默认为 'default'
+ * @returns {Promise<any | boolean>} - 返回一个 Promise 对象，可能是表单实例或布尔值
+ */
+function getFormInstance(formName = 'default'): Promise<any | boolean> {
+  return new Promise(async (resolve, reject) => {
+    // 判断表单是否已经初始化
+    if (!ready.value) {
+      // 监听表单初始化状态
+      const unwatch = watch(ready, async () => {
+        // 注销监听
+        unwatch();
+        // 重新调用 getFormInstance，直到表单初始化完成
+        resolve(await getFormInstance(formName));
+      });
+      return;
+    }
+
+    // 获取指定名称的表单实例
+    const form = forms.value?.[formName];
+    // 通过表单查询不到表单实例
+    if (!form) {
+      // 输出错误信息并拒绝 Promise
+      // console.error(`表单 [name=${formName}] 不存在`);
+      reject(`表单 [name=${formName}] 不存在`);
+      return false;
+    }
+
+    // 成功获取表单实例，解析 Promise
+    resolve(form);
+
+  })
+}
+
+
+const { proxy } = getCurrentInstance() as ComponentInternalInstance
+/**
+ * 组件（包含异步组件）加载完成后
+ */
+function handleReady() {
+  // 等待DOM更新循环结束后
+  nextTick(() => {
+    ready.value = true
+
+    emit('ready', pageManager)
+
+    // 注入builder对象
+    proxy && pageManager.addComponentInstance('builder', proxy)
+  })
+}
+
+defineExpose({
+  ready,
+  getData,
+  setData,
+  validate,
+  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