@quansitech/antd-admin 1.0.0

package/lib/schemaHandler.ts

@@ -0,0 +1,122 @@
+import {ProColumnType, ProSchema} from "@ant-design/pro-components";
+import {UploadFile} from "antd";
+import http from "./http";
+
+type Handler = (schema: any) => ProSchema | ProColumnType
+
+const uploadValidator = (_: unknown, value: UploadFile[]) => {
+    return new Promise((resolve, reject) => {
+        if (!value) {
+            resolve(true)
+            return
+        }
+        for (let i = 0; i < value.length; i++) {
+            switch (value[i].status) {
+                case 'error':
+                    reject('存在上传失败文件，请删除失败文件后重新上传')
+                    return
+                case 'uploading':
+                    reject('文件上传中，请稍后')
+                    return
+            }
+        }
+        resolve(true)
+    })
+}
+
+const uploadTransform = (value?: UploadFile[], _name?: string) => {
+    if (value instanceof Array) {
+        return value.filter(file => file.status === 'done')
+            .map((file: UploadFile) => {
+                return file.response?.file_id
+            }).join(',')
+    }
+    return value
+}
+
+export const commonHandler: Handler = schema => {
+    if (schema.valueEnum) {
+        schema.valueEnum = new Map(schema.valueEnum)
+    }
+    return schema
+}
+
+export const schemaHandler: Record<string, Handler> = {
+    dateTimeRange: schema => {
+        if (schema.search !== false) {
+            return {
+                ...schema,
+                search: {
+                    transform(value) {
+                        if (value) {
+                            return value.join(' - ')
+                        }
+                        return value
+                    }
+                }
+            }
+        }
+
+        return {
+            ...schema,
+        }
+    },
+    dateRange: schema => {
+        if (schema.search !== false) {
+            return {
+                ...schema,
+                search: {
+                    transform(value) {
+                        if (value) {
+                            return value.join(' - ')
+                        }
+                        return value
+                    }
+                }
+            }
+        }
+
+        return {
+            ...schema,
+        }
+    },
+
+    // 上传
+    image: schema => {
+        schema.formItemProps.rules.push({
+            validator: uploadValidator,
+        })
+
+        return {
+            ...schema,
+            transform: uploadTransform,
+        }
+    },
+    file: schema => {
+        schema.formItemProps.rules.push({
+            validator: uploadValidator,
+        })
+
+        return {
+            ...schema,
+            transform: uploadTransform,
+        }
+    },
+
+    select(schema) {
+        schema.searchOnChange = true
+        if (schema.fieldProps?.searchUrl) {
+            return {
+                ...schema,
+                request: async params => {
+                    const res = await http(schema.fieldProps.searchUrl, {params})
+                    return res.data.map((item: { value: any, label?: string }) => ({
+                        label: item.label || item.value,
+                        value: item.value
+                    }))
+                }
+            }
+        }
+        return schema
+    },
+}

package/lib/upload.ts

