form-designer-xinyi 1.0.0

package/packages/epic-designer/package.json

@@ -0,0 +1,75 @@
+{
+  "name": "epic-designer",
+  "private": false,
+  "version": "0.9.14",
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "typings": "dist/epic-designer/index.d.ts",
+  "description": "基于vue3的设计器,可视化开发页面表单",
+  "author": "kchengz",
+  "keywords": [
+    "form",
+    "epic-designer",
+    "设计器",
+    "页面设计",
+    "designer",
+    "设计工具",
+    "低代码",
+    "可视化",
+    "工作流"
+  ],
+  "bugs": {
+    "url": "https://github.com/Kchengz/epic-designer/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Kchengz/epic-designer"
+  },
+  "scripts": {
+    "build": "vite build",
+    "preview": "vite preview",
+    "test": "vitest",
+    "lint": "eslint . --fix --ext .js,.jsx,.json,.ts,.tsx,.vue"
+  },
+  "dependencies": {
+    "dayjs": "^1.11.11",
+    "monaco-editor": "^0.48.0",
+    "vuedraggable": "4.1.0"
+  },
+  "peerDependencies": {
+    "ant-design-vue": ">=3.2.20",
+    "element-plus": ">=2.1.4",
+    "epic-designer": ">=0.9.3",
+    "naive-ui": ">=2.30.0",
+    "vue": ">=3.1.0"
+  },
+  "devDependencies": {
+    "@algolia/client-search": "^4.23.3",
+    "@babel/core": "^7.24.5",
+    "@babel/eslint-parser": "^7.24.5",
+    "@babel/plugin-transform-typescript": "^7.24.5",
+    "@babel/preset-env": "^7.24.5",
+    "@babel/preset-typescript": "^7.24.1",
+    "@types/node": "^20.12.7",
+    "@typescript-eslint/eslint-plugin": "^7.8.0",
+    "@typescript-eslint/parser": "^7.8.0",
+    "@vue/test-utils": "2.4.5",
+    "eslint-config-standard-with-typescript": "^43.0.1",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-n": "^17.4.0",
+    "eslint-plugin-promise": "^6.1.1",
+    "eslint-plugin-vue": "^9.25.0",
+    "jsdom": "^24.0.0",
+    "rollup-plugin-copy": "^3.5.0",
+    "rollup-plugin-external-globals": "^0.10.0",
+    "unocss": "^0.59.4",
+    "vite-plugin-eslint": "^1.8.1",
+    "vite-plugin-monaco-editor": "^1.1.0",
+    "vite-plugin-svg-icons": "^2.0.1",
+    "vite-plugin-vue-setup-extend": "^0.4.0",
+    "vitest": "^1.5.3",
+    "vue-eslint-parser": "^9.4.2",
+    "vue-tsc": "^2.0.16"
+  }
+}

package/packages/epic-designer/shims-vue.d.ts

@@ -0,0 +1,4 @@
+declare module '*.vue' {
+  import Vue from 'vue'
+  export default Vue
+}

package/packages/epic-designer/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/epic-designer/uno.config.ts

@@ -0,0 +1,79 @@
+// uno.config.ts
+import { defineConfig, presetUno, transformerDirectives } from 'unocss'
+
+export default defineConfig({
+  exclude: [
+    'node_modules',
+    'dist',
+    '.git',
+    '.husky',
+    '.vscode',
+    'public',
+    'build',
+    'mock',
+    './stats.html'
+  ],
+  presets: [presetUno({ dark: 'class' })],
+  transformers: [transformerDirectives()],
+  shortcuts: {
+    'wh-full': 'w-full h-full',
+    'flex-center': 'flex justify-center items-center',
+    'flex-col-center': 'flex-center flex-col',
+    'flex-x-center': 'flex justify-center',
+    'flex-y-center': 'flex items-center',
+    'i-flex-center': 'inline-flex justify-center items-center',
+    'i-flex-x-center': 'inline-flex justify-center',
+    'i-flex-y-center': 'inline-flex items-center',
+    'flex-col': 'flex flex-col',
+    'flex-col-stretch': 'flex-col items-stretch',
+    'i-flex-col': 'inline-flex flex-col',
+    'i-flex-col-stretch': 'i-flex-col items-stretch',
+    'flex-1-hidden': 'flex-1 overflow-hidden',
+    'absolute-lt': 'absolute left-0 top-0',
+    'absolute-lb': 'absolute left-0 bottom-0',
+    'absolute-rt': 'absolute right-0 top-0',
+    'absolute-rb': 'absolute right-0 bottom-0',
+    'absolute-tl': 'absolute-lt',
+    'absolute-tr': 'absolute-rt',
+    'absolute-bl': 'absolute-lb',
+    'absolute-br': 'absolute-rb',
+    'absolute-center': 'absolute-lt flex-center wh-full',
+    'fixed-lt': 'fixed left-0 top-0',
+    'fixed-lb': 'fixed left-0 bottom-0',
+    'fixed-rt': 'fixed right-0 top-0',
+    'fixed-rb': 'fixed right-0 bottom-0',
+    'fixed-tl': 'fixed-lt',
+    'fixed-tr': 'fixed-rt',
+    'fixed-bl': 'fixed-lb',
+    'fixed-br': 'fixed-rb',
+    'fixed-center': 'fixed-lt flex-center wh-full',
+    'nowrap-hidden': 'whitespace-nowrap overflow-hidden',
+    'ellipsis-text': 'nowrap-hidden text-ellipsis',
+    'transition-base': 'transition-all duration-300 ease-in-out'
+  },
+  theme: {
+    colors: {
+      primary: 'var(--primary-color)',
+      primary_hover: 'rgb(var(--primary-color-hover))',
+      primary_pressed: 'rgb(var(--primary-color-pressed))',
+      primary_active: 'rgba(var(--primary-color-active),0.1)',
+      info: 'rgb(var(--info-color))',
+      info_hover: 'rgb(var(--info-color-hover))',
+      info_pressed: 'rgb(var(--info-color-pressed))',
+      info_active: 'rgb(var(--info-color-active),0.1)',
+      success: 'rgb(var(--success-color))',
+      success_hover: 'rgb(var(--success-color-hover))',
+      success_pressed: 'rgb(var(--success-color-pressed))',
+      success_active: 'rgb(var(--success-color-active),0.1)',
+      warning: 'rgb(var(--warning-color))',
+      warning_hover: 'rgb(var(--warning-color-hover))',
+      warning_pressed: 'rgb(var(--warning-color-pressed))',
+      warning_active: 'rgb(var(--warning-color-active),0.1)',
+      error: 'rgb(var(--error-color))',
+      error_hover: 'rgb(var(--error-color-hover))',
+      error_pressed: 'rgb(var(--error-color-pressed))',
+      error_active: 'rgb(var(--error-color-active),0.1)',
+      dark: '#18181c'
+    }
+  }
+})

