epic-designer-gold 0.0.3 → 0.0.4

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

@@ -0,0 +1,83 @@
+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://examples.epicjs.cn/static/upload-img.json",
+    },
+  },
+  config: {
+    attribute: [
+      {
+        label: "字段名",
+        type: "input",
+        field: "field",
+      },
+      {
+        label: "标题",
+        type: "input",
+        field: "label",
+      },
+      {
+        label: "请求地址",
+        type: "input",
+        field: "componentProps.action",
+      },
+      {
+        label: "上传文件字段",
+        type: "input",
+        field: "componentProps.name",
+        componentProps: {
+          placeholder: "请输入",
+        },
+      },
+      {
+        label: "允许上传最大数量",
+        type: "number",
+        field: "componentProps.max",
+        componentProps: {
+          min: 0,
+          placeholder: "请输入",
+        },
+      },
+      {
+        label: "展示文件列表",
+        type: "switch",
+        field: "componentProps.showFileList",
+      },
+      {
+        label: "多选",
+        type: "switch",
+        field: "componentProps.multiple",
+      },
+      {
+        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/naiveUi/upload-file/uploadFile.ts

@@ -0,0 +1,78 @@
+import { type PropType, defineComponent, h, nextTick, ref, watch } from 'vue'
+import { NUpload, NButton } from 'naive-ui'
+import type { UploadFileInfo } from 'naive-ui'
+import { type OnFinish, type OnError } from 'naive-ui/es/upload/src/interface'
+
+export default defineComponent({
+  props: {
+    modelValue: {
+      type: Array as PropType<UploadFileInfo[]>,
+      default: () => []
+    }
+  },
+  emits: ['update:modelValue'],
+  setup(props, { emit, attrs }) {
+    const fileList = ref<UploadFileInfo[]>([])
+    watch(fileList, (e) => {
+      emit('update:modelValue', 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: UploadFileInfo[]): void {
+      console.log('onChange called->', e)
+      nextTick(() => { fileList.value = e })
+    }
+
+    const handleError: OnError = ({ file, event }) => {
+      console.log('OnError called->', file, event)
+    }
+    const handleSuccess: OnFinish = ({ file, event }) => {
+      console.log('OnFinish called->', file, event)
+      const resInfo = event?.target as any
+      const resData = JSON.parse(resInfo.response ?? '{}')
+      file.url = resData.data?.url
+    }
+
+    return () => {
+      return h('div', null, {
+        default: () => [
+          h(NUpload, {
+            ...attrs,
+            'onUpdate:file-list': handleUpdate,
+            "file-list": fileList.value,
+            onError: handleError,
+            onFinish: handleSuccess,
+            'default-upload': true
+          }, {
+            default: () => [
+              h(
+                NButton,
+                {},
+                {
+                  default: () => [
+                    h('span', {
+                      class: 'icon--epic icon--epic--cloud-upload-outlined text-lg',
+                      style: { 'margin-right': '2px' }
+                    }),
+                    h('span', null, { default: () => '上传文件' })
+                  ]
+                }
+              )
+            ]
+          })
+        ]
+      })
+    }
+  }
+})

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

@@ -0,0 +1,83 @@
+import { type ComponentConfigModel } from "@epic-designer/utils";
+export default {
+  component: () => import("./uploadImage"),
+  groupName: "表单",
+  icon: "icon--epic--imagesmode-outline-rounded",
+  sort: 920,
+  defaultSchema: {
+    label: "上传图片",
+    type: "upload-image",
+    field: "uploadImage",
+    input: true,
+    componentProps: {
+      action: "https://examples.epicjs.cn/static/upload-img.json",
+    },
+  },
+  config: {
+    attribute: [
+      {
+        label: "字段名",
+        type: "input",
+        field: "field",
+      },
+      {
+        label: "标题",
+        type: "input",
+        field: "label",
+      },
+      {
+        label: "请求地址",
+        type: "input",
+        field: "componentProps.action",
+      },
+      {
+        label: "上传文件字段",
+        type: "input",
+        field: "componentProps.name",
+        componentProps: {
+          placeholder: "请输入",
+        },
+      },
+      {
+        label: "允许上传最大数量",
+        type: "number",
+        field: "componentProps.max",
+        componentProps: {
+          min: 0,
+          placeholder: "请输入",
+        },
+      },
+      {
+        label: "展示文件列表",
+        type: "switch",
+        field: "componentProps.showFileList",
+      },
+      {
+        label: "多选",
+        type: "switch",
+        field: "componentProps.multiple",
+      },
+      {
+        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/naiveUi/upload-image/uploadImage.ts

@@ -0,0 +1,151 @@
+import { type PropType, defineComponent, h, nextTick, ref, watch } from "vue";
+import { NUpload } from "naive-ui";
+import type { UploadFileInfo } from "naive-ui";
+import type { OnFinish, OnError } from "naive-ui/es/upload/src/interface";
+
+export default defineComponent({
+  props: {
+    modelValue: {
+      type: Array as PropType<UploadFileInfo[]>,
+      default: () => [],
+    },
+  },
+  emits: ["update:modelValue"],
+  setup(props, { emit, attrs }) {
+    const fileList = ref<UploadFileInfo[]>([]);
+
+    // const imgUrl = ref('')
+    // const visible = ref(false)
+    // const setVisible = (value: boolean): void => {
+    //   visible.value = value
+    // }
+
+    watch(fileList, (e) => {
+      emit("update:modelValue", 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: UploadFileInfo[]): void {
+      console.log("onChange called->", e);
+      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: string | undefined = info.file.response?.data?.url
+    //     if (!info.file.url && !url) {
+    //       info.file.status = 'error'
+    //       message.error('上传失败')
+    //       return
+    //     }
+    //     // 赋值url
+    //     info.file.url = url
+    //     info.file.thumbUrl = url
+    //   }
+    //
+    //   if (info.file.status === 'error') {
+    //     message.error('upload error')
+    //   }
+    // }
+
+    const handleSuccess: OnFinish = ({ file, event }) => {
+      console.log("OnFinish called->", file, event);
+      const resInfo = event?.target as any;
+      const resData = JSON.parse(resInfo.response ?? "{}");
+      file.url = resData.data?.url;
+    };
+    const handleError: OnError = ({ file, event }) => {
+      console.log("OnError called->", file, event);
+    };
+
+    // 上传前处理
+    // 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;
+    // }
+
+    /**
+     * 预览功能
+     * @param {*} e
+     */
+    // const handlePreview: OnPreview = (file) => {
+    //   console.log(file)
+    //   if (!file.url) return
+    //   imgUrl.value = file.url
+    //   setVisible(true)
+    // }
+
+    return () => {
+      // const type = attrs.type;
+      return h(
+        "div",
+        {
+          class: "epic-upload-image",
+        },
+        {
+          default: () => [
+            h(
+              NUpload,
+              {
+                ...attrs,
+                "list-type": "image-card",
+                accept: "image/gif,image/jpeg,image/jpg,image/png,image/svg",
+                "onUpdate:file-list": handleUpdate,
+                "file-list": fileList.value,
+                onFinish: handleSuccess,
+                onError: handleError,
+              },
+              {
+                default: () => [
+                  h(
+                    "div",
+                    { style: { "text-align": "center" } },
+                    {
+                      default: () => [
+                        h("span", {
+                          class: "icon--epic icon--epic--cloud-upload-outlined text-md mr-2px text-lg",
+                        }),
+                        h(
+                          "div",
+                          { class: "ant-upload-text" },
+                          { default: () => "点击上传" }
+                        ),
+                      ],
+                    }
+                  ),
+                ],
+              }
+            ),
+          ],
+        }
+      );
+    };
+  },
+});

package/packages/ui/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@epic-designer/ui",
+  "version": "0.9.25",
+  "description": "epic-designer base ui",
+  "main": "index.ts",
+  "scripts": {},
+  "author": "kchengz",
+  "devDependencies": {
+    "ant-design-vue": "^4.2.5",
+    "element-plus": "^2.8.3",
+    "naive-ui": "^2.39.0",
+    "vite-plugin-dts": "^4.2.1"
+  },
+  "dependencies": {
+    "dayjs": "^1.11.13"
+  }
+}

package/packages/ui/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/utils/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/utils/__test__/common/debounce.test.ts

@@ -0,0 +1,44 @@
+import { describe, it, expect, vi } from 'vitest';
+import { debounce } from '../../';
+
+describe('debounce', () => {
+  it('应在指定延迟时间后调用处理函数', () => {
+    const handler = vi.fn(); // 创建一个模拟函数
+    const delay = 100;
+    const debouncedFunction = debounce(handler, delay);
+
+    // 立即调用防抖函数
+    debouncedFunction();
+    
+    // 验证处理函数尚未被调用
+    expect(handler).not.toHaveBeenCalled();
+    
+    // 等待一段时间稍长于延迟
+    return new Promise((resolve) => setTimeout(resolve, delay + 10))
+      .then(() => {
+        // 验证处理函数在延迟后被调用
+        expect(handler).toHaveBeenCalled();
+      });
+  });
+
+  it('如果在延迟时间内多次调用，处理函数应仅调用一次', () => {
+    const handler = vi.fn();
+    const delay = 100;
+    const debouncedFunction = debounce(handler, delay);
+
+    // 快速多次调用防抖函数
+    debouncedFunction();
+    debouncedFunction();
+    debouncedFunction();
+    
+    // 验证处理函数尚未被调用
+    expect(handler).not.toHaveBeenCalled();
+    
+    // 等待延迟时间
+    return new Promise((resolve) => setTimeout(resolve, delay + 10))
+      .then(() => {
+        // 验证处理函数仅被调用一次
+        expect(handler).toHaveBeenCalledTimes(1);
+      });
+  });
+});

package/packages/utils/__test__/common/deepClone.test.ts

@@ -0,0 +1,42 @@
+import { describe, it, expect } from 'vitest';
+import { deepClone } from '../../';
+
+describe('deepClone', () => {
+  it('应正确拷贝基本数据类型', () => {
+    const num = 42;
+    const str = 'hello';
+    const bool = true;
+
+    expect(deepClone(num)).toBe(num);
+    expect(deepClone(str)).toBe(str);
+    expect(deepClone(bool)).toBe(bool);
+  });
+
+  it('应正确拷贝对象和数组', () => {
+    const obj = { a: 1, b: [2, 3], c: { d: 4 } };
+    const clonedObj = deepClone(obj);
+
+    expect(clonedObj).toEqual(obj);
+    expect(clonedObj).not.toBe(obj); // 确保是深拷贝
+    expect(clonedObj.b).not.toBe(obj.b);
+    expect(clonedObj.c).not.toBe(obj.c);
+  });
+
+  it('应处理循环引用', () => {
+    const obj: any = { a: 1 };
+    obj.b = obj; // 循环引用
+
+    const clonedObj = deepClone(obj);
+
+    expect(clonedObj).toEqual(obj);
+    expect(clonedObj).not.toBe(obj); // 确保是深拷贝
+    expect(clonedObj.b).toBe(clonedObj); // 确保循环引用被正确处理
+  });
+
+
+  it('应处理空对象和空数组', () => {
+    expect(deepClone({})).toEqual({});
+    expect(deepClone([])).toEqual([]);
+  });
+
+});

package/packages/utils/__test__/common/deepCompareAndModify.test.ts

@@ -0,0 +1,84 @@
+import { describe, it, expect } from 'vitest';
+import { deepCompareAndModify } from '../../';
+
+describe('deepCompareAndModify', () => {
+    it('应该将 obj2 的属性复制给 obj1', () => {
+        const obj1 = { a: 1, b: 2 };
+        const obj2 = { a: 10, c: 3 };
+
+        deepCompareAndModify(obj1, obj2);
+
+        expect(obj1).toEqual({ a: 10, c: 3 });
+    });
+
+    it('应该递归复制嵌套对象的属性', () => {
+        const obj1 = { a: { b: 1 } };
+        const obj2 = { a: { b: 2, c: 3 } };
+
+        deepCompareAndModify(obj1, obj2);
+
+        expect(obj1).toEqual({ a: { b: 2, c: 3 } });
+    });
+
+    it('应该处理数组属性并递归复制', () => {
+        const obj1 = { a: [1, 2] };
+        const obj2 = { a: [3, 4, 5] };
+
+        deepCompareAndModify(obj1, obj2);
+
+        expect(obj1).toEqual({ a: [3, 4, 5] });
+    });
+
+    it('如果 shouldDelete 为 true，应该删除 obj1 中 obj2 不存在的属性', () => {
+        const obj1 = { a: 1, b: 2, c: 3 };
+        const obj2 = { a: 10, c: 30 };
+
+        deepCompareAndModify(obj1, obj2, true);
+
+        expect(obj1).toEqual({ a: 10, c: 30 });
+    });
+
+    it('如果 shouldDelete 为 false，不应删除 obj1 中 obj2 不存在的属性', () => {
+        const obj1 = { a: 1, b: 2, c: 3 };
+        const obj2 = { a: 10, c: 30 };
+
+        deepCompareAndModify(obj1, obj2, false);
+
+        expect(obj1).toEqual({ a: 10, c: 30, b: 2 });
+    });
+
+    it('应该正确处理 obj1 是数组的情况', () => {
+        const obj1 = [1, 2, 3];
+        const obj2 = [3, 4, 5];
+
+        deepCompareAndModify(obj1, obj2);
+
+        expect(obj1).toEqual([3, 4, 5]);
+    });
+
+    it('如果 obj1 的属性 a 是数组且 obj2 的属性 a 是对象，应将 obj1.a 变为对象', () => {
+        const obj1 = { a: [1, 2, 3], b: 4 };
+        const obj2 = { a: { x: 10, y: 20 } };
+
+        deepCompareAndModify(obj1, obj2, false);
+        expect(obj1).toEqual({ a: { x: 10, y: 20 }, b: 4 });
+    });
+
+    it('如果 obj1 的属性 a 是数组且 obj2 的属性 a 是对象，且 shouldDelete 为 true，应删除 obj1 中不在 obj2 中的属性', () => {
+        const obj1 = { a: [1, 2, 3], b: 4, c: 5 };
+        const obj2 = { a: { x: 10, y: 20 } };
+
+        deepCompareAndModify(obj1, obj2, true);
+
+        expect(obj1).toEqual({ a: { x: 10, y: 20 } });
+    });
+
+    it('如果 obj1 的属性 a 是数组且 obj2 的属性 a 是对象，且 shouldDelete 为 false，应保留 obj1 中不在 obj2 中的属性', () => {
+        const obj1 = { a: [1, 2, 3], b: 4, c: 5 };
+        const obj2 = { a: { x: 10, y: 20 } };
+
+        deepCompareAndModify(obj1, obj2, false);
+
+        expect(obj1).toEqual({ a: { x: 10, y: 20 }, b: 4, c: 5 });
+    });
+});