form-designer-xinyi 1.0.0

package/examples/src/layout/components/Menu/index.vue

@@ -0,0 +1,49 @@
+<template>
+    <Menu class="h-full" :selectedKeys="[routeName]" :openKeys="openKeys" id="dddddd" mode="inline" @click="handleClick"
+        :items="items"></Menu>
+</template>
+<script lang="ts" setup>
+
+import { Menu, type MenuProps } from 'ant-design-vue'
+
+import { type RouteRecordRaw, useRouter, useRoute } from 'vue-router'
+import { frameworkRoutes } from '@/router'
+import { computed } from 'vue'
+
+
+const router = useRouter()
+const route = useRoute()
+
+const items = traverseRoutes(frameworkRoutes)
+
+const routeName = computed(() => {
+    return route.name as string
+})
+
+const openKeys = computed(() => {
+    return route.matched.map(item => item.name) as string[]
+})
+
+// 修改后的递归函数用于遍历树形结构并修改数据
+function traverseRoutes(routes: RouteRecordRaw[]) {
+    return routes.map((route) => {
+        // 创建一个新的对象来存储修改后的节点信息
+        const modifiedRoute: any = {
+            key: route.name,
+            label: route.meta?.title,
+            // 在这里您可以根据需要修改其他属性
+        };
+
+        // 如果节点有子节点，则递归调用遍历子节点
+        if (route.children) {
+            modifiedRoute.type = 'group'
+            modifiedRoute.children = traverseRoutes(route.children);
+        }
+
+        return modifiedRoute;
+    });
+}
+const handleClick: MenuProps['onClick'] = e => {
+    router.push({ path: '/' + route.path.split('/')[1] + '/' + e.key })
+};
+</script>

package/examples/src/layout/index.vue

@@ -0,0 +1,26 @@
+<template>
+    <ConfigProvider :theme="{ algorithm: isDark ? theme.darkAlgorithm : theme.defaultAlgorithm }">
+        <Layout class="maximize">
+            <EHeader />
+            <Layout>
+                <LayoutSider>
+                    <div class="epic-demo-menu h-full">
+                        <EMenu />
+                    </div>
+                </LayoutSider>
+                <LayoutContent>
+                    <Main />
+                </LayoutContent>
+            </Layout>
+        </Layout>
+    </ConfigProvider>
+</template>
+<script lang="ts" setup>
+import EMenu from './components/Menu/index.vue'
+import EHeader from './components/Header/index.vue'
+import Main from './components/Main/index.vue'
+import { Layout, LayoutContent, LayoutSider, ConfigProvider, theme } from 'ant-design-vue'
+import { useTheme } from '@epic-designer/utils'
+const { isDark } = useTheme()
+
+</script>

package/examples/src/main.ts

@@ -0,0 +1,6 @@
+import { createApp } from "vue";
+import "./style.less";
+import App from "./App.vue";
+import router from "./router";
+
+createApp(App).use(router).mount("#app");

package/examples/src/router/index.ts