package/packages/script/package.json

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

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(`编译完成`);
+    }
+  );
+}

package/packages/script/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "target": "es2016" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
+    "module": "commonjs" /* Specify what module code is generated. */,
+    "esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */,
+    "forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,
+    "strict": true /* Enable all strict type-checking options. */,
+    "skipLibCheck": true /* Skip type checking all .d.ts files. */
+  }
+}

package/packages/ui/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/ui/antd/button/button.vue

@@ -0,0 +1,16 @@
+<template>
+  <Button v-bind="props.componentSchema?.componentProps">
+    <slot>{{ props.componentSchema?.label }}</slot>
+  </Button>
+</template>
+<script lang="ts" setup>
+import { PropType } from 'vue'
+import type { ComponentSchema } from '@epic-designer/core/types/epic-designer'
+import { Button } from 'ant-design-vue'
+const props = defineProps({
+  componentSchema: {
+    type: Object as PropType<ComponentSchema>,
+    default: () => ({})
+  }
+})
+</script>

package/packages/ui/antd/button/index.ts

@@ -0,0 +1,202 @@
+import { type ComponentConfigModel } from "@epic-designer/utils";
+export default {
+  component: () => import("./button.vue"),
+  groupName: "表单",
+  icon: "epic-icon-button-remove",
+  defaultSchema: {
+    label: "按钮",
+    type: "button",
+    field: "input",
+    input: false,
+  },
+  config: {
+    attribute: [
+      {
+        label: "标题",
+        type: "input",
+        field: "label",
+      },
+      {
+        label: "类型",
+        type: "select",
+        componentProps: {
+          placeholder: "请选择",
+          clearable: true,
+          options: [
+            {
+              label: "primary",
+              value: "primary",
+            },
+            {
+              label: "ghost",
+              value: "ghost",
+            },
+            {
+              label: "dashed",
+              value: "dashed",
+            },
+            {
+              label: "link",
+              value: "link",
+            },
+            {
+              label: "text",
+              value: "text",
+            },
+            {
+              label: "default",
+              value: "default",
+            },
+          ],
+        },
+        field: "componentProps.type",
+      },
+      {
+        label: "操作类型",
+        type: "select",
+        componentProps: {
+          placeholder: "请选择",
+          clearable: true,
+          options: [
+            {
+              label: "button",
+              value: "button",
+            },
+            {
+              label: "submit",
+              value: "submit",
+            },
+            {
+              label: "reset",
+              value: "reset",
+            },
+          ],
+        },
+        field: "componentProps.htmlType",
+      },
+      {
+        label: "链接",
+        type: "input",
+        field: "componentProps.href",
+        componentProps: {
+          allowClear: true,
+          placeholder: "请输入",
+        },
+      },
+      {
+        label: "链接打开方式",
+        type: "select",
+        field: "componentProps.target",
+        show: ({ values }) => values.componentProps?.href,
+        componentProps: {
+          placeholder: "请选择",
+          clearable: true,
+          options: [
+            {
+              label: "blank",
+              value: "_blank",
+            },
+            {
+              label: "parent",
+              value: "_parent",
+            },
+            {
+              label: "self",
+              value: "_self",
+            },
+            {
+              label: "top",
+              value: "_top",
+            },
+          ],
+        },
+      },
+      {
+        label: "尺寸",
+        type: "select",
+        componentProps: {
+          placeholder: "请选择",
+          allowClear: true,
+          options: [
+            {
+              label: "default",
+              value: "default",
+            },
+            {
+              label: "small",
+              value: "small",
+            },
+            {
+              label: "large",
+              value: "large",
+            },
+          ],
+        },
+        field: "componentProps.size",
+      },
+      {
+        label: "形状",
+        type: "select",
+        componentProps: {
+          placeholder: "请选择",
+          clearable: true,
+          options: [
+            {
+              label: "default",
+              value: "default",
+            },
+            {
+              label: "circle",
+              value: "circle",
+            },
+            {
+              label: "round",
+              value: "round",
+            },
+          ],
+        },
+        field: "componentProps.shape",
+      },
+      {
+        label: "幽灵按钮",
+        type: "switch",
+        field: "componentProps.ghost",
+      },
+      {
+        label: "加载状态",
+        type: "switch",
+        field: "componentProps.loading",
+      },
+      {
+        label: "宽度自适应",
+        type: "switch",
+        field: "componentProps.block",
+      },
+      {
+        label: "危险按钮",
+        type: "switch",
+        field: "componentProps.danger",
+      },
+      {
+        label: "禁用",
+        type: "switch",
+        field: "componentProps.disabled",
+      },
+      {
+        label: "隐藏",
+        type: "switch",
+        field: "componentProps.hidden",
+      },
+    ],
+    event: [
+      {
+        type: "click",
+        describe: "点击按钮时",
+      },
+      {
+        type: "dblclick",
+        describe: "双击按钮时",
+      },
+    ],
+  },
+} as ComponentConfigModel;

