pcm-agents 0.6.11 → 0.6.13

package/dist/collection/components/pcm-upload/pcm-upload.js

@@ -0,0 +1,408 @@
+import { h } from "@stencil/core";
+import { FileUploadState, formatFileSize, uploadFileToBackend } from "../../utils/utils";
+import { Message } from "../../services/message.service";
+import { SentryReporter } from "../../utils/sentry-reporter";
+export class PcmUpload {
+    /**
+     * 是否支持多文件上传
+     */
+    multiple = false;
+    /**
+     * 是否开启移动端上传（仅PC端生效）
+     */
+    mobileUploadAble = false;
+    /**
+     * label内容
+     */
+    labelText = '上传文件';
+    /**
+     * 支持的文件后缀列表（需要带上小数点.）
+     */
+    acceptFileSuffixList = [];
+    /**
+     * 最大文件数
+     */
+    maxFileCount = Infinity;
+    /**
+     * 最大文件大小
+     */
+    maxFileSize = Infinity;
+    /**
+     * 上传请求头
+     */
+    uploadHeaders;
+    /**
+     * 上传请求参数
+     */
+    uploadParams;
+    /**
+     * 上传失败监听
+     */
+    uploadFailed;
+    /**
+     * 上传文件变化监听
+     */
+    uploadChange;
+    hostElement;
+    selectedFiles = null;
+    async getIsUploading() {
+        return !!this.selectedFiles?.some(item => item.state === FileUploadState.Uploading);
+    }
+    handleUploadClick = () => {
+        const fileInput = this.hostElement.shadowRoot?.querySelector('.file-input');
+        fileInput?.click();
+    };
+    clearSelectedFile = () => {
+        const fileInput = this.hostElement.shadowRoot?.querySelector('.file-input');
+        if (fileInput) {
+            fileInput.value = '';
+        }
+    };
+    async uploadFile(file) {
+        try {
+            const result = await uploadFileToBackend(file, this.uploadHeaders || {}, this.uploadParams || {});
+            return {
+                ...result,
+                file,
+                file_name: file.name,
+                file_size: file.size,
+                state: FileUploadState.Success,
+            };
+        }
+        catch (error) {
+            this.clearSelectedFile();
+            SentryReporter.captureError(error, {
+                action: 'uploadFile',
+                component: 'pcm-mnms-modal',
+                title: '文件上传失败'
+            });
+            this.uploadFailed.emit({
+                error: error,
+                message: '文件上传失败，请重试'
+            });
+            return {
+                file,
+                error,
+                state: FileUploadState.Failed,
+            };
+        }
+    }
+    handleFileChange = async (event) => {
+        const input = event.target;
+        if (this.multiple) {
+            // 多选
+        }
+        else {
+            // 单选
+            const file = input.files?.[0];
+            if (!file)
+                return;
+            // 检测文件是否符合后缀名
+            if (this.acceptFileSuffixList?.length) {
+                const suffix = '.' + file.name.split('.').pop()?.toLowerCase();
+                if (!this.acceptFileSuffixList.includes(suffix)) {
+                    Message.info(`请上传 ${this.acceptFileSuffixList.join('、')} 格式的文件`);
+                    return;
+                }
+            }
+            // 检测文件大小是否超出限制
+            if (this.maxFileSize < file.size) {
+                Message.info(`文件大小不能超过 ${formatFileSize(this.maxFileSize) ?? '-'}`);
+                return;
+            }
+            this.selectedFiles = [{
+                    file,
+                    file_name: file.name,
+                    file_size: file.size,
+                    state: FileUploadState.Uploading,
+                    cos_key: '',
+                    error: undefined,
+                }];
+            const uploadResult = await this.uploadFile(file);
+            this.selectedFiles = [uploadResult];
+            this.clearSelectedFile();
+            this.emitUploadChange();
+        }
+    };
+    emitUploadChange = () => {
+        this.uploadChange.emit(this.selectedFiles?.map?.(item => ({
+            cos_key: item.cos_key,
+            file_name: item.file_name,
+            file_size: item.file_size,
+            ext: item.ext,
+        })));
+    };
+    uploadBtn() {
+        return h("div", null, !!this.mobileUploadAble && h("pcm-mobile-upload-btn", { multiple: this.multiple, acceptFileSuffixList: this.acceptFileSuffixList, maxFileCount: this.maxFileCount, maxFileSize: this.maxFileSize, uploadHeaders: this.uploadHeaders, uploadParams: this.uploadParams, onOk: e => {
+                this.selectedFiles = [
+                    ...(this.selectedFiles ?? []),
+                    ...(e.detail ?? []).map(item => ({
+                        ...item,
+                        state: FileUploadState.Success,
+                    }))
+                ];
+                this.emitUploadChange();
+            } }), h("div", { class: "upload-placeholder", onClick: this.handleUploadClick }, h("img", { src: 'https://pub.pincaimao.com/static/web/images/home/i_upload.png' }), h("p", { class: 'upload-text' }, "\u70B9\u51FB\u4E0A\u4F20\u7B80\u5386"), h("p", { class: "upload-hint" }, !!this.acceptFileSuffixList?.length && h("p", null, "\u652F\u6301 ", this.acceptFileSuffixList.join('、'), " \u683C\u5F0F\u3002"), !!this.maxFileSize && this.maxFileSize !== Infinity && h("p", null, "\u6587\u4EF6\u5927\u5C0F\u4E0D\u80FD\u8D85\u8FC7 ", formatFileSize(this.maxFileSize) ?? '', "\u3002"), !!this.maxFileCount && this.maxFileCount !== Infinity && h("p", null, "\u6700\u591A\u4E0A\u4F20 ", this.maxFileCount, " \u4E2A\u6587\u4EF6\u3002"))));
+    }
+    render() {
+        return (h("div", { key: 'faec753d60f8c6bfb1e3996b67552f8a12155c07' }, h("div", { key: '55e1e83f962dc17c033885869d8cb7e73b65bb95', class: "resume-upload-section" }, h("label", { key: '80cb959d043a015267bfb55c20bae44afd509ebd' }, this.labelText), h("div", { key: 'e7aa8c65761f945287de858ea7b3ad036fb4cb6d', class: "upload-area" }, h("div", { key: '48bef805f845bdd6e6a542bccbc1d2b8d30b4a02' }, this.selectedFiles?.map?.((item, index) => {
+            return h("div", { class: "file-item" }, h("div", { class: "file-item-content" }, h("span", { class: "file-icon" }, "\uD83D\uDCDD"), h("span", { class: "file-name", style: item.state === FileUploadState.Failed ? { color: 'red', textDecoration: 'line-through' } : undefined }, item?.file_name), item.state === FileUploadState.Failed && h("span", { style: { color: 'red', marginLeft: '4px' } }, "(", item.error?.message ?? '上传失败', ")")), h("button", { class: "remove-file", onClick: (e) => {
+                    e.stopPropagation();
+                    this.selectedFiles = this.selectedFiles?.filter((_, itemIndex) => index !== itemIndex);
+                } }, "\u00D7"));
+        })), this.multiple ? h("div", null, (this.selectedFiles?.length ?? 0) < this.maxFileCount && this.uploadBtn()) : h("div", null, !this.selectedFiles?.length && this.uploadBtn()))), h("input", { key: '480b2f35655d4cdb5a99c058e4b894baf0e4c6a8', type: "file", class: "file-input", onChange: this.handleFileChange })));
+    }
+    static get is() { return "pcm-upload"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pcm-upload.css", "../../global/global.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pcm-upload.css", "../../global/global.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "multiple": {
+                "type": "boolean",
+                "attribute": "multiple",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u662F\u5426\u652F\u6301\u591A\u6587\u4EF6\u4E0A\u4F20"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "mobileUploadAble": {
+                "type": "boolean",
+                "attribute": "mobile-upload-able",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u662F\u5426\u5F00\u542F\u79FB\u52A8\u7AEF\u4E0A\u4F20\uFF08\u4EC5PC\u7AEF\u751F\u6548\uFF09"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "labelText": {
+                "type": "string",
+                "attribute": "label-text",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "label\u5185\u5BB9"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'\u4E0A\u4F20\u6587\u4EF6'"
+            },
+            "acceptFileSuffixList": {
+                "type": "unknown",
+                "attribute": "accept-file-suffix-list",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u652F\u6301\u7684\u6587\u4EF6\u540E\u7F00\u5217\u8868\uFF08\u9700\u8981\u5E26\u4E0A\u5C0F\u6570\u70B9.\uFF09"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "maxFileCount": {
+                "type": "number",
+                "attribute": "max-file-count",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u6700\u5927\u6587\u4EF6\u6570"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "Infinity"
+            },
+            "maxFileSize": {
+                "type": "number",
+                "attribute": "max-file-size",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u6700\u5927\u6587\u4EF6\u5927\u5C0F"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "Infinity"
+            },
+            "uploadHeaders": {
+                "type": "unknown",
+                "attribute": "upload-headers",
+                "mutable": false,
+                "complexType": {
+                    "original": "Record<string, any>",
+                    "resolved": "{ [x: string]: any; }",
+                    "references": {
+                        "Record": {
+                            "location": "global",
+                            "id": "global::Record"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u4E0A\u4F20\u8BF7\u6C42\u5934"
+                },
+                "getter": false,
+                "setter": false
+            },
+            "uploadParams": {
+                "type": "unknown",
+                "attribute": "upload-params",
+                "mutable": false,
+                "complexType": {
+                    "original": "Record<string, any>",
+                    "resolved": "{ [x: string]: any; }",
+                    "references": {
+                        "Record": {
+                            "location": "global",
+                            "id": "global::Record"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u4E0A\u4F20\u8BF7\u6C42\u53C2\u6570"
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "selectedFiles": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "uploadFailed",
+                "name": "uploadFailed",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u4E0A\u4F20\u5931\u8D25\u76D1\u542C"
+                },
+                "complexType": {
+                    "original": "UploadFailedEvent",
+                    "resolved": "{ error: Error; message: string; }",
+                    "references": {
+                        "UploadFailedEvent": {
+                            "location": "global",
+                            "id": "global::UploadFailedEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "uploadChange",
+                "name": "uploadChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u4E0A\u4F20\u6587\u4EF6\u53D8\u5316\u76D1\u542C"
+                },
+                "complexType": {
+                    "original": "FileUploadResponse[]",
+                    "resolved": "FileUploadResponse[]",
+                    "references": {
+                        "FileUploadResponse": {
+                            "location": "import",
+                            "path": "../../utils/utils",
+                            "id": "src/utils/utils.ts::FileUploadResponse"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "getIsUploading": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "hostElement"; }
+}
+//# sourceMappingURL=pcm-upload.js.map

package/dist/collection/components/pcm-upload/pcm-upload.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pcm-upload.js","sourceRoot":"","sources":["../../../../src/components/pcm-upload/pcm-upload.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, State, Element, Prop, Event, EventEmitter, Method } from \"@stencil/core\";\nimport { FileUploadResponse, FileUploadResponseWithState, FileUploadState, formatFileSize, uploadFileToBackend } from \"../../utils/utils\";\nimport { Message } from \"../../services/message.service\";\nimport { SentryReporter } from \"../../utils/sentry-reporter\";\n\n\n@Component({\n    tag: 'pcm-upload',\n    styleUrls: ['pcm-upload.css', '../../global/global.css'],\n    shadow: true,\n})\nexport class PcmUpload {\n    /**\n     * 是否支持多文件上传\n     */\n    @Prop() multiple: boolean = false;\n    /**\n     * 是否开启移动端上传（仅PC端生效）\n     */\n    @Prop() mobileUploadAble: boolean = false;\n    /**\n     * label内容\n     */\n    @Prop() labelText: string = '上传文件'\n    /**\n     * 支持的文件后缀列表（需要带上小数点.）\n     */\n    @Prop() acceptFileSuffixList: string[] = [];\n    /**\n     * 最大文件数\n     */\n    @Prop() maxFileCount: number = Infinity;\n    /**\n     * 最大文件大小\n     */\n    @Prop() maxFileSize: number = Infinity;\n    /**\n     * 上传请求头\n     */\n    @Prop() uploadHeaders?: Record<string, any>;\n    /**\n     * 上传请求参数\n     */\n    @Prop() uploadParams?: Record<string, any>;\n    /**\n     * 上传失败监听\n     */\n    @Event() uploadFailed: EventEmitter<UploadFailedEvent>;\n    /**\n     * 上传文件变化监听\n     */\n    @Event() uploadChange: EventEmitter<FileUploadResponse[]>;\n\n\n    @Element() hostElement: HTMLElement;\n    @State() selectedFiles: FileUploadResponseWithState[] | null = null;\n\n    @Method()\n    async getIsUploading() {\n        return !!this.selectedFiles?.some(item => item.state === FileUploadState.Uploading);\n    }\n\n    private handleUploadClick = () => {\n        const fileInput = this.hostElement.shadowRoot?.querySelector('.file-input') as HTMLInputElement;\n        fileInput?.click();\n    };\n\n    private clearSelectedFile = () => {\n        const fileInput = this.hostElement.shadowRoot?.querySelector('.file-input') as HTMLInputElement;\n        if (fileInput) {\n            fileInput.value = '';\n        }\n    };\n\n    private async uploadFile(file: File): Promise<FileUploadResponseWithState> {\n        try {\n            const result = await uploadFileToBackend(file, this.uploadHeaders || {}, this.uploadParams || {});\n            return {\n                ...result,\n                file,\n                file_name: file.name,\n                file_size: file.size,\n                state: FileUploadState.Success,\n            }\n        } catch (error) {\n            this.clearSelectedFile();\n            SentryReporter.captureError(error, {\n                action: 'uploadFile',\n                component: 'pcm-mnms-modal',\n                title: '文件上传失败'\n            });\n            this.uploadFailed.emit({\n                error: error,\n                message: '文件上传失败，请重试'\n            });\n            return {\n                file,\n                error,\n                state: FileUploadState.Failed,\n            }\n        }\n    }\n\n    private handleFileChange = async (event: Event) => {\n        const input = event.target as HTMLInputElement;\n\n        if (this.multiple) {\n            // 多选\n        } else {\n            // 单选\n            const file = input.files?.[0];\n            if (!file) return;\n            // 检测文件是否符合后缀名\n            if (this.acceptFileSuffixList?.length) {\n                const suffix = '.' + file.name.split('.').pop()?.toLowerCase();\n                if (!this.acceptFileSuffixList.includes(suffix)) {\n                    Message.info(`请上传 ${this.acceptFileSuffixList.join('、')} 格式的文件`);\n                    return;\n                }\n            }\n            // 检测文件大小是否超出限制\n            if (this.maxFileSize < file.size) {\n                Message.info(`文件大小不能超过 ${formatFileSize(this.maxFileSize) ?? '-'}`);\n                return;\n            }\n            this.selectedFiles = [{\n                file,\n                file_name: file.name,\n                file_size: file.size,\n                state: FileUploadState.Uploading,\n                cos_key: '',\n                error: undefined,\n            }];\n            const uploadResult = await this.uploadFile(file);\n            this.selectedFiles = [uploadResult];\n            this.clearSelectedFile();\n            this.emitUploadChange();\n        }\n    };\n\n    private emitUploadChange = () => {\n        this.uploadChange.emit(this.selectedFiles?.map?.(item => ({\n            cos_key: item.cos_key,\n            file_name: item.file_name,\n            file_size: item.file_size,\n            ext: item.ext,\n        })));\n    }\n\n    private uploadBtn() {\n        return <div>\n            {\n                !!this.mobileUploadAble && <pcm-mobile-upload-btn\n                    multiple={this.multiple}\n                    acceptFileSuffixList={this.acceptFileSuffixList}\n                    maxFileCount={this.maxFileCount}\n                    maxFileSize={this.maxFileSize}\n                    uploadHeaders={this.uploadHeaders}\n                    uploadParams={this.uploadParams}\n                    onOk={e => {\n                        this.selectedFiles = [\n                            ...(this.selectedFiles ?? []),\n                            ...(e.detail ?? []).map(item => ({\n                                ...item,\n                                state: FileUploadState.Success,\n                            }))\n                        ]\n                        this.emitUploadChange();\n                    }}\n                />\n            }\n            <div class=\"upload-placeholder\" onClick={this.handleUploadClick}>\n                <img src='https://pub.pincaimao.com/static/web/images/home/i_upload.png'></img>\n                <p class='upload-text'>点击上传简历</p>\n                <p class=\"upload-hint\">\n                    {\n                        !!this.acceptFileSuffixList?.length && <p>支持 {this.acceptFileSuffixList.join('、')} 格式。</p>\n                    }\n                    {\n                        !!this.maxFileSize && this.maxFileSize !== Infinity && <p>文件大小不能超过 {formatFileSize(this.maxFileSize) ?? ''}。</p>\n                    }\n                    {\n                        !!this.maxFileCount && this.maxFileCount !== Infinity && <p>最多上传 {this.maxFileCount} 个文件。</p>\n                    }\n                </p>\n            </div>\n        </div>\n    }\n\n    render() {\n        return (\n            <div>\n                <div class=\"resume-upload-section\">\n                    <label >{this.labelText}</label>\n                    <div class=\"upload-area\">\n                        <div>\n                            {\n                                this.selectedFiles?.map?.((item, index) => {\n                                    return <div class=\"file-item\">\n                                        <div class=\"file-item-content\">\n                                            <span class=\"file-icon\">📝</span>\n                                            <span class=\"file-name\" style={item.state === FileUploadState.Failed ? { color: 'red', textDecoration: 'line-through' } : undefined}>{item?.file_name}</span>\n                                            {\n                                                item.state === FileUploadState.Failed && <span style={{ color: 'red', marginLeft: '4px' }}>({item.error?.message ?? '上传失败'})</span>\n                                            }\n                                        </div>\n                                        <button class=\"remove-file\" onClick={(e) => {\n                                            e.stopPropagation();\n                                            this.selectedFiles = this.selectedFiles?.filter((_, itemIndex) => index !== itemIndex);\n                                        }}>×</button>\n                                    </div>\n                                })\n                            }\n                        </div>\n                        {\n                            this.multiple ? <div>\n                                {\n                                    (this.selectedFiles?.length ?? 0) < this.maxFileCount && this.uploadBtn()\n                                }\n                            </div> : <div>\n                                {\n                                    !this.selectedFiles?.length && this.uploadBtn()\n                                }\n                            </div>\n                        }\n                    </div>\n                </div>\n                <input\n                    type=\"file\"\n                    class=\"file-input\"\n                    onChange={this.handleFileChange}\n                />\n            </div>\n        )\n    }\n}"]}