epic-designer-gold 1.0.0 → 1.0.1

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

@@ -0,0 +1,163 @@
+import { type ComponentConfigModel } from "@epic-designer/utils";
+export default {
+  component: async () => (await import("ant-design-vue")).Textarea,
+  groupName: "表单",
+  icon: "icon--epic--edit-square-outline-rounded",
+  sort: 705,
+  defaultSchema: {
+    label: "文本域",
+    type: "textarea",
+    field: "textarea",
+    input: true,
+    componentProps: {
+      placeholder: "请输入",
+    },
+  },
+  config: {
+    attribute: [
+      {
+        label: "字段名",
+        type: "input",
+        field: "field",
+      },
+      {
+        label: "标题",
+        type: "input",
+        field: "label",
+      },
+      {
+        label: "默认值",
+        type: "textarea",
+        field: "componentProps.defaultValue",
+        componentProps: {
+          placeholder: "请输入",
+        },
+      },
+      {
+        label: "占位内容",
+        type: "input",
+        field: "componentProps.placeholder",
+      },
+      {
+        label: "最小行数",
+        type: "number",
+        field: "componentProps.autoSize.minRows",
+        componentProps: {
+          placeholder: "请输入",
+        },
+      },
+      {
+        label: "最大行数",
+        type: "number",
+        field: "componentProps.autoSize.maxRows",
+        componentProps: {
+          placeholder: "请输入",
+        },
+      },
+      {
+        label: "尺寸",
+        type: "select",
+        componentProps: {
+          placeholder: "请选择",
+          allowClear: true,
+          options: [
+            {
+              label: "大号",
+              value: "large",
+            },
+            {
+              label: "中等",
+              value: "middle",
+            },
+            {
+              label: "小型",
+              value: "small",
+            },
+          ],
+        },
+        field: "componentProps.size",
+      },
+      {
+        label: "最大输入长度",
+        type: "number",
+        field: "componentProps.maxLength",
+        componentProps: {
+          placeholder: "请输入",
+        },
+      },
+      {
+        label: "无边框",
+        type: "switch",
+        componentProps: {
+          checkedValue: false,
+          unCheckedValue: true,
+        },
+        field: "componentProps.bordered",
+      },
+      {
+        label: "统计字数",
+        type: "switch",
+        field: "componentProps.showCount",
+      },
+      {
+        label: "可清除",
+        type: "switch",
+        field: "componentProps.allowClear",
+      },
+      {
+        label: "禁用",
+        type: "switch",
+        field: "componentProps.disabled",
+      },
+      {
+        label: "隐藏",
+        type: "switch",
+        field: "componentProps.hidden",
+      },
+      {
+        label: "表单校验",
+        type: "ERuleEditor",
+        layout: "vertical",
+        field: "rules",
+        describe: "校验规则需要配合表单使用",
+      },
+    ],
+    event: [
+      {
+        type: "input",
+        describe: "输入值",
+      },
+      {
+        type: "change",
+        describe: "值修改",
+      },
+      {
+        type: "pressEnter",
+        describe: "按下回车的回调",
+      },
+      {
+        type: "focus",
+        describe: "获取焦点",
+      },
+      {
+        type: "blur",
+        describe: "失去焦点",
+      },
+    ],
+    action: [
+      {
+        type: "focus",
+        describe: "使 input 获取焦点",
+      },
+      {
+        type: "blur",
+        describe: "使 input 失去焦点",
+      },
+      {
+        type: "select",
+        describe: "选中 input 中的文字",
+      },
+    ],
+  },
+  bindModel: "value",
+} as ComponentConfigModel;

package/packages/ui/antd/time-picker/index.ts