@@ -0,0 +1,98 @@
+import { createRouter, createWebHistory } from "vue-router";
+import Layout from "@/layout/index.vue";
+import BaseLayout from "@/layout/baseLayout.vue";
+
+// 定义每个 UI 框架的子路由信息
+export const frameworkRoutes = [
+  {
+    path: "/designer",
+    name: "designer",
+    component: BaseLayout,
+    meta: {
+      title: "设计器",
+    },
+    children: [
+      {
+        path: "/:ui/basic",
+        name: "basic",
+        component: () => import("@/views/designer/basic/index.vue"),
+        meta: {
+          title: "基础用法",
+        },
+      },
+      {
+        path: "/:ui/loadData",
+        name: "loadData",
+        component: () => import("@/views/designer/loadData/index.vue"),
+        meta: {
+          title: "数据回显",
+        },
+      },
+    ],
+  },
+  {
+    path: "/builder",
+    name: "builder",
+    component: BaseLayout,
+    meta: {
+      title: "生成器",
+    },
+    children: [
+      {
+        path: "/:ui/builderBasic",
+        name: "builderBasic",
+        component: () => import("@/views/builder/basic/index.vue"),
+        meta: {
+          title: "基础用法",
+        },
+      },
+      {
+        path: "/:ui/builderLoadData",
+        name: "builderLoadData",
+        component: () => import("@/views/builder/loadData/index.vue"),
+        meta: {
+          title: "数据回显",
+        },
+      },
+      {
+        path: "/:ui/disableDisplay",
+        name: "disableDisplay",
+        component: () => import("@/views/builder/disableDisplay/index.vue"),
+        meta: {
+          title: "禁用隐藏",
+        },
+      },
+      {
+        path: "/:ui/sum",
+        name: "sum",
+        component: () => import("@/views/builder/sum/index.vue"),
+        meta: {
+          title: "计算求和",
+        },
+      },
+    ],
+  },
+];
+
+const routes = [
+  {
+    path: "/",
+    component: Layout,
+    name: "uiFrameworks",
+    redirect: "/ant-designe-vue/basic",
+    children: frameworkRoutes,
+  },
+  // Resolve refresh page, route warnings
+  {
+    path: "/:pathMatch(.*)*",
+    redirect: "/",
+  },
+];
+
+const router = createRouter({
+  // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
+  history: createWebHistory(),
+  routes, // `routes: routes` 的缩写
+});
+
+export default router;

package/examples/src/style/reset.css