@@ -0,0 +1,177 @@
+import http from "./http";
+import {AxiosError} from "axios";
+import {UploadRequestOption} from "rc-upload/lib/interface";
+import {GetProp, message, Upload, UploadFile, UploadProps} from "antd";
+import {md5} from "js-md5"
+
+type QsUploadFile = UploadFile & {
+    hash_id?: string,
+}
+
+export async function customRequest(options: UploadRequestOption & {
+    file: QsUploadFile
+}) {
+    const policyRes = await http({
+        url: options.action,
+        method: 'get',
+        headers: options.headers,
+        fetchOptions: {
+            noHandle: true
+        },
+        params: {
+            title: options.file.name,
+            hash_id: options.file.hash_id,
+            file_type: options.file?.type || '' as string
+        }
+    })
+    if (policyRes.data.status) {
+        options.onSuccess && options.onSuccess({
+            ...policyRes.data,
+            url: policyRes.data.url || policyRes.data.file_url
+        })
+        return
+    }
+
+    const formData = new FormData();
+    let url = ''
+    if (policyRes.data.server_url) {
+        url = policyRes.data.server_url
+    } else if (policyRes.data.url) {
+        url = policyRes.data.url
+    }
+    if (policyRes.data.params) {
+        for (const key in policyRes.data.params) {
+            formData.append(key, policyRes.data.params[key])
+        }
+    }
+
+    formData.append('file', options.file)
+    try {
+        const res = await http({
+            url: url,
+            method: 'post',
+            data: formData,
+            fetchOptions: {
+                noHandle: true
+            },
+            headers: options.headers,
+            onUploadProgress(ev) {
+                options.onProgress && options.onProgress({
+                    percent: (ev.progress || 0) * 100
+                })
+            },
+        })
+
+        if (res.data.info) {
+            message.error(res.data.info)
+            options.onError && options.onError(new Error(res.data.info), res.data)
+            return
+        }
+
+        options.onSuccess && options.onSuccess({
+            ...res.data,
+            url: res.data.url || res.data.file_url
+        })
+    } catch (e) {
+        if (e instanceof AxiosError) {
+            options.onError && options.onError(e, e.response?.data)
+        }
+        if (e instanceof Error) {
+            options.onError && options.onError({
+                name: e.name,
+                message: e.message,
+                method: options.method,
+                url: options.action
+            })
+        }
+        throw e
+    }
+}
+
+export type FileType = Parameters<GetProp<UploadProps, 'beforeUpload'>>[0];
+
+export function getBase64(file: FileType): Promise<string> {
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.readAsDataURL(file);
+        reader.onload = () => resolve(reader.result as string);
+        reader.onerror = (error) => reject(error);
+    })
+}
+
+/**
+ * 计算文件MD5
+ * https://github.com/quansitech/file-md5-wasm/blob/master/js/calc_file_hash.js
+ * @param file
+ */
+export function calc_file_hash(file: File) {
+    const MD5_RANGE_SIZE = 10 * 1024 * 1024;
+    const CUT_LIMIT = 40 * 1024 * 1024;
+
+    function makeMd5Range(fileSize: number) {
+        if (CUT_LIMIT > fileSize) {
+            return [[0, fileSize]];
+        }
+
+        // MD5_RANGE_SIZE设置为10
+        const first = [0.0, MD5_RANGE_SIZE];
+        const last = [fileSize - MD5_RANGE_SIZE, fileSize];
+
+        // 中间段算法
+        const rangeMod = fileSize - 3.0 * MD5_RANGE_SIZE;
+        const midStart = fileSize % rangeMod;
+        const middle = [MD5_RANGE_SIZE + midStart, MD5_RANGE_SIZE + midStart + MD5_RANGE_SIZE];
+
+        return [first, middle, last];
+    }
+
+    return new Promise<string>(function (resolve, reject) {
+        const fileSize = file.size;
+        const range = makeMd5Range(fileSize);
+
+        let index = 0;
+        const hash = md5.create();// 创建MD5哈希对象
+
+        const reader = new FileReader();
+
+        reader.onload = function (e) {
+            // 处理当前分块的读取结果
+            const chunkData = e.target?.result;
+
+            hash.update(chunkData as string); // 更新哈希计算结果
+
+            if (index < range.length - 1) {
+                index++;
+                readNextChunk(range, index);
+            } else {
+                const fileMD5 = hash.hex(); // 计算文件的最终MD5哈希值
+
+                resolve(fileMD5);
+            }
+        };
+
+        reader.onerror = function (e) {
+            reject(e);
+
+        };
+
+        function readNextChunk(chunkRange: number[][], index: number) {
+            const chunk = file.slice(chunkRange[index][0], chunkRange[index][1]);
+            reader.readAsArrayBuffer(chunk);
+        }
+
+        readNextChunk(range, index);
+    });
+
+}
+
+export async function beforeUpload(file: File & {
+    hash_id?: string,
+}, fileList: UploadFile[], allFileList: UploadFile[]) {
+    file.hash_id = await calc_file_hash(file)
+    const f = allFileList.filter((item: QsUploadFile) => !!item.hash_id).find((item: QsUploadFile) => item.hash_id === file.hash_id)
+    if (f) {
+        message.error(file.name + '文件已上传')
+        return Upload.LIST_IGNORE
+    }
+}

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@quansitech/antd-admin",
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "files": [
+    "components",
+    "lib"
+  ],
+  "dependencies": {
+    "@ant-design/pro-components": "^2.7.15",
+    "@inertiajs/react": "^1.2.0",
+    "antd": "^5.20.5",
+    "antd-img-crop": "^4.23.0",
+    "axios": "^1.7.7",
+    "lodash": "^4.17.21",
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0",
+    "js-md5": "^0.8.3",
+    "prettier": "^3.3.3"
+  },
+  "devDependencies": {
+    "@types/lodash": "^4.14.193",
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0"
+  },
+  "author": "958691165@qq.com",
+  "license": "MIT",
+  "description": "qscmf antd-admin前端组件",
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/readme.md