@@ -0,0 +1,191 @@
+import { type ComponentConfigModel } from "@epic-designer/utils";
+export default {
+  component: async () => (await import("ant-design-vue")).TimePicker,
+  groupName: "表单",
+  icon: "icon--epic--time-line",
+  sort: 920,
+  defaultSchema: {
+    label: "时间选择器",
+    type: "time",
+    field: "time",
+    input: true,
+    componentProps: {
+      valueFormat: "HH:mm:ss",
+      format: "HH:mm:ss",
+      placeholder: "请输入",
+    },
+  },
+  config: {
+    attribute: [
+      {
+        label: "字段名",
+        type: "input",
+        field: "field",
+      },
+      {
+        label: "标题",
+        type: "input",
+        field: "label",
+      },
+      {
+        label: "默认值",
+        type: "time",
+        field: "componentProps.defaultValue",
+      },
+      {
+        label: "占位内容",
+        type: "input",
+        field: "componentProps.placeholder",
+      },
+      {
+        label: "显示格式",
+        type: "input",
+        componentProps: {
+          placeholder: "请输入",
+        },
+        field: "componentProps.format",
+      },
+      {
+        label: "数据格式",
+        type: "input",
+        componentProps: {
+          placeholder: "请输入",
+        },
+        field: "componentProps.valueFormat",
+      },
+      {
+        label: "尺寸",
+        type: "select",
+        componentProps: {
+          placeholder: "请选择",
+          allowClear: true,
+          options: [
+            {
+              label: "大号",
+              value: "large",
+            },
+            {
+              label: "中等",
+              value: "middle",
+            },
+            {
+              label: "小型",
+              value: "small",
+            },
+          ],
+        },
+        field: "componentProps.size",
+      },
+      {
+        label: "小时选项间隔",
+        type: "number",
+        field: "componentProps.hourStep",
+        componentProps: {
+          placeholder: "请输入",
+        },
+      },
+      {
+        label: "分钟选项间隔",
+        type: "number",
+        field: "componentProps.minuteStep",
+        componentProps: {
+          placeholder: "请输入",
+        },
+      },
+      {
+        label: "秒选项间隔",
+        type: "number",
+        field: "componentProps.secondStep",
+        componentProps: {
+          placeholder: "请输入",
+        },
+      },
+      {
+        label: "弹出框位置",
+        type: "select",
+        componentProps: {
+          placeholder: "请选择",
+          allowClear: true,
+          options: [
+            {
+              label: "bottomLeft",
+              value: "bottomLeft",
+            },
+            {
+              label: "bottomRight",
+              value: "bottomRight",
+            },
+            {
+              label: "topLeft",
+              value: "topLeft",
+            },
+            {
+              label: "topRight",
+              value: "topRight",
+            },
+          ],
+        },
+        field: "componentProps.placement",
+      },
+      {
+        label: "12小时制",
+        type: "switch",
+        field: "componentProps.use12Hours",
+        changeSync: true,
+        onChange({ values, value }) {
+          values.componentProps.defaultValue = null;
+          if (value) {
+            values.componentProps.format = "h:mm:ss a";
+            values.componentProps.valueFormat = "h:mm:ss a";
+          } else {
+            values.componentProps.format = "HH:mm:ss";
+            values.componentProps.valueFormat = "HH:mm:ss";
+          }
+        },
+      },
+      {
+        label: "无边框",
+        type: "switch",
+        componentProps: {
+          checkedValue: false,
+          unCheckedValue: true,
+        },
+        field: "componentProps.bordered",
+      },
+      {
+        label: "禁止键盘输入",
+        type: "switch",
+        field: "componentProps.inputReadOnly",
+      },
+      {
+        label: "可清空",
+        type: "switch",
+        field: "componentProps.allowClear",
+      },
+      {
+        label: "禁用",
+        type: "switch",
+        field: "componentProps.disabled",
+      },
+      {
+        label: "隐藏",
+        type: "switch",
+        field: "componentProps.hidden",
+      },
+      {
+        label: "表单校验",
+        type: "ERuleEditor",
+        layout: "vertical",
+        field: "rules",
+        describe: "校验规则需要配合表单使用",
+      },
+    ],
+    event: [
+      {
+        type: "change",
+        describe: "值变化时",
+      },
+    ],
+  },
+  bindModel: "value",
+} as ComponentConfigModel;

package/packages/ui/antd/upload-file/index.ts

@@ -0,0 +1,89 @@
+import { type ComponentConfigModel } from "@epic-designer/utils";
+export default {
+  component: () => import("./uploadFile"),
+  groupName: "表单",
+  icon: "icon--epic--upload-rounded",
+  sort: 920,
+  defaultSchema: {
+    label: "上传文件",
+    type: "upload-file",
+    field: "uploadFile",
+    input: true,
+    componentProps: {
+      action: "https://ess-ds.com/prod-api/center-file/file/upload",
+    },
+  },
+  config: {
+    attribute: [
+      {
+        label: "字段名",
+        type: "input",
+        field: "field",
+      },
+      {
+        label: "标题",
+        type: "input",
+        field: "label",
+      },
+      {
+        label: "请求地址",
+        type: "input",
+        field: "componentProps.action",
+      },
+      {
+        label: "列表样式",
+        type: "select",
+        field: "componentProps.listType",
+        componentProps: {
+          placeholder: "请选择",
+          allowClear: true,
+          options: [
+            {
+              label: "text",
+              value: "text",
+            },
+            {
+              label: "picture",
+              value: "picture",
+            },
+          ],
+        },
+      },
+      {
+        label: "多选",
+        type: "switch",
+        field: "componentProps.multiple",
+      },
+      {
+        label: "允许上传最大数量",
+        type: "number",
+        field: "componentProps.maxCount",
+        componentProps: {
+          min: 0,
+          placeholder: "请输入",
+        },
+      },
+      {
+        label: "禁用",
+        type: "switch",
+        field: "componentProps.disabled",
+      },
+      {
+        label: "隐藏",
+        type: "switch",
+        field: "componentProps.hidden",
+      },
+      {
+        label: "表单校验",
+        type: "ERuleEditor",
+        layout: "vertical",
+        field: "rules",
+        describe: "校验规则需要配合表单使用",
+        componentProps: {
+          ruleType: "array",
+        },
+      },
+    ],
+  },
+  bindModel: "modelValue",
+} as ComponentConfigModel;