@@ -0,0 +1,253 @@
+/* stylelint-disable */
+html,
+body {
+  width: 100%;
+  height: 100%;
+}
+input::-ms-clear,
+input::-ms-reveal {
+  display: none;
+}
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+html {
+  font-family: sans-serif;
+  line-height: 1.15;
+  -webkit-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+  -ms-overflow-style: scrollbar;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+@-ms-viewport {
+  width: device-width;
+}
+body {
+  margin: 0;
+}
+[tabindex='-1']:focus {
+  outline: none;
+}
+hr {
+  box-sizing: content-box;
+  height: 0;
+  overflow: visible;
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin-top: 0;
+  margin-bottom: 0.5em;
+  font-weight: 500;
+}
+p {
+  margin-top: 0;
+  margin-bottom: 1em;
+}
+abbr[title],
+abbr[data-original-title] {
+  -webkit-text-decoration: underline dotted;
+  text-decoration: underline;
+  text-decoration: underline dotted;
+  border-bottom: 0;
+  cursor: help;
+}
+address {
+  margin-bottom: 1em;
+  font-style: normal;
+  line-height: inherit;
+}
+input[type='text'],
+input[type='password'],
+input[type='number'],
+textarea {
+  -webkit-appearance: none;
+}
+ol,
+ul,
+dl {
+  margin-top: 0;
+  margin-bottom: 1em;
+}
+ol ol,
+ul ul,
+ol ul,
+ul ol {
+  margin-bottom: 0;
+}
+dt {
+  font-weight: 500;
+}
+dd {
+  margin-bottom: 0.5em;
+  margin-left: 0;
+}
+blockquote {
+  margin: 0 0 1em;
+}
+dfn {
+  font-style: italic;
+}
+b,
+strong {
+  font-weight: bolder;
+}
+small {
+  font-size: 80%;
+}
+sub,
+sup {
+  position: relative;
+  font-size: 75%;
+  line-height: 0;
+  vertical-align: baseline;
+}
+sub {
+  bottom: -0.25em;
+}
+sup {
+  top: -0.5em;
+}
+pre,
+code,
+kbd,
+samp {
+  font-size: 1em;
+  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
+}
+pre {
+  margin-top: 0;
+  margin-bottom: 1em;
+  overflow: auto;
+}
+figure {
+  margin: 0 0 1em;
+}
+img {
+  vertical-align: middle;
+  border-style: none;
+}
+a,
+area,
+button,
+[role='button'],
+input:not([type='range']),
+label,
+select,
+summary,
+textarea {
+  touch-action: manipulation;
+}
+table {
+  border-collapse: collapse;
+}
+caption {
+  padding-top: 0.75em;
+  padding-bottom: 0.3em;
+  text-align: left;
+  caption-side: bottom;
+}
+input,
+button,
+select,
+optgroup,
+textarea {
+  margin: 0;
+  color: inherit;
+  font-size: inherit;
+  font-family: inherit;
+  line-height: inherit;
+}
+button,
+input {
+  overflow: visible;
+}
+button,
+select {
+  text-transform: none;
+}
+button,
+html [type='button'],
+[type='reset'],
+[type='submit'] {
+  -webkit-appearance: button;
+}
+button::-moz-focus-inner,
+[type='button']::-moz-focus-inner,
+[type='reset']::-moz-focus-inner,
+[type='submit']::-moz-focus-inner {
+  padding: 0;
+  border-style: none;
+}
+input[type='radio'],
+input[type='checkbox'] {
+  box-sizing: border-box;
+  padding: 0;
+}
+input[type='date'],
+input[type='time'],
+input[type='datetime-local'],
+input[type='month'] {
+  -webkit-appearance: listbox;
+}
+textarea {
+  overflow: auto;
+  resize: vertical;
+}
+fieldset {
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+legend {
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  margin-bottom: 0.5em;
+  padding: 0;
+  color: inherit;
+  font-size: 1.5em;
+  line-height: inherit;
+  white-space: normal;
+}
+progress {
+  vertical-align: baseline;
+}
+[type='number']::-webkit-inner-spin-button,
+[type='number']::-webkit-outer-spin-button {
+  height: auto;
+}
+[type='search'] {
+  outline-offset: -2px;
+  -webkit-appearance: none;
+}
+[type='search']::-webkit-search-cancel-button,
+[type='search']::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+::-webkit-file-upload-button {
+  font: inherit;
+  -webkit-appearance: button;
+}
+output {
+  display: inline-block;
+}
+summary {
+  display: list-item;
+}
+template {
+  display: none;
+}
+[hidden] {
+  display: none !important;
+}
+mark {
+  padding: 0.2em;
+  background-color: #feffe6;
+}

package/examples/src/style.less

@@ -0,0 +1,44 @@
+body {
+  padding: 0;
+  margin: 0;
+}
+
+.epic-page-container {
+  height: calc(100vh - 64px);
+  padding: 8px;
+  position: relative;
+}
+
+.epic-page-main {
+  background-color: var(--epic-view-color);
+}
+
+.epic-demo-header {
+  --epic-demo-header-bg: #fff;
+  --epic-demo-header-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03),
+    0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);
+  background: var(--epic-demo-header-bg);
+  box-shadow: var(--epic-demo-header-shadow);
+  z-index: 6;
+
+  > a,
+  .epic-demo-header-right > a {
+    color: var(--epic-text-main);
+  }
+}
+
+.dark .epic-demo-header {
+  --epic-demo-header-bg: #141414;
+  --epic-demo-header-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.8),
+    0 1px 6px -1px rgba(0, 0, 0, 0.7), 0 2px 4px 0 rgba(0, 0, 0, 0.7);
+}
+
+/* 当前页面最大化 css */
+.main-maximize .epic-demo-header,
+.main-maximize .ant-layout-sider {
+  display: none !important;
+}
+
+.main-maximize .epic-page-container {
+  height: 100vh;
+}

package/examples/src/views/builder/basic/index.vue

@@ -0,0 +1,182 @@
+<template>
+  <div class="epic-page-main p-2 h-full flex flex-col">
+    <h2 class="pt-4 pl-8 text-24px block">基础用法</h2>
+    <EBuilder ref="ebRef" :pageSchema="pageSchema">
+    </EBuilder>
+    <Divider orientation="left">页面结构数据</Divider>
+    <MonacoEditor class="flex-1" :modelValue="pageSchema" autoToggleTheme readOnly valueFormat="json" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { EBuilder, PageSchema } from '@epic-designer/core'
+import { pluginManager } from '@epic-designer/utils'
+import { Divider } from 'ant-design-vue'
+
+const MonacoEditor = pluginManager.getComponent('monacoEditor')
+const ebRef =  ref<InstanceType<typeof EBuilder>>()
+
+const pageSchema = ref<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",
+            "style": {
+              "width": "600px"
+            }
+          },
+          "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})"
+})
+
+
+</script>