@@ -0,0 +1,128 @@
+# Qs-antd-admin
+
+该项目作为qs-cmf的后台前端组件库，基于[ant-design-pro](https://procomponents.ant.design/components)
+
+## 安装
+
+```shell
+npm install @quansitech/antd-admin
+```
+
+## 使用参考
+
+### valueType列表
+
+参考 [ant-design-pro#valueType](https://procomponents.ant.design/components/schema#valuetype-%E5%88%97%E8%A1%A8)
+
+## 自定义组件
+
+对外暴露 [container](./lib/container.ts) 供外部调用
+
+```ts
+import container from "@quansitech/antd-admin/lib/container";
+
+container.register('[组件名]', () => import('[组件路径]'));
+```
+
+### 通用
+
+#### 通用Column Schema
+
+- 组件名前缀：``` Column. ```
+- 用途：表单项组件（非只读模式）、表格列编辑组件、表格搜索项组件
+- 示例：
+
+```tsx
+// [组件.tsx]
+import {ColumnProps} from "@quansitech/antd-admin/compontents/Column/types";
+
+export default function (props: ColumnProps) {
+
+    return <>
+        组件内容
+    </>
+}
+
+// [app.tsx]
+import container from "@quansitech/antd-admin/lib/container";
+
+container.register('Column.组件名', () => import('[组件路径]'));
+```
+
+- 若要补充组件库，请把组件放``` compontents/Column/ ``` 目录下
+
+#### 只读Column Schema
+
+- 组件名前缀：``` Column.Readonly. ```
+- 用途：表单项组件（只读模式）、表格列组件
+- 示例：
+
+```tsx
+// [组件.tsx]
+import {ColumnProps} from "@quansitech/antd-admin/compontents/Column/Readonly/types";
+
+export default function (props: ColumnProps) {
+
+    return <>
+        组件内容
+    </>
+}
+
+// [app.tsx]
+import container from "@quansitech/antd-admin/lib/container";
+
+container.register('Column.Readonly.组件名', () => import('[组件路径]'));
+```
+
+- 若要补充组件库，请把组件放``` compontents/Column/Readonly/ ``` 目录下
+
+### 表格Table
+
+#### 工具栏操作组件
+
+- 组件名前缀：``` Table.Column.Action. ```
+- 示例：
+
+```tsx
+// [组件.tsx]
+
+import {TableActionProps} from "@quansitech/antd-admin/compontents/Table/Action/types";
+
+export default function (props: TableActionProps) {
+    return <Button>{props.title}</Button>
+}
+
+// [app.tsx]
+
+import container from "@quansitech/antd-admin/lib/container";
+
+container.register('Table.Column.Action.组件名', () => import('[组件路径]'));
+
+```
+
+- 若要补充组件库，请把组件放``` compontents/Table/Action/ ``` 目录下
+
+#### 行操作组件
+
+- 组件名前缀：``` Table.Column.Option ```
+- 示例：
+
+```tsx
+// [组件.tsx]
+
+import {TableColumnOptionProps} from "@quansitech/antd-admin/compontents/Table/Column/Option/types";
+
+export default function (props: TableColumnOptionProps) {
+    <a onClick={onClick}>{props.title}</a>
+}
+
+// [app.tsx]
+
+import container from "@quansitech/antd-admin/lib/container";
+
+container.register('Table.Column.Option.组件名', () => import('[组件路径]'));
+
+```
+
+- 若要补充组件库，请把组件放``` compontents/Table/Column/Option/ ``` 目录下
+