@epic-designer/antd 1.0.5

package/src/form/index.ts

@@ -0,0 +1,196 @@
+import type { ComponentConfigModel } from '@epic-designer/types';
+
+export default {
+  component: () => import('./form.vue'),
+  config: {
+    action: [
+      {
+        description: '获取表单数据',
+        type: 'getData',
+      },
+      {
+        description: '设置表单数据',
+        type: 'setData',
+      },
+      {
+        description: '校验表单',
+        type: 'validate',
+      },
+    ],
+    attribute: [
+      {
+        field: 'componentProps.name',
+        label: 'Name',
+        type: 'input',
+      },
+      {
+        componentProps: {
+          allowClear: true,
+          'option-type': 'button',
+          options: [
+            {
+              label: '水平',
+              value: 'horizontal',
+            },
+            {
+              label: '垂直',
+              value: 'vertical',
+            },
+            {
+              label: '内联',
+              value: 'inline',
+            },
+          ],
+          placeholder: '请选择',
+        },
+        field: 'componentProps.layout',
+        label: '表单布局',
+        type: 'radio',
+      },
+      {
+        componentProps: {
+          'option-type': 'button',
+          options: [
+            {
+              label: '固定宽度',
+              value: 'fixed',
+            },
+            {
+              label: '自适应宽度',
+              value: 'flex',
+            },
+          ],
+        },
+        field: 'componentProps.labelLayout',
+        label: '标签布局',
+        type: 'radio',
+      },
+      {
+        field: 'componentProps.labelWidth',
+        label: '标签宽度',
+        show: ({ values }) => {
+          return values.componentProps?.labelLayout === 'fixed';
+        },
+        type: 'EInputSize',
+      },
+      {
+        componentProps: {
+          placeholder: '请输入',
+        },
+        field: 'componentProps.labelCol.span',
+        label: '标签占比',
+        show: ({ values }) => {
+          return values.componentProps?.labelLayout === 'flex';
+        },
+        type: 'input',
+      },
+      {
+        componentProps: {
+          placeholder: '请输入',
+        },
+        field: 'componentProps.wrapperCol.span',
+        label: '控件占比',
+        show: ({ values }) => {
+          return values.componentProps?.labelLayout === 'flex';
+        },
+        type: 'input',
+      },
+      {
+        componentProps: {
+          'option-type': 'button',
+          options: [
+            {
+              label: '左',
+              value: 'left',
+            },
+            {
+              label: '右',
+              value: 'right',
+            },
+          ],
+        },
+        field: 'componentProps.labelAlign',
+        label: '标签对齐',
+        type: 'radio',
+      },
+      {
+        componentProps: {
+          allowClear: true,
+          options: [
+            {
+              label: '大号',
+              value: 'large',
+            },
+            {
+              label: '中等',
+              value: 'middle',
+            },
+            {
+              label: '小型',
+              value: 'small',
+            },
+          ],
+          placeholder: '请选择',
+        },
+        defaultValue: 'default',
+        field: 'componentProps.size',
+        label: '尺寸',
+        type: 'select',
+      },
+      {
+        componentProps: {
+          checkedValue: false,
+          unCheckedValue: true,
+        },
+        field: 'componentProps.colon',
+        label: '隐藏冒号',
+        type: 'switch',
+      },
+      {
+        field: 'componentProps.hideRequiredMark',
+        label: '隐藏必须标志',
+        type: 'switch',
+      },
+
+      {
+        field: 'componentProps.labelWrap',
+        label: '标签文本换行',
+        type: 'switch',
+      },
+      {
+        field: 'componentProps.scrollToFirstError',
+        label: '滚动校验错误处',
+        type: 'switch',
+      },
+      {
+        field: 'componentProps.disabled',
+        label: '禁用',
+        type: 'switch',
+      },
+      {
+        field: 'componentProps.hidden',
+        label: '隐藏',
+        type: 'switch',
+      },
+    ],
+  },
+  defaultSchema: {
+    componentProps: {
+      labelCol: {
+        span: 5,
+      },
+      labelLayout: 'fixed',
+      labelWidth: '100px',
+      name: 'default',
+      wrapperCol: {
+        span: 19,
+      },
+    },
+    label: '表单',
+    type: 'form',
+    children: [],
+  },
+  groupName: '表单',
+  icon: 'icon--epic--list-alt-outline-rounded',
+  sort: 600,
+} as ComponentConfigModel;

package/src/form-item/formItem.vue