package/packages/ui/antd/upload-file/uploadFile.ts

@@ -0,0 +1,119 @@
+import {
+  type PropType,
+  defineComponent,
+  h,
+  nextTick,
+  computed,
+  ref,
+  watch,
+} from "vue";
+import { Upload, Button, message } from "ant-design-vue";
+import type { UploadChangeParam, UploadProps } from "ant-design-vue";
+
+// 封装上传文件组件
+export default defineComponent({
+  props: {
+    modelValue: {
+      type: Array as PropType<UploadProps["fileList"]>,
+      default: () => [],
+    },
+  },
+  emits: ["update:modelValue", "change"],
+  setup(props, { emit, attrs }) {
+    const fileList = ref<UploadProps["fileList"]>([]);
+    watch(fileList, (e) => {
+      emit("update:modelValue", e);
+      emit("change", e);
+    });
+    // 处理传递进来的值
+    watch(
+      () => props.modelValue,
+      (e) => {
+        if (e != null && e.length > 0 && fileList.value != null) {
+          // props modelValue 等于 data 不进行处理
+          if (fileList.value === e) return;
+          fileList.value.length = 0;
+
+          fileList.value.push(...e);
+        }
+      },
+      { deep: true, immediate: true }
+    );
+
+    function handleUpdate(e: UploadProps["fileList"]): void {
+      nextTick(() => {
+        fileList.value = e;
+      });
+    }
+
+    // 处理数据结果
+    const handleChange = (info: UploadChangeParam): void => {
+      if (info.file.status === "uploading") {
+        return;
+      }
+
+      if (info.file.status === "done") {
+        // Get this url from response in real world.
+        const url = info.file.response?.data?.url;
+        if (!info.file.url && !url) {
+          info.file.status = "error";
+          message.error("上传失败");
+          return;
+        }
+        // 赋值url
+        info.file.url = url;
+      }
+
+      if (info.file.status === "error") {
+        message.error("upload error");
+      }
+    };
+
+    // 上传前处理
+    const beforeUpload = (file: any): void => {
+      // const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
+      // if (!isJpgOrPng) {
+      //   message.error('您只能上传JPG/PNG文件!');
+      // }
+      // const isLt2M = file.size / 1024 / 1024 < 2;
+      // if (!isLt2M) {
+      //   message.error('图片大小超过 2MB!');
+      // }
+      // return isJpgOrPng && isLt2M;
+    };
+
+    const getUploadProps = computed<UploadProps>(() => ({
+      ...attrs,
+      "onUpdate:file-list": handleUpdate,
+      "file-list": fileList.value,
+      "onBefore-upload": beforeUpload,
+      onChange: handleChange,
+    }));
+
+    return () => {
+      return h("div", null, {
+        default: () => [
+          h(Upload, getUploadProps.value, {
+            default: () => [
+              h(
+                Button,
+                {
+                  class: "flex items-center",
+                },
+                {
+                  default: () => [
+                    h("span", {
+                      class: "icon--epic icon--epic--cloud-upload-outlined text-lg",
+                      style: { "margin-right": "2px" },
+                    }),
+                    h("span", null, { default: () => "上传文件" }),
+                  ],
+                }
+              ),
+            ],
+          }),
+        ],
+      });
+    };
+  },
+});

package/packages/ui/antd/upload-image/index.ts

@@ -0,0 +1,70 @@
+import { type ComponentConfigModel } from "@epic-designer/utils";
+export default {
+  component: () => import("./uploadImage.vue"),
+  groupName: "表单",
+  icon: "icon--epic--imagesmode-outline-rounded",
+  sort: 920,
+  defaultSchema: {
+    label: "上传图片",
+    type: "upload-image",
+    field: "uploadImage",
+    input: true,
+    componentProps: {
+      action: "https://ess-ds.com/prod-api/center-file/file/upload",
+    },
+  },
+  config: {
+    attribute: [
+      {
+        label: "字段名",
+        type: "input",
+        field: "field",
+      },
+      {
+        label: "标题",
+        type: "input",
+        field: "label",
+      },
+      {
+        label: "请求地址",
+        type: "input",
+        field: "componentProps.action",
+      },
+      {
+        label: "多选",
+        type: "switch",
+        field: "componentProps.multiple",
+      },
+      {
+        label: "允许上传最大数量",
+        type: "number",
+        field: "componentProps.maxCount",
+        componentProps: {
+          min: 0,
+          placeholder: "请输入",
+        },
+      },
+      {
+        label: "禁用",
+        type: "switch",
+        field: "componentProps.disabled",
+      },
+      {
+        label: "隐藏",
+        type: "switch",
+        field: "componentProps.hidden",
+      },
+      {
+        label: "表单校验",
+        type: "ERuleEditor",
+        layout: "vertical",
+        field: "rules",
+        describe: "校验规则需要配合表单使用",
+        componentProps: {
+          ruleType: "array",
+        },
+      },
+    ],
+  },
+  bindModel: "modelValue",
+} as ComponentConfigModel;