package/packages/ui/antd/card/card.ts

@@ -0,0 +1,31 @@
+import { defineComponent, h, renderSlot, type PropType } from "vue";
+import { Card } from "ant-design-vue";
+import { type ComponentSchema } from "@epic-designer/core/types/epic-designer";
+export default defineComponent({
+  props: {
+    componentSchema: {
+      type: Object as PropType<ComponentSchema>,
+      require: true,
+      default: () => ({}),
+    },
+  },
+  setup(props, { slots }) {
+    return () => {
+      const componentSchema = {
+        ...props.componentSchema,
+        title: props.componentSchema?.label ?? "",
+      } as Record<string, any>;
+      const children = componentSchema.children ?? [];
+      delete componentSchema.children;
+
+      return h(Card, componentSchema, {
+        default: () =>
+          renderSlot(slots, "edit-node", {}, () =>
+            children.map((subcomponentSchema: ComponentSchema) =>
+              renderSlot(slots, "node", { componentSchema: subcomponentSchema })
+            )
+          ),
+      });
+    };
+  },
+});

package/packages/ui/antd/card/index.ts

@@ -0,0 +1,63 @@
+import { type ComponentConfigModel } from "@epic-designer/utils";
+export default {
+  component: () => import("./card"),
+  groupName: "布局",
+  icon: "epic-icon-qiapian",
+  defaultSchema: {
+    label: "卡片布局",
+    type: "card",
+    children: [],
+  },
+  config: {
+    attribute: [
+      {
+        label: "标题",
+        type: "input",
+        field: "label",
+      },
+      {
+        label: "尺寸",
+        type: "select",
+        componentProps: {
+          placeholder: "请选择",
+          allowClear: true,
+          options: [
+            {
+              label: "default",
+              value: "default",
+            },
+            {
+              label: "small",
+              value: "small",
+            },
+          ],
+        },
+        field: "componentProps.size",
+      },
+      {
+        label: "无边框",
+        type: "switch",
+        componentProps: {
+          checkedValue: false,
+          unCheckedValue: true,
+        },
+        field: "componentProps.bordered",
+      },
+      {
+        label: "鼠标悬停阴影",
+        type: "switch",
+        field: "componentProps.hoverable",
+      },
+      {
+        label: "加载状态",
+        type: "switch",
+        field: "componentProps.loading",
+      },
+      {
+        label: "隐藏",
+        type: "switch",
+        field: "componentProps.hidden",
+      },
+    ],
+  },
+} as ComponentConfigModel;

package/packages/ui/antd/cascader/cascader.vue

@@ -0,0 +1,23 @@
+<template>
+    <Cascader v-bind="getComponentProps" />
+</template>
+<script setup lang="ts">
+import { Cascader } from 'ant-design-vue'
+import { useAttrs, computed } from 'vue'
+
+const attrs = useAttrs()
+const emits = defineEmits<{
+    'update:modelValue': any
+}>()
+const getComponentProps = computed(() => ({
+    ...attrs,
+    value: attrs.modelValue,
+    showCheckedStrategy: Cascader[attrs.showCheckedStrategy as string ?? 'SHOW_PARENT'],
+    "onUpdate:value": handleUpdate,
+}))
+
+function handleUpdate(e = null): void {
+    emits("update:modelValue", e);
+}
+
+</script>