@@ -0,0 +1,12 @@
+<script lang="ts" setup>
+import { useAttrs } from 'vue';
+
+import { FormItem } from 'ant-design-vue';
+
+const attrs = useAttrs() as any;
+</script>
+<template>
+  <FormItem v-bind="attrs" :name="attrs.field">
+    <slot></slot>
+  </FormItem>
+</template>

package/src/form-item/index.ts

@@ -0,0 +1,10 @@
+import type { ComponentConfigModel } from '@epic-designer/types';
+
+export default {
+  component: () => import('./formItem.vue'),
+  config: {},
+  defaultSchema: {
+    label: '表单项',
+    type: 'form-item',
+  },
+} as ComponentConfigModel;

package/src/index.less

@@ -0,0 +1,33 @@
+.epic-designer-main {
+  .ant-input-number {
+    width: 100%;
+  }
+
+  .ant-collapse-content > .ant-collapse-content-box {
+    padding: 8px;
+  }
+
+  .ant-select {
+    width: 100%;
+  }
+
+  .epic-upload-image {
+    .avatar-uploader > .ant-upload {
+      width: 128px;
+      height: 128px;
+    }
+  }
+}
+
+// 适配epic-input-size样式
+.epic-input-size {
+  &.ant-input-affix-wrapper {
+    padding-top: 0;
+    padding-right: 0;
+    padding-bottom: 0;
+  }
+  .ant-select:hover {
+    border: none !important;
+    box-shadow: none !important;
+  }
+}

package/src/index.ts

@@ -0,0 +1,131 @@
+import type { PluginManager } from '@epic-designer/manager';
+
+import { watchEffect } from 'vue';
+
+// 注册ant-design-vue ui
+import { pluginManager as pManager } from '@epic-designer/manager';
+import { message, version } from 'ant-design-vue';
+
+import Button from './button';
+import Card from './card';
+import Cascader from './cascader';
+import Checkbox from './checkbox';
+import Col from './col';
+import colorPicker from './color-picker';
+import DatePicker from './date-picker';
+import Form from './form';
+import FormItem from './form-item';
+import Input from './input';
+import InputNumber from './input-number';
+import InputPassword from './input-password';
+import Modal from './modal';
+import Radio from './radio';
+import Row from './row';
+import Select from './select';
+import Slider from './slider';
+import Switch from './switch';
+import Textarea from './textarea';
+import TimePicker from './time-picker';
+import UploadFile from './upload-file';
+import UploadImage from './upload-image';
+
+export function setupAntd(pluginManager: PluginManager = pManager): void {
+  // 版本兼容处理 start
+  const versionArray = version.split('.');
+  // 获取版本号第一个数字
+  const firstNumber = Number.parseInt(versionArray[0]);
+
+  // 创建一个 style 标签
+  const style = document.createElement('style');
+
+  // 大于v3版本
+  if (firstNumber > 3) {
+    // 定义 CSS 样式
+    const css = `
+.epic-modal-ant .epic-modal-main {
+  padding: 4px 12px 12px;
+}
+.epic-modal-ant .ant-modal-title {
+  padding: 16px 16px 0px;
+}
+.epic-modal-ant .ant-modal-content {
+  padding: 0px;
+}`;
+    style.append(document.createTextNode(css));
+    // 将 style 标签插入到页面的 head 中
+    document.head.append(style);
+    // 版本兼容处理 end
+  } else {
+    // v3版本
+    Form.config.attribute = Form.config.attribute?.filter(
+      (item) => item.label !== '禁用',
+    );
+  }
+
+  // 加载组件
+  pluginManager.component(
+    'Collapse',
+    async () => (await import('ant-design-vue')).Collapse,
+  );
+  pluginManager.component(
+    'CollapseItem',
+    async () => (await import('ant-design-vue')).CollapsePanel,
+  );
+  pluginManager.component(
+    'Tabs',
+    async () => (await import('ant-design-vue')).Tabs,
+  );
+  pluginManager.component(
+    'TabPane',
+    async () => (await import('ant-design-vue')).TabPane,
+  );
+
+  const componentArray = [
+    Form,
+    FormItem,
+    Input,
+    Textarea,
+    InputNumber,
+    InputPassword,
+    Radio,
+    Checkbox,
+    Select,
+    Slider,
+    TimePicker,
+    DatePicker,
+    Cascader,
+    Switch,
+    UploadImage,
+    UploadFile,
+    colorPicker,
+    Button,
+    Card,
+    Row,
+    Col,
+    Modal,
+  ];
+
+  // 更新默认上传地址
+  watchEffect(() => {
+    UploadImage.defaultSchema.componentProps.action =
+      pluginManager.global.uploadImage;
+    UploadFile.defaultSchema.componentProps.action =
+      pluginManager.global.uploadFile;
+  });
+
+  componentArray.forEach((item) => {
+    pluginManager.registerComponent(item);
+    pluginManager.addBaseComponentTypes(item.defaultSchema.type);
+  });
+
+  // 注册全局提示函数
+  pluginManager.global.$message = {
+    error: message.error,
+    info: message.info,
+    success: message.success,
+    warning: message.warning,
+  };
+
+  // ui初始化完成。
+  pluginManager.setInitialized(true);
+}

package/src/input/index.ts

@@ -0,0 +1,171 @@
+import type { ComponentConfigModel } from '@epic-designer/types';
+
+export default {
+  bindModel: 'value',
+  component: async () => (await import('ant-design-vue')).Input,
+  config: {
+    action: [
+      {
+        description: '使输入框获取焦点',
+        type: 'focus',
+      },
+      {
+        description: '使输入框失去焦点',
+        type: 'blur',
+      },
+      {
+        description: '选中输入框中的文字',
+        type: 'select',
+      },
+    ],
+    attribute: [
+      {
+        field: 'field',
+        label: '字段名',
+        type: 'input',
+      },
+      {
+        field: 'label',
+        label: '标题',
+        type: 'input',
+      },
+      {
+        field: 'componentProps.placeholder',
+        label: '占位内容',
+        type: 'input',
+      },
+      {
+        componentProps: {
+          placeholder: '请输入',
+        },
+        field: 'componentProps.defaultValue',
+        label: '默认值',
+        type: 'input',
+      },
+      {
+        componentProps: {
+          allowClear: true,
+          options: [
+            {
+              label: 'text',
+              value: 'text',
+            },
+            {
+              label: 'number',
+              value: 'number',
+            },
+            {
+              label: 'password',
+              value: 'password',
+            },
+          ],
+          placeholder: '请选择',
+        },
+        field: 'componentProps.type',
+        label: '输入类型',
+        type: 'select',
+      },
+      {
+        componentProps: {
+          allowClear: true,
+          options: [
+            {
+              label: '大号',
+              value: 'large',
+            },
+            {
+              label: '中等',
+              value: 'middle',
+            },
+            {
+              label: '小型',
+              value: 'small',
+            },
+          ],
+          placeholder: '请选择',
+        },
+        field: 'componentProps.size',
+        label: '尺寸',
+        type: 'select',
+      },
+      {
+        componentProps: {
+          checkedValue: false,
+          unCheckedValue: true,
+        },
+        field: 'componentProps.bordered',
+        label: '无边框',
+        type: 'switch',
+      },
+      {
+        componentProps: {
+          placeholder: '请输入',
+        },
+        field: 'componentProps.maxlength',
+        label: '最大输入长度',
+        type: 'number',
+      },
+      {
+        field: 'componentProps.showCount',
+        label: '展示字数',
+        type: 'switch',
+      },
+      {
+        field: 'componentProps.allowClear',
+        label: '可清空',
+        type: 'switch',
+      },
+      {
+        field: 'componentProps.disabled',
+        label: '禁用',
+        type: 'switch',
+      },
+      {
+        field: 'componentProps.hidden',
+        label: '隐藏',
+        type: 'switch',
+      },
+      {
+        description: '校验规则需要配合表单使用',
+        field: 'rules',
+        label: '表单校验',
+        layout: 'vertical',
+        type: 'ERuleEditor',
+      },
+    ],
+    event: [
+      {
+        description: '输入值时',
+        type: 'input',
+      },
+      {
+        description: '值修改时',
+        type: 'change',
+      },
+      {
+        description: '按下回车时',
+        type: 'pressEnter',
+      },
+      {
+        description: '获取焦点时',
+        type: 'focus',
+      },
+      {
+        description: '失去焦点时',
+        type: 'blur',
+      },
+    ],
+  },
+  defaultSchema: {
+    componentProps: {
+      placeholder: '请输入',
+    },
+    field: 'input',
+    input: true,
+    label: '输入框',
+    type: 'input',
+  },
+  groupName: '表单',
+  icon: 'icon--epic--border-color-outline-rounded',
+  sort: 700,
+} as ComponentConfigModel;